feat: Prototype chat-response: made a message store and service, so that the current chatbox sends the inputted txt and retrieves the defined mock response.

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

@@ -1,34 +1,31 @@
 <script setup lang="ts">
 import { isChatVisible } from "src/stores/dialogue-box";
-import { provide, ref } from "vue";
 import DialogueContent from "./dialogue-content.vue";
-import { Message } from "../types/dialogue-message";
+import { ref } from "vue";
+import { saveMessage } from "src/stores/message-store";
+import { getResponse } from "../services/messageService";
+import type { Message } from "../types/dialogue-message";
 
-const text = ref("");
+const text = ref('');
 const messages = ref<Message[]>([]);
 
-const sendMessage = () => {
+const sendMessage = async () => {
   if (!text.value.trim()) return;
 
-  messages.value.push({
+  const userMessage: Message = {
     text: text.value,
-    sender: 'user',
-    timestamp: new Date()
-  });
+    sent: true
+  };
 
-  setTimeout(() => {
-    messages.value.push({
-      text: 'Let me check that for you!',
-      sender: 'assistant',
-      timestamp: new Date()
-    });
-  }, 500);
+  saveMessage(userMessage);
+  messages.value.push(userMessage);
 
-  provide('message', messages);
-  provide('sendMessage', sendMessage);
-  provide('text', text);
+  const response = await getResponse(text.value);
+  saveMessage(response);
+  messages.value.push(response);
+
+  text.value = '';
 }
-
 </script>
 
 <template>
@@ -36,11 +33,11 @@ const sendMessage = () => {
     <div v-if="isChatVisible" class="dialogue">
       <div class="chat-header">AI Assistant</div>
       <div class="chat-body">
-        <DialogueContent></DialogueContent>
+        <DialogueContent :messages="messages"></DialogueContent>
       </div>
       <div class="row chat-footer">
         <q-input v-model="text" label="Enter a Message" class="col" />
-        <q-btn :ripple="{ center: true }" color="primary" glossy label="Send"
+        <q-btn @click="sendMessage" :ripple="{ center: true }" color="primary" glossy label="Send"
           style="width:60px; height:45px; margin-top: 8px; font-size: 14px;" class="col-2">
         </q-btn>
       </div>

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

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import DialoguePhrase from './dialogue-phrase.vue';
+import type { Message } from '../types/dialogue-message';
 
+defineProps<{
+    messages: Message[];
+}>();
 </script>
 
 <template>
     <q-infinite-scroll>
-        <DialoguePhrase />
+        <DialoguePhrase v-for="(msg, index) in messages" :key="index" :text="msg.text" :sent="msg.sent" />
     </q-infinite-scroll>
 </template>

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

@@ -1,8 +1,12 @@
 <script setup lang="ts">
+
+defineProps<{
+    text: string;
+    sent: boolean;
+}>();
 </script>
 
 <template>
-    <q-chat-message sent :text="['What\'s the temperature outside?']">
-
+    <q-chat-message :sent="sent" :text="[text]">
     </q-chat-message>
 </template>

src/modules/chatbot/services/messageService.ts

@@ -0,0 +1,15 @@
+import type { Message } from "../types/dialogue-message";
+
+// 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
+  };
+};

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

@@ -1,5 +1,4 @@
 export interface Message{
     text:string;
-    sender: 'user' | 'assistant';
-    timestamp: Date;
+    sent: boolean
 };

src/stores/message-store.ts

@@ -0,0 +1,11 @@
+import type { Message } from "src/modules/chatbot/types/dialogue-message";
+
+const localMessages: Message[] = [];
+
+export const saveMessage = (msg: Message) =>{
+    localMessages.push(msg);
+};
+
+export const getStoredMessages = (): Message[] =>{
+    return [...localMessages];
+}