feat: User message now disappears faster instead of waiting for response, and chatbox shows a 'Thinking...' message while the user awaits the n8n response.

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>
 

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>
+</template> -->

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 };

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;
   },
 };

src/modules/chatbot/types/dialogue-message.ts

@@ -1,4 +1,5 @@
 export interface Message {
   text: string;
-    sent: boolean
-};
+  sent: boolean;
+  isThinking: boolean;
+}

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;
   };