feat: llm node add context

This commit is contained in:
zhaoying
2026-01-04 12:06:24 +08:00
parent 02c8fd0e3f
commit 351be8aaf3
10 changed files with 233 additions and 150 deletions

View File

@@ -1589,6 +1589,7 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
model_id: 'Model', model_id: 'Model',
temperature: 'Temperature', temperature: 'Temperature',
max_tokens: 'Max Tokens', max_tokens: 'Max Tokens',
context: 'Context',
}, },
start: { start: {
variables: 'Input Fields', variables: 'Input Fields',

View File

@@ -1690,6 +1690,7 @@ export const zh = {
model_id: '模型', model_id: '模型',
temperature: '温度', temperature: '温度',
max_tokens: '最大令牌数', max_tokens: '最大令牌数',
context: '上下文',
}, },
start: { start: {
variables: '输入字段', variables: '输入字段',

View File

@@ -42,13 +42,21 @@ const VariableComponent: React.FC<{ nodeKey: NodeKey; data: Suggestion }> = ({
})} })}
contentEditable={false} contentEditable={false}
> >
<img {data.isContext ? (
src={data.nodeData?.icon} <span style={{ fontSize: '12px', marginRight: '4px' }}>📄</span>
style={{ width: '12px', height: '12px', marginRight: '4px' }} ) : (
alt="" <img
/> src={data.nodeData?.icon}
<span className="rb:wrap-break-word rb:line-clamp-1">{data.nodeData?.name}</span> style={{ width: '12px', height: '12px', marginRight: '4px' }}
<span style={{ color: '#DFE4ED', margin: '0 2px' }}>/</span> alt=""
/>
)}
{!data.isContext && (
<>
<span className="rb:wrap-break-word rb:line-clamp-1">{data.nodeData?.name}</span>
<span style={{ color: '#DFE4ED', margin: '0 2px' }}>/</span>
</>
)}
<span className="rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:flex-1" style={{ color: '#155EEF' }}>{data.label}</span> <span className="rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:flex-1" style={{ color: '#155EEF' }}>{data.label}</span>
</span> </span>
); );

View File

@@ -11,7 +11,9 @@ export interface Suggestion {
type: string; type: string;
dataType: string; dataType: string;
value: string; value: string;
nodeData: NodeProperties nodeData: NodeProperties;
isContext?: boolean; // 标记是否为context变量
disabled?: boolean; // 标记是否禁用
} }
const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => { const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {
@@ -131,19 +133,20 @@ const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {
key={option.key} key={option.key}
style={{ style={{
padding: '8px 12px', padding: '8px 12px',
cursor: 'pointer', cursor: option.disabled ? 'not-allowed' : 'pointer',
background: selectedIndex === globalIndex ? '#f0f8ff' : 'white', background: selectedIndex === globalIndex ? '#f0f8ff' : 'white',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
opacity: option.disabled ? 0.5 : 1,
}} }}
onClick={() => insertMention(option)} onClick={() => !option.disabled && insertMention(option)}
onMouseEnter={() => setSelectedIndex(globalIndex)} onMouseEnter={() => setSelectedIndex(globalIndex)}
> >
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<span <span
style={{ style={{
background: option.type === 'context' ? '#722ed1' : background: option.isContext ? '#722ed1' :
option.type === 'system' ? '#1890ff' : '#52c41a', option.type === 'system' ? '#1890ff' : '#52c41a',
color: 'white', color: 'white',
padding: '2px 6px', padding: '2px 6px',
@@ -153,7 +156,7 @@ const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {
textAlign: 'center', textAlign: 'center',
}} }}
> >
{option.type === 'context' ? '📄' : {option.isContext ? '📄' :
option.type === 'system' ? 'x' : 'x'} option.type === 'system' ? 'x' : 'x'}
</span> </span>
<span style={{ fontSize: '14px' }}>{option.label}</span> <span style={{ fontSize: '14px' }}>{option.label}</span>

View File

@@ -25,7 +25,20 @@ 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\}\}$/);
// 匹配{{context}}格式
if (contextMatch) {
const contextSuggestion = options.find(s => s.isContext && s.label === 'context');
if (contextSuggestion) {
paragraph.append($createVariableNode(contextSuggestion));
} else {
paragraph.append($createTextNode(part));
}
return
}
// 匹配普通变量{{nodeId.label}}格式
if (match) { if (match) {
const [_, nodeId, label] = match; const [_, nodeId, label] = match;

View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; import { MinusCircleOutlined } from '@ant-design/icons';
import { Button, Form, Input, Space } from 'antd'; import { Button, Form, Input, Space } from 'antd';
interface MappingListProps { interface MappingListProps {
@@ -33,8 +33,8 @@ const MappingList: React.FC<MappingListProps> = ({ name }) => {
</Space> </Space>
))} ))}
<Form.Item> <Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}> <Button type="dashed" onClick={() => add()} block>
Add field + {t('common.add')}
</Button> </Button>
</Form.Item> </Form.Item>
</> </>

View File

@@ -1,4 +1,4 @@
import { type FC } from 'react'; import { type FC, useMemo } from 'react';
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Input, Form, Space, Button, Row, Col, Select, type FormListOperation } from 'antd'; import { Input, Form, Space, Button, Row, Col, Select, type FormListOperation } from 'antd';
import { MinusCircleOutlined } from '@ant-design/icons'; import { MinusCircleOutlined } from '@ant-design/icons';
@@ -31,6 +31,24 @@ const MessageEditor: FC<TextareaProps> = ({
const form = Form.useFormInstance(); const form = Form.useFormInstance();
const values = form.getFieldsValue() const values = form.getFieldsValue()
// 检查是否已经使用了context变量将已使用的context设置为disabled
const processedOptions = useMemo(() => {
if (!isArray || !values[parentName]) return options;
// 获取所有消息内容
const allContents = values[parentName]
.map((msg: any) => msg.content || '')
.join(' ');
// 将已使用的context变量标记为disabled
return options.map(opt => {
if (opt.isContext && allContents.includes(opt.value)) {
return { ...opt, disabled: true };
}
return opt;
});
}, [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[list.length - 1].role
@@ -80,7 +98,7 @@ const MessageEditor: FC<TextareaProps> = ({
name={[name, 'content']} name={[name, 'content']}
noStyle noStyle
> >
<Editor placeholder={placeholder} options={options} /> <Editor placeholder={placeholder} options={processedOptions} />
</Form.Item> </Form.Item>
</Space> </Space>
) )
@@ -104,7 +122,7 @@ const MessageEditor: FC<TextareaProps> = ({
name={parentName} name={parentName}
noStyle noStyle
> >
<Editor placeholder={placeholder} options={options} /> <Editor placeholder={placeholder} options={processedOptions} />
</Form.Item> </Form.Item>
</Space> </Space>
} }

View File

@@ -330,9 +330,30 @@ const Properties: FC<PropertiesProps> = ({
} }
if (selectedNode?.data?.type === 'llm' && key === 'messages' && config.type === 'define') { if (selectedNode?.data?.type === 'llm' && key === 'messages' && config.type === 'define') {
// 为llm节点且isArray=true时添加context变量支持
let contextVariableList = [...variableList];
const isArrayMode = config.isArray !== false; // 默认为true
if (isArrayMode) {
const contextKey = `${selectedNode.id}_context`;
const hasContextVariable = contextVariableList.some(v => v.key === contextKey);
if (!hasContextVariable) {
contextVariableList.unshift({
key: contextKey,
label: 'context',
type: 'variable',
dataType: 'String',
value: `{{context}}`,
nodeData: selectedNode.getData(),
isContext: true,
});
}
}
return ( return (
<Form.Item key={key} name={key}> <Form.Item key={key} name={key}>
<MessageEditor options={variableList} parentName={key} /> <MessageEditor options={contextVariableList} parentName={key} />
</Form.Item> </Form.Item>
) )
} }

View File

@@ -117,6 +117,9 @@ export const nodeLibrary: NodeLibrary[] = [
step: 1, step: 1,
defaultValue: 2000 defaultValue: 2000
}, },
context: {
type: 'variableList',
},
messages: { messages: {
type: 'define', type: 'define',
defaultValue: [ defaultValue: [
@@ -142,27 +145,27 @@ export const nodeLibrary: NodeLibrary[] = [
} }
}, },
// { type: "classification", icon: classificationIcon }, // { type: "classification", icon: classificationIcon },
// { type: "parameter-extractor", icon: parameterExtractionIcon, { type: "parameter-extractor", icon: parameterExtractionIcon,
// config: { config: {
// model_id: { model_id: {
// type: 'customSelect', type: 'customSelect',
// url: getModelListUrl, url: getModelListUrl,
// params: { type: 'llm,chat' }, // llm/chat params: { type: 'llm,chat' }, // llm/chat
// valueKey: 'id', valueKey: 'id',
// labelKey: 'name', labelKey: 'name',
// }, },
// text: { text: {
// type: 'variableList', type: 'variableList',
// }, },
// params: { params: {
// type: 'paramList', type: 'paramList',
// }, },
// prompt: { prompt: {
// type: 'messageEditor', type: 'messageEditor',
// isArray: false, isArray: false,
// }, },
// } }
// } }
] ]
}, },
// { // {
@@ -182,115 +185,115 @@ export const nodeLibrary: NodeLibrary[] = [
// { type: "agent_arbitration", icon: agentArbitrationIcon } // { type: "agent_arbitration", icon: agentArbitrationIcon }
// ] // ]
// }, // },
// { {
// category: "flowControl", category: "flowControl",
// nodes: [ nodes: [
// { type: "if-else", icon: conditionIcon, { type: "if-else", icon: conditionIcon,
// config: { config: {
// cases: { cases: {
// type: 'caseList', type: 'caseList',
// defaultValue: [ defaultValue: [
// { {
// logical_operator: 'and', logical_operator: 'and',
// expressions: [] expressions: []
// } }
// ] ]
// } }
// } }
// }, },
// // { type: "iteration", icon: iterationIcon }, // { type: "iteration", icon: iterationIcon },
// { type: "loop", icon: loopIcon }, // { type: "loop", icon: loopIcon },
// // { type: "parallel", icon: parallelIcon }, // { type: "parallel", icon: parallelIcon },
// { type: "var-aggregator", icon: aggregatorIcon, { type: "var-aggregator", icon: aggregatorIcon,
// config: { config: {
// group: { group: {
// type: 'switch', type: 'switch',
// defaultValue: false defaultValue: false
// }, },
// group_names: { group_names: {
// type: 'groupVariableList', type: 'groupVariableList',
// defaultValue: [{ key: 'Group1', value: []}] defaultValue: [{ key: 'Group1', value: []}]
// } }
// } }
// } }
// ] ]
// }, },
// { {
// category: "externalInteraction", category: "externalInteraction",
// nodes: [ nodes: [
// { type: "http-request", icon: httpRequestIcon, { type: "http-request", icon: httpRequestIcon,
// config: { config: {
// method: { method: {
// type: 'select', type: 'select',
// options: [ options: [
// { label: 'GET', value: 'GET' }, { label: 'GET', value: 'GET' },
// { label: 'POST', value: 'POST' }, { label: 'POST', value: 'POST' },
// { label: 'HEAD', value: 'HEAD' }, { label: 'HEAD', value: 'HEAD' },
// { label: 'PATCH', value: 'PATCH' }, { label: 'PATCH', value: 'PATCH' },
// { label: 'PUT', value: 'PUT' }, { label: 'PUT', value: 'PUT' },
// { label: 'DELETE', value: 'DELETE' }, { label: 'DELETE', value: 'DELETE' },
// ], ],
// defaultValue: 'GET' defaultValue: 'GET'
// }, },
// url: { url: {
// type: 'messageEditor', type: 'messageEditor',
// isArray: false, isArray: false,
// }, },
// auth: { auth: {
// type: 'define', type: 'define',
// defaultValue: { defaultValue: {
// auth_type: 'none' auth_type: 'none'
// } }
// }, },
// headers: { headers: {
// type: 'define', type: 'define',
// defaultValue: {} defaultValue: {}
// }, },
// params: { params: {
// type: 'define', type: 'define',
// defaultValue: {} defaultValue: {}
// }, },
// body: { body: {
// type: 'define', type: 'define',
// defaultValue: { defaultValue: {
// 'content_type': 'none' 'content_type': 'none'
// } }
// }, },
// verify_ssl: { verify_ssl: {
// type: 'switch', type: 'switch',
// defaultValue: false defaultValue: false
// }, },
// timeouts: { timeouts: {
// type: 'define', type: 'define',
// defaultValue: {} defaultValue: {}
// }, },
// retry: { retry: {
// type: 'define', type: 'define',
// }, },
// error_handle: { error_handle: {
// type: 'define', type: 'define',
// defaultValue: { defaultValue: {
// method: 'default' method: 'default'
// } }
// } }
// } }
// }, },
// // { type: "tools", icon: toolsIcon }, // { type: "tools", icon: toolsIcon },
// // { type: "code_execution", icon: codeExecutionIcon }, // { type: "code_execution", icon: codeExecutionIcon },
// { type: "jinja-render", icon: templateRenderingIcon, { type: "jinja-render", icon: templateRenderingIcon,
// config: { config: {
// mapping: { mapping: {
// type: 'mappingList', type: 'mappingList',
// defaultValue: [] defaultValue: []
// }, },
// template: { template: {
// type: 'messageEditor', type: 'messageEditor',
// isArray: false, isArray: false,
// }, },
// } }
// } }
// ] ]
// }, },
// { // {
// category: "safetyAndCompliance", // category: "safetyAndCompliance",
// nodes: [ // nodes: [

View File

@@ -160,7 +160,12 @@ export const useWorkflowGraph = ({
graphRef.current?.addNodes(nodeList) graphRef.current?.addNodes(nodeList)
} }
if (edges.length) { if (edges.length) {
const edgeList = edges.map(edge => { // 去重处理:相同节点之间的连线仅连一次
const uniqueEdges = edges.filter((edge, index, arr) => {
return arr.findIndex(e => e.source === edge.source && e.target === edge.target) === index;
});
const edgeList = uniqueEdges.map(edge => {
const { source, target, label } = edge const { source, target, label } = edge
const sourceCell = graphRef.current?.getCellById(source) const sourceCell = graphRef.current?.getCellById(source)
const targetCell = graphRef.current?.getCellById(target) const targetCell = graphRef.current?.getCellById(target)
@@ -788,6 +793,11 @@ export const useWorkflowGraph = ({
const targetCell = graphRef.current?.getCellById(edge.getTargetCellId()); const targetCell = graphRef.current?.getCellById(edge.getTargetCellId());
const sourcePortId = edge.getSourcePortId(); const sourcePortId = edge.getSourcePortId();
// 过滤无效连线:源节点或目标节点不存在
if (!sourceCell?.getData()?.id || !targetCell?.getData()?.id) {
return null;
}
// 如果是if-else节点的右侧端口连线添加label // 如果是if-else节点的右侧端口连线添加label
if (sourceCell?.getData()?.type === 'if-else' && sourcePortId?.startsWith('CASE')) { if (sourceCell?.getData()?.type === 'if-else' && sourcePortId?.startsWith('CASE')) {
return { return {
@@ -801,6 +811,11 @@ export const useWorkflowGraph = ({
source: sourceCell?.getData().id, source: sourceCell?.getData().id,
target: targetCell?.getData().id, target: targetCell?.getData().id,
}; };
})
.filter(edge => edge !== null)
.filter((edge, index, arr) => {
// 去重:相同节点之间的连线仅保留一次
return arr.findIndex(e => e && e.source === edge?.source && e.target === edge?.target) === index;
}), }),
} }
saveWorkflowConfig(config.app_id, params as WorkflowConfig) saveWorkflowConfig(config.app_id, params as WorkflowConfig)