From d4d25108345c432063a1cdb708797229723226d7 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Tue, 23 Sep 2025 11:13:11 +0800
Subject: [PATCH] feat(agent): add AllowedToolsSelect component and integrate
 into forms

extract tool selection logic into reusable component to reduce code duplication and improve maintainability
---
 .../components/Popups/agent/SessionModal.tsx  | 44 ++----------
 .../components/agent/AllowedToolsSelect.tsx   | 54 ++++++++++++++
 src/renderer/src/components/agent/index.tsx   |  1 +
 .../AgentSettings/AgentEssentialSettings.tsx  | 70 ++++++-------------
 4 files changed, 80 insertions(+), 89 deletions(-)
 create mode 100644 src/renderer/src/components/agent/AllowedToolsSelect.tsx
 create mode 100644 src/renderer/src/components/agent/index.tsx

diff --git a/src/renderer/src/components/Popups/agent/SessionModal.tsx b/src/renderer/src/components/Popups/agent/SessionModal.tsx
index df77792d71..8fc869b172 100644
--- a/src/renderer/src/components/Popups/agent/SessionModal.tsx
+++ b/src/renderer/src/components/Popups/agent/SessionModal.tsx
@@ -1,6 +1,5 @@
 import {
   Button,
-  Chip,
   cn,
   Form,
   Input,
@@ -18,6 +17,7 @@ import {
 } from '@heroui/react'
 import { loggerService } from '@logger'
 import type { Selection } from '@react-types/shared'
+import { AllowedToolsSelect } from '@renderer/components/agent'
 import { getModelLogo } from '@renderer/config/models'
 import { useAgent } from '@renderer/hooks/agents/useAgent'
 import { useApiModels } from '@renderer/hooks/agents/useModels'
@@ -197,21 +197,6 @@ export const SessionModal: React.FC<Props> = ({
     [availableTools]
   )
 
-  const renderSelectedTools = useCallback((items: SelectedItems<Tool>) => {
-    if (!items.length) {
-      return null
-    }
-    return (
-      <div className="flex flex-wrap gap-2">
-        {items.map((item) => (
-          <Chip key={item.key} size="sm" variant="flat" className="max-w-[160px] truncate">
-            {item.data?.name ?? item.textValue ?? item.key}
-          </Chip>
-        ))}
-      </div>
-    )
-  }, [])
-
   const modelOptions = useMemo(() => {
     // mocked data. not final version
     return (models ?? []).map((model) => ({
@@ -359,32 +344,11 @@ export const SessionModal: React.FC<Props> = ({
                     value={form.description ?? ''}
                     onValueChange={onDescChange}
                   />
-                  <Select
-                    selectionMode="multiple"
-                    isMultiline
+                  <AllowedToolsSelect
+                    items={availableTools}
                     selectedKeys={selectedToolKeys}
                     onSelectionChange={onAllowedToolsChange}
-                    label={t('agent.session.allowed_tools.label')}
-                    placeholder={t('agent.session.allowed_tools.placeholder')}
-                    description={
-                      availableTools.length
-                        ? t('agent.session.allowed_tools.helper')
-                        : t('agent.session.allowed_tools.empty')
-                    }
-                    isDisabled={!availableTools.length}
-                    items={availableTools}
-                    renderValue={renderSelectedTools}>
-                    {(tool) => (
-                      <SelectItem key={tool.id} textValue={tool.name}>
-                        <div className="flex flex-col">
-                          <span className="font-medium text-sm">{tool.name}</span>
-                          {tool.description ? (
-                            <span className="text-foreground-500 text-xs">{tool.description}</span>
-                          ) : null}
-                        </div>
-                      </SelectItem>
-                    )}
-                  </Select>
+                  />
                   <Textarea label={t('common.prompt')} value={form.instructions ?? ''} onValueChange={onInstChange} />
                 </ModalBody>
                 <ModalFooter className="w-full">
diff --git a/src/renderer/src/components/agent/AllowedToolsSelect.tsx b/src/renderer/src/components/agent/AllowedToolsSelect.tsx
new file mode 100644
index 0000000000..775ae24b83
--- /dev/null
+++ b/src/renderer/src/components/agent/AllowedToolsSelect.tsx
@@ -0,0 +1,54 @@
+import { Chip, cn, Select, SelectedItems, SelectItem, SelectProps } from '@heroui/react'
+import { Tool } from '@renderer/types'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export interface AllowedToolsSelectProps extends Omit<SelectProps, 'children'> {
+  items: Tool[]
+}
+
+export const AllowedToolsSelect: React.FC<AllowedToolsSelectProps> = (props) => {
+  const { t } = useTranslation()
+  const { items: availableTools, className, ...rest } = props
+
+  const renderSelectedTools = useCallback((items: SelectedItems<Tool>) => {
+    if (!items.length) {
+      return null
+    }
+    return (
+      <div className="flex flex-wrap gap-2">
+        {items.map((item) => (
+          <Chip key={item.key} size="sm" variant="flat" className="max-w-[160px] truncate">
+            {item.data?.name ?? item.textValue ?? item.key}
+          </Chip>
+        ))}
+      </div>
+    )
+  }, [])
+
+  return (
+    <Select
+      aria-label={t('agent.session.allowed_tools.label')}
+      selectionMode="multiple"
+      isMultiline
+      label={t('agent.session.allowed_tools.label')}
+      placeholder={t('agent.session.allowed_tools.placeholder')}
+      description={
+        availableTools.length ? t('agent.session.allowed_tools.helper') : t('agent.session.allowed_tools.empty')
+      }
+      isDisabled={!availableTools.length}
+      items={availableTools}
+      renderValue={renderSelectedTools}
+      className={cn('max-w-xl', className)}
+      {...rest}>
+      {(tool) => (
+        <SelectItem key={tool.id} textValue={tool.name}>
+          <div className="flex flex-col">
+            <span className="font-medium text-sm">{tool.name}</span>
+            {tool.description ? <span className="text-foreground-500 text-xs">{tool.description}</span> : null}
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  )
+}
diff --git a/src/renderer/src/components/agent/index.tsx b/src/renderer/src/components/agent/index.tsx
new file mode 100644
index 0000000000..2d346a826a
--- /dev/null
+++ b/src/renderer/src/components/agent/index.tsx
@@ -0,0 +1 @@
+export { AllowedToolsSelect } from './AllowedToolsSelect'
diff --git a/src/renderer/src/pages/settings/AgentSettings/AgentEssentialSettings.tsx b/src/renderer/src/pages/settings/AgentSettings/AgentEssentialSettings.tsx
index f6cdb5704b..7df39a7a93 100644
--- a/src/renderer/src/pages/settings/AgentSettings/AgentEssentialSettings.tsx
+++ b/src/renderer/src/pages/settings/AgentSettings/AgentEssentialSettings.tsx
@@ -1,10 +1,11 @@
-import { Button, Chip, Select as HeroSelect, SelectedItems, SelectItem, Tooltip } from '@heroui/react'
+import { Button, Tooltip } from '@heroui/react'
 import { loggerService } from '@logger'
 import type { Selection } from '@react-types/shared'
+import { AllowedToolsSelect } from '@renderer/components/agent'
 import { ApiModelLabel } from '@renderer/components/ApiModelLabel'
 import { useApiModels } from '@renderer/hooks/agents/useModels'
 import { useUpdateAgent } from '@renderer/hooks/agents/useUpdateAgent'
-import { GetAgentResponse, Tool, UpdateAgentForm } from '@renderer/types'
+import { GetAgentResponse, UpdateAgentForm } from '@renderer/types'
 import { Input, Select } from 'antd'
 import { DefaultOptionType } from 'antd/es/select'
 import { Plus } from 'lucide-react'
@@ -116,22 +117,6 @@ const AgentEssentialSettings: FC<AgentEssentialSettingsProps> = ({ agent, update
     [agent, t, updateAccessiblePaths]
   )
 
-  const renderSelectedTools = useCallback((items: SelectedItems<Tool>) => {
-    if (!items.length) {
-      return null
-    }
-
-    return (
-      <div className="flex flex-wrap gap-2">
-        {items.map((item) => (
-          <Chip key={item.key} size="sm" variant="flat" className="max-w-[160px] truncate">
-            {item.data?.name ?? item.textValue ?? item.key}
-          </Chip>
-        ))}
-      </div>
-    )
-  }, [])
-
   const onAllowedToolsChange = useCallback(
     (keys: Selection) => {
       if (!agent) return
@@ -149,20 +134,23 @@ const AgentEssentialSettings: FC<AgentEssentialSettingsProps> = ({ agent, update
         }
         return filtered
       })
-
-      const previous = agent.allowed_tools ?? []
-      const previousSet = new Set(previous)
-      const isSameSelection = filtered.length === previousSet.size && filtered.every((id) => previousSet.has(id))
-
-      if (isSameSelection) {
-        return
-      }
-
-      updateAllowedTools(filtered)
     },
-    [agent, availableTools, updateAllowedTools]
+    [agent, availableTools]
   )
 
+  const onAllowedToolsSelected = useCallback(() => {
+    if (!agent) return
+    const previous = agent.allowed_tools ?? []
+    const previousSet = new Set(previous)
+    const isSameSelection =
+      allowedToolIds.length === previousSet.size && allowedToolIds.every((id) => previousSet.has(id))
+
+    if (isSameSelection) {
+      return
+    }
+    updateAllowedTools(allowedToolIds)
+  }, [agent, allowedToolIds, updateAllowedTools])
+
   if (!agent) return null
 
   return (
@@ -199,28 +187,12 @@ const AgentEssentialSettings: FC<AgentEssentialSettingsProps> = ({ agent, update
       </SettingsItem>
       <SettingsItem>
         <SettingsTitle>{t('agent.session.allowed_tools.label')}</SettingsTitle>
-        <HeroSelect
-          aria-label={t('agent.session.allowed_tools.label')}
-          selectionMode="multiple"
+        <AllowedToolsSelect
+          items={availableTools}
           selectedKeys={selectedToolKeys}
           onSelectionChange={onAllowedToolsChange}
-          placeholder={t('agent.session.allowed_tools.placeholder')}
-          description={
-            availableTools.length ? t('agent.session.allowed_tools.helper') : t('agent.session.allowed_tools.empty')
-          }
-          isDisabled={!availableTools.length}
-          items={availableTools}
-          renderValue={renderSelectedTools}
-          className="max-w-xl">
-          {(tool) => (
-            <SelectItem key={tool.id} textValue={tool.name}>
-              <div className="flex flex-col">
-                <span className="font-medium text-sm">{tool.name}</span>
-                {tool.description ? <span className="text-foreground-500 text-xs">{tool.description}</span> : null}
-              </div>
-            </SelectItem>
-          )}
-        </HeroSelect>
+          onClose={onAllowedToolsSelected}
+        />
       </SettingsItem>
       <SettingsItem>
         <SettingsTitle