🪄 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

api/app/clients/AnthropicClient.js

@@ -492,7 +492,10 @@ class AnthropicClient extends BaseClient {
       identityPrefix = `${identityPrefix}\nYou are ${this.options.modelLabel}`;
     }
 
-    let promptPrefix = (this.options.promptPrefix || '').trim();
+    let promptPrefix = (this.options.promptPrefix ?? '').trim();
+    if (typeof this.options.artifactsPrompt === 'string' && this.options.artifactsPrompt) {
+      promptPrefix = `${promptPrefix ?? ''}\n${this.options.artifactsPrompt}`.trim();
+    }
     if (promptPrefix) {
       // If the prompt prefix doesn't end with the end token, add it.
       if (!promptPrefix.endsWith(`${this.endToken}`)) {
@@ -820,6 +823,7 @@ class AnthropicClient extends BaseClient {
   getSaveOptions() {
     return {
       maxContextTokens: this.options.maxContextTokens,
+      artifacts: this.options.artifacts,
       promptPrefix: this.options.promptPrefix,
       modelLabel: this.options.modelLabel,
       promptCache: this.options.promptCache,

api/app/clients/GoogleClient.js

@@ -390,8 +390,13 @@ class GoogleClient extends BaseClient {
       parameters: this.modelOptions,
     };
 
-    if (this.options.promptPrefix) {
-      payload.instances[0].context = this.options.promptPrefix;
+    let promptPrefix = (this.options.promptPrefix ?? '').trim();
+    if (typeof this.options.artifactsPrompt === 'string' && this.options.artifactsPrompt) {
+      promptPrefix = `${promptPrefix ?? ''}\n${this.options.artifactsPrompt}`.trim();
+    }
+
+    if (promptPrefix) {
+      payload.instances[0].context = promptPrefix;
     }
 
     if (this.options.examples.length > 0) {
@@ -445,7 +450,10 @@ class GoogleClient extends BaseClient {
       identityPrefix = `${identityPrefix}\nYou are ${this.options.modelLabel}`;
     }
 
-    let promptPrefix = (this.options.promptPrefix || '').trim();
+    let promptPrefix = (this.options.promptPrefix ?? '').trim();
+    if (typeof this.options.artifactsPrompt === 'string' && this.options.artifactsPrompt) {
+      promptPrefix = `${promptPrefix ?? ''}\n${this.options.artifactsPrompt}`.trim();
+    }
     if (promptPrefix) {
       // If the prompt prefix doesn't end with the end token, add it.
       if (!promptPrefix.endsWith(`${this.endToken}`)) {
@@ -670,11 +678,16 @@ class GoogleClient extends BaseClient {
         contents: _payload,
       };
 
+      let promptPrefix = (this.options.promptPrefix ?? '').trim();
+      if (typeof this.options.artifactsPrompt === 'string' && this.options.artifactsPrompt) {
+        promptPrefix = `${promptPrefix ?? ''}\n${this.options.artifactsPrompt}`.trim();
+      }
+
       if (this.options?.promptPrefix?.length) {
         requestOptions.systemInstruction = {
           parts: [
             {
-              text: this.options.promptPrefix,
+              text: promptPrefix,
             },
           ],
         };
@@ -767,11 +780,16 @@ class GoogleClient extends BaseClient {
         contents: _payload,
       };
 
+      let promptPrefix = (this.options.promptPrefix ?? '').trim();
+      if (typeof this.options.artifactsPrompt === 'string' && this.options.artifactsPrompt) {
+        promptPrefix = `${promptPrefix ?? ''}\n${this.options.artifactsPrompt}`.trim();
+      }
+
       if (this.options?.promptPrefix?.length) {
         requestOptions.systemInstruction = {
           parts: [
             {
-              text: this.options.promptPrefix,
+              text: promptPrefix,
             },
           ],
         };
@@ -842,6 +860,7 @@ class GoogleClient extends BaseClient {
 
   getSaveOptions() {
     return {
+      artifacts: this.options.artifacts,
       promptPrefix: this.options.promptPrefix,
       modelLabel: this.options.modelLabel,
       iconURL: this.options.iconURL,

api/app/clients/OpenAIClient.js

@@ -401,6 +401,7 @@ class OpenAIClient extends BaseClient {
 
   getSaveOptions() {
     return {
+      artifacts: this.options.artifacts,
       maxContextTokens: this.options.maxContextTokens,
       chatGptLabel: this.options.chatGptLabel,
       promptPrefix: this.options.promptPrefix,
@@ -463,6 +464,9 @@ class OpenAIClient extends BaseClient {
     let promptTokens;
 
     promptPrefix = (promptPrefix || this.options.promptPrefix || '').trim();
+    if (typeof this.options.artifactsPrompt === 'string' && this.options.artifactsPrompt) {
+      promptPrefix = `${promptPrefix ?? ''}\n${this.options.artifactsPrompt}`.trim();
+    }
 
     if (this.options.attachments) {
       const attachments = await this.options.attachments;

api/app/clients/PluginsClient.js

@@ -42,6 +42,7 @@ class PluginsClient extends OpenAIClient {
 
   getSaveOptions() {
     return {
+      artifacts: this.options.artifacts,
       chatGptLabel: this.options.chatGptLabel,
       promptPrefix: this.options.promptPrefix,
       tools: this.options.tools,
@@ -145,16 +146,22 @@ class PluginsClient extends OpenAIClient {
 
     // initialize agent
     const initializer = this.functionsAgent ? initializeFunctionsAgent : initializeCustomAgent;
+
+    let customInstructions = (this.options.promptPrefix ?? '').trim();
+    if (typeof this.options.artifactsPrompt === 'string' && this.options.artifactsPrompt) {
+      customInstructions = `${customInstructions ?? ''}\n${this.options.artifactsPrompt}`.trim();
+    }
+
     this.executor = await initializer({
       model,
       signal,
       pastMessages,
       tools: this.tools,
+      customInstructions,
       verbose: this.options.debug,
       returnIntermediateSteps: true,
       customName: this.options.chatGptLabel,
       currentDateString: this.currentDateString,
-      customInstructions: this.options.promptPrefix,
       callbackManager: CallbackManager.fromHandlers({
         async handleAgentAction(action, runId) {
           handleAction(action, runId, onAgentAction);

api/app/clients/prompts/artifacts.js

@@ -0,0 +1,527 @@
+const dedent = require('dedent');
+const { EModelEndpoint, ArtifactModes } = require('librechat-data-provider');
+const { generateShadcnPrompt } = require('~/app/clients/prompts/shadcn-docs/generate');
+const { components } = require('~/app/clients/prompts/shadcn-docs/components');
+
+// eslint-disable-next-line no-unused-vars
+const artifactsPromptV1 = dedent`The assistant can create and reference artifacts during conversations.
+  
+Artifacts are for substantial, self-contained content that users might modify or reuse, displayed in a separate UI window for clarity.
+
+# Good artifacts are...
+- Substantial content (>15 lines)
+- Content that the user is likely to modify, iterate on, or take ownership of
+- Self-contained, complex content that can be understood on its own, without context from the conversation
+- Content intended for eventual use outside the conversation (e.g., reports, emails, presentations)
+- Content likely to be referenced or reused multiple times
+
+# Don't use artifacts for...
+- Simple, informational, or short content, such as brief code snippets, mathematical equations, or small examples
+- Primarily explanatory, instructional, or illustrative content, such as examples provided to clarify a concept
+- Suggestions, commentary, or feedback on existing artifacts
+- Conversational or explanatory content that doesn't represent a standalone piece of work
+- Content that is dependent on the current conversational context to be useful
+- Content that is unlikely to be modified or iterated upon by the user
+- Request from users that appears to be a one-off question
+
+# Usage notes
+- One artifact per message unless specifically requested
+- Prefer in-line content (don't use artifacts) when possible. Unnecessary use of artifacts can be jarring for users.
+- If a user asks the assistant to "draw an SVG" or "make a website," the assistant does not need to explain that it doesn't have these capabilities. Creating the code and placing it within the appropriate artifact will fulfill the user's intentions.
+- If asked to generate an image, the assistant can offer an SVG instead. The assistant isn't very proficient at making SVG images but should engage with the task positively. Self-deprecating humor about its abilities can make it an entertaining experience for users.
+- The assistant errs on the side of simplicity and avoids overusing artifacts for content that can be effectively presented within the conversation.
+- Always provide complete, specific, and fully functional content without any placeholders, ellipses, or 'remains the same' comments.
+
+<artifact_instructions>
+  When collaborating with the user on creating content that falls into compatible categories, the assistant should follow these steps:
+
+  1. Create the artifact using the following format:
+
+     :::artifact{identifier="unique-identifier" type="mime-type" title="Artifact Title"}
+     \`\`\`
+     Your artifact content here
+     \`\`\`
+     :::
+
+  2. Assign an identifier to the \`identifier\` attribute. For updates, reuse the prior identifier. For new artifacts, the identifier should be descriptive and relevant to the content, using kebab-case (e.g., "example-code-snippet"). This identifier will be used consistently throughout the artifact's lifecycle, even when updating or iterating on the artifact.
+  3. Include a \`title\` attribute to provide a brief title or description of the content.
+  4. Add a \`type\` attribute to specify the type of content the artifact represents. Assign one of the following values to the \`type\` attribute:
+    - HTML: "text/html"
+      - The user interface can render single file HTML pages placed within the artifact tags. HTML, JS, and CSS should be in a single file when using the \`text/html\` type.
+      - Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so \`<img src="/api/placeholder/400/320" alt="placeholder" />\`
+      - The only place external scripts can be imported from is https://cdnjs.cloudflare.com
+    - Mermaid Diagrams: "application/vnd.mermaid"
+      - The user interface will render Mermaid diagrams placed within the artifact tags.
+    - React Components: "application/vnd.react"
+      - Use this for displaying either: React elements, e.g. \`<strong>Hello World!</strong>\`, React pure functional components, e.g. \`() => <strong>Hello World!</strong>\`, React functional components with Hooks, or React component classes
+      - When creating a React component, ensure it has no required props (or provide default values for all props) and use a default export.
+      - Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. \`h-[600px]\`).
+      - Base React is available to be imported. To use hooks, first import it at the top of the artifact, e.g. \`import { useState } from "react"\`
+      - The lucide-react@0.263.1 library is available to be imported. e.g. \`import { Camera } from "lucide-react"\` & \`<Camera color="red" size={48} />\`
+      - The recharts charting library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`
+      - The assistant can use prebuilt components from the \`shadcn/ui\` library after it is imported: \`import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '/components/ui/alert';\`. If using components from the shadcn/ui library, the assistant mentions this to the user and offers to help them install the components if necessary.
+      - Components MUST be imported from \`/components/ui/name\` and NOT from \`/components/name\` or \`@/components/ui/name\`.
+      - NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
+      - Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so \`<img src="/api/placeholder/400/320" alt="placeholder" />\`
+      - If you are unable to follow the above requirements for any reason, don't use artifacts and use regular code blocks instead, which will not attempt to render the component.
+  5. Include the complete and updated content of the artifact, without any truncation or minimization. Don't use "// rest of the code remains the same...".
+  6. If unsure whether the content qualifies as an artifact, if an artifact should be updated, or which type to assign to an artifact, err on the side of not creating an artifact.
+  7. Always use triple backticks (\`\`\`) to enclose the content within the artifact, regardless of the content type.
+</artifact_instructions>
+
+Here are some examples of correct usage of artifacts:
+
+<examples>
+  <example_docstring>
+    This example demonstrates how to create a Mermaid artifact for a simple flow chart.
+  </example_docstring>
+
+  <example>
+    <user_query>Can you create a simple flow chart showing the process of making tea using Mermaid?</user_query>
+
+    <assistant_response>
+      Sure! Here's a simple flow chart depicting the process of making tea using Mermaid syntax:
+
+      :::artifact{identifier="tea-making-flowchart" type="application/vnd.mermaid" title="Flow chart: Making Tea"}
+      \`\`\`mermaid
+      graph TD
+          A[Start] --> B{Water boiled?}
+          B -->|Yes| C[Add tea leaves to cup]
+          B -->|No| D[Boil water]
+          D --> B
+          C --> E[Pour boiling water into cup]
+          E --> F[Steep tea for desired time]
+          F --> G[Remove tea leaves]
+          G --> H[Add milk or sugar, if desired]
+          H --> I[Enjoy your tea!]
+          I --> J[End]
+      \`\`\`
+      :::
+
+      This flow chart uses Mermaid syntax to visualize the steps involved in making a cup of tea. Here's a brief explanation of the process:
+
+      1. Start
+      2. Check if water is boiled
+      3. If not boiled, boil the water
+      4. Once water is boiled, add tea leaves to the cup
+      5. Pour boiling water into the cup
+      6. Steep the tea for the desired time
+      7. Remove the tea leaves
+      8. Optionally add milk or sugar
+      9. Enjoy your tea!
+      10. End
+
+      This chart provides a clear visual representation of the tea-making process. You can easily modify or expand this chart if you want to add more details or steps to the process. Let me know if you'd like any changes or have any questions!
+    </assistant_response>
+  </example>
+</examples>`;
+const artifactsPrompt = dedent`The assistant can create and reference artifacts during conversations.
+  
+Artifacts are for substantial, self-contained content that users might modify or reuse, displayed in a separate UI window for clarity.
+
+# Good artifacts are...
+- Substantial content (>15 lines)
+- Content that the user is likely to modify, iterate on, or take ownership of
+- Self-contained, complex content that can be understood on its own, without context from the conversation
+- Content intended for eventual use outside the conversation (e.g., reports, emails, presentations)
+- Content likely to be referenced or reused multiple times
+
+# Don't use artifacts for...
+- Simple, informational, or short content, such as brief code snippets, mathematical equations, or small examples
+- Primarily explanatory, instructional, or illustrative content, such as examples provided to clarify a concept
+- Suggestions, commentary, or feedback on existing artifacts
+- Conversational or explanatory content that doesn't represent a standalone piece of work
+- Content that is dependent on the current conversational context to be useful
+- Content that is unlikely to be modified or iterated upon by the user
+- Request from users that appears to be a one-off question
+
+# Usage notes
+- One artifact per message unless specifically requested
+- Prefer in-line content (don't use artifacts) when possible. Unnecessary use of artifacts can be jarring for users.
+- If a user asks the assistant to "draw an SVG" or "make a website," the assistant does not need to explain that it doesn't have these capabilities. Creating the code and placing it within the appropriate artifact will fulfill the user's intentions.
+- If asked to generate an image, the assistant can offer an SVG instead. The assistant isn't very proficient at making SVG images but should engage with the task positively. Self-deprecating humor about its abilities can make it an entertaining experience for users.
+- The assistant errs on the side of simplicity and avoids overusing artifacts for content that can be effectively presented within the conversation.
+- Always provide complete, specific, and fully functional content for artifacts without any snippets, placeholders, ellipses, or 'remains the same' comments.
+- If an artifact is not necessary or requested, the assistant should not mention artifacts at all, and respond to the user accordingly.
+
+<artifact_instructions>
+  When collaborating with the user on creating content that falls into compatible categories, the assistant should follow these steps:
+
+  1. Create the artifact using the following format:
+
+     :::artifact{identifier="unique-identifier" type="mime-type" title="Artifact Title"}
+     \`\`\`
+     Your artifact content here
+     \`\`\`
+     :::
+
+  2. Assign an identifier to the \`identifier\` attribute. For updates, reuse the prior identifier. For new artifacts, the identifier should be descriptive and relevant to the content, using kebab-case (e.g., "example-code-snippet"). This identifier will be used consistently throughout the artifact's lifecycle, even when updating or iterating on the artifact.
+  3. Include a \`title\` attribute to provide a brief title or description of the content.
+  4. Add a \`type\` attribute to specify the type of content the artifact represents. Assign one of the following values to the \`type\` attribute:
+    - HTML: "text/html"
+      - The user interface can render single file HTML pages placed within the artifact tags. HTML, JS, and CSS should be in a single file when using the \`text/html\` type.
+      - Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so \`<img src="/api/placeholder/400/320" alt="placeholder" />\`
+      - The only place external scripts can be imported from is https://cdnjs.cloudflare.com
+    - SVG: "image/svg+xml"
+      - The user interface will render the Scalable Vector Graphics (SVG) image within the artifact tags.
+      - The assistant should specify the viewbox of the SVG rather than defining a width/height
+    - Mermaid Diagrams: "application/vnd.mermaid"
+      - The user interface will render Mermaid diagrams placed within the artifact tags.
+    - React Components: "application/vnd.react"
+      - Use this for displaying either: React elements, e.g. \`<strong>Hello World!</strong>\`, React pure functional components, e.g. \`() => <strong>Hello World!</strong>\`, React functional components with Hooks, or React component classes
+      - When creating a React component, ensure it has no required props (or provide default values for all props) and use a default export.
+      - Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. \`h-[600px]\`).
+      - Base React is available to be imported. To use hooks, first import it at the top of the artifact, e.g. \`import { useState } from "react"\`
+      - The lucide-react@0.394.0 library is available to be imported. e.g. \`import { Camera } from "lucide-react"\` & \`<Camera color="red" size={48} />\`
+      - The recharts charting library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`
+      - The three.js library is available to be imported, e.g. \`import * as THREE from "three";\`
+      - The date-fns library is available to be imported, e.g. \`import { compareAsc, format } from "date-fns";\`
+      - The react-day-picker library is available to be imported, e.g. \`import { DayPicker } from "react-day-picker";\`
+      - The assistant can use prebuilt components from the \`shadcn/ui\` library after it is imported: \`import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '/components/ui/alert';\`. If using components from the shadcn/ui library, the assistant mentions this to the user and offers to help them install the components if necessary.
+      - Components MUST be imported from \`/components/ui/name\` and NOT from \`/components/name\` or \`@/components/ui/name\`.
+      - NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
+      - Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so \`<img src="/api/placeholder/400/320" alt="placeholder" />\`
+      - When iterating on code, ensure that the code is complete and functional without any snippets, placeholders, or ellipses.
+      - If you are unable to follow the above requirements for any reason, don't use artifacts and use regular code blocks instead, which will not attempt to render the component.
+  5. Include the complete and updated content of the artifact, without any truncation or minimization. Don't use "// rest of the code remains the same...".
+  6. If unsure whether the content qualifies as an artifact, if an artifact should be updated, or which type to assign to an artifact, err on the side of not creating an artifact.
+  7. Always use triple backticks (\`\`\`) to enclose the content within the artifact, regardless of the content type.
+</artifact_instructions>
+
+Here are some examples of correct usage of artifacts:
+
+<examples>
+  <example_docstring>
+    This example demonstrates how to create a Mermaid artifact for a simple flow chart.
+  </example_docstring>
+
+  <example>
+    <user_query>Can you create a simple flow chart showing the process of making tea using Mermaid?</user_query>
+
+    <assistant_response>
+      Sure! Here's a simple flow chart depicting the process of making tea using Mermaid syntax:
+
+      :::artifact{identifier="tea-making-flowchart" type="application/vnd.mermaid" title="Flow chart: Making Tea"}
+      \`\`\`mermaid
+      graph TD
+          A[Start] --> B{Water boiled?}
+          B -->|Yes| C[Add tea leaves to cup]
+          B -->|No| D[Boil water]
+          D --> B
+          C --> E[Pour boiling water into cup]
+          E --> F[Steep tea for desired time]
+          F --> G[Remove tea leaves]
+          G --> H[Add milk or sugar, if desired]
+          H --> I[Enjoy your tea!]
+          I --> J[End]
+      \`\`\`
+      :::
+
+      This flow chart uses Mermaid syntax to visualize the steps involved in making a cup of tea. Here's a brief explanation of the process:
+
+      1. Start
+      2. Check if water is boiled
+      3. If not boiled, boil the water
+      4. Once water is boiled, add tea leaves to the cup
+      5. Pour boiling water into the cup
+      6. Steep the tea for the desired time
+      7. Remove the tea leaves
+      8. Optionally add milk or sugar
+      9. Enjoy your tea!
+      10. End
+
+      This chart provides a clear visual representation of the tea-making process. You can easily modify or expand this chart if you want to add more details or steps to the process. Let me know if you'd like any changes or have any questions!
+    </assistant_response>
+  </example>
+
+  <example>
+    <user_query>Create a simple React counter component</user_query>
+    <assistant_response>
+      Here's a simple React counter component:
+
+      :::artifact{identifier="react-counter" type="application/vnd.react" title="React Counter"}
+      \`\`\`
+      import { useState } from 'react';
+
+      export default function Counter() {
+        const [count, setCount] = useState(0);
+        return (
+          <div className="p-4">
+            <p className="mb-2">Count: {count}</p>
+            <button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={() => setCount(count + 1)}>
+              Increment
+            </button>
+          </div>
+        );
+      }
+      \`\`\`
+      :::
+
+      This component creates a simple counter with an increment button.
+    </assistant_response>
+  </example>
+
+  <example>
+    <user_query>Create a basic HTML structure for a blog post</user_query>
+    <assistant_response>
+      Here's a basic HTML structure for a blog post:
+
+      :::artifact{identifier="blog-post-html" type="text/html" title="Blog Post HTML"}
+      \`\`\`
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>My Blog Post</title>
+        <style>
+          body { font-family: Arial, sans-serif; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 20px; }
+          h1 { color: #333; }
+          p { margin-bottom: 15px; }
+        </style>
+      </head>
+      <body>
+        <header>
+          <h1>My First Blog Post</h1>
+        </header>
+        <main>
+          <article>
+            <p>This is the content of my blog post. It's short and sweet!</p>
+          </article>
+        </main>
+        <footer>
+          <p>&copy; 2023 My Blog</p>
+        </footer>
+      </body>
+      </html>
+      \`\`\`
+      :::
+
+      This HTML structure provides a simple layout for a blog post.
+    </assistant_response>
+  </example>
+</examples>`;
+
+const artifactsOpenAIPrompt = dedent`The assistant can create and reference artifacts during conversations.
+  
+Artifacts are for substantial, self-contained content that users might modify or reuse, displayed in a separate UI window for clarity.
+
+# Good artifacts are...
+- Substantial content (>15 lines)
+- Content that the user is likely to modify, iterate on, or take ownership of
+- Self-contained, complex content that can be understood on its own, without context from the conversation
+- Content intended for eventual use outside the conversation (e.g., reports, emails, presentations)
+- Content likely to be referenced or reused multiple times
+
+# Don't use artifacts for...
+- Simple, informational, or short content, such as brief code snippets, mathematical equations, or small examples
+- Primarily explanatory, instructional, or illustrative content, such as examples provided to clarify a concept
+- Suggestions, commentary, or feedback on existing artifacts
+- Conversational or explanatory content that doesn't represent a standalone piece of work
+- Content that is dependent on the current conversational context to be useful
+- Content that is unlikely to be modified or iterated upon by the user
+- Request from users that appears to be a one-off question
+
+# Usage notes
+- One artifact per message unless specifically requested
+- Prefer in-line content (don't use artifacts) when possible. Unnecessary use of artifacts can be jarring for users.
+- If a user asks the assistant to "draw an SVG" or "make a website," the assistant does not need to explain that it doesn't have these capabilities. Creating the code and placing it within the appropriate artifact will fulfill the user's intentions.
+- If asked to generate an image, the assistant can offer an SVG instead. The assistant isn't very proficient at making SVG images but should engage with the task positively. Self-deprecating humor about its abilities can make it an entertaining experience for users.
+- The assistant errs on the side of simplicity and avoids overusing artifacts for content that can be effectively presented within the conversation.
+- Always provide complete, specific, and fully functional content for artifacts without any snippets, placeholders, ellipses, or 'remains the same' comments.
+- If an artifact is not necessary or requested, the assistant should not mention artifacts at all, and respond to the user accordingly.
+
+## Artifact Instructions
+  When collaborating with the user on creating content that falls into compatible categories, the assistant should follow these steps:
+
+  1. Create the artifact using the following remark-directive markdown format:
+
+      :::artifact{identifier="unique-identifier" type="mime-type" title="Artifact Title"}
+      \`\`\`
+      Your artifact content here
+      \`\`\`
+      :::
+
+  a. Example of correct format:
+
+      :::artifact{identifier="example-artifact" type="text/plain" title="Example Artifact"}
+      \`\`\`
+      This is the content of the artifact.
+      It can span multiple lines.
+      \`\`\`
+      :::
+
+  b. Common mistakes to avoid:
+   - Don't split the opening ::: line
+   - Don't add extra backticks outside the artifact structure
+   - Don't omit the closing :::
+
+  2. Assign an identifier to the \`identifier\` attribute. For updates, reuse the prior identifier. For new artifacts, the identifier should be descriptive and relevant to the content, using kebab-case (e.g., "example-code-snippet"). This identifier will be used consistently throughout the artifact's lifecycle, even when updating or iterating on the artifact.
+  3. Include a \`title\` attribute to provide a brief title or description of the content.
+  4. Add a \`type\` attribute to specify the type of content the artifact represents. Assign one of the following values to the \`type\` attribute:
+    - HTML: "text/html"
+      - The user interface can render single file HTML pages placed within the artifact tags. HTML, JS, and CSS should be in a single file when using the \`text/html\` type.
+      - Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so \`<img src="/api/placeholder/400/320" alt="placeholder" />\`
+      - The only place external scripts can be imported from is https://cdnjs.cloudflare.com
+    - SVG: "image/svg+xml"
+      - The user interface will render the Scalable Vector Graphics (SVG) image within the artifact tags.
+      - The assistant should specify the viewbox of the SVG rather than defining a width/height
+    - Mermaid Diagrams: "application/vnd.mermaid"
+      - The user interface will render Mermaid diagrams placed within the artifact tags.
+    - React Components: "application/vnd.react"
+      - Use this for displaying either: React elements, e.g. \`<strong>Hello World!</strong>\`, React pure functional components, e.g. \`() => <strong>Hello World!</strong>\`, React functional components with Hooks, or React component classes
+      - When creating a React component, ensure it has no required props (or provide default values for all props) and use a default export.
+      - Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. \`h-[600px]\`).
+      - Base React is available to be imported. To use hooks, first import it at the top of the artifact, e.g. \`import { useState } from "react"\`
+      - The lucide-react@0.394.0 library is available to be imported. e.g. \`import { Camera } from "lucide-react"\` & \`<Camera color="red" size={48} />\`
+      - The recharts charting library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`
+      - The three.js library is available to be imported, e.g. \`import * as THREE from "three";\`
+      - The date-fns library is available to be imported, e.g. \`import { compareAsc, format } from "date-fns";\`
+      - The react-day-picker library is available to be imported, e.g. \`import { DayPicker } from "react-day-picker";\`
+      - The assistant can use prebuilt components from the \`shadcn/ui\` library after it is imported: \`import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '/components/ui/alert';\`. If using components from the shadcn/ui library, the assistant mentions this to the user and offers to help them install the components if necessary.
+      - Components MUST be imported from \`/components/ui/name\` and NOT from \`/components/name\` or \`@/components/ui/name\`.
+      - NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
+      - Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so \`<img src="/api/placeholder/400/320" alt="placeholder" />\`
+      - When iterating on code, ensure that the code is complete and functional without any snippets, placeholders, or ellipses.
+      - If you are unable to follow the above requirements for any reason, don't use artifacts and use regular code blocks instead, which will not attempt to render the component.
+  5. Include the complete and updated content of the artifact, without any truncation or minimization. Don't use "// rest of the code remains the same...".
+  6. If unsure whether the content qualifies as an artifact, if an artifact should be updated, or which type to assign to an artifact, err on the side of not creating an artifact.
+  7. NEVER use triple backticks to enclose the artifact, ONLY the content within the artifact.
+
+Here are some examples of correct usage of artifacts:
+
+## Examples
+
+### Example 1
+
+    This example demonstrates how to create a Mermaid artifact for a simple flow chart.
+
+    User: Can you create a simple flow chart showing the process of making tea using Mermaid?
+
+    Assistant: Sure! Here's a simple flow chart depicting the process of making tea using Mermaid syntax:
+
+      :::artifact{identifier="tea-making-flowchart" type="application/vnd.mermaid" title="Flow chart: Making Tea"}
+      \`\`\`mermaid
+      graph TD
+          A[Start] --> B{Water boiled?}
+          B -->|Yes| C[Add tea leaves to cup]
+          B -->|No| D[Boil water]
+          D --> B
+          C --> E[Pour boiling water into cup]
+          E --> F[Steep tea for desired time]
+          F --> G[Remove tea leaves]
+          G --> H[Add milk or sugar, if desired]
+          H --> I[Enjoy your tea!]
+          I --> J[End]
+      \`\`\`
+      :::
+
+      This flow chart uses Mermaid syntax to visualize the steps involved in making a cup of tea. Here's a brief explanation of the process:
+
+      1. Start
+      2. Check if water is boiled
+      3. If not boiled, boil the water
+      4. Once water is boiled, add tea leaves to the cup
+      5. Pour boiling water into the cup
+      6. Steep the tea for the desired time
+      7. Remove the tea leaves
+      8. Optionally add milk or sugar
+      9. Enjoy your tea!
+      10. End
+
+      This chart provides a clear visual representation of the tea-making process. You can easily modify or expand this chart if you want to add more details or steps to the process. Let me know if you'd like any changes or have any questions!
+
+---
+
+### Example 2
+
+    User: Create a simple React counter component
+    
+    Assistant: Here's a simple React counter component:
+
+      :::artifact{identifier="react-counter" type="application/vnd.react" title="React Counter"}
+      \`\`\`
+      import { useState } from 'react';
+
+      export default function Counter() {
+        const [count, setCount] = useState(0);
+        return (
+          <div className="p-4">
+            <p className="mb-2">Count: {count}</p>
+            <button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={() => setCount(count + 1)}>
+              Increment
+            </button>
+          </div>
+        );
+      }
+      \`\`\`
+      :::
+
+      This component creates a simple counter with an increment button.
+
+---
+
+### Example 3
+    User: Create a basic HTML structure for a blog post
+    Assistant: Here's a basic HTML structure for a blog post:
+
+      :::artifact{identifier="blog-post-html" type="text/html" title="Blog Post HTML"}
+      \`\`\`
+      <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>My Blog Post</title>
+        <style>
+          body { font-family: Arial, sans-serif; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 20px; }
+          h1 { color: #333; }
+          p { margin-bottom: 15px; }
+        </style>
+      </head>
+      <body>
+        <header>
+          <h1>My First Blog Post</h1>
+        </header>
+        <main>
+          <article>
+            <p>This is the content of my blog post. It's short and sweet!</p>
+          </article>
+        </main>
+        <footer>
+          <p>&copy; 2023 My Blog</p>
+        </footer>
+      </body>
+      </html>
+      \`\`\`
+      :::
+
+      This HTML structure provides a simple layout for a blog post.
+
+---`;
+
+/**
+ *
+ * @param {Object} params
+ * @param {EModelEndpoint | string} params.endpoint - The current endpoint
+ * @param {ArtifactModes} params.artifacts - The current artifact mode
+ * @returns
+ */
+const generateArtifactsPrompt = ({ endpoint, artifacts }) => {
+  if (artifacts === ArtifactModes.CUSTOM) {
+    return null;
+  }
+
+  let prompt = artifactsPrompt;
+  if (endpoint !== EModelEndpoint.anthropic) {
+    prompt = artifactsOpenAIPrompt;
+  }
+
+  if (artifacts === ArtifactModes.SHADCNUI) {
+    prompt += generateShadcnPrompt({ components, useXML: endpoint === EModelEndpoint.anthropic });
+  }
+
+  return prompt;
+};
+
+module.exports = generateArtifactsPrompt;

api/app/clients/prompts/shadcn-docs/components.js

@@ -0,0 +1,495 @@
+// Essential Components
+const essentialComponents = {
+  avatar: {
+    componentName: 'Avatar',
+    importDocs: 'import { Avatar, AvatarFallback, AvatarImage } from "/components/ui/avatar"',
+    usageDocs: `
+<Avatar>
+  <AvatarImage src="https://github.com/shadcn.png" />
+  <AvatarFallback>CN</AvatarFallback>
+</Avatar>`,
+  },
+  button: {
+    componentName: 'Button',
+    importDocs: 'import { Button } from "/components/ui/button"',
+    usageDocs: `
+<Button variant="outline">Button</Button>`,
+  },
+  card: {
+    componentName: 'Card',
+    importDocs: `
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "/components/ui/card"`,
+    usageDocs: `
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content</p>
+  </CardContent>
+  <CardFooter>
+    <p>Card Footer</p>
+  </CardFooter>
+</Card>`,
+  },
+  checkbox: {
+    componentName: 'Checkbox',
+    importDocs: 'import { Checkbox } from "/components/ui/checkbox"',
+    usageDocs: '<Checkbox />',
+  },
+  input: {
+    componentName: 'Input',
+    importDocs: 'import { Input } from "/components/ui/input"',
+    usageDocs: '<Input />',
+  },
+  label: {
+    componentName: 'Label',
+    importDocs: 'import { Label } from "/components/ui/label"',
+    usageDocs: '<Label htmlFor="email">Your email address</Label>',
+  },
+  radioGroup: {
+    componentName: 'RadioGroup',
+    importDocs: `
+import { Label } from "/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "/components/ui/radio-group"`,
+    usageDocs: `
+<RadioGroup defaultValue="option-one">
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-one" id="option-one" />
+    <Label htmlFor="option-one">Option One</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-two" id="option-two" />
+    <Label htmlFor="option-two">Option Two</Label>
+  </div>
+</RadioGroup>`,
+  },
+  select: {
+    componentName: 'Select',
+    importDocs: `
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "/components/ui/select"`,
+    usageDocs: `
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Theme" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="light">Light</SelectItem>
+    <SelectItem value="dark">Dark</SelectItem>
+    <SelectItem value="system">System</SelectItem>
+  </SelectContent>
+</Select>`,
+  },
+  textarea: {
+    componentName: 'Textarea',
+    importDocs: 'import { Textarea } from "/components/ui/textarea"',
+    usageDocs: '<Textarea />',
+  },
+};
+
+// Extra Components
+const extraComponents = {
+  accordion: {
+    componentName: 'Accordion',
+    importDocs: `
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "/components/ui/accordion"`,
+    usageDocs: `
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It adheres to the WAI-ARIA design pattern.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>`,
+  },
+  alertDialog: {
+    componentName: 'AlertDialog',
+    importDocs: `
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "/components/ui/alert-dialog"`,
+    usageDocs: `
+<AlertDialog>
+  <AlertDialogTrigger>Open</AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This action cannot be undone.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Continue</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>`,
+  },
+  alert: {
+    componentName: 'Alert',
+    importDocs: `
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "/components/ui/alert"`,
+    usageDocs: `
+<Alert>
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components to your app using the cli.
+  </AlertDescription>
+</Alert>`,
+  },
+  aspectRatio: {
+    componentName: 'AspectRatio',
+    importDocs: 'import { AspectRatio } from "/components/ui/aspect-ratio"',
+    usageDocs: `
+<AspectRatio ratio={16 / 9}>
+  <Image src="..." alt="Image" className="rounded-md object-cover" />
+</AspectRatio>`,
+  },
+  badge: {
+    componentName: 'Badge',
+    importDocs: 'import { Badge } from "/components/ui/badge"',
+    usageDocs: '<Badge>Badge</Badge>',
+  },
+  calendar: {
+    componentName: 'Calendar',
+    importDocs: 'import { Calendar } from "/components/ui/calendar"',
+    usageDocs: '<Calendar />',
+  },
+  carousel: {
+    componentName: 'Carousel',
+    importDocs: `
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "/components/ui/carousel"`,
+    usageDocs: `
+<Carousel>
+  <CarouselContent>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>`,
+  },
+  collapsible: {
+    componentName: 'Collapsible',
+    importDocs: `
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "/components/ui/collapsible"`,
+    usageDocs: `
+<Collapsible>
+  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
+  <CollapsibleContent>
+    Yes. Free to use for personal and commercial projects. No attribution required.
+  </CollapsibleContent>
+</Collapsible>`,
+  },
+  dialog: {
+    componentName: 'Dialog',
+    importDocs: `
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "/components/ui/dialog"`,
+    usageDocs: `
+<Dialog>
+  <DialogTrigger>Open</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you sure absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone.
+      </DialogDescription>
+    </DialogHeader>
+  </DialogContent>
+</Dialog>`,
+  },
+  dropdownMenu: {
+    componentName: 'DropdownMenu',
+    importDocs: `
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "/components/ui/dropdown-menu"`,
+    usageDocs: `
+<DropdownMenu>
+  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>Profile</DropdownMenuItem>
+    <DropdownMenuItem>Billing</DropdownMenuItem>
+    <DropdownMenuItem>Team</DropdownMenuItem>
+    <DropdownMenuItem>Subscription</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>`,
+  },
+  menubar: {
+    componentName: 'Menubar',
+    importDocs: `
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "/components/ui/menubar"`,
+    usageDocs: `
+<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>File</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>
+        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>New Window</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>Share</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>Print</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>`,
+  },
+  navigationMenu: {
+    componentName: 'NavigationMenu',
+    importDocs: `
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "/components/ui/navigation-menu"`,
+    usageDocs: `
+<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <NavigationMenuLink>Link</NavigationMenuLink>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>`,
+  },
+  popover: {
+    componentName: 'Popover',
+    importDocs: `
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "/components/ui/popover"`,
+    usageDocs: `
+<Popover>
+  <PopoverTrigger>Open</PopoverTrigger>
+  <PopoverContent>Place content for the popover here.</PopoverContent>
+</Popover>`,
+  },
+  progress: {
+    componentName: 'Progress',
+    importDocs: 'import { Progress } from "/components/ui/progress"',
+    usageDocs: '<Progress value={33} />',
+  },
+  separator: {
+    componentName: 'Separator',
+    importDocs: 'import { Separator } from "/components/ui/separator"',
+    usageDocs: '<Separator />',
+  },
+  sheet: {
+    componentName: 'Sheet',
+    importDocs: `
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "/components/ui/sheet"`,
+    usageDocs: `
+<Sheet>
+  <SheetTrigger>Open</SheetTrigger>
+  <SheetContent>
+    <SheetHeader>
+      <SheetTitle>Are you sure absolutely sure?</SheetTitle>
+      <SheetDescription>
+        This action cannot be undone.
+      </SheetDescription>
+    </SheetHeader>
+  </SheetContent>
+</Sheet>`,
+  },
+  skeleton: {
+    componentName: 'Skeleton',
+    importDocs: 'import { Skeleton } from "/components/ui/skeleton"',
+    usageDocs: '<Skeleton className="w-[100px] h-[20px] rounded-full" />',
+  },
+  slider: {
+    componentName: 'Slider',
+    importDocs: 'import { Slider } from "/components/ui/slider"',
+    usageDocs: '<Slider defaultValue={[33]} max={100} step={1} />',
+  },
+  switch: {
+    componentName: 'Switch',
+    importDocs: 'import { Switch } from "/components/ui/switch"',
+    usageDocs: '<Switch />',
+  },
+  table: {
+    componentName: 'Table',
+    importDocs: `
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "/components/ui/table"`,
+    usageDocs: `
+<Table>
+  <TableCaption>A list of your recent invoices.</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead className="w-[100px]">Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Method</TableHead>
+      <TableHead className="text-right">Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell className="font-medium">INV001</TableCell>
+      <TableCell>Paid</TableCell>
+      <TableCell>Credit Card</TableCell>
+      <TableCell className="text-right">$250.00</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>`,
+  },
+  tabs: {
+    componentName: 'Tabs',
+    importDocs: `
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "/components/ui/tabs"`,
+    usageDocs: `
+<Tabs defaultValue="account" className="w-[400px]">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">Make changes to your account here.</TabsContent>
+  <TabsContent value="password">Change your password here.</TabsContent>
+</Tabs>`,
+  },
+  toast: {
+    componentName: 'Toast',
+    importDocs: `
+import { useToast } from "/components/ui/use-toast"
+import { Button } from "/components/ui/button"`,
+    usageDocs: `
+export function ToastDemo() {
+  const { toast } = useToast()
+  return (
+    <Button
+      onClick={() => {
+        toast({
+          title: "Scheduled: Catch up",
+          description: "Friday, February 10, 2023 at 5:57 PM",
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}`,
+  },
+  toggle: {
+    componentName: 'Toggle',
+    importDocs: 'import { Toggle } from "/components/ui/toggle"',
+    usageDocs: '<Toggle>Toggle</Toggle>',
+  },
+  tooltip: {
+    componentName: 'Tooltip',
+    importDocs: `
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "/components/ui/tooltip"`,
+    usageDocs: `
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger>Hover</TooltipTrigger>
+    <TooltipContent>
+      <p>Add to library</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>`,
+  },
+};
+
+const components = Object.assign({}, essentialComponents, extraComponents);
+
+module.exports = {
+  components,
+};

api/app/clients/prompts/shadcn-docs/generate.js

@@ -0,0 +1,50 @@
+const dedent = require('dedent');
+
+/**
+ * Generate system prompt for AI-assisted React component creation
+ * @param {Object} options - Configuration options
+ * @param {Object} options.components - Documentation for shadcn components
+ * @param {boolean} [options.useXML=false] - Whether to use XML-style formatting for component instructions
+ * @returns {string} The generated system prompt
+ */
+function generateShadcnPrompt(options) {
+  const { components, useXML = false } = options;
+
+  let systemPrompt = dedent`
+    ## Additional Artifact Instructions for React Components: "application/vnd.react"
+    
+    There are some prestyled components (primitives) available for use. Please use your best judgement to use any of these components if the app calls for one.
+
+    Here are the components that are available, along with how to import them, and how to use them:
+
+    ${Object.values(components)
+    .map((component) => {
+      if (useXML) {
+        return dedent`
+            <component>
+              <name>${component.componentName}</name>
+              <import-instructions>${component.importDocs}</import-instructions>
+              <usage-instructions>${component.usageDocs}</usage-instructions>
+            </component>
+          `;
+      } else {
+        return dedent`
+            # ${component.componentName}
+
+            ## Import Instructions
+            ${component.importDocs}
+
+            ## Usage Instructions
+            ${component.usageDocs}
+          `;
+      }
+    })
+    .join('\n\n')}
+  `;
+
+  return systemPrompt;
+}
+
+module.exports = {
+  generateShadcnPrompt,
+};

api/package.json

@@ -50,6 +50,7 @@
     "connect-redis": "^7.1.0",
     "cookie": "^0.5.0",
     "cors": "^2.8.5",
+    "dedent": "^1.5.3",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
     "express-mongo-sanitize": "^2.2.0",

api/server/controllers/assistants/chatV1.js

@@ -54,6 +54,7 @@ const chatV1 = async (req, res) => {
     promptPrefix,
     assistant_id,
     instructions,
+    endpointOption,
     thread_id: _thread_id,
     messageId: _messageId,
     conversationId: convoId,
@@ -283,7 +284,7 @@ const chatV1 = async (req, res) => {
     const { openai: _openai, client } = await getOpenAIClient({
       req,
       res,
-      endpointOption: req.body.endpointOption,
+      endpointOption,
       initAppClient: true,
     });
 
@@ -312,6 +313,10 @@ const chatV1 = async (req, res) => {
       body.additional_instructions = promptPrefix;
     }
 
+    if (typeof endpointOption.artifactsPrompt === 'string' && endpointOption.artifactsPrompt) {
+      body.additional_instructions = `${body.additional_instructions ?? ''}\n${endpointOption.artifactsPrompt}`.trim();
+    }
+
     if (instructions) {
       body.instructions = instructions;
     }
@@ -333,12 +338,12 @@ const chatV1 = async (req, res) => {
     };
 
     const addVisionPrompt = async () => {
-      if (!req.body.endpointOption.attachments) {
+      if (!endpointOption.attachments) {
         return;
       }
 
       /** @type {MongoFile[]} */
-      const attachments = await req.body.endpointOption.attachments;
+      const attachments = await endpointOption.attachments;
       if (attachments && attachments.every((attachment) => checkOpenAIStorage(attachment.source))) {
         return;
       }

api/server/controllers/assistants/chatV2.js

@@ -53,6 +53,7 @@ const chatV2 = async (req, res) => {
     promptPrefix,
     assistant_id,
     instructions,
+    endpointOption,
     thread_id: _thread_id,
     messageId: _messageId,
     conversationId: convoId,
@@ -160,7 +161,7 @@ const chatV2 = async (req, res) => {
     const { openai: _openai, client } = await getOpenAIClient({
       req,
       res,
-      endpointOption: req.body.endpointOption,
+      endpointOption,
       initAppClient: true,
     });
 
@@ -194,6 +195,10 @@ const chatV2 = async (req, res) => {
       body.additional_instructions = promptPrefix;
     }
 
+    if (typeof endpointOption.artifactsPrompt === 'string' && endpointOption.artifactsPrompt) {
+      body.additional_instructions = `${body.additional_instructions ?? ''}\n${endpointOption.artifactsPrompt}`.trim();
+    }
+
     if (instructions) {
       body.instructions = instructions;
     }

api/server/services/Endpoints/anthropic/buildOptions.js

@@ -1,4 +1,5 @@
 const { removeNullishValues } = require('librechat-data-provider');
+const generateArtifactsPrompt = require('~/app/clients/prompts/artifacts');
 
 const buildOptions = (endpoint, parsedBody) => {
   const {
@@ -10,6 +11,7 @@ const buildOptions = (endpoint, parsedBody) => {
     iconURL,
     greeting,
     spec,
+    artifacts,
     ...modelOptions
   } = parsedBody;
 
@@ -26,6 +28,10 @@ const buildOptions = (endpoint, parsedBody) => {
     modelOptions,
   });
 
+  if (typeof artifacts === 'string') {
+    endpointOption.artifactsPrompt = generateArtifactsPrompt({ endpoint, artifacts });
+  }
+
   return endpointOption;
 };
 

api/server/services/Endpoints/assistants/buildOptions.js

@@ -1,8 +1,10 @@
 const { removeNullishValues } = require('librechat-data-provider');
+const generateArtifactsPrompt = require('~/app/clients/prompts/artifacts');
 
 const buildOptions = (endpoint, parsedBody) => {
   // eslint-disable-next-line no-unused-vars
-  const { promptPrefix, assistant_id, iconURL, greeting, spec, ...modelOptions } = parsedBody;
+  const { promptPrefix, assistant_id, iconURL, greeting, spec, artifacts, ...modelOptions } =
+    parsedBody;
   const endpointOption = removeNullishValues({
     endpoint,
     promptPrefix,
@@ -13,6 +15,10 @@ const buildOptions = (endpoint, parsedBody) => {
     modelOptions,
   });
 
+  if (typeof artifacts === 'string') {
+    endpointOption.artifactsPrompt = generateArtifactsPrompt({ endpoint, artifacts });
+  }
+
   return endpointOption;
 };
 

api/server/services/Endpoints/azureAssistants/buildOptions.js

@@ -1,8 +1,10 @@
 const { removeNullishValues } = require('librechat-data-provider');
+const generateArtifactsPrompt = require('~/app/clients/prompts/artifacts');
 
 const buildOptions = (endpoint, parsedBody) => {
   // eslint-disable-next-line no-unused-vars
-  const { promptPrefix, assistant_id, iconURL, greeting, spec, ...modelOptions } = parsedBody;
+  const { promptPrefix, assistant_id, iconURL, greeting, spec, artifacts, ...modelOptions } =
+    parsedBody;
   const endpointOption = removeNullishValues({
     endpoint,
     promptPrefix,
@@ -13,6 +15,10 @@ const buildOptions = (endpoint, parsedBody) => {
     modelOptions,
   });
 
+  if (typeof artifacts === 'string') {
+    endpointOption.artifactsPrompt = generateArtifactsPrompt({ endpoint, artifacts });
+  }
+
   return endpointOption;
 };
 

api/server/services/Endpoints/custom/buildOptions.js

@@ -1,4 +1,5 @@
 const { removeNullishValues } = require('librechat-data-provider');
+const generateArtifactsPrompt = require('~/app/clients/prompts/artifacts');
 
 const buildOptions = (endpoint, parsedBody, endpointType) => {
   const {
@@ -10,6 +11,7 @@ const buildOptions = (endpoint, parsedBody, endpointType) => {
     iconURL,
     greeting,
     spec,
+    artifacts,
     ...modelOptions
   } = parsedBody;
   const endpointOption = removeNullishValues({
@@ -26,6 +28,10 @@ const buildOptions = (endpoint, parsedBody, endpointType) => {
     modelOptions,
   });
 
+  if (typeof artifacts === 'string') {
+    endpointOption.artifactsPrompt = generateArtifactsPrompt({ endpoint, artifacts });
+  }
+
   return endpointOption;
 };
 

api/server/services/Endpoints/google/buildOptions.js

@@ -1,4 +1,5 @@
 const { removeNullishValues } = require('librechat-data-provider');
+const generateArtifactsPrompt = require('~/app/clients/prompts/artifacts');
 
 const buildOptions = (endpoint, parsedBody) => {
   const {
@@ -9,6 +10,7 @@ const buildOptions = (endpoint, parsedBody) => {
     iconURL,
     greeting,
     spec,
+    artifacts,
     ...modelOptions
   } = parsedBody;
   const endpointOption = removeNullishValues({
@@ -23,6 +25,10 @@ const buildOptions = (endpoint, parsedBody) => {
     modelOptions,
   });
 
+  if (typeof artifacts === 'string') {
+    endpointOption.artifactsPrompt = generateArtifactsPrompt({ endpoint, artifacts });
+  }
+
   return endpointOption;
 };
 

api/server/services/Endpoints/gptPlugins/buildOptions.js

@@ -1,4 +1,5 @@
 const { removeNullishValues } = require('librechat-data-provider');
+const generateArtifactsPrompt = require('~/app/clients/prompts/artifacts');
 
 const buildOptions = (endpoint, parsedBody) => {
   const {
@@ -10,6 +11,7 @@ const buildOptions = (endpoint, parsedBody) => {
     greeting,
     spec,
     maxContextTokens,
+    artifacts,
     ...modelOptions
   } = parsedBody;
   const endpointOption = removeNullishValues({
@@ -28,6 +30,10 @@ const buildOptions = (endpoint, parsedBody) => {
     modelOptions,
   });
 
+  if (typeof artifacts === 'string') {
+    endpointOption.artifactsPrompt = generateArtifactsPrompt({ endpoint, artifacts });
+  }
+
   return endpointOption;
 };
 

api/server/services/Endpoints/openAI/buildOptions.js

@@ -1,4 +1,5 @@
 const { removeNullishValues } = require('librechat-data-provider');
+const generateArtifactsPrompt = require('~/app/clients/prompts/artifacts');
 
 const buildOptions = (endpoint, parsedBody) => {
   const {
@@ -10,8 +11,10 @@ const buildOptions = (endpoint, parsedBody) => {
     iconURL,
     greeting,
     spec,
+    artifacts,
     ...modelOptions
   } = parsedBody;
+
   const endpointOption = removeNullishValues({
     endpoint,
     chatGptLabel,
@@ -25,6 +28,10 @@ const buildOptions = (endpoint, parsedBody) => {
     modelOptions,
   });
 
+  if (typeof artifacts === 'string') {
+    endpointOption.artifactsPrompt = generateArtifactsPrompt({ endpoint, artifacts });
+  }
+
   return endpointOption;
 };
 

client/package.json

@@ -29,6 +29,7 @@
   "homepage": "https://librechat.ai",
   "dependencies": {
     "@ariakit/react": "^0.4.8",
+    "@codesandbox/sandpack-react": "^2.18.2",
     "@dicebear/collection": "^7.0.4",
     "@dicebear/core": "^7.0.4",
     "@headlessui/react": "^2.1.2",
@@ -79,8 +80,8 @@
     "react-gtm-module": "^2.0.11",
     "react-hook-form": "^7.43.9",
     "react-lazy-load-image-component": "^1.6.0",
-    "react-markdown": "^8.0.6",
-    "react-resizable-panels": "^1.0.9",
+    "react-markdown": "^9.0.1",
+    "react-resizable-panels": "^2.1.1",
     "react-router-dom": "^6.11.2",
     "react-speech-recognition": "^3.10.0",
     "react-textarea-autosize": "^8.4.0",
@@ -89,9 +90,9 @@
     "regenerator-runtime": "^0.14.1",
     "rehype-highlight": "^6.0.0",
     "rehype-katex": "^6.0.2",
-    "rehype-raw": "^6.1.1",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1",
+    "remark-directive": "^3.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "remark-supersub": "^1.0.0",
     "tailwind-merge": "^1.9.1",
     "tailwindcss-animate": "^1.0.5",
@@ -132,7 +133,7 @@
     "tailwindcss": "^3.4.1",
     "ts-jest": "^29.1.0",
     "typescript": "^5.0.4",
-    "vite": "^5.1.1",
+    "vite": "^5.4.2",
     "vite-plugin-node-polyfills": "^0.17.0",
     "vite-plugin-pwa": "^0.19.8"
   }

client/src/common/artifacts.ts

@@ -0,0 +1,15 @@
+export interface CodeBlock {
+  id: string;
+  language: string;
+  content: string;
+}
+
+export interface Artifact {
+  id: string;
+  lastUpdateTime: number;
+  identifier?: string;
+  language?: string;
+  content?: string;
+  title?: string;
+  type?: string;
+}

client/src/common/index.ts

@@ -1,2 +1,3 @@
+export * from './artifacts';
 export * from './types';
 export * from './assistants-types';

client/src/components/Artifacts/Artifact.tsx

@@ -0,0 +1,104 @@
+import React, { useEffect, useCallback, useRef, useState } from 'react';
+import throttle from 'lodash/throttle';
+import { visit } from 'unist-util-visit';
+import { useSetRecoilState } from 'recoil';
+import type { Pluggable } from 'unified';
+import type { Artifact } from '~/common';
+import { artifactsState } from '~/store/artifacts';
+import ArtifactButton from './ArtifactButton';
+import { logger } from '~/utils';
+
+export const artifactPlugin: Pluggable = () => {
+  return (tree) => {
+    visit(tree, ['textDirective', 'leafDirective', 'containerDirective'], (node) => {
+      node.data = {
+        hName: node.name,
+        hProperties: node.attributes,
+        ...node.data,
+      };
+      return node;
+    });
+  };
+};
+
+const extractContent = (
+  children: React.ReactNode | { props: { children: React.ReactNode } } | string,
+): string => {
+  if (typeof children === 'string') {
+    return children;
+  }
+  if (React.isValidElement(children)) {
+    return extractContent((children.props as { children?: React.ReactNode }).children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(extractContent).join('');
+  }
+  return '';
+};
+
+export function Artifact({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  node,
+  ...props
+}: Artifact & {
+  children: React.ReactNode | { props: { children: React.ReactNode } };
+  node: unknown;
+}) {
+  const setArtifacts = useSetRecoilState(artifactsState);
+  const [artifact, setArtifact] = useState<Artifact | null>(null);
+
+  const throttledUpdateRef = useRef(
+    throttle((updateFn: () => void) => {
+      updateFn();
+    }, 25),
+  );
+
+  const updateArtifact = useCallback(() => {
+    const content = extractContent(props.children);
+    logger.log('artifacts', 'updateArtifact: content.length', content.length);
+
+    if (!content || content.trim() === '') {
+      return;
+    }
+
+    const title = props.title ?? 'Untitled Artifact';
+    const type = props.type ?? 'unknown';
+    const identifier = props.identifier ?? 'no-identifier';
+    const artifactKey = `${identifier}_${type}_${title}`.replace(/\s+/g, '_').toLowerCase();
+
+    throttledUpdateRef.current(() => {
+      const now = Date.now();
+
+      const currentArtifact: Artifact = {
+        id: artifactKey,
+        identifier,
+        title,
+        type,
+        content,
+        lastUpdateTime: now,
+      };
+
+      setArtifacts((prevArtifacts) => {
+        if (
+          prevArtifacts?.[artifactKey] != null &&
+          prevArtifacts[artifactKey].content === content
+        ) {
+          return prevArtifacts;
+        }
+
+        return {
+          ...prevArtifacts,
+          [artifactKey]: currentArtifact,
+        };
+      });
+
+      setArtifact(currentArtifact);
+    });
+  }, [props.type, props.title, setArtifacts, props.children, props.identifier]);
+
+  useEffect(() => {
+    updateArtifact();
+  }, [updateArtifact]);
+
+  return <ArtifactButton artifact={artifact} />;
+}

client/src/components/Artifacts/ArtifactButton.tsx

@@ -0,0 +1,44 @@
+import { useSetRecoilState } from 'recoil';
+import type { Artifact } from '~/common';
+import FilePreview from '~/components/Chat/Input/Files/FilePreview';
+import { useLocalize } from '~/hooks';
+import { getFileType } from '~/utils';
+import store from '~/store';
+
+const ArtifactButton = ({ artifact }: { artifact: Artifact | null }) => {
+  const localize = useLocalize();
+  const setVisible = useSetRecoilState(store.artifactsVisible);
+  const setArtifactId = useSetRecoilState(store.currentArtifactId);
+  if (artifact === null || artifact === undefined) {
+    return null;
+  }
+  const fileType = getFileType('artifact');
+
+  return (
+    <div className="group relative my-4 rounded-xl text-sm text-text-primary">
+      <button
+        type="button"
+        onClick={() => {
+          setArtifactId(artifact.id);
+          setVisible(true);
+        }}
+        className="relative overflow-hidden rounded-xl border border-border-medium transition-all duration-300 hover:border-border-xheavy hover:shadow-lg"
+      >
+        <div className="w-fit bg-surface-tertiary p-2 ">
+          <div className="flex flex-row items-center gap-2">
+            <FilePreview fileType={fileType} className="relative" />
+            <div className="overflow-hidden text-left">
+              <div className="truncate font-medium">{artifact.title}</div>
+              <div className="truncate text-text-secondary">
+                {localize('com_ui_artifact_click')}
+              </div>
+            </div>
+          </div>
+        </div>
+      </button>
+      <br />
+    </div>
+  );
+};
+
+export default ArtifactButton;

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>
+  );
+});

client/src/components/Artifacts/Artifacts.tsx

@@ -0,0 +1,205 @@
+import { useRef, useState, useEffect } from 'react';
+import { RefreshCw } from 'lucide-react';
+import { useSetRecoilState } from 'recoil';
+import * as Tabs from '@radix-ui/react-tabs';
+import { SandpackPreviewRef } from '@codesandbox/sandpack-react';
+import useArtifacts from '~/hooks/Artifacts/useArtifacts';
+import { CodeMarkdown, CopyCodeButton } from './Code';
+import { getFileExtension } from '~/utils/artifacts';
+import { ArtifactPreview } from './ArtifactPreview';
+import { cn } from '~/utils';
+import store from '~/store';
+
+export default function Artifacts() {
+  const previewRef = useRef<SandpackPreviewRef>();
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const setArtifactsVisible = useSetRecoilState(store.artifactsVisible);
+
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
+
+  const {
+    activeTab,
+    isMermaid,
+    isSubmitting,
+    setActiveTab,
+    currentIndex,
+    cycleArtifact,
+    currentArtifact,
+    orderedArtifactIds,
+  } = useArtifacts();
+
+  if (currentArtifact === null || currentArtifact === undefined) {
+    return null;
+  }
+
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    const client = previewRef.current?.getClient();
+    if (client != null) {
+      client.dispatch({ type: 'refresh' });
+    }
+    setTimeout(() => setIsRefreshing(false), 750);
+  };
+
+  return (
+    <Tabs.Root value={activeTab} onValueChange={setActiveTab} asChild>
+      {/* Main Parent */}
+      <div className="flex h-full w-full items-center justify-center py-2">
+        {/* Main Container */}
+        <div
+          className={`flex h-[97%] w-[97%] flex-col overflow-hidden rounded-xl border border-border-medium bg-surface-primary text-xl text-text-primary shadow-xl transition-all duration-300 ease-in-out ${
+            isVisible
+              ? 'translate-x-0 scale-100 opacity-100'
+              : 'translate-x-full scale-95 opacity-0'
+          }`}
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-border-medium bg-surface-primary-alt p-2">
+            <div className="flex items-center">
+              <button
+                className="mr-2 text-text-secondary"
+                onClick={() => {
+                  setIsVisible(false);
+                  setTimeout(() => setArtifactsVisible(false), 300);
+                }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  viewBox="0 0 256 256"
+                >
+                  <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z" />
+                </svg>
+              </button>
+              <h3 className="truncate text-sm text-text-primary">{currentArtifact.title}</h3>
+            </div>
+            <div className="flex items-center">
+              {/* Refresh button */}
+              {activeTab === 'preview' && (
+                <button
+                  className={`mr-2 text-text-secondary transition-transform duration-500 ease-in-out ${
+                    isRefreshing ? 'rotate-180' : ''
+                  }`}
+                  onClick={handleRefresh}
+                  disabled={isRefreshing}
+                  aria-label="Refresh"
+                >
+                  <RefreshCw
+                    size={16}
+                    className={`transform ${isRefreshing ? 'animate-spin' : ''}`}
+                  />
+                </button>
+              )}
+              <Tabs.List className="mr-2 inline-flex h-7 rounded-full border border-border-medium bg-surface-tertiary">
+                <Tabs.Trigger
+                  value="preview"
+                  className="border-0.5 flex items-center gap-1 rounded-full border-transparent py-1 pl-2.5 pr-2.5 text-xs font-medium text-text-secondary data-[state=active]:border-border-light data-[state=active]:bg-surface-primary-alt data-[state=active]:text-text-primary"
+                >
+                  Preview
+                </Tabs.Trigger>
+                <Tabs.Trigger
+                  value="code"
+                  className="border-0.5 flex items-center gap-1 rounded-full border-transparent py-1 pl-2.5 pr-2.5 text-xs font-medium text-text-secondary data-[state=active]:border-border-light data-[state=active]:bg-surface-primary-alt data-[state=active]:text-text-primary"
+                >
+                  Code
+                </Tabs.Trigger>
+              </Tabs.List>
+              <button
+                className="text-text-secondary"
+                onClick={() => {
+                  setIsVisible(false);
+                  setTimeout(() => setArtifactsVisible(false), 300);
+                }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  viewBox="0 0 256 256"
+                >
+                  <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          {/* Content */}
+          <Tabs.Content
+            value="code"
+            className={cn('flex-grow overflow-x-auto overflow-y-scroll bg-gray-900 p-4')}
+          >
+            <CodeMarkdown
+              content={`\`\`\`${getFileExtension(currentArtifact.type)}\n${
+                currentArtifact.content ?? ''
+              }\`\`\``}
+              isSubmitting={isSubmitting}
+            />
+          </Tabs.Content>
+          <Tabs.Content
+            value="preview"
+            className={cn('flex-grow overflow-auto', isMermaid ? 'bg-[#282C34]' : 'bg-white')}
+          >
+            <ArtifactPreview
+              artifact={currentArtifact}
+              previewRef={previewRef as React.MutableRefObject<SandpackPreviewRef>}
+            />
+          </Tabs.Content>
+          {/* Footer */}
+          <div className="flex items-center justify-between border-t border-border-medium bg-surface-primary-alt p-2 text-sm text-text-secondary">
+            <div className="flex items-center">
+              <button onClick={() => cycleArtifact('prev')} className="mr-2 text-text-secondary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  viewBox="0 0 256 256"
+                >
+                  <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z" />
+                </svg>
+              </button>
+              <span className="text-xs">{`${currentIndex + 1} / ${
+                orderedArtifactIds.length
+              }`}</span>
+              <button onClick={() => cycleArtifact('next')} className="ml-2 text-text-secondary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  viewBox="0 0 256 256"
+                >
+                  <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" />
+                </svg>
+              </button>
+            </div>
+            <div className="flex items-center">
+              <CopyCodeButton content={currentArtifact.content ?? ''} />
+              {/* Download Button */}
+              {/* <button className="mr-2 text-text-secondary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  viewBox="0 0 256 256"
+                >
+                  <path d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z" />
+                </svg>
+              </button> */}
+              {/* Publish button */}
+              {/* <button className="border-0.5 min-w-[4rem] whitespace-nowrap rounded-md border-border-medium bg-[radial-gradient(ellipse,_var(--tw-gradient-stops))] from-surface-active from-50% to-surface-active px-3 py-1 text-xs font-medium text-text-primary transition-colors hover:bg-surface-active hover:text-text-primary active:scale-[0.985] active:bg-surface-active">
+                Publish
+              </button> */}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Tabs.Root>
+  );
+}

client/src/components/Artifacts/Code.tsx

@@ -0,0 +1,119 @@
+import React, { memo, useEffect, useRef, useState } from 'react';
+import rehypeKatex from 'rehype-katex';
+import ReactMarkdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+import copy from 'copy-to-clipboard';
+import { handleDoubleClick, langSubset } from '~/utils';
+import Clipboard from '~/components/svg/Clipboard';
+import CheckMark from '~/components/svg/CheckMark';
+import useLocalize from '~/hooks/useLocalize';
+
+type TCodeProps = {
+  inline: boolean;
+  className?: string;
+  children: React.ReactNode;
+};
+
+export const code: React.ElementType = memo(({ inline, className, children }: TCodeProps) => {
+  const match = /language-(\w+)/.exec(className ?? '');
+  const lang = match && match[1];
+
+  if (inline) {
+    return (
+      <code onDoubleClick={handleDoubleClick} className={className}>
+        {children}
+      </code>
+    );
+  }
+
+  return <code className={`hljs language-${lang} !whitespace-pre`}>{children}</code>;
+});
+
+export const CodeMarkdown = memo(
+  ({ content = '', isSubmitting }: { content: string; isSubmitting: boolean }) => {
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const [userScrolled, setUserScrolled] = useState(false);
+    const currentContent = content;
+    const rehypePlugins = [
+      [rehypeKatex, { output: 'mathml' }],
+      [
+        rehypeHighlight,
+        {
+          detect: true,
+          ignoreMissing: true,
+          subset: langSubset,
+        },
+      ],
+    ];
+
+    useEffect(() => {
+      const scrollContainer = scrollRef.current;
+      if (!scrollContainer) {
+        return;
+      }
+
+      const handleScroll = () => {
+        const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+        const isNearBottom = scrollHeight - scrollTop - clientHeight < 50;
+
+        if (!isNearBottom) {
+          setUserScrolled(true);
+        } else {
+          setUserScrolled(false);
+        }
+      };
+
+      scrollContainer.addEventListener('scroll', handleScroll);
+
+      return () => {
+        scrollContainer.removeEventListener('scroll', handleScroll);
+      };
+    }, []);
+
+    useEffect(() => {
+      const scrollContainer = scrollRef.current;
+      if (!scrollContainer || !isSubmitting || userScrolled) {
+        return;
+      }
+
+      scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    }, [content, isSubmitting, userScrolled]);
+
+    return (
+      <div ref={scrollRef} className="max-h-full overflow-y-auto">
+        <ReactMarkdown
+          /* @ts-ignore */
+          rehypePlugins={rehypePlugins}
+          components={
+            { code } as {
+              [key: string]: React.ElementType;
+            }
+          }
+        >
+          {currentContent}
+        </ReactMarkdown>
+      </div>
+    );
+  },
+);
+
+export const CopyCodeButton: React.FC<{ content: string }> = ({ content }) => {
+  const localize = useLocalize();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = () => {
+    copy(content, { format: 'text/plain' });
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 3000);
+  };
+
+  return (
+    <button
+      className="mr-2 text-text-secondary"
+      onClick={handleCopy}
+      aria-label={isCopied ? localize('com_ui_copied') : localize('com_ui_copy_code')}
+    >
+      {isCopied ? <CheckMark className="h-[18px] w-[18px]" /> : <Clipboard />}
+    </button>
+  );
+};

client/src/components/Artifacts/Mermaid.tsx

@@ -0,0 +1,189 @@
+import React, { useEffect, useRef, useState } from 'react';
+import mermaid from 'mermaid';
+import { TransformWrapper, TransformComponent, ReactZoomPanPinchRef } from 'react-zoom-pan-pinch';
+// import { Button } from '/components/ui/Button'; // Live component
+import { Button } from '~/components/ui/Button';
+import { ZoomIn, ZoomOut, RefreshCw } from 'lucide-react';
+
+interface MermaidDiagramProps {
+  content: string;
+}
+
+/** Note: this is just for testing purposes, don't actually use this component */
+const MermaidDiagram: React.FC<MermaidDiagramProps> = ({ content }) => {
+  const mermaidRef = useRef<HTMLDivElement>(null);
+  const transformRef = useRef<ReactZoomPanPinchRef>(null);
+  const [isRendered, setIsRendered] = useState(false);
+
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: 'base',
+      securityLevel: 'sandbox',
+      themeVariables: {
+        background: '#282C34',
+        primaryColor: '#333842',
+        secondaryColor: '#333842',
+        tertiaryColor: '#333842',
+        primaryTextColor: '#ABB2BF',
+        secondaryTextColor: '#ABB2BF',
+        lineColor: '#636D83',
+        fontSize: '16px',
+        nodeBorder: '#636D83',
+        mainBkg: '#282C34',
+        altBackground: '#282C34',
+        textColor: '#ABB2BF',
+        edgeLabelBackground: '#282C34',
+        clusterBkg: '#282C34',
+        clusterBorder: '#636D83',
+        labelBoxBkgColor: '#333842',
+        labelBoxBorderColor: '#636D83',
+        labelTextColor: '#ABB2BF',
+      },
+      flowchart: {
+        curve: 'basis',
+        nodeSpacing: 50,
+        rankSpacing: 50,
+        diagramPadding: 8,
+        htmlLabels: true,
+        useMaxWidth: true,
+        defaultRenderer: 'dagre-d3',
+        padding: 15,
+        wrappingWidth: 200,
+      },
+    });
+
+    const renderDiagram = async () => {
+      if (mermaidRef.current) {
+        try {
+          const { svg } = await mermaid.render('mermaid-diagram', content);
+          mermaidRef.current.innerHTML = svg;
+
+          const svgElement = mermaidRef.current.querySelector('svg');
+          if (svgElement) {
+            svgElement.style.width = '100%';
+            svgElement.style.height = '100%';
+
+            const pathElements = svgElement.querySelectorAll('path');
+            pathElements.forEach((path) => {
+              path.style.strokeWidth = '1.5px';
+            });
+
+            const rectElements = svgElement.querySelectorAll('rect');
+            rectElements.forEach((rect) => {
+              const parent = rect.parentElement;
+              if (parent && parent.classList.contains('node')) {
+                rect.style.stroke = '#636D83';
+                rect.style.strokeWidth = '1px';
+              } else {
+                rect.style.stroke = 'none';
+              }
+            });
+          }
+          setIsRendered(true);
+        } catch (error) {
+          console.error('Mermaid rendering error:', error);
+          mermaidRef.current.innerHTML = 'Error rendering diagram';
+        }
+      }
+    };
+
+    renderDiagram();
+  }, [content]);
+
+  const centerAndFitDiagram = () => {
+    if (transformRef.current && mermaidRef.current) {
+      const { centerView, zoomToElement } = transformRef.current;
+      zoomToElement(mermaidRef.current as HTMLElement);
+      centerView(1, 0);
+    }
+  };
+
+  useEffect(() => {
+    if (isRendered) {
+      centerAndFitDiagram();
+    }
+  }, [isRendered]);
+
+  const handlePanning = () => {
+    if (transformRef.current) {
+      const { state, instance } = (transformRef.current as ReactZoomPanPinchRef | undefined) ?? {};
+      if (!state || !instance) {
+        return;
+      }
+      const { scale, positionX, positionY } = state;
+      const { wrapperComponent, contentComponent } = instance;
+
+      if (wrapperComponent && contentComponent) {
+        const wrapperRect = wrapperComponent.getBoundingClientRect();
+        const contentRect = contentComponent.getBoundingClientRect();
+        const maxX = wrapperRect.width - contentRect.width * scale;
+        const maxY = wrapperRect.height - contentRect.height * scale;
+
+        let newX = positionX;
+        let newY = positionY;
+
+        if (newX > 0) {
+          newX = 0;
+        }
+        if (newY > 0) {
+          newY = 0;
+        }
+        if (newX < maxX) {
+          newX = maxX;
+        }
+        if (newY < maxY) {
+          newY = maxY;
+        }
+
+        if (newX !== positionX || newY !== positionY) {
+          instance.setTransformState(scale, newX, newY);
+        }
+      }
+    }
+  };
+
+  return (
+    <div className="relative h-screen w-screen cursor-move bg-[#282C34] p-5">
+      <TransformWrapper
+        ref={transformRef}
+        initialScale={1}
+        minScale={0.1}
+        maxScale={4}
+        limitToBounds={false}
+        centerOnInit={true}
+        initialPositionY={0}
+        wheel={{ step: 0.1 }}
+        panning={{ velocityDisabled: true }}
+        alignmentAnimation={{ disabled: true }}
+        onPanning={handlePanning}
+      >
+        {({ zoomIn, zoomOut }) => (
+          <>
+            <TransformComponent
+              wrapperStyle={{ width: '100%', height: '100%', overflow: 'hidden' }}
+            >
+              <div
+                ref={mermaidRef}
+                style={{ width: 'auto', height: 'auto', minWidth: '100%', minHeight: '100%' }}
+              />
+            </TransformComponent>
+            <div className="absolute bottom-2 right-2 flex space-x-2">
+              <Button onClick={() => zoomIn(0.1)} variant="outline" size="icon">
+                <ZoomIn className="h-4 w-4" />
+              </Button>
+              <Button onClick={() => zoomOut(0.1)} variant="outline" size="icon">
+                <ZoomOut className="h-4 w-4" />
+              </Button>
+              <Button onClick={centerAndFitDiagram} variant="outline" size="icon">
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            </div>
+          </>
+        )}
+      </TransformWrapper>
+    </div>
+  );
+};
+
+export default MermaidDiagram;

client/src/components/Artifacts/useDebounceCodeBlock.ts

@@ -0,0 +1,37 @@
+// client/src/hooks/useDebounceCodeBlock.ts
+import { useCallback, useEffect } from 'react';
+import debounce from 'lodash/debounce';
+import { useSetRecoilState } from 'recoil';
+import { codeBlocksState, codeBlockIdsState } from '~/store/artifacts';
+import type { CodeBlock } from '~/common';
+
+export function useDebounceCodeBlock() {
+  const setCodeBlocks = useSetRecoilState(codeBlocksState);
+  const setCodeBlockIds = useSetRecoilState(codeBlockIdsState);
+
+  const updateCodeBlock = useCallback((codeBlock: CodeBlock) => {
+    console.log('Updating code block:', codeBlock);
+    setCodeBlocks((prev) => ({
+      ...prev,
+      [codeBlock.id]: codeBlock,
+    }));
+    setCodeBlockIds((prev) =>
+      prev.includes(codeBlock.id) ? prev : [...prev, codeBlock.id],
+    );
+  }, [setCodeBlocks, setCodeBlockIds]);
+
+  const debouncedUpdateCodeBlock = useCallback(
+    debounce((codeBlock: CodeBlock) => {
+      updateCodeBlock(codeBlock);
+    }, 25),
+    [updateCodeBlock],
+  );
+
+  useEffect(() => {
+    return () => {
+      debouncedUpdateCodeBlock.cancel();
+    };
+  }, [debouncedUpdateCodeBlock]);
+
+  return debouncedUpdateCodeBlock;
+}

client/src/components/Chat/Messages/Content/Markdown.tsx

@@ -5,8 +5,10 @@ import supersub from 'remark-supersub';
 import rehypeKatex from 'rehype-katex';
 import { useRecoilValue } from 'recoil';
 import ReactMarkdown from 'react-markdown';
-import type { PluggableList } from 'unified';
 import rehypeHighlight from 'rehype-highlight';
+import remarkDirective from 'remark-directive';
+import type { Pluggable } from 'unified';
+import { Artifact, artifactPlugin } from '~/components/Artifacts/Artifact';
 import { langSubset, preprocessLaTeX, handleDoubleClick } from '~/utils';
 import CodeBlock from '~/components/Messages/Content/CodeBlock';
 import { useFileDownload } from '~/data-provider';
@@ -20,11 +22,13 @@ type TCodeProps = {
   children: React.ReactNode;
 };
 
-export const code: React.ElementType = memo(({ inline, className, children }: TCodeProps) => {
+export const code: React.ElementType = memo(({ className, children }: TCodeProps) => {
   const match = /language-(\w+)/.exec(className ?? '');
   const lang = match && match[1];
 
-  if (inline) {
+  if (lang === 'math') {
+    return children;
+  } else if (typeof children === 'string' && children.split('\n').length === 1) {
     return (
       <code onDoubleClick={handleDoubleClick} className={className}>
         {children}
@@ -35,73 +39,75 @@ export const code: React.ElementType = memo(({ inline, className, children }: TC
   }
 });
 
-export const a = memo(({ href, children }: { href: string; children: React.ReactNode }) => {
-  const user = useRecoilValue(store.user);
-  const { showToast } = useToastContext();
-  const localize = useLocalize();
+export const a: React.ElementType = memo(
+  ({ href, children }: { href: string; children: React.ReactNode }) => {
+    const user = useRecoilValue(store.user);
+    const { showToast } = useToastContext();
+    const localize = useLocalize();
 
-  const { file_id, filename, filepath } = useMemo(() => {
-    const pattern = new RegExp(`(?:files|outputs)/${user?.id}/([^\\s]+)`);
-    const match = href.match(pattern);
-    if (match && match[0]) {
-      const path = match[0];
-      const parts = path.split('/');
-      const name = parts.pop();
-      const file_id = parts.pop();
-      return { file_id, filename: name, filepath: path };
+    const { file_id, filename, filepath } = useMemo(() => {
+      const pattern = new RegExp(`(?:files|outputs)/${user?.id}/([^\\s]+)`);
+      const match = href.match(pattern);
+      if (match && match[0]) {
+        const path = match[0];
+        const parts = path.split('/');
+        const name = parts.pop();
+        const file_id = parts.pop();
+        return { file_id, filename: name, filepath: path };
+      }
+      return { file_id: '', filename: '', filepath: '' };
+    }, [user?.id, href]);
+
+    const { refetch: downloadFile } = useFileDownload(user?.id ?? '', file_id);
+    const props: { target?: string; onClick?: React.MouseEventHandler } = { target: '_new' };
+
+    if (!file_id || !filename) {
+      return (
+        <a href={href} {...props}>
+          {children}
+        </a>
+      );
     }
-    return { file_id: '', filename: '', filepath: '' };
-  }, [user?.id, href]);
 
-  const { refetch: downloadFile } = useFileDownload(user?.id ?? '', file_id);
-  const props: { target?: string; onClick?: React.MouseEventHandler } = { target: '_new' };
+    const handleDownload = async (event: React.MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      try {
+        const stream = await downloadFile();
+        if (stream.data == null || stream.data === '') {
+          console.error('Error downloading file: No data found');
+          showToast({
+            status: 'error',
+            message: localize('com_ui_download_error'),
+          });
+          return;
+        }
+        const link = document.createElement('a');
+        link.href = stream.data;
+        link.setAttribute('download', filename);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(stream.data);
+      } catch (error) {
+        console.error('Error downloading file:', error);
+      }
+    };
+
+    props.onClick = handleDownload;
+    props.target = '_blank';
 
-  if (!file_id || !filename) {
     return (
-      <a href={href} {...props}>
+      <a
+        href={filepath.startsWith('files/') ? `/api/${filepath}` : `/api/files/${filepath}`}
+        {...props}
+      >
         {children}
       </a>
     );
-  }
+  },
+);
 
-  const handleDownload = async (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    try {
-      const stream = await downloadFile();
-      if (!stream.data) {
-        console.error('Error downloading file: No data found');
-        showToast({
-          status: 'error',
-          message: localize('com_ui_download_error'),
-        });
-        return;
-      }
-      const link = document.createElement('a');
-      link.href = stream.data;
-      link.setAttribute('download', filename);
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(stream.data);
-    } catch (error) {
-      console.error('Error downloading file:', error);
-    }
-  };
-
-  props.onClick = handleDownload;
-  props.target = '_blank';
-
-  return (
-    <a
-      href={filepath.startsWith('files/') ? `/api/${filepath}` : `/api/files/${filepath}`}
-      {...props}
-    >
-      {children}
-    </a>
-  );
-});
-
-export const p = memo(({ children }: { children: React.ReactNode }) => {
+export const p: React.ElementType = memo(({ children }: { children: React.ReactNode }) => {
   return <p className="mb-2 whitespace-pre-wrap">{children}</p>;
 });
 
@@ -115,6 +121,7 @@ type TContentProps = {
 
 const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentProps) => {
   const LaTeXParsing = useRecoilValue<boolean>(store.LaTeXParsing);
+  const codeArtifacts = useRecoilValue<boolean>(store.codeArtifacts);
 
   const isInitializing = content === '';
 
@@ -124,7 +131,7 @@ const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentPr
     currentContent = LaTeXParsing ? preprocessLaTeX(currentContent) : currentContent;
   }
 
-  const rehypePlugins: PluggableList = [
+  const rehypePlugins = [
     [rehypeKatex, { output: 'mathml' }],
     [
       rehypeHighlight,
@@ -146,16 +153,29 @@ const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentPr
     );
   }
 
+  const remarkPlugins: Pluggable[] = codeArtifacts
+    ? [
+      supersub,
+      remarkGfm,
+      [remarkMath, { singleDollarTextMath: true }],
+      remarkDirective,
+      artifactPlugin,
+    ]
+    : [supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]];
+
   return (
     <ReactMarkdown
-      remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
+      /** @ts-ignore */
+      remarkPlugins={remarkPlugins}
+      /* @ts-ignore */
       rehypePlugins={rehypePlugins}
-      linkTarget="_new"
+      // linkTarget="_new"
       components={
         {
           code,
           a,
           p,
+          artifact: Artifact,
         } as {
           [nodeType: string]: React.ElementType;
         }

client/src/components/Chat/Messages/Content/MarkdownLite.tsx

@@ -26,7 +26,7 @@ const MarkdownLite = memo(({ content = '' }: { content?: string }) => {
     <ReactMarkdown
       remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]]}
       rehypePlugins={rehypePlugins}
-      linkTarget="_new"
+      // linkTarget="_new"
       components={
         {
           code,

client/src/components/Chat/Presentation.tsx

@@ -6,6 +6,7 @@ import type { ExtendedFile } from '~/common';
 import { useDragHelpers, useSetFilesToDelete } from '~/hooks';
 import DragDropOverlay from './Input/Files/DragDropOverlay';
 import { useDeleteFilesMutation } from '~/data-provider';
+import Artifacts from '~/components/Artifacts/Artifacts';
 import { SidePanel } from '~/components/SidePanel';
 import store from '~/store';
 
@@ -21,7 +22,11 @@ export default function Presentation({
   useSidePanel?: boolean;
 }) {
   const { data: startupConfig } = useGetStartupConfig();
+  const artifacts = useRecoilValue(store.artifactsState);
+  const codeArtifacts = useRecoilValue(store.codeArtifacts);
   const hideSidePanel = useRecoilValue(store.hideSidePanel);
+  const artifactsVisible = useRecoilValue(store.artifactsVisible);
+
   const interfaceConfig = useMemo(
     () => startupConfig?.interface ?? defaultInterface,
     [startupConfig],
@@ -44,12 +49,15 @@ export default function Presentation({
     const filesToDelete = localStorage.getItem(LocalStorageKeys.FILES_TO_DELETE);
     const map = JSON.parse(filesToDelete ?? '{}') as Record<string, ExtendedFile>;
     const files = Object.values(map)
-      .filter((file) => file.filepath && file.source && !file.embedded && file.temp_file_id)
+      .filter(
+        (file) =>
+          file.filepath != null && file.source && !(file.embedded ?? false) && file.temp_file_id,
+      )
       .map((file) => ({
         file_id: file.file_id,
         filepath: file.filepath as string,
         source: file.source as FileSources,
-        embedded: !!file.embedded,
+        embedded: !!(file.embedded ?? false),
       }));
 
     if (files.length === 0) {
@@ -89,6 +97,13 @@ export default function Presentation({
           defaultLayout={defaultLayout}
           defaultCollapsed={defaultCollapsed}
           fullPanelCollapse={fullCollapse}
+          artifacts={
+            artifactsVisible === true &&
+            codeArtifacts === true &&
+            Object.keys(artifacts ?? {}).length > 0 ? (
+                <Artifacts />
+              ) : null
+          }
         >
           <main className="flex h-full flex-col" role="main">
             {children}
@@ -102,7 +117,7 @@ export default function Presentation({
   return (
     <div ref={drop} className="relative flex w-full grow overflow-hidden bg-white dark:bg-gray-800">
       {layout()}
-      {panel && panel}
+      {panel != null && panel}
     </div>
   );
 }

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>
   );

client/src/components/SidePanel/SidePanel.tsx

@@ -23,17 +23,37 @@ interface SidePanelProps {
   defaultCollapsed?: boolean;
   navCollapsedSize?: number;
   fullPanelCollapse?: boolean;
+  artifacts?: React.ReactNode;
   children: React.ReactNode;
 }
 
 const defaultMinSize = 20;
 const defaultInterface = getConfigDefaults().interface;
 
+const normalizeLayout = (layout: number[]) => {
+  const sum = layout.reduce((acc, size) => acc + size, 0);
+  if (Math.abs(sum - 100) < 0.01) {
+    return layout.map((size) => Number(size.toFixed(2)));
+  }
+
+  const factor = 100 / sum;
+  const normalizedLayout = layout.map((size) => Number((size * factor).toFixed(2)));
+
+  const adjustedSum = normalizedLayout.reduce(
+    (acc, size, index) => (index === layout.length - 1 ? acc : acc + size),
+    0,
+  );
+  normalizedLayout[normalizedLayout.length - 1] = Number((100 - adjustedSum).toFixed(2));
+
+  return normalizedLayout;
+};
+
 const SidePanel = ({
   defaultLayout = [97, 3],
   defaultCollapsed = false,
   fullPanelCollapse = false,
   navCollapsedSize = 3,
+  artifacts,
   children,
 }: SidePanelProps) => {
   const localize = useLocalize();
@@ -64,11 +84,11 @@ const SidePanel = ({
 
   const assistants = useMemo(() => endpointsConfig?.[endpoint ?? ''], [endpoint, endpointsConfig]);
   const userProvidesKey = useMemo(
-    () => !!endpointsConfig?.[endpoint ?? '']?.userProvide,
+    () => !!(endpointsConfig?.[endpoint ?? '']?.userProvide ?? false),
     [endpointsConfig, endpoint],
   );
   const keyProvided = useMemo(
-    () => (userProvidesKey ? !!keyExpiry.expiresAt : true),
+    () => (userProvidesKey ? !!(keyExpiry.expiresAt ?? '') : true),
     [keyExpiry.expiresAt, userProvidesKey],
   );
 
@@ -89,10 +109,26 @@ const SidePanel = ({
     interfaceConfig,
   });
 
+  const calculateLayout = useCallback(() => {
+    if (!artifacts) {
+      const navSize = defaultLayout.length === 2 ? defaultLayout[1] : defaultLayout[2];
+      return [100 - navSize, navSize];
+    } else {
+      const navSize = Math.max(minSize, navCollapsedSize);
+      const remainingSpace = 100 - navSize;
+      const newMainSize = Math.floor(remainingSpace / 2);
+      const artifactsSize = remainingSpace - newMainSize;
+      return [newMainSize, artifactsSize, navSize];
+    }
+  }, [artifacts, defaultLayout, minSize, navCollapsedSize]);
+
+  const currentLayout = useMemo(() => normalizeLayout(calculateLayout()), [calculateLayout]);
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const throttledSaveLayout = useCallback(
     throttle((sizes: number[]) => {
-      localStorage.setItem('react-resizable-panels:layout', JSON.stringify(sizes));
+      const normalizedSizes = normalizeLayout(sizes);
+      localStorage.setItem('react-resizable-panels:layout', JSON.stringify(normalizedSizes));
     }, 350),
     [],
   );
@@ -133,17 +169,37 @@ const SidePanel = ({
     }
   }, [isCollapsed, newUser, setNewUser, navCollapsedSize]);
 
+  const minSizeMain = useMemo(() => (artifacts != null ? 15 : 30), [artifacts]);
+
   return (
     <>
       <TooltipProvider delayDuration={0}>
         <ResizablePanelGroup
           direction="horizontal"
-          onLayout={(sizes: number[]) => throttledSaveLayout(sizes)}
+          onLayout={(sizes) => throttledSaveLayout(sizes)}
           className="transition-width relative h-full w-full flex-1 overflow-auto bg-white dark:bg-gray-800"
         >
-          <ResizablePanel defaultSize={defaultLayout[0]} minSize={30}>
+          <ResizablePanel
+            defaultSize={currentLayout[0]}
+            minSize={minSizeMain}
+            order={1}
+            id="messages-view"
+          >
             {children}
           </ResizablePanel>
+          {artifacts != null && (
+            <>
+              <ResizableHandleAlt withHandle className="ml-3 bg-border-medium dark:text-white" />
+              <ResizablePanel
+                defaultSize={currentLayout[1]}
+                minSize={minSizeMain}
+                order={2}
+                id="artifacts-panel"
+              >
+                {artifacts}
+              </ResizablePanel>
+            </>
+          )}
           <TooltipProvider delayDuration={400}>
             <Tooltip>
               <div
@@ -174,10 +230,11 @@ const SidePanel = ({
           <ResizablePanel
             tagName="nav"
             id="controls-nav"
+            order={artifacts != null ? 3 : 2}
             aria-label={localize('com_ui_controls')}
             role="region"
             collapsedSize={collapsedSize}
-            defaultSize={defaultLayout[1]}
+            defaultSize={currentLayout[currentLayout.length - 1]}
             collapsible={true}
             minSize={minSize}
             maxSize={40}

client/src/hooks/Artifacts/useArtifacts.ts

@@ -0,0 +1,126 @@
+import { useMemo, useState, useEffect, useRef } from 'react';
+import { Constants } from 'librechat-data-provider';
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
+import { useChatContext } from '~/Providers';
+import { getKey } from '~/utils/artifacts';
+import { getLatestText } from '~/utils';
+import store from '~/store';
+
+export default function useArtifacts() {
+  const [activeTab, setActiveTab] = useState('preview');
+  const { isSubmitting, latestMessage, conversation } = useChatContext();
+
+  const artifacts = useRecoilValue(store.artifactsState);
+  const resetArtifacts = useResetRecoilState(store.artifactsState);
+  const resetCurrentArtifactId = useResetRecoilState(store.currentArtifactId);
+  const [currentArtifactId, setCurrentArtifactId] = useRecoilState(store.currentArtifactId);
+
+  const orderedArtifactIds = useMemo(() => {
+    return Object.keys(artifacts ?? {}).sort(
+      (a, b) => (artifacts?.[a]?.lastUpdateTime ?? 0) - (artifacts?.[b]?.lastUpdateTime ?? 0),
+    );
+  }, [artifacts]);
+
+  const lastContentRef = useRef<string | null>(null);
+  const hasEnclosedArtifactRef = useRef<boolean>(false);
+  const hasAutoSwitchedToCodeRef = useRef<boolean>(false);
+  const lastRunMessageIdRef = useRef<string | null>(null);
+  const prevConversationIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const resetState = () => {
+      resetArtifacts();
+      resetCurrentArtifactId();
+      prevConversationIdRef.current = conversation?.conversationId ?? null;
+      lastRunMessageIdRef.current = null;
+      lastContentRef.current = null;
+      hasEnclosedArtifactRef.current = false;
+    };
+    if (
+      conversation &&
+      conversation.conversationId !== prevConversationIdRef.current &&
+      prevConversationIdRef.current != null
+    ) {
+      resetState();
+    } else if (conversation && conversation.conversationId === Constants.NEW_CONVO) {
+      resetState();
+    }
+    prevConversationIdRef.current = conversation?.conversationId ?? null;
+  }, [conversation, resetArtifacts, resetCurrentArtifactId]);
+
+  useEffect(() => {
+    if (orderedArtifactIds.length > 0) {
+      const latestArtifactId = orderedArtifactIds[orderedArtifactIds.length - 1];
+      setCurrentArtifactId(latestArtifactId);
+    }
+  }, [setCurrentArtifactId, orderedArtifactIds]);
+
+  useEffect(() => {
+    if (isSubmitting && orderedArtifactIds.length > 0 && latestMessage) {
+      const latestArtifactId = orderedArtifactIds[orderedArtifactIds.length - 1];
+      const latestArtifact = artifacts?.[latestArtifactId];
+
+      if (latestArtifact?.content !== lastContentRef.current) {
+        setCurrentArtifactId(latestArtifactId);
+        lastContentRef.current = latestArtifact?.content ?? null;
+
+        const latestMessageText = getLatestText(latestMessage);
+        const hasEnclosedArtifact = /:::artifact[\s\S]*?(```|:::)\s*$/.test(
+          latestMessageText.trim(),
+        );
+
+        if (hasEnclosedArtifact && !hasEnclosedArtifactRef.current) {
+          setActiveTab('preview');
+          hasEnclosedArtifactRef.current = true;
+          hasAutoSwitchedToCodeRef.current = false;
+        } else if (!hasEnclosedArtifactRef.current && !hasAutoSwitchedToCodeRef.current) {
+          const artifactStartContent = latestArtifact?.content?.slice(0, 50) ?? '';
+          if (artifactStartContent.length > 0 && latestMessageText.includes(artifactStartContent)) {
+            setActiveTab('code');
+            hasAutoSwitchedToCodeRef.current = true;
+          }
+        }
+      }
+    }
+  }, [setCurrentArtifactId, isSubmitting, orderedArtifactIds, artifacts, latestMessage]);
+
+  useEffect(() => {
+    if (latestMessage?.messageId !== lastRunMessageIdRef.current) {
+      lastRunMessageIdRef.current = latestMessage?.messageId ?? null;
+      hasEnclosedArtifactRef.current = false;
+      hasAutoSwitchedToCodeRef.current = false;
+    }
+  }, [latestMessage]);
+
+  const currentArtifact = currentArtifactId != null ? artifacts?.[currentArtifactId] : null;
+
+  const currentIndex = orderedArtifactIds.indexOf(currentArtifactId ?? '');
+  const cycleArtifact = (direction: 'next' | 'prev') => {
+    let newIndex: number;
+    if (direction === 'next') {
+      newIndex = (currentIndex + 1) % orderedArtifactIds.length;
+    } else {
+      newIndex = (currentIndex - 1 + orderedArtifactIds.length) % orderedArtifactIds.length;
+    }
+    setCurrentArtifactId(orderedArtifactIds[newIndex]);
+  };
+
+  const isMermaid = useMemo(() => {
+    if (currentArtifact?.type == null) {
+      return false;
+    }
+    const key = getKey(currentArtifact.type, currentArtifact.language);
+    return key.includes('mermaid');
+  }, [currentArtifact?.type, currentArtifact?.language]);
+
+  return {
+    activeTab,
+    isMermaid,
+    setActiveTab,
+    currentIndex,
+    isSubmitting,
+    cycleArtifact,
+    currentArtifact,
+    orderedArtifactIds,
+  };
+}

client/src/hooks/Artifacts/useAutoScroll.ts

@@ -0,0 +1,30 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useChatContext } from '~/Providers';
+
+export default function useAutoScroll() {
+  const { isSubmitting } = useChatContext();
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const scrollableRef = useRef<HTMLDivElement | null>(null);
+  const contentEndRef = useRef<HTMLDivElement | null>(null);
+
+  const scrollToBottom = useCallback(() => {
+    if (scrollableRef.current) {
+      scrollableRef.current.scrollTop = scrollableRef.current.scrollHeight;
+    }
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    if (scrollableRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
+      setShowScrollButton(scrollHeight - scrollTop - clientHeight > 100);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isSubmitting) {
+      scrollToBottom();
+    }
+  }, [isSubmitting, scrollToBottom]);
+
+  return { scrollableRef, contentEndRef, handleScroll, scrollToBottom, showScrollButton };
+}

client/src/hooks/Chat/useChatFunctions.ts

@@ -7,7 +7,7 @@ import {
   parseCompactConvo,
   isAssistantsEndpoint,
 } from 'librechat-data-provider';
-import { useSetRecoilState, useResetRecoilState } from 'recoil';
+import { useSetRecoilState, useResetRecoilState, useRecoilValue } from 'recoil';
 import type {
   TMessage,
   TSubmission,
@@ -19,6 +19,7 @@ import type { SetterOrUpdater } from 'recoil';
 import type { TAskFunction, ExtendedFile } from '~/common';
 import useSetFilesToDelete from '~/hooks/Files/useSetFilesToDelete';
 import useGetSender from '~/hooks/Conversations/useGetSender';
+import { getArtifactsMode } from '~/utils/artifacts';
 import { getEndpointField, logger } from '~/utils';
 import useUserKey from '~/hooks/Input/useUserKey';
 import store from '~/store';
@@ -47,6 +48,9 @@ export default function useChatFunctions({
   setSubmission: SetterOrUpdater<TSubmission | null>;
   setLatestMessage?: SetterOrUpdater<TMessage | null>;
 }) {
+  const codeArtifacts = useRecoilValue(store.codeArtifacts);
+  const includeShadcnui = useRecoilValue(store.includeShadcnui);
+  const customPromptMode = useRecoilValue(store.customPromptMode);
   const resetLatestMultiMessage = useResetRecoilState(store.latestMessageFamily(index + 1));
   const setShowStopButton = useSetRecoilState(store.showStopButtonByIndex(index));
   const setFilesToDelete = useSetFilesToDelete();
@@ -152,6 +156,7 @@ export default function useChatFunctions({
       key: getExpiry(),
       modelDisplayLabel,
       overrideUserMessageId,
+      artifacts: getArtifactsMode({ codeArtifacts, includeShadcnui, customPromptMode }),
     } as TEndpointOption;
     const responseSender = getSender({ model: conversation?.model, ...endpointOption });
 

client/src/localization/languages/Eng.ts

@@ -3,6 +3,17 @@
 // file deepcode ignore HardcodedNonCryptoSecret: No hardcoded secrets present in this file
 
 export default {
+  com_ui_artifacts: 'Artifacts',
+  com_ui_artifacts_toggle: 'Toggle Artifacts UI',
+  com_nav_info_code_artifacts:
+    'Enables the display of experimental code artifacts next to the chat',
+  com_ui_include_shadcnui: 'Include shadcn/ui components instructions',
+  com_nav_info_include_shadcnui:
+    'When enabled, instructions for using shadcn/ui components will be included. shadcn/ui is a collection of re-usable components built using Radix UI and Tailwind CSS. Note: these are lengthy instructions, you should only enable if informing the LLM of the correct imports and components is important to you. For more information about these components, visit: https://ui.shadcn.com/',
+  com_ui_custom_prompt_mode: 'Custom Prompt Mode',
+  com_nav_info_custom_prompt_mode:
+    'When enabled, the default artifacts system prompt will not be included. All artifact-generating instructions must be provided manually in this mode.',
+  com_ui_artifact_click: 'Click to open',
   com_a11y_start: 'The AI is replying.',
   com_a11y_end: 'The AI has finished their reply.',
   com_error_moderation:

client/src/mobile.css

@@ -312,3 +312,19 @@
 .chrome-scrollbar::-webkit-scrollbar-track {
   background-color: transparent;  /* Color of the tracking area */
 }
+
+.sp-preview-container {
+  @apply flex h-full w-full grow flex-col justify-center;
+}
+
+.sp-preview {
+  @apply flex h-full w-full grow flex-col justify-center;
+}
+
+.sp-preview-iframe {
+  @apply grow;
+}
+
+.sp-wrapper {
+  @apply flex h-full w-full grow flex-col justify-center;
+}

client/src/store/artifacts.ts

@@ -0,0 +1,48 @@
+import { atom } from 'recoil';
+import { logger } from '~/utils';
+import type { Artifact } from '~/common';
+
+export const artifactsState = atom<Record<string, Artifact | undefined> | null>({
+  key: 'artifactsState',
+  default: null,
+  effects: [
+    ({ onSet, node }) => {
+      onSet(async (newValue) => {
+        logger.log('artifacts', 'Recoil Effect: Setting artifactsState', {
+          key: node.key,
+          newValue,
+        });
+      });
+    },
+  ] as const,
+});
+
+export const currentArtifactId = atom<string | null>({
+  key: 'currentArtifactId',
+  default: null,
+  effects: [
+    ({ onSet, node }) => {
+      onSet(async (newValue) => {
+        logger.log('artifacts', 'Recoil Effect: Setting currentArtifactId', {
+          key: node.key,
+          newValue,
+        });
+      });
+    },
+  ] as const,
+});
+
+export const artifactsVisible = atom<boolean>({
+  key: 'artifactsVisible',
+  default: true,
+  effects: [
+    ({ onSet, node }) => {
+      onSet(async (newValue) => {
+        logger.log('artifacts', 'Recoil Effect: Setting artifactsVisible', {
+          key: node.key,
+          newValue,
+        });
+      });
+    },
+  ] as const,
+});

client/src/store/index.ts

@@ -1,3 +1,4 @@
+import * as artifacts from './artifacts';
 import conversation from './conversation';
 import conversations from './conversations';
 import families from './families';
@@ -13,6 +14,7 @@ import lang from './language';
 import settings from './settings';
 
 export default {
+  ...artifacts,
   ...families,
   ...conversation,
   ...conversations,

client/src/store/settings.ts

@@ -37,6 +37,9 @@ const localStorageAtoms = {
   // Beta features settings
   modularChat: atomWithLocalStorage('modularChat', true),
   LaTeXParsing: atomWithLocalStorage('LaTeXParsing', true),
+  codeArtifacts: atomWithLocalStorage('codeArtifacts', false),
+  includeShadcnui: atomWithLocalStorage('includeShadcnui', false),
+  customPromptMode: atomWithLocalStorage('customPromptMode', false),
 
   // Commands settings
   atCommand: atomWithLocalStorage('atCommand', true),

client/src/utils/artifacts.spec.ts

@@ -0,0 +1,94 @@
+import { preprocessCodeArtifacts } from './artifacts';
+
+describe('preprocessCodeArtifacts', () => {
+  test('should return non-string inputs unchanged', () => {
+    expect(preprocessCodeArtifacts(123 as unknown as string)).toBe('');
+    expect(preprocessCodeArtifacts(null as unknown as string)).toBe('');
+    expect(preprocessCodeArtifacts(undefined)).toBe('');
+    expect(preprocessCodeArtifacts({} as unknown as string)).toEqual('');
+  });
+
+  test('should remove <thinking> tags and their content', () => {
+    const input = '<thinking>This should be removed</thinking>Some content';
+    const expected = 'Some content';
+    expect(preprocessCodeArtifacts(input)).toBe(expected);
+  });
+
+  test('should remove unclosed <thinking> tags and their content', () => {
+    const input = '<thinking>This should be removed\nSome content';
+    const expected = '';
+    expect(preprocessCodeArtifacts(input)).toBe(expected);
+  });
+
+  test('should remove artifact headers up to and including empty code block', () => {
+    const input = ':::artifact{identifier="test"}\n```\n```\nSome content';
+    const expected = ':::artifact{identifier="test"}\n```\n```\nSome content';
+    expect(preprocessCodeArtifacts(input)).toBe(expected);
+  });
+
+  test('should keep artifact headers when followed by empty code block and content', () => {
+    const input = ':::artifact{identifier="test"}\n```\n```\nSome content';
+    const expected = ':::artifact{identifier="test"}\n```\n```\nSome content';
+    expect(preprocessCodeArtifacts(input)).toBe(expected);
+  });
+
+  test('should handle multiple artifact headers correctly', () => {
+    const input = ':::artifact{id="1"}\n```\n```\n:::artifact{id="2"}\n```\ncode\n```\nContent';
+    const expected = ':::artifact{id="1"}\n```\n```\n:::artifact{id="2"}\n```\ncode\n```\nContent';
+    expect(preprocessCodeArtifacts(input)).toBe(expected);
+  });
+
+  test('should handle complex input with multiple patterns', () => {
+    const input = `
+  <thinking>Remove this</thinking>
+  Some text
+  :::artifact{id="1"}
+  \`\`\`
+  \`\`\`
+  <thinking>And this</thinking>
+  :::artifact{id="2"}
+  \`\`\`
+  keep this code
+  \`\`\`
+  More text
+      `;
+    const expected = `
+  
+  Some text
+  :::artifact{id="1"}
+  \`\`\`
+  \`\`\`
+  
+  :::artifact{id="2"}
+  \`\`\`
+  keep this code
+  \`\`\`
+  More text
+      `;
+    expect(preprocessCodeArtifacts(input)).toBe(expected);
+  });
+
+  test('should remove artifact headers without code blocks', () => {
+    const input = ':::artifact{identifier="test"}\nSome content without code block';
+    const expected = '';
+    expect(preprocessCodeArtifacts(input)).toBe(expected);
+  });
+
+  test('should remove artifact headers up to incomplete code block', () => {
+    const input = ':::artifact{identifier="react-cal';
+    const expected = '';
+    expect(preprocessCodeArtifacts(input)).toBe(expected);
+  });
+
+  test('should keep artifact headers when any character follows code block', () => {
+    const input = ':::artifact{identifier="react-calculator"}\n```t';
+    const expected = ':::artifact{identifier="react-calculator"}\n```t';
+    expect(preprocessCodeArtifacts(input)).toBe(expected);
+  });
+
+  test('should keep artifact headers when whitespace follows code block', () => {
+    const input = ':::artifact{identifier="react-calculator"}\n``` ';
+    const expected = ':::artifact{identifier="react-calculator"}\n``` ';
+    expect(preprocessCodeArtifacts(input)).toBe(expected);
+  });
+});

client/src/utils/artifacts.ts

@@ -0,0 +1,237 @@
+import dedent from 'dedent';
+import { ArtifactModes } from 'librechat-data-provider';
+import type {
+  SandpackProviderProps,
+  SandpackPredefinedTemplate,
+} from '@codesandbox/sandpack-react';
+import * as shadcnComponents from '~/utils/shadcn';
+
+export const getArtifactsMode = ({
+  codeArtifacts,
+  includeShadcnui,
+  customPromptMode,
+}: {
+  codeArtifacts: boolean;
+  includeShadcnui: boolean;
+  customPromptMode: boolean;
+}): ArtifactModes | undefined => {
+  if (!codeArtifacts) {
+    return undefined;
+  } else if (customPromptMode) {
+    return ArtifactModes.CUSTOM;
+  } else if (includeShadcnui) {
+    return ArtifactModes.SHADCNUI;
+  }
+  return ArtifactModes.DEFAULT;
+};
+
+const artifactFilename = {
+  'application/vnd.mermaid': 'App.tsx',
+  'application/vnd.react': 'App.tsx',
+  'text/html': 'index.html',
+  'application/vnd.code-html': 'index.html',
+  default: 'index.html',
+  // 'css': 'css',
+  // 'javascript': 'js',
+  // 'typescript': 'ts',
+  // 'jsx': 'jsx',
+  // 'tsx': 'tsx',
+};
+
+const artifactTemplate: Record<
+  keyof typeof artifactFilename,
+  SandpackPredefinedTemplate | undefined
+> = {
+  'text/html': 'static',
+  'application/vnd.react': 'react-ts',
+  'application/vnd.mermaid': 'react-ts',
+  'application/vnd.code-html': 'static',
+  default: 'static',
+  // 'css': 'css',
+  // 'javascript': 'js',
+  // 'typescript': 'ts',
+  // 'jsx': 'jsx',
+  // 'tsx': 'tsx',
+};
+
+export function getFileExtension(language?: string): string {
+  switch (language) {
+    case 'application/vnd.react':
+      return 'tsx';
+    case 'application/vnd.mermaid':
+      return 'mermaid';
+    case 'text/html':
+      return 'html';
+    // case 'jsx':
+    //   return 'jsx';
+    // case 'tsx':
+    //   return 'tsx';
+    // case 'html':
+    //   return 'html';
+    // case 'css':
+    //   return 'css';
+    default:
+      return 'txt';
+  }
+}
+
+export function getKey(type: string, language?: string): string {
+  return `${type}${(language?.length ?? 0) > 0 ? `-${language}` : ''}`;
+}
+
+export function getArtifactFilename(type: string, language?: string): string {
+  const key = getKey(type, language);
+  return artifactFilename[key] ?? artifactFilename.default;
+}
+
+export function getTemplate(type: string, language?: string): SandpackPredefinedTemplate {
+  const key = getKey(type, language);
+  return artifactTemplate[key] ?? (artifactTemplate.default as SandpackPredefinedTemplate);
+}
+
+const standardDependencies = {
+  three: '^0.167.1',
+  'lucide-react': '^0.394.0',
+  'react-router-dom': '^6.11.2',
+  'class-variance-authority': '^0.6.0',
+  clsx: '^1.2.1',
+  'date-fns': '^3.3.1',
+  'tailwind-merge': '^1.9.1',
+  'tailwindcss-animate': '^1.0.5',
+  recharts: '2.12.7',
+  '@radix-ui/react-accordion': '^1.1.2',
+  '@radix-ui/react-alert-dialog': '^1.0.2',
+  '@radix-ui/react-aspect-ratio': '^1.1.0',
+  '@radix-ui/react-avatar': '^1.1.0',
+  '@radix-ui/react-checkbox': '^1.0.3',
+  '@radix-ui/react-collapsible': '^1.0.3',
+  '@radix-ui/react-dialog': '^1.0.2',
+  '@radix-ui/react-dropdown-menu': '^2.1.1',
+  '@radix-ui/react-hover-card': '^1.0.5',
+  '@radix-ui/react-label': '^2.0.0',
+  '@radix-ui/react-menubar': '^1.1.1',
+  '@radix-ui/react-navigation-menu': '^1.2.0',
+  '@radix-ui/react-popover': '^1.0.7',
+  '@radix-ui/react-progress': '^1.1.0',
+  '@radix-ui/react-radio-group': '^1.1.3',
+  '@radix-ui/react-select': '^2.0.0',
+  '@radix-ui/react-separator': '^1.0.3',
+  '@radix-ui/react-slider': '^1.1.1',
+  '@radix-ui/react-switch': '^1.0.3',
+  '@radix-ui/react-tabs': '^1.0.3',
+  '@radix-ui/react-toast': '^1.1.5',
+  '@radix-ui/react-tooltip': '^1.0.6',
+  '@radix-ui/react-slot': '^1.1.0',
+  '@radix-ui/react-toggle': '^1.1.0',
+  '@radix-ui/react-toggle-group': '^1.1.0',
+  'embla-carousel-react': '^8.2.0',
+  'react-day-picker': '^9.0.8',
+  vaul: '^0.9.1',
+};
+
+const mermaidDependencies = Object.assign(
+  {
+    mermaid: '^11.0.2',
+    'react-zoom-pan-pinch': '^3.6.1',
+  },
+  standardDependencies,
+);
+
+const dependenciesMap: Record<keyof typeof artifactFilename, object> = {
+  'application/vnd.mermaid': mermaidDependencies,
+  'application/vnd.react': standardDependencies,
+  'text/html': standardDependencies,
+  'application/vnd.code-html': standardDependencies,
+  default: standardDependencies,
+};
+
+export function getDependencies(type: string): Record<string, string> {
+  return dependenciesMap[type] ?? standardDependencies;
+}
+
+export function getProps(type: string): Partial<SandpackProviderProps> {
+  return {
+    customSetup: {
+      dependencies: getDependencies(type),
+    },
+  };
+}
+
+export const sharedOptions: SandpackProviderProps['options'] = {
+  externalResources: ['https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css'],
+};
+
+export const sharedFiles = {
+  '/lib/utils.ts': shadcnComponents.utils,
+  '/components/ui/accordion.tsx': shadcnComponents.accordian,
+  '/components/ui/alert-dialog.tsx': shadcnComponents.alertDialog,
+  '/components/ui/alert.tsx': shadcnComponents.alert,
+  '/components/ui/avatar.tsx': shadcnComponents.avatar,
+  '/components/ui/badge.tsx': shadcnComponents.badge,
+  '/components/ui/breadcrumb.tsx': shadcnComponents.breadcrumb,
+  '/components/ui/button.tsx': shadcnComponents.button,
+  '/components/ui/calendar.tsx': shadcnComponents.calendar,
+  '/components/ui/card.tsx': shadcnComponents.card,
+  '/components/ui/carousel.tsx': shadcnComponents.carousel,
+  '/components/ui/checkbox.tsx': shadcnComponents.checkbox,
+  '/components/ui/collapsible.tsx': shadcnComponents.collapsible,
+  '/components/ui/dialog.tsx': shadcnComponents.dialog,
+  '/components/ui/drawer.tsx': shadcnComponents.drawer,
+  '/components/ui/dropdown-menu.tsx': shadcnComponents.dropdownMenu,
+  '/components/ui/input.tsx': shadcnComponents.input,
+  '/components/ui/label.tsx': shadcnComponents.label,
+  '/components/ui/menubar.tsx': shadcnComponents.menuBar,
+  '/components/ui/navigation-menu.tsx': shadcnComponents.navigationMenu,
+  '/components/ui/pagination.tsx': shadcnComponents.pagination,
+  '/components/ui/popover.tsx': shadcnComponents.popover,
+  '/components/ui/progress.tsx': shadcnComponents.progress,
+  '/components/ui/radio-group.tsx': shadcnComponents.radioGroup,
+  '/components/ui/select.tsx': shadcnComponents.select,
+  '/components/ui/separator.tsx': shadcnComponents.separator,
+  '/components/ui/skeleton.tsx': shadcnComponents.skeleton,
+  '/components/ui/slider.tsx': shadcnComponents.slider,
+  '/components/ui/switch.tsx': shadcnComponents.switchComponent,
+  '/components/ui/table.tsx': shadcnComponents.table,
+  '/components/ui/tabs.tsx': shadcnComponents.tabs,
+  '/components/ui/textarea.tsx': shadcnComponents.textarea,
+  '/components/ui/toast.tsx': shadcnComponents.toast,
+  '/components/ui/toaster.tsx': shadcnComponents.toaster,
+  '/components/ui/toggle-group.tsx': shadcnComponents.toggleGroup,
+  '/components/ui/toggle.tsx': shadcnComponents.toggle,
+  '/components/ui/tooltip.tsx': shadcnComponents.tooltip,
+  '/components/ui/use-toast.tsx': shadcnComponents.useToast,
+  '/public/index.html': dedent`
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+      </head>
+      <body>
+        <div id="root"></div>
+      </body>
+    </html>
+  `,
+};
+
+export function preprocessCodeArtifacts(text?: string): string {
+  if (typeof text !== 'string') {
+    return '';
+  }
+
+  // Remove <thinking> tags and their content
+  text = text.replace(/<thinking>[\s\S]*?<\/thinking>|<thinking>[\s\S]*/g, '');
+
+  // Process artifact headers
+  const regex = /(^|\n)(:::artifact[\s\S]*?(?:```[\s\S]*?```|$))/g;
+  return text.replace(regex, (match, newline, artifactBlock) => {
+    if (artifactBlock.includes('```') === true) {
+      // Keep artifact headers with code blocks (empty or not)
+      return newline + artifactBlock;
+    }
+    // Remove artifact headers without code blocks, but keep the newline
+    return newline;
+  });
+}

client/src/utils/files.ts

@@ -27,6 +27,12 @@ const codeFile = {
   title: 'Code',
 };
 
+const artifact = {
+  paths: CodePaths,
+  fill: '#2D305C',
+  title: 'Code',
+};
+
 export const fileTypes = {
   /* Category matches */
   file: {
@@ -41,6 +47,7 @@ export const fileTypes = {
   csv: spreadsheet,
   pdf: textDocument,
   'text/x-': codeFile,
+  artifact: artifact,
 
   /* Exact matches */
   // 'application/json':,

client/src/utils/mermaid.ts

@@ -0,0 +1,235 @@
+import dedent from 'dedent';
+
+const mermaid = dedent(`import React, { useEffect, useRef, useState } from "react";
+import {
+  TransformWrapper,
+  TransformComponent,
+  ReactZoomPanPinchRef,
+} from "react-zoom-pan-pinch";
+import mermaid from "mermaid";
+import { ZoomIn, ZoomOut, RefreshCw } from "lucide-react";
+import { Button } from "/components/ui/button";
+
+interface MermaidDiagramProps {
+  content: string;
+}
+
+const MermaidDiagram: React.FC<MermaidDiagramProps> = ({ content }) => {
+  const mermaidRef = useRef<HTMLDivElement>(null);
+  const transformRef = useRef<ReactZoomPanPinchRef>(null);
+  const [isRendered, setIsRendered] = useState(false);
+
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: "base",
+      themeVariables: {
+        background: "#282C34",
+        primaryColor: "#333842",
+        secondaryColor: "#333842",
+        tertiaryColor: "#333842",
+        primaryTextColor: "#ABB2BF",
+        secondaryTextColor: "#ABB2BF",
+        lineColor: "#636D83",
+        fontSize: "16px",
+        nodeBorder: "#636D83",
+        mainBkg: '#282C34',
+        altBackground: '#282C34',
+        textColor: '#ABB2BF',
+        edgeLabelBackground: '#282C34',
+        clusterBkg: '#282C34',
+        clusterBorder: "#636D83",
+        labelBoxBkgColor: "#333842",
+        labelBoxBorderColor: "#636D83",
+        labelTextColor: "#ABB2BF",
+      },
+      flowchart: {
+        curve: "basis",
+        nodeSpacing: 50,
+        rankSpacing: 50,
+        diagramPadding: 8,
+        htmlLabels: true,
+        useMaxWidth: true,
+        defaultRenderer: "dagre-d3",
+        padding: 15,
+        wrappingWidth: 200,
+      },
+    });
+
+    const renderDiagram = async () => {
+      if (mermaidRef.current) {
+        try {
+          const { svg } = await mermaid.render("mermaid-diagram", content);
+          mermaidRef.current.innerHTML = svg;
+
+          const svgElement = mermaidRef.current.querySelector("svg");
+          if (svgElement) {
+            svgElement.style.width = "100%";
+            svgElement.style.height = "100%";
+
+            const pathElements = svgElement.querySelectorAll("path");
+            pathElements.forEach((path) => {
+              path.style.strokeWidth = "1.5px";
+            });
+
+            const rectElements = svgElement.querySelectorAll("rect");
+            rectElements.forEach((rect) => {
+              const parent = rect.parentElement;
+              if (parent && parent.classList.contains("node")) {
+                rect.style.stroke = "#636D83";
+                rect.style.strokeWidth = "1px";
+              } else {
+                rect.style.stroke = "none";
+              }
+            });
+          }
+          setIsRendered(true);
+        } catch (error) {
+          console.error("Mermaid rendering error:", error);
+          mermaidRef.current.innerHTML = "Error rendering diagram";
+        }
+      }
+    };
+
+    renderDiagram();
+  }, [content]);
+
+  const centerAndFitDiagram = () => {
+    if (transformRef.current && mermaidRef.current) {
+      const { centerView, zoomToElement } = transformRef.current;
+      zoomToElement(mermaidRef.current as HTMLElement);
+      centerView(1, 0);
+    }
+  };
+
+  useEffect(() => {
+    if (isRendered) {
+      centerAndFitDiagram();
+    }
+  }, [isRendered]);
+
+  const handlePanning = () => {
+    if (transformRef.current) {
+      const { state, instance } = transformRef.current;
+      if (!state) {
+        return;
+      }
+      const { scale, positionX, positionY } = state;
+      const { wrapperComponent, contentComponent } = instance;
+
+      if (wrapperComponent && contentComponent) {
+        const wrapperRect = wrapperComponent.getBoundingClientRect();
+        const contentRect = contentComponent.getBoundingClientRect();
+        const maxX = wrapperRect.width - contentRect.width * scale;
+        const maxY = wrapperRect.height - contentRect.height * scale;
+
+        let newX = positionX;
+        let newY = positionY;
+
+        if (newX > 0) {
+          newX = 0;
+        }
+        if (newY > 0) {
+          newY = 0;
+        }
+        if (newX < maxX) {
+          newX = maxX;
+        }
+        if (newY < maxY) {
+          newY = maxY;
+        }
+
+        if (newX !== positionX || newY !== positionY) {
+          instance.setTransformState(scale, newX, newY);
+        }
+      }
+    }
+  };
+
+  return (
+    <div className="relative h-screen w-screen cursor-move bg-[#282C34] p-5">
+      <TransformWrapper
+        ref={transformRef}
+        initialScale={1}
+        minScale={0.1}
+        maxScale={10}
+        limitToBounds={false}
+        centerOnInit={true}
+        initialPositionY={0}
+        wheel={{ step: 0.1 }}
+        panning={{ velocityDisabled: true }}
+        alignmentAnimation={{ disabled: true }}
+        onPanning={handlePanning}
+      >
+        {({ zoomIn, zoomOut }) => (
+          <>
+            <TransformComponent
+              wrapperStyle={{
+                width: "100%",
+                height: "100%",
+                overflow: "hidden",
+              }}
+            >
+              <div
+                ref={mermaidRef}
+                style={{
+                  width: "auto",
+                  height: "auto",
+                  minWidth: "100%",
+                  minHeight: "100%",
+                }}
+              />
+            </TransformComponent>
+            <div className="absolute bottom-2 right-2 flex space-x-2">
+              <Button onClick={() => zoomIn(0.1)} variant="outline" size="icon">
+                <ZoomIn className="h-4 w-4" />
+              </Button>
+              <Button
+                onClick={() => zoomOut(0.1)}
+                variant="outline"
+                size="icon"
+              >
+                <ZoomOut className="h-4 w-4" />
+              </Button>
+              <Button
+                onClick={centerAndFitDiagram}
+                variant="outline"
+                size="icon"
+              >
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            </div>
+          </>
+        )}
+      </TransformWrapper>
+    </div>
+  );
+};
+
+export default MermaidDiagram;`);
+
+const wrapMermaidDiagram = (content: string) => {
+  return dedent(`import React from 'react';
+import MermaidDiagram from '/components/ui/MermaidDiagram';
+
+export default App = () => (
+  <MermaidDiagram content={\`${content}\`} />
+);
+`);
+};
+
+export const getMermaidFiles = (content: string) => {
+  return {
+    'App.tsx': wrapMermaidDiagram(content),
+    'index.tsx': dedent(`import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./styles.css";
+
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+root.render(<App />);
+;`),
+    '/components/ui/MermaidDiagram.tsx': mermaid,
+  };
+};

packages/data-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "librechat-data-provider",
-  "version": "0.7.417",
+  "version": "0.7.418",
   "description": "data services for librechat apps",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

packages/data-provider/src/artifacts.ts

@@ -0,0 +1,5 @@
+export enum ArtifactModes {
+  DEFAULT = 'default',
+  SHADCNUI = 'shadcnui',
+  CUSTOM = 'custom',
+}

packages/data-provider/src/index.ts

@@ -2,6 +2,8 @@
 export * from './azure';
 export * from './config';
 export * from './file-config';
+/* artifacts  */
+export * from './artifacts';
 /* schema helpers  */
 export * from './parsers';
 /* custom/dynamic configurations  */

packages/data-provider/src/schemas.ts

@@ -398,6 +398,8 @@ export const tConversationSchema = z.object({
   max_tokens: coerceNumber.optional(),
   /* Anthropic */
   promptCache: z.boolean().optional(),
+  /* artifacts */
+  artifacts: z.string().optional(),
   /* vision */
   resendFiles: z.boolean().optional(),
   imageDetail: eImageDetailSchema.optional(),
@@ -508,6 +510,7 @@ export const openAISchema = tConversationSchema
     presence_penalty: true,
     frequency_penalty: true,
     resendFiles: true,
+    artifacts: true,
     imageDetail: true,
     stop: true,
     iconURL: true,
@@ -569,6 +572,7 @@ export const googleSchema = tConversationSchema
     examples: true,
     temperature: true,
     maxOutputTokens: true,
+    artifacts: true,
     topP: true,
     topK: true,
     iconURL: true,
@@ -654,6 +658,7 @@ export const anthropicSchema = tConversationSchema
     topK: true,
     resendFiles: true,
     promptCache: true,
+    artifacts: true,
     iconURL: true,
     greeting: true,
     spec: true,
@@ -719,6 +724,7 @@ export const gptPluginsSchema = tConversationSchema
     chatGptLabel: true,
     promptPrefix: true,
     temperature: true,
+    artifacts: true,
     top_p: true,
     presence_penalty: true,
     frequency_penalty: true,
@@ -796,6 +802,7 @@ export const assistantSchema = tConversationSchema
     model: true,
     assistant_id: true,
     instructions: true,
+    artifacts: true,
     promptPrefix: true,
     iconURL: true,
     greeting: true,
@@ -827,6 +834,7 @@ export const compactAssistantSchema = tConversationSchema
     assistant_id: true,
     instructions: true,
     promptPrefix: true,
+    artifacts: true,
     iconURL: true,
     greeting: true,
     spec: true,
@@ -845,6 +853,7 @@ export const compactOpenAISchema = tConversationSchema
     presence_penalty: true,
     frequency_penalty: true,
     resendFiles: true,
+    artifacts: true,
     imageDetail: true,
     stop: true,
     iconURL: true,
@@ -886,6 +895,7 @@ export const compactGoogleSchema = tConversationSchema
     examples: true,
     temperature: true,
     maxOutputTokens: true,
+    artifacts: true,
     topP: true,
     topK: true,
     iconURL: true,
@@ -923,6 +933,7 @@ export const compactAnthropicSchema = tConversationSchema
     topK: true,
     resendFiles: true,
     promptCache: true,
+    artifacts: true,
     iconURL: true,
     greeting: true,
     spec: true,

packages/data-provider/src/types.ts

@@ -51,6 +51,7 @@ export type TPayload = Partial<TMessage> &
   };
 
 export type TSubmission = {
+  artifacts?: string;
   plugin?: TResPlugin;
   plugins?: TResPlugin[];
   userMessage: TMessage;