BREAKING(chatbot): being process of merging chatbot with current app for inhouse testing

src/modules/chatbot/components/chat-button.vue

@@ -1,9 +1,10 @@
-<script setup lang="ts">
-import { isChatVisible } from "src/stores/dialogue-box";
+<script
+    setup
+    lang="ts"
+>
+import { useChatbotStore } from 'src/stores/chatbot-store';
 
-const toggleChat = () => {
-  isChatVisible.value = !isChatVisible.value;
-};
+    const chatbot_store = useChatbotStore();
 </script>
 
 <template>
@@ -16,9 +17,8 @@ const toggleChat = () => {
             color="transparant"
             size="20px"
             icon="smart_toy"
-      @click="toggleChat"
+            @click="chatbot_store.is_showing_chatbot = !chatbot_store.is_showing_chatbot"
             style="--q-icon-size: 28px; min-width: auto;"
         />
     </div>
-
 </template>

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

@@ -1,46 +1,47 @@
-<script setup lang="ts">
-import { isChatVisible } from "src/stores/dialogue-box";
-import DialogueContent from "./dialogue-content.vue";
-import { computed, onMounted, ref } from "vue";
-import { useChatApi } from "../composables/chat-api";
-import { useChatStore } from "src/stores/message-store";
-import { useRoute } from "vue-router";
-import { watch } from "vue";
-import { chatbotService } from "../services/messageService";
-import { pageContexts } from "src/page-contexts";
-import type { contextObject } from "src/page-contexts/pages/types/context-object";
+<script
+    setup
+    lang="ts"
+>
+    import DialogueContent from "./dialogue-content.vue";
 
-// Block to enable editing the width of the drawer
-const drawerWidth = ref(370);
-let dragging = false
-const startDrag = (e: MouseEvent) => {
+    import { computed, onMounted, ref, watch } from "vue";
+    import { useChatbotApi } from "src/modules/chatbot/composables/chatbot-api";
+    import { chatbotService } from "src/modules/chatbot/services/messages.service";
+    import { pageContexts } from "src/page-contexts";
+    import type { contextObject } from "src/page-contexts/pages/types/context-object";
+import { useChatbotStore } from "src/stores/chatbot-store";
+
+    // Block to enable editing the width of the drawer
+    const drawerWidth = ref(370);
+    let dragging = false
+    const startDrag = (e: MouseEvent) => {
         dragging = true
         e.preventDefault()
-}
-const onDrag = (e: MouseEvent) => {
+    }
+    const onDrag = (e: MouseEvent) => {
         if (!dragging) return
         // calculate new width
         const newWidth = window.innerWidth - e.clientX
         drawerWidth.value = Math.max(350, Math.min(1000, newWidth)) // min/max width
-}
-const stopDrag = () => {
+    }
+    const stopDrag = () => {
         dragging = false
-}
-window.addEventListener('mousemove', onDrag)
-window.addEventListener('mouseup', stopDrag)
+    }
+    window.addEventListener('mousemove', onDrag)
+    window.addEventListener('mouseup', stopDrag)
 
 
-// Block to handle the incomming and sending of the messages from the user and the ai
-const text = ref('');
-const { messages } = useChatStore();
-const { sendMessage } = useChatApi();
-const chatStore = useChatStore();
-onMounted(() => {
+    // Block to handle the incomming and sending of the messages from the user and the ai
+    const text = ref('');
+    const chatbot_store = useChatbotStore();
+    const chatbot_api = useChatApi();
+    const chatStore = useChatStore();
+    onMounted(() => {
         chatStore.showInstructionsOnce();
-})
+    })
 
-const isSessionReady = ref(false);
-const handleSend = async () => {
+    const isSessionReady = ref(false);
+    const handleSend = async () => {
         const userMessage = text.value.trim();
 
 
@@ -81,32 +82,32 @@ const handleSend = async () => {
             }
             throw error;
         }
-};
+    };
 
 
 
-// Block to receive user from child
-const userEmail = ref('')
-const userRole = ref('')
+    // Block to receive user from child
+    const userEmail = ref('')
+    const userRole = ref('')
 
-const HandleEmail = (email: string) => {
+    const HandleEmail = (email: string) => {
         userEmail.value = email;
-}
+    }
 
-const HandleRole = (role: string) => {
+    const HandleRole = (role: string) => {
         userRole.value = role;
-}
+    }
 
-// Block to handle sending the url to n8n
-const route = useRoute()
-const sendPageContext = chatbotService.sendPageContext;
-// Capture and send page context to n8n
-const currentContext = computed(() =>
+    // Block to handle sending the url to n8n
+    const route = useRoute()
+    const sendPageContext = chatbotService.sendPageContext;
+    // Capture and send page context to n8n
+    const currentContext = computed(() =>
         pageContexts.find(ctx => ctx.path === route.fullPath.replace('/', ''))
-)
+    )
 
-// Function that sends the page context to n8n
-watch([currentContext, userEmail, userRole], async ([ctx, email, role]) => {
+    // Function that sends the page context to n8n
+    watch([currentContext, userEmail, userRole], async ([ctx, email, role]) => {
         if (!ctx || !email || !role) return;
 
         const contextPayload: contextObject = {
@@ -124,17 +125,17 @@ watch([currentContext, userEmail, userRole], async ([ctx, email, role]) => {
         } catch (err) {
             console.error("Error", err)
         }
-},
+    },
         { immediate: true }
-);
+    );
 
 
-// const custId = ref('')
-// const handleCustomerId = async () => {
-//   const cId = custId.value;
-//   custId.value = '';
-//   await chatbotService.retrieveCustomerDiagnostics(cId);
-// }
+    // const custId = ref('')
+    // const handleCustomerId = async () => {
+    //   const cId = custId.value;
+    //   custId.value = '';
+    //   await chatbotService.retrieveCustomerDiagnostics(cId);
+    // }
 
 
 

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

@@ -1,13 +0,0 @@
-// 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): Promise<Message> => {
-    return await chatStore.sendMessage(text);
-  };
-
-  return { sendMessage };
-};

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

@@ -0,0 +1,13 @@
+// composables/chat-api.ts
+import { useChatbotStore } from "src/stores/chatbot-store";
+import type { Message } from "src/modules/chatbot/models/dialogue-message.model";
+
+export const useChatbotApi = () => {
+  const chatStore = useChatbotStore();
+
+  const sendMessage = async (text: string): Promise<Message> => {
+    return await chatStore.sendMessage(text);
+  };
+
+  return { sendMessage };
+};

src/stores/chatbot-store.ts

@@ -1,12 +1,13 @@
-import type { Message } from "src/modules/chatbot/types/dialogue-message";
+import type { Message } from "src/modules/chatbot/models/dialogue-message.model";
 import { defineStore } from "pinia";
-import { chatbotService } from "src/modules/chatbot/services/messageService";
+import { chatbotService } from "src/modules/chatbot/services/messages.service";
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 
-export const useChatStore = defineStore("chat", () => {
+export const useChatbotStore = defineStore("chatbot", () => {
   const messages = ref<Message[]>([]);
-  const hasShownInstructions = ref(false);
+  const has_shown_instructions = ref(false);
+  const is_showing_chatbot = ref(false);
   const { t } = useI18n();
 
   const sendMessage = async (userInput: string) => {
@@ -15,18 +16,20 @@ export const useChatStore = defineStore("chat", () => {
   };
 
   const showInstructionsOnce = () => {
-    if (!hasShownInstructions.value) {
+    if (!has_shown_instructions.value) {
       messages.value.push({
         text: t("chatbot.chat_initial_message"),
         sent: false,
         isThinking: false,
       });
-      hasShownInstructions.value = true;
+      has_shown_instructions.value = true;
     }
   };
 
   return {
     messages,
+    has_shown_instructions,
+    is_showing_chatbot,
     sendMessage,
     showInstructionsOnce,
   };

src/stores/dialogue-box.ts

@@ -1,3 +0,0 @@
-import { ref } from "vue";
-
-export const isChatVisible = ref(false);