Blomios
307ae71857
Agents for developpement added + frontend add + backend added. Git viewer created + agent and template creator + layout and project creator
237 lines
8.1 KiB
TypeScript
237 lines
8.1 KiB
TypeScript
/**
|
|
* `TemplateEditor` — a fullscreen overlay for creating or editing agent
|
|
* templates (L7). Rendered on top of the rest of the UI (`fixed inset-0`).
|
|
*
|
|
* Provides:
|
|
* - Name field and default-profile selector
|
|
* - Two tabs: "Edit" (textarea) and "Preview" (react-markdown)
|
|
* - Save (create/update) and Cancel/Close buttons
|
|
*
|
|
* Pure presentation: all mutations are delegated to the callbacks supplied by
|
|
* the parent (`TemplatesPanel`). Styled with `@/shared`; no inline styles.
|
|
*/
|
|
|
|
import { useState } from "react";
|
|
import ReactMarkdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
|
|
import type { AgentProfile, Template } from "@/domain";
|
|
import { Button, Input, cn } from "@/shared";
|
|
|
|
export interface TemplateEditorProps {
|
|
/**
|
|
* When set, the editor is in edit-mode for the given template; otherwise it
|
|
* is in create-mode (all fields start empty).
|
|
*/
|
|
template?: Template | null;
|
|
/** Available profiles for the default-profile selector. */
|
|
profiles: AgentProfile[];
|
|
/** Called when the user submits the form. */
|
|
onSave: (name: string, content: string, defaultProfileId: string) => Promise<void>;
|
|
/** Called when the user cancels / closes the overlay. */
|
|
onClose: () => void;
|
|
/** Whether a save operation is in flight. */
|
|
busy?: boolean;
|
|
}
|
|
|
|
type EditorTab = "edit" | "preview";
|
|
|
|
export function TemplateEditor({
|
|
template,
|
|
profiles,
|
|
onSave,
|
|
onClose,
|
|
busy = false,
|
|
}: TemplateEditorProps) {
|
|
const [name, setName] = useState(template?.name ?? "");
|
|
const [content, setContent] = useState(template?.contentMd ?? "");
|
|
const [defaultProfileId, setDefaultProfileId] = useState(
|
|
template?.defaultProfileId ?? "",
|
|
);
|
|
const [tab, setTab] = useState<EditorTab>("edit");
|
|
|
|
const canSave = name.trim().length > 0 && !busy;
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!canSave) return;
|
|
await onSave(name.trim(), content, defaultProfileId);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex flex-col bg-canvas"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="template editor"
|
|
>
|
|
{/* ── Header bar ── */}
|
|
<div className="flex shrink-0 items-center justify-between border-b border-border bg-surface px-4 py-3">
|
|
<h2 className="text-sm font-semibold text-content">
|
|
{template ? `Edit template — ${template.name}` : "New template"}
|
|
</h2>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
aria-label="close template editor"
|
|
onClick={onClose}
|
|
disabled={busy}
|
|
>
|
|
✕
|
|
</Button>
|
|
</div>
|
|
|
|
{/* ── Form body ── */}
|
|
<form
|
|
onSubmit={(e) => void handleSubmit(e)}
|
|
className="flex flex-1 flex-col gap-0 overflow-hidden"
|
|
>
|
|
{/* ── Meta fields ── */}
|
|
<div className="flex shrink-0 flex-wrap items-end gap-3 border-b border-border px-4 py-3">
|
|
<div className="flex min-w-0 flex-1 flex-col gap-1">
|
|
<label
|
|
htmlFor="te-name"
|
|
className="text-xs font-medium text-muted"
|
|
>
|
|
Name
|
|
</label>
|
|
<Input
|
|
id="te-name"
|
|
aria-label="template name"
|
|
placeholder="My template"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
disabled={busy}
|
|
className="min-w-48"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex min-w-0 flex-1 flex-col gap-1">
|
|
<label
|
|
htmlFor="te-profile"
|
|
className="text-xs font-medium text-muted"
|
|
>
|
|
Default profile
|
|
</label>
|
|
{profiles.length > 0 ? (
|
|
<select
|
|
id="te-profile"
|
|
aria-label="template default profile"
|
|
value={defaultProfileId}
|
|
onChange={(e) => setDefaultProfileId(e.target.value)}
|
|
disabled={busy}
|
|
className={cn(
|
|
"h-9 w-full rounded-md bg-raised px-3 text-sm text-content",
|
|
"border border-border outline-none transition-colors",
|
|
"focus:border-primary disabled:cursor-not-allowed disabled:opacity-50",
|
|
)}
|
|
>
|
|
<option value="">— none —</option>
|
|
{profiles.map((p) => (
|
|
<option key={p.id} value={p.id}>
|
|
{p.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
) : (
|
|
<Input
|
|
id="te-profile"
|
|
aria-label="template default profile"
|
|
placeholder="profile-id (optional)"
|
|
value={defaultProfileId}
|
|
onChange={(e) => setDefaultProfileId(e.target.value)}
|
|
disabled={busy}
|
|
className="min-w-48"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Tab strip ── */}
|
|
<div className="flex shrink-0 items-center gap-0 border-b border-border px-4">
|
|
{(["edit", "preview"] as EditorTab[]).map((t) => (
|
|
<button
|
|
key={t}
|
|
type="button"
|
|
role="tab"
|
|
aria-label={t === "edit" ? "Edit" : "Preview"}
|
|
aria-selected={tab === t}
|
|
onClick={() => setTab(t)}
|
|
className={cn(
|
|
"px-4 py-2 text-sm font-medium capitalize transition-colors",
|
|
tab === t
|
|
? "border-b-2 border-primary text-content"
|
|
: "text-muted hover:text-content",
|
|
)}
|
|
>
|
|
{t === "edit" ? "Edit" : "Preview"}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* ── Edit / Preview pane ── */}
|
|
<div className="flex flex-1 flex-col overflow-hidden px-4 py-3">
|
|
{tab === "edit" ? (
|
|
<textarea
|
|
aria-label="template content"
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
disabled={busy}
|
|
className={cn(
|
|
"flex-1 w-full rounded-md bg-raised px-3 py-2 text-sm text-content font-mono",
|
|
"border border-border outline-none transition-colors resize-none",
|
|
"focus:border-primary placeholder:text-faint",
|
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
)}
|
|
placeholder="# Agent instructions ..."
|
|
/>
|
|
) : (
|
|
<div
|
|
className={cn(
|
|
"flex-1 overflow-auto rounded-md border border-border bg-raised px-6 py-4",
|
|
"prose prose-sm prose-invert max-w-none",
|
|
"[&_h1]:text-content [&_h2]:text-content [&_h3]:text-content",
|
|
"[&_p]:text-content/90 [&_li]:text-content/90",
|
|
"[&_code]:bg-canvas [&_code]:text-primary [&_code]:rounded [&_code]:px-1",
|
|
"[&_pre]:bg-canvas [&_pre]:border [&_pre]:border-border [&_pre]:rounded-md",
|
|
"[&_a]:text-primary [&_a:hover]:underline",
|
|
"[&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:text-muted",
|
|
"[&_hr]:border-border",
|
|
)}
|
|
>
|
|
{content.trim() ? (
|
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
|
{content}
|
|
</ReactMarkdown>
|
|
) : (
|
|
<p className="text-sm text-muted italic">Nothing to preview yet.</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── Footer ── */}
|
|
<div className="flex shrink-0 items-center justify-end gap-2 border-t border-border px-4 py-3">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
onClick={onClose}
|
|
disabled={busy}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
variant="primary"
|
|
aria-label="Save template"
|
|
disabled={!canSave}
|
|
loading={busy}
|
|
>
|
|
Save
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|