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

projects/app/src/pageComponents/app/detail/Edit/FormComponent/ToolSelector/ToolSelectModal.tsx

@@ -148,6 +148,10 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void })
 
   const onUpdateParentId = useCallback(
     (parentId: ParentIdType) => {
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+
       loadTemplates({
         parentId
       });
@@ -240,6 +244,9 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void })
           <RenderList
             templates={templates}
             type={templateType}
+            parentId={parentId}
+            searchKey={searchKey}
+            selectedTagIds={selectedTagIds}
             setParentId={onUpdateParentId}
             {...props}
           />
@@ -255,6 +262,9 @@ const RenderList = React.memo(function RenderList({
   topAgentSelectedTools = [],
   templates,
   type,
+  parentId,
+  searchKey,
+  selectedTagIds,
   onAddTool,
   onRemoveTool,
   setParentId,
@@ -263,6 +273,9 @@ const RenderList = React.memo(function RenderList({
 }: Props & {
   templates: NodeTemplateListItemType[];
   type: TemplateTypeEnum;
+  parentId: ParentIdType;
+  searchKey: string;
+  selectedTagIds: string[];
   setParentId: (parentId: ParentIdType) => any;
 }) {
   const { i18n } = useTranslation();
@@ -270,6 +283,12 @@ const RenderList = React.memo(function RenderList({
   const { feConfigs } = useSystemStore();
   const router = useRouter();
   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(
     async (template: NodeTemplateListItemType) => {
@@ -318,6 +337,8 @@ const RenderList = React.memo(function RenderList({
       <>
         {templates.length > 0 ? (
           <Grid
+            key={listScopeKey}
+            onMouseMove={() => setTooltipEnabledScopeKey(listScopeKey)}
             gridTemplateColumns={['minmax(0, 1fr)', 'repeat(2, minmax(0, 1fr))']}
             columnGap={3}
             rowGap={3}
@@ -333,6 +354,7 @@ const RenderList = React.memo(function RenderList({
               return (
                 <MyTooltip
                   key={template.id}
+                  isDisabled={!isTooltipEnabled}
                   label={
                     <Box py={2} minW={['auto', '250px']}>
                       <Flex alignItems={'center'} w={'100%'}>

projects/app/src/pageComponents/chat/ChatSetting/ToolSelectModal.tsx

@@ -104,6 +104,10 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void })
 
   const onUpdateParentId = useCallback(
     (parentId: ParentIdType) => {
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+
       loadTemplates({
         parentId
       });
@@ -156,7 +160,14 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void })
       )}
       <MyBox isLoading={isLoading} pt={2} pb={3} flex={'1 0 0'} h={0}>
         <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>
       </MyBox>
     </MyModal>
@@ -167,6 +178,9 @@ export default React.memo(ToolSelectModal);
 
 const RenderList = React.memo(function RenderList({
   templates,
+  parentId,
+  searchKey,
+  selectedTagIds,
   onAddTool,
   onRemoveTool,
   setParentId,
@@ -174,6 +188,9 @@ const RenderList = React.memo(function RenderList({
   chatConfig = {}
 }: Props & {
   templates: NodeTemplateListItemType[];
+  parentId: ParentIdType;
+  searchKey: string;
+  selectedTagIds: string[];
   setParentId: (parentId: ParentIdType) => any;
 }) {
   const { t, i18n } = useTranslation();
@@ -182,6 +199,12 @@ const RenderList = React.memo(function RenderList({
   const [configTool, setConfigTool] = useState<FlowNodeTemplateType>();
   const onCloseConfigTool = useCallback(() => setConfigTool(undefined), []);
   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(
     async (template: NodeTemplateListItemType) => {
@@ -279,13 +302,21 @@ const RenderList = React.memo(function RenderList({
 
   const pluginListRender =
     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) => {
           const selected = selectedTools.some((tool) => tool.pluginId === template.id);
 
           return (
             <MyTooltip
               key={template.id}
+              isDisabled={!isTooltipEnabled}
               placement={'right'}
               label={
                 <Box py={2}>