From a2f13c6a68731b9b964653624b356f01f360b78e Mon Sep 17 00:00:00 2001 From: Jicheng Lu <103353@smsassist.com> Date: Wed, 17 Jan 2024 17:49:13 -0600 Subject: [PATCH 1/4] add content log --- src/lib/helpers/types.js | 7 ++ src/lib/scss/custom/pages/_chat.scss | 44 +++++++++++ src/lib/services/signalr-service.js | 10 ++- .../[conversationId]/chat-box.svelte | 47 +++++++++--- .../[conversationId]/content-log.svelte | 76 +++++++++++++++++++ 5 files changed, 173 insertions(+), 11 deletions(-) create mode 100644 src/routes/chat/[agentId]/[conversationId]/content-log.svelte diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js index a6856b4e..7e0b4155 100644 --- a/src/lib/helpers/types.js +++ b/src/lib/helpers/types.js @@ -226,6 +226,13 @@ IRichContent.prototype.text; * @param {string} text */ +/** + * Content log + * + * @callback ContentLog + * @param {string} message + */ + // having to export an empty object here is annoying, // but required for vscode to pass on your types. export default {}; \ No newline at end of file diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss index 80446c6a..2dfc4541 100644 --- a/src/lib/scss/custom/pages/_chat.scss +++ b/src/lib/scss/custom/pages/_chat.scss @@ -246,3 +246,47 @@ min-width: auto; } } + +.user-chat { + flex: 1; +} + +.chat-with-log { + flex: 0.7; +} + +.chat-log { + flex: 0.3; + background-color: white; + + .padding-side { + padding-left: 10px; + padding-right: 20px; + } + + .log-close-btn { + margin-top: 1.5rem; + margin-bottom: 10px; + position: sticky; + display: flex; + justify-content: flex-end; + } + + .log-list { + height: 90vh; + .log-element { + margin-top: 20px; + margin-bottom: 20px; + border-radius: 5px; + background-color: antiquewhite; + + .log-content { + padding: 15px 15px; + font-size: 15px; + } + } + } +} + + + diff --git a/src/lib/services/signalr-service.js b/src/lib/services/signalr-service.js index aa7024bb..350e7f40 100644 --- a/src/lib/services/signalr-service.js +++ b/src/lib/services/signalr-service.js @@ -1,4 +1,4 @@ -import { HubConnection, HubConnectionBuilder, LogLevel, HubConnectionState } from '@microsoft/signalr'; +import { HubConnection, HubConnectionBuilder, LogLevel } from '@microsoft/signalr'; import { endpoints } from '$lib/services/api-endpoints.js'; import { getUserStore } from '$lib/helpers/store.js'; @@ -21,6 +21,9 @@ export const signalr = { /** @type {import('$types').OnMessageReceived} */ onMessageReceivedFromAssistant: () => {}, + /** @type {import('$types').ContentLog} */ + onContentLogGenerated: () => {}, + // start the connection /** @param {string} conversationId */ async start(conversationId) { @@ -74,6 +77,11 @@ export const signalr = { this.onMessageReceivedFromAssistant(message); } }); + + connection.on('onContentLogGenerated', (log) => { + console.log('Log: ', log); + this.onContentLogGenerated(log); + }); }, // stop the connection diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte index 868ae885..a4270f66 100644 --- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte +++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte @@ -4,8 +4,6 @@ DropdownToggle, DropdownMenu, DropdownItem, - Input, - Button } from '@sveltestrap/sveltestrap'; import 'overlayscrollbars/overlayscrollbars.css'; @@ -16,11 +14,11 @@ import { signalr } from '$lib/services/signalr-service.js'; import { webSpeech } from '$lib/services/web-speech.js'; import { sendMessageToHub, GetDialogs } from '$lib/services/conversation-service.js'; - import { getFullLog } from '$lib/services/logging-service'; import { format } from '$lib/helpers/datetime'; import RcText from './rc-text.svelte'; import RcQuickReply from './rc-quick-reply.svelte'; import { PUBLIC_LIVECHAT_ENTRY_ICON } from '$env/static/public'; + import ContentLog from './content-log.svelte'; const options = { scrollbars: { @@ -50,12 +48,19 @@ /** @type {import('$types').ChatResponseModel[]} */ let dialogs = []; + /** @type {string[]} */ + let contentLogs = []; + + /** @type {boolean} */ + let isLoadLog = false; + onMount(async () => { dialogs = await GetDialogs(params.conversationId); signalr.onMessageReceivedFromClient = onMessageReceivedFromClient; signalr.onMessageReceivedFromCsr = onMessageReceivedFromCsr; signalr.onMessageReceivedFromAssistant = onMessageReceivedFromAssistant; + signalr.onContentLogGenerated = onContentLogGenerated; await signalr.start(params.conversationId); const scrollElements = document.querySelectorAll('.scrollbar'); @@ -81,7 +86,7 @@ /** @param {import('$types').ChatResponseModel} message */ function onMessageReceivedFromAssistant(message) { - webSpeech.utter(message.text); + // webSpeech.utter(message.text); // clean rich content elements dialogs.forEach(dialog => { if (dialog.rich_content && dialog.rich_content.message.rich_type == "quick_reply") { @@ -91,10 +96,16 @@ dialogs.push(message); refresh(); - } + } - async function viewFullLogHandler() { - await getFullLog(); + /** @param {string} log */ + function onContentLogGenerated(log) { + contentLogs.push(log); + contentLogs = contentLogs; + } + + function viewFullLogHandler() { + isLoadLog = true; } async function sendTextMessage() { @@ -121,13 +132,23 @@ }, 200); } + /** @param {any} e */ + async function onSendMessage(e) { + if (e.key !== 'Enter') return; + await sendMessageToHub(params.agentId, params.conversationId, text); + } + function close() { window.parent.postMessage({ action: "close" }, "*"); } + + function closeLog() { + isLoadLog = false; + }
-
+
@@ -140,6 +161,7 @@
    + {#if !isLoadLog}
  • @@ -150,6 +172,7 @@
    • + {/if}
+
{:else}
@@ -239,7 +262,7 @@
- + { onSendMessage(e); }} placeholder="Enter Message..." />
+ + {#if isLoadLog} + + {/if}
\ No newline at end of file diff --git a/src/routes/chat/[agentId]/[conversationId]/content-log.svelte b/src/routes/chat/[agentId]/[conversationId]/content-log.svelte new file mode 100644 index 00000000..bc1316cc --- /dev/null +++ b/src/routes/chat/[agentId]/[conversationId]/content-log.svelte @@ -0,0 +1,76 @@ + + +
+
+
+ +
+
+
    + {#each logs as log} +
    +
    + {log} +
    +
    + {/each} +
+
+
+
\ No newline at end of file From c52b978d660394f80afe5f261736695bdd64fb44 Mon Sep 17 00:00:00 2001 From: Jicheng Lu <103353@smsassist.com> Date: Wed, 17 Jan 2024 17:51:36 -0600 Subject: [PATCH 2/4] remove log --- src/lib/services/signalr-service.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/services/signalr-service.js b/src/lib/services/signalr-service.js index 350e7f40..e794857e 100644 --- a/src/lib/services/signalr-service.js +++ b/src/lib/services/signalr-service.js @@ -79,7 +79,6 @@ export const signalr = { }); connection.on('onContentLogGenerated', (log) => { - console.log('Log: ', log); this.onContentLogGenerated(log); }); }, From 99457beea4eaf86f25555bfdcd09ae290e9572fb Mon Sep 17 00:00:00 2001 From: Jicheng Lu <103353@smsassist.com> Date: Wed, 17 Jan 2024 18:02:41 -0600 Subject: [PATCH 3/4] minor change --- src/routes/chat/[agentId]/[conversationId]/content-log.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/chat/[agentId]/[conversationId]/content-log.svelte b/src/routes/chat/[agentId]/[conversationId]/content-log.svelte index bc1316cc..133cdd93 100644 --- a/src/routes/chat/[agentId]/[conversationId]/content-log.svelte +++ b/src/routes/chat/[agentId]/[conversationId]/content-log.svelte @@ -2,6 +2,7 @@ import 'overlayscrollbars/overlayscrollbars.css'; import { OverlayScrollbars } from 'overlayscrollbars'; import { afterUpdate, onMount } from 'svelte'; + import { replaceNewLine } from '$lib/helpers/http'; /** @type {any[]} */ export let logs = []; @@ -66,7 +67,7 @@ {#each logs as log}
- {log} + {@html replaceNewLine(log)}
{/each} From 3341756c991179b5031cdc749fb7470278561e11 Mon Sep 17 00:00:00 2001 From: Jicheng Lu <103353@smsassist.com> Date: Wed, 17 Jan 2024 18:52:07 -0600 Subject: [PATCH 4/4] change log background --- src/lib/scss/custom/pages/_chat.scss | 39 ++++++++++--------- .../[conversationId]/chat-box.svelte | 9 +++-- .../[conversationId]/content-log.svelte | 11 +++--- 3 files changed, 31 insertions(+), 28 deletions(-) diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss index 2dfc4541..96b66639 100644 --- a/src/lib/scss/custom/pages/_chat.scss +++ b/src/lib/scss/custom/pages/_chat.scss @@ -257,32 +257,33 @@ .chat-log { flex: 0.3; - background-color: white; .padding-side { padding-left: 10px; padding-right: 20px; } - .log-close-btn { - margin-top: 1.5rem; - margin-bottom: 10px; - position: sticky; - display: flex; - justify-content: flex-end; - } + .log-background { + background-color: black; - .log-list { - height: 90vh; - .log-element { - margin-top: 20px; - margin-bottom: 20px; - border-radius: 5px; - background-color: antiquewhite; - - .log-content { - padding: 15px 15px; - font-size: 15px; + .log-close-btn { + margin-top: 1.5rem; + margin-bottom: 10px; + position: sticky; + display: flex; + justify-content: flex-end; + } + + .log-list { + height: 90vh; + .log-element { + margin-top: 15px; + margin-bottom: 15px; + + .log-content { + font-size: 15px; + color: white; + } } } } diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte index a4270f66..9d5c130c 100644 --- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte +++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte @@ -9,7 +9,7 @@ import 'overlayscrollbars/overlayscrollbars.css'; import { OverlayScrollbars } from 'overlayscrollbars'; import { page } from '$app/stores'; - import { onMount } from 'svelte'; + import { onMount, tick } from 'svelte'; import Link from 'svelte-link'; import { signalr } from '$lib/services/signalr-service.js'; import { webSpeech } from '$lib/services/web-speech.js'; @@ -86,7 +86,7 @@ /** @param {import('$types').ChatResponseModel} message */ function onMessageReceivedFromAssistant(message) { - // webSpeech.utter(message.text); + webSpeech.utter(message.text); // clean rich content elements dialogs.forEach(dialog => { if (dialog.rich_content && dialog.rich_content.message.rich_type == "quick_reply") { @@ -122,9 +122,10 @@ webSpeech.start(); } - function refresh() { + async function refresh() { // trigger UI render dialogs = dialogs; + await tick(); setTimeout(() => { const { viewport } = scrollbar.elements(); @@ -203,7 +204,7 @@ - Eidt + Edit Copy Delete diff --git a/src/routes/chat/[agentId]/[conversationId]/content-log.svelte b/src/routes/chat/[agentId]/[conversationId]/content-log.svelte index 133cdd93..735adbeb 100644 --- a/src/routes/chat/[agentId]/[conversationId]/content-log.svelte +++ b/src/routes/chat/[agentId]/[conversationId]/content-log.svelte @@ -1,7 +1,7 @@
-
+
-
+
    {#each logs as log}