Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-02-27 04:44:10 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

refactor: add throttling

Browse source
This commit is contained in:
Danny Avila 2024-08-22 19:08:04 -04:00
parent fc6eb9f77f
commit d86d4f5c17
1 changed files with 30 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,9 @@
import { useEffect, useCallback } from 'react'; import { useEffect, useCallback, useRef } from 'react';
import { visit } from 'unist-util-visit'; import { visit } from 'unist-util-visit';
import { useSetRecoilState } from 'recoil'; import { useSetRecoilState } from 'recoil';
import { artifactsState, artifactIdsState } from '~/store/artifacts'; import { artifactsState, artifactIdsState } from '~/store/artifacts';
import type { Pluggable } from 'unified'; import type { Pluggable } from 'unified';
import throttle from 'lodash/throttle';
export const artifactPlugin: Pluggable = () => { export const artifactPlugin: Pluggable = () => {
return (tree) => { return (tree) => {
@ -21,6 +22,12 @@ export function Artifact({ node, ...props }) {
const setArtifacts = useSetRecoilState(artifactsState); const setArtifacts = useSetRecoilState(artifactsState);
const setArtifactIds = useSetRecoilState(artifactIdsState); const setArtifactIds = useSetRecoilState(artifactIdsState);
const throttledUpdateRef = useRef(
throttle((updateFn: () => void) => {
updateFn();
}, 25),
);
const updateArtifact = useCallback(() => { const updateArtifact = useCallback(() => {
const content = const content =
props.children && typeof props.children === 'string' props.children && typeof props.children === 'string'
@ -32,28 +39,30 @@ export function Artifact({ node, ...props }) {
const identifier = props.identifier || 'no-identifier'; const identifier = props.identifier || 'no-identifier';
const artifactKey = `${identifier}_${type}_${title}`.replace(/\s+/g, '_').toLowerCase(); const artifactKey = `${identifier}_${type}_${title}`.replace(/\s+/g, '_').toLowerCase();
setArtifacts((prevArtifacts) => { throttledUpdateRef.current(() => {
if (prevArtifacts[artifactKey] && prevArtifacts[artifactKey].content === content) { setArtifacts((prevArtifacts) => {
return prevArtifacts; if (prevArtifacts[artifactKey] && prevArtifacts[artifactKey].content === content) {
} return prevArtifacts;
}
return { return {
...prevArtifacts, ...prevArtifacts,
[artifactKey]: { [artifactKey]: {
id: artifactKey, id: artifactKey,
identifier, identifier,
title, title,
type, type,
content, content,
}, },
}; };
}); });
setArtifactIds((prevIds) => { setArtifactIds((prevIds) => {
if (!prevIds.includes(artifactKey)) { if (!prevIds.includes(artifactKey)) {
return [...prevIds, artifactKey]; return [...prevIds, artifactKey];
} }
return prevIds; return prevIds;
});
}); });
}, [props, setArtifacts, setArtifactIds]); }, [props, setArtifacts, setArtifactIds]);