refactor: nullify artifact state and reset on empty conversation

client/src/components/Artifacts/Artifact.tsx

@@ -80,7 +80,10 @@ export function Artifact({
       };
 
       setArtifacts((prevArtifacts) => {
-        if (prevArtifacts[artifactKey] != null && prevArtifacts[artifactKey].content === content) {
+        if (
+          prevArtifacts?.[artifactKey] != null &&
+          prevArtifacts[artifactKey].content === content
+        ) {
           return prevArtifacts;
         }
 

client/src/components/Artifacts/ArtifactButton.tsx

@@ -14,25 +14,29 @@ const ArtifactButton = ({ artifact }: { artifact: Artifact | null }) => {
   const fileType = getFileType('artifact');
 
   return (
-    <button
-      type="button"
-      onClick={() => setArtifactId(artifact.id)}
-      className="group relative inline-block rounded-xl text-sm text-text-primary"
-    >
-      <div className="relative overflow-hidden rounded-xl border border-border-medium transition-all duration-300 hover:border-border-xheavy hover:shadow-lg">
-        <div className="w-60 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 className="group relative inline-block rounded-xl text-sm text-text-primary">
+        <button
+          type="button"
+          onClick={() => setArtifactId(artifact.id)}
+          className="relative overflow-hidden rounded-xl border border-border-medium transition-all duration-300 hover:border-border-xheavy hover:shadow-lg"
+        >
+          <div className="w-60 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>
-        </div>
+        </button>
       </div>
-    </button>
+      {/* new line*/}
+      <br />
+    </>
   );
 };
 

client/src/components/Artifacts/Artifacts.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo, useState, useEffect, useRef } from 'react';
+import { useRecoilState } from 'recoil';
 import * as Tabs from '@radix-ui/react-tabs';
 import { Sandpack } from '@codesandbox/sandpack-react';
-import { useRecoilValue, useRecoilState } from 'recoil';
-import { removeNullishValues } from 'librechat-data-provider';
+import { removeNullishValues, Constants } from 'librechat-data-provider';
 import { SandpackPreview, SandpackProvider } from '@codesandbox/sandpack-react/unstyled';
 import type { Artifact } from '~/common';
 import {
@@ -55,14 +55,14 @@ export function ArtifactPreview({
       options={{ ...sharedOptions }}
       {...sharedProps}
     >
-      <SandpackPreview showOpenInCodeSandbox={false} showRefreshButton={false} />
+      <SandpackPreview showOpenInCodeSandbox={false} showRefreshButton={false} tabIndex={0} />
     </SandpackProvider>
   );
 }
 
 export default function Artifacts() {
   const { isSubmitting, latestMessage, conversation } = useChatContext();
-  const conversationId = useMemo(() => conversation?.conversationId ?? null, [conversation]);
+  const conversationId = useMemo(() => conversation?.conversationId ?? '', [conversation]);
 
   const [isVisible, setIsVisible] = useState(false);
   const [activeTab, setActiveTab] = useState('preview');
@@ -70,8 +70,8 @@ export default function Artifacts() {
   const [currentArtifactId, setCurrentArtifactId] = useRecoilState(store.currentArtifactId);
 
   const orderedArtifactIds = useMemo(() => {
-    return Object.keys(artifacts).sort(
-      (a, b) => artifacts[a].lastUpdateTime - artifacts[b].lastUpdateTime,
+    return Object.keys(artifacts ?? {}).sort(
+      (a, b) => (artifacts?.[a]?.lastUpdateTime ?? 0) - (artifacts?.[b]?.lastUpdateTime ?? 0),
     );
   }, [artifacts]);
 
@@ -82,6 +82,14 @@ export default function Artifacts() {
     setIsVisible(true);
   }, []);
 
+  useEffect(() => {
+    if (!conversationId || conversationId === '' || conversationId === Constants.NEW_CONVO) {
+      setArtifacts(null);
+      setCurrentArtifactId(null);
+      return;
+    }
+  }, [conversationId, setArtifacts, setCurrentArtifactId]);
+
   useEffect(() => {
     if (orderedArtifactIds.length > 0) {
       const latestArtifactId = orderedArtifactIds[orderedArtifactIds.length - 1];
@@ -92,12 +100,12 @@ export default function Artifacts() {
   useEffect(() => {
     if (isSubmitting && orderedArtifactIds.length > 0) {
       const latestArtifactId = orderedArtifactIds[orderedArtifactIds.length - 1];
-      const latestArtifact = artifacts[latestArtifactId];
+      const latestArtifact = artifacts?.[latestArtifactId];
 
-      if (latestArtifact.content !== lastContentRef.current) {
+      if (latestArtifact?.content !== lastContentRef.current) {
         setCurrentArtifactId(latestArtifactId);
         setActiveTab('code');
-        lastContentRef.current = latestArtifact.content ?? null;
+        lastContentRef.current = latestArtifact?.content ?? null;
       }
     }
   }, [setCurrentArtifactId, isSubmitting, orderedArtifactIds, artifacts]);
@@ -108,7 +116,7 @@ export default function Artifacts() {
     }
   }, [latestMessage]);
 
-  const currentArtifact = currentArtifactId != null ? artifacts[currentArtifactId] : null;
+  const currentArtifact = currentArtifactId != null ? artifacts?.[currentArtifactId] : null;
 
   const currentIndex = orderedArtifactIds.indexOf(currentArtifactId ?? '');
   const cycleArtifact = (direction: 'next' | 'prev') => {
@@ -122,7 +130,7 @@ export default function Artifacts() {
   };
 
   if (!currentArtifact) {
-    return <div>No artifacts available.</div>;
+    return null;
   }
 
   return (

client/src/components/Chat/Presentation.tsx

@@ -96,7 +96,7 @@ export default function Presentation({
           defaultCollapsed={defaultCollapsed}
           fullPanelCollapse={fullCollapse}
           artifacts={
-            codeArtifacts != null && Object.keys(artifacts).length > 0 ? <Artifacts /> : null
+            codeArtifacts != null && Object.keys(artifacts ?? {}).length > 0 ? <Artifacts /> : null
           }
         >
           <main className="flex h-full flex-col" role="main">

client/src/store/artifacts.ts

@@ -2,9 +2,9 @@ import { atom } from 'recoil';
 import { logger } from '~/utils';
 import type { Artifact } from '~/common';
 
-export const artifactsState = atom<Record<string, Artifact>>({
+export const artifactsState = atom<Record<string, Artifact | undefined> | null>({
   key: 'artifactsState',
-  default: {},
+  default: null,
   effects: [
     ({ onSet, node }) => {
       onSet(async (newValue) => {