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

refactor: nullify artifact state and reset on empty conversation

Browse source
This commit is contained in:
Danny Avila 2024-08-23 23:20:20 -04:00
parent bedc91adcd
commit 8c1db607e5
5 changed files with 45 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -80,7 +80,10 @@ export function Artifact({
}; };
setArtifacts((prevArtifacts) => { setArtifacts((prevArtifacts) => {
if (prevArtifacts[artifactKey] != null && prevArtifacts[artifactKey].content === content) { if (
prevArtifacts?.[artifactKey] != null &&
prevArtifacts[artifactKey].content === content
) {
return prevArtifacts; return prevArtifacts;
} }

34
client/src/components/Artifacts/ArtifactButton.tsx
View file

@ -14,25 +14,29 @@ const ArtifactButton = ({ artifact }: { artifact: Artifact | null }) => {
const fileType = getFileType('artifact'); const fileType = getFileType('artifact');
return ( return (
<button <>
type="button" <div className="group relative inline-block rounded-xl text-sm text-text-primary">
onClick={() => setArtifactId(artifact.id)} <button
className="group relative inline-block rounded-xl text-sm text-text-primary" type="button"
> onClick={() => setArtifactId(artifact.id)}
<div className="relative overflow-hidden rounded-xl border border-border-medium transition-all duration-300 hover:border-border-xheavy hover:shadow-lg"> className="relative overflow-hidden rounded-xl border border-border-medium transition-all duration-300 hover:border-border-xheavy hover:shadow-lg"
<div className="w-60 bg-surface-tertiary p-2 "> >
<div className="flex flex-row items-center gap-2"> <div className="w-60 bg-surface-tertiary p-2 ">
<FilePreview fileType={fileType} className="relative" /> <div className="flex flex-row items-center gap-2">
<div className="overflow-hidden text-left"> <FilePreview fileType={fileType} className="relative" />
<div className="truncate font-medium">{artifact.title}</div> <div className="overflow-hidden text-left">
<div className="truncate text-text-secondary"> <div className="truncate font-medium">{artifact.title}</div>
{localize('com_ui_artifact_click')} <div className="truncate text-text-secondary">
{localize('com_ui_artifact_click')}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </button>
</div> </div>
</button> {/* new line*/}
<br />
</>
); );
}; };

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

@ -1,8 +1,8 @@
import React, { useMemo, useState, useEffect, useRef } from 'react'; import React, { useMemo, useState, useEffect, useRef } from 'react';
import { useRecoilState } from 'recoil';
import * as Tabs from '@radix-ui/react-tabs'; import * as Tabs from '@radix-ui/react-tabs';
import { Sandpack } from '@codesandbox/sandpack-react'; import { Sandpack } from '@codesandbox/sandpack-react';
import { useRecoilValue, useRecoilState } from 'recoil'; import { removeNullishValues, Constants } from 'librechat-data-provider';
import { removeNullishValues } from 'librechat-data-provider';
import { SandpackPreview, SandpackProvider } from '@codesandbox/sandpack-react/unstyled'; import { SandpackPreview, SandpackProvider } from '@codesandbox/sandpack-react/unstyled';
import type { Artifact } from '~/common'; import type { Artifact } from '~/common';
import { import {
@ -55,14 +55,14 @@ export function ArtifactPreview({
options={{ ...sharedOptions }} options={{ ...sharedOptions }}
{...sharedProps} {...sharedProps}
> >
<SandpackPreview showOpenInCodeSandbox={false} showRefreshButton={false} /> <SandpackPreview showOpenInCodeSandbox={false} showRefreshButton={false} tabIndex={0} />
</SandpackProvider> </SandpackProvider>
); );
} }
export default function Artifacts() { export default function Artifacts() {
const { isSubmitting, latestMessage, conversation } = useChatContext(); const { isSubmitting, latestMessage, conversation } = useChatContext();
const conversationId = useMemo(() => conversation?.conversationId ?? null, [conversation]); const conversationId = useMemo(() => conversation?.conversationId ?? '', [conversation]);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [activeTab, setActiveTab] = useState('preview'); const [activeTab, setActiveTab] = useState('preview');
@ -70,8 +70,8 @@ export default function Artifacts() {
const [currentArtifactId, setCurrentArtifactId] = useRecoilState(store.currentArtifactId); const [currentArtifactId, setCurrentArtifactId] = useRecoilState(store.currentArtifactId);
const orderedArtifactIds = useMemo(() => { const orderedArtifactIds = useMemo(() => {
return Object.keys(artifacts).sort( return Object.keys(artifacts ?? {}).sort(
(a, b) => artifacts[a].lastUpdateTime - artifacts[b].lastUpdateTime, (a, b) => (artifacts?.[a]?.lastUpdateTime ?? 0) - (artifacts?.[b]?.lastUpdateTime ?? 0),
); );
}, [artifacts]); }, [artifacts]);
@ -82,6 +82,14 @@ export default function Artifacts() {
setIsVisible(true); setIsVisible(true);
}, []); }, []);
useEffect(() => {
if (!conversationId || conversationId === '' || conversationId === Constants.NEW_CONVO) {
setArtifacts(null);
setCurrentArtifactId(null);
return;
}
}, [conversationId, setArtifacts, setCurrentArtifactId]);
useEffect(() => { useEffect(() => {
if (orderedArtifactIds.length > 0) { if (orderedArtifactIds.length > 0) {
const latestArtifactId = orderedArtifactIds[orderedArtifactIds.length - 1]; const latestArtifactId = orderedArtifactIds[orderedArtifactIds.length - 1];
@ -92,12 +100,12 @@ export default function Artifacts() {
useEffect(() => { useEffect(() => {
if (isSubmitting && orderedArtifactIds.length > 0) { if (isSubmitting && orderedArtifactIds.length > 0) {
const latestArtifactId = orderedArtifactIds[orderedArtifactIds.length - 1]; const latestArtifactId = orderedArtifactIds[orderedArtifactIds.length - 1];
const latestArtifact = artifacts[latestArtifactId]; const latestArtifact = artifacts?.[latestArtifactId];
if (latestArtifact.content !== lastContentRef.current) { if (latestArtifact?.content !== lastContentRef.current) {
setCurrentArtifactId(latestArtifactId); setCurrentArtifactId(latestArtifactId);
setActiveTab('code'); setActiveTab('code');
lastContentRef.current = latestArtifact.content ?? null; lastContentRef.current = latestArtifact?.content ?? null;
} }
} }
}, [setCurrentArtifactId, isSubmitting, orderedArtifactIds, artifacts]); }, [setCurrentArtifactId, isSubmitting, orderedArtifactIds, artifacts]);
@ -108,7 +116,7 @@ export default function Artifacts() {
} }
}, [latestMessage]); }, [latestMessage]);
const currentArtifact = currentArtifactId != null ? artifacts[currentArtifactId] : null; const currentArtifact = currentArtifactId != null ? artifacts?.[currentArtifactId] : null;
const currentIndex = orderedArtifactIds.indexOf(currentArtifactId ?? ''); const currentIndex = orderedArtifactIds.indexOf(currentArtifactId ?? '');
const cycleArtifact = (direction: 'next' | 'prev') => { const cycleArtifact = (direction: 'next' | 'prev') => {
@ -122,7 +130,7 @@ export default function Artifacts() {
}; };
if (!currentArtifact) { if (!currentArtifact) {
return <div>No artifacts available.</div>; return null;
} }
return ( return (

2
client/src/components/Chat/Presentation.tsx
View file

@ -96,7 +96,7 @@ export default function Presentation({
defaultCollapsed={defaultCollapsed} defaultCollapsed={defaultCollapsed}
fullPanelCollapse={fullCollapse} fullPanelCollapse={fullCollapse}
artifacts={ artifacts={
codeArtifacts != null && Object.keys(artifacts).length > 0 ? <Artifacts /> : null codeArtifacts != null && Object.keys(artifacts ?? {}).length > 0 ? <Artifacts /> : null
} }
> >
<main className="flex h-full flex-col" role="main"> <main className="flex h-full flex-col" role="main">

4
client/src/store/artifacts.ts
View file

@ -2,9 +2,9 @@ import { atom } from 'recoil';
import { logger } from '~/utils'; import { logger } from '~/utils';
import type { Artifact } from '~/common'; import type { Artifact } from '~/common';
export const artifactsState = atom<Record<string, Artifact>>({ export const artifactsState = atom<Record<string, Artifact | undefined> | null>({
key: 'artifactsState', key: 'artifactsState',
default: {}, default: null,
effects: [ effects: [
({ onSet, node }) => { ({ onSet, node }) => {
onSet(async (newValue) => { onSet(async (newValue) => {