feat: had to take a few lines to make sure the url and context was watched dynamically.
This commit is contained in:
parent
77fb1f2cdb
commit
e5b2c12aed
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user