From 8c1db607e598d2c53c6085c2f2b5b0e8d8d25a5f Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 23 Aug 2024 23:20:20 -0400
Subject: [PATCH] refactor: nullify artifact state and reset on empty
 conversation

---
 client/src/components/Artifacts/Artifact.tsx  |  5 ++-
 .../components/Artifacts/ArtifactButton.tsx   | 34 +++++++++++--------
 client/src/components/Artifacts/Artifacts.tsx | 30 ++++++++++------
 client/src/components/Chat/Presentation.tsx   |  2 +-
 client/src/store/artifacts.ts                 |  4 +--
 5 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/client/src/components/Artifacts/Artifact.tsx b/client/src/components/Artifacts/Artifact.tsx
index 65d508960a..ac778b228c 100644
--- a/client/src/components/Artifacts/Artifact.tsx
+++ b/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;
         }
 
diff --git a/client/src/components/Artifacts/ArtifactButton.tsx b/client/src/components/Artifacts/ArtifactButton.tsx
index 7c3a143167..f20352fef8 100644
--- a/client/src/components/Artifacts/ArtifactButton.tsx
+++ b/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 />
+    </>
   );
 };
 
diff --git a/client/src/components/Artifacts/Artifacts.tsx b/client/src/components/Artifacts/Artifacts.tsx
index f63e3cc6f2..0f67a7db33 100644
--- a/client/src/components/Artifacts/Artifacts.tsx
+++ b/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 (
diff --git a/client/src/components/Chat/Presentation.tsx b/client/src/components/Chat/Presentation.tsx
index e135f0de3e..632841d1de 100644
--- a/client/src/components/Chat/Presentation.tsx
+++ b/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">
diff --git a/client/src/store/artifacts.ts b/client/src/store/artifacts.ts
index 615baf2064..1e1bff61f2 100644
--- a/client/src/store/artifacts.ts
+++ b/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) => {