137 lines
3.7 KiB
Vue
137 lines
3.7 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import DialogueContent from "./dialogue-content.vue";
|
|
|
|
import { onMounted, ref } from "vue";
|
|
import { useChatbotStore } from "src/stores/chatbot-store";
|
|
import { useChatbotApi } from "src/modules/chatbot/composables/chatbot-api";
|
|
|
|
// Block to enable editing the width of the drawer
|
|
// const drawerWidth = ref(370);
|
|
// let dragging = false;
|
|
// const startDrag = (e: MouseEvent) => {
|
|
// dragging = true
|
|
// e.preventDefault()
|
|
// }
|
|
|
|
// const onDrag = (e: MouseEvent) => {
|
|
// if (!dragging) return
|
|
// // calculate new width
|
|
// const newWidth = window.innerWidth - e.clientX
|
|
// drawerWidth.value = Math.max(350, Math.min(1000, newWidth)) // min/max width
|
|
// }
|
|
// const stopDrag = () => {
|
|
// dragging = false
|
|
// }
|
|
// window.addEventListener('mousemove', onDrag)
|
|
// window.addEventListener('mouseup', stopDrag)
|
|
|
|
const chatbot_api = useChatbotApi();
|
|
const chatbot_store = useChatbotStore();
|
|
|
|
const text = ref('');
|
|
|
|
const handleSend = async () => {
|
|
await chatbot_api.sendMessage(text.value.trim());
|
|
text.value = '';
|
|
};
|
|
|
|
// Capture and send page context to n8n
|
|
// const currentContext = computed(() =>
|
|
// pageContexts.find(ctx => ctx.path === route.fullPath.replace('/', ''))
|
|
// )
|
|
|
|
// // Function that sends the page context to n8n
|
|
// watch([currentContext, userEmail, userRole], async ([ctx, email, role]) => {
|
|
// if (!ctx || !email || !role) return;
|
|
|
|
// const contextPayload: contextObject = {
|
|
// name: ctx.name,
|
|
// description: ctx.description,
|
|
// features: ctx.features,
|
|
// path: ctx.path
|
|
// }
|
|
|
|
// try {
|
|
// await Promise.all([chatbotService.sendUserCredentials(email, role),
|
|
// sendPageContext(contextPayload),
|
|
// ]);
|
|
// is_session_ready.value = true;
|
|
// } catch (err) {
|
|
// console.error("Error", err)
|
|
// }
|
|
// },
|
|
// { immediate: true }
|
|
// );
|
|
|
|
onMounted(() => {
|
|
chatbot_store.showInstructionsOnce();
|
|
})
|
|
|
|
// const custId = ref('')
|
|
// const handleCustomerId = async () => {
|
|
// const cId = custId.value;
|
|
// custId.value = '';
|
|
// await chatbotService.retrieveCustomerDiagnostics(cId);
|
|
// }
|
|
</script>
|
|
|
|
<template>
|
|
<q-drawer
|
|
side="right"
|
|
v-model="chatbot_store.is_showing_chatbot"
|
|
class="column justify-end"
|
|
>
|
|
<div class="bg-primary text-uppercase">{{ $t('chatbot.chat_header') }}</div>
|
|
<div class="line-separator"></div>
|
|
|
|
<div class="chat-body">
|
|
<DialogueContent />
|
|
</div>
|
|
|
|
<div class="line-separator"></div>
|
|
<q-form
|
|
submit="handleSend"
|
|
class="chat-footer row"
|
|
>
|
|
<q-input
|
|
v-model="text"
|
|
:label="$t('chatbot.chat_placeholder')"
|
|
:autogrow="false"
|
|
class="col"
|
|
style="margin-left: 8px;"
|
|
@keyup.enter="handleSend"
|
|
/>
|
|
|
|
<!-- <q-input
|
|
v-model="custId"
|
|
:label="'Customer Id'"
|
|
:autogrow="false"
|
|
class="col"
|
|
style="margin-left: 8px;"
|
|
@keyup.enter="handleCustomerId"
|
|
/> -->
|
|
</q-form>
|
|
|
|
<!-- <div
|
|
class="drag-handle"
|
|
@mousedown.prevent="startDrag"
|
|
></div> -->
|
|
</q-drawer>
|
|
</template>
|
|
|
|
<!-- <style scoped>
|
|
.drag-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 8px;
|
|
height: 100%;
|
|
cursor: ew-resize;
|
|
z-index: 1000;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
</style> -->
|