feat: llm node add context
This commit is contained in:
zhaoying
@@ -42,13 +42,21 @@ const VariableComponent: React.FC<{ nodeKey: NodeKey; data: Suggestion }> = ({
|
||||
})}
|
||||
contentEditable={false}
|
||||
>
|
||||
<img
|
||||
src={data.nodeData?.icon}
|
||||
style={{ width: '12px', height: '12px', marginRight: '4px' }}
|
||||
alt=""
|
||||
/>
|
||||
<span className="rb:wrap-break-word rb:line-clamp-1">{data.nodeData?.name}</span>
|
||||
<span style={{ color: '#DFE4ED', margin: '0 2px' }}>/</span>
|
||||
{data.isContext ? (
|
||||
<span style={{ fontSize: '12px', marginRight: '4px' }}>📄</span>
|
||||
) : (
|
||||
<img
|
||||
src={data.nodeData?.icon}
|
||||
style={{ width: '12px', height: '12px', marginRight: '4px' }}
|
||||
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>
|
||||
);
|
||||
|
||||
@@ -11,7 +11,9 @@ export interface Suggestion {
|
||||
type: string;
|
||||
dataType: string;
|
||||
value: string;
|
||||
nodeData: NodeProperties
|
||||
nodeData: NodeProperties;
|
||||
isContext?: boolean; // 标记是否为context变量
|
||||
disabled?: boolean; // 标记是否禁用
|
||||
}
|
||||
|
||||
const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {
|
||||
@@ -131,19 +133,20 @@ const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {
|
||||
key={option.key}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
cursor: 'pointer',
|
||||
cursor: option.disabled ? 'not-allowed' : 'pointer',
|
||||
background: selectedIndex === globalIndex ? '#f0f8ff' : 'white',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
opacity: option.disabled ? 0.5 : 1,
|
||||
}}
|
||||
onClick={() => insertMention(option)}
|
||||
onClick={() => !option.disabled && insertMention(option)}
|
||||
onMouseEnter={() => setSelectedIndex(globalIndex)}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span
|
||||
style={{
|
||||
background: option.type === 'context' ? '#722ed1' :
|
||||
background: option.isContext ? '#722ed1' :
|
||||
option.type === 'system' ? '#1890ff' : '#52c41a',
|
||||
color: 'white',
|
||||
padding: '2px 6px',
|
||||
@@ -153,7 +156,7 @@ const AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{option.type === 'context' ? '📄' :
|
||||
{option.isContext ? '📄' :
|
||||
option.type === 'system' ? 'x' : 'x'}
|
||||
</span>
|
||||
<span style={{ fontSize: '14px' }}>{option.label}</span>
|
||||
|
||||
@@ -25,7 +25,20 @@ const InitialValuePlugin: React.FC<InitialValuePluginProps> = ({ value, options
|
||||
|
||||
parts.forEach(part => {
|
||||
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) {
|
||||
const [_, nodeId, label] = match;
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
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';
|
||||
|
||||
interface MappingListProps {
|
||||
@@ -33,8 +33,8 @@ const MappingList: React.FC<MappingListProps> = ({ name }) => {
|
||||
</Space>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
|
||||
Add field
|
||||
<Button type="dashed" onClick={() => add()} block>
|
||||
+ {t('common.add')}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type FC } from 'react';
|
||||
import { type FC, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Input, Form, Space, Button, Row, Col, Select, type FormListOperation } from 'antd';
|
||||
import { MinusCircleOutlined } from '@ant-design/icons';
|
||||
@@ -31,6 +31,24 @@ const MessageEditor: FC<TextareaProps> = ({
|
||||
const form = Form.useFormInstance();
|
||||
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 list = values[parentName];
|
||||
const lastRole = list[list.length - 1].role
|
||||
@@ -80,7 +98,7 @@ const MessageEditor: FC<TextareaProps> = ({
|
||||
name={[name, 'content']}
|
||||
noStyle
|
||||
>
|
||||
<Editor placeholder={placeholder} options={options} />
|
||||
<Editor placeholder={placeholder} options={processedOptions} />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
)
|
||||
@@ -104,7 +122,7 @@ const MessageEditor: FC<TextareaProps> = ({
|
||||
name={parentName}
|
||||
noStyle
|
||||
>
|
||||
<Editor placeholder={placeholder} options={options} />
|
||||
<Editor placeholder={placeholder} options={processedOptions} />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
}
|
||||
|
||||
@@ -330,9 +330,30 @@ const Properties: FC<PropertiesProps> = ({
|
||||
}
|
||||
|
||||
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 (
|
||||
<Form.Item key={key} name={key}>
|
||||
<MessageEditor options={variableList} parentName={key} />
|
||||
<MessageEditor options={contextVariableList} parentName={key} />
|
||||
</Form.Item>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user