From d958f900533fff8649af785d12dc58cf47f1b704 Mon Sep 17 00:00:00 2001
From: Lion Arar <lion@targointernet.com>
Date: Mon, 6 Oct 2025 14:20:51 -0400
Subject: [PATCH] feat: User message now disappears faster instead of waiting
 for response, and chatbox shows a 'Thinking...' message while the user awaits
 the n8n response.

---
 .../chatbot/components/conversation-box.vue   | 41 ++++++++++++++++++-
 .../chatbot/components/dialogue-content.vue   | 33 ++++++++++++++-
 src/modules/chatbot/composables/chat-api.ts   |  5 ++-
 .../chatbot/services/messageService.ts        |  1 -
 src/modules/chatbot/types/dialogue-message.ts |  9 ++--
 src/stores/message-store.ts                   |  2 -
 6 files changed, 80 insertions(+), 11 deletions(-)

diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue
index 704b672..153ea62 100644
--- a/src/modules/chatbot/components/conversation-box.vue
+++ b/src/modules/chatbot/components/conversation-box.vue
@@ -10,8 +10,47 @@ const { messages } = useChatStore();
 const { sendMessage } = useChatApi();
 
 const handleSend = async () => {
-  await sendMessage(text.value);
+  if (!text.value.trim()) return;
+  const userMessage = text.value;
   text.value = '';
+
+  messages.push({
+    text: userMessage,
+    sent: true,
+    isThinking: false,
+  })
+
+  const thinkingMessage = {
+    text: "Thinking...",
+    sent: false,
+    isThinking: true
+  }
+  messages.push(thinkingMessage)
+
+  try {
+    const aiResponse = await sendMessage(userMessage);
+
+    const index = messages.indexOf(thinkingMessage);
+    if (index !== -1) {
+      messages.splice(index, 1, {
+        text: aiResponse.text,
+        sent: false,
+        isThinking: false,
+      })
+    }
+  }
+  catch (error) {
+    const index = messages.indexOf(thinkingMessage);
+    if (index !== -1) {
+      messages.splice(index, 1, {
+        text: "Sorry, something went wrong.",
+        sent: false,
+        isThinking: false,
+      });
+    }
+    throw error;
+  }
+
 };
 </script>
 
diff --git a/src/modules/chatbot/components/dialogue-content.vue b/src/modules/chatbot/components/dialogue-content.vue
index 704fac9..7ea148b 100644
--- a/src/modules/chatbot/components/dialogue-content.vue
+++ b/src/modules/chatbot/components/dialogue-content.vue
@@ -12,6 +12,36 @@ defineProps<{
 </script>
 
 <template>
+    <q-infinite-scroll>
+        <template
+            v-for="(msg, index) in messages"
+            :key="index"
+        >
+            <DialoguePhrase
+                v-if="!msg.isThinking"
+                :text="msg.text"
+                :sent="msg.sent"
+                :name="msg.sent ? currentUser.firstName : 'AI Assistant'"
+                :class="['chat-message', msg.sent ? 'user' : 'ai']"
+            />
+            <!-- 💭 Thinking bubble -->
+            <div
+                v-else
+                class="chat-message ai flex items-center q-px-md q-py-sm"
+            >
+                <q-spinner-dots
+                    size="20px"
+                    color="primary"
+                />
+                <span class="q-ml-sm text-grey-7">Thinking...</span>
+            </div>
+        </template>
+    </q-infinite-scroll>
+</template>
+
+
+
+<!-- <template>
     <q-infinite-scroll>
         <DialoguePhrase
             v-for="(msg, index) in messages"
@@ -19,6 +49,7 @@ defineProps<{
             :text="msg.text"
             :sent="msg.sent"
             :name="msg.sent ? currentUser.firstName : 'AI Assistant'"
+            :class="['chat-message', msg.sent ? 'user' : 'ai']"
         />
     </q-infinite-scroll>
-</template>
\ No newline at end of file
+</template> -->
\ No newline at end of file
diff --git a/src/modules/chatbot/composables/chat-api.ts b/src/modules/chatbot/composables/chat-api.ts
index cd5b9af..2f5ba6c 100644
--- a/src/modules/chatbot/composables/chat-api.ts
+++ b/src/modules/chatbot/composables/chat-api.ts
@@ -1,11 +1,12 @@
 // composables/chat-api.ts
 import { useChatStore } from "src/stores/message-store";
+import type { Message } from "../types/dialogue-message";
 
 export const useChatApi = () => {
   const chatStore = useChatStore();
 
-  const sendMessage = async (text: string) => {
-    await chatStore.sendMessage(text);
+  const sendMessage = async (text: string): Promise<Message> => {
+    return await chatStore.sendMessage(text);
   };
 
   return { sendMessage };
diff --git a/src/modules/chatbot/services/messageService.ts b/src/modules/chatbot/services/messageService.ts
index 5dd3d02..08d14b8 100644
--- a/src/modules/chatbot/services/messageService.ts
+++ b/src/modules/chatbot/services/messageService.ts
@@ -5,7 +5,6 @@ export const chatbotService = {
   // Function to get the message from the backend
   getChatMessage: async (userInput: string): Promise<Message> => {
     const response = await api.post("/chat/respond", { userInput });
-    console.log(response.data);
     return response.data as Message;
   },
 };
diff --git a/src/modules/chatbot/types/dialogue-message.ts b/src/modules/chatbot/types/dialogue-message.ts
index 74785ce..2e26586 100644
--- a/src/modules/chatbot/types/dialogue-message.ts
+++ b/src/modules/chatbot/types/dialogue-message.ts
@@ -1,4 +1,5 @@
-export interface Message{
-    text:string;
-    sent: boolean
-};
\ No newline at end of file
+export interface Message {
+  text: string;
+  sent: boolean;
+  isThinking: boolean;
+}
diff --git a/src/stores/message-store.ts b/src/stores/message-store.ts
index 41b9236..ef8a37c 100644
--- a/src/stores/message-store.ts
+++ b/src/stores/message-store.ts
@@ -8,8 +8,6 @@ export const useChatStore = defineStore("chat", () => {
 
   const sendMessage = async (userInput: string) => {
     const reply = await chatbotService.getChatMessage(userInput);
-    messages.value.push({ text: userInput, sent: true });
-    messages.value.push(reply);
     return reply;
   };