🪄 feat: Code Artifacts (#3798)

* 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

client/src/components/Nav/SettingsTabs/Beta/Beta.tsx

@@ -1,8 +1,7 @@
 import { memo } from 'react';
 import * as Tabs from '@radix-ui/react-tabs';
 import { SettingsTabValues } from 'librechat-data-provider';
-import LaTeXParsing from './LaTeXParsing';
-import ModularChat from './ModularChat';
+import CodeArtifacts from './CodeArtifacts';
 
 function Beta() {
   return (
@@ -13,10 +12,7 @@ function Beta() {
     >
       <div className="flex flex-col gap-3 text-sm text-text-primary">
         <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
-          <ModularChat />
-        </div>
-        <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
-          <LaTeXParsing />
+          <CodeArtifacts />
         </div>
       </div>
     </Tabs.Content>

client/src/components/Nav/SettingsTabs/Beta/CodeArtifacts.tsx

@@ -0,0 +1,95 @@
+import { useRecoilState } from 'recoil';
+import HoverCardSettings from '../HoverCardSettings';
+import { Switch } from '~/components/ui';
+import { useLocalize } from '~/hooks';
+import store from '~/store';
+
+export default function CodeArtifacts() {
+  const [codeArtifacts, setCodeArtifacts] = useRecoilState<boolean>(store.codeArtifacts);
+  const [includeShadcnui, setIncludeShadcnui] = useRecoilState<boolean>(store.includeShadcnui);
+  const [customPromptMode, setCustomPromptMode] = useRecoilState<boolean>(store.customPromptMode);
+  const localize = useLocalize();
+
+  const handleCodeArtifactsChange = (value: boolean) => {
+    setCodeArtifacts(value);
+    if (!value) {
+      setIncludeShadcnui(false);
+      setCustomPromptMode(false);
+    }
+  };
+
+  const handleIncludeShadcnuiChange = (value: boolean) => {
+    setIncludeShadcnui(value);
+  };
+
+  const handleCustomPromptModeChange = (value: boolean) => {
+    setCustomPromptMode(value);
+    if (value) {
+      setIncludeShadcnui(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-lg font-medium">{localize('com_ui_artifacts')}</h3>
+      <div className="space-y-2">
+        <SwitchItem
+          id="codeArtifacts"
+          label={localize('com_ui_artifacts_toggle')}
+          checked={codeArtifacts}
+          onCheckedChange={handleCodeArtifactsChange}
+          hoverCardText="com_nav_info_code_artifacts"
+        />
+        <SwitchItem
+          id="includeShadcnui"
+          label={localize('com_ui_include_shadcnui')}
+          checked={includeShadcnui}
+          onCheckedChange={handleIncludeShadcnuiChange}
+          hoverCardText="com_nav_info_include_shadcnui"
+          disabled={!codeArtifacts || customPromptMode}
+        />
+        <SwitchItem
+          id="customPromptMode"
+          label={localize('com_ui_custom_prompt_mode')}
+          checked={customPromptMode}
+          onCheckedChange={handleCustomPromptModeChange}
+          hoverCardText="com_nav_info_custom_prompt_mode"
+          disabled={!codeArtifacts}
+        />
+      </div>
+    </div>
+  );
+}
+
+function SwitchItem({
+  id,
+  label,
+  checked,
+  onCheckedChange,
+  hoverCardText,
+  disabled = false,
+}: {
+  id: string;
+  label: string;
+  checked: boolean;
+  onCheckedChange: (value: boolean) => void;
+  hoverCardText: string;
+  disabled?: boolean;
+}) {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center space-x-2">
+        <div className={disabled ? 'text-gray-400' : ''}>{label}</div>
+        <HoverCardSettings side="bottom" text={hoverCardText} />
+      </div>
+      <Switch
+        id={id}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        className="ml-4 mt-2"
+        data-testid={id}
+        disabled={disabled}
+      />
+    </div>
+  );
+}

client/src/components/Nav/SettingsTabs/Chat/Chat.tsx

@@ -6,6 +6,8 @@ import SendMessageKeyEnter from './EnterToSend';
 import ShowCodeSwitch from './ShowCodeSwitch';
 import { ForkSettings } from './ForkSettings';
 import ChatDirection from './ChatDirection';
+import LaTeXParsing from './LaTeXParsing';
+import ModularChat from './ModularChat';
 import SaveDraft from './SaveDraft';
 
 function Chat() {
@@ -28,6 +30,12 @@ function Chat() {
           <SaveDraft />
         </div>
         <ForkSettings />
+        <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+          <ModularChat />
+        </div>
+        <div className="border-b border-border-medium pb-3 last-of-type:border-b-0">
+          <LaTeXParsing />
+        </div>
       </div>
     </Tabs.Content>
   );