fix: fixed the chatbox server side communication

src/modules/chatbot/components/conversation-box.vue

@@ -2,11 +2,11 @@
 import { isChatVisible } from "src/stores/dialogue-box";
 import DialogueContent from "./dialogue-content.vue";
 import { ref } from "vue";
-import type { Message } from "../types/dialogue-message";
 import { useChatApi } from "../composables/chat-api";
+import { useChatStore } from "src/stores/message-store";
 
 const text = ref('');
-const messages = ref<Message[]>([]);
+const { messages } = useChatStore();
 
 const { sendMessage } = useChatApi();
 const handleSend = async () => {
@@ -19,14 +19,26 @@ const handleSend = async () => {
 
 <template>
   <transition name="fade-slide">
-    <div v-if="isChatVisible" class="dialogue">
+    <div
+      v-if="isChatVisible"
+      class="dialogue"
+    >
       <div class="chat-header">AI Assistant</div>
       <div class="chat-body">
         <DialogueContent :messages="messages"></DialogueContent>
       </div>
-      <q-form v-on:submit="handleSend" class="row chat-footer">
-        <q-input v-model="text" label="Enter a Message" autogrow class="col" style="margin-right: 5px;"
-          @keydown.enter="handleSend" />
+      <q-form
+        v-on:submit="handleSend"
+        class="row chat-footer"
+      >
+        <q-input
+          v-model="text"
+          label="Enter a Message"
+          autogrow
+          class="col"
+          style="margin-right: 5px;"
+          @keydown.enter="handleSend"
+        />
       </q-form>
     </div>
   </transition>

src/modules/chatbot/components/dialogue-content.vue

@@ -9,6 +9,11 @@ defineProps<{
 
 <template>
     <q-infinite-scroll>
-        <DialoguePhrase v-for="(msg, index) in messages" :key="index" :text="msg.text" :sent="msg.sent" />
+        <DialoguePhrase
+            v-for="(msg, index) in messages"
+            :key="index"
+            :text="msg.text"
+            :sent="msg.sent"
+        />
     </q-infinite-scroll>
 </template>

src/modules/chatbot/composables/chat-api.ts

@@ -1,6 +1,5 @@
 // composables/chat-api.ts
-import { useChatStore } from "src/stores/message-store"
-
+import { useChatStore } from "src/stores/message-store";
 
 export const useChatApi = () => {
   const chatStore = useChatStore();
@@ -10,4 +9,4 @@ export const useChatApi = () => {
   };
 
   return { sendMessage };
-};
+};

src/modules/chatbot/services/messageService.ts

@@ -2,11 +2,11 @@ import type { Message } from "../types/dialogue-message";
 import { api } from "src/boot/axios";
 
 export const chatbotService = {
-  
+
   getChatMessage: async (userInput: string): Promise<Message> => {
-  console.log('messageService');
-  const response = await api.post('/chat/respond');
-  console.log({userInput});
-  return response.data as Message;
+    console.log('messageService');
+    const response = await api.post('/chat/respond', {userInput});
+    console.log({userInput});
+    return response.data as Message;
   }
 };

src/stores/message-store.ts

@@ -1,27 +1,23 @@
 import type { Message } from "src/modules/chatbot/types/dialogue-message";
 import { defineStore } from "pinia";
 import { chatbotService } from "src/modules/chatbot/services/messageService";
+import { ref } from "vue";
 
-// const localMessages: Message[] = [];
+export const useChatStore = defineStore("chat", () => {
+  const messages = ref<Message[]>([{ text: "test", sent: false }]);
 
-// export const saveMessage = (msg: Message) =>{
-//     localMessages.push(msg);
-// };
+  const sendMessage = async (userInput: string) => {
+    console.log(`'useChatStore' ${userInput}`);
 
-// export const getStoredMessages = (): Message[] =>{
-//     return [...localMessages];
-// }
+    const reply = await chatbotService.getChatMessage(userInput);
 
-export const useChatStore = defineStore('chat', {
-  state: () => ({
-    messages: [] as Message[],
-  }),
-  actions: {
-    async sendMessage(userInput: string) {
-        console.log(`'useChatStore' ${userInput}`);
-      const reply = await chatbotService.getChatMessage(userInput);
-      this.messages.push({ text: userInput, sent: true });
-      this.messages.push(reply);
-    },
-  },
+    messages.value.push({ text: userInput, sent: true });
+    messages.value.push(reply);
+    return reply;
+  };
+
+  return {
+    messages,
+    sendMessage,
+  };
 });