hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-07 01:46:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat/model as tool (#2744)

Browse Source
This commit is contained in:
Yeuoly
2024-03-08 15:22:55 +08:00
committed by GitHub
parent 3231a8c51c
commit 40c646cf7a
26 changed files with 840 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/app/components/tools/index.tsx
View File

@@ -18,7 +18,7 @@ import NoSearchRes from './info/no-search-res'
import NoCustomToolPlaceholder from './no-custom-tool-placeholder'
import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
import TabSlider from '@/app/components/base/tab-slider'
import { createCustomCollection, fetchCollectionList as doFetchCollectionList, fetchBuiltInToolList, fetchCustomToolList } from '@/service/tools'
import { createCustomCollection, fetchCollectionList as doFetchCollectionList, fetchBuiltInToolList, fetchCustomToolList, fetchModelToolList } from '@/service/tools'
import type { AgentTool } from '@/types/app'
type Props = {
@@ -89,9 +89,11 @@ const Tools: FC<Props> = ({
const showCollectionList = (() => {
let typeFilteredList: Collection[] = []
if (collectionType === CollectionType.all)
typeFilteredList = collectionList
else
typeFilteredList = collectionList.filter(item => item.type === collectionType)
typeFilteredList = collectionList.filter(item => item.type !== CollectionType.model)
else if (collectionType === CollectionType.builtIn)
typeFilteredList = collectionList.filter(item => item.type === CollectionType.builtIn)
else if (collectionType === CollectionType.custom)
typeFilteredList = collectionList.filter(item => item.type === CollectionType.custom)
if (query)
return typeFilteredList.filter(item => item.name.includes(query))
@@ -122,6 +124,10 @@ const Tools: FC<Props> = ({
const list = await fetchBuiltInToolList(currCollection.name)
setCurrentTools(list)
}
else if (currCollection.type === CollectionType.model) {
const list = await fetchModelToolList(currCollection.name)
setCurrentTools(list)
}
else {
const list = await fetchCustomToolList(currCollection.name)
setCurrentTools(list)
@@ -130,7 +136,7 @@ const Tools: FC<Props> = ({
catch (e) { }
setIsDetailLoading(false)
})()
}, [currCollection?.name])
}, [currCollection?.name, currCollection?.type])
const [isShowEditCollectionToolModal, setIsShowEditCollectionToolModal] = useState(false)
const handleCreateToolCollection = () => {
@@ -197,7 +203,7 @@ const Tools: FC<Props> = ({
(showCollectionList.length > 0 || !query)
? <ToolNavList
className='mt-2 grow height-0 overflow-y-auto'
currentName={currCollection?.name || ''}
currentIndex={currCollectionIndex || 0}
list={showCollectionList}
onChosen={setCurrCollectionIndex}
/>

10
web/app/components/tools/tool-list/header.tsx
View File

@@ -29,9 +29,8 @@ const Header: FC<Props> = ({
const { t } = useTranslation()
const isInToolsPage = loc === LOC.tools
const isInDebugPage = !isInToolsPage
const needAuth = collection?.allow_delete
// const isBuiltIn = collection.type === CollectionType.builtIn
const needAuth = collection?.allow_delete || collection?.type === CollectionType.model
const isAuthed = collection.is_team_authorization
return (
<div className={cn(isInToolsPage ? 'py-4 px-6' : 'py-[11px] pl-4 pr-3', 'flex justify-between items-start border-b border-gray-200')}>
@@ -50,10 +49,13 @@ const Header: FC<Props> = ({
)}
</div>
</div>
{collection.type === CollectionType.builtIn && needAuth && (
{(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && needAuth && (
<div
className={cn('cursor-pointer', 'ml-1 shrink-0 flex items-center h-8 border border-gray-200 rounded-lg px-3 space-x-2 shadow-xs')}
onClick={() => onShowAuth()}
onClick={() => {
if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
onShowAuth()
}}
>
<div className={cn(isAuthed ? 'border-[#12B76A] bg-[#32D583]' : 'border-gray-400 bg-gray-300', 'rounded h-2 w-2 border')}></div>
<div className='leading-5 text-sm font-medium text-gray-700'>{t(`tools.auth.${isAuthed ? 'authorized' : 'unauthorized'}`)}</div>

34
web/app/components/tools/tool-list/index.tsx
View File

@@ -8,6 +8,7 @@ import type { Collection, CustomCollectionBackend, Tool } from '../types'
import Loading from '../../base/loading'
import { ArrowNarrowRight } from '../../base/icons/src/vender/line/arrows'
import Toast from '../../base/toast'
import { ConfigurateMethodEnum } from '../../header/account-setting/model-provider-page/declarations'
import Header from './header'
import Item from './item'
import AppIcon from '@/app/components/base/app-icon'
@@ -16,6 +17,8 @@ import { fetchCustomCollection, removeBuiltInToolCredential, removeCustomCollect
import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
import type { AgentTool } from '@/types/app'
import { MAX_TOOLS_NUM } from '@/config'
import { useModalContext } from '@/context/modal-context'
import { useProviderContext } from '@/context/provider-context'
type Props = {
collection: Collection | null
@@ -42,9 +45,32 @@ const ToolList: FC<Props> = ({
const { t } = useTranslation()
const isInToolsPage = loc === LOC.tools
const isBuiltIn = collection?.type === CollectionType.builtIn
const isModel = collection?.type === CollectionType.model
const needAuth = collection?.allow_delete
const { setShowModelModal } = useModalContext()
const [showSettingAuth, setShowSettingAuth] = useState(false)
const { modelProviders: providers } = useProviderContext()
const showSettingAuthModal = () => {
if (isModel) {
const provider = providers.find(item => item.provider === collection?.id)
if (provider) {
setShowModelModal({
payload: {
currentProvider: provider,
currentConfigurateMethod: ConfigurateMethodEnum.predefinedModel,
currentCustomConfigrationModelFixedFields: undefined,
},
onSaveCallback: () => {
onRefreshData()
},
})
}
}
else {
setShowSettingAuth(true)
}
}
const [customCollection, setCustomCollection] = useState<CustomCollectionBackend | null>(null)
useEffect(() => {
@@ -116,7 +142,7 @@ const ToolList: FC<Props> = ({
icon={icon}
collection={collection}
loc={loc}
onShowAuth={() => setShowSettingAuth(true)}
onShowAuth={() => showSettingAuthModal()}
onShowEditCustomCollection={() => setIsShowEditCustomCollectionModal(true)}
/>
<div className={cn(isInToolsPage ? 'px-6 pt-4' : 'px-4 pt-3')}>
@@ -124,12 +150,12 @@ const ToolList: FC<Props> = ({
<div className=''>{t('tools.includeToolNum', {
num: list.length,
})}</div>
{needAuth && isBuiltIn && !collection.is_team_authorization && (
{needAuth && (isBuiltIn || isModel) && !collection.is_team_authorization && (
<>
<div>·</div>
<div
className='flex items-center text-[#155EEF] cursor-pointer'
onClick={() => setShowSettingAuth(true)}
onClick={() => showSettingAuthModal()}
>
<div>{t('tools.auth.setup')}</div>
<ArrowNarrowRight className='ml-0.5 w-3 h-3' />
@@ -149,7 +175,7 @@ const ToolList: FC<Props> = ({
collection={collection}
isInToolsPage={isInToolsPage}
isToolNumMax={(addedTools?.length || 0) >= MAX_TOOLS_NUM}
added={!!addedTools?.find(v => v.provider_id === collection.id && v.tool_name === item.name)}
added={!!addedTools?.find(v => v.provider_id === collection.id && v.provider_type === collection.type && v.tool_name === item.name)}
onAdd={!isInToolsPage ? tool => onAddTool?.(collection as Collection, tool) : undefined}
/>
))}

2
web/app/components/tools/tool-list/item.tsx
View File

@@ -35,6 +35,7 @@ const Item: FC<Props> = ({
const language = getLanguage(locale)
const isBuiltIn = collection.type === CollectionType.builtIn
const isModel = collection.type === CollectionType.model
const canShowDetail = isInToolsPage
const [showDetail, setShowDetail] = useState(false)
const addBtn = <Button className='shrink-0 flex items-center h-7 !px-3 !text-xs !font-medium !text-gray-700' disabled={added || !collection.is_team_authorization} onClick={() => onAdd?.(payload)}>{t(`common.operation.${added ? 'added' : 'add'}`)}</Button>
@@ -73,6 +74,7 @@ const Item: FC<Props> = ({
setShowDetail(false)
}}
isBuiltIn={isBuiltIn}
isModel={isModel}
/>
)}
</>

6
web/app/components/tools/tool-nav-list/index.tsx
View File

@@ -6,21 +6,21 @@ import Item from './item'
import type { Collection } from '@/app/components/tools/types'
type Props = {
className?: string
currentName: string
currentIndex: number
list: Collection[]
onChosen: (index: number) => void
}
const ToolNavList: FC<Props> = ({
className,
currentName,
currentIndex,
list,
onChosen,
}) => {
return (
<div className={cn(className)}>
{list.map((item, index) => (
<Item isCurrent={item.name === currentName} key={item.name} payload={item} onClick={() => onChosen(index)}></Item>
<Item isCurrent={index === currentIndex} key={index} payload={item} onClick={() => onChosen(index)}></Item>
))}
</div>
)

1
web/app/components/tools/types.ts
View File

@@ -26,6 +26,7 @@ export enum CollectionType {
all = 'all',
builtIn = 'builtin',
custom = 'api',
model = 'model',
}
export type Emoji = {