@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.2

package/components/character/CharacterEditorPanels.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Input, Textarea } from "@elizaos/ui";
 import { useState, } from "react";
+import { useAgentElement } from "../../agent-surface/index.js";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
+import { Textarea } from "../ui/textarea.js";
 /* ── Small plus icon used for inline "add" actions ───────────────── */
 const PlusIconSvg = ({ className }) => (_jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", className: className, children: _jsx("path", { d: "M5 1.25v7.5M1.25 5h7.5" }) }));
 /* ── Small trash icon used for inline "remove" actions ───────────── */
@@ -37,11 +40,82 @@ function getDuplicateIndices(items) {
 }
 /* ── CharacterIdentityPanel ──────────────────────────────────────── */
 export function CharacterIdentityPanel({ bioText, handleFieldEdit, t, }) {
-    return (_jsx("div", { className: "flex flex-col gap-5", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-2xs font-semibold uppercase tracking-[0.08em] text-muted", children: t("charactereditor.AboutMe", { defaultValue: "About Me" }) }), _jsx(Textarea, { value: bioText, rows: 8, placeholder: t("charactereditor.AboutMePlaceholder", {
+    const { ref: bioRef, agentProps: bioAgentProps } = useAgentElement({
+        id: "identity-bio",
+        role: "textarea",
+        label: t("charactereditor.AboutMe", { defaultValue: "About Me" }),
+        group: "identity",
+        description: "Edit the agent's bio / about-me description",
+        getValue: () => bioText,
+        onFill: (value) => handleFieldEdit("bio", value),
+    });
+    return (_jsx("div", { className: "flex flex-col gap-5", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-medium text-muted", children: t("charactereditor.AboutMe", { defaultValue: "About Me" }) }), _jsx(Textarea, { ref: bioRef, value: bioText, rows: 8, placeholder: t("charactereditor.AboutMePlaceholder", {
                         defaultValue: "Describe who your agent is...",
-                    }), onChange: (e) => handleFieldEdit("bio", e.target.value), className: "w-full resize-none min-h-[8rem] overflow-x-hidden rounded-none border-0 border-b border-border/40 bg-transparent px-0 py-2 font-mono text-xs leading-relaxed text-txt focus-visible:border-accent/60 focus-visible:ring-0" })] }) }));
+                    }), onChange: (e) => handleFieldEdit("bio", e.target.value), className: "w-full resize-none min-h-[8rem] overflow-x-hidden rounded-none border-0 border-b border-border/40 bg-transparent px-0 py-2 font-mono text-xs leading-relaxed text-txt focus-visible:border-accent/60 focus-visible:ring-0", ...bioAgentProps })] }) }));
 }
 /* ── CharacterStylePanel ─────────────────────────────────────────── */
+function StyleRuleRow({ sectionKey, index, value, isDuplicate, isDragging, draftValue, onDragStart, onDragOver, onDrop, onDragEnd, onDraftChange, onCommit, onRemove, t, }) {
+    const ruleLabel = `${t(`charactereditor.StyleRules.${sectionKey}`, {
+        defaultValue: "Style rule",
+    })} ${index + 1}`;
+    const { ref: inputRef, agentProps: inputAgentProps } = useAgentElement({
+        id: `style-rule-${sectionKey}-${index}`,
+        role: "text-input",
+        label: ruleLabel,
+        group: "style-rules",
+        description: `Edit ${ruleLabel}`,
+        getValue: () => draftValue,
+        onFill: onDraftChange,
+    });
+    const { ref: removeRef, agentProps: removeAgentProps } = useAgentElement({
+        id: `style-rule-remove-${sectionKey}-${index}`,
+        role: "button",
+        label: `${t("common.remove")} ${ruleLabel}`,
+        group: "style-rules",
+        description: `Remove ${ruleLabel}`,
+        onActivate: onRemove,
+    });
+    return (_jsxs("fieldset", { draggable: true, onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnd: onDragEnd, className: `group flex min-w-0 items-center gap-2 px-0 py-1 transition-opacity ${isDuplicate ? "" : ""} ${isDragging ? "opacity-40" : ""}`, children: [_jsx("span", { className: "shrink-0 text-muted opacity-60 cursor-grab active:cursor-grabbing select-none", "aria-hidden": "true", title: t("charactereditor.DragToReorder", {
+                    defaultValue: "Drag to reorder",
+                }), children: _jsx(GripIconSvg, {}) }), _jsx(Input, { ref: inputRef, value: value, onChange: (e) => onDraftChange(e.target.value), onBlur: onCommit, "aria-label": ruleLabel, className: `h-8 min-w-0 flex-1 rounded-none border-0 border-b bg-transparent px-0 text-sm text-txt focus-visible:ring-0 ${isDuplicate
+                    ? "border-warning/60 focus-visible:border-warning"
+                    : "border-border/30 focus-visible:border-accent/60"}`, ...inputAgentProps }), isDuplicate ? (_jsx("span", { className: "shrink-0 rounded-sm bg-warning/15 px-1.5 py-0.5 text-[0.68rem] font-medium text-warning", children: t("charactereditor.DuplicateRule", {
+                    defaultValue: "duplicate",
+                }) })) : null, _jsx(Button, { ref: removeRef, type: "button", variant: "ghost", size: "icon", className: "h-7 w-7 shrink-0 rounded-sm p-0 text-muted opacity-0 transition-colors hover:text-danger group-hover:opacity-100 focus-visible:opacity-100", onClick: onRemove, title: t("common.remove"), "aria-label": `${t("common.remove")} ${ruleLabel}`, ...removeAgentProps, children: _jsx(TrashIconSvg, {}) })] }));
+}
+function StyleAddRow({ sectionKey, pendingValue, onChange, onAdd, t, }) {
+    const placeholder = t(STYLE_SECTION_PLACEHOLDERS[sectionKey].key, {
+        defaultValue: STYLE_SECTION_PLACEHOLDERS[sectionKey].defaultValue,
+    });
+    const addLabel = t("charactereditor.AddStyleRule", {
+        defaultValue: "Add style rule",
+    });
+    const { ref: inputRef, agentProps: inputAgentProps } = useAgentElement({
+        id: `style-add-input-${sectionKey}`,
+        role: "text-input",
+        label: placeholder,
+        group: "style-rules",
+        description: "New style rule to add",
+        getValue: () => pendingValue,
+        onFill: onChange,
+    });
+    const { ref: addRef, agentProps: addAgentProps } = useAgentElement({
+        id: `style-add-${sectionKey}`,
+        role: "button",
+        label: addLabel,
+        group: "style-rules",
+        description: "Add the pending style rule",
+        onActivate: onAdd,
+    });
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { ref: inputRef, type: "text", value: pendingValue, placeholder: placeholder, onChange: (e) => onChange(e.target.value), onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        e.preventDefault();
+                        onAdd();
+                    }
+                }, className: "h-9 min-w-0 flex-1 rounded-sm border border-border/40 bg-bg/70 px-3 text-sm text-txt outline-none focus:border-accent", ...inputAgentProps }), _jsxs("button", { ref: addRef, type: "button", className: "inline-flex h-9 shrink-0 items-center gap-2 rounded-sm border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent", onClick: onAdd, disabled: !pendingValue.trim(), title: addLabel, "aria-label": addLabel, ...addAgentProps, children: [_jsx(PlusIconSvg, {}), t("charactereditor.AddStyleRuleShort", {
+                        defaultValue: "Add rule",
+                    })] })] }));
+}
 export function CharacterStylePanel({ d, pendingStyleEntries, styleEntryDrafts, handlePendingStyleEntryChange, handleAddStyleEntry, handleRemoveStyleEntry, handleStyleEntryDraftChange, handleCommitStyleEntry, handleReorderStyleEntries, t, }) {
     const style = d.style;
     const [dragStyleIndex, setDragStyleIndex] = useState(null);
@@ -51,7 +125,7 @@ export function CharacterStylePanel({ d, pendingStyleEntries, styleEntryDrafts,
         next.splice(to, 0, moved);
         return next;
     };
-    return (_jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex flex-wrap items-end justify-between gap-2", children: _jsxs("div", { children: [_jsx("span", { className: "text-2xs font-semibold uppercase tracking-[0.08em] text-muted", children: t("charactereditor.StyleRulesHeader", {
+    return (_jsxs("section", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex flex-wrap items-end justify-between gap-2", children: _jsxs("div", { children: [_jsx("span", { className: "text-xs font-medium text-muted", children: t("charactereditor.StyleRulesHeader", {
                                 defaultValue: "Style Rules",
                             }) }), _jsx("p", { className: "mt-1 text-xs text-muted", children: t("charactereditor.StyleRulesHelp", {
                                 defaultValue: "Effective rules from style.all, grouped by intent for easier review.",
@@ -68,7 +142,7 @@ export function CharacterStylePanel({ d, pendingStyleEntries, styleEntryDrafts,
                                     const isDragging = dragStyleIndex?.key === key &&
                                         dragStyleIndex.index === index;
                                     const isDuplicate = duplicateIndices.has(index);
-                                    return (_jsxs("fieldset", { draggable: true, onDragStart: (e) => {
+                                    return (_jsx(StyleRuleRow, { sectionKey: key, index: index, value: styleEntryDrafts[key]?.[index] ?? item, draftValue: styleEntryDrafts[key]?.[index] ?? item, isDuplicate: isDuplicate, isDragging: isDragging, onDragStart: (e) => {
                                             setDragStyleIndex({ key, index });
                                             e.dataTransfer.effectAllowed = "move";
                                         }, onDragOver: (e) => {
@@ -86,36 +160,82 @@ export function CharacterStylePanel({ d, pendingStyleEntries, styleEntryDrafts,
                                                 return;
                                             handleReorderStyleEntries(key, reorderStyle(items, dragStyleIndex.index, index));
                                             setDragStyleIndex(null);
-                                        }, onDragEnd: () => setDragStyleIndex(null), className: `group flex min-w-0 items-center gap-2 px-0 py-1 transition-opacity ${isDuplicate ? "" : ""} ${isDragging ? "opacity-40" : ""}`, children: [_jsx("span", { className: "shrink-0 text-muted opacity-60 cursor-grab active:cursor-grabbing select-none", "aria-hidden": "true", title: t("charactereditor.DragToReorder", {
-                                                    defaultValue: "Drag to reorder",
-                                                }), children: _jsx(GripIconSvg, {}) }), _jsx(Input, { value: styleEntryDrafts[key]?.[index] ?? item, onChange: (e) => handleStyleEntryDraftChange(key, index, e.target.value), onBlur: () => handleCommitStyleEntry(key, index), "aria-label": `${t(`charactereditor.StyleRules.${key}`, {
-                                                    defaultValue: "Style rule",
-                                                })} ${index + 1}`, className: `h-8 min-w-0 flex-1 rounded-none border-0 border-b bg-transparent px-0 text-sm text-txt focus-visible:ring-0 ${isDuplicate
-                                                    ? "border-warning/60 focus-visible:border-warning"
-                                                    : "border-border/30 focus-visible:border-accent/60"}` }), isDuplicate ? (_jsx("span", { className: "shrink-0 rounded-sm bg-warning/15 px-1.5 py-0.5 text-[0.68rem] font-medium text-warning", children: t("charactereditor.DuplicateRule", {
-                                                    defaultValue: "duplicate",
-                                                }) })) : null, _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-7 w-7 shrink-0 rounded-sm p-0 text-muted opacity-0 transition-colors hover:text-danger group-hover:opacity-100 focus-visible:opacity-100", onClick: () => handleRemoveStyleEntry(key, index), title: t("common.remove"), "aria-label": `${t("common.remove")} ${t(`charactereditor.StyleRules.${key}`, {
-                                                    defaultValue: "style rule",
-                                                })} ${index + 1}`, children: _jsx(TrashIconSvg, {}) })] }, `${key}:${comparableKey}:${occurrence}`));
-                                })) : (_jsx("div", { className: "rounded-md border border-dashed border-border/40 bg-bg-muted/20 px-3 py-4 text-sm text-muted", children: t(STYLE_SECTION_EMPTY_STATES[key].key, {
+                                        }, onDragEnd: () => setDragStyleIndex(null), onDraftChange: (value) => handleStyleEntryDraftChange(key, index, value), onCommit: () => handleCommitStyleEntry(key, index), onRemove: () => handleRemoveStyleEntry(key, index), t: t }, `${key}:${comparableKey}:${occurrence}`));
+                                })) : (_jsx("div", { className: "rounded-sm border border-dashed border-border/40 bg-bg-muted/20 px-3 py-4 text-sm text-muted", children: t(STYLE_SECTION_EMPTY_STATES[key].key, {
                                         defaultValue: STYLE_SECTION_EMPTY_STATES[key].defaultValue,
-                                    }) })) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "text", value: pendingStyleEntries[key], placeholder: t(STYLE_SECTION_PLACEHOLDERS[key].key, {
-                                            defaultValue: STYLE_SECTION_PLACEHOLDERS[key].defaultValue,
-                                        }), onChange: (e) => handlePendingStyleEntryChange(key, e.target.value), onKeyDown: (e) => {
-                                            if (e.key === "Enter") {
-                                                e.preventDefault();
-                                                handleAddStyleEntry(key);
-                                            }
-                                        }, className: "h-9 min-w-0 flex-1 rounded-md border border-border/40 bg-bg/70 px-3 text-sm text-txt outline-none focus:border-accent" }), _jsxs("button", { type: "button", className: "inline-flex h-9 shrink-0 items-center gap-2 rounded-md border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent", onClick: () => handleAddStyleEntry(key), disabled: !pendingStyleEntries[key].trim(), title: t("charactereditor.AddStyleRule", {
-                                            defaultValue: "Add style rule",
-                                        }), "aria-label": t("charactereditor.AddStyleRule", {
-                                            defaultValue: "Add style rule",
-                                        }), children: [_jsx(PlusIconSvg, {}), t("charactereditor.AddStyleRuleShort", {
-                                                defaultValue: "Add rule",
-                                            })] })] })] }, key));
+                                    }) })) }), _jsx(StyleAddRow, { sectionKey: key, pendingValue: pendingStyleEntries[key], onChange: (value) => handlePendingStyleEntryChange(key, value), onAdd: () => handleAddStyleEntry(key), t: t })] }, key));
                 }) })] }));
 }
 /* ── CharacterExamplesPanel ──────────────────────────────────────── */
+function ConversationTurnTextarea({ ci, mi, isUser, value, onChange, }) {
+    const speaker = isUser ? "User" : "Agent";
+    const label = `${speaker} message, conversation ${ci + 1}, turn ${mi + 1}`;
+    const { ref, agentProps } = useAgentElement({
+        id: `example-message-${ci}-${mi}`,
+        role: "textarea",
+        label,
+        group: "chat-examples",
+        description: `Edit ${label}`,
+        getValue: () => value,
+        onFill: onChange,
+    });
+    return (_jsx(Textarea, { ref: ref, value: value, rows: 2, "aria-label": label, onChange: (e) => onChange(e.target.value), className: "min-h-[3rem] w-full resize-none rounded-sm border border-border/30 bg-bg/70 px-2 py-1.5 text-sm leading-relaxed text-txt focus-visible:border-accent/60 focus-visible:ring-0", ...agentProps }));
+}
+function ConversationFooter({ ci, onAddTurn, onRemove, t, }) {
+    const addTurnLabel = t("charactereditor.AddTurn", {
+        defaultValue: "Add turn",
+    });
+    const { ref: addTurnRef, agentProps: addTurnAgentProps } = useAgentElement({
+        id: `example-add-turn-${ci}`,
+        role: "button",
+        label: `${addTurnLabel} (conversation ${ci + 1})`,
+        group: "chat-examples",
+        description: `Add a turn to conversation ${ci + 1}`,
+        onActivate: onAddTurn,
+    });
+    const { ref: removeRef, agentProps: removeAgentProps } = useAgentElement({
+        id: `example-remove-conversation-${ci}`,
+        role: "button",
+        label: `${t("common.remove")} conversation ${ci + 1}`,
+        group: "chat-examples",
+        description: `Remove conversation ${ci + 1}`,
+        onActivate: onRemove,
+    });
+    return (_jsxs("div", { className: "mt-1 flex items-center justify-end gap-2", children: [_jsxs("button", { ref: addTurnRef, type: "button", className: "inline-flex h-8 items-center gap-2 rounded-sm border border-border/40 px-2.5 text-xs font-medium text-txt transition-colors hover:bg-bg-muted/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", onClick: onAddTurn, title: addTurnLabel, "aria-label": addTurnLabel, ...addTurnAgentProps, children: [_jsx(PlusIconSvg, {}), addTurnLabel] }), _jsx("button", { ref: removeRef, type: "button", className: compactIconBtn, onClick: onRemove, title: t("charactereditor.RemoveExample", {
+                    defaultValue: "Remove conversation",
+                }), "aria-label": `${t("common.remove")} conversation ${ci + 1}`, ...removeAgentProps, children: _jsx(TrashIconSvg, {}) })] }));
+}
+function PostExampleRow({ pi, post, isDuplicate, isDragging, onDragStart, onDragOver, onDrop, onDragEnd, onChange, onRemove, t, }) {
+    const postLabel = `Post example ${pi + 1}`;
+    const { ref: textRef, agentProps: textAgentProps } = useAgentElement({
+        id: `post-example-${pi}`,
+        role: "textarea",
+        label: postLabel,
+        group: "post-examples",
+        description: `Edit ${postLabel}`,
+        getValue: () => post,
+        onFill: onChange,
+    });
+    const { ref: removeRef, agentProps: removeAgentProps } = useAgentElement({
+        id: `post-example-remove-${pi}`,
+        role: "button",
+        label: `${t("common.remove")} post ${pi + 1}`,
+        group: "post-examples",
+        description: `Remove ${postLabel}`,
+        onActivate: onRemove,
+    });
+    return (_jsxs("fieldset", { draggable: true, onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnd: onDragEnd, className: `group flex min-w-0 items-start gap-2 rounded-sm border p-2.5 transition-opacity ${isDuplicate
+            ? "border-warning/50 bg-warning/5"
+            : "border-border/35 bg-bg-muted/15"} ${isDragging ? "opacity-40" : ""}`, children: [_jsx("span", { className: "mt-2 text-muted opacity-60 cursor-grab active:cursor-grabbing select-none", "aria-hidden": "true", title: t("charactereditor.DragToReorder", {
+                    defaultValue: "Drag to reorder",
+                }), children: _jsx(GripIconSvg, {}) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "mb-1.5 flex flex-wrap items-center gap-2", children: [_jsxs("span", { className: "text-[0.68rem] font-semibold uppercase tracking-[0.06em] text-accent", children: [t("charactereditor.PostExample", {
+                                        defaultValue: "Post",
+                                    }), " ", "#", pi + 1] }), isDuplicate ? (_jsx("span", { className: "rounded-sm bg-warning/15 px-1.5 py-0.5 text-[0.68rem] font-medium text-warning", children: t("charactereditor.DuplicatePost", {
+                                    defaultValue: "duplicate",
+                                }) })) : null] }), _jsx(Textarea, { ref: textRef, value: post, rows: 3, "aria-label": postLabel, onChange: (e) => onChange(e.target.value), className: "min-h-[4.25rem] w-full resize-none rounded-sm border border-border/30 bg-bg/70 px-2 py-1.5 text-sm leading-relaxed text-txt focus-visible:border-accent/60 focus-visible:ring-0", ...textAgentProps })] }), _jsx("div", { className: "flex shrink-0 flex-col gap-1", children: _jsx(Button, { ref: removeRef, type: "button", variant: "ghost", size: "icon", className: "h-7 w-7 shrink-0 rounded-sm border border-border/35 p-0 text-muted transition-colors hover:border-danger/45 hover:bg-danger/10 hover:text-danger", onClick: onRemove, "aria-label": `${t("common.remove")} post ${pi + 1}`, title: t("charactereditor.RemovePost", {
+                        defaultValue: "Remove post",
+                    }), ...removeAgentProps, children: _jsx(TrashIconSvg, {}) }) })] }));
+}
 export function CharacterExamplesPanel({ d, normalizedMessageExamples, handleFieldEdit, t, }) {
     const [dragPostIndex, setDragPostIndex] = useState(null);
     const postExamples = d.postExamples ?? [];
@@ -126,72 +246,80 @@ export function CharacterExamplesPanel({ d, normalizedMessageExamples, handleFie
         next.splice(to, 0, moved);
         return next;
     };
-    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-2xs font-semibold uppercase tracking-[0.08em] text-muted", children: t("charactereditor.ChatExamples", {
-                                            defaultValue: "Chat Examples",
-                                        }) }), _jsx("p", { className: "mt-1 text-xs text-muted", children: t("charactereditor.ChatExamplesHelp", {
-                                            defaultValue: "Example conversations grouped by channel and speaker.",
-                                        }) })] }), _jsxs("span", { className: "rounded-sm border border-border/40 px-2 py-1 text-xs text-muted", children: [normalizedMessageExamples.length, " ", t("charactereditor.ConversationCount", {
+    const addConversationLabel = t("charactereditor.AddConversation", {
+        defaultValue: "Add conversation",
+    });
+    const addPostLabel = t("charactereditor.AddPost", {
+        defaultValue: "Add Post",
+    });
+    const addConversation = () => {
+        const agentName = typeof d.name === "string" && d.name.trim() ? d.name.trim() : "Agent";
+        const updated = [
+            ...normalizedMessageExamples,
+            {
+                examples: [
+                    { name: "{{user1}}", content: { text: "" } },
+                    { name: agentName, content: { text: "" } },
+                ],
+            },
+        ];
+        handleFieldEdit("messageExamples", updated);
+    };
+    const addPost = () => {
+        handleFieldEdit("postExamples", [...postExamples, ""]);
+    };
+    const { ref: addConversationRef, agentProps: addConversationAgentProps } = useAgentElement({
+        id: "example-add-conversation",
+        role: "button",
+        label: addConversationLabel,
+        group: "chat-examples",
+        description: "Add a new chat-example conversation",
+        onActivate: addConversation,
+    });
+    const { ref: addPostRef, agentProps: addPostAgentProps } = useAgentElement({
+        id: "post-example-add",
+        role: "button",
+        label: addPostLabel,
+        group: "post-examples",
+        description: "Add a new post example",
+        onActivate: addPost,
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-2", children: [_jsx("div", { children: _jsx("span", { className: "text-xs font-medium text-muted", children: t("charactereditor.ChatExamples", {
+                                        defaultValue: "Chat Examples",
+                                    }) }) }), _jsxs("span", { className: "rounded-sm border border-border/40 px-2 py-1 text-xs text-muted", children: [normalizedMessageExamples.length, " ", t("charactereditor.ConversationCount", {
                                         defaultValue: "conversations",
-                                    })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [normalizedMessageExamples.map((convo, ci) => (_jsxs("div", { className: "group/convo flex flex-col gap-2 rounded-md border border-border/35 bg-bg-muted/15 p-3", children: [convo.examples.map((msg, mi) => (_jsxs("div", { className: "grid min-w-0 grid-cols-[4.5rem_1fr] items-start gap-2", children: [_jsx("span", { className: `mt-2 px-2 py-1 text-center text-[0.68rem] font-semibold uppercase tracking-[0.06em] ${msg.name === "{{user1}}" ? "text-muted" : "text-accent"}`, children: msg.name === "{{user1}}" ? "user" : "agent" }), _jsx(Textarea, { value: msg.content?.text ?? "", rows: 2, "aria-label": `${msg.name === "{{user1}}" ? "User" : "Agent"} message, conversation ${ci + 1}, turn ${mi + 1}`, onChange: (e) => {
+                                    })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [normalizedMessageExamples.map((convo, ci) => (_jsxs("div", { className: "group/convo flex flex-col gap-2 rounded-sm border border-border/35 bg-bg-muted/15 p-3", children: [convo.examples.map((msg, mi) => (_jsxs("div", { className: "grid min-w-0 grid-cols-[4.5rem_1fr] items-start gap-2", children: [_jsx("span", { className: `mt-2 px-2 py-1 text-center text-[0.68rem] font-semibold uppercase tracking-[0.06em] ${msg.name === "{{user1}}" ? "text-muted" : "text-accent"}`, children: msg.name === "{{user1}}" ? "user" : "agent" }), _jsx(ConversationTurnTextarea, { ci: ci, mi: mi, isUser: msg.name === "{{user1}}", value: msg.content?.text ?? "", onChange: (text) => {
                                                     const updated = [...normalizedMessageExamples];
                                                     const convoClone = {
                                                         examples: [...updated[ci].examples],
                                                     };
                                                     convoClone.examples[mi] = {
                                                         ...convoClone.examples[mi],
-                                                        content: { text: e.target.value },
+                                                        content: { text },
                                                     };
                                                     updated[ci] = convoClone;
                                                     handleFieldEdit("messageExamples", updated);
-                                                }, className: "min-h-[3rem] w-full resize-none rounded-sm border border-border/30 bg-bg/70 px-2 py-1.5 text-sm leading-relaxed text-txt focus-visible:border-accent/60 focus-visible:ring-0" })] }, `msg-${ci}-${mi}`))), _jsxs("div", { className: "mt-1 flex items-center justify-end gap-2", children: [_jsxs("button", { type: "button", className: "inline-flex h-8 items-center gap-2 rounded-md border border-border/40 px-2.5 text-xs font-medium text-txt transition-colors hover:bg-bg-muted/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", onClick: () => {
-                                                    const agentName = typeof d.name === "string" && d.name.trim()
-                                                        ? d.name.trim()
-                                                        : "Agent";
-                                                    const updated = [...normalizedMessageExamples];
-                                                    const convoClone = {
-                                                        examples: [
-                                                            ...updated[ci].examples,
-                                                            { name: "{{user1}}", content: { text: "" } },
-                                                            { name: agentName, content: { text: "" } },
-                                                        ],
-                                                    };
-                                                    updated[ci] = convoClone;
-                                                    handleFieldEdit("messageExamples", updated);
-                                                }, title: t("charactereditor.AddTurn", {
-                                                    defaultValue: "Add turn",
-                                                }), "aria-label": t("charactereditor.AddTurn", {
-                                                    defaultValue: "Add turn",
-                                                }), children: [_jsx(PlusIconSvg, {}), t("charactereditor.AddTurn", {
-                                                        defaultValue: "Add turn",
-                                                    })] }), _jsx("button", { type: "button", className: compactIconBtn, onClick: () => {
-                                                    const updated = [...normalizedMessageExamples];
-                                                    updated.splice(ci, 1);
-                                                    handleFieldEdit("messageExamples", updated);
-                                                }, title: t("charactereditor.RemoveExample", {
-                                                    defaultValue: "Remove conversation",
-                                                }), "aria-label": `${t("common.remove")} conversation ${ci + 1}`, children: _jsx(TrashIconSvg, {}) })] })] }, `convo-${ci}`))), normalizedMessageExamples.length === 0 && (_jsx("div", { className: "rounded-md border border-dashed border-border/40 bg-bg-muted/20 px-3 py-4 text-sm text-muted", children: t("charactereditor.NoChatExamples", {
+                                                } })] }, `msg-${ci}-${mi}`))), _jsx(ConversationFooter, { ci: ci, onAddTurn: () => {
+                                            const agentName = typeof d.name === "string" && d.name.trim()
+                                                ? d.name.trim()
+                                                : "Agent";
+                                            const updated = [...normalizedMessageExamples];
+                                            const convoClone = {
+                                                examples: [
+                                                    ...updated[ci].examples,
+                                                    { name: "{{user1}}", content: { text: "" } },
+                                                    { name: agentName, content: { text: "" } },
+                                                ],
+                                            };
+                                            updated[ci] = convoClone;
+                                            handleFieldEdit("messageExamples", updated);
+                                        }, onRemove: () => {
+                                            const updated = [...normalizedMessageExamples];
+                                            updated.splice(ci, 1);
+                                            handleFieldEdit("messageExamples", updated);
+                                        }, t: t })] }, `convo-${ci}`))), normalizedMessageExamples.length === 0 && (_jsx("div", { className: "rounded-sm border border-dashed border-border/40 bg-bg-muted/20 px-3 py-4 text-sm text-muted", children: t("charactereditor.NoChatExamples", {
                                     defaultValue: "No chat examples yet.",
-                                }) }))] }), _jsxs("button", { type: "button", className: "inline-flex h-9 self-start items-center gap-2 rounded-md border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", onClick: () => {
-                            const agentName = typeof d.name === "string" && d.name.trim()
-                                ? d.name.trim()
-                                : "Agent";
-                            const updated = [
-                                ...normalizedMessageExamples,
-                                {
-                                    examples: [
-                                        { name: "{{user1}}", content: { text: "" } },
-                                        { name: agentName, content: { text: "" } },
-                                    ],
-                                },
-                            ];
-                            handleFieldEdit("messageExamples", updated);
-                        }, title: t("charactereditor.AddConversation", {
-                            defaultValue: "Add conversation",
-                        }), "aria-label": t("charactereditor.AddConversation", {
-                            defaultValue: "Add conversation",
-                        }), children: [_jsx(PlusIconSvg, {}), t("charactereditor.AddConversation", {
-                                defaultValue: "Add conversation",
-                            })] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-2xs font-semibold uppercase tracking-[0.08em] text-muted", children: t("charactereditor.PostExamples", {
+                                }) }))] }), _jsxs("button", { ref: addConversationRef, type: "button", className: "inline-flex h-9 self-start items-center gap-2 rounded-sm border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", onClick: addConversation, title: addConversationLabel, "aria-label": addConversationLabel, ...addConversationAgentProps, children: [_jsx(PlusIconSvg, {}), addConversationLabel] })] }), _jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-xs font-medium text-muted", children: t("charactereditor.PostExamples", {
                                             defaultValue: "Post Examples",
                                         }) }), _jsx("p", { className: "mt-1 text-xs text-muted", children: t("charactereditor.PostExamplesHelp", {
                                             defaultValue: "Standalone post examples for social channels.",
@@ -202,7 +330,9 @@ export function CharacterExamplesPanel({ d, normalizedMessageExamples, handleFie
                                             })] })) : null] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [postExamples.map((post, pi) => {
                                 const isDragging = dragPostIndex === pi;
                                 const isDuplicate = duplicatePostIndices.has(pi);
-                                return (_jsxs("fieldset", { draggable: true, onDragStart: (e) => {
+                                return (_jsx(PostExampleRow
+                                // biome-ignore lint/suspicious/noArrayIndexKey: items lack stable keys
+                                , { pi: pi, post: post, isDuplicate: isDuplicate, isDragging: isDragging, onDragStart: (e) => {
                                         setDragPostIndex(pi);
                                         e.dataTransfer.effectAllowed = "move";
                                     }, onDragOver: (e) => {
@@ -216,35 +346,16 @@ export function CharacterExamplesPanel({ d, normalizedMessageExamples, handleFie
                                             return;
                                         handleFieldEdit("postExamples", reorder(postExamples, dragPostIndex, pi));
                                         setDragPostIndex(null);
-                                    }, onDragEnd: () => setDragPostIndex(null), className: `group flex min-w-0 items-start gap-2 rounded-md border p-2.5 transition-opacity ${isDuplicate
-                                        ? "border-warning/50 bg-warning/5"
-                                        : "border-border/35 bg-bg-muted/15"} ${isDragging ? "opacity-40" : ""}`, children: [_jsx("span", { className: "mt-2 text-muted opacity-60 cursor-grab active:cursor-grabbing select-none", "aria-hidden": "true", title: t("charactereditor.DragToReorder", {
-                                                defaultValue: "Drag to reorder",
-                                            }), children: _jsx(GripIconSvg, {}) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "mb-1.5 flex flex-wrap items-center gap-2", children: [_jsxs("span", { className: "text-[0.68rem] font-semibold uppercase tracking-[0.06em] text-accent", children: [t("charactereditor.PostExample", {
-                                                                    defaultValue: "Post",
-                                                                }), " ", "#", pi + 1] }), isDuplicate ? (_jsx("span", { className: "rounded-sm bg-warning/15 px-1.5 py-0.5 text-[0.68rem] font-medium text-warning", children: t("charactereditor.DuplicatePost", {
-                                                                defaultValue: "duplicate",
-                                                            }) })) : null] }), _jsx(Textarea, { value: post, rows: 3, "aria-label": `Post example ${pi + 1}`, onChange: (e) => {
-                                                        const updated = [...postExamples];
-                                                        updated[pi] = e.target.value;
-                                                        handleFieldEdit("postExamples", updated);
-                                                    }, className: "min-h-[4.25rem] w-full resize-none rounded-sm border border-border/30 bg-bg/70 px-2 py-1.5 text-sm leading-relaxed text-txt focus-visible:border-accent/60 focus-visible:ring-0" })] }), _jsx("div", { className: "flex shrink-0 flex-col gap-1", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-7 w-7 shrink-0 rounded-sm border border-border/35 p-0 text-muted transition-colors hover:border-danger/45 hover:bg-danger/10 hover:text-danger", onClick: () => {
-                                                    const updated = [...postExamples];
-                                                    updated.splice(pi, 1);
-                                                    handleFieldEdit("postExamples", updated);
-                                                }, "aria-label": `${t("common.remove")} post ${pi + 1}`, title: t("charactereditor.RemovePost", {
-                                                    defaultValue: "Remove post",
-                                                }), children: _jsx(TrashIconSvg, {}) }) })] }, `post-${pi}`));
-                            }), postExamples.length === 0 && (_jsx("div", { className: "rounded-md border border-dashed border-border/40 bg-bg-muted/20 px-3 py-4 text-sm text-muted", children: t("charactereditor.NoPostExamples", {
+                                    }, onDragEnd: () => setDragPostIndex(null), onChange: (value) => {
+                                        const updated = [...postExamples];
+                                        updated[pi] = value;
+                                        handleFieldEdit("postExamples", updated);
+                                    }, onRemove: () => {
+                                        const updated = [...postExamples];
+                                        updated.splice(pi, 1);
+                                        handleFieldEdit("postExamples", updated);
+                                    }, t: t }, `post-${pi}`));
+                            }), postExamples.length === 0 && (_jsx("div", { className: "rounded-sm border border-dashed border-border/40 bg-bg-muted/20 px-3 py-4 text-sm text-muted", children: t("charactereditor.NoPostExamples", {
                                     defaultValue: "No post examples yet.",
-                                }) })), _jsxs("button", { type: "button", className: "mt-1 inline-flex h-9 self-start items-center gap-2 rounded-md border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", onClick: () => {
-                                    const updated = [...postExamples, ""];
-                                    handleFieldEdit("postExamples", updated);
-                                }, title: t("charactereditor.AddPost", {
-                                    defaultValue: "Add Post",
-                                }), "aria-label": t("charactereditor.AddPost", {
-                                    defaultValue: "Add Post",
-                                }), children: [_jsx(PlusIconSvg, {}), t("charactereditor.AddPost", {
-                                        defaultValue: "Add Post",
-                                    })] })] })] })] }));
+                                }) })), _jsxs("button", { ref: addPostRef, type: "button", className: "mt-1 inline-flex h-9 self-start items-center gap-2 rounded-sm border border-accent/35 px-3 text-sm font-medium text-accent transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent/60", onClick: addPost, title: addPostLabel, "aria-label": addPostLabel, ...addPostAgentProps, children: [_jsx(PlusIconSvg, {}), addPostLabel] })] })] })] }));
 }

package/components/character/CharacterExperienceWorkspace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CharacterExperienceWorkspace.d.ts","sourceRoot":"","sources":["../../../../../../src/components/character/CharacterExperienceWorkspace.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,wBAAwB,EACxB,yBAAyB,EAC1B,MAAM,uBAAuB,CAAC;AA2lB/B,wBAAgB,4BAA4B,CAAC,EAC3C,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,GACrB,EAAE;IACD,WAAW,EAAE,yBAAyB,EAAE,CAAC;IACzC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,gBAAgB,CAAC,EAAE,CACjB,UAAU,EAAE,yBAAyB,EACrC,KAAK,EAAE,wBAAwB,KAC5B,IAAI,CAAC;IACV,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrE,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtC,2CA2tBA"}
+{"version":3,"file":"CharacterExperienceWorkspace.d.ts","sourceRoot":"","sources":["../../../../../../src/components/character/CharacterExperienceWorkspace.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,wBAAwB,EACxB,yBAAyB,EAC1B,MAAM,uBAAuB,CAAC;AAymB/B,wBAAgB,4BAA4B,CAAC,EAC3C,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,GACrB,EAAE;IACD,WAAW,EAAE,yBAAyB,EAAE,CAAC;IACzC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,gBAAgB,CAAC,EAAE,CACjB,UAAU,EAAE,yBAAyB,EACrC,KAAK,EAAE,wBAAwB,KAC5B,IAAI,CAAC;IACV,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrE,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtC,2CA+jBA"}