Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-06 10:38:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

feat: Add useEffect hook to Artifacts component for visibility control, slide in animation

Browse source
This commit is contained in:
Danny Avila 2024-08-23 16:35:31 -04:00
parent c8d9af42e5
commit 66d5a1a368
1 changed files with 13 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

15
client/src/components/Artifacts/Artifacts.tsx
View file

@ -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">