BREAKING(chatbot): being process of merging chatbot with current app for inhouse testing
This commit is contained in:
parent
e3c596a5f2
commit
ea5e2ef36e
|
|
@ -1,24 +1,24 @@
|
||||||
<script setup lang="ts">
|
<script
|
||||||
import { isChatVisible } from "src/stores/dialogue-box";
|
setup
|
||||||
|
lang="ts"
|
||||||
|
>
|
||||||
|
import { useChatbotStore } from 'src/stores/chatbot-store';
|
||||||
|
|
||||||
const toggleChat = () => {
|
const chatbot_store = useChatbotStore();
|
||||||
isChatVisible.value = !isChatVisible.value;
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
style="z-index: 3; margin-right: 20px"
|
style="z-index: 3; margin-right: 20px"
|
||||||
class="display: flex"
|
class="display: flex"
|
||||||
>
|
>
|
||||||
<q-btn
|
<q-btn
|
||||||
flat
|
flat
|
||||||
color="transparant"
|
color="transparant"
|
||||||
size="20px"
|
size="20px"
|
||||||
icon="smart_toy"
|
icon="smart_toy"
|
||||||
@click="toggleChat"
|
@click="chatbot_store.is_showing_chatbot = !chatbot_store.is_showing_chatbot"
|
||||||
style="--q-icon-size: 28px; min-width: auto;"
|
style="--q-icon-size: 28px; min-width: auto;"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -1,181 +1,182 @@
|
||||||
<script setup lang="ts">
|
<script
|
||||||
import { isChatVisible } from "src/stores/dialogue-box";
|
setup
|
||||||
import DialogueContent from "./dialogue-content.vue";
|
lang="ts"
|
||||||
import { computed, onMounted, ref } from "vue";
|
>
|
||||||
import { useChatApi } from "../composables/chat-api";
|
import DialogueContent from "./dialogue-content.vue";
|
||||||
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
|
import { computed, onMounted, ref, watch } from "vue";
|
||||||
const drawerWidth = ref(370);
|
import { useChatbotApi } from "src/modules/chatbot/composables/chatbot-api";
|
||||||
let dragging = false
|
import { chatbotService } from "src/modules/chatbot/services/messages.service";
|
||||||
const startDrag = (e: MouseEvent) => {
|
import { pageContexts } from "src/page-contexts";
|
||||||
dragging = true
|
import type { contextObject } from "src/page-contexts/pages/types/context-object";
|
||||||
e.preventDefault()
|
import { useChatbotStore } from "src/stores/chatbot-store";
|
||||||
}
|
|
||||||
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)
|
|
||||||
|
|
||||||
|
// Block to enable editing the width of the drawer
|
||||||
// Block to handle the incomming and sending of the messages from the user and the ai
|
const drawerWidth = ref(370);
|
||||||
const text = ref('');
|
let dragging = false
|
||||||
const { messages } = useChatStore();
|
const startDrag = (e: MouseEvent) => {
|
||||||
const { sendMessage } = useChatApi();
|
dragging = true
|
||||||
const chatStore = useChatStore();
|
e.preventDefault()
|
||||||
onMounted(() => {
|
|
||||||
chatStore.showInstructionsOnce();
|
|
||||||
})
|
|
||||||
|
|
||||||
const isSessionReady = ref(false);
|
|
||||||
const handleSend = async () => {
|
|
||||||
const userMessage = text.value.trim();
|
|
||||||
|
|
||||||
|
|
||||||
text.value = '';
|
|
||||||
messages.push({
|
|
||||||
text: userMessage,
|
|
||||||
sent: true,
|
|
||||||
isThinking: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
const thinkingMessage = {
|
|
||||||
text: "Thinking...",
|
|
||||||
sent: false,
|
|
||||||
isThinking: true
|
|
||||||
}
|
|
||||||
messages.push(thinkingMessage)
|
|
||||||
|
|
||||||
try {
|
|
||||||
const aiResponse = await sendMessage(userMessage);
|
|
||||||
|
|
||||||
const index = messages.indexOf(thinkingMessage);
|
|
||||||
if (index !== -1) {
|
|
||||||
messages.splice(index, 1, {
|
|
||||||
text: aiResponse.text,
|
|
||||||
sent: false,
|
|
||||||
isThinking: false,
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
const onDrag = (e: MouseEvent) => {
|
||||||
catch (error) {
|
if (!dragging) return
|
||||||
const index = messages.indexOf(thinkingMessage);
|
// calculate new width
|
||||||
if (index !== -1) {
|
const newWidth = window.innerWidth - e.clientX
|
||||||
messages.splice(index, 1, {
|
drawerWidth.value = Math.max(350, Math.min(1000, newWidth)) // min/max width
|
||||||
text: "Sorry, Message wasn't able to sent.",
|
|
||||||
sent: false,
|
|
||||||
isThinking: false,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
throw error;
|
const stopDrag = () => {
|
||||||
}
|
dragging = false
|
||||||
};
|
}
|
||||||
|
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 chatbot_store = useChatbotStore();
|
||||||
|
const chatbot_api = useChatApi();
|
||||||
|
const chatStore = useChatStore();
|
||||||
|
onMounted(() => {
|
||||||
|
chatStore.showInstructionsOnce();
|
||||||
|
})
|
||||||
|
|
||||||
|
const isSessionReady = ref(false);
|
||||||
|
const handleSend = async () => {
|
||||||
|
const userMessage = text.value.trim();
|
||||||
|
|
||||||
|
|
||||||
|
text.value = '';
|
||||||
|
messages.push({
|
||||||
|
text: userMessage,
|
||||||
|
sent: true,
|
||||||
|
isThinking: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
const thinkingMessage = {
|
||||||
|
text: "Thinking...",
|
||||||
|
sent: false,
|
||||||
|
isThinking: true
|
||||||
|
}
|
||||||
|
messages.push(thinkingMessage)
|
||||||
|
|
||||||
|
try {
|
||||||
|
const aiResponse = await sendMessage(userMessage);
|
||||||
|
|
||||||
|
const index = messages.indexOf(thinkingMessage);
|
||||||
|
if (index !== -1) {
|
||||||
|
messages.splice(index, 1, {
|
||||||
|
text: aiResponse.text,
|
||||||
|
sent: false,
|
||||||
|
isThinking: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
const index = messages.indexOf(thinkingMessage);
|
||||||
|
if (index !== -1) {
|
||||||
|
messages.splice(index, 1, {
|
||||||
|
text: "Sorry, Message wasn't able to sent.",
|
||||||
|
sent: false,
|
||||||
|
isThinking: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Block to receive user from child
|
// Block to receive user from child
|
||||||
const userEmail = ref('')
|
const userEmail = ref('')
|
||||||
const userRole = ref('')
|
const userRole = ref('')
|
||||||
|
|
||||||
const HandleEmail = (email: string) => {
|
const HandleEmail = (email: string) => {
|
||||||
userEmail.value = email;
|
userEmail.value = email;
|
||||||
}
|
}
|
||||||
|
|
||||||
const HandleRole = (role: string) => {
|
const HandleRole = (role: string) => {
|
||||||
userRole.value = role;
|
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;
|
||||||
// Capture and send page context to n8n
|
// Capture and send page context to n8n
|
||||||
const currentContext = computed(() =>
|
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
|
// 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;
|
||||||
|
|
||||||
const contextPayload: contextObject = {
|
const contextPayload: contextObject = {
|
||||||
name: ctx.name,
|
name: ctx.name,
|
||||||
description: ctx.description,
|
description: ctx.description,
|
||||||
features: ctx.features,
|
features: ctx.features,
|
||||||
path: ctx.path
|
path: ctx.path
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await Promise.all([chatbotService.sendUserCredentials(email, role),
|
await Promise.all([chatbotService.sendUserCredentials(email, role),
|
||||||
sendPageContext(contextPayload),
|
sendPageContext(contextPayload),
|
||||||
]);
|
]);
|
||||||
isSessionReady.value = true;
|
isSessionReady.value = true;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("Error", err)
|
console.error("Error", err)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
// 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);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-drawer
|
<q-drawer
|
||||||
side="right"
|
side="right"
|
||||||
v-model="isChatVisible"
|
v-model="isChatVisible"
|
||||||
class="chat-drawer"
|
class="chat-drawer"
|
||||||
style="box-shadow: -4px 0 12px rgba(0,0,0,0.15);"
|
style="box-shadow: -4px 0 12px rgba(0,0,0,0.15);"
|
||||||
:width="drawerWidth"
|
:width="drawerWidth"
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="chat-header"
|
|
||||||
style="text-align:start; padding: 10px 10px 0px;"
|
|
||||||
>{{ $t('chatbot.chat_header') }}</div>
|
|
||||||
<div class="line-separator"></div>
|
|
||||||
|
|
||||||
<div class="chat-body">
|
|
||||||
<DialogueContent
|
|
||||||
@sendRole="HandleRole"
|
|
||||||
@sendEmail="HandleEmail"
|
|
||||||
:messages="messages"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="line-separator"></div>
|
|
||||||
<q-form
|
|
||||||
submit="handleSend"
|
|
||||||
class="chat-footer row"
|
|
||||||
>
|
>
|
||||||
<q-input
|
<div
|
||||||
v-model="text"
|
class="chat-header"
|
||||||
:label="$t('chatbot.chat_placeholder')"
|
style="text-align:start; padding: 10px 10px 0px;"
|
||||||
:autogrow="false"
|
>{{ $t('chatbot.chat_header') }}</div>
|
||||||
class="col"
|
<div class="line-separator"></div>
|
||||||
style="margin-left: 8px;"
|
|
||||||
@keyup.enter="handleSend"
|
<div class="chat-body">
|
||||||
/>
|
<DialogueContent
|
||||||
<!-- <q-input
|
@sendRole="HandleRole"
|
||||||
|
@sendEmail="HandleEmail"
|
||||||
|
:messages="messages"
|
||||||
|
/>
|
||||||
|
</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"
|
v-model="custId"
|
||||||
:label="'Customer Id'"
|
:label="'Customer Id'"
|
||||||
:autogrow="false"
|
:autogrow="false"
|
||||||
|
|
@ -183,51 +184,51 @@ watch([currentContext, userEmail, userRole], async ([ctx, email, role]) => {
|
||||||
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"
|
||||||
@mousedown.prevent="startDrag"
|
@mousedown.prevent="startDrag"
|
||||||
></div>
|
></div>
|
||||||
</q-drawer>
|
</q-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.drag-handle {
|
.drag-handle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
cursor: ew-resize;
|
cursor: ew-resize;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
background-color: rgba(0, 0, 0, 0);
|
background-color: rgba(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-separator {
|
.line-separator {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background-color: #ccc;
|
background-color: #ccc;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-drawer {
|
.chat-drawer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header at the top */
|
/* Header at the top */
|
||||||
.chat-header {
|
.chat-header {
|
||||||
color: #019547;
|
color: #019547;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollable middle */
|
/* Scrollable middle */
|
||||||
.chat-body {
|
.chat-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: 81%;
|
height: 81%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
// composables/chat-api.ts
|
|
||||||
import { useChatStore } from "src/stores/message-store";
|
|
||||||
import type { Message } from "../types/dialogue-message";
|
|
||||||
|
|
||||||
export const useChatApi = () => {
|
|
||||||
const chatStore = useChatStore();
|
|
||||||
|
|
||||||
const sendMessage = async (text: string): Promise<Message> => {
|
|
||||||
return await chatStore.sendMessage(text);
|
|
||||||
};
|
|
||||||
|
|
||||||
return { sendMessage };
|
|
||||||
};
|
|
||||||
13
src/modules/chatbot/composables/chatbot-api.ts
Normal file
13
src/modules/chatbot/composables/chatbot-api.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
// composables/chat-api.ts
|
||||||
|
import { useChatbotStore } from "src/stores/chatbot-store";
|
||||||
|
import type { Message } from "src/modules/chatbot/models/dialogue-message.model";
|
||||||
|
|
||||||
|
export const useChatbotApi = () => {
|
||||||
|
const chatStore = useChatbotStore();
|
||||||
|
|
||||||
|
const sendMessage = async (text: string): Promise<Message> => {
|
||||||
|
return await chatStore.sendMessage(text);
|
||||||
|
};
|
||||||
|
|
||||||
|
return { sendMessage };
|
||||||
|
};
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
import type { Message } from "src/modules/chatbot/types/dialogue-message";
|
import type { Message } from "src/modules/chatbot/models/dialogue-message.model";
|
||||||
import { defineStore } from "pinia";
|
import { defineStore } from "pinia";
|
||||||
import { chatbotService } from "src/modules/chatbot/services/messageService";
|
import { chatbotService } from "src/modules/chatbot/services/messages.service";
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
|
|
||||||
export const useChatStore = defineStore("chat", () => {
|
export const useChatbotStore = defineStore("chatbot", () => {
|
||||||
const messages = ref<Message[]>([]);
|
const messages = ref<Message[]>([]);
|
||||||
const hasShownInstructions = ref(false);
|
const has_shown_instructions = ref(false);
|
||||||
|
const is_showing_chatbot = ref(false);
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
const sendMessage = async (userInput: string) => {
|
const sendMessage = async (userInput: string) => {
|
||||||
|
|
@ -15,18 +16,20 @@ export const useChatStore = defineStore("chat", () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const showInstructionsOnce = () => {
|
const showInstructionsOnce = () => {
|
||||||
if (!hasShownInstructions.value) {
|
if (!has_shown_instructions.value) {
|
||||||
messages.value.push({
|
messages.value.push({
|
||||||
text: t("chatbot.chat_initial_message"),
|
text: t("chatbot.chat_initial_message"),
|
||||||
sent: false,
|
sent: false,
|
||||||
isThinking: false,
|
isThinking: false,
|
||||||
});
|
});
|
||||||
hasShownInstructions.value = true;
|
has_shown_instructions.value = true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
messages,
|
messages,
|
||||||
|
has_shown_instructions,
|
||||||
|
is_showing_chatbot,
|
||||||
sendMessage,
|
sendMessage,
|
||||||
showInstructionsOnce,
|
showInstructionsOnce,
|
||||||
};
|
};
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
export const isChatVisible = ref(false);
|
|
||||||
Loading…
Reference in New Issue
Block a user