ngskcloud
/
gcgj-dify-1.7.0
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

get list & update list

Browse Source
pull/22091/head
jZonG 1 year ago
parent 32f87db951
commit 9556866d38
2 changed files with 86 additions and 43 deletions
Show Stats Download Patch File Download Diff File

88
web/app/components/tools/mcp/detail/content.tsx
Unescape Escape View File

@ -18,11 +18,17 @@ import Indicator from '@/app/components/header/indicator'
import MCPModal from '../modal'
import OperationDropdown from './operation-dropdown'
import ListLoading from './list-loading'
import { useDeleteMCP, useUpdateMCP } from '@/service/use-tools'
import {
useDeleteMCP,
useInvalidateMCPTools,
useMCPTools,
useUpdateMCP,
useUpdateMCPTools,
} from '@/service/use-tools'
import cn from '@/utils/classnames'
type Props = {
detail?: ToolWithProvider
detail: ToolWithProvider
onUpdate: (isDelete?: boolean) => void
onHide: () => void
}
@ -35,6 +41,17 @@ const MCPDetailContent: FC<Props> = ({
const { t } = useTranslation()
const { isCurrentWorkspaceManager } = useAppContext()
const { data: toolList = [], isPending: isGettingTools } = useMCPTools(detail.is_team_authorization ? detail.id : '')
const invalidateMCPTools = useInvalidateMCPTools()
const { mutateAsync, isPending: isUpdating } = useUpdateMCPTools(detail.id)
const handleUpdateTools = useCallback(async () => {
if (!detail)
return
await mutateAsync()
invalidateMCPTools(detail.id)
}, [detail, mutateAsync])
const { mutate: updateMCP } = useUpdateMCP({
onSuccess: onUpdate,
})
@ -82,7 +99,7 @@ const MCPDetailContent: FC<Props> = ({
}
}, [detail, showDeleting, hideDeleting, hideDeleteConfirm, onUpdate])
const [loading, setLoading] = useState(true)
const [loading, setLoading] = useState(false)
if (!detail)
return null
@ -147,49 +164,66 @@ const MCPDetailContent: FC<Props> = ({
</div>
</div>
<div className='grow'>
{detail.is_team_authorization && isGettingTools && (
<>
<div className='flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2'>
<div className='flex h-6 items-center'>
<div className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.gettingTools')}</div>
</div>
<div></div>
</div>
<div className='flex h-full w-full grow flex-col overflow-hidden px-4 pb-4'>
<ListLoading />
</div>
</>
)}
{!isGettingTools && !toolList.length && (
<div className='flex h-full w-full flex-col items-center justify-center'>
<div className='system-sm-regular mb-3 text-text-tertiary'>{t('tools.mcp.toolsEmpty')}</div>
<Button
variant='primary'
onClick={handleUpdateTools}
>{t('tools.mcp.getTools')}</Button>
</div>
)}
{!isGettingTools && toolList.length > 0 && (
<>
<div className='flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2'>
<div className='flex h-6 items-center'>
<div className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.gettingTools')}</div>
{/* <div className='text-text-secondary system-sm-semibold-uppercase'>{t('tools.mcp.updateTools')}</div> */}
</div>
<div>
<Button size='small'>
<Button size='small' onClick={handleUpdateTools}>
<RiLoopLeftLine className='mr-1 h-3.5 w-3.5' />
{t('tools.mcp.update')}
</Button>
{/* <Button size='small'>
<RiLoader2Line className='h-3.5 w-3.5 mr-1 animate-spin' />
{t('tools.mcp.updating')}
</Button> */}
</div>
</div>
{loading && (
<div className='grow overflow-y-auto'>
{/* list */}
</div>
</>
)}
{isUpdating && (
<>
<div className='flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2'>
<div className='flex h-6 items-center'>
<div className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.updateTools')}</div>
</div>
<div></div>
</div>
<div className='flex h-full w-full grow flex-col overflow-hidden px-4 pb-4'>
<ListLoading />
</div>
</>
)}
{!loading && (
<div className='grow overflow-y-auto'>
{!detail.is_team_authorization && (
<div className='flex h-full w-full flex-col items-center justify-center'>
<div className='system-md-medium mb-1 text-text-secondary'>{t('tools.mcp.authorizingRequired')}</div>
{deleting && <div className='system-md-medium mb-1 text-text-secondary'>{t('tools.mcp.authorizing')}</div>}
{!loading && <div className='system-md-medium mb-1 text-text-secondary'>{t('tools.mcp.authorizingRequired')}</div>}
{loading && <div className='system-md-medium mb-1 text-text-secondary'>{t('tools.mcp.authorizing')}</div>}
<div className='system-sm-regular text-text-tertiary'>{t('tools.mcp.authorizeTip')}</div>
</div>
)}
{detail.is_team_authorization && (
<div className='flex h-full w-full flex-col items-center justify-center'>
<div className='system-sm-regular mb-3 text-text-tertiary'>{t('tools.mcp.toolsEmpty')}</div>
<Button
variant='primary'
onClick={() => {
// TODO
}}
>{t('tools.mcp.getTools')}</Button>
</div>
)}
</div>
)}
</div>
{isShowUpdateModal && (
<MCPModal

15
web/service/use-tools.ts
Unescape Escape View File

@ -148,15 +148,24 @@ export const useDeleteMCP = ({
export const useMCPTools = (providerID: string) => {
return useQuery({
enabled: !!providerID,
queryKey: [NAME_SPACE, 'get-MCP-provider-tool', providerID],
queryFn: () => get<Tool[]>(`/workspaces/current/tool-provider/mcp/tools/${providerID}`),
})
}
export const useInvalidateMCPTools = () => {
const queryClient = useQueryClient()
return (providerID: string) => {
queryClient.invalidateQueries(
{
queryKey: [NAME_SPACE, 'get-MCP-provider-tool', providerID],
})
}
}
export const useUpdateMCPTools = (providerID: string) => {
return useQuery({
queryKey: [NAME_SPACE, 'update-MCP-provider-tool', providerID],
queryFn: () => get<Tool[]>(`/workspaces/current/tool-provider/mcp/update/${providerID}`),
return useMutation({
mutationFn: () => get<Tool[]>(`/workspaces/current/tool-provider/mcp/update/${providerID}`),
})
}

Write Preview
Loading…
Cancel
Save