refine js interpreter styles

[iceljc]

PR Type

Enhancement

---

Description

• Add loading state with dots animation for JS interpreter

• Introduce container styling props for customization

• Convert script loading to Promise-based async pattern

• Apply primary color styling to conversation dialog

---

Diagram Walkthrough

flowchart LR
  A["JS Interpreter"] --> B["Loading State"]
  A --> C["Container Props"]
  B --> D["LoadingDots Component"]
  C --> E["Custom Styles"]
  E --> F["Primary Color Theme"]

Loading

File Walkthrough

Relevant files

Enhancement

rc-js-interpreter.svelte Enhanced JS interpreter with loading state                              src/routes/chat/[agentId]/[conversationId]/rich-content/rc-js-interpreter.svelte Import LoadingDots component for loading animation Add containerClasses and containerStyles props for styling Implement isLoading state management Convert loadScript function to return Promise Add loading dots display during script execution +46/-12  conv-dialog-element.svelte Apply primary color styling to JS interpreter                        src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte Add containerStyles prop with primary color styling to RcJsInterpreter +1/-1

---

[qodo-code-review]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 Security concerns Code injection via eval: Executing dynamic code with eval on message-derived content is dangerous if any portion is user-controlled. Even with script tag extraction, inline JS is executed in page context, enabling XSS or data exfiltration. If this is unavoidable, ensure strict trust boundaries, sanitize inputs, or move execution to a sandboxed iframe/worker, and consider CSP with 'unsafe-eval' avoidance.

⚡ Recommended focus areas for review Eval Usage The use of eval to execute extracted script content can introduce security and stability risks; confirm inputs are trusted or sandboxed and consider safer alternatives. eval(code); resolve(true); }, 0); } Loading State Reset isLoading is set false in finally, but if initCode throws before setting it true or loadScript rejects, the UI behavior and error surfacing may be inconsistent; consider explicit error handling and guarding multiple runs. isLoading = true; loadScript(codeText).finally(() => { isLoading = false; }); } catch (error) { Duplicate Script Loads loadScriptSrc checks by src string only; without deduping across invocations or handling relative vs absolute URLs, scripts might be injected multiple times. /** @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); }); }

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Ensure promise settles on errors Wrap the eval calls in try/catch so the promise always settles, preventing the loading state from hanging if the evaluated code throws. Also propagate the original error in the rejection to aid debugging instead of rejecting with a boolean. src/routes/chat/[agentId]/[conversationId]/rich-content/rc-js-interpreter.svelte [78-93] if (matchedSrcs.length > 0) { const promises = matchedSrcs.map(x => loadScriptSrc(x)); - Promise.all(promises).then(() => { - setTimeout(() => { + Promise.all(promises) + .then(() => { + setTimeout(() => { + try { + eval(code); + resolve(true); + } catch (err) { + reject(err); + } + }, 0); + }) + .catch((err) => { + reject(err); + }); +} else { + setTimeout(() => { + try { eval(code); resolve(true); - }, 0); - }).catch(() => { - reject(false); - }); -} else { - setTimeout(() => { - eval(code); - resolve(true); + } catch (err) { + reject(err); + } }, 0); } Apply / Chat Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies that an unhandled error inside eval would prevent the promise from settling, causing the UI to hang in a loading state, and provides a robust fix using try/catch.	Medium
More