feat: created context objects to feed the ai.

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

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { isChatVisible } from "src/stores/dialogue-box";
 import DialogueContent from "./dialogue-content.vue";
-import { onMounted, ref } from "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";
 
 // Block to enable editing the width of the drawer
 const drawerWidth = ref(370);
@@ -82,19 +84,34 @@ const handleSend = async () => {
   }
 };
 
-// Block to handle sending the url to n8n as context
+
+
+// Block to handle sending the url to n8n
 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")
-  },
+const sendUlr = chatbotService.sendUrl;
+const sendPageContext = chatbotService.sendPageContext;
+// Capture and send page context to n8n
+const currentContext = computed(() =>
+  pageContexts.find(ctx => ctx.path === route.fullPath.replace('/', ''))
+)
+
+watch(currentContext, async (ctx) => {
+  if (!ctx) return;
+
+  const contextPayload: contextObject = {
+    name: ctx.name,
+    description: ctx.description,
+    features: ctx.features,
+    path: ctx.path
+  }
+  await sendUlr(route.fullPath)
+  await sendPageContext(contextPayload)
+},
   { immediate: true }
 );
 
+
+
 </script>
 
 <template>

src/modules/chatbot/services/messageService.ts

@@ -1,3 +1,4 @@
+import type { contextObject } from "src/page-contexts/pages/types/context-object";
 import type { Message } from "../types/dialogue-message";
 import { api } from "src/boot/axios";
 
@@ -8,8 +9,13 @@ export const chatbotService = {
     return response.data as Message;
   },
 
-  sendUlrContext: async (url: string): Promise<string> => {
-    const response = await api.post("/chat/page-context", { url });
+  sendUrl: async (url: string): Promise<string> => {
+    const response = await api.post("/chat/page-url", { url });
+    return response.data;
+  },
+
+  sendPageContext: async (context: contextObject): Promise<string> => {
+    const response = await api.post("/chat/context", context);
     return response.data;
   },
 };

src/page-contexts/index.ts

@@ -1,6 +1,16 @@
-export * from "./pages/dashboard-context";
-export * from "./pages/left-drawer-context";
-export * from "./pages/supervisor-crew-context";
-export * from "./pages/profile-context";
-export * from "./pages/timesheet-approval-context";
-export * from "./pages/timesheet-context";
+import { dashboardContext } from "./pages/dashboard-context";
+import { leftDrawerContext } from "./pages/left-drawer-context";
+import { profileContext } from "./pages/profile-context";
+import { supervisorContext } from "./pages/supervisor-crew-context";
+import { timesheetApprovalContext } from "./pages/timesheet-approval-context";
+import { timesheetContext } from "./pages/timesheet-context";
+import type { contextObject } from "./pages/types/context-object";
+
+export const pageContexts: contextObject[] = [
+  dashboardContext,
+  leftDrawerContext,
+  profileContext,
+  supervisorContext,
+  timesheetApprovalContext,
+  timesheetContext,
+];

src/page-contexts/pages/dashboard-context.ts

@@ -7,4 +7,5 @@ export const dashboardContext = {
     "Access the ai chatbot from the header",
     "See your user icon with a notification icon",
   ],
+  path: "",
 };

src/page-contexts/pages/left-drawer-context.ts

@@ -11,4 +11,5 @@ export const leftDrawerContext = {
     "Can access the Help page to ask for assistance.",
     "Can logout",
   ],
+  path: "none",
 };

src/page-contexts/pages/profile-context.ts

@@ -6,4 +6,5 @@ export const profileContext = {
     "Add and edit Career information such job title, company, supervisor, email and hiring date.",
     "Edit available preferences such as Display options of light and dark mode, and language options",
   ],
+  path: "user/profile",
 };

src/page-contexts/pages/supervisor-crew-context.ts

@@ -1,8 +1,9 @@
 export const supervisorContext = {
   name: "Supervisor Crew Page",
   description: "View all the hired Staff",
-  feature: [
+  features: [
     "View the list of hired employees",
     "Access an individual employee",
   ],
+  path: "employees",
 };

src/page-contexts/pages/timesheet-approval-context.ts

@@ -11,4 +11,5 @@ export const timesheetApprovalContext = {
     "Edit the hours, and their type such as regular, holiday, vacation etc.",
     "Add and edit expenses for the week, along with attached files for said expenses",
   ],
+  path: "timesheet-approvals",
 };

src/page-contexts/pages/timesheet-context.ts

@@ -10,4 +10,5 @@ export const timesheetContext = {
     "List your expenses for the week",
     "Add expenses for the week, along with attached files for said expenses",
   ],
+  path: "timesheet-temp",
 };

src/page-contexts/pages/types/context-object.ts

@@ -0,0 +1,6 @@
+export interface contextObject {
+  name: string;
+  description: string;
+  features: string[];
+  path: string;
+}