The react-markdown dependency chain uses Node.js subpath imports
(vfile/lib/#minpath) that Sandpack's bundler cannot resolve, breaking
markdown artifact preview. Switch to a self-contained static HTML page
using marked.js from CDN, eliminating the React bootstrap overhead and
the problematic dependency resolution.
* 🛡️ fix: Sanitize markdown artifact rendering to prevent stored XSS
Replace marked-react with react-markdown + remark-gfm for artifact
markdown preview. react-markdown's skipHtml strips raw HTML tags,
and a urlTransform guard blocks javascript: and data: protocol links.
* fix: Update useArtifactProps test to expect react-markdown dependencies
* fix: Harden markdown artifact sanitization
- Convert isSafeUrl from denylist to allowlist (http, https, mailto, tel
plus relative/anchor URLs); unknown protocols are now fail-closed
- Add remark-breaks to restore single-newline-to-<br> behavior that was
silently dropped when replacing marked-react
- Export isSafeUrl from the host module and add 16 direct unit tests
covering allowed protocols, blocked schemes (javascript, data, blob,
vbscript, file, custom), edge cases (empty, whitespace, mixed case)
- Hoist remarkPlugins to a module-level constant to avoid per-render
array allocation in the generated Sandpack component
- Fix import order in generated template (shortest to longest per
AGENTS.md) and remove pre-existing trailing whitespace
* fix: Return null for blocked URLs, add sync-guard comments and test
- urlTransform returns null (not '') for blocked URLs so react-markdown
omits the href/src attribute entirely instead of producing <a href="">
- Hoist urlTransform to module-level constant alongside remarkPlugins
- Add JSDoc sync-guard comments tying the exported isSafeUrl to its
template-string mirror, so future maintainers know to update both
- Add synchronization test asserting the embedded isSafeUrl contains the
same allowlist set, URL parsing, and relative-path checks as the export
* refactor: Code Editor and Auto Scroll Functionality
- Added a useEffect hook in CodeEditor to sync streaming content with Sandpack without remounting the provider, improving performance and user experience.
- Updated useAutoScroll to accept an optional editorRef, allowing for dynamic scroll container selection based on the editor's state.
- Refactored ArtifactTabs to utilize the new editorRef in the useAutoScroll hook, ensuring consistent scrolling behavior during content updates.
- Introduced stableFiles and mergedFiles logic in CodeEditor to optimize file handling and prevent unnecessary updates during streaming content changes.
* refactor: Update CodeEditor to Sync Streaming Content Based on Read-Only State
- Modified the useEffect hook in CodeEditor to conditionally sync streaming content with Sandpack only when in read-only mode, preventing unnecessary updates during user edits.
- Enhanced the dependency array of the useEffect hook to include the readOnly state, ensuring accurate synchronization behavior.
* refactor: Monaco Editor for Artifact Code Editing
* refactor: Clean up ArtifactCodeEditor and ArtifactTabs components
- Removed unused scrollbar styles from mobile.css to streamline the code.
- Refactored ArtifactCodeEditor to improve content synchronization and read-only state handling.
- Enhanced ArtifactTabs by removing unnecessary context usage and optimizing component structure for better readability.
* feat: Add support for new artifact type 'application/vnd.ant.react'
- Introduced handling for 'application/vnd.ant.react' in artifactFilename, artifactTemplate, and dependenciesMap.
- Updated relevant mappings to ensure proper integration of the new artifact type within the application.
* refactor:ArtifactCodeEditor with Monaco Editor Configuration
- Added support for disabling validation in the Monaco Editor to improve the artifact viewer/editor experience.
- Introduced a new type definition for Monaco to enhance type safety.
- Updated the handling of the 'application/vnd.ant.react' artifact type to ensure proper integration with the editor.
* refactor: Clean up ArtifactCodeEditor and mobile.css
- Removed unnecessary whitespace in mobile.css for cleaner code.
- Refactored ArtifactCodeEditor to streamline language mapping and type handling, enhancing readability and maintainability.
- Consolidated language and type mappings into dedicated constants for improved clarity and efficiency.
* feat: Integrate Monaco Editor for Enhanced Code Editing Experience
- Added the Monaco Editor as a dependency to improve the code editing capabilities within the ArtifactCodeEditor component.
- Refactored the handling of TypeScript and JavaScript defaults in the Monaco Editor configuration for better type safety and clarity.
- Streamlined the setup for disabling validation, enhancing the artifact viewer/editor experience.
* fix: Update ArtifactCodeEditor to handle null content checks
- Modified conditional checks in ArtifactCodeEditor to use `art.content != null` instead of `art.content` for improved null safety.
- Ensured consistent handling of artifact content across various useEffect hooks to prevent potential errors when content is null.
* fix: Refine content comparison logic in ArtifactCodeEditor
- Updated the condition for checking if the code is not original by removing the redundant null check for `art.content`, ensuring more concise and clear logic.
- This change enhances the readability of the code and maintains the integrity of content comparison within the editor.
* fix: Simplify code comparison logic in ArtifactCodeEditor
- Removed redundant null check for the `code` variable, ensuring a more straightforward comparison with the current update reference.
- This change improves code clarity and maintains the integrity of the content comparison logic within the editor.
* Add Markdown rendering support for artifacts
* Add tests
* Remove custom code for mermaid
* Remove unnecessary dark mode hook
* refactor: optimize mermaid dependencies
- Added support for additional MIME types in artifact templates.
- Updated mermaidDependencies to include new packages: class-variance-authority, clsx, tailwind-merge, and @radix-ui/react-slot.
- Refactored zoom and refresh icons in MermaidDiagram component for improved clarity and maintainability.
* fix: add Markdown support for artifacts rendering
* feat: support 'text/md' as an additional MIME type for Markdown artifacts
* refactor: simplify markdownDependencies structure in artifacts utility
---------
Co-authored-by: Danny Avila <danny@librechat.ai>
* 🔧 fix: Update type annotations in useEventHandlers for better type safety
* 🔧 refactor: `useToolToggle` for improved localStorage synchronization and allow string/falsy values for setting to storage
* ✨ feat: Implement Artifacts badge to BadgeRow with toggle options and UI components
- Added Artifacts component to manage artifacts state and options.
- Introduced ArtifactsSubMenu for additional settings related to artifacts.
- Integrated artifacts functionality into BadgeRow and ToolsDropdown components.
- Updated localStorage handling for artifacts state persistence.
- Enhanced localization for artifacts-related strings in translation files.
- Refactored Agent model to include artifacts in the ephemeral agent response.
* fix: set ephemeral agent state for conversation on finalization
* chore: remove beta settings dialog tab
* refactor: improve Ephemeral Agent statefulness
* fix: update setValue parameter to use 'value' instead of 'isChecked' in CheckboxButton
* refactor: update color classes for Artifact toggle and order of dropdown components
* chore: remove unused i18n localization
* fix: Reset artifacts on unmount and remove useIdChangeEffect hook
* feat: Replace SVG icons with Lucide icons for improved consistency
* fix: Refactor artifact reset logic on unmount and conversation change
* refactor: Rename artifactsVisible to artifactsVisibility for consistency
* feat: Replace custom SVG icons with Lucide icons for improved consistency
* feat: Add visibleArtifacts atom for managing visibility state
* feat: Implement debounced visibility state management for artifacts
* refactor: Add useIdChangeEffect hook to reset visible artifacts on conversation ID change
* refactor: Remove unnecessary dependency from useMemo in TextPart component
* refactor: Enhance artifact visibility management by incorporating location checks for search path
* refactor: Improve transition effects for artifact visibility in Artifacts component
* chore: Remove preprocessCodeArtifacts function and related tests
* fix: Update regex for detecting enclosed artifacts in latest message
* refactor: Update artifact visibility checks to be more generic (not just search)
* chore: Enhance artifact visibility logging
* refactor: Extract closeArtifacts function to improve button click handling
* refactor: remove nested logic from use artifacts effect
* refactor: Update regex for detecting enclosed artifacts to handle new line variations
* chore: started with updating packages to new version.
(a lot are outdated)
* fix: eslint to pass when no matching files changed.
* fix: eslint to pass when no matching files changed.
* fix: issue with strict in actions with the test
* chore: update more dependencies
* feat: scan for unused imported packages
* feat: scan for unused imported packages
* feat: scan for unused imported packages
* feat: scan for unused imported packages
* feat: scan for unused imported packages
* feat: scan for unused imported packages
* feat: scan for unused imported packages
* chore: removed Unused NPM Packages
* chore: removed Unused NPM Packages in `client/package.json`
* chore: removed Unused NPM Packages in `client/package.json`
* chore: Only comments when there are actual unused dependencies.
* chore: Only comments when there are actual unused dependencies.
* ci: test if it detects unused packages.
* ci: removed unused packages.
* ci: both static and dynamic i18n keys
* ci: revert back to no dynamic. use official nesting
* chore: remove override package: ajv
* fix: rendering error for mermaid flowchart syntax
* feat: add submit button ref and enable submit on Ctrl+Enter in EditMessage component
* feat: add save button and keyboard shortcuts for saving and canceling in EditMessage component
* feat: collapse chat on max height
* refactor: implement scrollable detection for textarea on key down events and initial render
* feat: add regenerate button for error handling in HoverButtons, closes#3658
* feat: add functionality to edit latest user message with the up arrow key when the input is empty
* feat: Add CodeArtifacts component to Beta settings tab
* chore: Update npm dependency to @codesandbox/sandpack-react@2.18.2
* WIP: artifacts first pass
* WIP first pass remark-directive
* chore: revert markdown to original component + new artifacts rendering
* refactor: first pass rewrite
* refactor: add throttling
* first pass styling
* style: Add Radix Tabs, more styling changes
* feat: second pass
* style: code styling
* fix: package markdown fixes
* feat: Add useEffect hook to Artifacts component for visibility control, slide in animation
* fix: only set artifact if there is content
* refactor: typing and make latest artifact active if the number of artifacts changed
* feat: artifacts + shadcnui
* feat: Add Copy Code button to Artifacts component
* feat: first pass streaming updates
* refactor: optimize ordering of artifacts in Artifacts component
* refactor: optimize ordering of artifacts and add latest artifact activation in Artifacts component
* refactor: add order prop to Artifact
* feat: update to latest, use update time for ordering
* refactor: optimize ordering of artifacts and activate latest artifact in Artifacts component
* wip: remove thinking text and artifact formatting if empty
* refactor: optimize Markdown rendering and add support for code artifacts
* feat: global state for current artifact Id and set on artifact preview click
* refactor: Rename CodePreview component to ArtifactButton
* refactor: apply growth to artifact frame so artifact preview can take full space
* refactor: remove artifactIdsState
* refactor: nullify artifact state and reset on empty conversation
* feat: reset artifact state on conversation change
* feat: artifacts system prompt in backend
* refactor: update UI artifact toggle label to match localization key
* style: remove ArtifactButton inline-block styling
* feat: memoize ArtifactPreview, add html support
* refactor: abstract out components
* chore: bump react-resizable-panel
* refactor: resizable panel order props
* fix: side panel resizing crashes
* style: temporarily remove scrolling, add better styling
* chore: remove thinking for now
* chore: preprocess artifacts for now
* feat: Add auto scrolling to CodeMarkdown (artifacts)
* feat: autoswitch to preview
* feat: auto switch to code, adjust prompt, remove unused code
* feat: refresh button
* feat: open/close artifacts
* wip: mermaid
* refactor: w-fit Artifact button
* chore: organize code
* feat: first pass mermaid
* refactor: improve panning logic in MermaidDiagram component
* feat: center/zoom on first render
* refactor: add centering with reset button
* style: mermaid styling
* refactor: add back MermaidDiagram
* fix: static/html template
* fix: mermaid
* add examples to artifacts prompt
* refactor: fix CodeBar plugin prop logic
* refactor: remove unnecessary mention of artifacts when not requested
* fix: remove preprocessCodeArtifacts function and fix imports
* feat: improve artifacts guidelines and remove unnecessary mentions
* refactor: improve artifacts guidelines and remove unnecessary mentions
* chore: uninstall unused packages
* chore: bump vite
* chore: update three dependency to version 0.167.1
* refactor: move beta settings, add additional artifacts toggles
* feat: artifacts mode toggles
* refactor: adjust prompt
* feat: shadcnui instructions
* feat: code artifacts custom prompt mode
* chore: Update artifacts UI labels and instructions localizations
* refactor: Remove unused code in Markdown component
