fix: can choose selected tools and show tool name instead of label (#13025)

web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx

@@ -9,7 +9,7 @@ import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-sele
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import Divider from '@/app/components/base/divider'
-import type { ToolValue } from '@/app/components/plugins/plugin-detail-panel/tool-selector'
+import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -85,7 +85,7 @@ const MultipleToolSelector = ({
               popupContent={tooltip}
               needsDelay
             >
-              <div><RiQuestionLine className='w-3.5 h-3.5 text-text-quaternary hover:text-text-tertiary'/></div>
+              <div><RiQuestionLine className='w-3.5 h-3.5 text-text-quaternary hover:text-text-tertiary' /></div>
             </Tooltip>
           )}
           {supportCollapse && (
@@ -119,6 +119,7 @@ const MultipleToolSelector = ({
           <ToolSelector
             scope={scope}
             value={undefined}
+            selectedTools={value}
             onSelect={handleAdd}
             controlledState={open}
             onControlledStateChange={setOpen}
@@ -134,6 +135,7 @@ const MultipleToolSelector = ({
               <ToolSelector
                 scope={scope}
                 value={item}
+                selectedTools={value}
                 onSelect={item => handleConfigure(item, index)}
                 onDelete={() => handleDelete(index)}
                 supportEnableSwitch

web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx

@@ -35,7 +35,7 @@ import {
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { usePluginInstalledCheck } from '@/app/components/plugins/plugin-detail-panel/tool-selector/hooks'
 import { CollectionType } from '@/app/components/tools/types'
-import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
+import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
 import type {
   OffsetOptions,
   Placement,
@@ -43,20 +43,13 @@ import type {
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
 
-export type ToolValue = {
-  provider_name: string
-  tool_name: string
-  parameters?: Record<string, any>
-  enabled?: boolean
-  extra?: Record<string, any>
-}
-
 type Props = {
   disabled?: boolean
   placement?: Placement
   offset?: OffsetOptions
   scope?: string
   value?: ToolValue
+  selectedTools?: ToolValue[]
   onSelect: (tool: {
     provider_name: string
     tool_name: string
@@ -72,6 +65,7 @@ type Props = {
 }
 const ToolSelector: FC<Props> = ({
   value,
+  selectedTools,
   disabled,
   placement = 'left',
   offset = 4,
@@ -113,6 +107,7 @@ const ToolSelector: FC<Props> = ({
       provider_name: tool.provider_id,
       type: tool.provider_type,
       tool_name: tool.tool_name,
+      tool_label: tool.tool_label,
       parameters: paramValues,
       enabled: tool.is_team_authorization,
       extra: {
@@ -215,7 +210,7 @@ const ToolSelector: FC<Props> = ({
               open={isShow}
               icon={currentProvider?.icon || manifestIcon}
               providerName={value.provider_name}
-              toolName={value.tool_name}
+              toolLabel={value.tool_label || value.tool_name}
               showSwitch={supportEnableSwitch}
               switchValue={value.enabled}
               onSwitchChange={handleEnabledChange}
@@ -264,6 +259,7 @@ const ToolSelector: FC<Props> = ({
                       supportAddCustomTool
                       onSelect={handleSelectTool}
                       scope={scope}
+                      selectedTools={selectedTools}
                     />
                   </div>
                   <div className='flex flex-col gap-1'>

web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx

@@ -21,7 +21,7 @@ import cn from '@/utils/classnames'
 type Props = {
   icon?: any
   providerName?: string
-  toolName?: string
+  toolLabel?: string
   showSwitch?: boolean
   switchValue?: boolean
   onSwitchChange?: (value: boolean) => void
@@ -41,7 +41,7 @@ const ToolItem = ({
   open,
   icon,
   providerName,
-  toolName,
+  toolLabel,
   showSwitch,
   switchValue,
   onSwitchChange,
@@ -83,7 +83,7 @@ const ToolItem = ({
       )}
       <div className={cn('pl-0.5 grow truncate', isTransparent && 'opacity-50')}>
         <div className='text-text-tertiary system-2xs-medium-uppercase'>{providerNameText}</div>
-        <div className='text-text-secondary system-xs-medium'>{toolName}</div>
+        <div className='text-text-secondary system-xs-medium'>{toolLabel}</div>
       </div>
       <div className='hidden group-hover:flex items-center gap-1'>
         {!noAuth && !isError && !uninstalled && !versionMismatch && (