From 66d5a1a3681b7bdd332a5b818148d96102eb64a6 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 23 Aug 2024 16:35:31 -0400
Subject: [PATCH] feat: Add useEffect hook to Artifacts component for
 visibility control, slide in animation

---
 client/src/components/Artifacts/Artifacts.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Artifacts/Artifacts.tsx b/client/src/components/Artifacts/Artifacts.tsx
index 161919fda2..79db64bd15 100644
--- a/client/src/components/Artifacts/Artifacts.tsx
+++ b/client/src/components/Artifacts/Artifacts.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 import * as Tabs from '@radix-ui/react-tabs';
 import { Sandpack } from '@codesandbox/sandpack-react';
@@ -59,10 +59,15 @@ export function ArtifactPreview({
 }
 
 export default function Artifacts() {
+  const [isVisible, setIsVisible] = useState(false);
   const [activeTab, setActiveTab] = useState('code');
   const artifacts = useRecoilValue(store.artifactsState);
   const artifactIds = useRecoilValue(store.artifactIdsState);
 
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
+
   const [currentArtifactIndex, setCurrentArtifactIndex] = useState(artifactIds.length - 1);
 
   const currentArtifact = useMemo(() => {
@@ -92,7 +97,13 @@ export default function Artifacts() {
       {/* Main Parent */}
       <div className="flex h-full w-full items-center justify-center py-2">
         {/* Main Container */}
-        <div className="flex h-[97%] w-[97%] flex-col overflow-hidden rounded-xl border border-border-medium bg-surface-primary text-xl text-text-primary shadow-xl">
+        <div
+          className={`flex h-[97%] w-[97%] flex-col overflow-hidden rounded-xl border border-border-medium bg-surface-primary text-xl text-text-primary shadow-xl transition-all duration-300 ease-in-out ${
+            isVisible
+              ? 'translate-x-0 scale-100 opacity-100'
+              : 'translate-x-full scale-95 opacity-0'
+          }`}
+        >
           {/* Header */}
           <div className="flex items-center justify-between border-b border-border-medium bg-surface-primary-alt p-2">
             <div className="flex items-center">