Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-02-21 09:54:08 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refactor: optimize ordering of artifacts and add latest artifact activation in Artifacts component

Browse source
This commit is contained in:
Danny Avila 2024-08-23 19:46:26 -04:00
parent e2e42db24a
commit 068ec2fceb
1 changed files with 24 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -61,7 +61,7 @@ export function ArtifactPreview({
} }
export default function Artifacts() { export default function Artifacts() {
const { isSubmitting } = useChatContext(); const { isSubmitting, latestMessage } = useChatContext();
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [activeTab, setActiveTab] = useState('code'); const [activeTab, setActiveTab] = useState('code');
@ -70,11 +70,34 @@ export default function Artifacts() {
const [currentArtifactId, setCurrentArtifactId] = useState<string | null>(null); const [currentArtifactId, setCurrentArtifactId] = useState<string | null>(null);
const [orderedArtifactIds, setOrderedArtifactIds] = useState<string[]>([]); const [orderedArtifactIds, setOrderedArtifactIds] = useState<string[]>([]);
const prevArtifactsRef = useRef({}); const prevArtifactsRef = useRef({});
const lastRunMessageIdRef = useRef<string | null>(null);
const lastContentRef = useRef<string | null>(null);
useEffect(() => { useEffect(() => {
setIsVisible(true); setIsVisible(true);
}, []); }, []);
useEffect(() => {
if (latestMessage?.messageId !== lastRunMessageIdRef.current) {
const currentArtifact = currentArtifactId != null ? artifacts[currentArtifactId] : null;
const currentContent = currentArtifact?.content ?? null;
if (
isSubmitting &&
currentArtifactId != null &&
activeTab !== 'code' &&
currentContent !== lastContentRef.current
) {
setActiveTab('code');
lastContentRef.current = currentContent;
} else if (!isSubmitting && currentArtifactId == null && orderedArtifactIds.length > 0) {
setCurrentArtifactId(orderedArtifactIds[0]);
}
lastRunMessageIdRef.current = latestMessage?.messageId ?? null;
}
}, [activeTab, currentArtifactId, isSubmitting, latestMessage, orderedArtifactIds, artifacts]);
useEffect(() => { useEffect(() => {
const artifactIds = Object.keys(artifacts); const artifactIds = Object.keys(artifacts);
const newArtifacts = artifactIds.filter((id) => !orderedArtifactIds.includes(id)); const newArtifacts = artifactIds.filter((id) => !orderedArtifactIds.includes(id));