add js interpreter

Author: Jicheng Lu

src/lib/helpers/enums.js

@@ -27,7 +27,8 @@ const richType = {
     Button: 'button_template',
     MultiSelect: 'multi-select_template',
     Generic: 'generic_template',
-    Upload: 'upload_template'
+    Upload: 'upload_template',
+    JsCode: 'js_code',
 }
 export const RichType = Object.freeze(richType);
 

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

@@ -0,0 +1,55 @@
+<script>
+	import { onMount } from "svelte";
+    import { marked } from "marked";
+    import 'overlayscrollbars/overlayscrollbars.css';
+    import { OverlayScrollbars } from 'overlayscrollbars';
+    import { v4 as uuidv4 } from 'uuid';
+
+    /** @type {import('$conversationTypes').ChatResponseModel?} */
+    export let message;
+
+    /** @type {boolean} */
+	export let scrollable = false;
+
+    const scrollbarId = uuidv4();
+    const options = {
+		scrollbars: {
+			visibility: 'auto',
+			autoHide: 'move',
+			autoHideDelay: 100,
+			dragScroll: true,
+			clickScroll: false,
+			theme: 'os-theme-dark',
+			pointers: ['mouse', 'touch', 'pen']
+		}
+	};
+
+    onMount(() => {
+        if (scrollable) {
+            initScrollbar();
+        }
+
+        initCode();
+    });
+
+    function initScrollbar() {
+        const elem = document.querySelector(`#js-interpreter-scrollbar-${scrollbarId}`);
+		if (elem) {
+			// @ts-ignore
+			const scrollbar = OverlayScrollbars(elem, options);
+		}
+    }
+
+    function initCode() {
+        const text = message?.rich_content?.message?.text || message?.text || '';
+        const parsedText = marked.lexer(text);
+        // @ts-ignore
+        const codeText = parsedText.find(token => token.type === 'code' || token.type === 'html')?.text || '';
+        const code = codeText.replace(/<script\b[^>]*>([\s\S]*?)<\/script>/i, '$1');
+        eval(code);
+    }
+</script>
+
+<div id={`js-interpreter-scrollbar-${scrollbarId}`}>
+    <div id={`chart-${message?.message_id}`}></div>
+</div>

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

@@ -1,7 +1,9 @@
 <script>
 	import Markdown from "$lib/common/markdown/Markdown.svelte";
+	import { RichType } from "$lib/helpers/enums";
+	import RcJsInterpreter from "./rc-js-interpreter.svelte";
 
-    /** @type {any} */
+    /** @type {import('$conversationTypes').ChatResponseModel?} */
     export let message;
 
     /** @type {string} */
@@ -12,13 +14,21 @@
 
     /** @type {string} */
     export let markdownClasses = '';
+
+    $: text = message?.rich_content?.message?.text || message?.text || '';
 </script>
 
-<div
-    class={`ctext-wrap bg-primary ${containerClasses}`}
-    style={`${containerStyles}`}
->
-	<div class="flex-shrink-0 align-self-center">
-        <Markdown containerClasses={markdownClasses} text={message?.rich_content?.message?.text || message?.text} rawText />
+{#if text}
+    <div
+        class={`ctext-wrap bg-primary ${containerClasses}`}
+        style={`${containerStyles}`}
+    >
+        <div class="flex-shrink-0 align-self-center">
+            {#if message?.rich_content?.message?.rich_type === RichType.JsCode}
+                <RcJsInterpreter message={message} scrollable />
+            {:else}
+                <Markdown containerClasses={markdownClasses} text={text} rawText />
+            {/if}
+        </div>
     </div>
-</div>
+{/if}

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

@@ -48,11 +48,11 @@
     }
 </script>
 
+
+
 {#if message?.rich_content?.editor === EditorType.File}
     <ChatAttachmentOptions options={options} disabled={disabled} onConfirm={(title, payload) => handleConfirm(title, payload)} />
-{/if}
-
-{#if message?.rich_content?.editor !== EditorType.File}
+{:else}
     {#if !isComplexElement}
         <RcPlainOptions options={options} isMultiSelect={isMultiSelect} disabled={disabled} onConfirm={(title, payload) => handleConfirm(title, payload)} />
     {:else}