opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tool selector trigger

This commit is contained in:
JzoNg 2024-11-13 16:43:43 +08:00
parent 6c6e1e90cd
commit 926f85ce4f
7 changed files with 168 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
View File

@ -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 })

4
web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
View File

@ -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]'}

9
web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
View File

@ -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'>

111
web/app/components/tools/tool-selector/index.tsx Normal file
View File

@ -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)

45
web/app/components/tools/tool-selector/tool-trigger.tsx Normal file
View File

@ -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

1
web/app/components/workflow/block-selector/tool-picker.tsx
View File

@ -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

3
web/app/components/workflow/block-selector/tool/action-item.tsx
View File

@ -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,
})
}}