Merge pull request 'dev/nicolas/staging-prep' (#51) from dev/nicolas/staging-prep into main
Reviewed-on: Targo/targo_frontend#51
This commit is contained in:
commit
1def71983c
|
|
@ -3,14 +3,8 @@
|
|||
setup
|
||||
>
|
||||
import { useUiStore } from 'src/stores/ui-store';
|
||||
import { useAuthStore } from 'src/stores/auth-store';
|
||||
import { useChatbotStore } from 'src/stores/chatbot-store';
|
||||
|
||||
// import HeaderBarNotification from './main-layout-header-bar-notification.vue';
|
||||
|
||||
const uiStore = useUiStore();
|
||||
const chatbot_store = useChatbotStore();
|
||||
const auth_store = useAuthStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -37,19 +31,6 @@
|
|||
/>
|
||||
</q-btn>
|
||||
</q-toolbar-title>
|
||||
|
||||
<q-item class="q-pa-none">
|
||||
<!-- <HeaderBarNotification /> -->
|
||||
<q-btn
|
||||
v-if="auth_store.user?.user_module_access.includes('chatbot')"
|
||||
flat
|
||||
color="transparant"
|
||||
icon="las la-robot"
|
||||
size="lg"
|
||||
@click="chatbot_store.is_showing_chatbot = !chatbot_store.is_showing_chatbot"
|
||||
style="--q-icon-size: 28px; min-width: auto;"
|
||||
/>
|
||||
</q-item>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -12,10 +12,13 @@
|
|||
const chatbot_store = useChatbotStore();
|
||||
|
||||
const text = ref('');
|
||||
const is_showing_right_drawer = ref(true);
|
||||
const drawer_width = ref(85);
|
||||
|
||||
const handleSend = async () => {
|
||||
const message = text.value.trim();
|
||||
text.value = '';
|
||||
console.log('message: ', message, ', length: ', message.length);
|
||||
await chatbot_api.sendMessage(message);
|
||||
};
|
||||
|
||||
|
|
@ -26,12 +29,35 @@
|
|||
|
||||
<template>
|
||||
<q-drawer
|
||||
v-model="chatbot_store.is_showing_chatbot"
|
||||
v-model="is_showing_right_drawer"
|
||||
overlay
|
||||
elevated
|
||||
persistent
|
||||
:width="drawer_width"
|
||||
side="right"
|
||||
class="column justify-end no-wrap"
|
||||
class="column justify-end no-wrap relative-position no-scroll"
|
||||
>
|
||||
<transition
|
||||
enter-active-class="animated fadeInRight"
|
||||
leave-active-class="animated fadeOutRight"
|
||||
mode="out-in"
|
||||
@after-leave="chatbot_store.is_showing_chatbot ? drawer_width = 500 : drawer_width = 85"
|
||||
>
|
||||
<div
|
||||
v-if="chatbot_store.is_showing_chatbot"
|
||||
class="col column"
|
||||
style="background: rgba(0, 0, 0, 0.7); overflow: hidden;"
|
||||
>
|
||||
<q-btn
|
||||
dense
|
||||
icon="las la-chevron-right"
|
||||
text-color="white"
|
||||
color="accent"
|
||||
align="left"
|
||||
size="2em"
|
||||
class="q-mb-sm"
|
||||
@click="chatbot_store.is_showing_chatbot = false"
|
||||
/>
|
||||
|
||||
<div class="col q-px-md relative-position">
|
||||
<DialogueContent class="absolute-full" />
|
||||
</div>
|
||||
|
|
@ -49,30 +75,33 @@
|
|||
label-color="white"
|
||||
class="col q-px-md"
|
||||
style="background: rgba(0, 0, 0, 0.3);"
|
||||
@keyup.enter="handleSend"
|
||||
@keydown.enter="handleSend"
|
||||
/>
|
||||
|
||||
<!-- <q-input
|
||||
v-model="custId"
|
||||
:label="'Customer Id'"
|
||||
:autogrow="false"
|
||||
class="col"
|
||||
style="margin-left: 8px;"
|
||||
@keyup.enter="handleCustomerId"
|
||||
/> -->
|
||||
</q-form>
|
||||
</div>
|
||||
|
||||
<!-- <div
|
||||
class="drag-handle"
|
||||
@mousedown.prevent="startDrag"
|
||||
></div> -->
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="row col-auto q-pa-sm self-end"
|
||||
>
|
||||
<q-btn
|
||||
dense
|
||||
round
|
||||
icon="las la-robot"
|
||||
color="accent"
|
||||
size="2em"
|
||||
class="shadow-5"
|
||||
@click="chatbot_store.is_showing_chatbot = true"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</q-drawer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.q-drawer--right) {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
width: 50vw !important;
|
||||
:deep(.q-drawer) {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -20,11 +20,11 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-scroll-area ref="scroll_area">
|
||||
<q-scroll-area ref="scroll_area" class="no-wrap">
|
||||
<div
|
||||
v-for="(msg, index) in chatbot_store.messages"
|
||||
:key="index"
|
||||
class="column q-px-md no-wrap"
|
||||
class="col-auto q-px-md no-wrap"
|
||||
>
|
||||
<DialoguePhrase
|
||||
v-if="!msg.isThinking"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
lang="ts"
|
||||
>
|
||||
import { computed } from 'vue';
|
||||
import MarkdownIt from 'markdown-it'
|
||||
// import MarkdownIt from 'markdown-it'
|
||||
import { useAuthStore } from 'src/stores/auth-store';
|
||||
import type { Message } from 'src/modules/chatbot/models/dialogue-message.model';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
|
@ -15,41 +15,73 @@
|
|||
message: Message;
|
||||
}>();
|
||||
|
||||
const message_text = computed(() => message.text.includes('chatbot.') ? t(message.text) : message.text)
|
||||
|
||||
const is_error = computed(() => message.text.includes('NO_REPLY_RECEIVED') || message.text.includes('SEND_MESSAGE_FAILED'));
|
||||
|
||||
// Initialize Markdown parser
|
||||
const md = new MarkdownIt({
|
||||
breaks: false, // Support line breaks
|
||||
linkify: true, // Make URLs clickable
|
||||
html: false // Prevent raw HTML injection
|
||||
})
|
||||
// const md = new MarkdownIt({
|
||||
// // breaks: false, // Support line breaks
|
||||
// linkify: true, // Make URLs clickable
|
||||
// html: false // Prevent raw HTML injection
|
||||
// })
|
||||
|
||||
// Removes all the h1,h2,h3 to make the Md more user friendly
|
||||
const cleanMarkdown = (markdown: string): string => {
|
||||
if (!markdown) return ''
|
||||
return markdown
|
||||
.replace(/\r\n/g, '\n') // normalize Windows line endings
|
||||
.replace(/([.!?])(\s+)(?=[A-Z])/g, '$1\n') // insert line break after sentence-ending punctuation
|
||||
.replace(/\n{3,}/g, '\n\n') // squash triple+ line breaks
|
||||
.replace(/^#{1,3}\s(.*)$/gm, '#### $1') // downgrade headings
|
||||
}
|
||||
// // Removes all the h1,h2,h3 to make the Md more user friendly
|
||||
// const cleanMarkdown = (markdown: string): string => {
|
||||
// if (!markdown) return ''
|
||||
// return markdown
|
||||
// .replace(/\r\n/g, '\n') // normalize Windows line endings
|
||||
// .replace(/([.!?])(\s+)(?=[A-Z])/g, '$1\n') // insert line break after sentence-ending punctuation
|
||||
// .replace(/\n{3,}/g, '\n\n') // squash triple+ line breaks
|
||||
// .replace(/^#{1,3}\s(.*)$/gm, '#### $1') // downgrade headings
|
||||
// }
|
||||
|
||||
// Compute parsed content
|
||||
const parsedText = computed((): string => {
|
||||
const cleaned = cleanMarkdown(message.text || '')
|
||||
if (cleaned.includes('chatbot.')) {
|
||||
const translated_message = t(message.text);
|
||||
return md.render(translated_message);
|
||||
}
|
||||
return md.render(cleaned);
|
||||
})
|
||||
// // Compute parsed content
|
||||
// const parsedText = computed((): string => {
|
||||
// const cleaned = cleanMarkdown(message.text || '')
|
||||
// if (cleaned.includes('chatbot.')) {
|
||||
// const translated_message = t(message.text);
|
||||
// return md.render(translated_message);
|
||||
// }
|
||||
// return md.render(cleaned);
|
||||
// })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-chat-message
|
||||
v-if="is_error"
|
||||
name="SystemBot"
|
||||
bg-color="negative"
|
||||
text-color="white"
|
||||
>
|
||||
<div class="row flex-center">
|
||||
<q-icon
|
||||
name="las la-exclamation-triangle"
|
||||
class="col-auto q-pr-xs"
|
||||
size="2em"
|
||||
color="white"
|
||||
/>
|
||||
<span>{{ message_text }}</span>
|
||||
</div>
|
||||
</q-chat-message>
|
||||
|
||||
<q-chat-message
|
||||
v-else
|
||||
:sent="message.sent"
|
||||
:name="message.sent ? auth_store.user?.first_name : 'TargoBot'"
|
||||
:bg-color="message.sent ? 'accent' : 'white'"
|
||||
:bg-color="message.sent ? 'accent' : 'info'"
|
||||
:text-color="message.sent ? 'white' : ''"
|
||||
>
|
||||
<div v-html="parsedText"></div>
|
||||
</q-chat-message>
|
||||
:text="[message_text]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.q-message-name) {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:deep(.q-message-text) {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
import { RouteNames } from "src/router/router-constants";
|
||||
|
||||
export interface chatbotPageContext {
|
||||
export interface ChatbotPageContext {
|
||||
name: string;
|
||||
description: string;
|
||||
features: string[];
|
||||
path: RouteNames | null;
|
||||
}
|
||||
|
||||
export const dashboardContext: chatbotPageContext = {
|
||||
export const dashboardContext: ChatbotPageContext = {
|
||||
name: "Dashboard",
|
||||
description: "Landing page containing useful links and a carousel showcasing recent news, as well as a local weather widget in the top right corner",
|
||||
features: [
|
||||
|
|
@ -18,7 +18,7 @@ export const dashboardContext: chatbotPageContext = {
|
|||
path: RouteNames.DASHBOARD,
|
||||
};
|
||||
|
||||
export const leftDrawerContext: chatbotPageContext = {
|
||||
export const leftDrawerContext: ChatbotPageContext = {
|
||||
name: "Left Drawer",
|
||||
description: "A drawer that acts as a navigation bar, routes to different parts of the website. Some icons will be hidden according to user access",
|
||||
features: [
|
||||
|
|
@ -33,7 +33,7 @@ export const leftDrawerContext: chatbotPageContext = {
|
|||
path: null,
|
||||
};
|
||||
|
||||
export const profileContext: chatbotPageContext = {
|
||||
export const profileContext: ChatbotPageContext = {
|
||||
name: "Profile",
|
||||
description: "Display and edit user information",
|
||||
features: [
|
||||
|
|
@ -44,7 +44,7 @@ export const profileContext: chatbotPageContext = {
|
|||
path: RouteNames.PROFILE,
|
||||
};
|
||||
|
||||
export const employeeListContext: chatbotPageContext = {
|
||||
export const employeeListContext: ChatbotPageContext = {
|
||||
name: "Employee List",
|
||||
description: "View all the hired and currently active Staff",
|
||||
features: [
|
||||
|
|
@ -57,7 +57,7 @@ export const employeeListContext: chatbotPageContext = {
|
|||
path: RouteNames.EMPLOYEE_LIST,
|
||||
};
|
||||
|
||||
export const timesheetApprovalContext: chatbotPageContext = {
|
||||
export const timesheetApprovalContext: ChatbotPageContext = {
|
||||
name: "Timesheet Approval",
|
||||
description: "Page where employee hours and shifts are approved for accounting purposes. Requires timesheet_approval module access.",
|
||||
features: [
|
||||
|
|
@ -71,7 +71,7 @@ export const timesheetApprovalContext: chatbotPageContext = {
|
|||
path: RouteNames.TIMESHEET_APPROVALS,
|
||||
};
|
||||
|
||||
export const timesheetContext: chatbotPageContext = {
|
||||
export const timesheetContext: ChatbotPageContext = {
|
||||
name: "Timesheet",
|
||||
description:
|
||||
"Page where an employee can enter their hours for their day and week. Display in 2-week pay periods.",
|
||||
|
|
@ -86,7 +86,7 @@ export const timesheetContext: chatbotPageContext = {
|
|||
path: RouteNames.TIMESHEET,
|
||||
};
|
||||
|
||||
export const helpContext: chatbotPageContext = {
|
||||
export const helpContext: ChatbotPageContext = {
|
||||
name: "Help",
|
||||
description: "page containing common Q&A segments regarding website functionalities",
|
||||
features: [
|
||||
|
|
@ -98,7 +98,7 @@ export const helpContext: chatbotPageContext = {
|
|||
path: RouteNames.HELP,
|
||||
}
|
||||
|
||||
export const PageContexts: Record<RouteNames, chatbotPageContext | null> = {
|
||||
export const PageContexts: Record<RouteNames, ChatbotPageContext | null> = {
|
||||
"login": null,
|
||||
"login-success": null,
|
||||
"error": null,
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
import type { chatbotPageContext } from "src/modules/chatbot/models/page-context.model";
|
||||
import type { ChatbotPageContext } from "src/modules/chatbot/models/page-context.model";
|
||||
import type { Message } from "src/modules/chatbot/models/dialogue-message.model";
|
||||
import { api } from "src/boot/axios";
|
||||
|
||||
export const chatbotService = {
|
||||
// Function to send the message to the backend
|
||||
sendChatMessage: async (userInput: string): Promise<Message> => {
|
||||
const response = await api.post("/chatbot", { userInput });
|
||||
sendChatMessage: async (userInput: string, pageContext: ChatbotPageContext | undefined): Promise<Message> => {
|
||||
const response = await api.post("/chatbot", { userInput, pageContext });
|
||||
return response.data as Message;
|
||||
},
|
||||
|
||||
// Function to send context to backend
|
||||
sendPageContext: async (context: chatbotPageContext): Promise<string> => {
|
||||
const response = await api.post("/chatbot/context", context);
|
||||
return response.data;
|
||||
},
|
||||
// // Function to send context to backend
|
||||
// sendPageContext: async (context: chatbotPageContext): Promise<string> => {
|
||||
// const response = await api.post("/chatbot/context", context);
|
||||
// return response.data;
|
||||
// },
|
||||
|
||||
// Function to send user credentials to the backend to communicate with n8n.
|
||||
sendUserCredentials: async (email: string, role: string): Promise<boolean> => {
|
||||
const response = await api.post("/chatbot/user", { email, role });
|
||||
return response.data;
|
||||
},
|
||||
// // Function to send user credentials to the backend to communicate with n8n.
|
||||
// sendUserCredentials: async (email: string, role: string): Promise<boolean> => {
|
||||
// const response = await api.post("/chatbot/user", { email, role });
|
||||
// return response.data;
|
||||
// },
|
||||
|
||||
retrieveCustomerDiagnostics: async (id: string): Promise<string> => {
|
||||
const response = await api.get(`/chat/customer/${id}`);
|
||||
return response.data;
|
||||
},
|
||||
// retrieveCustomerDiagnostics: async (id: string): Promise<string> => {
|
||||
// const response = await api.get(`/chat/customer/${id}`);
|
||||
// return response.data;
|
||||
// },
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
onMounted(() => {
|
||||
Object.values(overview_column_names).map(column => column_options.value.push({ label: `timesheet_approvals.table.${column}`, value: column as OverviewColumns }))
|
||||
column_options.value = column_options.value.filter(column => !EXCLUDED_COLUMNS.includes(column.value));
|
||||
console.log('filter column values: ', column_options.value )
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
const is_timesheets_approved = computed(() => timesheet_store.timesheets.every(timesheet => timesheet.is_approved))
|
||||
|
||||
const total_hours = computed(() => timesheet_store.timesheets.reduce((sum, timesheet) =>
|
||||
sum + timesheet.weekly_hours.regular
|
||||
sum += timesheet.weekly_hours.regular
|
||||
+ timesheet.weekly_hours.evening
|
||||
+ timesheet.weekly_hours.emergency
|
||||
+ timesheet.weekly_hours.overtime,
|
||||
|
|
|
|||
|
|
@ -2,19 +2,20 @@ import { ref } from "vue";
|
|||
import { defineStore } from "pinia";
|
||||
import { chatbotService } from "src/modules/chatbot/services/chatbot.service";
|
||||
import type { Message } from "src/modules/chatbot/models/dialogue-message.model";
|
||||
import { type ChatbotPageContext, PageContexts } from "src/modules/chatbot/models/page-context.model";
|
||||
import type { RouteNames } from "src/router/router-constants";
|
||||
import { PageContexts } from "src/modules/chatbot/models/page-context.model";
|
||||
|
||||
export const useChatbotStore = defineStore("chatbot", () => {
|
||||
const messages = ref<Message[]>([]);
|
||||
const has_shown_instructions = ref(false);
|
||||
const is_showing_chatbot = ref(false);
|
||||
const current_page_context = ref<ChatbotPageContext | undefined>(undefined);
|
||||
|
||||
const sendChatMessage = async (user_message: string) => {
|
||||
const last_chatbot_message = messages.value.at(messages.value.length - 1)!;
|
||||
|
||||
try {
|
||||
const chatbot_response = await chatbotService.sendChatMessage(user_message);
|
||||
const chatbot_response = await chatbotService.sendChatMessage(user_message, current_page_context.value);
|
||||
if (chatbot_response) {
|
||||
last_chatbot_message.text = chatbot_response.text;
|
||||
last_chatbot_message.isThinking = false;
|
||||
|
|
@ -30,11 +31,9 @@ export const useChatbotStore = defineStore("chatbot", () => {
|
|||
}
|
||||
};
|
||||
|
||||
const updatePageContext = async (page_name: RouteNames) => {
|
||||
const chatbot_page_context = PageContexts[page_name];
|
||||
const updatePageContext = (page_name: RouteNames) => {
|
||||
current_page_context.value = PageContexts[page_name] ?? undefined;
|
||||
|
||||
if (chatbot_page_context)
|
||||
await chatbotService.sendPageContext(chatbot_page_context);
|
||||
};
|
||||
|
||||
const showInstructionsOnce = () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user