feat: support assistant frontend (#2139)
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
This commit is contained in:
Joel
74
web/app/components/tools/tool-list/header.tsx
Normal file
74
web/app/components/tools/tool-list/header.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useContext } from 'use-context-selector'
|
||||
import cn from 'classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { Collection } from '../types'
|
||||
import { CollectionType, LOC } from '../types'
|
||||
import { Settings01 } from '../../base/icons/src/vender/line/general'
|
||||
import I18n from '@/context/i18n'
|
||||
|
||||
type Props = {
|
||||
icon: JSX.Element
|
||||
collection: Collection
|
||||
loc: LOC
|
||||
onShowAuth: () => void
|
||||
onShowEditCustomCollection: () => void
|
||||
}
|
||||
|
||||
const Header: FC<Props> = ({
|
||||
icon,
|
||||
collection,
|
||||
loc,
|
||||
onShowAuth,
|
||||
onShowEditCustomCollection,
|
||||
}) => {
|
||||
const { locale } = useContext(I18n)
|
||||
const { t } = useTranslation()
|
||||
const isInToolsPage = loc === LOC.tools
|
||||
const isInDebugPage = !isInToolsPage
|
||||
const needAuth = collection?.allow_delete
|
||||
|
||||
// const isBuiltIn = collection.type === CollectionType.builtIn
|
||||
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')}>
|
||||
<div className='flex items-start w-full'>
|
||||
{icon}
|
||||
<div className='ml-3 grow w-0'>
|
||||
<div className='flex items-center h-6 space-x-1'>
|
||||
<div className={cn(isInDebugPage && 'truncate', 'text-base font-semibold text-gray-900')}>{collection.label[locale === 'en' ? 'en_US' : 'zh_Hans']}</div>
|
||||
<div className='text-xs font-normal text-gray-500'>·</div>
|
||||
<div className='text-xs font-normal text-gray-500'>{t('tools.author')} {collection.author}</div>
|
||||
</div>
|
||||
{collection.description && (
|
||||
<div className={cn('leading-[18px] text-[13px] font-normal text-gray-500')}>
|
||||
{collection.description[locale === 'en' ? 'en_US' : 'zh_Hans']}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{collection.type === CollectionType.builtIn && 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()}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{collection.type === CollectionType.custom && (
|
||||
<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={() => onShowEditCustomCollection()}
|
||||
>
|
||||
<Settings01 className='w-4 h-4 text-gray-700' />
|
||||
<div className='leading-5 text-sm font-medium text-gray-700'>{t('tools.createTool.editAction')}</div>
|
||||
</div>
|
||||
)}
|
||||
</div >
|
||||
)
|
||||
}
|
||||
export default React.memo(Header)
|
||||
190
web/app/components/tools/tool-list/index.tsx
Normal file
190
web/app/components/tools/tool-list/index.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import cn from 'classnames'
|
||||
import { CollectionType, LOC } from '../types'
|
||||
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 Header from './header'
|
||||
import Item from './item'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
|
||||
import { fetchCustomCollection, removeBuiltInToolCredential, removeCustomCollection, updateBuiltInToolCredential, updateCustomCollection } from '@/service/tools'
|
||||
import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
|
||||
import type { AgentTool } from '@/types/app'
|
||||
import { MAX_TOOLS_NUM } from '@/config'
|
||||
|
||||
type Props = {
|
||||
collection: Collection | null
|
||||
list: Tool[]
|
||||
// onToolListChange: () => void // custom tools change
|
||||
loc: LOC
|
||||
addedTools?: AgentTool[]
|
||||
onAddTool?: (collection: Collection, payload: Tool) => void
|
||||
onRefreshData: () => void
|
||||
onCollectionRemoved: () => void
|
||||
isLoading: boolean
|
||||
}
|
||||
|
||||
const ToolList: FC<Props> = ({
|
||||
collection,
|
||||
list,
|
||||
loc,
|
||||
addedTools,
|
||||
onAddTool,
|
||||
onRefreshData,
|
||||
onCollectionRemoved,
|
||||
isLoading,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const isInToolsPage = loc === LOC.tools
|
||||
const isBuiltIn = collection?.type === CollectionType.builtIn
|
||||
const needAuth = collection?.allow_delete
|
||||
|
||||
const [showSettingAuth, setShowSettingAuth] = useState(false)
|
||||
|
||||
const [customCollection, setCustomCollection] = useState<CustomCollectionBackend | null>(null)
|
||||
useEffect(() => {
|
||||
if (!collection)
|
||||
return
|
||||
(async () => {
|
||||
if (collection.type === CollectionType.custom) {
|
||||
const res = await fetchCustomCollection(collection.name) as any
|
||||
setCustomCollection({
|
||||
...res,
|
||||
provider: collection.name,
|
||||
} as CustomCollectionBackend)
|
||||
}
|
||||
})()
|
||||
}, [collection])
|
||||
const [isShowEditCollectionToolModal, setIsShowEditCustomCollectionModal] = useState(false)
|
||||
|
||||
const doUpdateCustomToolCollection = async (data: CustomCollectionBackend) => {
|
||||
await updateCustomCollection(data)
|
||||
onRefreshData()
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
setIsShowEditCustomCollectionModal(false)
|
||||
}
|
||||
|
||||
const doRemoveCustomToolCollection = async () => {
|
||||
await removeCustomCollection(collection?.name as string)
|
||||
onCollectionRemoved()
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
setIsShowEditCustomCollectionModal(false)
|
||||
}
|
||||
|
||||
if (!collection || isLoading)
|
||||
return <Loading type='app' />
|
||||
|
||||
const icon = <>{typeof collection.icon === 'string'
|
||||
? (
|
||||
<div
|
||||
className='p-2 bg-cover bg-center border border-gray-100 rounded-lg'
|
||||
>
|
||||
<div className='w-6 h-6 bg-center bg-contain rounded-md'
|
||||
style={{
|
||||
backgroundImage: `url(${collection.icon})`,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<AppIcon
|
||||
size='large'
|
||||
icon={collection.icon.content}
|
||||
background={collection.icon.background}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
return (
|
||||
<div className='flex flex-col h-full pb-4'>
|
||||
<Header
|
||||
icon={icon}
|
||||
collection={collection}
|
||||
loc={loc}
|
||||
onShowAuth={() => setShowSettingAuth(true)}
|
||||
onShowEditCustomCollection={() => setIsShowEditCustomCollectionModal(true)}
|
||||
/>
|
||||
<div className={cn(isInToolsPage ? 'px-6 pt-4' : 'px-4 pt-3')}>
|
||||
<div className='flex items-center h-[4.5] space-x-2 text-xs font-medium text-gray-500'>
|
||||
<div className=''>{t('tools.includeToolNum', {
|
||||
num: list.length,
|
||||
})}</div>
|
||||
{needAuth && isBuiltIn && !collection.is_team_authorization && (
|
||||
<>
|
||||
<div>·</div>
|
||||
<div
|
||||
className='flex items-center text-[#155EEF] cursor-pointer'
|
||||
onClick={() => setShowSettingAuth(true)}
|
||||
>
|
||||
<div>{t('tools.auth.setup')}</div>
|
||||
<ArrowNarrowRight className='ml-0.5 w-3 h-3' />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn(isInToolsPage ? 'px-6' : 'px-4', 'grow h-0 pt-2 overflow-y-auto')}>
|
||||
{/* list */}
|
||||
<div className={cn(isInToolsPage ? 'grid-cols-3 gap-4' : 'grid-cols-1 gap-2', 'grid')}>
|
||||
{list.map(item => (
|
||||
<Item
|
||||
key={item.name}
|
||||
icon={icon}
|
||||
payload={item}
|
||||
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)}
|
||||
onAdd={!isInToolsPage ? tool => onAddTool?.(collection as Collection, tool) : undefined}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{showSettingAuth && (
|
||||
<ConfigCredential
|
||||
collection={collection}
|
||||
onCancel={() => setShowSettingAuth(false)}
|
||||
onSaved={async (value) => {
|
||||
await updateBuiltInToolCredential(collection.name, value)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
await onRefreshData()
|
||||
setShowSettingAuth(false)
|
||||
}}
|
||||
onRemove={async () => {
|
||||
await removeBuiltInToolCredential(collection.name)
|
||||
Toast.notify({
|
||||
type: 'success',
|
||||
message: t('common.api.actionSuccess'),
|
||||
})
|
||||
await onRefreshData()
|
||||
setShowSettingAuth(false)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isShowEditCollectionToolModal && (
|
||||
<EditCustomToolModal
|
||||
payload={customCollection}
|
||||
onHide={() => setIsShowEditCustomCollectionModal(false)}
|
||||
onEdit={doUpdateCustomToolCollection}
|
||||
onRemove={doRemoveCustomToolCollection}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(ToolList)
|
||||
78
web/app/components/tools/tool-list/item.tsx
Normal file
78
web/app/components/tools/tool-list/item.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { useContext } from 'use-context-selector'
|
||||
import cn from 'classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { Collection, Tool } from '../types'
|
||||
import Button from '../../base/button'
|
||||
import { CollectionType } from '../types'
|
||||
import TooltipPlus from '../../base/tooltip-plus'
|
||||
import I18n from '@/context/i18n'
|
||||
import SettingBuiltInTool from '@/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool'
|
||||
|
||||
type Props = {
|
||||
collection: Collection
|
||||
icon: JSX.Element
|
||||
payload: Tool
|
||||
isInToolsPage: boolean
|
||||
isToolNumMax: boolean
|
||||
added?: boolean
|
||||
onAdd?: (payload: Tool) => void
|
||||
}
|
||||
|
||||
const Item: FC<Props> = ({
|
||||
collection,
|
||||
icon,
|
||||
payload,
|
||||
isInToolsPage,
|
||||
isToolNumMax,
|
||||
added,
|
||||
onAdd,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { locale } = useContext(I18n)
|
||||
const isBuiltIn = collection.type === CollectionType.builtIn
|
||||
const canShowDetail = !isBuiltIn || (isBuiltIn && 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>
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cn(canShowDetail && 'cursor-pointer', 'flex justify-between items-start p-4 rounded-xl border border-gray-200 bg-gray-50 shadow-xs')}
|
||||
onClick={() => canShowDetail && setShowDetail(true)}
|
||||
>
|
||||
<div className='flex items-start w-full'>
|
||||
{icon}
|
||||
<div className='ml-3 w-0 grow'>
|
||||
<div className={cn('text-base font-semibold text-gray-900 truncate')}>{payload.label[locale === 'en' ? 'en_US' : 'zh_Hans']}</div>
|
||||
<div className={cn('leading-[18px] text-[13px] font-normal text-gray-500')}>
|
||||
{payload.description[locale === 'en' ? 'en_US' : 'zh_Hans']}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='shrink-0'>
|
||||
{!isToolNumMax && onAdd && (
|
||||
!collection.is_team_authorization
|
||||
? <TooltipPlus popupContent={t('tools.auth.unauthorized')}>
|
||||
{addBtn}
|
||||
</TooltipPlus>
|
||||
: addBtn
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{showDetail && isBuiltIn && (
|
||||
<SettingBuiltInTool
|
||||
collection={collection}
|
||||
toolName={payload.name}
|
||||
readonly
|
||||
onHide={() => {
|
||||
setShowDetail(false)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
export default React.memo(Item)
|
||||
Reference in New Issue
Block a user