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

refine js interpreter styles

Author: iceljc

src/routes/chat/[agentId]/[conversationId]/rich-content/rc-js-interpreter.svelte

@@ -4,10 +4,17 @@
     import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
     import { v4 as uuidv4 } from 'uuid';
+	import LoadingDots from "$lib/common/LoadingDots.svelte";
 
     /** @type {import('$conversationTypes').ChatResponseModel?} */
     export let message;
 
+   /** @type {string} */
+    export let containerClasses = '';
+
+    /** @type {string} */
+    export let containerStyles = '';
+
     /** @type {boolean} */
 	export let scrollable = false;
 
@@ -24,6 +31,9 @@
 		}
 	};
 
+    /** @type {boolean} */
+    let isLoading = false;
+
     onMount(() => {
         if (scrollable) {
             initScrollbar();
@@ -46,24 +56,43 @@
             const parsedText = marked.lexer(text);
             // @ts-ignore
             const codeText = parsedText.filter(x => !!x.text).map(x => x.text).join('');
-            loadScript(codeText);
+            isLoading = true;
+            loadScript(codeText).finally(() => {
+                isLoading = false;
+            });
         } catch (error) {
             console.error('Error parsing js code:', error);
         }
     }
 
-    /** @param {string} codeText */
+    /** 
+     * @param {string} codeText
+     * @returns {Promise<boolean>} 
+     */
     function loadScript(codeText) {
-        const code = codeText.replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gi, '$1');
-        const scriptTags = [...codeText.matchAll(/<script\s+[^>]*src\s*=\s*["']([^"']+)["'][^>]*>/gi)];
-        const matchedSrcs = scriptTags.filter(x => !!x[1]).map(x => x[1]);
+        return new Promise((resolve, reject) => {
+            const code = codeText.replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gi, '$1');
+            const scriptTags = [...codeText.matchAll(/<script\s+[^>]*src\s*=\s*["']([^"']+)["'][^>]*>/gi)];
+            const matchedSrcs = scriptTags.filter(x => !!x[1]).map(x => x[1]);
 
-        if (matchedSrcs.length > 0) {
-            const promises = matchedSrcs.map(x => loadScriptSrc(x));
-            Promise.all(promises).then(() => setTimeout(() => eval(code), 0));
-        } else {
-            setTimeout(() => eval(code), 0);
-        }
+            if (matchedSrcs.length > 0) {
+                const promises = matchedSrcs.map(x => loadScriptSrc(x));
+                Promise.all(promises).then(() => {
+                    setTimeout(() => {
+                        eval(code);
+                        resolve(true);
+                    }, 0);
+                }).catch(() => {
+                    reject(false);
+                });
+            } else {
+                setTimeout(() => {
+                    eval(code);
+                    resolve(true);
+                }, 0);
+            }
+        });
+        
     }
 
     /** @param {string} src */
@@ -95,10 +124,15 @@
     }
 </script>
 
-<div>
+<div class={`${containerClasses}`} style={`${containerStyles}`}>
     {#if message?.text}
         <div class="mb-3">{message.text}</div>
     {/if}
+    {#if isLoading}
+        <div class="mb-3">
+            <LoadingDots duration={'1s'} size={5} gap={3} color={'var(--bs-primary)'} />
+        </div>
+    {/if}
     <div id={`${scrollbarId}`}>
         <div id={`chart-${message?.message_id}`} style="min-width: 800px; max-height: 500px;"></div>
     </div>

src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte

@@ -22,7 +22,7 @@
 >
   {#if dialog?.rich_content?.message?.rich_type === RichType.ProgramCode
       && dialog?.rich_content?.message?.language === 'javascript'}
-    <RcJsInterpreter message={dialog} scrollable />
+    <RcJsInterpreter message={dialog} scrollable containerStyles={'color: var(--bs-primary);'} />
   {:else}
     <Markdown
       containerClasses={'dialog-item-text'}