From c1d48edb1e49c57949a7c6227d235bd82b02a46b Mon Sep 17 00:00:00 2001
From: Lion Arar <lion@targointernet.com>
Date: Wed, 8 Oct 2025 08:56:28 -0400
Subject: [PATCH] feat: made the front capture the url whenever it changes and
 send it to the backend to later send to the n8n ai.

---
 .../chatbot/components/conversation-box.vue   | 27 ++++++++++++++++---
 .../chatbot/services/messageService.ts        |  5 ++++
 src/stores/message-store.ts                   | 13 +++++++++
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue
index 2d680cc..8b58fa0 100644
--- a/src/modules/chatbot/components/conversation-box.vue
+++ b/src/modules/chatbot/components/conversation-box.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { isChatVisible } from "src/stores/dialogue-box";
 import DialogueContent from "./dialogue-content.vue";
-import { ref } from "vue";
+import { 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";
 
 // Block to enable editing the width of the drawer
 const drawerWidth = ref(370);
@@ -26,12 +29,18 @@ const 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(() => {
+  chatStore.showInstructionsOnce();
+})
+
+
 const handleSend = async () => {
   const userMessage = text.value.trim();
   if (!userMessage) return
@@ -73,9 +82,21 @@ const handleSend = async () => {
     }
     throw error;
   }
-
 };
 //---------------------------------------------
+// Block to handle sending the url to n8n as context
+const route = useRoute()
+const sendUlr = chatbotService.sendUlrContext;
+watch(
+  () => route.fullPath,
+  async (url) => {
+    console.log("[Chatbox] Sending URL to backend:", url)
+    await sendUlr(url)
+    console.log("[Chatbox] URL send request finished")
+  },
+  { immediate: true }
+);
+
 </script>
 
 <template>
diff --git a/src/modules/chatbot/services/messageService.ts b/src/modules/chatbot/services/messageService.ts
index 08d14b8..363a8fd 100644
--- a/src/modules/chatbot/services/messageService.ts
+++ b/src/modules/chatbot/services/messageService.ts
@@ -7,4 +7,9 @@ export const chatbotService = {
     const response = await api.post("/chat/respond", { userInput });
     return response.data as Message;
   },
+
+  sendUlrContext: async (url: string): Promise<string> => {
+    const response = await api.post("/chat/page-context", { url });
+    return response.data;
+  },
 };
diff --git a/src/stores/message-store.ts b/src/stores/message-store.ts
index ef8a37c..98bea6b 100644
--- a/src/stores/message-store.ts
+++ b/src/stores/message-store.ts
@@ -5,14 +5,27 @@ import { ref } from "vue";
 
 export const useChatStore = defineStore("chat", () => {
   const messages = ref<Message[]>([]);
+  const hasShownInstructions = ref(false);
 
   const sendMessage = async (userInput: string) => {
     const reply = await chatbotService.getChatMessage(userInput);
     return reply;
   };
 
+  const showInstructionsOnce = () => {
+    if (!hasShownInstructions.value) {
+      messages.value.push({
+        text: "Welcome to your technical assistant.\nPlease provide the Client ID and \na description of the problem.",
+        sent: false,
+        isThinking: false,
+      });
+      hasShownInstructions.value = true;
+    }
+  };
+
   return {
     messages,
     sendMessage,
+    showInstructionsOnce,
   };
 });