From 926f85ce4fb342750ceed6c80e6943a05d44eff7 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 13 Nov 2024 16:43:43 +0800
Subject: [PATCH] tool selector trigger

---
 .../model-provider-page/model-modal/Form.tsx  |   2 +-
 .../model-provider-page/model-modal/Input.tsx |   4 +-
 .../plugin-detail-panel/endpoint-modal.tsx    |   9 +-
 .../components/tools/tool-selector/index.tsx  | 111 ++++++++++++++++++
 .../tools/tool-selector/tool-trigger.tsx      |  45 +++++++
 .../workflow/block-selector/tool-picker.tsx   |   1 -
 .../block-selector/tool/action-item.tsx       |   3 +-
 7 files changed, 168 insertions(+), 7 deletions(-)
 create mode 100644 web/app/components/tools/tool-selector/index.tsx
 create mode 100644 web/app/components/tools/tool-selector/tool-trigger.tsx

diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index 90d0688db0..b1788b89bc 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -73,7 +73,7 @@ const Form: FC<FormProps> = ({
     const newValue = {
       ...value[key],
       provider: model.provider,
-      name: model.modelId,
+      model: model.modelId,
       mode: model.mode,
     }
     onChange({ ...value, [key]: newValue })
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
index ee9d75becc..041b44a507 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
@@ -41,9 +41,9 @@ const Input: FC<InputProps> = ({
       <input
         tabIndex={0}
         className={`
-          block px-3 w-full h-8 bg-gray-100 text-sm rounded-lg border border-transparent
+          block px-3 w-full h-8 bg-components-input-bg-normal text-sm rounded-lg border border-transparent
           appearance-none outline-none caret-primary-600
-          hover:border-[rgba(0,0,0,0.08)] hover:bg-gray-50
+          hover:border-[rgba(0,0,0,0.08)] hover:bg-state-hover-alt
           focus:bg-white focus:border-gray-300 focus:shadow-xs
           placeholder:text-sm placeholder:text-gray-400
           ${validated && 'pr-[30px]'}
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
index c09de2bdb2..63b580429f 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiArrowRightUpLine, RiCloseLine } from '@remixicon/react'
 import ActionButton from '@/app/components/base/action-button'
@@ -11,6 +11,8 @@ import Toast from '@/app/components/base/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import cn from '@/utils/classnames'
 
+import ToolSelector from '@/app/components/tools/tool-selector'
+
 type Props = {
   formSchemas: any
   defaultValues?: any
@@ -38,6 +40,8 @@ const EndpointModal: FC<Props> = ({
     onSaved(tempCredential)
   }
 
+  const [mockTool, setTool] = useState<any>()
+
   return (
     <Drawer
       isOpen
@@ -69,7 +73,7 @@ const EndpointModal: FC<Props> = ({
               isEditMode={true}
               showOnVariableMap={{}}
               validating={false}
-              inputClassName='!bg-gray-50'
+              inputClassName='bg-components-input-bg-normal hover:bg-state-base-hover-alt'
               fieldMoreInfo={item => item.url
                 ? (<a
                   href={item.url}
@@ -81,6 +85,7 @@ const EndpointModal: FC<Props> = ({
                 </a>)
                 : null}
             />
+            <ToolSelector disabled={false} value={mockTool} onSelect={setTool} />
           </div>
           <div className={cn('p-4 pt-0 flex justify-end')} >
             <div className='flex gap-2'>
diff --git a/web/app/components/tools/tool-selector/index.tsx b/web/app/components/tools/tool-selector/index.tsx
new file mode 100644
index 0000000000..af78695740
--- /dev/null
+++ b/web/app/components/tools/tool-selector/index.tsx
@@ -0,0 +1,111 @@
+'use client'
+import type { FC } from 'react'
+import React, { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import ToolTrigger from '@/app/components/tools/tool-selector/tool-trigger'
+import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
+
+import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
+// import AddToolModal from '@/app/components/tools/add-tool-modal'
+import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
+import type {
+  OffsetOptions,
+  Placement,
+} from '@floating-ui/react'
+
+type Props = {
+  value?: {
+    provider: string
+    tool_name: string
+  }
+  disabled: boolean
+  placement?: Placement
+  offset?: OffsetOptions
+  onSelect: (tool: {
+    provider: string
+    tool_name: string
+  }) => void
+  supportAddCustomTool?: boolean
+}
+const ToolSelector: FC<Props> = ({
+  value,
+  disabled,
+  placement = 'bottom',
+  offset = 0,
+  onSelect,
+}) => {
+  const { t } = useTranslation()
+  const [isShow, onShowChange] = useState(false)
+  const handleTriggerClick = () => {
+    if (disabled) return
+    onShowChange(true)
+  }
+  const { data: buildInTools } = useAllBuiltInTools()
+  const { data: customTools } = useAllCustomTools()
+  const { data: workflowTools } = useAllWorkflowTools()
+  const currentProvider = useMemo(() => {
+    const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])]
+    return mergedTools.find((toolWithProvider) => {
+      return toolWithProvider.id === value?.provider && toolWithProvider.tools.some(tool => tool.name === value?.tool_name)
+    })
+  }, [value, buildInTools, customTools, workflowTools])
+  const [isShowChooseTool, setIsShowChooseTool] = useState(false)
+  const [isShowSettingAuth, setShowSettingAuth] = useState(false)
+
+  const handleToolAuthSetting = (value: any) => {
+    // const newModelConfig = produce(modelConfig, (draft) => {
+    //   const tool = (draft.agentConfig.tools).find((item: any) => item.provider_id === value?.collection?.id && item.tool_name === value?.tool_name)
+    //   if (tool)
+    //     (tool as AgentTool).notAuthor = false
+    // })
+    // setModelConfig(newModelConfig)
+  }
+
+  const handleSelectTool = (tool: ToolDefaultValue) => {
+    const toolValue = {
+      provider: tool.provider_id,
+      tool_name: tool.tool_name,
+    }
+    onSelect(toolValue)
+  }
+
+  return (
+    <>
+      <PortalToFollowElem
+        placement={placement}
+        offset={offset}
+        open={isShow}
+        onOpenChange={onShowChange}
+      >
+        <PortalToFollowElemTrigger
+          className='w-full'
+          onClick={handleTriggerClick}
+        >
+          <ToolTrigger open={isShow} provider={currentProvider} />
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1000]'>
+          <div className="relative w-[389px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+            <div className='px-4 py-3 flex flex-col gap-1'>
+              <div className='h-6 flex items-center system-sm-regular text-text-secondary'>Tool</div>
+              <ToolPicker
+                placement='bottom'
+                trigger={<ToolTrigger open={isShowChooseTool} provider={currentProvider} />}
+                isShow={isShowChooseTool}
+                onShowChange={setIsShowChooseTool}
+                disabled={false}
+                supportAddCustomTool
+                onSelect={handleSelectTool}
+              />
+            </div>
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </>
+  )
+}
+export default React.memo(ToolSelector)
diff --git a/web/app/components/tools/tool-selector/tool-trigger.tsx b/web/app/components/tools/tool-selector/tool-trigger.tsx
new file mode 100644
index 0000000000..79efa4a06a
--- /dev/null
+++ b/web/app/components/tools/tool-selector/tool-trigger.tsx
@@ -0,0 +1,45 @@
+'use client'
+import React from 'react'
+import {
+  RiArrowDownSLine,
+} from '@remixicon/react'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import { BlockEnum } from '@/app/components/workflow/types'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+type Props = {
+  open: boolean
+  provider?: ToolWithProvider
+  value?: {
+    provider: string
+    tool_name: string
+  }
+}
+
+const ToolTrigger = ({
+  open,
+  provider,
+  value,
+}: Props) => {
+  return (
+    <div className={cn('group flex items-center p-2 pl-3 bg-components-input-bg-normal rounded-lg hover:bg-state-base-hover-alt', open && 'bg-state-base-hover-alt')}>
+      {value && provider && (
+        <BlockIcon
+          className='shrink-0'
+          type={BlockEnum.Tool}
+          toolIcon={provider.icon}
+        />
+      )}
+      {value && (
+        <div className='grow system-sm-regular text-text-secondary'>{value.tool_name}</div>
+      )}
+      {!value && (
+        <div className='grow text-components-input-text-placeholder system-sm-regular'>Select a tool ...</div>
+      )}
+      <RiArrowDownSLine className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
+    </div>
+  )
+}
+
+export default ToolTrigger
diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx
index 44f7c73e80..1990c6daca 100644
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -106,7 +106,6 @@ const ToolPicker: FC<Props> = ({
       </PortalToFollowElemTrigger>
 
       <PortalToFollowElemContent className='z-[1000]'>
-        { }
         <div className="relative w-[320px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
           <div className='p-2 pb-1'>
             <SearchBox
diff --git a/web/app/components/workflow/block-selector/tool/action-item.tsx b/web/app/components/workflow/block-selector/tool/action-item.tsx
index e33f625861..cc49039948 100644
--- a/web/app/components/workflow/block-selector/tool/action-item.tsx
+++ b/web/app/components/workflow/block-selector/tool/action-item.tsx
@@ -12,7 +12,7 @@ import BlockIcon from '../../block-icon'
 type Props = {
   provider: ToolWithProvider
   payload: Tool
-  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+  onSelect: (type: BlockEnum, tool?: ToolDefaultValue & { is_team_authorization: boolean }) => void
 }
 
 const ToolItem: FC<Props> = ({
@@ -57,6 +57,7 @@ const ToolItem: FC<Props> = ({
             tool_name: payload.name,
             tool_label: payload.label[language],
             title: payload.label[language],
+            is_team_authorization: provider.is_team_authorization,
             params,
           })
         }}