+ {#if showBubbleMsg}
+
+ closeBubbleMsg()} />
+
+ {/if}
+
- {#if !$chatBotStore.showChatBox}
+ {#if !showChatBox}
-
@@ -58,6 +89,13 @@
perspective: 1000px;
}
+ .waving {
+ animation: wave 0.82s cubic-bezier(.36,.07,.19,.97) both;
+ transform: translate3d(0, 0, 0);
+ backface-visibility: hidden;
+ perspective: 1000px;
+ }
+
@keyframes wave {
10%, 90% {
transform: translate3d(-1px, 0, 0);
@@ -91,4 +129,8 @@
display: flex;
justify-content: flex-end;
}
+
+ .chat-icon-btn {
+ padding-top: 0px;
+ }
\ No newline at end of file
diff --git a/src/lib/helpers/enums.js b/src/lib/helpers/enums.js
index 339907b8..b7d7fbbc 100644
--- a/src/lib/helpers/enums.js
+++ b/src/lib/helpers/enums.js
@@ -105,6 +105,7 @@ const chatAction = {
Close: 'close',
Logout: 'logout',
Chat: 'chat',
- NewChat: 'new-chat'
+ NewChat: 'new-chat',
+ ReceiveMsg: 'receive-msg'
};
export const ChatAction = Object.freeze(chatAction);
\ No newline at end of file
diff --git a/src/lib/helpers/store.js b/src/lib/helpers/store.js
index eecead98..6b63f9ab 100644
--- a/src/lib/helpers/store.js
+++ b/src/lib/helpers/store.js
@@ -35,33 +35,35 @@ userStore.subscribe(value => {
});
-/** @type {Writable
}*/
-export const conversationStore = writable({});
-
-/**
- * @returns {Writable}
- */
-export function getConversationStore() {
- if (browser) {
- // Access localStorage only if in the browser context
- const json = localStorage.getItem(conversationKey);
- if (json)
- return JSON.parse(json);
- else
- return conversationStore;
- } else {
- // Return a default value for SSR
- return conversationStore;
- }
+const createConversationStore = () => {
+ const { subscribe } = writable({});
+ return {
+ clear: (/** @type {string | null} */ convId = null) => {
+ if (!convId) {
+ localStorage.removeItem(conversationKey);
+ return;
+ }
+
+ const json = localStorage.getItem(conversationKey);
+ if (json) {
+ const conv = JSON.parse(json);
+ if (conv.id === convId) {
+ localStorage.removeItem(conversationKey);
+ }
+ }
+ },
+ get: () => {
+ const json = localStorage.getItem(conversationKey);
+ return json ? JSON.parse(json) : {};
+ },
+ put: (value) => {
+ localStorage.setItem(conversationKey, JSON.stringify(value));
+ },
+ subscribe
+ };
};
-// @ts-ignore
-conversationStore.subscribe(value => {
- if (browser && value.id) {
- localStorage.setItem(conversationKey, JSON.stringify(value));
- }
-});
-
+export const conversationStore = createConversationStore();
const createLoaderStore = () => {
@@ -182,19 +184,6 @@ const createKnowledgeBaseDocumentStore = () => {
export const knowledgeBaseDocumentStore = createKnowledgeBaseDocumentStore();
-const createChatBotStore = () => {
- const { subscribe, set, update } = writable({ showChatBox: false });
-
- return {
- set,
- update,
- subscribe
- }
-};
-
-export const chatBotStore = createChatBotStore();
-
-
export function resetLocalStorage(resetUser = false) {
conversationUserStateStore.resetAll();
conversationSearchOptionStore.reset();
diff --git a/src/lib/scss/custom/components/_chat.scss b/src/lib/scss/custom/components/_chat.scss
index df94656e..45c95d04 100644
--- a/src/lib/scss/custom/components/_chat.scss
+++ b/src/lib/scss/custom/components/_chat.scss
@@ -1,3 +1,5 @@
+$bubble-chat-theme-color: rgba($primary, 80%);
+
.chat-util-common {
display: block;
position: absolute;
@@ -41,4 +43,48 @@
.chat-util-item {
text-align: center;
font-size: 30px;
-}
\ No newline at end of file
+}
+
+
+
+.chat-bubble-container {
+ display: flex;
+ flex-direction: column;
+ gap: 0px;
+
+ .chat-bubble {
+ margin: 5px 30px 0px 5px;
+ display: inline-block;
+ position: relative;
+ min-width: 200px;
+ max-width: 300px;
+ background-color: $bubble-chat-theme-color;
+ border-radius: .4em;
+ color: white;
+
+ &:after {
+ content: ' ';
+ position: absolute;
+ top: 100%;
+ right: 50px;
+ width: 25px;
+ height: 20px;
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
+ background-color: $bubble-chat-theme-color;
+ }
+
+ .bubble-text {
+ margin: 15px;
+ height: fit-content;
+ max-height: 100px;
+ overflow-y: auto;
+ scrollbar-width: none;
+ }
+
+ .bubble-delete {
+ position: absolute;
+ right: 5px;
+ top: 3px;
+ }
+ }
+}
diff --git a/src/routes/chat/[agentId]/+page.svelte b/src/routes/chat/[agentId]/+page.svelte
index 3c557a70..7a5b8bbd 100644
--- a/src/routes/chat/[agentId]/+page.svelte
+++ b/src/routes/chat/[agentId]/+page.svelte
@@ -7,7 +7,7 @@
import { newConversation } from '$lib/services/conversation-service.js';
import { getToken, setToken } from '$lib/services/auth-service.js'
import { getUserStore } from '$lib/helpers/store.js';
- import { conversationStore, getConversationStore } from '$lib/helpers/store.js';
+ import { conversationStore } from '$lib/helpers/store.js';
import { LERNER_ID, TRAINING_MODE } from '$lib/helpers/constants';
const params = $page.params;
@@ -32,11 +32,11 @@
});
}
- conversation = getConversationStore();
+ conversation = conversationStore.get();
if (!conversation.id || agentId != conversation.agent_id) {
// new conversation
conversation = await newConversation(agentId);
- conversationStore.set(conversation);
+ conversationStore.put(conversation);
}
conversationId = conversation.id;
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 0e0e68c7..f7f9099d 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -198,7 +198,7 @@
refresh();
autoScrollLog = false;
- window.addEventListener('message', e => {
+ window.addEventListener('message', async (e) => {
if (e.data.action === ChatAction.Logout) {
handleLogoutAction();
} else if (e.data.action === ChatAction.NewChat) {
@@ -217,9 +217,11 @@
function handleNewChatAction(e) {
if (!isCreatingNewConv && !isThinking && !isSendingMsg) {
isCreatingNewConv = true;
- createNewConversation().then(conv => {
+ createNewConversation().then(async conv => {
isCreatingNewConv = false;
if (conv && !!e.data.text) {
+ dialogs = [];
+ await signalr.start(conv.id);
isLoading = true;
openFrame();
sendChatMessage(e.data.text, e.data.data || null, conv.id).then(() => {
@@ -246,11 +248,18 @@
}
function openFrame() {
- if (window.location != window.parent.location) {
+ if (isFrame) {
window.parent.postMessage({ action: ChatAction.Open }, "*");
}
}
+ /** @param {import('$conversationTypes').ChatResponseModel} message */
+ function sendReceivedMessage(message) {
+ if (isFrame) {
+ window.parent.postMessage({ action: ChatAction.ReceiveMsg, data: message }, "*");
+ }
+ }
+
function resizeChatWindow() {
isLite = Viewport.Width <= screenWidthThreshold;
if (!isLite) {
@@ -421,6 +430,7 @@
...message,
is_chat_message: true
});
+ sendReceivedMessage(message);
refresh();
}
@@ -482,7 +492,7 @@
async function createNewConversation() {
const conversation = await newConversation(params.agentId);
- conversationStore.set(conversation);
+ conversationStore.put(conversation);
return conversation;
}
@@ -754,7 +764,7 @@
}
function endChat() {
- if (window.location === window.parent.location) {
+ if (!isFrame) {
// @ts-ignore
Swal.fire({
title: 'Are you sure?',
@@ -1306,19 +1316,21 @@
id={message?.message_id}
text={message?.rich_content?.message?.text || message?.text}
/>
-
-
-
-
likeMessage(e, message)}
- >
-
+ {#if message?.function}
+
+
+
+
likeMessage(e, message)}
+ >
+
+
-
+ {/if}