adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #42 from SuanmoSuanyangTechnology/feature/workflow_zy

Browse Source 
Feature/workflow zy
This commit is contained in:
yingzhao
2026-01-07 10:02:04 +08:00
committed by GitHub
parent 1a3b85c2fc 7a1131d8af
commit 5040c603ff
15 changed files with 566 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
web/src/views/ApplicationConfig/Agent.tsx
View File

@@ -18,7 +18,9 @@ import type {
Variable,
MemoryConfig,
AiPromptModalRef,
Source
Source,
ToolModalRef,
ToolOption
} from './types'
import type { Model } from '@/views/ModelManagement/types'
import { getModelList } from '@/api/models';
@@ -31,6 +33,8 @@ import { memoryConfigListUrl } from '@/api/memory'
import CustomSelect from '@/components/CustomSelect'
import aiPrompt from '@/assets/images/application/aiPrompt.png'
import AiPromptModal from './components/AiPromptModal'
import ToolModal from './components/ToolModal'
import ToolList from './components/ToolList'
const DescWrapper: FC<{desc: string, className?: string}> = ({desc, className}) => {
return (
@@ -47,12 +51,12 @@ const LabelWrapper: FC<{title: string, className?: string; children?: ReactNode}
</div>
)
}
const SwitchWrapper: FC<{ title: string, desc: string, name: string }> = ({ title, desc, name }) => {
const SwitchWrapper: FC<{ title: string, desc?: string, name: string | string[]; needTransition?: boolean; }> = ({ title, desc, name, needTransition = true }) => {
const { t } = useTranslation();
return (
<div className="rb:flex rb:items-center rb:justify-between">
<LabelWrapper title={t(`application.${title}`)}>
<DescWrapper desc={t(`application.${desc}`)} className="rb:mt-2" />
<LabelWrapper title={needTransition ? t(`application.${title}`) : title}>
{desc && <DescWrapper desc={needTransition ? t(`application.${desc}`) : desc} className="rb:mt-2" />}
</LabelWrapper>
<Form.Item
name={name}
@@ -100,11 +104,11 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
const [formData, setFormData] = useState<{
default_model_config_id?: string,
model_parameters?: Config['model_parameters'],
tools: ToolOption[],
} | null>(null)
const values = Form.useWatch<{
memoryEnabled: boolean;
memory_content?: string | number;
webSearch: boolean;
} & Config>([], form)
const [knowledgeConfig, setKnowledgeConfig] = useState<KnowledgeConfig>({ knowledge_bases: [] })
@@ -149,17 +153,21 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
setLoading(true)
getApplicationConfig(id as string).then(res => {
const response = res as Config
setData(response)
setData({
...response,
tools: Array.isArray(response.tools) ? response.tools : []
})
const { memory, tools } = response
form.setFieldsValue({
...response,
memoryEnabled: memory?.enabled || false,
memory_content: memory?.memory_content ? Number(memory?.memory_content) : undefined,
webSearch: tools?.web_search?.enabled || false,
tools: Array.isArray(tools) ? tools : []
})
setFormData({
default_model_config_id: response.default_model_config_id,
model_parameters: response.model_parameters || {},
tools: Array.isArray(tools) ? tools : []
})
if (response?.knowledge_retrieval?.knowledge_bases?.length) {
getDefaultKnowledgeList(response)
@@ -260,8 +268,9 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
// 保存Agent配置
const handleSave = (flag = true) => {
if (!isSave || !data) return Promise.resolve()
const { memoryEnabled, memory_content, webSearch, ...rest } = values
const { memoryEnabled, memory_content, ...rest } = values
const { knowledge_bases = [], ...knowledgeRest } = knowledgeConfig || {}
// 从原数据中获取memory的其他必要属性
const originalMemory = data.memory || ({} as MemoryConfig)
@@ -285,15 +294,10 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
...(item.config || {})
}))
} as KnowledgeConfig : null,
tools: {
web_search: {
enabled: webSearch,
config: {
web_search: webSearch
}
}
}
tools: toolList
}
console.log('params', rest, params)
return new Promise((resolve, reject) => {
saveAgentConfig(data.app_id, params)
@@ -342,6 +346,19 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
const updatePrompt = (value: string) => {
form.setFieldValue('system_prompt', value)
}
const toolModalRef = useRef<ToolModalRef>(null)
const [toolList, setToolList] = useState<ToolOption[]>([])
const handleAddTool = () => {
toolModalRef.current?.handleOpen()
}
const updateTools = (tool: ToolOption) => {
const tools = [...toolList, tool]
setToolList(tools)
form.setFieldValue('tools', tools)
}
console.log('toolList', toolList)
return (
<>
{loading && <Spin fullscreen></Spin>}
@@ -410,14 +427,12 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
data={data?.variables}
onUpdate={setVariableList}
/>
{/* 工具配置 */}
<Card title={t('application.toolConfiguration')}>
<Space size={24} direction='vertical' style={{ width: '100%' }}>
<SwitchWrapper title="webSearch" desc="webSearchDesc" name="webSearch" />
{/* <SwitchWrapper title="codeExecutor" desc="codeExecutorDesc" name="codeExecutor" />
<SwitchWrapper title="imageGeneration" desc="imageGenerationDesc" name="imageGeneration" /> */}
</Space>
</Card>
<ToolList
data={data?.tools || []}
onUpdate={setToolList}
/>
</Space>
</Form>
</Col>
@@ -454,6 +469,10 @@ const Agent = forwardRef<AgentRef>((_props, ref) => {
defaultModel={defaultModel}
refresh={updatePrompt}
/>
<ToolModal
ref={toolModalRef}
refresh={updateTools}
/>
</>
);
});

53
web/src/views/ApplicationConfig/components/Knowledge.tsx
View File

@@ -31,10 +31,6 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
setEditConfig({ ...(data || {}) })
const knowledge_bases = [...(data.knowledge_bases || [])]
setKnowledgeList(knowledge_bases)
onUpdate(prev => ({
...prev,
knowledge_bases: knowledge_bases,
}))
}
}, [data])
@@ -47,10 +43,10 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
const handleDeleteKnowledge = (id: string) => {
const list = knowledgeList.filter(item => item.id !== id)
setKnowledgeList([...list])
onUpdate(prev => ({
...prev,
onUpdate({
...editConfig,
knowledge_bases: [...list],
}))
})
}
const handleEditKnowledge = (item: KnowledgeBase) => {
knowledgeConfigModalRef.current?.handleOpen(item)
@@ -69,10 +65,10 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
list = [...values as KnowledgeBase[]]
}
setKnowledgeList([...list])
onUpdate(prev => ({
...prev,
onUpdate({
...editConfig,
knowledge_bases: [...list],
}))
})
} else if (type === 'knowledgeConfig') {
const index = knowledgeList.findIndex(item => item.id === (values as KnowledgeBase).kb_id)
const list = [...knowledgeList]
@@ -81,18 +77,19 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
config: {...values as KnowledgeConfigForm}
}
setKnowledgeList([...list])
onUpdate(prev => ({
...prev,
onUpdate({
...editConfig,
knowledge_bases: [...list],
}))
})
} else if (type === 'rerankerConfig') {
setEditConfig(prev => ({ ...prev, ...(values as RerankerConfig) }))
onUpdate(prev => ({
...prev,
...values,
reranker_id: values.rerank_model ? values.reranker_id : undefined,
reranker_top_k: values.rerank_model ? values.reranker_top_k : undefined,
}))
const rerankerValues = values as RerankerConfig
setEditConfig(prev => ({ ...prev, ...rerankerValues }))
onUpdate({
...editConfig,
...rerankerValues,
reranker_id: rerankerValues.rerank_model ? rerankerValues.reranker_id : undefined,
reranker_top_k: rerankerValues.rerank_model ? rerankerValues.reranker_top_k : undefined,
})
}
}
return (
@@ -102,8 +99,8 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
<Button style={{padding: '0 8px', height: '24px'}} onClick={() => handleKnowledgeConfig()}>{t('application.globalConfig')}</Button>
}
>
<div className="rb:flex rb:items-center rb:justify-between rb:mb-[12px]">
<div className="rb:font-medium rb:leading-[20px]">{t('application.associatedKnowledgeBase')}</div>
<div className="rb:flex rb:items-center rb:justify-between rb:mb-3">
<div className="rb:font-medium rb:leading-5">{t('application.associatedKnowledgeBase')}</div>
<Button style={{padding: '0 8px', height: '24px'}} onClick={handleAddKnowledge}>+{t('application.addKnowledgeBase')}</Button>
</div>
@@ -115,21 +112,21 @@ const Knowledge: FC<{data: KnowledgeConfig; onUpdate: (config: KnowledgeConfig)
dataSource={knowledgeList}
renderItem={(item) => (
<List.Item>
<div key={item.id} className="rb:flex rb:items-center rb:justify-between rb:p-[12px_16px] rb:bg-[#FBFDFF] rb:border rb:border-[#DFE4ED] rb:rounded-[8px]">
<div className="rb:font-medium rb:leading-[16px]">
<div key={item.id} className="rb:flex rb:items-center rb:justify-between rb:p-[12px_16px] rb:bg-[#FBFDFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg">
<div className="rb:font-medium rb:leading-4">
{item.name}
<Tag color={item.status === 1 ? 'success' : item.status === 0 ? 'default' : 'error'} className="rb:ml-[8px]">
<Tag color={item.status === 1 ? 'success' : item.status === 0 ? 'default' : 'error'} className="rb:ml-2">
{item.status === 1 ? t('common.enable') : item.status === 0 ? t('common.disabled') : t('common.deleted')}
</Tag>
<div className="rb:mt-[4px] rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[20px]">{t('application.contains', {include_count: item.doc_num})}</div>
<div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-5">{t('application.contains', {include_count: item.doc_num})}</div>
</div>
<Space size={12}>
<div
className="rb:w-[24px] rb:h-[24px] rb:cursor-pointer rb:bg-[url('@/assets/images/editBorder.svg')] rb:hover:bg-[url('@/assets/images/editBg.svg')]"
className="rb:w-6 rb:h-6 rb:cursor-pointer rb:bg-[url('@/assets/images/editBorder.svg')] rb:hover:bg-[url('@/assets/images/editBg.svg')]"
onClick={() => handleEditKnowledge(item)}
></div>
<div
className="rb:w-[24px] rb:h-[24px] rb:cursor-pointer rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]"
className="rb:w-6 rb:h-6 rb:cursor-pointer rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]"
onClick={() => handleDeleteKnowledge(item.id)}
></div>
</Space>

149
web/src/views/ApplicationConfig/components/ToolList.tsx Normal file
View File

@@ -0,0 +1,149 @@
import { type FC, useRef, useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Space, Button, List, Switch } from 'antd'
import Card from './Card'
import type {
ToolModalRef,
ToolOption
} from '../types'
import Empty from '@/components/Empty'
import ToolModal from './ToolModal'
import { getToolMethods, getToolDetail } from '@/api/tools'
const ToolList: FC<{ data: ToolOption[]; onUpdate: (config: ToolOption[]) => void}> = ({data, onUpdate}) => {
const { t } = useTranslation()
const toolModalRef = useRef<ToolModalRef>(null)
const [toolList, setToolList] = useState<ToolOption[]>([])
useEffect(() => {
if (data) {
const processedData = data.map(async (item) => {
if (!item.label && item.tool_id) {
try {
const [toolDetail, methods] = await Promise.all([
getToolDetail(item.tool_id),
getToolMethods(item.tool_id)
])
switch ((toolDetail as any).tool_type) {
case 'mcp':
const mcpFilterItem = (methods as any[]).find(vo => vo.name === item.operation)
return {
...item,
label: mcpFilterItem?.description,
method_id: mcpFilterItem?.method_id,
value: mcpFilterItem?.name,
description: mcpFilterItem?.description,
parameters: mcpFilterItem?.parameters
}
break
case 'builtin':
if ((methods as any[]).length > 1) {
const builtinFilterItem = (methods as any[]).find(vo => vo.name === item.operation)
return {
...item,
label: builtinFilterItem?.description,
method_id: builtinFilterItem?.method_id,
value: builtinFilterItem?.name,
description: builtinFilterItem?.description,
parameters: builtinFilterItem?.parameters
}
}
return {
...item,
label: (methods as any[])[0]?.description,
method_id: (methods as any[])[0]?.method_id,
value: (methods as any[])[0]?.name,
description: (methods as any[])[0]?.description,
parameters: (methods as any[])[0]?.parameters
}
break
default:
const customFilterItem = (methods as any[]).find(vo => vo.method_id === item.operation)
return {
...item,
label: customFilterItem?.name,
method_id: customFilterItem?.method_id,
value: customFilterItem?.name,
description: customFilterItem?.description,
parameters: customFilterItem?.parameters
}
}
} catch (error) {
return item
}
}
return item
})
Promise.all(processedData).then(setToolList)
}
}, [data])
console.log('toolList', toolList)
const handleAddTool = () => {
toolModalRef.current?.handleOpen()
}
const updateTools = (tool: ToolOption) => {
const list = [...toolList, tool]
setToolList(list)
onUpdate(list)
}
const handleDeleteTool = (index: number) => {
const list = toolList.filter((_item, idx) => idx !== index)
setToolList([...list])
onUpdate(list)
}
const handleChangeEnabled = (index: number) => {
const list = toolList.map((item, idx) => {
if (idx === index) {
return {
...item,
enabled: !item.enabled
}
}
return item
})
setToolList([...list])
onUpdate(list)
}
return (
<Card
title={t('application.toolConfiguration')}
extra={
<Button style={{ padding: '0 8px', height: '24px' }} onClick={handleAddTool}>+{t('application.addTool')}</Button>
}
>
{toolList.length === 0
? <Empty size={88} />
:
<List
grid={{ gutter: 12, column: 1 }}
dataSource={toolList}
renderItem={(item, index) => (
<List.Item>
<div key={index} className="rb:flex rb:items-center rb:justify-between rb:p-[12px_16px] rb:bg-[#FBFDFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg">
<div className="rb:font-medium rb:leading-4">
{item.label}
</div>
<Space size={12}>
<div
className="rb:w-6 rb:h-6 rb:cursor-pointer rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]"
onClick={() => handleDeleteTool(index)}
></div>
<Switch checked={item.enabled} onChange={() => handleChangeEnabled(index)} />
</Space>
</div>
</List.Item>
)}
/>
}
<ToolModal
ref={toolModalRef}
refresh={updateTools}
/>
</Card>
)
}
export default ToolList

145
web/src/views/ApplicationConfig/components/ToolModal.tsx Normal file
View File

@@ -0,0 +1,145 @@
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Cascader, type CascaderProps } from 'antd';
import { useTranslation } from 'react-i18next';
import type { ToolModalRef, ToolOption } from '../types'
import RbModal from '@/components/RbModal'
import { getToolMethods, getTools } from '@/api/tools'
import type { ToolType, ToolItem } from '@/views/ToolManagement/types'
const FormItem = Form.Item;
interface ToolModalProps {
refresh: (tool: ToolOption) => void;
}
const ToolModal = forwardRef<ToolModalRef, ToolModalProps>(({
refresh,
}, ref) => {
const { t } = useTranslation();
const [visible, setVisible] = useState(false);
const [form] = Form.useForm();
const [loading, setLoading] = useState(false)
const [optionList, setOptionList] = useState<ToolOption[]>([
{ value: 'mcp', label: t('tool.mcp'), isLeaf: false },
{ value: 'builtin', label: t('tool.inner'), isLeaf: false },
{ value: 'custom', label: t('tool.custom'), isLeaf: false },
])
const [selectdTools, setSelectedTools] = useState<ToolOption[]>([])
// 封装取消方法，添加关闭弹窗逻辑
const handleClose = () => {
setVisible(false);
form.resetFields();
setLoading(false)
setSelectedTools([])
};
const handleOpen = () => {
setVisible(true);
form.resetFields();
setSelectedTools([])
};
// 封装保存方法，添加提交逻辑
const handleSave = () => {
form.validateFields().then(() => {
setLoading(false)
let operation: any = undefined
if (selectdTools[0].value === 'mcp' || (selectdTools[0].value === 'builtin' && selectdTools[1]?.children && selectdTools[1].children.length > 1)) {
operation = selectdTools[2].value
} else if (selectdTools[0].value === 'custom') {
operation = selectdTools[2].method_id
}
const tool = {
...selectdTools[2],
label: selectdTools[0].value === 'custom' ? selectdTools[2].label : selectdTools[2].description,
tool_id: selectdTools[1].value as string,
enabled: true
}
if (operation) {
tool.operation = operation
}
refresh(tool)
handleClose()
})
}
const loadData = (selectedOptions: ToolOption[]) => {
const targetOption = selectedOptions[selectedOptions.length - 1];
if (selectedOptions.length === 1) {
getTools({ tool_type: targetOption.value as ToolType })
.then(res => {
const response = res as ToolItem[]
targetOption.children = response.map((vo: any) => {
return {
value: vo.id,
label: vo.name,
isLeaf: response.length === 0,
}
})
setOptionList([...optionList])
})
} else {
getToolMethods(targetOption.value as string)
.then(res => {
const response = res as Array<{ method_id: string; name: string }>
targetOption.children = response.map((vo: any) => {
return {
value: vo.name,
label: vo.name,
description: vo.description,
isLeaf: true,
method_id: vo.method_id,
parameters: vo.parameters
}
})
setOptionList([...optionList])
})
}
};
const handleChange: CascaderProps<ToolOption>['onChange'] = (_value, selectedOptions) => {
console.log('selectedOptions', selectedOptions)
setSelectedTools(selectedOptions)
}
// 暴露给父组件的方法
useImperativeHandle(ref, () => ({
handleOpen,
handleClose
}));
return (
<RbModal
title={t(`application.addTool`)}
open={visible}
onCancel={handleClose}
okText={t('common.save')}
onOk={handleSave}
confirmLoading={loading}
>
<Form
form={form}
layout="vertical"
>
<FormItem
name="agent_id"
label={t('application.tool')}
rules={[
{ required: true, message: t('common.pleaseSelect') },
]}
>
<Cascader
placeholder={t('common.pleaseSelect')}
options={optionList}
loadData={loadData}
onChange={handleChange}
changeOnSelect={false}
/>
</FormItem>
</Form>
</RbModal>
);
});
export default ToolModal;

36
web/src/views/ApplicationConfig/types.ts
View File

@@ -78,14 +78,7 @@ export interface Config extends MultiAgentConfig {
knowledge_retrieval: KnowledgeConfig | null;
memory?: MemoryConfig;
variables: Variable[];
tools: {
web_search: {
enabled: boolean;
config: {
web_search: boolean;
}
}
};
tools: ToolOption[];
is_active: boolean;
created_at: number;
updated_at: number;
@@ -211,4 +204,31 @@ export interface AiPromptForm {
model_id?: string;
message?: string;
current_prompt?: string;
}
export interface ToolModalRef {
handleOpen: () => void;
}
export interface ToolOption {
value?: string | number | null;
label?: React.ReactNode;
description?: string;
children?: ToolOption[];
isLeaf?: boolean;
method_id?: string;
operation?: string;
parameters?: Parameter[];
tool_id?: string;
enabled?: boolean;
}
export interface Parameter {
name: string;
type: string;
description: string;
required: boolean;
default: any;
enum: null | string[];
minimum: number;
maximum: number;
pattern: null | string;
}

25
web/src/views/Workflow/components/Properties/AssignmentList/index.tsx
View File

@@ -62,6 +62,10 @@ const AssignmentList: FC<AssignmentListProps> = ({
placeholder={t('common.pleaseSelect')}
options={options}
popupMatchSelectWidth={false}
onChange={() => {
form.setFieldValue([parentName, name, 'operation'], undefined);
form.setFieldValue([parentName, name, 'value'], undefined);
}}
/>
</Form.Item>
</Col>
@@ -72,6 +76,7 @@ const AssignmentList: FC<AssignmentListProps> = ({
noStyle
>
<Select
placeholder={t('common.pleaseSelect')}
options={operationOptions.map(op => ({
...op,
label: t(op.label)
@@ -99,14 +104,20 @@ const AssignmentList: FC<AssignmentListProps> = ({
name={[name, 'value']}
noStyle
>
{operation === 'assign'
{dataType === 'number' && operation === 'cover'
? <VariableSelect
placeholder={t('common.pleaseSelect')}
options={dataType ? options.filter(vo => vo.dataType === dataType) : options}
popupMatchSelectWidth={false}
/>
: dataType === 'number'
? <InputNumber
placeholder={t('common.pleaseEnter')}
className="rb:w-full!"
/>
: operation === 'assign'
? <>
{dataType === 'number'
? <InputNumber
placeholder={t('common.pleaseEnter')}
className="rb:w-full!"
/>
: dataType === 'boolean'
{dataType === 'boolean'
? <Radio.Group block>
<Radio.Button value={true}>True</Radio.Button>
<Radio.Button value={false}>False</Radio.Button>

14
web/src/views/Workflow/components/Properties/CaseList/index.tsx
View File

@@ -9,8 +9,8 @@ import VariableSelect from '../VariableSelect'
import Editor from '../../Editor'
interface CaseListProps {
value?: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; comparison_operator: string; right: string; input_type?: string; }[] }>;
onChange?: (value: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; comparison_operator: string; right: string; }[] }>) => void;
value?: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; operator: string; right: string; input_type?: string; }[] }>;
onChange?: (value: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; operator: string; right: string; }[] }>) => void;
options: Suggestion[];
name: string;
selectedNode?: any;
@@ -40,6 +40,8 @@ const operatorsObj: { [key: string]: SelectProps['options'] } = {
boolean: [
{ value: 'eq', label: 'workflow.config.if-else.boolean.eq' },
{ value: 'ne', label: 'workflow.config.if-else.boolean.ne' },
{ value: 'empty', label: 'workflow.config.if-else.empty' },
{ value: 'not_empty', label: 'workflow.config.if-else.not_empty' },
]
}
@@ -199,7 +201,7 @@ const CaseList: FC<CaseListProps> = ({
expressions: {
[conditionIndex]: {
left: newValue,
comparison_operator: undefined,
operator: undefined,
right: undefined,
input_type: undefined
}
@@ -238,6 +240,7 @@ const CaseList: FC<CaseListProps> = ({
<div key={caseField.key}>
<Form.List name={[caseField.name, 'expressions']}>
{(conditionFields, { add: addCondition, remove: removeCondition }) => {
const logicalOperator = form.getFieldValue(name)?.[caseIndex]?.logical_operator || 'and'
return (
<div className={clsx("rb:relative rb:mb-4 rb:border rb:border-gray-200 rb:rounded rb:p-3 rb:pl-5")}>
<div className="rb:flex rb:items-center rb:justify-between rb:mb-3">
@@ -274,14 +277,13 @@ const CaseList: FC<CaseListProps> = ({
const cases = form.getFieldValue(name) || [];
const currentCase = cases[caseIndex] || {};
const currentExpression = currentCase.expressions?.[conditionIndex] || {};
const currentOperator = currentExpression.comparison_operator;
const currentOperator = currentExpression.operator;
const hideRightField = currentOperator === 'empty' || currentOperator === 'not_empty';
const leftFieldValue = currentExpression.left;
const leftFieldOption = options.find(option => `{{${option.value}}}` === leftFieldValue);
const leftFieldType = leftFieldOption?.dataType;
const operatorList = operatorsObj[leftFieldType || 'default'] || operatorsObj.default || [];
const inputType = leftFieldType === 'number' ? currentExpression.input_type : undefined;
const logicalOperator = currentCase.logical_operator;
return (
<div key={conditionField.key} className={clsx({
"rb:mb-3": conditionIndex !== conditionFields.length - 1
@@ -301,7 +303,7 @@ const CaseList: FC<CaseListProps> = ({
</Form.Item>
</Col>
<Col span={8}>
<Form.Item name={[conditionField.name, 'comparison_operator']} noStyle>
<Form.Item name={[conditionField.name, 'operator']} noStyle>
<Select
options={operatorList.map(vo => ({
...vo,

12
web/src/views/Workflow/components/Properties/ConditionList/index.tsx
View File

@@ -9,7 +9,7 @@ import Editor from '../../Editor'
interface Case {
logical_operator: 'and' | 'or';
expressions: Array<{ left: string; comparison_operator: string; right: string; input_type: string; }>
expressions: Array<{ left: string; operator: string; right: string; input_type: string; }>
}
interface CaseListProps {
@@ -45,6 +45,8 @@ const operatorsObj: { [key: string]: SelectProps['options'] } = {
boolean: [
{ value: 'eq', label: 'workflow.config.if-else.boolean.eq' },
{ value: 'ne', label: 'workflow.config.if-else.boolean.ne' },
{ value: 'empty', label: 'workflow.config.if-else.empty' },
{ value: 'not_empty', label: 'workflow.config.if-else.not_empty' },
]
}
@@ -61,7 +63,7 @@ const ConditionList: FC<CaseListProps> = ({
expressions: {
[index]: {
left: newValue,
comparison_operator: undefined,
operator: undefined,
right: undefined,
input_type: undefined
}
@@ -87,7 +89,7 @@ const ConditionList: FC<CaseListProps> = ({
{fields.map((field, index) => {
const expressions = form.getFieldValue([parentName, 'expressions']) || [];
const currentExpression = expressions[index] || {};
const currentOperator = currentExpression.comparison_operator;
const currentOperator = currentExpression.operator;
const hideRightField = currentOperator === 'empty' || currentOperator === 'not_empty';
const leftFieldValue = currentExpression.left;
const leftFieldOption = options.find(option => `{{${option.value}}}` === leftFieldValue);
@@ -122,7 +124,7 @@ const ConditionList: FC<CaseListProps> = ({
</Col>
<Col span={8}>
<Form.Item name={[field.name, 'comparison_operator']} noStyle>
<Form.Item name={[field.name, 'operator']} noStyle>
<Select
options={operatorList.map(vo => ({
...vo,
@@ -196,7 +198,7 @@ const ConditionList: FC<CaseListProps> = ({
<Button
type="dashed"
onClick={() => add({ left: '', comparison_operator: '', right: '' })}
onClick={() => add({ left: '', operator: '', right: '' })}
className="rb:w-full rb:ml-6 rb:mt-2"
icon={<span>+</span>}
>

252
web/src/views/Workflow/components/Properties/HttpRequest/EditableTable.tsx
View File

@@ -1,179 +1,155 @@
import { useState, useEffect, useMemo } from 'react';
import { useMemo, useCallback } from 'react';
import { useTranslation } from 'react-i18next'
import { Button, Select, Table } from 'antd';
import { Button, Select, Table, Form, type TableProps } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import Editor from '../../Editor';
import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin';
import Empty from '@/components/Empty';
import VariableSelect from '../VariableSelect';
interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
name?: string | string[];
inputType?: 'select' | 'variableSelect';
options?: { value: string, label: string }[] | Suggestion[];
}
const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
name,
inputType,
options,
children,
...restProps
}) => {
const { t } = useTranslation();
if (!inputType) return <td {...restProps}>{children}</td>;
return (
<td {...restProps}>
<Form.Item name={name} style={{ margin: 0 }}>
{inputType === 'select' ? (
<Select
placeholder={t('common.pleaseSelect')}
size="small"
options={options as { value: string, label: string }[]}
/>
) : (
<VariableSelect
placeholder={t('common.pleaseSelect')}
size="small"
options={(options as Suggestion[]) || []}
/>
)}
</Form.Item>
</td>
);
};
export interface TableRow {
key: string;
name: string;
value: string;
name?: string;
value?: string;
type?: string;
}
interface EditableTableProps {
parentName: string | string[];
title?: string;
value?: Record<string, string> | TableRow[];
onChange?: (value: TableRow[]) => void;
options?: Suggestion[];
typeOptions?: {value: string, label: string}[]
typeOptions?: { value: string, label: string }[]
}
const EditableTable: React.FC<EditableTableProps> = ({
parentName,
title,
value,
onChange,
options = [],
typeOptions = []
}) => {
const { t } = useTranslation()
const [rows, setRows] = useState<TableRow[]>([]);
const { t } = useTranslation();
const form = Form.useFormInstance();
const values = Form.useWatch(typeof parentName === 'string' ? [parentName] : parentName, form);
useEffect(() => {
if (Array.isArray(value)) {
setRows([...value])
} else if (value && Object.keys(value).length > 0) {
setRows(Object.entries(value).map(([key, val], index) => ({
key: index.toString(),
name: key || '',
value: val || '',
type: typeOptions.length > 0 ? typeOptions[0].value : undefined
})))
} else {
setRows([])
}
}, [value, typeOptions])
const createNewRow = (): TableRow => ({
key: Date.now().toString(),
name: undefined,
value: undefined,
...(typeOptions.length > 0 && { type: typeOptions[0].value })
});
const handleChange = (key: string, field: 'name' | 'value' | 'type', val: string) => {
const newRows = rows.map(row =>
row.key === key ? { ...row, [field]: val } : row
);
setRows(newRows);
onChange?.(newRows);
};
const handleAdd = useCallback(() => {
form.setFieldValue(parentName, [...(values ?? []), createNewRow()]);
}, [form, parentName, values, typeOptions]);
const handleAdd = () => {
const newRow: TableRow = {
key: Date.now().toString(),
name: '',
value: '',
...(typeOptions.length > 0 && { type: typeOptions[0].value })
};
const newRows = [...rows, newRow];
setRows(newRows);
onChange?.(newRows);
};
const handleDelete = useCallback((index: number) => {
const currentValues = form.getFieldValue(parentName) || [];
form.setFieldValue(parentName, currentValues.filter((_: TableRow, i: number) => i !== index));
}, [form, parentName]);
const handleDelete = (key: string) => {
const newRows = rows.filter(row => row.key !== key);
setRows(newRows);
onChange?.(newRows);
};
const createColumn = (dataIndex: string, inputType: 'select' | 'variableSelect', width: string, columnOptions: any[]) => ({
title: t(`workflow.config.${dataIndex}`),
dataIndex,
width,
onCell: (_: TableRow, index?: number) => ({
name: typeof parentName === 'string' ? [parentName, index ?? 0, dataIndex] : [...parentName, index ?? 0, dataIndex],
inputType,
options: columnOptions
} as any)
});
const columns = useMemo(() => {
const baseColumns = [
const columns: TableProps<TableRow>['columns'] = useMemo(() => {
const hasType = typeOptions.length > 0;
const baseWidth = hasType ? '35%' : '45%';
return [
createColumn('name', 'variableSelect', baseWidth, options),
...(hasType ? [createColumn('type', 'select', '20%', typeOptions)] : []),
createColumn('value', 'variableSelect', baseWidth, options),
{
title: typeOptions.length > 0 ? t('workflow.config.name') : '键',
dataIndex: 'name',
width: typeOptions.length > 0 ? '35%' : '45%',
render: (text: string, record: TableRow) => (
<Editor
options={options}
value={text}
height={32}
variant="outlined"
onChange={(value) => handleChange(record.key, 'name', value || '')}
/>
),
title: '',
dataIndex: 'actions',
width: '10%',
render: (_: any, __: TableRow, index: number) => (
<Button type="text" icon={<DeleteOutlined />} onClick={() => handleDelete(index)} />
)
}
];
}, [typeOptions, options, t, parentName, handleDelete]);
if (typeOptions.length > 0) {
baseColumns.push({
title: t('workflow.config.type'),
dataIndex: 'type',
width: '20%',
render: (text: string, record: TableRow) => (
<Select
value={text}
options={typeOptions}
onChange={(value) => handleChange(record.key, 'type', value)}
/>
),
});
}
baseColumns.push({
title: typeOptions.length > 0 ? t('workflow.config.value') : '值',
dataIndex: 'value',
width: typeOptions.length > 0 ? '35%' : '45%',
render: (text: string, record: TableRow) => {
if (record.type === 'file') {
return (
<VariableSelect
options={options}
value={text}
onChange={(value) => handleChange(record.key, 'value', value || '')}
/>
)
}
return (
<Editor
options={options}
value={text}
height={32}
variant="outlined"
onChange={(value) => handleChange(record.key, 'value', value || '')}
/>
)
},
});
baseColumns.push({
title: '',
dataIndex: 'actions',
width: '10%',
render: (_: any, record: TableRow) => (
<Button
type="text"
icon={<DeleteOutlined />}
onClick={() => handleDelete(record.key)}
/>
),
});
return baseColumns;
}, [typeOptions, options, t]);
const AddButton = ({ block = false }: { block?: boolean }) => (
<Button
type={block ? "dashed" : "text"}
icon={<PlusOutlined />}
onClick={handleAdd}
size="small"
block={block}
className={block ? "rb:mt-1" : ""}
>
{block && `+${t('common.add')}`}
</Button>
);
return (
<div className="rb:mb-4">
{title && (
<div className="rb:flex rb:items-center rb:mb-2 rb:justify-between">
<div className="rb:font-medium">{title}</div>
<Button
type="text"
icon={<PlusOutlined />}
onClick={handleAdd}
size="small"
/>
<AddButton />
</div>
)}
<Table
columns={columns}
dataSource={rows}
pagination={false}
size="small"
locale={{ emptyText: <Empty size={88} /> }}
scroll={{ x: 'max-content' }}
/>
{!title && (
<Button type="dashed" onClick={handleAdd} block className='rb:mt-1'>
+{t('common.add')}
</Button>
)}
<Form.Item name={parentName}>
<Table<TableRow>
components={{ body: { cell: EditableCell } }}
bordered
dataSource={values}
columns={columns}
pagination={false}
size="small"
locale={{ emptyText: <Empty size={88} /> }}
scroll={{ x: 'max-content' }}
/>
</Form.Item>
{!title && <AddButton block />}
</div>
);
};

33
web/src/views/Workflow/components/Properties/HttpRequest/index.tsx
View File

@@ -7,7 +7,7 @@ import AuthConfigModal from './AuthConfigModal'
import type { AuthConfigModalRef, HttpRequestConfigForm } from './types'
import VariableSelect from "../VariableSelect";
import MessageEditor from '../MessageEditor'
import EditableTable, { type TableRow } from './EditableTable'
import EditableTable from './EditableTable'
const HttpRequest: FC<{ options: Suggestion[]; }> = ({
options,
@@ -36,17 +36,6 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
})
}
const updateObjectList = (data: TableRow[], key: string) => {
let obj: Record<string, string> = {}
if (data.length) {
data.forEach(vo => {
obj[vo.name] = vo.value
})
}
form.setFieldValue(key, obj)
}
console.log('HttpRequest', values)
return (
@@ -81,17 +70,17 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
<Form.Item name="headers">
<EditableTable
parentName="headers"
title="HEADERS"
options={options}
onChange={(headers) => updateObjectList(headers, 'headers')}
/>
</Form.Item>
<Form.Item name="params">
<EditableTable
parentName="params"
title="PARAMS"
options={options}
onChange={(params) => updateObjectList(params, 'params')}
/>
</Form.Item>
@@ -113,15 +102,8 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
{values?.body?.content_type === 'form-data' &&
<Form.Item name={['body', 'data']} noStyle>
<EditableTable
parentName={['body', 'data']}
options={options}
onChange={(data) => {
form.setFieldsValue({
body: {
...form.getFieldValue('body'),
data
}
})
}}
typeOptions={[
{ label: 'text', value: 'text' },
{ label: 'file', value: 'file' }
@@ -132,13 +114,8 @@ const HttpRequest: FC<{ options: Suggestion[]; }> = ({
{values?.body?.content_type === 'x-www-form-urlencoded' &&
<Form.Item name={['body', 'data']} noStyle>
<EditableTable
parentName={['body', 'data']}
options={options}
onChange={(data) => {
const currentBody = form.getFieldValue('body') || {}
form.setFieldsValue({
body: { ...currentBody, data }
})
}}
/>
</Form.Item>
}

1
web/src/views/Workflow/components/Properties/ParamsList/ParamEditModal.tsx
View File

@@ -103,6 +103,7 @@ const ParamEditModal = forwardRef<ParamEditModalRef, ParamEditModalProps>(({
<FormItem
name="desc"
label={t('workflow.config.parameter-extractor.desc')}
rules={[{ required: true, message: t('common.pleaseEnter') }]}
>
<Input.TextArea placeholder={t('common.enter')} />
</FormItem>

4
web/src/views/Workflow/components/Properties/index.tsx
View File

@@ -82,7 +82,7 @@ const Properties: FC<PropertiesProps> = ({
useEffect(() => {
if (values && selectedNode) {
const { id, knowledge_retrieval, group, group_names, ...rest } = values
const { id, knowledge_retrieval, group, group_variables, ...rest } = values
const { knowledge_bases = [], ...restKnowledgeConfig } = (knowledge_retrieval as any) || {}
let allRest = {
@@ -730,7 +730,7 @@ const Properties: FC<PropertiesProps> = ({
}
/>
: config.type === 'switch'
? <Switch onChange={key === 'group' ? () => { form.setFieldValue('group_names', []) } : undefined} />
? <Switch onChange={key === 'group' ? () => { form.setFieldValue('group_variables', []) } : undefined} />
: config.type === 'categoryList'
? <CategoryList parentName={key} selectedNode={selectedNode} graphRef={graphRef} />
: config.type === 'conditionList'

6
web/src/views/Workflow/constant.ts
View File

@@ -327,7 +327,7 @@ export const nodeLibrary: NodeLibrary[] = [
type: 'switch',
defaultValue: false
},
group_names: {
group_variables: {
type: 'groupVariableList',
defaultValue: [],
}
@@ -373,11 +373,11 @@ export const nodeLibrary: NodeLibrary[] = [
},
headers: {
type: 'define',
defaultValue: {}
defaultValue: []
},
params: {
type: 'define',
defaultValue: {}
defaultValue: []
},
body: {
type: 'define',

26
web/src/views/Workflow/hooks/useWorkflowGraph.ts
View File

@@ -90,11 +90,13 @@ export const useWorkflowGraph = ({
nodeLibraryConfig.config[key].defaultValue = {
...rest
}
} else if (key === 'group_names' && nodeLibraryConfig.config && nodeLibraryConfig.config[key]) {
const { group_names, group } = config
} else if (key === 'group_variables' && nodeLibraryConfig.config && nodeLibraryConfig.config[key]) {
const { group_variables, group } = config
nodeLibraryConfig.config[key].defaultValue = group
? Object.entries(group_names as Record<string, any>).map(([key, value]) => ({ key, value }))
: group_names
? Object.entries(group_variables as Record<string, any>).map(([key, value]) => ({ key, value }))
: group_variables
} else if (type === 'http-request' && (key === 'headers' || key === 'params') && config[key] && typeof config[key] === 'object' && !Array.isArray(config[key]) && nodeLibraryConfig.config && nodeLibraryConfig.config[key]) {
nodeLibraryConfig.config[key].defaultValue = Object.entries(config[key]).map(([name, value]) => ({ name, value }))
} else if (nodeLibraryConfig.config && nodeLibraryConfig.config[key] && config[key]) {
nodeLibraryConfig.config[key].defaultValue = config[key]
}
@@ -882,14 +884,22 @@ export const useWorkflowGraph = ({
if (data.config) {
Object.keys(data.config).forEach(key => {
if (data.config[key] && 'defaultValue' in data.config[key] && key === 'group_names') {
let group_names = data.config.group.defaultValue ? {} : data.config[key].defaultValue
if (data.config[key] && 'defaultValue' in data.config[key] && key === 'group_variables') {
let group_variables = data.config.group.defaultValue ? {} : data.config[key].defaultValue
if (data.config.group.defaultValue) {
data.config[key].defaultValue.map((vo: any) => {
group_names[vo.key] = vo.value
group_variables[vo.key] = vo.value
})
}
itemConfig[key] = group_variables
} else if (data.type === 'http-request' && (key === 'headers' || key === 'params') && data.config[key] && 'defaultValue' in data.config[key]) {
const value = data.config[key].defaultValue
itemConfig[key] = {}
if (value.length > 0) {
value.forEach((vo: any) => {
itemConfig[key][vo.name] = vo.value
})
}
itemConfig[key] = group_names
} else if (data.config[key] && 'defaultValue' in data.config[key] && key !== 'knowledge_retrieval') {
itemConfig[key] = data.config[key].defaultValue
} else if (key === 'knowledge_retrieval' && data.config[key] && 'defaultValue' in data.config[key]) {

2
web/src/views/Workflow/types.ts
View File

@@ -24,7 +24,7 @@ export interface NodeConfig {
knowledge_retrieval?: KnowledgeConfig;
group_names?: Array<{ key: string, value: string[] }>
group_variables?: Array<{ key: string, value: string[] }>
cycle?: string;
[key: string]: unknown;
}