90 lines
3.5 KiB
TypeScript
90 lines
3.5 KiB
TypeScript
import { useState } from 'react'
|
||
import { useTemplates } from '../hooks/useTemplates'
|
||
|
||
export default function TemplatesPage() {
|
||
const { templates, isLoading, createTemplate, deleteTemplate } = useTemplates()
|
||
const [showForm, setShowForm] = useState(false)
|
||
const [form, setForm] = useState({ name: '', description: '', system_prompt: '', user_prompt: '', type: 'custom' as const })
|
||
|
||
const handleCreate = async () => {
|
||
await createTemplate(form)
|
||
setShowForm(false)
|
||
setForm({ name: '', description: '', system_prompt: '', user_prompt: '', type: 'custom' })
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h1 className="text-2xl font-bold">Шаблоны протоколов</h1>
|
||
<button
|
||
onClick={() => setShowForm(!showForm)}
|
||
className="bg-blue-600 text-white px-4 py-2 rounded text-sm hover:bg-blue-700"
|
||
>
|
||
+ Новый шаблон
|
||
</button>
|
||
</div>
|
||
|
||
{showForm && (
|
||
<div className="bg-white p-4 rounded-lg shadow-sm mb-6 space-y-3">
|
||
<input
|
||
placeholder="Название"
|
||
value={form.name}
|
||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||
className="w-full border rounded px-3 py-2 text-sm"
|
||
/>
|
||
<input
|
||
placeholder="Описание"
|
||
value={form.description}
|
||
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
||
className="w-full border rounded px-3 py-2 text-sm"
|
||
/>
|
||
<textarea
|
||
placeholder="System prompt"
|
||
value={form.system_prompt}
|
||
onChange={(e) => setForm({ ...form, system_prompt: e.target.value })}
|
||
className="w-full border rounded px-3 py-2 text-sm h-24"
|
||
/>
|
||
<textarea
|
||
placeholder="User prompt (используйте {transcription} для вставки текста)"
|
||
value={form.user_prompt}
|
||
onChange={(e) => setForm({ ...form, user_prompt: e.target.value })}
|
||
className="w-full border rounded px-3 py-2 text-sm h-24"
|
||
/>
|
||
<button onClick={handleCreate} className="bg-green-600 text-white px-4 py-2 rounded text-sm">
|
||
Создать
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{isLoading ? (
|
||
<p>Загрузка...</p>
|
||
) : (
|
||
<div className="space-y-4">
|
||
{templates.map((tpl) => (
|
||
<div key={tpl.id} className="bg-white p-4 rounded-lg shadow-sm">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div>
|
||
<h3 className="font-semibold">{tpl.name}</h3>
|
||
<p className="text-sm text-gray-500">{tpl.description}</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs bg-gray-100 px-2 py-1 rounded">{tpl.type}</span>
|
||
{tpl.is_default && <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">По умолчанию</span>}
|
||
{tpl.type === 'custom' && (
|
||
<button
|
||
onClick={() => deleteTemplate(tpl.id)}
|
||
className="text-red-500 text-xs hover:text-red-700"
|
||
>
|
||
Удалить
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|