ui-nyla/src/components/Automation2FlowEditor/nodes/configs/AiNodeConfig.tsx

90 lines
3.1 KiB
TypeScript

/**
* AI node config - prompt, query, document options per node type.
* Prompt/query fields support static value or node reference (Data Picker).
*/
import React from 'react';
import type { NodeConfigRendererProps } from './types';
import { DynamicValueField } from '../shared/DynamicValueField';
const AI_FIELD_CONFIG: Record<string, { label: string; key: string; type: 'textarea' | 'input' | 'select' | 'dynamic'; options?: string[] }[]> = {
'ai.prompt': [{ label: 'Prompt', key: 'prompt', type: 'textarea' }],
'ai.webResearch': [{ label: 'Query', key: 'query', type: 'dynamic' }],
'ai.summarizeDocument': [
{ label: 'Summary length', key: 'summaryLength', type: 'select', options: ['short', 'medium', 'long'] },
],
'ai.translateDocument': [{ label: 'Target language', key: 'targetLanguage', type: 'input' }],
'ai.convertDocument': [
{ label: 'Target format', key: 'targetFormat', type: 'select', options: ['pdf', 'docx', 'txt', 'md'] },
],
'ai.generateDocument': [{ label: 'Prompt', key: 'prompt', type: 'dynamic' }],
'ai.generateCode': [
{ label: 'Prompt', key: 'prompt', type: 'dynamic' },
{ label: 'Language', key: 'language', type: 'select', options: ['python', 'javascript', 'typescript', 'sql'] },
],
};
export const AiNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam, nodeType = 'ai.prompt' }) => {
const fields = AI_FIELD_CONFIG[nodeType] ?? AI_FIELD_CONFIG['ai.prompt'];
return (
<>
{fields.map((f) => {
if (f.type === 'dynamic') {
return (
<DynamicValueField
key={f.key}
paramKey={f.key}
value={params[f.key]}
onChange={updateParam}
label={f.label}
fieldType="textarea"
rows={4}
placeholder={f.label}
/>
);
}
if (f.type === 'textarea') {
return (
<div key={f.key}>
<label>{f.label}</label>
<textarea
value={(params[f.key] as string) ?? ''}
onChange={(e) => updateParam(f.key, e.target.value)}
placeholder={f.label}
rows={4}
/>
</div>
);
}
if (f.type === 'select') {
return (
<div key={f.key}>
<label>{f.label}</label>
<select
value={(params[f.key] as string) ?? (f.options?.[0] ?? '')}
onChange={(e) => updateParam(f.key, e.target.value)}
>
{(f.options ?? []).map((opt) => (
<option key={opt} value={opt}>
{opt}
</option>
))}
</select>
</div>
);
}
return (
<div key={f.key}>
<label>{f.label}</label>
<input
value={(params[f.key] as string) ?? ''}
onChange={(e) => updateParam(f.key, e.target.value)}
placeholder={f.label}
/>
</div>
);
})}
</>
);
};