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

feat: autoswitch to preview

Browse source
This commit is contained in:
Danny Avila 2024-08-24 23:49:31 -04:00
parent 7b20679463
commit b1eb069931
1 changed files with 20 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

26
client/src/hooks/Artifacts/useArtifacts.ts
View file

@ -1,6 +1,8 @@
import { useMemo, useState, useEffect, useRef } from 'react'; import { useMemo, useState, useEffect, useRef } from 'react';
import { Constants } from 'librechat-data-provider';
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'; import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
import { useChatContext } from '~/Providers'; import { useChatContext } from '~/Providers';
import { getLatestText } from '~/utils';
import store from '~/store'; import store from '~/store';
export default function useArtifacts() { export default function useArtifacts() {
@ -21,9 +23,8 @@ export default function useArtifacts() {
const lastRunMessageIdRef = useRef<string | null>(null); const lastRunMessageIdRef = useRef<string | null>(null);
const lastContentRef = useRef<string | null>(null); const lastContentRef = useRef<string | null>(null);
// Use a ref to keep track of the previous conversation ID
const prevConversationIdRef = useRef<string | null>(null); const prevConversationIdRef = useRef<string | null>(null);
const hasEnclosedArtifactRef = useRef<boolean>(false);
useEffect(() => { useEffect(() => {
const resetState = () => { const resetState = () => {
@ -32,6 +33,7 @@ export default function useArtifacts() {
prevConversationIdRef.current = conversation?.conversationId ?? null; prevConversationIdRef.current = conversation?.conversationId ?? null;
lastRunMessageIdRef.current = null; lastRunMessageIdRef.current = null;
lastContentRef.current = null; lastContentRef.current = null;
hasEnclosedArtifactRef.current = false;
}; };
if ( if (
conversation && conversation &&
@ -39,7 +41,7 @@ export default function useArtifacts() {
prevConversationIdRef.current != null prevConversationIdRef.current != null
) { ) {
resetState(); resetState();
} else if (conversation && conversation.conversationId === 'new') { } else if (conversation && conversation.conversationId === Constants.NEW_CONVO) {
resetState(); resetState();
} }
prevConversationIdRef.current = conversation?.conversationId ?? null; prevConversationIdRef.current = conversation?.conversationId ?? null;
@ -57,21 +59,33 @@ export default function useArtifacts() {
}, [setCurrentArtifactId, orderedArtifactIds]); }, [setCurrentArtifactId, orderedArtifactIds]);
useEffect(() => { useEffect(() => {
if (isSubmitting && orderedArtifactIds.length > 0) { if (isSubmitting && orderedArtifactIds.length > 0 && latestMessage) {
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');
lastContentRef.current = latestArtifact?.content ?? null; lastContentRef.current = latestArtifact?.content ?? null;
const latestMessageText = getLatestText(latestMessage);
const hasEnclosedArtifact = /:::artifact[\s\S]*?(```|:::)\s*$/.test(
latestMessageText.trim(),
);
if (hasEnclosedArtifact && !hasEnclosedArtifactRef.current) {
setActiveTab('preview');
hasEnclosedArtifactRef.current = true;
} else {
setActiveTab('code');
}
} }
} }
}, [setCurrentArtifactId, isSubmitting, orderedArtifactIds, artifacts]); }, [setCurrentArtifactId, isSubmitting, orderedArtifactIds, artifacts, latestMessage]);
useEffect(() => { useEffect(() => {
if (latestMessage?.messageId !== lastRunMessageIdRef.current) { if (latestMessage?.messageId !== lastRunMessageIdRef.current) {
lastRunMessageIdRef.current = latestMessage?.messageId ?? null; lastRunMessageIdRef.current = latestMessage?.messageId ?? null;
hasEnclosedArtifactRef.current = false;
} }
}, [latestMessage]); }, [latestMessage]);