From 63e39737aa6001ea8ab5004bc211034dcd108b4c Mon Sep 17 00:00:00 2001 From: Jicheng Lu <103353@smsassist.com> Date: Wed, 4 Jun 2025 17:10:43 -0500 Subject: [PATCH 1/8] add utility desciption --- src/lib/helpers/types/agentTypes.js | 1 + src/lib/scss/custom/pages/_agent.scss | 17 +++++ .../agent-components/agent-utility.svelte | 71 +++++++++++++++---- .../page/agent/[agentId]/agent-tabs.svelte | 2 +- 4 files changed, 77 insertions(+), 14 deletions(-) diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js index 21253f9b..5cf7c6b6 100644 --- a/src/lib/helpers/types/agentTypes.js +++ b/src/lib/helpers/types/agentTypes.js @@ -145,6 +145,7 @@ * @property {string?} [template_name] * @property {string?} [template_display_name] * @property {string?} [visibility_expression] + * @property {string?} [description] */ /** diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss index 2cddf4b5..5b9d1fca 100644 --- a/src/lib/scss/custom/pages/_agent.scss +++ b/src/lib/scss/custom/pages/_agent.scss @@ -249,4 +249,21 @@ gap: 5px; flex-wrap: wrap; margin: 5px 0px; +} + +.agent-utility-desc { + min-width: 300px; + + .tooltip-inner { + text-align: start; + max-width: fit-content; + min-width: 300px; + } + + .markdown-div { + max-height: 500px; + max-width: 300px; + scrollbar-width: none; + font-size: 15px; + } } \ No newline at end of file diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte index 69f54f87..e67973f5 100644 --- a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte +++ b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte @@ -1,8 +1,9 @@
diff --git a/src/lib/common/tooltip/BotsharpTooltip.svelte b/src/lib/common/tooltip/BotsharpTooltip.svelte new file mode 100644 index 00000000..8cd0662e --- /dev/null +++ b/src/lib/common/tooltip/BotsharpTooltip.svelte @@ -0,0 +1,209 @@ + + +{#if isOpen} + + + +{/if} \ No newline at end of file diff --git a/src/lib/helpers/utils/common.js b/src/lib/helpers/utils/common.js index daa9d96d..6ac0218d 100644 --- a/src/lib/helpers/utils/common.js +++ b/src/lib/helpers/utils/common.js @@ -76,4 +76,9 @@ export function truncateByPrefix(str, prefix) { */ export function removeDuplicates(arr, key) { return [...new Map(arr.map(item => [item[key], item])).values()]; -} \ No newline at end of file +} + +/** + * @param {(string | null)[]} args + */ +export const classnames = (...args) => args.filter(Boolean).join(' '); \ No newline at end of file diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss index 5b9d1fca..56d80698 100644 --- a/src/lib/scss/custom/pages/_agent.scss +++ b/src/lib/scss/custom/pages/_agent.scss @@ -252,18 +252,14 @@ } .agent-utility-desc { - min-width: 300px; - .tooltip-inner { text-align: start; max-width: fit-content; - min-width: 300px; + padding: 20px; } .markdown-div { max-height: 500px; - max-width: 300px; - scrollbar-width: none; font-size: 15px; } } \ No newline at end of file diff --git a/src/lib/services/signalr-service.js b/src/lib/services/signalr-service.js index 83bc2ad8..d5f9c9ae 100644 --- a/src/lib/services/signalr-service.js +++ b/src/lib/services/signalr-service.js @@ -48,7 +48,7 @@ export const signalr = { // create a new connection object with the hub URL and some options let user = getUserStore(); connection = new HubConnectionBuilder() - .withUrl(endpoints.chatHubUrl + `?conversationId=${conversationId}&access_token=${user.token}`) // the hub URL, change it according to your server + .withUrl(endpoints.chatHubUrl + `?conversation-id=${conversationId}&access_token=${user.token}`) // the hub URL, change it according to your server .withAutomaticReconnect() // enable automatic reconnection .configureLogging(LogLevel.Information) // configure the logging level .build(); diff --git a/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte b/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte index 8d44b09e..826cffa9 100644 --- a/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte +++ b/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte @@ -48,9 +48,9 @@ let selectedTab = contentLogTab; /** @type {import('$conversationTypes').ConversationLogFilter} */ - let contentLogFilter = { size: 100, startTime: utcNow }; + let contentLogFilter = { size: 20, startTime: utcNow }; /** @type {import('$conversationTypes').ConversationLogFilter} */ - let stateLogFilter = { size: 100, startTime: utcNow }; + let stateLogFilter = { size: 20, startTime: utcNow }; const options = { scrollbars: { @@ -59,7 +59,7 @@ autoHideDelay: 100, dragScroll: true, clickScroll: false, - theme: 'os-theme-dark', + theme: 'os-theme-light', pointers: ['mouse', 'touch', 'pen'] } }; @@ -69,7 +69,7 @@ await getChatStateLogs(); initScrollbars(); - scrollToBottom(); + scroll(); }); beforeUpdate(() => {}); @@ -84,17 +84,17 @@ function refresh() { if (autoScroll) { - scrollToBottom(); + scroll(); } - } - function scrollToBottom() { + /** @param {boolean} goToTop */ + function scroll(goToTop = false) { // @ts-ignore scrollbars.forEach(scrollbar => { setTimeout(() => { const { viewport } = scrollbar.elements(); - viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' }); + viewport.scrollTo({ top: goToTop ? 0 : viewport.scrollHeight, behavior: 'smooth' }); }, 200); }); } @@ -104,18 +104,8 @@ const elem = document.querySelector(item.id); if (!elem) return; + // @ts-ignore const scrollbar = OverlayScrollbars(elem, options); - scrollbar.on("scroll", async (e) => { - const curScrollTop = e.elements().scrollOffsetElement.scrollTop; - if (curScrollTop <= 3 && curScrollTop > 0) { - if (item.type === contentLogTab) { - await getChatContentLogs(); - } else if (item.type === conversationStateLogTab) { - await getChatStateLogs(); - } - } - }); - scrollbars = [ ...scrollbars, scrollbar]; }); } @@ -161,7 +151,7 @@ function handleCleanScreen() { cleanLogs(); - cleanScreen && cleanScreen(); + cleanScreen?.(); } /** @param {number} selected */ @@ -171,6 +161,15 @@ } selectedTab = selected; } + + async function goToTopLog() { + if (selectedTab === contentLogTab) { + await getChatContentLogs(); + } else if (selectedTab === conversationStateLogTab) { + await getChatStateLogs(); + } + scroll(true); + }
@@ -180,9 +179,34 @@ +
+
+ +
@@ -191,7 +215,7 @@ class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light" on:click={() => closeWindow()} > - +
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte index d093adb4..343c7871 100644 --- a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte +++ b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte @@ -1,13 +1,17 @@ + resizeWindow()}/> +
@@ -418,18 +430,20 @@ style="font-size: 15px;" id={`utility-${uid}-${fid}`} /> - - +
{/if} From b2c0f6e7cae6bc03f9925d5caf7b7d59ee74d010 Mon Sep 17 00:00:00 2001 From: Jicheng Lu <103353@smsassist.com> Date: Fri, 6 Jun 2025 13:15:37 -0500 Subject: [PATCH 5/8] complete --- src/lib/common/tooltip/BotsharpTooltip.svelte | 40 +++++++++++++++---- src/lib/scss/custom/pages/_agent.scss | 4 ++ .../persist-log/persist-log.svelte | 2 +- .../agent-components/agent-utility.svelte | 2 +- .../page/agent/[agentId]/agent-tabs.svelte | 2 +- 5 files changed, 39 insertions(+), 11 deletions(-) diff --git a/src/lib/common/tooltip/BotsharpTooltip.svelte b/src/lib/common/tooltip/BotsharpTooltip.svelte index 8cd0662e..23762ff3 100644 --- a/src/lib/common/tooltip/BotsharpTooltip.svelte +++ b/src/lib/common/tooltip/BotsharpTooltip.svelte @@ -5,6 +5,7 @@ import { createPopper } from '@popperjs/core'; import { v4 as uuidv4 } from 'uuid'; import { classnames } from '$lib/helpers/utils/common'; + import { clickoutsideDirective } from "$lib/helpers/directives"; /** * Additional CSS class names for the tooltip. @@ -30,6 +31,12 @@ */ export let isOpen = false; + /** + * Controls the visibility of the tooltip after hover the attached element. + * @type {boolean} + */ + export let persist = false; + /** * The preferred placement of the tooltip. * @type {string} @@ -73,7 +80,6 @@ phase: 'main', // @ts-ignore fn(args) { - console.log('args', args); popperPlacement = args.state.placement; } }; @@ -121,22 +127,38 @@ if (targetEl) { targetEl.addEventListener('mouseover', open); - // targetEl.addEventListener('mouseleave', close); + if (!persist) { + targetEl.addEventListener('mouseleave', close); + } } } function unregisterEventListeners() { if (targetEl) { targetEl.removeEventListener('mouseover', open); - // targetEl.removeEventListener('mouseleave', close); + targetEl.removeEventListener('mouseleave', close); targetEl.removeAttribute('aria-describedby'); } - if (tooltipEl) { + if (tooltipEl && persist) { tooltipEl.removeEventListener("mouseleave", close); } } + /** @param {any} e */ + function handleClickOutside(e) { + e.preventDefault(); + + if (!persist) return; + + const curNode = e.detail.currentNode; + const targetNode = e.detail.targetNode; + + if (!curNode?.contains(targetNode)) { + isOpen = false; + } + } + $: classes = classnames( containerClasses, 'tooltip', @@ -173,6 +195,10 @@ } } + $: if (persist && tooltipEl) { + tooltipEl.addEventListener("mouseleave", close); + } + $: { if (popperPlacement === 'left') { bsPlacement = 'start'; @@ -182,16 +208,14 @@ bsPlacement = popperPlacement; } } - - $: if (tooltipEl) { - tooltipEl.addEventListener("mouseleave", close); - } {#if isOpen}
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte index 343c7871..e76f2a79 100644 --- a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte +++ b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte @@ -435,7 +435,7 @@ style={`min-width: ${Math.floor(windowWidth*0.3)}px;`} target={`utility-${uid}-${fid}`} placement="right" - isOpen + persist > { - selectedTab = tabs[2]?.name; + selectedTab = tabs[0]?.name; }); /** @param {string} selected */ From dbb75696db1bd2df546b68eb4ed2f19672fe854b Mon Sep 17 00:00:00 2001 From: Jicheng Lu <103353@smsassist.com> Date: Fri, 6 Jun 2025 13:27:09 -0500 Subject: [PATCH 6/8] enable check --- src/lib/common/tooltip/BotsharpTooltip.svelte | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/lib/common/tooltip/BotsharpTooltip.svelte b/src/lib/common/tooltip/BotsharpTooltip.svelte index 23762ff3..c1d00bd2 100644 --- a/src/lib/common/tooltip/BotsharpTooltip.svelte +++ b/src/lib/common/tooltip/BotsharpTooltip.svelte @@ -1,5 +1,4 @@