Relocate lib components

[iceljc]

PR Type

Enhancement, Refactoring

---

Description

• Reorganize lib components into semantic subdirectories (shared, dropdowns, spinners, modals, files, audio-player)

• Add new CodeScript component for syntax-highlighted code editing with Python and JavaScript support

• Introduce PlainModal component for reusable modal dialogs with customizable styling

• Add code script viewing functionality to chat messages with modal display

• Update all import paths across 70+ files to reflect new component organization

---

Diagram Walkthrough

flowchart LR
  A["Flat lib/common structure"] -->|"Reorganize into subdirectories"| B["Semantic folder structure"]
  B -->|"shared/"| C["HeadTitle, Breadcrumb, etc."]
  B -->|"dropdowns/"| D["LanguageDropdown, Select, etc."]
  B -->|"spinners/"| E["LoadingDots, LoadingToComplete, etc."]
  B -->|"modals/"| F["DialogModal, StateModal, PlainModal"]
  B -->|"files/"| G["FileGallery, FileDropZone, etc."]
  H["New CodeScript component"] -->|"Added to shared/"| I["Code editor with syntax highlighting"]
  I -->|"Integrated into"| J["Chat message viewer"]

Loading

File Walkthrough

	Relevant files
Enhancement	6 files CodeScript.svelte New code editor component with syntax highlighting              +81/-0    PlainModal.svelte New reusable modal wrapper component                                          +36/-0    LanguageDropdown.svelte Add JSDoc type annotations and formatting                                +3/-3      chat-box.svelte Add code script modal and viewer functionality                      +64/-12  _codeScript.scss New styles for code script container                                          +6/-0      app.scss Import new codeScript component styles                                      +1/-0
Formatting	2 files CollapsibleCard.svelte Minor formatting and semicolon fixes                                          +2/-2      RightSidebar.svelte Remove unnecessary blank line                                                        +0/-1
Refactoring	14 files StateSearch.svelte Update import path for RemoteSearchInput                                  +1/-1      AudioSpeaker.svelte Update Stretch component import path                                          +1/-1      MessageAudioPlayer.svelte Update Stretch component import path                                          +1/-1      error-500.svelte Update HeadTitle import to shared subdirectory                      +1/-1      AudioGallery.svelte Update AudioPlayer import path                                                      +1/-1      MessageFileGallery.svelte Update FileGallery import path                                                      +1/-1      NavItem.svelte Update InPlaceEdit import to shared subdirectory                  +1/-1      Header.svelte Update dropdown component imports to new paths                      +4/-4      Index.svelte Update RightSidebar and LoadingToComplete imports                +2/-2      chat-file-gallery.svelte Update FileGallery import path                                                      +1/-1      chat-file-uploader.svelte Update FileDropZone import path                                                    +1/-1      rc-js-interpreter.svelte Update LoadingDots import to spinners subdirectory              +1/-1      script-editor.svelte Replace CodeMirror with CodeScript component                          +8/-40    +layout.svelte Update LiveChatEntry import path                                                  +1/-1
Dependencies	1 files package.json Add JavaScript CodeMirror language support                              +1/-0
Additional files	65 files FullScreenDropdown.svelte [link]    NotificationDropdown.svelte [link]    ProfileDropdown.svelte [link]    Select.svelte [link]    FileDropZone.svelte [link]    FileGallery.svelte [link]    DialogModal.svelte [link]    StateModal.svelte [link]    Breadcrumb.svelte [link]    BubbleChat.svelte [link]    ChartColorsArray.svelte [link]    HeadTitle.svelte [link]    InPlaceEdit.svelte [link]    Label.svelte [link]    LiveChatEntry.svelte [link]    PlainPagination.svelte [link]    RemoteSearchInput.svelte [link]    Stretch.svelte [link]    TablePagination.svelte [link]    Loader.svelte [link]    LoadingDots.svelte [link]    LoadingToComplete.svelte [link]    +page.svelte +1/-1      +page.svelte +1/-1      +page.svelte +1/-1      +page.svelte +1/-1      +page.svelte +5/-5      +page.svelte +3/-3      agent-overview.svelte +2/-2      agent-routing.svelte +1/-1      agent-rule.svelte +1/-1      +page.svelte +2/-2      +page.svelte +6/-5      +page.svelte +4/-4      +page.svelte +2/-2      +page.svelte +6/-6      +page.svelte +3/-3      conv-dialogs.svelte +3/-3      +page.svelte +2/-2      RadialBarChart.svelte +1/-1      StackedColumnChart.svelte +1/-1      instruction-agent.svelte +1/-1      instruction-coding.svelte +1/-1      instruction-llm.svelte +1/-1      +page.svelte +6/-6      +page.svelte +4/-4      vector-index-modal.svelte +1/-1      advanced-search.svelte +1/-1      table-item.svelte +1/-1      vector-item-edit-modal.svelte +1/-1      vector-item.svelte +1/-1      +page.svelte +5/-5      +page.svelte +6/-6      knowledge-document-upload.svelte +4/-4      knowledge-upload-modal.svelte +4/-4      +page.svelte +6/-6      +page.svelte +3/-3      +page.svelte +3/-3      +page.svelte +3/-3      role-item.svelte +1/-1      +page.svelte +3/-3      +page.svelte +4/-4      +page.svelte +3/-3      +page.svelte +4/-4      user-item.svelte +1/-1

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
🔴	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Missing error handling: The clipboard write operation for copying message/code text does not handle failures (no .catch/fallback), which can silently fail in unsupported browsers or restricted contexts. Referred Code let text = message?.rich_content?.message?.text || message?.text || ''; if (message?.rich_content?.message?.rich_type === RichType.ProgramCode) { text = message?.rich_content?.message?.code_script || text; } navigator.clipboard.writeText(text).then(() => { setTimeout(() => { copyClicked = false; }, 800); }); Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: No audit events: The new code-viewing interaction (opening the code script modal) does not emit any auditable event, which may be required depending on whether viewing message content is considered a critical action in your audit policy. Referred Code /** * @param {any} e * @param {any} message */ function openCodeScriptModal(e, message) { e.preventDefault(); codeScript = message?.rich_content?.message?.code_script || ''; codeLanguage = message?.rich_content?.message?.language || 'python'; isOpenCodeScriptModal = true; } function toggleCodeScriptModal() { isOpenCodeScriptModal = !isOpenCodeScriptModal; if (!isOpenCodeScriptModal) { codeScript = ''; codeLanguage = ''; } } Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Untrusted content display: The new modal displays message?.rich_content?.message?.code_script directly in CodeScript, so a review is needed to confirm that handling untrusted/user-generated text in the editor cannot lead to XSS/DOM injection via the CodeMirror wrapper configuration. Referred Code codeScript = message?.rich_content?.message?.code_script || ''; codeLanguage = message?.rich_content?.message?.language || 'python'; isOpenCodeScriptModal = true; } function toggleCodeScriptModal() { isOpenCodeScriptModal = !isOpenCodeScriptModal; if (!isOpenCodeScriptModal) { codeScript = ''; codeLanguage = ''; } } function toggleNotificationModal() { isDisplayNotification = !isDisplayNotification; if (!isDisplayNotification) { notificationText = ''; } } ... (clipped 278 lines) Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Make CodeScript component fully reactive The CodeScript component's extensions are set in onMount, making it non-reactive to language prop changes. Refactor this logic into a reactive declaration ($:) to ensure the editor updates dynamically. Examples: src/lib/common/shared/CodeScript.svelte [36-63] onMount(() => { if (language === 'python') { extensions = [ python(), indentService.of((context, pos) => { const prevLine = pos > 0 ? context.state.doc.lineAt(pos - 1) : null; if (prevLine) { const prevText = prevLine.text; const match = prevText.match(/^(\s*)/); const baseIndent = match ? match[1].length : 0; ... (clipped 18 lines) src/routes/page/agent/code-scripts/script-editor.svelte [141-147] Solution Walkthrough: Before: <script> export let language = 'python'; let extensions = []; onMount(() => { if (language === 'python') { extensions = [ python(), ...baseExtensions ]; } else if (language === 'javascript') { extensions = [ javascript(), ...baseExtensions ]; } }); </script> After: <script> export let language = 'python'; let extensions = []; $: { if (language === 'python') { extensions = [ python(), ...baseExtensions ]; } else if (language === 'javascript') { extensions = [ javascript(), ...baseExtensions ]; } } </script> Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that the CodeScript component is not reactive to language prop changes due to using onMount instead of a reactive statement, which is a significant design flaw in a new component.	Medium
General	Use ModalHeader slot Replace the header prop on the Modal component with the component for correct title rendering and close button functionality. src/lib/common/modals/PlainModal.svelte [23-36] <Modal class={containerClasses} style={containerStyles} fade size={size} isOpen={isOpen} - header={title} toggle={() => toggleModal()} unmountOnClose > + <ModalHeader toggle={toggleModal}>{title}</ModalHeader> <ModalBody> <slot /> </ModalBody> </Modal> Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly points out that the header prop is not the standard way to add a header in @sveltestrap/sveltestrap's Modal component, and using <ModalHeader> is the proper implementation.	Medium
	Initialize selectedLang default Initialize the selectedLang variable by reading from localStorage or setting a default value. This ensures the dropdown displays the current language upon loading. src/lib/common/dropdowns/LanguageDropdown.svelte [12-13] /** @type {string} */ -let selectedLang; +let selectedLang = localStorage.getItem("I18N_LANGUAGE") || 'en'; +onMount(() => { + // ensure i18n is set consistently + setupI18n({ withLocale: selectedLang }); +}); + Apply / Chat Suggestion importance[1-10]: 7 __ Why: This is a valid suggestion that improves user experience by ensuring the language dropdown correctly reflects the currently selected language on component initialization.	Medium
Possible issue	Ensure base extensions are always applied Initialize the extensions array with baseExtensions to ensure the CodeMirror editor always has a baseline set of features, even for unsupported languages. src/lib/common/shared/CodeScript.svelte [33-63] /** @type {import("@codemirror/state").Extension[]} */ -let extensions = []; +let extensions = [...baseExtensions]; onMount(() => { if (language === 'python') { - extensions = [ + extensions.push( python(), indentService.of((context, pos) => { const prevLine = pos > 0 ? context.state.doc.lineAt(pos - 1) : null; if (prevLine) { const prevText = prevLine.text; const match = prevText.match(/^(\s*)/); const baseIndent = match ? match[1].length : 0; // Check if previous line ends with : (control structure) if (prevText.trimEnd().endsWith(':')) { return baseIndent + 4; } return baseIndent; } return 0; - }), - ...baseExtensions - ]; + }) + ); } else if (language === 'javascript') { - extensions = [ - javascript(), - ...baseExtensions - ]; + extensions.push(javascript()); } }); Apply / Chat Suggestion importance[1-10]: 6 __ Why: This is a good suggestion for improving the robustness of the CodeScript component by ensuring that baseExtensions are always applied, preventing potential issues with unhandled language props.	Low
More