Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-03-14 11:46:34 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: optimize ordering of artifacts in Artifacts component

Browse source
This commit is contained in:
Danny Avila 2024-08-23 19:40:10 -04:00
parent 5be1ffe490
commit e2e42db24a
1 changed files with 19 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -68,6 +68,7 @@ export default function Artifacts() {
const artifacts = useRecoilValue(store.artifactsState); const artifacts = useRecoilValue(store.artifactsState);
const [currentArtifactId, setCurrentArtifactId] = useState<string | null>(null); const [currentArtifactId, setCurrentArtifactId] = useState<string | null>(null);
const [orderedArtifactIds, setOrderedArtifactIds] = useState<string[]>([]);
const prevArtifactsRef = useRef({}); const prevArtifactsRef = useRef({});
useEffect(() => { useEffect(() => {
@ -76,34 +77,33 @@ export default function Artifacts() {
useEffect(() => { useEffect(() => {
const artifactIds = Object.keys(artifacts); const artifactIds = Object.keys(artifacts);
const hasNewArtifact = artifactIds.length > Object.keys(prevArtifactsRef.current).length; const newArtifacts = artifactIds.filter((id) => !orderedArtifactIds.includes(id));
const latestArtifactId = artifactIds[artifactIds.length - 1];
if ( if (newArtifacts.length > 0) {
hasNewArtifact || setOrderedArtifactIds((prevIds) => [...prevIds, ...newArtifacts]);
(isSubmitting && artifacts[latestArtifactId] !== prevArtifactsRef.current[latestArtifactId]) setCurrentArtifactId(newArtifacts[newArtifacts.length - 1]);
) { } else if (isSubmitting && currentArtifactId != null) {
setCurrentArtifactId(latestArtifactId); // If submitting and content changed, move current artifact to the end
setOrderedArtifactIds((prevIds) => {
const newIds = prevIds.filter((id) => id !== currentArtifactId);
return [...newIds, currentArtifactId];
});
} }
prevArtifactsRef.current = artifacts; prevArtifactsRef.current = artifacts;
}, [artifacts, isSubmitting]); }, [artifacts, isSubmitting, currentArtifactId, orderedArtifactIds]);
const artifactIds = Object.keys(artifacts);
const currentArtifact = currentArtifactId != null ? artifacts[currentArtifactId] : null; const currentArtifact = currentArtifactId != null ? artifacts[currentArtifactId] : null;
const currentIndex = useMemo( const currentIndex = orderedArtifactIds.indexOf(currentArtifactId ?? '');
() => artifactIds.indexOf(currentArtifactId ?? ''),
[artifactIds, currentArtifactId],
);
const cycleArtifact = (direction: 'next' | 'prev') => { const cycleArtifact = (direction: 'next' | 'prev') => {
let newIndex: number; let newIndex: number;
if (direction === 'next') { if (direction === 'next') {
newIndex = (currentIndex + 1) % artifactIds.length; newIndex = (currentIndex + 1) % orderedArtifactIds.length;
} else { } else {
newIndex = (currentIndex - 1 + artifactIds.length) % artifactIds.length; newIndex = (currentIndex - 1 + orderedArtifactIds.length) % orderedArtifactIds.length;
} }
setCurrentArtifactId(artifactIds[newIndex]); setCurrentArtifactId(orderedArtifactIds[newIndex]);
}; };
if (!currentArtifact) { if (!currentArtifact) {
@ -199,7 +199,9 @@ export default function Artifacts() {
<path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z" /> <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z" />
</svg> </svg>
</button> </button>
<span className="text-xs">{`${currentIndex + 1} / ${artifactIds.length}`}</span> <span className="text-xs">{`${currentIndex + 1} / ${
orderedArtifactIds.length
}`}</span>
<button onClick={() => cycleArtifact('next')} className="ml-2 text-text-secondary"> <button onClick={() => cycleArtifact('next')} className="ml-2 text-text-secondary">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"