import { useEffect, useRef, useState } from "react";
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupTextarea,
} from "@/components/ui/input-group";
import { ArrowUp } from "@/components/icons/arrow-up";
import { Check01 } from "@/components/icons/check-01";
import { ChevronRight } from "@/components/icons/chevron-right";
import { Loader01 } from "@/components/icons/loader-01";
/**
* The build rail's conversation from veni-builder (`ChatRail.tsx`) as a live
* chat area, demonstrating every kind of row the rail shows. What the person
* sends is a right-aligned bubble hugging its text, primary-tinted with a
* squared top-right corner and their name above (#661); what the agent says
* is plain prose; the plan's questions are a bordered card (#300). The
* replies differ by how they were sent:
*
* - answers — the composer while the plan asks its questions, one line per
* answer (`/answer`, the `answers` array joined);
* - a decisions pick — "Apply choices" on the plan's decisions, sent as a
* formatted change (`/revise`, `choicesMessage`, #1361);
* - a change asked of the plan — the composer while the plan waits for
* approval, free text (`/revise`, the `revision`);
* - a narrowing — "Narrow it" on a large plan (`/narrow`), which the rail
* shows as a status row, not a person bubble (`{ narrowed }`).
*
* The scratch work folds away the same way: a build-log row ("Build log · N
* steps", `DetailsRow`) that expands into its tool calls — a check per done
* step, the one error line worth reading — with the agent's narration
* interleaved (#784). Typing below runs the flow: the send lands as a person
* turn, Appia answers after a thinking beat. The area resizes horizontally
* from its right edge, by drag or arrow keys.
*/
interface ChatMessage {
role: "person" | "agent" | "system";
text?: string;
author?: string;
/** The plan's questions (#300): an agent turn that is a card, and the one
* the area's next reply answers. */
questions?: string[];
/** The folded build log (`DetailsRow`): tool calls with the agent's
* narration interleaved, collapsed until asked for. */
log?: LogStep[];
}
interface LogStep {
/** The command's first line, the way the rail truncates it. */
command?: string;
/** A step that finished with output; the text shows only on error. */
result?: string;
error?: boolean;
/** What the agent said between calls (#784). */
note?: string;
}
const QUESTIONS = [
"Who approves a leave request — the requester's manager or HR?",
"Should balances roll over at the year's end?",
];
const SEEDED: ChatMessage[] = [
{ role: "person", author: "Hiếu Võ", text: "Build leave request management with an approval flow." },
{ role: "agent", text: "I've planned the module — two things before I build." },
{ role: "agent", questions: QUESTIONS },
// Answers: one line per answer, the way `answers` arrives from /answer.
{ role: "person", author: "Hiếu Võ", text: "The requester's manager approves.\nBalances don't roll over at the year's end." },
{ role: "agent", text: "Planned. One default to check: leave books by full days." },
// A decisions pick: the formatted change /revise carries (#1361).
{ role: "person", author: "Hiếu Võ", text: "I am changing these choices in the plan:\n- Leave unit: half days (instead of full days only)" },
{ role: "agent", text: "Replanned with half days. It's a large first version — you can build part of it now." },
// A change asked of the plan: the free-text /revise while it waits.
{ role: "person", author: "Hiếu Võ", text: "Cut the audit log for now — approvals only." },
// A narrowing: /narrow reads as a status row, not a person bubble.
{ role: "system", text: "Narrowed the plan — building only Leave requests and Approvals; the rest in a later change." },
{ role: "agent", text: "Building those now." },
{
role: "agent",
text: "The stack matches the plan — running the checks before hand-off.",
log: [
{ command: "Read src/approvals/LeaveRequest.ts" },
{ command: "Glob src/approvals/**" },
{ command: "Bash npm run lint", result: "2 errors in src/balances/BalanceView.tsx", error: true },
{ note: "Lint flags unused props in the balance view — fixing those, then lint again." },
{ command: "Bash npm run lint", result: "No problems" },
{ command: "Bash npm run build", result: "built in 41s" },
],
},
{ role: "agent", text: "Checks green — the approval flow is ready for review." },
];
/** What Appia answers with, one per turn the area runs. */
const REPLIES = [
"Noted — routing approvals to the requester's manager and resetting balances each January.",
"Adding the balance view next: accrued, taken and remaining per person, refreshed on approval.",
"The approval queue is live for managers. Anything else before I hand this over?",
];
const MIN_WIDTH = 320;
const MAX_WIDTH = 640;
const THINKING_MS = 1100;
/** The folded build log (`DetailsRow`): collapsed until asked for, the
* chevron turning with it. A done step carries a check; its output text is
* only worth reading when the step failed. */
function BuildLog({ steps }: { steps: LogStep[] }) {
const [open, setOpen] = useState(false);
return (
<div className="px-1">
<button
type="button"
className="flex items-center gap-1 text-xs text-text-muted hover:text-text-strong"
aria-expanded={open}
onClick={() => setOpen(o => !o)}
>
<ChevronRight className={`size-3.5 transition-transform ${open ? "rotate-90" : ""}`} />
{`Build log · ${steps.length} steps`}
</button>
{open && (
<ol className="mt-1 space-y-1 border-l border-border-default pl-2 text-xs text-text-muted">
{steps.map((step, index) =>
step.note ? (
<li key={index} className="whitespace-pre-wrap">
{step.note}
</li>
) : (
<li key={index} className="flex items-start gap-2 py-0.5">
{step.error ? (
<Check01 className="mt-0.5 size-3.5 shrink-0 text-negative-middle" strokeWidth={2.5} />
) : (
<Check01 className="mt-0.5 size-3.5 shrink-0 text-success-strong" strokeWidth={2.5} />
)}
<span className="min-w-0 flex-1">
<span className="block truncate text-xs font-medium">{step.command}</span>
{step.error && step.result && (
<span className="block truncate text-xs text-negative-middle">{step.result}</span>
)}
</span>
</li>
),
)}
</ol>
)}
</div>
);
}
export default function ChatMessagesExample() {
const [messages, setMessages] = useState<ChatMessage[]>(SEEDED);
const [draft, setDraft] = useState("");
const [thinking, setThinking] = useState(false);
const [replyIndex, setReplyIndex] = useState(0);
const [width, setWidth] = useState(440);
const [dragging, setDragging] = useState(false);
const dragStart = useRef<{ x: number; width: number } | null>(null);
const logRef = useRef<HTMLDivElement>(null);
// The thinking beat is the flow: the send lands, the agent is seen working,
// then its turn arrives. The timer cancels if the example unmounts mid-beat.
useEffect(() => {
if (!thinking) return;
const timer = setTimeout(() => {
setThinking(false);
setMessages(m => [...m, { role: "agent", text: REPLIES[replyIndex % REPLIES.length] }]);
setReplyIndex(i => i + 1);
}, THINKING_MS);
return () => clearTimeout(timer);
}, [thinking, replyIndex]);
// New turns pin to the bottom, like the rail the example is drawn from.
useEffect(() => {
const log = logRef.current;
if (log) log.scrollTop = log.scrollHeight;
}, [messages, thinking]);
useEffect(() => {
if (!dragging) return;
const move = (e: PointerEvent) => {
if (!dragStart.current) return;
// The handle is the right edge: dragging right widens the area.
const next = dragStart.current.width + (e.clientX - dragStart.current.x);
setWidth(Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, next)));
};
const up = () => {
dragStart.current = null;
setDragging(false);
};
window.addEventListener("pointermove", move);
window.addEventListener("pointerup", up);
window.addEventListener("pointercancel", up);
return () => {
window.removeEventListener("pointermove", move);
window.removeEventListener("pointerup", up);
window.removeEventListener("pointercancel", up);
};
}, [dragging]);
const send = () => {
const text = draft.trim();
if (!text || thinking) return;
setMessages(m => [...m, { role: "person", author: "You", text }]);
setDraft("");
setThinking(true);
};
const beginResize = (e: React.PointerEvent) => {
dragStart.current = { x: e.clientX, width };
setDragging(true);
};
const resizeByKeyboard = (e: React.KeyboardEvent) => {
if (e.key === "ArrowRight") {
setWidth(w => Math.min(MAX_WIDTH, w + 16));
} else if (e.key === "ArrowLeft") {
setWidth(w => Math.max(MIN_WIDTH, w - 16));
} else {
return;
}
e.preventDefault();
};
return (
<div
className="relative flex h-[440px] flex-col overflow-hidden rounded-xl border border-border-default bg-bg-main"
style={{ width: `min(100%, ${width}px)` }}
>
<header className="flex items-baseline justify-between border-b border-border-default px-4 py-3">
<p className="text-sm font-medium text-text-strong">Build chat</p>
<p className="text-xs text-text-muted" role="status">
{thinking ? "Appia is answering…" : "Appia · idle"}
</p>
</header>
<div ref={logRef} role="log" aria-label="Conversation" aria-busy={thinking} className="flex-1 overflow-y-auto px-4 py-4">
<ul className="flex flex-col gap-3">
{messages.map((message, index) =>
message.questions ? (
/* The plan's questions (#300): a turn of the conversation, and
* the composer below is where the answer goes. */
<li key={index} className="rounded-lg border border-border-default p-3">
<p className="text-sm font-semibold text-text-strong">
Before building, {message.questions.length} things:
</p>
<ul className="mt-1.5 list-disc space-y-1 pl-4 text-sm text-text-muted">
{message.questions.map(question => (
<li key={question}>{question}</li>
))}
</ul>
<p className="mt-1.5 text-xs text-text-muted">Answer below — or say to decide for you.</p>
</li>
) : message.role === "system" ? (
<li
key={index}
className="rounded-lg bg-bg-surface-1 px-3 py-2 text-xs text-text-muted"
>
{message.text}
</li>
) : message.role === "person" ? (
<li key={index} className="flex flex-col items-end gap-1">
{message.author && <span className="px-1 text-xs text-text-muted">{message.author}</span>}
<span className="w-fit rounded-lg rounded-tr-sm bg-primary-default/10 px-3 py-2 text-sm whitespace-pre-wrap">
{message.text}
</span>
</li>
) : message.log ? (
<li key={index}>
<p className="mb-1 px-1 text-sm leading-relaxed text-text-strong">{message.text}</p>
<BuildLog steps={message.log} />
</li>
) : (
<li key={index} className="px-1 text-sm leading-relaxed text-text-strong">
{message.text}
</li>
),
)}
{thinking && (
<li className="flex items-center gap-2 px-1 text-xs text-text-muted">
<Loader01 className="size-3.5 shrink-0 animate-spin" strokeWidth={1.75} />
Appia is answering…
</li>
)}
</ul>
</div>
<div className="border-t border-border-default p-2.5">
<InputGroup>
<InputGroupTextarea
rows={1}
placeholder="Reply, or say to decide for you."
aria-label="Message Appia"
value={draft}
onChange={(e) => setDraft(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
e.preventDefault();
send();
}
}}
/>
<InputGroupAddon align="block-end" className="justify-end">
<InputGroupButton
variant="primary"
size="icon-sm"
className="rounded-full"
aria-label="Send"
disabled={!draft.trim() || thinking}
onClick={send}
>
<ArrowUp className="size-4" strokeWidth={1.75} />
</InputGroupButton>
</InputGroupAddon>
</InputGroup>
</div>
{/* The right edge is the resize affordance: a hairline grip that appears
* on hover, a full-height hot zone, and a separator for the keyboard. */}
<div
role="separator"
aria-orientation="vertical"
aria-label="Resize the chat area"
aria-valuemin={MIN_WIDTH}
aria-valuemax={MAX_WIDTH}
aria-valuenow={width}
tabIndex={0}
onPointerDown={beginResize}
onKeyDown={resizeByKeyboard}
className={`group absolute inset-y-0 right-0 z-10 flex w-3 cursor-ew-resize touch-none items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring-neutral-outline ${
dragging ? "before:absolute before:inset-y-0 before:right-0 before:w-0.5 before:bg-primary-default" : ""
}`}
>
<span
aria-hidden="true"
className={`h-10 w-1 rounded-full bg-border-active/50 transition-opacity ${
dragging ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100"
}`}
/>
</div>
</div>
);
}
