Merge pull request #355 from iceljc/features/add-js-interpreter

Features/add js interpreter

Author: iceljc

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',
+    ProgramCode: 'program_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/lib/helpers/types/conversationTypes.js

@@ -105,6 +105,16 @@ IRichContent.prototype.elements;
  */
 IRichContent.prototype.quick_replies;
 
+/**
+ * The language of the code rich content.
+ *
+ * @name language
+ * @type {string}
+ * @instance
+ */
+IRichContent.prototype.language;
+
+
 /**
  * @typedef {Object} TextMessage
  * @property {string} text

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

@@ -0,0 +1,105 @@
+<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 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);
+        }
+    }
+
+    /** @param {string} src */
+    function loadScriptSrc(src) {
+        return new Promise(resolve => {
+            const curScripts = document.head.getElementsByTagName("script");
+            const found = Array.from(curScripts).find(x => x.src === src);
+            if (found) {
+                found.remove();
+            }
+
+            const script = document.createElement('script');
+            script.async = false;
+            script.src = src;
+            script.onload = () => {
+                setTimeout(() => {
+                    console.log(`Script loaded: ${src}`);
+                    resolve(true);
+                }, 0);
+            }
+            script.onerror = () => {
+                setTimeout(() => {
+                    console.log(`Error when loading script: ${src}`);
+                    resolve(false);
+                }, 0);
+            }
+            document.head.appendChild(script);
+        });
+    }
+</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} */
@@ -22,7 +24,12 @@
         style={`${containerStyles}`}
     >
         <div class="flex-shrink-0 align-self-center">
-            <Markdown containerClasses={markdownClasses} text={text} rawText />
+            {#if message?.rich_content?.message?.rich_type === RichType.ProgramCode
+                && message?.rich_content?.message?.language === 'javascript'}
+                <RcJsInterpreter message={message} scrollable />
+            {:else}
+                <Markdown containerClasses={markdownClasses} text={text} rawText />
+            {/if}
         </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}