From 15068fdfabdf49646396c52663cf93c670a8d005 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 23 Aug 2024 20:27:08 -0400
Subject: [PATCH] refactor: optimize ordering of artifacts and activate latest
 artifact in Artifacts component

---
 client/src/components/Artifacts/Artifacts.tsx | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Artifacts/Artifacts.tsx b/client/src/components/Artifacts/Artifacts.tsx
index 4fa0f8268c..64022da672 100644
--- a/client/src/components/Artifacts/Artifacts.tsx
+++ b/client/src/components/Artifacts/Artifacts.tsx
@@ -85,28 +85,27 @@ export default function Artifacts() {
     if (orderedArtifactIds.length > 0) {
       const latestArtifactId = orderedArtifactIds[orderedArtifactIds.length - 1];
       setCurrentArtifactId(latestArtifactId);
-      setActiveTab('code');
     }
   }, [orderedArtifactIds]);
 
   useEffect(() => {
-    if (latestMessage?.messageId !== lastRunMessageIdRef.current) {
-      const currentArtifact = currentArtifactId != null ? artifacts[currentArtifactId] : null;
-      const currentContent = currentArtifact?.content ?? null;
+    if (isSubmitting && orderedArtifactIds.length > 0) {
+      const latestArtifactId = orderedArtifactIds[orderedArtifactIds.length - 1];
+      const latestArtifact = artifacts[latestArtifactId];
 
-      if (
-        isSubmitting &&
-        currentArtifactId != null &&
-        activeTab !== 'code' &&
-        currentContent !== lastContentRef.current
-      ) {
+      if (latestArtifact.content !== lastContentRef.current) {
+        setCurrentArtifactId(latestArtifactId);
         setActiveTab('code');
-        lastContentRef.current = currentContent;
+        lastContentRef.current = latestArtifact.content ?? null;
       }
+    }
+  }, [isSubmitting, orderedArtifactIds, artifacts]);
 
+  useEffect(() => {
+    if (latestMessage?.messageId !== lastRunMessageIdRef.current) {
       lastRunMessageIdRef.current = latestMessage?.messageId ?? null;
     }
-  }, [activeTab, currentArtifactId, isSubmitting, latestMessage, artifacts]);
+  }, [latestMessage]);
 
   const currentArtifact = currentArtifactId != null ? artifacts[currentArtifactId] : null;