61 lines
2.4 KiB
TypeScript
61 lines
2.4 KiB
TypeScript
import { Form, Input } from 'antd';
|
||
import { FileTextOutlined } from '@ant-design/icons';
|
||
|
||
interface PromptEditorProps {
|
||
form: any;
|
||
markDirty: () => void;
|
||
}
|
||
|
||
export default function PromptEditor({ form, markDirty }: PromptEditorProps) {
|
||
return (
|
||
<div className="flex-1 agent-editor-pane">
|
||
<div className="agent-editor-pane-body">
|
||
<div className="agent-editor-pane-header">
|
||
<div>
|
||
<h3 className="agent-editor-pane-title">个性化</h3>
|
||
<p className="agent-editor-pane-subtitle">
|
||
定义这个智能体的身份、语气、边界和输出规范，让它更像一个稳定的角色，而不是随机回复的模型。
|
||
</p>
|
||
</div>
|
||
<span className="agent-editor-badge">
|
||
<FileTextOutlined />
|
||
System Prompt
|
||
</span>
|
||
</div>
|
||
|
||
<div className="agent-editor-intro">
|
||
<div className="agent-editor-intro-title">提示词是这个智能体最重要的灵魂设定</div>
|
||
<div className="agent-editor-intro-text">
|
||
可以从身份定位、擅长任务、回应风格、拒答边界和输出格式这五个维度去描述，让预览区的表现更稳定。
|
||
</div>
|
||
</div>
|
||
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
onValuesChange={markDirty}
|
||
>
|
||
<div className="agent-editor-surface agent-editor-prompt-wrap">
|
||
<div style={{ fontSize: 12.5, color: 'var(--color-text-secondary)', marginBottom: 10, paddingInline: 4 }}>
|
||
建议写清楚角色设定、目标用户、语气和回答结构。
|
||
</div>
|
||
<div className="agent-editor-prompt">
|
||
<Form.Item name="prompt" noStyle>
|
||
<Input.TextArea
|
||
rows={30}
|
||
placeholder="在这里输入智能体的人设、技能、风格和输出规范..."
|
||
className="border-none focus:ring-0 bg-transparent p-4 font-mono text-sm leading-relaxed"
|
||
style={{ height: 'calc(100vh - 290px)', resize: 'none', borderRadius: 16 }}
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
</div>
|
||
<div className="text-[11px] text-gray-400 mt-2 px-2" style={{ color: 'var(--color-text-tertiary)' }}>
|
||
提示：写得越具体，预览区里的回答风格越稳定。
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|