87 lines
2.8 KiB
Svelte
87 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import MailViewer from "$lib/MailViewer.svelte";
|
|
import { createQuery } from "../../../lib/wundergraph";
|
|
import JsonViewer from "$lib/JsonViewer.svelte";
|
|
|
|
const conversationsQuery = createQuery({
|
|
operationName: "getChatwootConversations",
|
|
});
|
|
|
|
let selectedConversation = null;
|
|
function selectConversation(conversation) {
|
|
selectedConversation = conversation;
|
|
}
|
|
|
|
$: if ($conversationsQuery.data && !selectedConversation) {
|
|
selectedConversation = $conversationsQuery.data.data.payload[0];
|
|
}
|
|
</script>
|
|
|
|
<div class="h-full w-full overflow-scroll flex">
|
|
<div class="w-1/3 h-full overflow-scroll">
|
|
{#if $conversationsQuery.isLoading}
|
|
<p>Loading...</p>
|
|
{:else if $conversationsQuery.error}
|
|
Error: <JsonViewer json="$conversationsQuery.error}" />
|
|
{:else}
|
|
{#each $conversationsQuery.data.data.payload as conversation (conversation.id)}
|
|
<div
|
|
class="m-1 p-2 border border-gray-200 rounded-md hover:bg-gray-100 cursor-pointer"
|
|
on:click={() => selectConversation(conversation)}
|
|
>
|
|
<h2 class="text-lg font-semibold">
|
|
{conversation.meta.sender.name}
|
|
</h2>
|
|
<p>{conversation.messages[0].content.slice(0, 100)}...</p>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
<div class="w-2/3 h-full overflow-scroll relative">
|
|
{#if selectedConversation}
|
|
<div class="p-4 bg-white z-10 sticky top-0 left-0">
|
|
<h2 class="font-bold text-xl">
|
|
{selectedConversation.meta.sender.name}
|
|
</h2>
|
|
<p>
|
|
{selectedConversation.id} - {selectedConversation.meta.sender.email}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-4 px-4">
|
|
{#each selectedConversation.messages as message (message.id)}
|
|
{#if message.content_type == "incoming_email"}
|
|
{#if selectedConversation.last_non_activity_message.content != message.content}
|
|
<MailViewer
|
|
html={selectedConversation.last_non_activity_message
|
|
.content_attributes.email.html_content.full}
|
|
/>{/if}
|
|
<MailViewer
|
|
html={message.content_attributes.email.html_content.full}
|
|
/>
|
|
{:else}
|
|
{#if selectedConversation.last_non_activity_message.content != message.content}{selectedConversation
|
|
.last_non_activity_message.content}{/if}
|
|
<p class="bg-slate-400 py-1 px-2 rounded-sm my-2">
|
|
{message.content}
|
|
</p>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<p>Select a conversation to view its details.</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 0.5em 1em;
|
|
background-color: #007bff;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 0.25em;
|
|
}
|
|
</style>
|