'use client'
|
import type { FC } from 'react'
|
import React, { useState } from 'react'
|
import { useTranslation } from 'react-i18next'
|
import { useContext } from 'use-context-selector'
|
import produce from 'immer'
|
import { useFormattingChangedDispatcher } from '../../debug/hooks'
|
import CreateAppModal from '@/app/components/app/create-app-modal'
|
import Panel from '@/app/components/app/configuration/base/feature-panel'
|
import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
|
import ConfigContext from '@/context/debug-configuration'
|
import type { AgentTool } from '@/types/app'
|
import { type Collection } from '@/app/components/tools/types'
|
import { useProviderContext } from '@/context/provider-context'
|
|
type AgentToolWithMoreInfo = AgentTool & { icon: any; collection?: Collection } | null
|
const CreateWorkFlow: FC = () => {
|
const { t } = useTranslation()
|
const [isShowChooseTool, setIsShowChooseTool] = useState(false)
|
const [showNewAppTemplateDialog, setShowNewAppTemplateDialog] = useState(false)
|
const { modelConfig, setModelConfig, collectionList } = useContext(ConfigContext)
|
const formattingChangedDispatcher = useFormattingChangedDispatcher()
|
const [showNewAppModal, setShowNewAppModal] = useState(false)
|
const { onPlanInfoChanged } = useProviderContext()
|
|
const [currentTool, setCurrentTool] = useState<AgentToolWithMoreInfo>(null)
|
const [isShowSettingTool, setIsShowSettingTool] = useState(false)
|
const tools = (modelConfig?.agentConfig?.tools as AgentTool[] || []).map((item) => {
|
const collection = collectionList.find(collection => collection.id === item.provider_id && collection.type === item.provider_type)
|
const icon = collection?.icon
|
return {
|
...item,
|
icon,
|
collection,
|
}
|
})
|
|
const handleToolSettingChange = (value: Record<string, any>) => {
|
const newModelConfig = produce(modelConfig, (draft) => {
|
const tool = (draft.agentConfig.tools).find((item: any) => item.provider_id === currentTool?.collection?.id && item.tool_name === currentTool?.tool_name)
|
if (tool)
|
(tool as AgentTool).tool_parameters = value
|
})
|
setModelConfig(newModelConfig)
|
setIsShowSettingTool(false)
|
formattingChangedDispatcher()
|
}
|
|
return (
|
<>
|
<Panel
|
className="mt-2"
|
noBodySpacing={tools.length === 0}
|
headerIcon={
|
<span> - </span>
|
}
|
title={
|
<div className='flex items-center'>
|
<div className='mr-1'>创建工作流</div>
|
</div>
|
}
|
headerRight={
|
<div className='flex items-center'>
|
<OperationBtn type="add" actionName="创建" onClick={() => setShowNewAppModal(true)} />
|
</div>
|
}
|
>
|
<div className='grid gap-1 grid-cols-1 2xl:grid-cols-2 items-center flex-wrap justify-between'></div>
|
</Panel >
|
<CreateAppModal
|
show={showNewAppModal}
|
onClose={() => setShowNewAppModal(false)}
|
isWorkFlow={true}
|
onSuccess={() => {
|
onPlanInfoChanged()
|
}}
|
onCreateFromTemplate={() => {
|
setShowNewAppTemplateDialog(true)
|
setShowNewAppModal(false)
|
}}
|
/>
|
</>
|
)
|
}
|
export default React.memo(CreateWorkFlow)
|
