🪄 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/Artifacts/ArtifactPreview.tsx

@@ -0,0 +1,79 @@
+import React, { useMemo, memo } from 'react';
+import { Sandpack } from '@codesandbox/sandpack-react';
+import { removeNullishValues } from 'librechat-data-provider';
+import { SandpackPreview, SandpackProvider } from '@codesandbox/sandpack-react/unstyled';
+import type { SandpackPreviewRef } from '@codesandbox/sandpack-react/unstyled';
+import type { Artifact } from '~/common';
+import {
+  getKey,
+  getProps,
+  sharedFiles,
+  getTemplate,
+  sharedOptions,
+  getArtifactFilename,
+} from '~/utils/artifacts';
+import { getMermaidFiles } from '~/utils/mermaid';
+
+export const ArtifactPreview = memo(function ({
+  showEditor = false,
+  artifact,
+  previewRef,
+}: {
+  showEditor?: boolean;
+  artifact: Artifact;
+  previewRef: React.MutableRefObject<SandpackPreviewRef>;
+}) {
+  const files = useMemo(() => {
+    if (getKey(artifact.type ?? '', artifact.language).includes('mermaid')) {
+      return getMermaidFiles(artifact.content ?? '');
+    }
+    return removeNullishValues({
+      [getArtifactFilename(artifact.type ?? '', artifact.language)]: artifact.content,
+    });
+  }, [artifact.type, artifact.content, artifact.language]);
+
+  const template = useMemo(
+    () => getTemplate(artifact.type ?? '', artifact.language),
+    [artifact.type, artifact.language],
+  );
+
+  const sharedProps = useMemo(() => getProps(artifact.type ?? ''), [artifact.type]);
+
+  if (Object.keys(files).length === 0) {
+    return null;
+  }
+
+  return showEditor ? (
+    <Sandpack
+      options={{
+        showNavigator: true,
+        editorHeight: '80vh',
+        showTabs: true,
+        ...sharedOptions,
+      }}
+      files={{
+        ...files,
+        ...sharedFiles,
+      }}
+      {...sharedProps}
+      template={template}
+    />
+  ) : (
+    <SandpackProvider
+      files={{
+        ...files,
+        ...sharedFiles,
+      }}
+      options={{ ...sharedOptions }}
+      {...sharedProps}
+      template={template}
+    >
+      <SandpackPreview
+        showOpenInCodeSandbox={false}
+        showRefreshButton={false}
+        tabIndex={0}
+        ref={previewRef}
+      />
+    </SandpackProvider>
+  );
+});