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

feat: update to latest, use update time for ordering

Browse source
This commit is contained in:
Danny Avila 2024-08-23 20:12:22 -04:00
parent 8ce70a41b7
commit 4c810fa5db
3 changed files with 21 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/common/artifacts.ts
View file

@ -6,7 +6,7 @@ export interface CodeBlock {
export interface Artifact { export interface Artifact {
id: string; id: string;
order: number; lastUpdateTime: number;
identifier?: string; identifier?: string;
language?: string; language?: string;
content?: string; content?: string;

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

@ -6,6 +6,7 @@ import type { Pluggable } from 'unified';
import type { Artifact } from '~/common'; import type { Artifact } from '~/common';
import { artifactsState, artifactIdsState } from '~/store/artifacts'; import { artifactsState, artifactIdsState } from '~/store/artifacts';
import CodePreview from './CodePreview'; import CodePreview from './CodePreview';
import { logger } from '~/utils';
export const artifactPlugin: Pluggable = () => { export const artifactPlugin: Pluggable = () => {
return (tree) => { return (tree) => {
@ -56,6 +57,7 @@ export function Artifact({
const updateArtifact = useCallback(() => { const updateArtifact = useCallback(() => {
const content = extractContent(props.children); const content = extractContent(props.children);
logger.log('artifacts', 'updateArtifact: content.length', content.length);
if (!content || content.trim() === '') { if (!content || content.trim() === '') {
return; return;
@ -67,9 +69,7 @@ export function Artifact({
const artifactKey = `${identifier}_${type}_${title}`.replace(/\s+/g, '_').toLowerCase(); const artifactKey = `${identifier}_${type}_${title}`.replace(/\s+/g, '_').toLowerCase();
throttledUpdateRef.current(() => { throttledUpdateRef.current(() => {
const existingArtifact = currentArtifacts[artifactKey]; const now = Date.now();
const order =
existingArtifact != null ? existingArtifact.order : Object.keys(currentArtifacts).length;
const currentArtifact: Artifact = { const currentArtifact: Artifact = {
id: artifactKey, id: artifactKey,
@ -77,15 +77,11 @@ export function Artifact({
title, title,
type, type,
content, content,
order, lastUpdateTime: now,
}; };
setArtifacts((prevArtifacts) => { setArtifacts((prevArtifacts) => {
if ( if (prevArtifacts[artifactKey] != null && prevArtifacts[artifactKey].content === content) {
prevArtifacts[artifactKey] != null &&
prevArtifacts[artifactKey].content === content &&
prevArtifacts[artifactKey].order === order
) {
return prevArtifacts; return prevArtifacts;
} }
@ -99,7 +95,9 @@ export function Artifact({
if (!prevIds.includes(artifactKey)) { if (!prevIds.includes(artifactKey)) {
const newIds = [...prevIds, artifactKey]; const newIds = [...prevIds, artifactKey];
const definedIds = newIds.filter((id) => currentArtifacts[id] != null); const definedIds = newIds.filter((id) => currentArtifacts[id] != null);
return definedIds.sort((a, b) => currentArtifacts[a].order - currentArtifacts[b].order); return definedIds.sort(
(a, b) => currentArtifacts[b].lastUpdateTime - currentArtifacts[a].lastUpdateTime,
);
} }
return prevIds; return prevIds;
}); });

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

@ -69,7 +69,9 @@ export default function Artifacts() {
const [currentArtifactId, setCurrentArtifactId] = useState<string | null>(null); const [currentArtifactId, setCurrentArtifactId] = useState<string | null>(null);
const orderedArtifactIds = useMemo(() => { const orderedArtifactIds = useMemo(() => {
return Object.keys(artifacts).sort((a, b) => artifacts[a].order - artifacts[b].order); return Object.keys(artifacts).sort(
(a, b) => artifacts[a].lastUpdateTime - artifacts[b].lastUpdateTime,
);
}, [artifacts]); }, [artifacts]);
const lastRunMessageIdRef = useRef<string | null>(null); const lastRunMessageIdRef = useRef<string | null>(null);
@ -79,6 +81,14 @@ export default function Artifacts() {
setIsVisible(true); setIsVisible(true);
}, []); }, []);
useEffect(() => {
if (orderedArtifactIds.length > 0) {
const latestArtifactId = orderedArtifactIds[orderedArtifactIds.length - 1];
setCurrentArtifactId(latestArtifactId);
setActiveTab('code');
}
}, [orderedArtifactIds]);
useEffect(() => { useEffect(() => {
if (latestMessage?.messageId !== lastRunMessageIdRef.current) { if (latestMessage?.messageId !== lastRunMessageIdRef.current) {
const currentArtifact = currentArtifactId != null ? artifacts[currentArtifactId] : null; const currentArtifact = currentArtifactId != null ? artifacts[currentArtifactId] : null;
@ -92,19 +102,11 @@ export default function Artifacts() {
) { ) {
setActiveTab('code'); setActiveTab('code');
lastContentRef.current = currentContent; lastContentRef.current = currentContent;
} else if (!isSubmitting && currentArtifactId == null && orderedArtifactIds.length > 0) {
setCurrentArtifactId(orderedArtifactIds[0]);
} }
lastRunMessageIdRef.current = latestMessage?.messageId ?? null; lastRunMessageIdRef.current = latestMessage?.messageId ?? null;
} }
}, [activeTab, currentArtifactId, isSubmitting, latestMessage, orderedArtifactIds, artifacts]); }, [activeTab, currentArtifactId, isSubmitting, latestMessage, artifacts]);
useEffect(() => {
if (orderedArtifactIds.length > 0 && !(currentArtifactId ?? '')) {
setCurrentArtifactId(orderedArtifactIds[orderedArtifactIds.length - 1]);
}
}, [orderedArtifactIds, currentArtifactId]);
const currentArtifact = currentArtifactId != null ? artifacts[currentArtifactId] : null; const currentArtifact = currentArtifactId != null ? artifacts[currentArtifactId] : null;