fix(web): workflow bug

This commit is contained in:
zhaoying
2026-01-06 13:06:24 +08:00
parent 679e518574
commit 8d3ec8c047
21 changed files with 698 additions and 395 deletions

View File

@@ -1793,12 +1793,20 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
"not_contains": 'Does Not Contain', "not_contains": 'Does Not Contain',
"startwith": 'Starts With', "startwith": 'Starts With',
"endwith": 'Ends With', "endwith": 'Ends With',
"eq": '==', "eq": 'Equals',
"ne": '!=', "ne": 'Not Equals',
"lt": '<', num: {
"le": '<=', "eq": '=',
"gt": '>', "ne": '',
"ge": '>=', "lt": '<',
"le": '≤',
"gt": '>',
"ge": '≥',
},
boolean: {
"eq": 'Is',
"ne": 'Is Not',
},
else_desc: 'Used to define the logic that should be executed when the if condition is not met.' else_desc: 'Used to define the logic that should be executed when the if condition is not met.'
}, },
'http-request': { 'http-request': {
@@ -1839,12 +1847,17 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
loop: { loop: {
cycle_vars: 'Loop Variables', cycle_vars: 'Loop Variables',
condition: 'Loop Termination Condition', condition: 'Loop Termination Condition',
max_loop: 'Maximum Loop Count',
}, },
assigner: { assigner: {
assignments: 'Variables', assignments: 'Variables',
cover: 'Overwrite', cover: 'Override',
assign: 'Set', assign: 'Set',
clear: 'Clear' clear: 'Clear',
add: '+=',
subtract: '-=',
multiply: '*=',
divide: '/=',
}, },
iteration: { iteration: {
input: 'Input Variable', input: 'Input Variable',

View File

@@ -1893,12 +1893,20 @@ export const zh = {
"not_contains": '不包含', "not_contains": '不包含',
"startwith": '开始是', "startwith": '开始是',
"endwith": '结束是', "endwith": '结束是',
"eq": '==', "eq": '',
"ne": '!=', "ne": '不是',
"lt": '<', num: {
"le": '<=', "eq": '=',
"gt": '>', "ne": '',
"ge": '>=', "lt": '<',
"le": '≤',
"gt": '>',
"ge": '≥',
},
boolean: {
"eq": '是',
"ne": '不是',
},
else_desc: '用于定义当 if 条件不满足时应执行的逻辑。' else_desc: '用于定义当 if 条件不满足时应执行的逻辑。'
}, },
'http-request': { 'http-request': {
@@ -1939,12 +1947,17 @@ export const zh = {
loop: { loop: {
cycle_vars: '循环变量', cycle_vars: '循环变量',
condition: '循环终止条件', condition: '循环终止条件',
max_loop: '最大循环次数',
}, },
assigner: { assigner: {
assignments: '变量', assignments: '变量',
cover: '覆盖', cover: '覆盖',
assign: '设置', assign: '设置',
clear: '清空' clear: '清空',
add: '+=',
subtract: '-=',
multiply: '*=',
divide: '/=',
}, },
iteration: { iteration: {
input: '输入变量', input: '输入变量',

View File

@@ -26,7 +26,6 @@ const ChatVariableModal = forwardRef<ChatVariableModalRef, ChatVariableModalProp
const [form] = Form.useForm<ChatVariable>(); const [form] = Form.useForm<ChatVariable>();
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [editIndex, setEditIndex] = useState<number | undefined>(undefined) const [editIndex, setEditIndex] = useState<number | undefined>(undefined)
const typeValue = Form.useWatch('type', form);
// 封装取消方法,添加关闭弹窗逻辑 // 封装取消方法,添加关闭弹窗逻辑
const handleClose = () => { const handleClose = () => {

View File

@@ -14,18 +14,23 @@ const CharacterCountPlugin = ({ setCount, onChange }: { setCount: (count: number
let serializedContent = ''; let serializedContent = '';
// Traverse all nodes and serialize properly // Traverse all nodes and serialize properly
const paragraphs: string[] = [];
root.getChildren().forEach(child => { root.getChildren().forEach(child => {
if ($isParagraphNode(child)) { if ($isParagraphNode(child)) {
let paragraphContent = '';
child.getChildren().forEach(node => { child.getChildren().forEach(node => {
if ($isVariableNode(node)) { if ($isVariableNode(node)) {
serializedContent += node.getTextContent(); paragraphContent += node.getTextContent();
} else { } else {
serializedContent += node.getTextContent(); paragraphContent += node.getTextContent();
} }
}); });
paragraphs.push(paragraphContent);
} }
}); });
serializedContent = paragraphs.join('\n');
setCount(serializedContent.length); setCount(serializedContent.length);
onChange?.(serializedContent); onChange?.(serializedContent);
}); });

View File

@@ -26,6 +26,7 @@ const InitialValuePlugin: React.FC<InitialValuePluginProps> = ({ value, options
parts.forEach(part => { parts.forEach(part => {
const match = part.match(/^\{\{([^.]+)\.([^}]+)\}\}$/); const match = part.match(/^\{\{([^.]+)\.([^}]+)\}\}$/);
const contextMatch = part.match(/^\{\{context\}\}$/); const contextMatch = part.match(/^\{\{context\}\}$/);
const conversationMatch = part.match(/^\{\{conv\.([^}]+)\}\}$/);
// 匹配{{context}}格式 // 匹配{{context}}格式
if (contextMatch) { if (contextMatch) {
@@ -38,6 +39,20 @@ const InitialValuePlugin: React.FC<InitialValuePluginProps> = ({ value, options
return return
} }
// 匹配{{conv.xx}}格式
if (conversationMatch) {
const [_, variableName] = conversationMatch;
const conversationSuggestion = options.find(s =>
s.group === 'CONVERSATION' && s.label === variableName
);
if (conversationSuggestion) {
paragraph.append($createVariableNode(conversationSuggestion));
} else {
paragraph.append($createTextNode(part));
}
return
}
// 匹配普通变量{{nodeId.label}}格式 // 匹配普通变量{{nodeId.label}}格式
if (match) { if (match) {
const [_, nodeId, label] = match; const [_, nodeId, label] = match;

View File

@@ -13,13 +13,15 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
const handleNodeSelect = (selectedNodeType: any) => { const handleNodeSelect = (selectedNodeType: any) => {
const parentBBox = node.getBBox(); const parentBBox = node.getBBox();
const cycleId = data.cycle; const cycleId = data.cycle;
const id = `${selectedNodeType.type.replace(/-/g, '_') }_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
const newNode = graph.addNode({ const newNode = graph.addNode({
...(graphNodeLibrary[selectedNodeType.type] || graphNodeLibrary.default), ...(graphNodeLibrary[selectedNodeType.type] || graphNodeLibrary.default),
x: parentBBox.x, x: parentBBox.x,
y: parentBBox.y, y: parentBBox.y,
id,
data: { data: {
id: `${selectedNodeType.type}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, id,
type: selectedNodeType.type, type: selectedNodeType.type,
icon: selectedNodeType.icon, icon: selectedNodeType.icon,
name: t(`workflow.${selectedNodeType.type}`), name: t(`workflow.${selectedNodeType.type}`),

View File

@@ -75,12 +75,15 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
const parentBBox = node.getBBox(); const parentBBox = node.getBBox();
const centerX = parentBBox.x + 24; // 默认节点宽度的一半 const centerX = parentBBox.x + 24; // 默认节点宽度的一半
const centerY = parentBBox.y + 50; // 默认节点高度的一半 const centerY = parentBBox.y + 50; // 默认节点高度的一半
const cycleStartNodeId = `cycle_start_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
const cycleStartNode = graph.addNode({ const cycleStartNode = graph.addNode({
...graphNodeLibrary.cycleStart, ...graphNodeLibrary.cycleStart,
x: centerX, x: centerX,
y: centerY, y: centerY,
id: cycleStartNodeId,
data: { data: {
id: cycleStartNodeId,
type: 'cycle-start', type: 'cycle-start',
parentId: node.id, parentId: node.id,
isDefault: true, // 标记为默认节点,不可删除 isDefault: true, // 标记为默认节点,不可删除

View File

@@ -43,12 +43,14 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
const newY = sourceBBox.y; const newY = sourceBBox.y;
// 创建新节点 // 创建新节点
const id = `${selectedNodeType.type.replace(/-/g, '_')}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
const newNode = graph.addNode({ const newNode = graph.addNode({
...(graphNodeLibrary[selectedNodeType.type] || graphNodeLibrary.default), ...(graphNodeLibrary[selectedNodeType.type] || graphNodeLibrary.default),
x: newX, x: newX,
y: newY, y: newY,
id,
data: { data: {
id: `${selectedNodeType.type}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, id,
type: selectedNodeType.type, type: selectedNodeType.type,
icon: selectedNodeType.icon, icon: selectedNodeType.icon,
name: t(`workflow.${selectedNodeType.type}`), name: t(`workflow.${selectedNodeType.type}`),

View File

@@ -1,6 +1,6 @@
import { type FC } from 'react' import { type FC } from 'react'
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Form, Input, Button, Row, Col, Select } from 'antd' import { Form, Input, Row, Col, Select, InputNumber, Radio } from 'antd'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin' import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin'
import VariableSelect from '../VariableSelect' import VariableSelect from '../VariableSelect'
@@ -11,6 +11,23 @@ interface AssignmentListProps {
options: Suggestion[]; options: Suggestion[];
} }
const operationsObj = {
number: [
{ value: 'cover', label: 'workflow.config.assigner.cover' },
{ value: 'clear', label: 'workflow.config.assigner.clear' },
{ value: 'assign', label: 'workflow.config.assigner.assign' },
{ value: 'add', label: 'workflow.config.assigner.add' },
{ value: 'subtract', label: 'workflow.config.assigner.subtract' },
{ value: 'multiply', label: 'workflow.config.assigner.multiply' },
{ value: 'divide', label: 'workflow.config.assigner.divide' },
],
default: [
{ value: 'cover', label: 'workflow.config.assigner.cover' },
{ value: 'clear', label: 'workflow.config.assigner.clear' },
{ value: 'assign', label: 'workflow.config.assigner.assign' },
],
}
const AssignmentList: FC<AssignmentListProps> = ({ const AssignmentList: FC<AssignmentListProps> = ({
parentName, parentName,
options = [], options = [],
@@ -27,6 +44,11 @@ const AssignmentList: FC<AssignmentListProps> = ({
<PlusOutlined onClick={() => add({ operation: 'cover'})} /> <PlusOutlined onClick={() => add({ operation: 'cover'})} />
</div> </div>
{fields.map(({ key, name, ...restField }) => { {fields.map(({ key, name, ...restField }) => {
const variableSelector = form.getFieldValue([parentName, name, 'variable_selector']);
const selectedOption = options.find(option => `{{${option.value}}}` === variableSelector);
const dataType = selectedOption?.dataType;
const operationOptions = dataType === 'number' ? operationsObj.number : operationsObj.default;
return ( return (
<div key={key} className="rb:mb-4"> <div key={key} className="rb:mb-4">
<Row gutter={12} className="rb:mb-2!"> <Row gutter={12} className="rb:mb-2!">
@@ -50,11 +72,10 @@ const AssignmentList: FC<AssignmentListProps> = ({
noStyle noStyle
> >
<Select <Select
options={[ options={operationOptions.map(op => ({
{ value: 'cover', label: t('workflow.config.assigner.cover') }, ...op,
{ value: 'clear', label: t('workflow.config.assigner.clear') }, label: t(op.label)
{ value: 'assign', label: t('workflow.config.assigner.assign') }, }))}
]}
popupMatchSelectWidth={false} popupMatchSelectWidth={false}
onChange={() => { onChange={() => {
form.setFieldValue([parentName, name, 'value'], undefined); form.setFieldValue([parentName, name, 'value'], undefined);
@@ -77,20 +98,31 @@ const AssignmentList: FC<AssignmentListProps> = ({
{...restField} {...restField}
name={[name, 'value']} name={[name, 'value']}
noStyle noStyle
rules={[{ required: true, message: 'Missing last name' }]}
> >
{operation === 'assign' ? ( {operation === 'assign'
<Input.TextArea ? <>
placeholder={t('common.pleaseEnter')} {dataType === 'number'
rows={3} ? <InputNumber
/> placeholder={t('common.pleaseEnter')}
) : ( className="rb:w-full!"
<VariableSelect />
: dataType === 'boolean'
? <Radio.Group block>
<Radio.Button value={true}>True</Radio.Button>
<Radio.Button value={false}>False</Radio.Button>
</Radio.Group>
: <Input.TextArea
placeholder={t('common.pleaseEnter')}
rows={3}
/>
}
</>
: <VariableSelect
placeholder={t('common.pleaseSelect')} placeholder={t('common.pleaseSelect')}
options={options} options={dataType ? options.filter(vo => vo.dataType === dataType) : options}
popupMatchSelectWidth={false} popupMatchSelectWidth={false}
/> />
)} }
</Form.Item> </Form.Item>
); );
}} }}

View File

@@ -1,7 +1,7 @@
import { type FC } from 'react' import { type FC } from 'react'
import clsx from 'clsx' import clsx from 'clsx'
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Form, Button, Select, Space, Row, Col, Divider } from 'antd' import { Form, Button, Select, Space, Row, Col, Divider, InputNumber, Radio, type SelectProps } from 'antd'
import { DeleteOutlined } from '@ant-design/icons'; import { DeleteOutlined } from '@ant-design/icons';
import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin' import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin'
@@ -9,37 +9,48 @@ import VariableSelect from '../VariableSelect'
import Editor from '../../Editor' import Editor from '../../Editor'
interface CaseListProps { interface CaseListProps {
value?: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; comparison_operator: string; right: string; }[] }>; 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; onChange?: (value: Array<{ logical_operator: 'and' | 'or'; expressions: { left: string; comparison_operator: string; right: string; }[] }>) => void;
options: Suggestion[]; options: Suggestion[];
name: string; name: string;
selectedNode?: any; selectedNode?: any;
graphRef?: any; graphRef?: any;
} }
const operatorList = [ const operatorsObj: { [key: string]: SelectProps['options'] } = {
"empty", default: [
"not_empty", { value: 'empty', label: 'workflow.config.if-else.empty' },
"contains", { value: 'not_empty', label: 'workflow.config.if-else.not_empty' },
"not_contains", { value: 'contains', label: 'workflow.config.if-else.contains' },
"startwith", { value: 'not_contains', label: 'workflow.config.if-else.not_contains' },
"endwith", { value: 'startwith', label: 'workflow.config.if-else.startwith' },
"eq", { value: 'endwith', label: 'workflow.config.if-else.endwith' },
"ne", { value: 'eq', label: 'workflow.config.if-else.eq' },
"lt", { value: 'ne', label: 'workflow.config.if-else.ne' },
"le", ],
"gt", number: [
"ge" { value: 'eq', label: 'workflow.config.if-else.num.eq' },
] { value: 'ne', label: 'workflow.config.if-else.num.ne' },
{ value: 'lt', label: 'workflow.config.if-else.num.lt' },
{ value: 'le', label: 'workflow.config.if-else.num.le' },
{ value: 'gt', label: 'workflow.config.if-else.num.gt' },
{ value: 'ge', label: 'workflow.config.if-else.num.ge' },
{ value: 'empty', label: 'workflow.config.if-else.empty' },
{ value: 'not_empty', label: 'workflow.config.if-else.not_empty' },
],
boolean: [
{ value: 'eq', label: 'workflow.config.if-else.boolean.eq' },
{ value: 'ne', label: 'workflow.config.if-else.boolean.ne' },
]
}
const CaseList: FC<CaseListProps> = ({ const CaseList: FC<CaseListProps> = ({
value = [],
options, options,
name, name,
onChange,
selectedNode, selectedNode,
graphRef graphRef
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const form = Form.useFormInstance();
const updateNodePorts = (caseCount: number, removedCaseIndex?: number) => { const updateNodePorts = (caseCount: number, removedCaseIndex?: number) => {
if (!selectedNode || !graphRef?.current) return; if (!selectedNode || !graphRef?.current) return;
@@ -175,29 +186,49 @@ const CaseList: FC<CaseListProps> = ({
}); });
}, 50); }, 50);
}; };
const handleChangeLogicalOperator = (index: number) => { const handleChangeLogicalOperator = (index: number) => {
const newValue = [...value] const currentValue = form.getFieldValue([name, index, 'logical_operator']);
newValue[index] = { form.setFieldValue([name, index, 'logical_operator'], currentValue === 'and' ? 'or' : 'and');
...newValue[index], };
logical_operator: newValue[index].logical_operator === 'and' ? 'or' : 'and'
} const handleLeftFieldChange = (caseIndex: number, conditionIndex: number, newValue: string) => {
onChange && onChange(newValue) form.setFieldsValue({
} [name]: {
[caseIndex]: {
expressions: {
[conditionIndex]: {
left: newValue,
comparison_operator: undefined,
right: undefined,
input_type: undefined
}
}
}
}
});
};
const handleAddCase = (addCaseFunc: Function) => { const handleAddCase = (addCaseFunc: Function) => {
addCaseFunc({ logical_operator: 'and', expressions: [] }); addCaseFunc({ logical_operator: 'and', expressions: [] });
setTimeout(() => { setTimeout(() => {
updateNodePorts((value?.length || 0) + 1); const currentCases = form.getFieldValue(name) || [];
updateNodePorts(currentCases.length);
}, 100); }, 100);
}; };
const handleRemoveCase = (removeCaseFunc: Function, fieldName: number, caseIndex: number) => { const handleRemoveCase = (removeCaseFunc: Function, fieldName: number, caseIndex: number) => {
removeCaseFunc(fieldName); removeCaseFunc(fieldName);
setTimeout(() => { setTimeout(() => {
updateNodePorts((value?.length || 1) - 1, caseIndex); const currentCases = form.getFieldValue(name) || [];
updateNodePorts(currentCases.length, caseIndex);
}, 100); }, 100);
}; };
const handleInputTypeChange = (caseIndex: number, conditionIndex: number) => {
form.setFieldValue([name, caseIndex, 'expressions', conditionIndex, 'right'], undefined);
};
return ( return (
<> <>
<Form.List name={name}> <Form.List name={name}>
@@ -218,7 +249,7 @@ const CaseList: FC<CaseListProps> = ({
<Space> <Space>
<Button <Button
type="dashed" type="dashed"
onClick={() => addCondition()} onClick={() => addCondition({})}
size="small" size="small"
> >
+ {t('workflow.config.addCase')} + {t('workflow.config.addCase')}
@@ -234,15 +265,23 @@ const CaseList: FC<CaseListProps> = ({
<div className="rb:absolute rb:w-3 rb:left-2 rb:top-15 rb:bottom-6 rb:z-10 rb:border rb:border-[#DFE4ED] rb:rounded-l-md rb:border-r-0"></div> <div className="rb:absolute rb:w-3 rb:left-2 rb:top-15 rb:bottom-6 rb:z-10 rb:border rb:border-[#DFE4ED] rb:rounded-l-md rb:border-r-0"></div>
<div className="rb:absolute rb:z-10 rb:left-0 rb:top-[50%] rb:transform-[translateY(-50%)]]"> <div className="rb:absolute rb:z-10 rb:left-0 rb:top-[50%] rb:transform-[translateY(-50%)]]">
<Form.Item name={[caseField.name, 'logical_operator']} noStyle > <Form.Item name={[caseField.name, 'logical_operator']} noStyle >
<Button size="small" className="rb:cursor-pointer" onClick={() => handleChangeLogicalOperator(caseIndex)}>{value?.[caseIndex].logical_operator}</Button> <Button size="small" className="rb:cursor-pointer" onClick={() => handleChangeLogicalOperator(caseIndex)}>{logicalOperator}</Button>
</Form.Item> </Form.Item>
</div> </div>
</> </>
} }
{conditionFields.map((conditionField, conditionIndex) => { {conditionFields.map((conditionField, conditionIndex) => {
const currentOperator = value?.[caseIndex]?.expressions?.[conditionIndex]?.comparison_operator; const cases = form.getFieldValue(name) || [];
const currentCase = cases[caseIndex] || {};
const currentExpression = currentCase.expressions?.[conditionIndex] || {};
const currentOperator = currentExpression.comparison_operator;
const hideRightField = currentOperator === 'empty' || currentOperator === 'not_empty'; 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 ( return (
<div key={conditionField.key} className={clsx({ <div key={conditionField.key} className={clsx({
"rb:mb-3": conditionIndex !== conditionFields.length - 1 "rb:mb-3": conditionIndex !== conditionFields.length - 1
@@ -257,18 +296,20 @@ const CaseList: FC<CaseListProps> = ({
size="small" size="small"
allowClear={false} allowClear={false}
popupMatchSelectWidth={false} popupMatchSelectWidth={false}
onChange={(val) => handleLeftFieldChange(caseIndex, conditionIndex, val)}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Form.Item name={[conditionField.name, 'comparison_operator']} noStyle> <Form.Item name={[conditionField.name, 'comparison_operator']} noStyle>
<Select <Select
options={operatorList.map(key => ({ options={operatorList.map(vo => ({
value: key, ...vo,
label: t(`workflow.config.if-else.${key}`) label: t(String(vo?.label || ''))
}))} }))}
size="small" size="small"
popupMatchSelectWidth={false} popupMatchSelectWidth={false}
placeholder={t('common.pleaseSelect')}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
@@ -280,11 +321,48 @@ const CaseList: FC<CaseListProps> = ({
</Col> </Col>
</Row> </Row>
{!hideRightField && ( {!hideRightField && <>
<Form.Item name={[conditionField.name, 'right']} noStyle> {leftFieldType === 'number'
<Editor options={options} /> ? <Row>
</Form.Item> <Col span={12}>
)} <Form.Item name={[conditionField.name, 'input_type']} noStyle>
<Select
placeholder={t('common.pleaseSelect')}
options={[{ value: 'Variable', label: 'Variable' }, { value: 'Constant', label: 'Constant' }]}
popupMatchSelectWidth={false}
variant="borderless"
onChange={() => handleInputTypeChange(caseIndex, conditionIndex)}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item name={[conditionField.name, 'right']} noStyle>
{inputType === 'Variable'
?
<VariableSelect
placeholder={t('common.pleaseSelect')}
options={options.filter(vo => vo.dataType === 'number')}
allowClear={false}
popupMatchSelectWidth={false}
variant="borderless"
/>
: <InputNumber placeholder={t('common.pleaseEnter')}
variant="borderless" className="rb:w-full!" />
}
</Form.Item>
</Col>
</Row>
: <Form.Item name={[conditionField.name, 'right']} noStyle>
{leftFieldType === 'boolean'
? <Radio.Group block>
<Radio.Button value={true}>True</Radio.Button>
<Radio.Button value={false}>False</Radio.Button>
</Radio.Group>
: <Editor options={options} />
}
</Form.Item>
}
</>}
</div> </div>
</div> </div>
) )

View File

@@ -1,7 +1,6 @@
import { type FC } from 'react' import { type FC } from 'react'
import clsx from 'clsx'
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Form, Button, Select, Space, Row, Col, Divider } from 'antd' import { Form, Button, Select, Row, Col, InputNumber, Radio, type SelectProps } from 'antd'
import { DeleteOutlined } from '@ant-design/icons'; import { DeleteOutlined } from '@ant-design/icons';
import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin' import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin'
@@ -10,7 +9,7 @@ import Editor from '../../Editor'
interface Case { interface Case {
logical_operator: 'and' | 'or'; logical_operator: 'and' | 'or';
expressions: Array<{ left: string; comparison_operator: string; right: string; }> expressions: Array<{ left: string; comparison_operator: string; right: string; input_type: string; }>
} }
interface CaseListProps { interface CaseListProps {
@@ -22,36 +21,63 @@ interface CaseListProps {
graphRef?: any; graphRef?: any;
addBtnText?: string; addBtnText?: string;
} }
const operatorList = [ const operatorsObj: { [key: string]: SelectProps['options'] } = {
"empty", default: [
"not_empty", { value: 'empty', label: 'workflow.config.if-else.empty' },
"contains", { value: 'not_empty', label: 'workflow.config.if-else.not_empty' },
"not_contains", { value: 'contains', label: 'workflow.config.if-else.contains' },
"startwith", { value: 'not_contains', label: 'workflow.config.if-else.not_contains' },
"endwith", { value: 'startwith', label: 'workflow.config.if-else.startwith' },
"eq", { value: 'endwith', label: 'workflow.config.if-else.endwith' },
"ne", { value: 'eq', label: 'workflow.config.if-else.eq' },
"lt", { value: 'ne', label: 'workflow.config.if-else.ne' },
"le", ],
"gt", number: [
"ge" { value: 'eq', label: 'workflow.config.if-else.num.eq' },
] { value: 'ne', label: 'workflow.config.if-else.num.ne' },
{ value: 'lt', label: 'workflow.config.if-else.num.lt' },
{ value: 'le', label: 'workflow.config.if-else.num.le' },
{ value: 'gt', label: 'workflow.config.if-else.num.gt' },
{ value: 'ge', label: 'workflow.config.if-else.num.ge' },
{ value: 'empty', label: 'workflow.config.if-else.empty' },
{ value: 'not_empty', label: 'workflow.config.if-else.not_empty' },
],
boolean: [
{ value: 'eq', label: 'workflow.config.if-else.boolean.eq' },
{ value: 'ne', label: 'workflow.config.if-else.boolean.ne' },
]
}
const ConditionList: FC<CaseListProps> = ({ const ConditionList: FC<CaseListProps> = ({
value,
options, options,
parentName, parentName,
onChange,
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const form = Form.useFormInstance();
const handleLeftFieldChange = (index: number, newValue: string) => {
form.setFieldsValue({
[parentName]: {
expressions: {
[index]: {
left: newValue,
comparison_operator: undefined,
right: undefined,
input_type: undefined
}
}
}
});
};
const handleInputTypeChange = (index: number) => {
form.setFieldValue([parentName, 'expressions', index, 'right'], undefined);
};
const handleChangeLogicalOperator = () => { const handleChangeLogicalOperator = () => {
if (!value) return; const currentValue = form.getFieldValue([parentName, 'logical_operator']);
onChange && onChange({ form.setFieldValue([parentName, 'logical_operator'], currentValue === 'and' ? 'or' : 'and');
logical_operator: value.logical_operator === 'and' ? 'or' : 'and', };
expressions: value.expressions || []
})
}
return ( return (
<> <>
<Form.List name={[parentName, 'expressions']}> <Form.List name={[parentName, 'expressions']}>
@@ -59,8 +85,16 @@ const ConditionList: FC<CaseListProps> = ({
<div> <div>
<div className="rb:relative"> <div className="rb:relative">
{fields.map((field, index) => { {fields.map((field, index) => {
const currentOperator = value?.expressions?.[index]?.comparison_operator; const expressions = form.getFieldValue([parentName, 'expressions']) || [];
const currentExpression = expressions[index] || {};
const currentOperator = currentExpression.comparison_operator;
const hideRightField = currentOperator === 'empty' || currentOperator === 'not_empty'; 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 = form.getFieldValue([parentName, 'logical_operator']);
return ( return (
<div key={field.key} className="rb:mb-3"> <div key={field.key} className="rb:mb-3">
@@ -68,7 +102,7 @@ const ConditionList: FC<CaseListProps> = ({
<div className="rb:absolute rb:w-3 rb:left-2 rb:top-3.75 rb:bottom-3.75 rb:z-10 rb:border rb:border-[#DFE4ED] rb:rounded-l-md rb:border-r-0"></div> <div className="rb:absolute rb:w-3 rb:left-2 rb:top-3.75 rb:bottom-3.75 rb:z-10 rb:border rb:border-[#DFE4ED] rb:rounded-l-md rb:border-r-0"></div>
<div className="rb:absolute rb:z-10 rb:left-0 rb:top-[50%] rb:transform-[translateY(-50%)]]"> <div className="rb:absolute rb:z-10 rb:left-0 rb:top-[50%] rb:transform-[translateY(-50%)]]">
<Form.Item name={[parentName, 'logical_operator']} noStyle > <Form.Item name={[parentName, 'logical_operator']} noStyle >
<Button size="small" className="rb:cursor-pointer" onClick={handleChangeLogicalOperator}>{value?.logical_operator}</Button> <Button size="small" className="rb:cursor-pointer" onClick={handleChangeLogicalOperator}>{logicalOperator}</Button>
</Form.Item> </Form.Item>
</div> </div>
</>)} </>)}
@@ -82,6 +116,7 @@ const ConditionList: FC<CaseListProps> = ({
size="small" size="small"
allowClear={false} allowClear={false}
popupMatchSelectWidth={false} popupMatchSelectWidth={false}
onChange={(val) => handleLeftFieldChange(index, val)}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
@@ -89,9 +124,9 @@ const ConditionList: FC<CaseListProps> = ({
<Col span={8}> <Col span={8}>
<Form.Item name={[field.name, 'comparison_operator']} noStyle> <Form.Item name={[field.name, 'comparison_operator']} noStyle>
<Select <Select
options={operatorList.map(key => ({ options={operatorList.map(vo => ({
value: key, ...vo,
label: t(`workflow.config.if-else.${key}`) label: t(String(vo?.label || ''))
}))} }))}
size="small" size="small"
popupMatchSelectWidth={false} popupMatchSelectWidth={false}
@@ -104,14 +139,53 @@ const ConditionList: FC<CaseListProps> = ({
onClick={() => remove(field.name)} onClick={() => remove(field.name)}
/> />
</Col> </Col>
{!hideRightField && ( {!hideRightField && <>
<Col span={24}> {leftFieldType === 'number'
<Form.Item name={[field.name, 'right']} noStyle> ? <Col span={24}><Row>
<Editor options={options} /> <Col span={12}>
</Form.Item> <Form.Item name={[field.name, 'input_type']} noStyle>
</Col> <Select
)} placeholder={t('common.pleaseSelect')}
options={[{ value: 'Variable', label: 'Variable' }, { value: 'Constant', label: 'Constant' }]}
popupMatchSelectWidth={false}
variant="borderless"
className="rb:w-full!"
onChange={() => handleInputTypeChange(index)}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item name={[field.name, 'right']} noStyle>
{inputType === 'Variable'
?
<VariableSelect
placeholder={t('common.pleaseSelect')}
options={options.filter(vo => vo.dataType === 'number')}
allowClear={false}
popupMatchSelectWidth={false}
variant="borderless"
className="rb:w-full!"
/>
: <InputNumber placeholder={t('common.pleaseEnter')}
variant="borderless" className="rb:w-full!" />
}
</Form.Item>
</Col>
</Row></Col>
: <Col span={24}>
<Form.Item name={[field.name, 'right']} noStyle>
{leftFieldType === 'boolean'
? <Radio.Group block>
<Radio.Button value={true}>True</Radio.Button>
<Radio.Button value={false}>False</Radio.Button>
</Radio.Group>
: <Editor options={options} />
}
</Form.Item>
</Col>
}
</>}
</Row> </Row>
</div> </div>

View File

@@ -65,7 +65,7 @@ const CycleVarsList: FC<CycleVarsListProps> = ({
label: `${childData.name || childData.type}.${key}`, label: `${childData.name || childData.type}.${key}`,
type: 'output', type: 'output',
dataType: 'string', dataType: 'string',
value: `{{${childData.id}.${key}}}`, value: `${childData.id}.${key}`,
nodeData: childData nodeData: childData
}); });
} }

View File

@@ -25,7 +25,6 @@ const GroupVariableList: FC<GroupVariableListProps> = ({
<Row gutter={12} className="rb:mb-2!"> <Row gutter={12} className="rb:mb-2!">
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
name={[name,0, 'key']}
noStyle noStyle
> >
{t('workflow.config.var-aggregator.variable')} {t('workflow.config.var-aggregator.variable')}
@@ -34,9 +33,8 @@ const GroupVariableList: FC<GroupVariableListProps> = ({
</Row> </Row>
<Form.Item <Form.Item
name={[name, 0, 'value']} name={name}
noStyle noStyle
rules={[{ required: true, message: 'Missing last name' }]}
> >
<VariableSelect <VariableSelect
placeholder={t('common.pleaseSelect')} placeholder={t('common.pleaseSelect')}
@@ -76,7 +74,6 @@ const GroupVariableList: FC<GroupVariableListProps> = ({
{...restField} {...restField}
name={[name, 'value']} name={[name, 'value']}
noStyle noStyle
rules={[{ required: true, message: 'Missing last name' }]}
> >
<VariableSelect <VariableSelect
placeholder={t('common.pleaseSelect')} placeholder={t('common.pleaseSelect')}

View File

@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react'; import { useState, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Button, Select, Table } from 'antd'; import { Button, Select, Table } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'; import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
@@ -33,104 +33,90 @@ const EditableTable: React.FC<EditableTableProps> = ({
const [rows, setRows] = useState<TableRow[]>([]); const [rows, setRows] = useState<TableRow[]>([]);
useEffect(() => { useEffect(() => {
console.log('EditableTable value', value)
if (Array.isArray(value)) { if (Array.isArray(value)) {
setRows([...value]) setRows([...value])
} else if (value && Object.keys(value).length > 0) { } else if (value && Object.keys(value).length > 0) {
// Only update if rows are empty or significantly different setRows(Object.entries(value).map(([key, val], index) => ({
const valueEntries = Object.entries(value) key: index.toString(),
if (rows.length === 0 || rows.length !== valueEntries.length) { name: key || '',
setRows(valueEntries.map(([key, val], index) => { value: val || '',
console.log('val', val) type: typeOptions.length > 0 ? typeOptions[0].value : undefined
return { })))
key: index.toString(),
name: key || '',
value: val || '',
type: typeOptions.length > 0 ? typeOptions[0].value : undefined
}
}))
}
} else { } else {
setRows([]) setRows([])
} }
}, [JSON.stringify(value), typeOptions.length]) }, [value, typeOptions])
const handleChange = (key: string, field: 'name' | 'value' | 'type', val: string) => { const handleChange = (key: string, field: 'name' | 'value' | 'type', val: string) => {
const newRows = [...rows.map(row => const newRows = rows.map(row =>
row.key === key ? { ...row, [field]: val } : row row.key === key ? { ...row, [field]: val } : row
)]; );
setRows(newRows); setRows(newRows);
onChange?.(newRows); onChange?.(newRows);
}; };
const handleAdd = () => { const handleAdd = () => {
const newKey = Date.now().toString(); const newRow: TableRow = {
if (typeOptions.length) { key: Date.now().toString(),
setRows([...rows, { key: newKey, name: '', value: '', type: typeOptions[0].value }]); name: '',
} else { value: '',
setRows([...rows, { key: newKey, name: '', value: '' }]); ...(typeOptions.length > 0 && { type: typeOptions[0].value })
} };
const newRows = [...rows, newRow];
setRows(newRows);
onChange?.(newRows);
}; };
const handleDelete = (key: string, index: number) => { const handleDelete = (key: string) => {
console.log('index', index) const newRows = rows.filter(row => row.key !== key);
setRows(newRows);
if (rows.length === 1) { onChange?.(newRows);
setRows([]);
onChange?.([]);
} else {
const newRows = rows.filter(row => row.key !== key);
setRows(newRows);
onChange?.(newRows);
}
}; };
const columns = typeOptions?.length > 0 ? [ const columns = useMemo(() => {
{ const baseColumns = [
title: t('workflow.config.name'), {
dataIndex: 'name', title: typeOptions.length > 0 ? t('workflow.config.name') : '键',
width: '45%', dataIndex: 'name',
render: (text: string, record: TableRow) => ( width: typeOptions.length > 0 ? '35%' : '45%',
<Editor render: (text: string, record: TableRow) => (
options={options} <Editor
value={text} options={options}
height={32} value={text}
variant="outlined" height={32}
onChange={(value) => handleChange(record.key, 'name', value)} variant="outlined"
/> onChange={(value) => handleChange(record.key, 'name', value || '')}
), />
}, ),
{ }
title: t('workflow.config.type'), ];
dataIndex: 'type',
width: '20%', if (typeOptions.length > 0) {
render: (text: string, record: TableRow) => ( baseColumns.push({
<Select title: t('workflow.config.type'),
value={text} dataIndex: 'type',
options={typeOptions} width: '20%',
onChange={(value) => { render: (text: string, record: TableRow) => (
console.log('value record', value) <Select
handleChange(record.key, 'type', value) value={text}
}} options={typeOptions}
/> onChange={(value) => handleChange(record.key, 'type', value)}
), />
}, ),
{ });
title: t('workflow.config.value'), }
baseColumns.push({
title: typeOptions.length > 0 ? t('workflow.config.value') : '值',
dataIndex: 'value', dataIndex: 'value',
width: '45%', width: typeOptions.length > 0 ? '35%' : '45%',
render: (text: string, record: TableRow) => { render: (text: string, record: TableRow) => {
if (record.type === 'file') { if (record.type === 'file') {
return ( return (
<VariableSelect <VariableSelect
options={options} options={options}
value={text} value={text}
onChange={(value) => { onChange={(value) => handleChange(record.key, 'value', value || '')}
console.log('value record', value)
handleChange(record.key, 'value', value)
}}
/> />
) )
} }
@@ -140,78 +126,41 @@ const EditableTable: React.FC<EditableTableProps> = ({
value={text} value={text}
height={32} height={32}
variant="outlined" variant="outlined"
onChange={(value) => { onChange={(value) => handleChange(record.key, 'value', value || '')}
console.log('value record', value)
handleChange(record.key, 'value', value)
}}
/> />
) )
}, },
}, });
{
baseColumns.push({
title: '', title: '',
dataIndex: 'actions',
width: '10%', width: '10%',
render: (_: any, record: TableRow, index: number) => ( render: (_: any, record: TableRow) => (
<Button <Button
type="text" type="text"
icon={<DeleteOutlined />} icon={<DeleteOutlined />}
onClick={() => handleDelete(record.key, index)} onClick={() => handleDelete(record.key)}
/> />
), ),
}, });
] : [
{ return baseColumns;
title: '键', }, [typeOptions, options, t]);
dataIndex: 'name',
width: '45%',
render: (text: string, record: TableRow) => (
<Editor
options={options}
value={text}
height={32}
variant="outlined"
onChange={(value) => handleChange(record.key, 'name', value)}
/>
),
},
{
title: '值',
dataIndex: 'value',
width: '45%',
render: (text: string, record: TableRow) => (
<Editor
options={options}
value={text}
height={32}
variant="outlined"
onChange={(value) => handleChange(record.key, 'value', value)}
/>
),
},
{
title: '',
width: '10%',
render: (_: any, record: TableRow, index: number) => (
<Button
type="text"
icon={<DeleteOutlined />}
onClick={() => handleDelete(record.key, index)}
/>
),
},
];
return ( return (
<div className="rb:mb-4"> <div className="rb:mb-4">
{title && <div className="rb:flex rb:items-center rb:mb-2 rb:justify-between"> {title && (
<div className="rb:font-medium">{title}</div> <div className="rb:flex rb:items-center rb:mb-2 rb:justify-between">
<Button <div className="rb:font-medium">{title}</div>
type="text" <Button
icon={<PlusOutlined />} type="text"
onClick={handleAdd} icon={<PlusOutlined />}
size="small" onClick={handleAdd}
/> size="small"
</div>} />
</div>
)}
<Table <Table
columns={columns} columns={columns}
dataSource={rows} dataSource={rows}
@@ -220,11 +169,11 @@ const EditableTable: React.FC<EditableTableProps> = ({
locale={{ emptyText: <Empty size={88} /> }} locale={{ emptyText: <Empty size={88} /> }}
scroll={{ x: 'max-content' }} scroll={{ x: 'max-content' }}
/> />
{!title && {!title && (
<Button type="dashed" onClick={handleAdd} block className='rb:mt-1'> <Button type="dashed" onClick={handleAdd} block className='rb:mt-1'>
+{t('common.add')} +{t('common.add')}
</Button> </Button>
} )}
</div> </div>
); );
}; };

View File

@@ -1,6 +1,6 @@
import { type FC, useEffect, useRef } from "react"; import { type FC, useRef } from "react";
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Form, Row, Col, Select, Button, Divider, InputNumber, Switch, Input, Slider } from 'antd' import { Form, Row, Col, Select, Button, Divider, InputNumber, Switch, Input } from 'antd'
import Editor from '../../Editor' import Editor from '../../Editor'
import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin' import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin'
import AuthConfigModal from './AuthConfigModal' import AuthConfigModal from './AuthConfigModal'

View File

@@ -128,29 +128,32 @@ const Knowledge: FC<{value?: KnowledgeConfig; onChange?: (config: KnowledgeConfi
<List <List
grid={{ gutter: 12, column: 1 }} grid={{ gutter: 12, column: 1 }}
dataSource={knowledgeList} dataSource={knowledgeList}
renderItem={(item) => ( renderItem={(item) => {
<List.Item> if (!item.id) return null
<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"> return (
<div className="rb:font-medium rb:leading-4"> <List.Item>
{item.name} <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">
<Tag color={item.status === 1 ? 'success' : item.status === 0 ? 'default' : 'error'} className="rb:ml-2"> <div className="rb:font-medium rb:leading-4">
{item.status === 1 ? t('common.enable') : item.status === 0 ? t('common.disabled') : t('common.deleted')} {item.name}
</Tag> <Tag color={item.status === 1 ? 'success' : item.status === 0 ? 'default' : 'error'} className="rb:ml-2">
<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> {item.status === 1 ? t('common.enable') : item.status === 0 ? t('common.disabled') : t('common.deleted')}
</Tag>
<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-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-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>
</div> </div>
<Space size={12}> </List.Item>
<div )
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-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>
</div>
</List.Item>
)}
/> />
} }
{/* 全局设置 */} {/* 全局设置 */}

View File

@@ -1,12 +1,15 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { MinusCircleOutlined } from '@ant-design/icons'; import { MinusCircleOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space } from 'antd'; import { Button, Form, Input, Space, Row, Col } from 'antd';
import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin'
import VariableSelect from '../VariableSelect'
interface MappingListProps { interface MappingListProps {
name: string; name: string;
options: Suggestion[];
} }
const MappingList: React.FC<MappingListProps> = ({ name }) => { const MappingList: React.FC<MappingListProps> = ({ name, options }) => {
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<> <>
@@ -14,23 +17,33 @@ const MappingList: React.FC<MappingListProps> = ({ name }) => {
{(fields, { add, remove }) => ( {(fields, { add, remove }) => (
<> <>
{fields.map(({ key, name, ...restField }) => ( {fields.map(({ key, name, ...restField }) => (
<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline"> <Row gutter={12} className="rb:mb-2">
<Form.Item <Col span={10}>
{...restField} <Form.Item
name={[name, 'name']} {...restField}
noStyle name={[name, 'name']}
> noStyle
<Input placeholder={t('common.pleaseEnter')} /> >
</Form.Item> <Input placeholder={t('common.pleaseEnter')} />
<Form.Item </Form.Item>
{...restField} </Col>
name={[name, 'value']} <Col span={12}>
noStyle <Form.Item
> {...restField}
<Input placeholder={t('common.pleaseEnter')} /> name={[name, 'value']}
</Form.Item> noStyle
<MinusCircleOutlined onClick={() => remove(name)} /> >
</Space> <VariableSelect
placeholder={t('common.pleaseSelect')}
options={options}
popupMatchSelectWidth={false}
/>
</Form.Item>
</Col>
<Col span={2}>
<MinusCircleOutlined onClick={() => remove(name)} />
</Col>
</Row>
))} ))}
<Form.Item> <Form.Item>
<Button type="dashed" onClick={() => add()} block> <Button type="dashed" onClick={() => add()} block>

View File

@@ -29,15 +29,15 @@ const MessageEditor: FC<TextareaProps> = ({
}) => { }) => {
const { t } = useTranslation() const { t } = useTranslation()
const form = Form.useFormInstance(); const form = Form.useFormInstance();
const values = form.getFieldsValue() const values = Form.useWatch([], form);
// 检查是否已经使用了context变量将已使用的context设置为disabled // 检查是否已经使用了context变量将已使用的context设置为disabled
const processedOptions = useMemo(() => { const processedOptions = useMemo(() => {
if (!isArray || !values[parentName]) return options; if (!isArray || !values?.[parentName]) return options;
// 获取所有消息内容 // 获取所有消息内容
const allContents = values[parentName] const allContents = values[parentName]
.map((msg: any) => msg.content || '') .map((msg: any) => msg?.content || '')
.join(' '); .join(' ');
// 将已使用的context变量标记为disabled // 将已使用的context变量标记为disabled
@@ -50,83 +50,74 @@ const MessageEditor: FC<TextareaProps> = ({
}, [options, values, parentName, isArray]); }, [options, values, parentName, isArray]);
const handleAdd = (add: FormListOperation['add']) => { const handleAdd = (add: FormListOperation['add']) => {
const list = values[parentName]; const list = values?.[parentName] || [];
const lastRole = list[list.length - 1].role const lastRole = list.length > 0 ? list[list.length - 1]?.role : 'ASSISTANT';
add({ add({
role: lastRole === 'USER' ? 'ASSISTANT' : 'USER', role: lastRole === 'USER' ? 'ASSISTANT' : 'USER',
content: undefined content: ''
}) });
};
if (!isArray) {
return (
<Space size={12} direction="vertical" className="rb:w-full rb:border rb:border-[#DFE4ED] rb:rounded-md rb:px-2 rb:py-1.5 rb:bg-white">
<Row>
<Col span={12}>
{title ?? t('workflow.answerDesc')}
</Col>
</Row>
<Form.Item name={parentName} noStyle>
<Editor placeholder={placeholder} options={processedOptions} />
</Form.Item>
</Space>
);
} }
return ( return (
<div> <Form.List name={parentName}>
{isArray {(fields, { add, remove }) => (
? <Form.List name={parentName}> <Space size={12} direction="vertical" className="rb:w-full">
{(fields, { add, remove }) => ( {fields.map(({ key, name, ...restField }) => {
<Space size={12} direction="vertical" className="rb:w-full"> const currentRole = (values?.[parentName]?.[name]?.role || 'USER').toUpperCase();
{fields.map(({ key, name, ...restField }) => {
const currentRole = (values[parentName]?.[key].role || 'USER').toUpperCase() return (
<Space key={key} size={12} direction="vertical" className="rb:w-full rb:border rb:border-[#DFE4ED] rb:rounded-md rb:px-2 rb:py-1.5 rb:bg-white">
return ( <Row>
<Space key={key} size={12} direction="vertical" className="rb:w-full rb:border rb:border-[#DFE4ED] rb:rounded-md rb:px-2 rb:py-1.5 rb:bg-white"> <Col span={12}>
<Row> <Form.Item {...restField} name={[name, 'role']} noStyle>
<Col span={12}> {currentRole === 'SYSTEM' ? (
<Form.Item <Input disabled />
{...restField} ) : (
name={[name, 'role']} <Select
noStyle options={roleOptions}
> disabled={currentRole === 'SYSTEM'}
{currentRole === 'SYSTEM' />
? <Input disabled /> )}
:
<Select
options={roleOptions}
disabled={currentRole === 'SYSTEM'}
/>
}
</Form.Item>
</Col>
{currentRole !== 'SYSTEM' && <Col span={12}>
<div className="rb:h-full rb:flex rb:justify-end rb:items-center">
<MinusCircleOutlined onClick={() => remove(name)} />
</div>
</Col>}
</Row>
<Form.Item
{...restField}
name={[name, 'content']}
noStyle
>
<Editor placeholder={placeholder} options={processedOptions} />
</Form.Item> </Form.Item>
</Space> </Col>
) {currentRole !== 'SYSTEM' && (
})} <Col span={12}>
<Form.Item> <div className="rb:h-full rb:flex rb:justify-end rb:items-center">
<Button type="dashed" onClick={() => handleAdd(add)} block> <MinusCircleOutlined onClick={() => remove(name)} />
+{t('workflow.addMessage')} </div>
</Button> </Col>
</Form.Item> )}
</Space > </Row>
)} <Form.Item {...restField} name={[name, 'content']} noStyle>
</Form.List> <Editor placeholder={placeholder} options={processedOptions} />
: </Form.Item>
<Space size={12} direction="vertical" className="rb:w-full rb:border rb:border-[#DFE4ED] rb:rounded-md rb:px-2 rb:py-1.5 rb:bg-white"> </Space>
<Row> );
<Col span={12}> })}
{title ?? t('workflow.answerDesc')} <Form.Item>
</Col> <Button type="dashed" onClick={() => handleAdd(add)} block>
</Row> +{t('workflow.addMessage')}
<Form.Item </Button>
name={parentName}
noStyle
>
<Editor placeholder={placeholder} options={processedOptions} />
</Form.Item> </Form.Item>
</Space> </Space>
} )}
</div> </Form.List>
); );
}; };

View File

@@ -85,15 +85,6 @@ const Properties: FC<PropertiesProps> = ({
const { id, knowledge_retrieval, group, group_names, ...rest } = values const { id, knowledge_retrieval, group, group_names, ...rest } = values
const { knowledge_bases = [], ...restKnowledgeConfig } = (knowledge_retrieval as any) || {} const { knowledge_bases = [], ...restKnowledgeConfig } = (knowledge_retrieval as any) || {}
let groupNames: Record<string, string[]> | string[] = {}
if (group && group_names?.length) {
group_names.forEach(vo => {
(groupNames as Record<string, string[]>)[vo.key] = vo.value
})
} else if (!group) {
groupNames = group_names?.[0]?.value || []
}
let allRest = { let allRest = {
...rest, ...rest,
...restKnowledgeConfig, ...restKnowledgeConfig,
@@ -107,7 +98,14 @@ const Properties: FC<PropertiesProps> = ({
Object.keys(values).forEach(key => { Object.keys(values).forEach(key => {
if (selectedNode.data?.config?.[key]) { if (selectedNode.data?.config?.[key]) {
selectedNode.data.config[key].defaultValue = values[key] // Create a deep copy to avoid reference sharing between nodes
if (!selectedNode.data.config[key]) {
selectedNode.data.config[key] = {};
}
selectedNode.data.config[key] = {
...selectedNode.data.config[key],
defaultValue: values[key]
};
} }
}) })
@@ -194,7 +192,7 @@ const Properties: FC<PropertiesProps> = ({
const allPreviousNodeIds = getAllPreviousNodes(selectedNode.id); const allPreviousNodeIds = getAllPreviousNodes(selectedNode.id);
const childNodeIds = getChildNodes(selectedNode.id); const childNodeIds = getChildNodes(selectedNode.id);
console.log('childNodeIds', childNodeIds) console.log('childNodeIds', selectedNode, childNodeIds)
const allRelevantNodeIds = [...allPreviousNodeIds, ...childNodeIds]; const allRelevantNodeIds = [...allPreviousNodeIds, ...childNodeIds];
allRelevantNodeIds.forEach(nodeId => { allRelevantNodeIds.forEach(nodeId => {
@@ -219,7 +217,7 @@ const Properties: FC<PropertiesProps> = ({
label: variable.name, label: variable.name,
type: 'variable', type: 'variable',
dataType: variable.type, dataType: variable.type,
value: `{{${nodeId}.${variable.name}}}`, value: `${node.getData().id}.${variable.name}`,
nodeData: nodeData, nodeData: nodeData,
}); });
} }
@@ -249,7 +247,7 @@ const Properties: FC<PropertiesProps> = ({
label: 'output', label: 'output',
type: 'variable', type: 'variable',
dataType: 'String', dataType: 'String',
value: `${nodeId}.output`, value: `${node.getData().id}.output`,
nodeData: nodeData, nodeData: nodeData,
}); });
} }
@@ -263,7 +261,104 @@ const Properties: FC<PropertiesProps> = ({
label: 'message', label: 'message',
type: 'variable', type: 'variable',
dataType: 'array[object]', dataType: 'array[object]',
value: `${nodeId}.message`, value: `${node.getData().id}.message`,
nodeData: nodeData,
});
}
break
case 'parameter-extractor':
const successKey = `${nodeId}___is_success`;
const reasonKey = `${nodeId}___reason`;
if (!addedKeys.has(successKey)) {
addedKeys.add(successKey);
variableList.push({
key: successKey,
label: '__is_success',
type: 'variable',
dataType: 'number',
value: `${node.getData().id}.__is_success`,
nodeData: nodeData,
});
}
if (!addedKeys.has(reasonKey)) {
addedKeys.add(reasonKey);
variableList.push({
key: reasonKey,
label: '__reason',
type: 'variable',
dataType: 'string',
value: `${node.getData().id}.__reason`,
nodeData: nodeData,
});
}
// Add params variables
const paramsList = nodeData.config?.params?.defaultValue || [];
paramsList.forEach((param: any) => {
if (!param || !param?.name) return;
const paramKey = `${nodeId}_${param.name}`;
if (!addedKeys.has(paramKey)) {
addedKeys.add(paramKey);
variableList.push({
key: paramKey,
label: param.name,
type: 'variable',
dataType: param.type || 'string',
value: `${node.getData().id}.${param.name}`,
nodeData: nodeData,
});
}
});
break
case 'var-aggregator':
const varAggregatorKey = `${nodeId}_output`;
if (!addedKeys.has(varAggregatorKey)) {
addedKeys.add(varAggregatorKey);
variableList.push({
key: varAggregatorKey,
label: 'output',
type: 'variable',
dataType: 'string',
value: `${node.getData().id}.output`,
nodeData: nodeData,
});
}
break
case 'http-request':
const httpBodyKey = `${nodeId}_body`;
const httpStatusKey = `${nodeId}_status_code`;
if (!addedKeys.has(httpBodyKey)) {
addedKeys.add(httpBodyKey);
variableList.push({
key: httpBodyKey,
label: 'body',
type: 'variable',
dataType: 'string',
value: `${node.getData().id}.body`,
nodeData: nodeData,
});
}
if (!addedKeys.has(httpStatusKey)) {
addedKeys.add(httpStatusKey);
variableList.push({
key: httpStatusKey,
label: 'status_code',
type: 'variable',
dataType: 'number',
value: `${node.getData().id}.status_code`,
nodeData: nodeData,
});
}
break
case 'jinja-render':
const jinjaOutputKey = `${nodeId}_output`;
if (!addedKeys.has(jinjaOutputKey)) {
addedKeys.add(jinjaOutputKey);
variableList.push({
key: jinjaOutputKey,
label: 'output',
type: 'variable',
dataType: 'string',
value: `${node.getData().id}.output`,
nodeData: nodeData, nodeData: nodeData,
}); });
} }
@@ -283,7 +378,7 @@ const Properties: FC<PropertiesProps> = ({
label: variable.name, label: variable.name,
type: 'variable', type: 'variable',
dataType: variable.type, dataType: variable.type,
value: `conversation.${variable.name}`, value: `conv.${variable.name}`,
nodeData: { type: 'CONVERSATION', name: 'CONVERSATION', icon: '' }, nodeData: { type: 'CONVERSATION', name: 'CONVERSATION', icon: '' },
group: 'CONVERSATION' group: 'CONVERSATION'
}); });
@@ -387,7 +482,7 @@ const Properties: FC<PropertiesProps> = ({
label: 'context', label: 'context',
type: 'variable', type: 'variable',
dataType: 'String', dataType: 'String',
value: `{{context}}`, value: `context`,
nodeData: selectedNode.getData(), nodeData: selectedNode.getData(),
isContext: true, isContext: true,
}); });
@@ -476,7 +571,7 @@ const Properties: FC<PropertiesProps> = ({
<Form.Item key={key} name={key} <Form.Item key={key} name={key}
label={t(`workflow.config.${selectedNode?.data?.type}.${key}`)} label={t(`workflow.config.${selectedNode?.data?.type}.${key}`)}
> >
<MappingList name={key} /> <MappingList name={key} options={variableList} />
</Form.Item> </Form.Item>
) )
@@ -583,7 +678,7 @@ const Properties: FC<PropertiesProps> = ({
? <Input.TextArea placeholder={t('common.pleaseEnter')} /> ? <Input.TextArea placeholder={t('common.pleaseEnter')} />
: config.type === 'select' : config.type === 'select'
? <Select ? <Select
options={config.needTranslation ? config.options?.map(vo => ({ ...vo, label: t(vo.label) })) : config.options} options={config.needTranslation ? config.options?.map(vo => ({ ...vo, label: t(vo.label) })) : config.options}
placeholder={t('common.pleaseSelect')} placeholder={t('common.pleaseSelect')}
/> />
: config.type === 'inputNumber' : config.type === 'inputNumber'
@@ -635,7 +730,7 @@ const Properties: FC<PropertiesProps> = ({
} }
/> />
: config.type === 'switch' : config.type === 'switch'
? <Switch /> ? <Switch onChange={key === 'group' ? () => { form.setFieldValue('group_names', []) } : undefined} />
: config.type === 'categoryList' : config.type === 'categoryList'
? <CategoryList parentName={key} selectedNode={selectedNode} graphRef={graphRef} /> ? <CategoryList parentName={key} selectedNode={selectedNode} graphRef={graphRef} />
: config.type === 'conditionList' : config.type === 'conditionList'

View File

@@ -162,6 +162,7 @@ export const nodeLibrary: NodeLibrary[] = [
}, },
text: { text: {
type: 'variableList', type: 'variableList',
filterLoopIterationVars: true
}, },
params: { params: {
type: 'paramList', type: 'paramList',
@@ -274,6 +275,7 @@ export const nodeLibrary: NodeLibrary[] = [
}, },
parallel: { parallel: {
type: 'switch', type: 'switch',
defaultValue: false
}, },
parallel_count: { parallel_count: {
type: 'slider', type: 'slider',
@@ -286,6 +288,7 @@ export const nodeLibrary: NodeLibrary[] = [
}, },
flatten: { // 扁平化输出 flatten: { // 扁平化输出
type: 'switch', type: 'switch',
defaultValue: false
}, },
output: { output: {
type: 'variableList', type: 'variableList',
@@ -306,6 +309,13 @@ export const nodeLibrary: NodeLibrary[] = [
expressions: [] expressions: []
} }
}, },
max_loop: {
type: 'slider',
min: 1,
max: 100,
step: 1,
defaultValue: 10
},
} }
}, },
{ type: "cycle-start", icon: loopIcon }, { type: "cycle-start", icon: loopIcon },
@@ -319,7 +329,7 @@ export const nodeLibrary: NodeLibrary[] = [
}, },
group_names: { group_names: {
type: 'groupVariableList', type: 'groupVariableList',
defaultValue: [{ key: 'Group1', value: []}] defaultValue: [],
} }
} }
}, },

View File

@@ -94,9 +94,7 @@ export const useWorkflowGraph = ({
const { group_names, group } = config const { group_names, group } = config
nodeLibraryConfig.config[key].defaultValue = group nodeLibraryConfig.config[key].defaultValue = group
? Object.entries(group_names as Record<string, any>).map(([key, value]) => ({ key, value })) ? Object.entries(group_names as Record<string, any>).map(([key, value]) => ({ key, value }))
: [{ key: 'Group1', value: group_names }] : group_names
console.log('group_names', nodeLibraryConfig.config)
} else if (nodeLibraryConfig.config && nodeLibraryConfig.config[key] && config[key]) { } else if (nodeLibraryConfig.config && nodeLibraryConfig.config[key] && config[key]) {
nodeLibraryConfig.config[key].defaultValue = config[key] nodeLibraryConfig.config[key].defaultValue = config[key]
} }
@@ -832,7 +830,7 @@ export const useWorkflowGraph = ({
// 创建干净的节点数据,只保留必要的字段 // 创建干净的节点数据,只保留必要的字段
const cleanNodeData = { const cleanNodeData = {
id: `${dragData.type}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`, id: `${dragData.type.replace(/-/g, '_')}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
name: t(`workflow.${dragData.type}`), name: t(`workflow.${dragData.type}`),
...nodeLibraryConfig ...nodeLibraryConfig
}; };
@@ -842,6 +840,7 @@ export const useWorkflowGraph = ({
...graphNodeLibrary[dragData.type], ...graphNodeLibrary[dragData.type],
x: point.x - 150, x: point.x - 150,
y: point.y - 100, y: point.y - 100,
id: cleanNodeData.id,
data: { ...cleanNodeData, isGroup: true }, data: { ...cleanNodeData, isGroup: true },
}); });
} else if (dragData.type === 'if-else') { } else if (dragData.type === 'if-else') {
@@ -850,6 +849,7 @@ export const useWorkflowGraph = ({
...graphNodeLibrary[dragData.type], ...graphNodeLibrary[dragData.type],
x: point.x - 100, x: point.x - 100,
y: point.y - 60, y: point.y - 60,
id: cleanNodeData.id,
data: { ...cleanNodeData }, data: { ...cleanNodeData },
}); });
} else { } else {
@@ -858,6 +858,7 @@ export const useWorkflowGraph = ({
...(graphNodeLibrary[dragData.type] || graphNodeLibrary.default), ...(graphNodeLibrary[dragData.type] || graphNodeLibrary.default),
x: point.x - 60, x: point.x - 60,
y: point.y - 20, y: point.y - 20,
id: cleanNodeData.id,
data: { ...cleanNodeData }, data: { ...cleanNodeData },
}); });
} }
@@ -881,7 +882,15 @@ export const useWorkflowGraph = ({
if (data.config) { if (data.config) {
Object.keys(data.config).forEach(key => { Object.keys(data.config).forEach(key => {
if (data.config[key] && 'defaultValue' in data.config[key] && key !== 'knowledge_retrieval') { 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.group.defaultValue) {
data.config[key].defaultValue.map((vo: any) => {
group_names[vo.key] = 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 itemConfig[key] = data.config[key].defaultValue
} else if (key === 'knowledge_retrieval' && data.config[key] && 'defaultValue' in data.config[key]) { } else if (key === 'knowledge_retrieval' && data.config[key] && 'defaultValue' in data.config[key]) {
const { knowledge_bases } = data.config[key].defaultValue const { knowledge_bases } = data.config[key].defaultValue
@@ -910,7 +919,7 @@ export const useWorkflowGraph = ({
const sourceCell = graphRef.current?.getCellById(edge.getSourceCellId()); const sourceCell = graphRef.current?.getCellById(edge.getSourceCellId());
const targetCell = graphRef.current?.getCellById(edge.getTargetCellId()); const targetCell = graphRef.current?.getCellById(edge.getTargetCellId());
const sourcePortId = edge.getSourcePortId(); const sourcePortId = edge.getSourcePortId();
// 过滤无效连线源节点或目标节点不存在或者是add-node类型 // 过滤无效连线源节点或目标节点不存在或者是add-node类型
if (!sourceCell?.getData()?.id || !targetCell?.getData()?.id || if (!sourceCell?.getData()?.id || !targetCell?.getData()?.id ||
sourceCell?.getData()?.type === 'add-node' || targetCell?.getData()?.type === 'add-node') { sourceCell?.getData()?.type === 'add-node' || targetCell?.getData()?.type === 'add-node') {