attempted to make the front communicate with the back

quasar.config.ts

@@ -96,7 +96,7 @@ export default defineConfig((ctx) => {
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#devserver
     devServer: {
       // https: true,
-      open: true // opens browser window automatically
+      open: true, // opens browser window automatically
     },
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#framework

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

@@ -2,39 +2,19 @@
 import { isChatVisible } from "src/stores/dialogue-box";
 import DialogueContent from "./dialogue-content.vue";
 import { ref } from "vue";
-import { saveMessage } from "src/stores/message-store";
-import { getResponse } from "../services/messageService";
 import type { Message } from "../types/dialogue-message";
+import { useChatApi } from "../composables/chat-api";
 
 const text = ref('');
 const messages = ref<Message[]>([]);
 
-const sendMessage = async () => {
-  if (!text.value.trim()) return;
-
-  const userMessage: Message = {
-    text: text.value,
-    sent: true
-  };
-
-  saveMessage(userMessage);
-  messages.value.push(userMessage);
-
-  const response = await getResponse(text.value);
-  saveMessage(response);
-  messages.value.push(response);
-
+const { sendMessage } = useChatApi();
+const handleSend = async () => {
+  console.log(`'handleSend' ${text.value}`);
+  await sendMessage(text.value);
   text.value = '';
-}
+};
 
-// const handleEnter = async (e: KeyboardEvent) => {
-//   if (e.shiftKey) {
-//     text.value += '\n';
-//   } else {
-//     e.preventDefault();
-//     await sendMessage();
-//   }
-// };
 </script>
 
 <template>
@@ -44,12 +24,9 @@ const sendMessage = async () => {
       <div class="chat-body">
         <DialogueContent :messages="messages"></DialogueContent>
       </div>
-      <q-form class="row chat-footer">
+      <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="sendMessage" />
-        <!-- <q-btn type="submit" :ripple="{ center: true }" color="primary" glossy label="Send"
-          style="align-self: flex-end; width:60px; height:45px; margin-top: 8px; font-size: 14px;" class="col-2">
-        </q-btn> -->
+          @keydown.enter="handleSend" />
       </q-form>
     </div>
   </transition>

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

@@ -0,0 +1,13 @@
+// composables/chat-api.ts
+import { useChatStore } from "src/stores/message-store"
+
+
+export const useChatApi = () => {
+  const chatStore = useChatStore();
+  const sendMessage = async (text: string) => {
+    await chatStore.sendMessage(text);
+    console.log(`'useChatAPI' ${text}`);
+  };
+
+  return { sendMessage };
+};

src/modules/chatbot/services/messageService.ts

@@ -1,15 +1,12 @@
 import type { Message } from "../types/dialogue-message";
+import { api } from "src/boot/axios";
 
-// export const getMessages = async (): Promise<Message[]> => {
-//     return[
-//         {text: "Let me check that for you.", sent: true}
-//     ];
-// };
+export const chatbotService = {
   
-export const getResponse = async (userInput: string): Promise<Message> => {
-  await new Promise(resolve => setTimeout(resolve, 500)); // simulate delay
-  return {
-    text: `You said' ${userInput} 'Let me check that for you.`,
-    sent: false
-  };
+  getChatMessage: async (userInput: string): Promise<Message> => {
+  console.log('messageService');
+  const response = await api.post('/chat/respond');
+  console.log({userInput});
+  return response.data as Message;
+  }
 };

src/stores/message-store.ts

@@ -1,11 +1,27 @@
 import type { Message } from "src/modules/chatbot/types/dialogue-message";
+import { defineStore } from "pinia";
+import { chatbotService } from "src/modules/chatbot/services/messageService";
 
-const localMessages: Message[] = [];
+// const localMessages: Message[] = [];
 
-export const saveMessage = (msg: Message) =>{
-    localMessages.push(msg);
-};
+// export const saveMessage = (msg: Message) =>{
+//     localMessages.push(msg);
+// };
 
-export const getStoredMessages = (): Message[] =>{
-    return [...localMessages];
-}
+// export const getStoredMessages = (): Message[] =>{
+//     return [...localMessages];
+// }
+
+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);
+    },
+  },
+});