Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-03 17:18:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refactor: typing and make latest artifact active if the number of artifacts changed

Browse source
This commit is contained in:
Danny Avila 2024-08-23 17:58:43 -04:00
parent 8e1807d02b
commit 9abf941085
2 changed files with 14 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

11
client/src/components/Artifacts/Artifact.tsx
View file

@ -35,8 +35,8 @@ const extractContent = (
return '';
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function Artifact({
// eslint-disable-next-line @typescript-eslint/no-unused-vars
node,
...props
}: Artifact & {
@ -76,7 +76,7 @@ export function Artifact({
setArtifacts((prevArtifacts) => {
if (
(prevArtifacts as Record<string, Artifact | undefined>)[artifactKey] &&
(prevArtifacts as Record<string, Artifact | undefined>)[artifactKey] != null &&
prevArtifacts[artifactKey].content === content
) {
return prevArtifacts;
@ -103,12 +103,7 @@ export function Artifact({
updateArtifact();
}, [updateArtifact]);
return (
<>
<CodePreview artifact={artifact} />
{/* {props.children} */}
</>
);
return <CodePreview artifact={artifact} />;
}
// <div className="artifact">

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

@ -1,4 +1,4 @@
import React, { useMemo, useState, useEffect } from 'react';
import React, { useMemo, useState, useEffect, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import * as Tabs from '@radix-ui/react-tabs';
import { Sandpack } from '@codesandbox/sandpack-react';
@ -64,11 +64,19 @@ export default function Artifacts() {
const artifacts = useRecoilValue(store.artifactsState);
const artifactIds = useRecoilValue(store.artifactIdsState);
const prevArtifactIdsLengthRef = useRef(artifactIds.length);
const [currentArtifactIndex, setCurrentArtifactIndex] = useState(artifactIds.length - 1);
useEffect(() => {
setIsVisible(true);
}, []);
const [currentArtifactIndex, setCurrentArtifactIndex] = useState(artifactIds.length - 1);
useEffect(() => {
if (artifactIds.length !== prevArtifactIdsLengthRef.current) {
setCurrentArtifactIndex(artifactIds.length - 1);
prevArtifactIdsLengthRef.current = artifactIds.length;
}
}, [artifactIds]);
const currentArtifact = useMemo(() => {
if (artifactIds.length === 0) {
@ -88,7 +96,7 @@ export default function Artifacts() {
});
};
if (!currentArtifact) {
if (currentArtifact === null) {
return <div>No artifacts available.</div>;
}