feat: had to take a few lines to make sure the url and context was watched dynamically.

This commit is contained in:
Lion Arar 2025-10-20 10:30:29 -04:00
parent 77fb1f2cdb
commit e5b2c12aed
2 changed files with 29 additions and 36 deletions

View File

@ -10,21 +10,6 @@ import { chatbotService } from "../services/messageService";
import { pageContexts } from "src/page-contexts"; import { pageContexts } from "src/page-contexts";
import type { contextObject } from "src/page-contexts/pages/types/context-object"; import type { contextObject } from "src/page-contexts/pages/types/context-object";
const isSessionReady = ref(false);
// Block to receive user from child
const userEmail = ref('')
const userRole = ref('')
const HandleEmail = (email: string) => {
userEmail.value = email;
}
const HandleRole = (role: string) => {
userRole.value = role;
}
// Block to enable editing the width of the drawer // Block to enable editing the width of the drawer
const drawerWidth = ref(370); const drawerWidth = ref(370);
let dragging = false let dragging = false
@ -32,38 +17,32 @@ const startDrag = (e: MouseEvent) => {
dragging = true dragging = true
e.preventDefault() e.preventDefault()
} }
const onDrag = (e: MouseEvent) => { const onDrag = (e: MouseEvent) => {
if (!dragging) return if (!dragging) return
// calculate new width // calculate new width
const newWidth = window.innerWidth - e.clientX const newWidth = window.innerWidth - e.clientX
drawerWidth.value = Math.max(350, Math.min(1000, newWidth)) // min/max width drawerWidth.value = Math.max(350, Math.min(1000, newWidth)) // min/max width
} }
const stopDrag = () => { const stopDrag = () => {
dragging = false dragging = false
} }
window.addEventListener('mousemove', onDrag) window.addEventListener('mousemove', onDrag)
window.addEventListener('mouseup', stopDrag) window.addEventListener('mouseup', stopDrag)
// Block to handle the incomming and sending of the messages from the user and the ai // Block to handle the incomming and sending of the messages from the user and the ai
const text = ref(''); const text = ref('');
const { messages } = useChatStore(); const { messages } = useChatStore();
const { sendMessage } = useChatApi(); const { sendMessage } = useChatApi();
const chatStore = useChatStore(); const chatStore = useChatStore();
onMounted(() => { onMounted(() => {
chatStore.showInstructionsOnce(); chatStore.showInstructionsOnce();
}) })
const isSessionReady = ref(false);
const handleSend = async () => { const handleSend = async () => {
const userMessage = text.value.trim(); const userMessage = text.value.trim();
if (!userMessage)
if (!isSessionReady.value) {
console.warn("Session not ready yet. Please wait...");
return;
}
text.value = ''; text.value = '';
messages.push({ messages.push({
@ -105,6 +84,19 @@ const handleSend = async () => {
}; };
// Block to receive user from child
const userEmail = ref('')
const userRole = ref('')
const HandleEmail = (email: string) => {
userEmail.value = email;
}
const HandleRole = (role: string) => {
userRole.value = role;
}
// Block to handle sending the url to n8n // Block to handle sending the url to n8n
const route = useRoute() const route = useRoute()
const sendPageContext = chatbotService.sendPageContext; const sendPageContext = chatbotService.sendPageContext;
@ -113,11 +105,9 @@ const currentContext = computed(() =>
pageContexts.find(ctx => ctx.path === route.fullPath.replace('/', '')) pageContexts.find(ctx => ctx.path === route.fullPath.replace('/', ''))
) )
// Function that sends the page context to n8n
watch([currentContext, userEmail, userRole], async ([ctx, email, role]) => { watch([currentContext, userEmail, userRole], async ([ctx, email, role]) => {
if (!ctx || !email || !role) return; if (!ctx || !email || !role) return;
if (isSessionReady.value) return;
const contextPayload: contextObject = { const contextPayload: contextObject = {
name: ctx.name, name: ctx.name,
@ -139,12 +129,12 @@ watch([currentContext, userEmail, userRole], async ([ctx, email, role]) => {
); );
const custId = ref('') // const custId = ref('')
const handleCustomerId = async () => { // const handleCustomerId = async () => {
const cId = custId.value; // const cId = custId.value;
custId.value = ''; // custId.value = '';
await chatbotService.retrieveCustomerDiagnostics(cId); // await chatbotService.retrieveCustomerDiagnostics(cId);
} // }
@ -173,7 +163,10 @@ const handleCustomerId = async () => {
</div> </div>
<div class="line-separator"></div> <div class="line-separator"></div>
<q-form class="chat-footer row"> <q-form
submit="handleSend"
class="chat-footer row"
>
<q-input <q-input
v-model="text" v-model="text"
:label="$t('chatbot.chat_placeholder')" :label="$t('chatbot.chat_placeholder')"
@ -182,14 +175,14 @@ const handleCustomerId = async () => {
style="margin-left: 8px;" style="margin-left: 8px;"
@keyup.enter="handleSend" @keyup.enter="handleSend"
/> />
<q-input <!-- <q-input
v-model="custId" v-model="custId"
:label="'Customer Id'" :label="'Customer Id'"
:autogrow="false" :autogrow="false"
class="col" class="col"
style="margin-left: 8px;" style="margin-left: 8px;"
@keyup.enter="handleCustomerId" @keyup.enter="handleCustomerId"
/> /> -->
</q-form> </q-form>
<div <div
class="drag-handle" class="drag-handle"

View File

@ -11,6 +11,7 @@ export const chatbotService = {
// Function to send context to backend // Function to send context to backend
sendPageContext: async (context: contextObject): Promise<string> => { sendPageContext: async (context: contextObject): Promise<string> => {
console.log(context.path, " ", context.features);
const response = await api.post("/chat/context", context); const response = await api.post("/chat/context", context);
return response.data; return response.data;
}, },
@ -26,7 +27,6 @@ export const chatbotService = {
}, },
retrieveCustomerDiagnostics: async (id: string): Promise<string> => { retrieveCustomerDiagnostics: async (id: string): Promise<string> => {
console.log("Frontend Service id retreived");
const response = await api.get(`/chat/customer/${id}`); const response = await api.get(`/chat/customer/${id}`);
return response.data; return response.data;
}, },