117 lines
4.1 KiB
TypeScript
117 lines
4.1 KiB
TypeScript
import { DrawerShell } from '../../../components/DrawerShell';
|
|
import './DashboardManagementModals.css';
|
|
import './DashboardSupportModals.css';
|
|
|
|
interface CommonModalLabels {
|
|
cancel: string;
|
|
close: string;
|
|
save: string;
|
|
}
|
|
|
|
interface TemplateManagerLabels extends CommonModalLabels {
|
|
processing: string;
|
|
templateManagerTitle: string;
|
|
templateTabAgent: string;
|
|
templateTabTopic: string;
|
|
}
|
|
|
|
interface TemplateManagerModalProps {
|
|
open: boolean;
|
|
templateTab: 'agent' | 'topic';
|
|
templateAgentCount: number;
|
|
templateTopicCount: number;
|
|
templateAgentText: string;
|
|
templateTopicText: string;
|
|
isSavingTemplates: boolean;
|
|
labels: TemplateManagerLabels;
|
|
onClose: () => void;
|
|
onTemplateTabChange: (tab: 'agent' | 'topic') => void;
|
|
onTemplateAgentTextChange: (value: string) => void;
|
|
onTemplateTopicTextChange: (value: string) => void;
|
|
onSave: (tab: 'agent' | 'topic') => Promise<void> | void;
|
|
}
|
|
|
|
export function TemplateManagerModal({
|
|
open,
|
|
templateTab,
|
|
templateAgentCount,
|
|
templateTopicCount,
|
|
templateAgentText,
|
|
templateTopicText,
|
|
isSavingTemplates,
|
|
labels,
|
|
onClose,
|
|
onTemplateTabChange,
|
|
onTemplateAgentTextChange,
|
|
onTemplateTopicTextChange,
|
|
onSave,
|
|
}: TemplateManagerModalProps) {
|
|
if (!open) return null;
|
|
|
|
const activeTemplateCount = templateTab === 'agent' ? templateAgentCount : templateTopicCount;
|
|
const activeTemplateLabel = templateTab === 'agent' ? labels.templateTabAgent : labels.templateTabTopic;
|
|
const activeTemplateText = templateTab === 'agent' ? templateAgentText : templateTopicText;
|
|
const activeTemplatePlaceholder = templateTab === 'agent' ? '{"agents_md":"..."}' : '{"presets":[...]}';
|
|
const handleTemplateTextChange = templateTab === 'agent' ? onTemplateAgentTextChange : onTemplateTopicTextChange;
|
|
|
|
return (
|
|
<DrawerShell
|
|
open={open}
|
|
onClose={onClose}
|
|
title={labels.templateManagerTitle}
|
|
subtitle={`${activeTemplateLabel} (${activeTemplateCount})`}
|
|
size="extend"
|
|
bodyClassName="ops-form-drawer-body"
|
|
closeLabel={labels.close}
|
|
footer={(
|
|
<div className="drawer-shell-footer-content">
|
|
<div className="drawer-shell-footer-main field-label">
|
|
{`${activeTemplateLabel} (${activeTemplateCount})`}
|
|
</div>
|
|
<div className="ops-inline-actions ops-inline-actions-wrap">
|
|
<button className="btn btn-secondary" onClick={onClose}>{labels.cancel}</button>
|
|
<button className="btn btn-primary" disabled={isSavingTemplates} onClick={() => void onSave(templateTab)}>
|
|
{isSavingTemplates ? labels.processing : labels.save}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
>
|
|
<div className="ops-form-modal">
|
|
<div className="ops-template-tabs" role="tablist" aria-label={labels.templateManagerTitle}>
|
|
<button
|
|
className={`ops-template-tab ${templateTab === 'agent' ? 'is-active' : ''}`}
|
|
onClick={() => onTemplateTabChange('agent')}
|
|
role="tab"
|
|
aria-selected={templateTab === 'agent'}
|
|
>
|
|
<span className="ops-template-tab-label">{`${labels.templateTabAgent} (${templateAgentCount})`}</span>
|
|
</button>
|
|
<button
|
|
className={`ops-template-tab ${templateTab === 'topic' ? 'is-active' : ''}`}
|
|
onClick={() => onTemplateTabChange('topic')}
|
|
role="tab"
|
|
aria-selected={templateTab === 'topic'}
|
|
>
|
|
<span className="ops-template-tab-label">{`${labels.templateTabTopic} (${templateTopicCount})`}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="ops-form-scroll">
|
|
<div className="ops-config-grid" style={{ gridTemplateColumns: '1fr' }}>
|
|
<div className="ops-config-field">
|
|
<textarea
|
|
className="textarea md-area mono"
|
|
rows={16}
|
|
value={activeTemplateText}
|
|
onChange={(e) => handleTemplateTextChange(e.target.value)}
|
|
placeholder={activeTemplatePlaceholder}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DrawerShell>
|
|
);
|
|
}
|