Merge pull request #350 from iceljc/features/refine-chat-window

add utility description

Author: Oceania2018

package-lock.json

@@ -41,6 +41,7 @@
 		"@fullcalendar/common": "^5.11.5",
 		"@microsoft/signalr": "^8.0.0",
 		"@pgrabovets/json-view": "^2.7.5",
+		"@popperjs/core": "^2.11.8",
 		"@sveltejs/adapter-static": "^3.0.0",
 		"@sveltestrap/sveltestrap": "^6.2.3",
 		"@twilio/voice-sdk": "^2.9.0",

package.json

@@ -1,6 +1,10 @@
 <script>
+	import { onMount } from 'svelte';
 	import { marked } from 'marked';
     import { replaceMarkdown, replaceNewLine } from '$lib/helpers/http';
+	import 'overlayscrollbars/overlayscrollbars.css';
+    import { OverlayScrollbars } from 'overlayscrollbars';
+	import { v4 as uuidv4 } from 'uuid';
 
     /** @type {string} */
 	export let text;
@@ -14,6 +18,32 @@
 	/** @type {boolean} */
 	export let rawText = false;
 
+	const scrollbarId = uuidv4();
+
+	const options = {
+		scrollbars: {
+			visibility: 'auto',
+			autoHide: 'move',
+			autoHideDelay: 100,
+			dragScroll: true,
+			clickScroll: false,
+			theme: 'os-theme-light',
+			pointers: ['mouse', 'touch', 'pen']
+		}
+	};
+
+	onMount(() => {
+		initScrollbar();
+	});
+
+	function initScrollbar() {
+        const elem = document.querySelector(`#markdown-scrollbar-${scrollbarId}`);
+		if (elem) {
+			// @ts-ignore
+			const scrollbar = OverlayScrollbars(elem, options);
+		}
+    }
+
     let innerText = '';
 	$: {
 		if (typeof text !== 'string') {
@@ -30,6 +60,7 @@
 </script>
 
 <div
+	id={`markdown-scrollbar-${scrollbarId}`}
 	class={`markdown-container markdown-lite ${containerClasses || 'text-white'}`}
 	style={`${containerStyles}`}
 >

src/lib/common/markdown/Markdown.svelte

@@ -0,0 +1,232 @@
+<script>
+	import { Portal } from '@sveltestrap/sveltestrap';
+    import { onMount, onDestroy } from 'svelte';
+    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.
+     * @type {string}
+     */
+    export let containerClasses = '';
+
+    /**
+     * Flag to enable animation for the tooltip.
+     * @type {boolean}
+     */
+    export let animation = true;
+
+    /**
+     * Unique identifier for the tooltip.
+     * @type {string}
+     */
+    export let id = `tooltip_${uuidv4()}`;
+
+    /**
+     * Controls the visibility of the tooltip.
+     * @type {boolean}
+     */
+    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}
+     */
+    export let placement = 'top';
+
+    /**
+     * The target element to which the tooltip is attached.
+     * @type {string | HTMLElement}
+     */
+    export let target = '';
+
+    /**
+     * The theme name override to apply to this component instance.
+     * @type {string | null}
+     */
+    export let theme = null;
+
+    /**
+     * The delay for showing the tooltip (in milliseconds).
+     * @type {number}
+     */
+    export let delay = 0;
+
+    /** @type {string} */
+    let bsPlacement = 'start';
+    /** @type {object} */
+    let popperInstance;
+    /** @type {string} */
+    let popperPlacement = placement;
+    /** @type {HTMLDivElement | null} */
+    let targetEl;
+    /** @type {HTMLDivElement | null} */
+    let tooltipEl;
+    /** @type {number} */
+    let showTimer;
+
+    const checkPopperPlacement = {
+        name: 'checkPopperPlacement',
+        enabled: true,
+        phase: 'main',
+        // @ts-ignore
+        fn(args) {
+            popperPlacement = args.state.placement;
+        }
+    };
+
+
+    onMount(() => {
+        registerEventListeners();
+    });
+
+    onDestroy(() => {
+        unregisterEventListeners();
+        clearTimeout(showTimer);
+    });
+
+    const open = () => {
+        clearTimeout(showTimer);
+        showTimer = setTimeout(() => (isOpen = true), delay);
+    };
+
+    const close = () => {
+        clearTimeout(showTimer);
+        isOpen = false;
+    };
+
+    function registerEventListeners() {
+        // eslint-disable-next-line eqeqeq
+        if (target == null || !target) {
+            targetEl = null;
+            return;
+        }
+
+        try {
+            if (target instanceof HTMLElement) {
+                // @ts-ignore
+                targetEl = target;
+            }
+        } catch (e) {}
+
+        // eslint-disable-next-line eqeqeq
+        if (targetEl == null) {
+            try {
+                targetEl = document.querySelector(`#${target}`);
+            } catch (e) {}
+        }
+
+        if (targetEl) {
+            targetEl.addEventListener('mouseover', open);
+            if (!persist) {
+                targetEl.addEventListener('mouseleave', close);
+            }
+        }
+    }
+
+    function unregisterEventListeners() {
+        if (targetEl) {
+            targetEl.removeEventListener('mouseover', open);
+            targetEl.removeEventListener('mouseleave', close);
+            targetEl.removeAttribute('aria-describedby');
+        }
+
+        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',
+        `bs-tooltip-${bsPlacement}`,
+        animation ? 'fade' : null,
+        isOpen ? 'show' : null
+    );
+
+    $: {
+        if (isOpen && tooltipEl) {
+            // @ts-ignore
+            popperInstance = createPopper(targetEl, tooltipEl, {
+                placement,
+                modifiers: [checkPopperPlacement]
+            });
+        } else if (popperInstance) {
+            // @ts-ignore
+            popperInstance.destroy();
+            // @ts-ignore
+            popperInstance = undefined;
+        }
+    }
+    
+    $: if (target) {
+        unregisterEventListeners();
+        registerEventListeners();
+    }
+
+    $: if (targetEl) {
+        if (isOpen) {
+            targetEl.setAttribute('aria-describedby', id);
+        } else {
+            targetEl.removeAttribute('aria-describedby');
+        }
+    }
+
+    $: if (persist && tooltipEl) {
+        tooltipEl.addEventListener("mouseleave", close);
+    }
+
+    $: {
+        if (popperPlacement === 'left') {
+            bsPlacement = 'start';
+        } else if (popperPlacement === 'right') {
+            bsPlacement = 'end';
+        } else {
+            bsPlacement = popperPlacement;
+        }
+    }
+</script>
+
+{#if isOpen}
+    <svelte:component this={Portal}>
+        <div
+            bind:this={tooltipEl}
+            use:clickoutsideDirective
+            on:clickoutside={handleClickOutside}
+            {...$$restProps}
+            class={classes}
+            {id}
+            role="tooltip"
+            data-bs-theme={theme}
+            data-bs-delay={delay}
+            x-placement={popperPlacement}
+        >
+            <div class="tooltip-arrow" data-popper-arrow></div>
+            <div class="tooltip-inner">
+                <slot />
+            </div>
+        </div>
+    </svelte:component>
+{/if}

src/lib/common/tooltip/BotsharpTooltip.svelte

@@ -145,6 +145,7 @@
  * @property {string?} [template_name]
  * @property {string?} [template_display_name]
  * @property {string?} [visibility_expression]
+ * @property {string?} [description]
  */
 
 /**

src/lib/helpers/types/agentTypes.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()];
-}
+}
+
+/**
+ * @param {(string | null)[]} args
+ */
+export const classnames = (...args) => args.filter(Boolean).join(' ');

src/lib/helpers/utils/common.js

@@ -249,4 +249,21 @@
     gap: 5px;
     flex-wrap: wrap;
     margin: 5px 0px;
+}
+
+.agent-utility-desc {
+    .tooltip-inner {
+        text-align: start;
+        max-width: fit-content;
+        padding: 20px;
+    }
+
+    .markdown-div {
+        max-height: 500px;
+        font-size: 15px;
+    }
+
+    &.show {
+        opacity: 1 !important;
+    }
 }

src/lib/scss/custom/pages/_agent.scss

@@ -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();