🪄 feat: Code Artifacts (#3798)

* feat: Add CodeArtifacts component to Beta settings tab

* chore: Update npm dependency to @codesandbox/sandpack-react@2.18.2

* WIP: artifacts first pass

* WIP first pass remark-directive

* chore: revert markdown to original component + new artifacts rendering

* refactor: first pass rewrite

* refactor: add throttling

* first pass styling

* style: Add Radix Tabs, more styling changes

* feat: second pass

* style: code styling

* fix: package markdown fixes

* feat: Add useEffect hook to Artifacts component for visibility control, slide in animation

* fix: only set artifact if there is content

* refactor: typing and make latest artifact active if the number of artifacts changed

* feat: artifacts + shadcnui

* feat: Add Copy Code button to Artifacts component

* feat: first pass streaming updates

* refactor: optimize ordering of artifacts in Artifacts component

* refactor: optimize ordering of artifacts and add latest artifact activation in Artifacts component

* refactor: add order prop to Artifact

* feat: update to latest, use update time for ordering

* refactor: optimize ordering of artifacts and activate latest artifact in Artifacts component

* wip: remove thinking text and artifact formatting if empty

* refactor: optimize Markdown rendering and add support for code artifacts

* feat: global state for current artifact Id and set on artifact preview click

* refactor: Rename CodePreview component to ArtifactButton

* refactor: apply growth to artifact frame so artifact preview can take full space

* refactor: remove artifactIdsState

* refactor: nullify artifact state and reset on empty conversation

* feat: reset artifact state on conversation change

* feat: artifacts system prompt in backend

* refactor: update UI artifact toggle label to match localization key

* style: remove ArtifactButton inline-block styling

* feat: memoize ArtifactPreview, add html support

* refactor: abstract out components

* chore: bump react-resizable-panel

* refactor: resizable panel order props

* fix: side panel resizing crashes

* style: temporarily remove scrolling, add better styling

* chore: remove thinking for now

* chore: preprocess artifacts for now

* feat: Add auto scrolling to CodeMarkdown (artifacts)

* feat: autoswitch to preview

* feat: auto switch to code, adjust prompt, remove unused code

* feat: refresh button

* feat: open/close artifacts

* wip: mermaid

* refactor: w-fit Artifact button

* chore: organize code

* feat: first pass mermaid

* refactor: improve panning logic in MermaidDiagram component

* feat: center/zoom on first render

* refactor: add centering with reset button

* style: mermaid styling

* refactor: add back MermaidDiagram

* fix: static/html template

* fix: mermaid

* add examples to artifacts prompt

* refactor: fix CodeBar plugin prop logic

* refactor: remove unnecessary mention of artifacts when not requested

* fix: remove preprocessCodeArtifacts function and fix imports

* feat: improve artifacts guidelines and remove unnecessary mentions

* refactor: improve artifacts guidelines and remove unnecessary mentions

* chore: uninstall unused packages

* chore: bump vite

* chore: update three dependency to version 0.167.1

* refactor: move beta settings, add additional artifacts toggles

* feat: artifacts mode toggles

* refactor: adjust prompt

* feat: shadcnui instructions

* feat: code artifacts custom prompt mode

* chore: Update artifacts UI labels and instructions localizations

* refactor: Remove unused code in Markdown component

client/src/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 });