From 8ac36ec4fc1eba540b04042af4aae9e596e107d1 Mon Sep 17 00:00:00 2001
From: Lion Arar <lion@targointernet.com>
Date: Wed, 1 Oct 2025 12:54:46 -0400
Subject: [PATCH] attempted to make the front communicate with the back

---
 quasar.config.ts                              |  2 +-
 .../chatbot/components/conversation-box.vue   | 39 ++++---------------
 src/modules/chatbot/composables/chat-api.ts   | 13 +++++++
 .../chatbot/services/messageService.ts        | 21 +++++-----
 src/stores/message-store.ts                   | 30 ++++++++++----
 5 files changed, 54 insertions(+), 51 deletions(-)
 create mode 100644 src/modules/chatbot/composables/chat-api.ts

diff --git a/quasar.config.ts b/quasar.config.ts
index 93d749d..b839ce5 100644
--- a/quasar.config.ts
+++ b/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
diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue
index 927db86..74b7387 100644
--- a/src/modules/chatbot/components/conversation-box.vue
+++ b/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>
diff --git a/src/modules/chatbot/composables/chat-api.ts b/src/modules/chatbot/composables/chat-api.ts
new file mode 100644
index 0000000..3eb5f42
--- /dev/null
+++ b/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 };
+};
\ No newline at end of file
diff --git a/src/modules/chatbot/services/messageService.ts b/src/modules/chatbot/services/messageService.ts
index 87b94e5..6d0cbc1 100644
--- a/src/modules/chatbot/services/messageService.ts
+++ b/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 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
-  };
+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;
+  }
 };
\ No newline at end of file
diff --git a/src/stores/message-store.ts b/src/stores/message-store.ts
index 0808333..b69fb55 100644
--- a/src/stores/message-store.ts
+++ b/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];
-}
\ No newline at end of file
+// 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);
+    },
+  },
+});