Features/add js interpreter

src/lib/common/markdown/Markdown.svelte

@@ -21,8 +21,7 @@
 	/** @type {boolean} */
 	export let scrollable = false;
 
-	const scrollbarId = uuidv4();
-
+	const scrollbarId = `markdown-scrollbar-${uuidv4()}`;
 	const options = {
 		scrollbars: {
 			visibility: 'auto',
@@ -42,7 +41,7 @@
 	});
 
 	function initScrollbar() {
-        const elem = document.querySelector(`#markdown-scrollbar-${scrollbarId}`);
+        const elem = document.querySelector(`#${scrollbarId}`);
 		if (elem) {
 			// @ts-ignore
 			const scrollbar = OverlayScrollbars(elem, options);
@@ -65,7 +64,7 @@
 </script>
 
 <div
-	id={`markdown-scrollbar-${scrollbarId}`}
+	id={`${scrollbarId}`}
 	class={`markdown-container markdown-lite ${containerClasses || 'text-white'}`}
 	style={`${containerStyles}`}
 >

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/lib/helpers/http.js

@@ -212,7 +212,7 @@ export function replaceNewLine(text) {
  * @returns {string}
  */
 export function replaceMarkdown(text) {
-    let res = text.replace(/#([\s]+)/g, '\\# ').replace(/[-|=]{3,}/g, '');
+    let res = text.replace(/#([\s]+)/g, '\\# ').replace(/[-|=]{3,}/g, '@@@');
 
     let regex1 = new RegExp('\\*(.*)\\*', 'g');
     let regex2 = new RegExp('\\*([\\*]+)\\*', 'g');

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

@@ -0,0 +1,83 @@
+<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 = `js-interpreter-scrollbar-${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(`#${scrollbarId}`);
+		if (elem) {
+			// @ts-ignore
+			const scrollbar = OverlayScrollbars(elem, options);
+		}
+    }
+
+    function initCode() {
+        try {
+            const text = message?.rich_content?.message?.text || message?.text || '';
+            const parsedText = marked.lexer(text);
+            // @ts-ignore
+            const codeText = parsedText.filter(x => !!x.text).map(x => x.text).join('');
+            loadScript(codeText);
+        } catch (error) {
+            console.error('Error parsing js code:', error);
+        }
+    }
+
+    /** @param {string} codeText */
+    function loadScript(codeText) {
+        const code = codeText.replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gi, '$1');
+        const matchedSrcs = codeText.match(/<script\s+[^>]*src\s*=\s*["']([^"']+)["'][^>]*>/i);
+        if (matchedSrcs && matchedSrcs[1]) {
+            const curScripts = document.head.getElementsByTagName("script");
+            const found = Array.from(curScripts).find(x => x.src === matchedSrcs[1]);
+            if (found) {
+                found.remove();
+            }
+
+            const script = document.createElement('script');
+            script.src = matchedSrcs[1];
+            script.onload = () => eval(code);
+            document.head.appendChild(script);
+        } else {
+            eval(code);
+        }
+    }
+</script>
+
+<div>
+    {#if message?.text}
+        <div class="mb-3">{message.text}</div>
+    {/if}
+    <div id={`${scrollbarId}`}>
+        <div id={`chart-${message?.message_id}`} style="min-width: 1000px; max-height: 500px;"></div>
+    </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}