feat: made the front capture the url whenever it changes and send it to the backend to later send to the n8n ai.

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>

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;
+  },
 };

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,
   };
 });