From 19674310e792abe4a7a0b3f1dc75495b2236a86d Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Thu, 21 Sep 2023 22:03:40 +0200
Subject: [PATCH] added dynamic getMessages query

---
 .../operations/getChatwootContacts.ts         |  6 +--
 .../operations/getChatwootMessages.ts         | 20 ++++++++++
 src/routes/me/contacts/+page.svelte           |  1 -
 src/routes/me/conversations/+page.svelte      | 40 +++++++++++--------
 4 files changed, 46 insertions(+), 21 deletions(-)
 create mode 100644 .wundergraph/operations/getChatwootMessages.ts

diff --git a/.wundergraph/operations/getChatwootContacts.ts b/.wundergraph/operations/getChatwootContacts.ts
index dcadfa5..1d572df 100644
--- a/.wundergraph/operations/getChatwootContacts.ts
+++ b/.wundergraph/operations/getChatwootContacts.ts
@@ -4,12 +4,12 @@ import axios from 'axios';
 
 export default createOperation.query({
     input: z.object({
-        page: z.number().optional(),
+
     }),
-    handler: async ({ page = 1 }) => {
+    handler: async () => {
         console.log('Making request to Chatwoot API');
 
-        const { data } = await axios.get(`https://chatwoot.andert.me/api/v1/accounts/1/contacts?page=${page}`, {
+        const { data } = await axios.get(`https://chatwoot.andert.me/api/v1/accounts/1/contacts`, {
             headers: {
                 api_access_token: process.env.CHATWOOT_API_ACCESS_TOKEN
             },
diff --git a/.wundergraph/operations/getChatwootMessages.ts b/.wundergraph/operations/getChatwootMessages.ts
new file mode 100644
index 0000000..01b695b
--- /dev/null
+++ b/.wundergraph/operations/getChatwootMessages.ts
@@ -0,0 +1,20 @@
+// .wundergraph/operations/getChatwootMessages.ts
+import { createOperation, z } from '../generated/wundergraph.factory';
+import axios from 'axios';
+
+export default createOperation.query({
+    input: z.object({
+        conversationId: z.string(),
+    }),
+    handler: async ({ input }) => {
+        console.log('Making request to Chatwoot API');
+
+        const { data } = await axios.get(`https://chatwoot.andert.me/api/v1/accounts/1/conversations/${input.conversationId}/messages`, {
+            headers: {
+                api_access_token: process.env.CHATWOOT_API_ACCESS_TOKEN
+            },
+        });
+
+        return data;
+    },
+});
\ No newline at end of file
diff --git a/src/routes/me/contacts/+page.svelte b/src/routes/me/contacts/+page.svelte
index a2ba506..e98ae87 100644
--- a/src/routes/me/contacts/+page.svelte
+++ b/src/routes/me/contacts/+page.svelte
@@ -5,7 +5,6 @@
 
   const contactsQuery = createQuery({
     operationName: "getChatwootContacts",
-    variables: { page: 2 },
   });
 </script>
 
diff --git a/src/routes/me/conversations/+page.svelte b/src/routes/me/conversations/+page.svelte
index c9dcc60..71452f2 100644
--- a/src/routes/me/conversations/+page.svelte
+++ b/src/routes/me/conversations/+page.svelte
@@ -8,6 +8,8 @@
   });
 
   let selectedConversation = null;
+  let messagesQuery;
+
   function selectConversation(conversation) {
     selectedConversation = conversation;
   }
@@ -15,6 +17,13 @@
   $: if ($conversationsQuery.data && !selectedConversation) {
     selectedConversation = $conversationsQuery.data.data.payload[0];
   }
+
+  $: if (selectedConversation) {
+    messagesQuery = createQuery({
+      operationName: "getChatwootMessages",
+      input: { conversationId: selectedConversation.id },
+    });
+  }
 </script>
 
 <div class="h-full w-full overflow-scroll flex">
@@ -49,24 +58,21 @@
       </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}
+        {#if $messagesQuery && $messagesQuery.data}
+          {#each $messagesQuery.data.payload as message (message.id)}
+            {#if message.content_attributes.email && (message.content_attributes.email.content_type.includes("text/html") || message.content_attributes.email.content_type.includes("multipart/alternative"))}
               <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}
+                html={message.content_attributes.email.html_content.full}
+              />
+            {:else}
+              <div
+                class="p-4 max-w-xs mx-auto bg-blue-100 rounded-xl shadow-md flex items-center space-x-4"
+              >
+                <p class="text-black">{message.content}</p>
+              </div>
+            {/if}
+          {/each}
+        {/if}
       </div>
     {:else}
       <p>Select a conversation to view its details.</p>