From bedc91adcd4987352f21b07e8636c94fef130dd8 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 23 Aug 2024 22:32:34 -0400
Subject: [PATCH] refactor: remove artifactIdsState

---
 client/src/components/Artifacts/Artifact.tsx  | 24 ++-----------------
 client/src/components/Artifacts/Artifacts.tsx |  5 ++--
 client/src/components/Chat/Presentation.tsx   |  6 +++--
 client/src/store/artifacts.ts                 | 15 ------------
 4 files changed, 9 insertions(+), 41 deletions(-)

diff --git a/client/src/components/Artifacts/Artifact.tsx b/client/src/components/Artifacts/Artifact.tsx
index ed4da238e8..65d508960a 100644
--- a/client/src/components/Artifacts/Artifact.tsx
+++ b/client/src/components/Artifacts/Artifact.tsx
@@ -4,7 +4,7 @@ import { visit } from 'unist-util-visit';
 import { useSetRecoilState, useRecoilValue } from 'recoil';
 import type { Pluggable } from 'unified';
 import type { Artifact } from '~/common';
-import { artifactsState, artifactIdsState } from '~/store/artifacts';
+import { artifactsState } from '~/store/artifacts';
 import ArtifactButton from './ArtifactButton';
 import { logger } from '~/utils';
 
@@ -45,7 +45,6 @@ export function Artifact({
   node: unknown;
 }) {
   const setArtifacts = useSetRecoilState(artifactsState);
-  const setArtifactIds = useSetRecoilState(artifactIdsState);
   const currentArtifacts = useRecoilValue(artifactsState);
   const [artifact, setArtifact] = useState<Artifact | null>(null);
 
@@ -91,28 +90,9 @@ export function Artifact({
         };
       });
 
-      setArtifactIds((prevIds) => {
-        if (!prevIds.includes(artifactKey)) {
-          const newIds = [...prevIds, artifactKey];
-          const definedIds = newIds.filter((id) => currentArtifacts[id] != null);
-          return definedIds.sort(
-            (a, b) => currentArtifacts[b].lastUpdateTime - currentArtifacts[a].lastUpdateTime,
-          );
-        }
-        return prevIds;
-      });
-
       setArtifact(currentArtifact);
     });
-  }, [
-    props.children,
-    props.title,
-    props.type,
-    props.identifier,
-    setArtifacts,
-    setArtifactIds,
-    currentArtifacts,
-  ]);
+  }, [props.type, props.title, setArtifacts, props.children, props.identifier]);
 
   useEffect(() => {
     updateArtifact();
diff --git a/client/src/components/Artifacts/Artifacts.tsx b/client/src/components/Artifacts/Artifacts.tsx
index 1f4253be82..f63e3cc6f2 100644
--- a/client/src/components/Artifacts/Artifacts.tsx
+++ b/client/src/components/Artifacts/Artifacts.tsx
@@ -61,11 +61,12 @@ export function ArtifactPreview({
 }
 
 export default function Artifacts() {
-  const { isSubmitting, latestMessage } = useChatContext();
+  const { isSubmitting, latestMessage, conversation } = useChatContext();
+  const conversationId = useMemo(() => conversation?.conversationId ?? null, [conversation]);
 
   const [isVisible, setIsVisible] = useState(false);
   const [activeTab, setActiveTab] = useState('preview');
-  const artifacts = useRecoilValue(store.artifactsState);
+  const [artifacts, setArtifacts] = useRecoilState(store.artifactsState);
   const [currentArtifactId, setCurrentArtifactId] = useRecoilState(store.currentArtifactId);
 
   const orderedArtifactIds = useMemo(() => {
diff --git a/client/src/components/Chat/Presentation.tsx b/client/src/components/Chat/Presentation.tsx
index 513b27fa21..e135f0de3e 100644
--- a/client/src/components/Chat/Presentation.tsx
+++ b/client/src/components/Chat/Presentation.tsx
@@ -22,9 +22,9 @@ 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 codeBlockIds = useRecoilValue(store.artifactIdsState);
   const interfaceConfig = useMemo(
     () => startupConfig?.interface ?? defaultInterface,
     [startupConfig],
@@ -95,7 +95,9 @@ export default function Presentation({
           defaultLayout={defaultLayout}
           defaultCollapsed={defaultCollapsed}
           fullPanelCollapse={fullCollapse}
-          artifacts={codeArtifacts && codeBlockIds.length > 0 ? <Artifacts /> : null}
+          artifacts={
+            codeArtifacts != null && Object.keys(artifacts).length > 0 ? <Artifacts /> : null
+          }
         >
           <main className="flex h-full flex-col" role="main">
             {children}
diff --git a/client/src/store/artifacts.ts b/client/src/store/artifacts.ts
index f891545277..615baf2064 100644
--- a/client/src/store/artifacts.ts
+++ b/client/src/store/artifacts.ts
@@ -17,21 +17,6 @@ export const artifactsState = atom<Record<string, Artifact>>({
   ] as const,
 });
 
-export const artifactIdsState = atom<string[]>({
-  key: 'artifactIdsState',
-  default: [],
-  effects: [
-    ({ onSet, node }) => {
-      onSet(async (newValue) => {
-        logger.log('artifacts', 'Recoil Effect: Setting artifactIdsState', {
-          key: node.key,
-          newValue,
-        });
-      });
-    },
-  ] as const,
-});
-
 export const currentArtifactId = atom<string | null>({
   key: 'currentArtifactId',
   default: null,