Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 806a8111 by Finley Ge Committed by GitHub
Options

perf(app): optimize tool selector performance (#7148) 

- Disable tooltip rendering for tool lists until user interaction
- Blur active elements when navigating between folders to prevent focus
  issues
parent b41b5411
Showing with 55 additions and 2 deletions
projects/app/src/pageComponents/app/detail/Edit/FormComponent/ToolSelector/ToolSelectModal.tsx
...@@ -148,6 +148,10 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void }) ...@@ -148,6 +148,10 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void })
const onUpdateParentId = useCallback( const onUpdateParentId = useCallback(
(parentId: ParentIdType) => { (parentId: ParentIdType) => {
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
loadTemplates({ loadTemplates({
parentId parentId
}); });
...@@ -240,6 +244,9 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void }) ...@@ -240,6 +244,9 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void })
<RenderList <RenderList
templates={templates} templates={templates}
type={templateType} type={templateType}
parentId={parentId}
searchKey={searchKey}
selectedTagIds={selectedTagIds}
setParentId={onUpdateParentId} setParentId={onUpdateParentId}
{...props} {...props}
/> />
...@@ -255,6 +262,9 @@ const RenderList = React.memo(function RenderList({ ...@@ -255,6 +262,9 @@ const RenderList = React.memo(function RenderList({
topAgentSelectedTools = [], topAgentSelectedTools = [],
templates, templates,
type, type,
parentId,
searchKey,
selectedTagIds,
onAddTool, onAddTool,
onRemoveTool, onRemoveTool,
setParentId, setParentId,
...@@ -263,6 +273,9 @@ const RenderList = React.memo(function RenderList({ ...@@ -263,6 +273,9 @@ const RenderList = React.memo(function RenderList({
}: Props & { }: Props & {
templates: NodeTemplateListItemType[]; templates: NodeTemplateListItemType[];
type: TemplateTypeEnum; type: TemplateTypeEnum;
parentId: ParentIdType;
searchKey: string;
selectedTagIds: string[];
setParentId: (parentId: ParentIdType) => any; setParentId: (parentId: ParentIdType) => any;
}) { }) {
const { i18n } = useTranslation(); const { i18n } = useTranslation();
...@@ -270,6 +283,12 @@ const RenderList = React.memo(function RenderList({ ...@@ -270,6 +283,12 @@ const RenderList = React.memo(function RenderList({
const { feConfigs } = useSystemStore(); const { feConfigs } = useSystemStore();
const router = useRouter(); const router = useRouter();
const { toast } = useToast(); const { toast } = useToast();
const listScopeKey = useMemo(
() => `${type}:${parentId ?? ''}:${searchKey}:${selectedTagIds.join(',')}`,
[parentId, searchKey, selectedTagIds, type]
);
const [tooltipEnabledScopeKey, setTooltipEnabledScopeKey] = useState('');
const isTooltipEnabled = tooltipEnabledScopeKey === listScopeKey;
const { runAsync: onClickAdd, loading: isLoading } = useRequest( const { runAsync: onClickAdd, loading: isLoading } = useRequest(
async (template: NodeTemplateListItemType) => { async (template: NodeTemplateListItemType) => {
...@@ -318,6 +337,8 @@ const RenderList = React.memo(function RenderList({ ...@@ -318,6 +337,8 @@ const RenderList = React.memo(function RenderList({
<> <>
{templates.length > 0 ? ( {templates.length > 0 ? (
<Grid <Grid
key={listScopeKey}
onMouseMove={() => setTooltipEnabledScopeKey(listScopeKey)}
gridTemplateColumns={['minmax(0, 1fr)', 'repeat(2, minmax(0, 1fr))']} gridTemplateColumns={['minmax(0, 1fr)', 'repeat(2, minmax(0, 1fr))']}
columnGap={3} columnGap={3}
rowGap={3} rowGap={3}
...@@ -333,6 +354,7 @@ const RenderList = React.memo(function RenderList({ ...@@ -333,6 +354,7 @@ const RenderList = React.memo(function RenderList({
return ( return (
<MyTooltip <MyTooltip
key={template.id} key={template.id}
isDisabled={!isTooltipEnabled}
label={ label={
<Box py={2} minW={['auto', '250px']}> <Box py={2} minW={['auto', '250px']}>
<Flex alignItems={'center'} w={'100%'}> <Flex alignItems={'center'} w={'100%'}>
......
projects/app/src/pageComponents/chat/ChatSetting/ToolSelectModal.tsx
...@@ -104,6 +104,10 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void }) ...@@ -104,6 +104,10 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void })
const onUpdateParentId = useCallback( const onUpdateParentId = useCallback(
(parentId: ParentIdType) => { (parentId: ParentIdType) => {
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
loadTemplates({ loadTemplates({
parentId parentId
}); });
...@@ -156,7 +160,14 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void }) ...@@ -156,7 +160,14 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void })
)} )}
<MyBox isLoading={isLoading} pt={2} pb={3} flex={'1 0 0'} h={0}> <MyBox isLoading={isLoading} pt={2} pb={3} flex={'1 0 0'} h={0}>
<Box px={[3, 6]} overflow={'overlay'} height={'100%'}> <Box px={[3, 6]} overflow={'overlay'} height={'100%'}>
<RenderList templates={templates} setParentId={onUpdateParentId} {...props} /> <RenderList
templates={templates}
parentId={parentId}
searchKey={searchKey}
selectedTagIds={selectedTagIds}
setParentId={onUpdateParentId}
{...props}
/>
</Box> </Box>
</MyBox> </MyBox>
</MyModal> </MyModal>
...@@ -167,6 +178,9 @@ export default React.memo(ToolSelectModal); ...@@ -167,6 +178,9 @@ export default React.memo(ToolSelectModal);
const RenderList = React.memo(function RenderList({ const RenderList = React.memo(function RenderList({
templates, templates,
parentId,
searchKey,
selectedTagIds,
onAddTool, onAddTool,
onRemoveTool, onRemoveTool,
setParentId, setParentId,
...@@ -174,6 +188,9 @@ const RenderList = React.memo(function RenderList({ ...@@ -174,6 +188,9 @@ const RenderList = React.memo(function RenderList({
chatConfig = {} chatConfig = {}
}: Props & { }: Props & {
templates: NodeTemplateListItemType[]; templates: NodeTemplateListItemType[];
parentId: ParentIdType;
searchKey: string;
selectedTagIds: string[];
setParentId: (parentId: ParentIdType) => any; setParentId: (parentId: ParentIdType) => any;
}) { }) {
const { t, i18n } = useTranslation(); const { t, i18n } = useTranslation();
...@@ -182,6 +199,12 @@ const RenderList = React.memo(function RenderList({ ...@@ -182,6 +199,12 @@ const RenderList = React.memo(function RenderList({
const [configTool, setConfigTool] = useState<FlowNodeTemplateType>(); const [configTool, setConfigTool] = useState<FlowNodeTemplateType>();
const onCloseConfigTool = useCallback(() => setConfigTool(undefined), []); const onCloseConfigTool = useCallback(() => setConfigTool(undefined), []);
const { toast } = useToast(); const { toast } = useToast();
const listScopeKey = useMemo(
() => `${parentId ?? ''}:${searchKey}:${selectedTagIds.join(',')}`,
[parentId, searchKey, selectedTagIds]
);
const [tooltipEnabledScopeKey, setTooltipEnabledScopeKey] = useState('');
const isTooltipEnabled = tooltipEnabledScopeKey === listScopeKey;
const { runAsync: onClickAdd, loading: isLoading } = useRequest( const { runAsync: onClickAdd, loading: isLoading } = useRequest(
async (template: NodeTemplateListItemType) => { async (template: NodeTemplateListItemType) => {
...@@ -279,13 +302,21 @@ const RenderList = React.memo(function RenderList({ ...@@ -279,13 +302,21 @@ const RenderList = React.memo(function RenderList({
const pluginListRender = const pluginListRender =
templates.length > 0 ? ( templates.length > 0 ? (
<Grid gridTemplateColumns={gridStyle.gridTemplateColumns} rowGap={3} columnGap={3} pt={3}> <Grid
key={listScopeKey}
onMouseMove={() => setTooltipEnabledScopeKey(listScopeKey)}
gridTemplateColumns={gridStyle.gridTemplateColumns}
rowGap={3}
columnGap={3}
pt={3}
>
{templates.map((template) => { {templates.map((template) => {
const selected = selectedTools.some((tool) => tool.pluginId === template.id); const selected = selectedTools.some((tool) => tool.pluginId === template.id);
return ( return (
<MyTooltip <MyTooltip
key={template.id} key={template.id}
isDisabled={!isTooltipEnabled}
placement={'right'} placement={'right'}
label={ label={
<Box py={2}> <Box py={2}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment