129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
import { PanelFrame } from "./PanelFrame";
|
||
import type { PromptState } from "../state/types";
|
||
|
||
interface PromptPresetListItem {
|
||
id: string;
|
||
name: string;
|
||
prompt_version: string;
|
||
systemPrompt: string;
|
||
developerPrompt: string;
|
||
domainPrompt: string;
|
||
schemaNotes?: string;
|
||
fewShotExamples?: string;
|
||
}
|
||
|
||
interface PromptPanelProps {
|
||
value: PromptState;
|
||
onChange: (next: PromptState) => void;
|
||
presets: PromptPresetListItem[];
|
||
selectedPresetId: string;
|
||
onSelectPreset: (id: string) => void;
|
||
onLoadPreset: () => void;
|
||
onSavePreset: () => void;
|
||
onResetDefaults: () => void;
|
||
onDiffPrevious: () => void;
|
||
presetName: string;
|
||
onPresetNameChange: (name: string) => void;
|
||
diffSummary: string;
|
||
embedded?: boolean;
|
||
}
|
||
|
||
export function PromptPanel({
|
||
value,
|
||
onChange,
|
||
presets,
|
||
selectedPresetId,
|
||
onSelectPreset,
|
||
onLoadPreset,
|
||
onSavePreset,
|
||
onResetDefaults,
|
||
onDiffPrevious,
|
||
presetName,
|
||
onPresetNameChange,
|
||
diffSummary,
|
||
embedded = false
|
||
}: PromptPanelProps) {
|
||
const content = (
|
||
<>
|
||
<div className="prompt-manager-grid">
|
||
<label>
|
||
Системный prompt
|
||
<textarea
|
||
value={value.systemPrompt}
|
||
onChange={(event) => onChange({ ...value, systemPrompt: event.target.value })}
|
||
rows={6}
|
||
/>
|
||
</label>
|
||
<label>
|
||
Developer / Instruction prompt
|
||
<textarea
|
||
value={value.developerPrompt}
|
||
onChange={(event) => onChange({ ...value, developerPrompt: event.target.value })}
|
||
rows={6}
|
||
/>
|
||
</label>
|
||
<label>
|
||
Domain prompt
|
||
<textarea value={value.domainPrompt} onChange={(event) => onChange({ ...value, domainPrompt: event.target.value })} rows={6} />
|
||
</label>
|
||
<label>
|
||
Schema notes
|
||
<textarea value={value.schemaNotes} onChange={(event) => onChange({ ...value, schemaNotes: event.target.value })} rows={6} />
|
||
</label>
|
||
<label className="full-width">
|
||
Few-shot examples
|
||
<textarea
|
||
value={value.fewShotExamples}
|
||
onChange={(event) => onChange({ ...value, fewShotExamples: event.target.value })}
|
||
rows={8}
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div className="button-row">
|
||
<select value={selectedPresetId} onChange={(event) => onSelectPreset(event.target.value)}>
|
||
<option value="">Выберите preset...</option>
|
||
{presets.map((preset) => (
|
||
<option value={preset.id} key={preset.id}>
|
||
{preset.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<button type="button" onClick={() => onLoadPreset()}>
|
||
Загрузить preset
|
||
</button>
|
||
<input value={presetName} onChange={(event) => onPresetNameChange(event.target.value)} placeholder="Имя для сохранения" />
|
||
<button type="button" onClick={() => onSavePreset()}>
|
||
Сохранить preset
|
||
</button>
|
||
<button type="button" onClick={() => onDiffPrevious()}>
|
||
Diff с предыдущим
|
||
</button>
|
||
<button type="button" onClick={() => onResetDefaults()}>
|
||
Сбросить к default
|
||
</button>
|
||
</div>
|
||
{diffSummary ? <p className="diff-summary">{diffSummary}</p> : null}
|
||
</>
|
||
);
|
||
|
||
if (embedded) {
|
||
return (
|
||
<section className="embedded-panel-section">
|
||
<div className="embedded-panel-section-header">
|
||
<div>
|
||
<h4>Prompt Manager</h4>
|
||
<p>Системный, developer и domain уровни управляются отдельно.</p>
|
||
</div>
|
||
</div>
|
||
{content}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<PanelFrame title="Prompt Manager" subtitle="Системный, developer и domain уровни управляются отдельно.">
|
||
{content}
|
||
</PanelFrame>
|
||
);
|
||
}
|