refine js interpreter styles

Author: Jicheng Lu

src/lib/helpers/types/commonTypes.js

@@ -55,6 +55,7 @@
  * @typedef {Object} LlmModelSetting
  * @property {string} name
  * @property {string} type
+ * @property {any} reasoning
  */
 
 

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

@@ -100,6 +100,6 @@
         <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 id={`chart-${message?.message_id}`}></div>
     </div>
 </div>

src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte

@@ -12,9 +12,11 @@
     export let handleAgentChange = () => {};
 
     export const fetchLlmConfig = () => {
+        const reasoningEffort = models.find(x => x.name === config.model)?.reasoning != null ? config.reasoning_effort_level : null;
         return {
             ...config,
-            max_output_tokens: Number(config.max_output_tokens) > 0 ? Number(config.max_output_tokens) : null
+            max_output_tokens: Number(config.max_output_tokens) > 0 ? Number(config.max_output_tokens) : null,
+            reasoning_effort_level: reasoningEffort
         };
     }
 
@@ -37,6 +39,8 @@
     /** @type {import('$commonTypes').LlmModelSetting[]} */
     let models = [];
 
+    $: isReasoningModel = models.find(x => x.name === config.model)?.reasoning != null;
+
     onMount(async () =>{
         await init();
     });
@@ -63,6 +67,7 @@
         if (!!!provider) {
             models = [];
             config.model = null;
+            config.reasoning_effort_level = null;
             handleAgentChange();
             return;
         }
@@ -181,6 +186,7 @@
             </div>
         </div>
 
+        {#if isReasoningModel}
         <div class="mb-3 row">
             <label for="example-text-input" class="col-md-3 col-form-label">
                 Reasoning effort
@@ -195,5 +201,6 @@
                 </Input>
             </div>
         </div>
+        {/if}
     </CardBody>
 </Card>

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

@@ -1,6 +1,8 @@
 <script>
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
 	import { Button } from '@sveltestrap/sveltestrap';
+	import RcJsInterpreter from '../../../chat/[agentId]/[conversationId]/rich-content/rc-js-interpreter.svelte';
+	import { RichType } from '$lib/helpers/enums';
 
   /** @type {import('$conversationTypes').ChatResponseModel} */
   export let dialog;
@@ -18,11 +20,16 @@
   class="fw-bold"
   class:text-collapse={!!is_collapsed}
 >
-  <Markdown
-    containerClasses={'dialog-item-text'}
-    text={dialog?.rich_content?.message?.text || dialog?.text}
-    rawText
-  />
+  {#if dialog?.rich_content?.message?.rich_type === RichType.ProgramCode
+      && dialog?.rich_content?.message?.language === 'javascript'}
+    <RcJsInterpreter message={dialog} scrollable />
+  {:else}
+    <Markdown
+      containerClasses={'dialog-item-text'}
+      text={dialog?.rich_content?.message?.text || dialog?.text}
+      rawText
+    />
+  {/if}
 </div>
 
 <Button