feat(web): add ACP chat panel with tabs (Terminal | Agent)
- web: add react-markdown + remark-gfm + react-syntax-highlighter - web: new lib/api/acp.ts (useAcpStatus/History/Prompt/Cancel) - web: new components/acp/ (AcpPanel + MessageBubble + MarkdownView + ThinkingIndicator). Markdown rendering with code highlighting via Prism oneDark. Auto-scroll to bottom when near it; error toasts fade after 5s. - web: WorkspaceShell now renders a tabbed bottom panel (Terminal | Agent) when the bottom panel is visible. Tab state in workspace-ui-store. - web: StatusBar shows agent status (ready / initializing / error) when the ACP session is initialized. - web: pnpm-workspace.yaml: add packages ['.'] so pnpm install works in this workspace. Conversation: 019f3562-9382-7e00-ad92-3162341e9274
This commit is contained in:
tao.chen
@@ -0,0 +1,220 @@
|
||||
import { Ban, Send } from "lucide-react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { MessageBubble } from "./MessageBubble";
|
||||
import { ThinkingIndicator } from "./ThinkingIndicator";
|
||||
|
||||
import {
|
||||
useAcpCancel,
|
||||
useAcpHistory,
|
||||
useAcpPrompt,
|
||||
useAcpStatus,
|
||||
} from "@/lib/api/acp";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface AcpPanelProps {
|
||||
workspaceId: string | null;
|
||||
}
|
||||
|
||||
interface LocalError {
|
||||
id: number;
|
||||
message: string;
|
||||
}
|
||||
|
||||
function StatusPill({ status }: { status: ReturnType<typeof useAcpStatus> }) {
|
||||
let dotClass = "bg-muted-foreground";
|
||||
let label = "not started";
|
||||
|
||||
if (status.isPending) {
|
||||
dotClass = "bg-muted-foreground animate-pulse";
|
||||
label = "initializing…";
|
||||
} else if (status.isError) {
|
||||
dotClass = "bg-destructive";
|
||||
label = "error";
|
||||
} else if (status.data) {
|
||||
if (status.data.error) {
|
||||
dotClass = "bg-destructive";
|
||||
label = `error: ${status.data.error}`;
|
||||
} else if (status.data.ready) {
|
||||
dotClass = "bg-green-500";
|
||||
label = "ready";
|
||||
} else if (status.data.running) {
|
||||
dotClass = "bg-muted-foreground animate-pulse";
|
||||
label = "initializing…";
|
||||
} else {
|
||||
dotClass = "bg-muted-foreground";
|
||||
label = "not started";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className={cn("h-2 w-2 shrink-0 rounded-full", dotClass)} />
|
||||
<span
|
||||
className={cn(
|
||||
"max-w-40 truncate",
|
||||
status.isError || status.data?.error
|
||||
? "text-destructive"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
title={label}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AcpPanel({ workspaceId }: AcpPanelProps) {
|
||||
const acpStatus = useAcpStatus(workspaceId);
|
||||
const acpHistory = useAcpHistory(workspaceId);
|
||||
const prompt = useAcpPrompt();
|
||||
const cancel = useAcpCancel();
|
||||
|
||||
const [input, setInput] = useState("");
|
||||
const [localErrors, setLocalErrors] = useState<LocalError[]>([]);
|
||||
const scrollRootRef = useRef<HTMLDivElement | null>(null);
|
||||
const sentinelRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const messages = useMemo(
|
||||
() => acpHistory.data?.messages ?? [],
|
||||
[acpHistory.data],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (prompt.error) {
|
||||
const id = Date.now();
|
||||
setLocalErrors((prev) => [
|
||||
...prev,
|
||||
{ id, message: prompt.error?.message ?? "Failed to send prompt" },
|
||||
]);
|
||||
const timeout = window.setTimeout(() => {
|
||||
setLocalErrors((prev) => prev.filter((e) => e.id !== id));
|
||||
}, 5000);
|
||||
return () => window.clearTimeout(timeout);
|
||||
}
|
||||
}, [prompt.error]);
|
||||
|
||||
useEffect(() => {
|
||||
const root = scrollRootRef.current;
|
||||
const sentinel = sentinelRef.current;
|
||||
if (!root || !sentinel) return;
|
||||
|
||||
const viewport = root.querySelector(
|
||||
"[data-radix-scroll-area-viewport]",
|
||||
) as HTMLDivElement | null;
|
||||
if (!viewport) return;
|
||||
|
||||
const distanceFromBottom =
|
||||
viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
|
||||
if (distanceFromBottom <= 80) {
|
||||
sentinel.scrollIntoView({ behavior: "smooth", block: "end" });
|
||||
}
|
||||
}, [messages, prompt.isPending]);
|
||||
|
||||
const handleSend = () => {
|
||||
const content = input.trim();
|
||||
if (!content || !workspaceId || prompt.isPending) return;
|
||||
prompt.mutate({ workspaceId, content });
|
||||
setInput("");
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
};
|
||||
|
||||
const isReady = acpStatus.data?.ready === true;
|
||||
const sessionId = acpStatus.data?.sessionId;
|
||||
const trimmedSession =
|
||||
sessionId && sessionId.length > 12
|
||||
? `${sessionId.slice(0, 12)}…`
|
||||
: sessionId;
|
||||
|
||||
if (!workspaceId) {
|
||||
return (
|
||||
<section className="flex h-full w-full items-center justify-center bg-background text-sm text-muted-foreground">
|
||||
Select a workspace to use the agent.
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="flex h-full w-full flex-col overflow-hidden bg-background">
|
||||
<header className="flex h-8 shrink-0 items-center justify-between border-b border-border bg-sidebar px-3 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-foreground">Agent</span>
|
||||
{sessionId && (
|
||||
<span
|
||||
className="font-mono text-[10px] text-muted-foreground"
|
||||
title={sessionId}
|
||||
>
|
||||
sess:{trimmedSession}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<StatusPill status={acpStatus} />
|
||||
</header>
|
||||
|
||||
<ScrollArea ref={scrollRootRef} className="flex-1">
|
||||
<div className="flex flex-col gap-3 p-3">
|
||||
{messages.length === 0 && isReady && (
|
||||
<div className="flex flex-1 items-center justify-center py-8 text-sm text-muted-foreground">
|
||||
Send a message to start the conversation.
|
||||
</div>
|
||||
)}
|
||||
{messages.map((message, index) => (
|
||||
<MessageBubble key={index} message={message} />
|
||||
))}
|
||||
{prompt.isPending && <ThinkingIndicator />}
|
||||
{localErrors.map((err) => (
|
||||
<div
|
||||
key={err.id}
|
||||
className="text-center text-xs text-destructive"
|
||||
>
|
||||
{err.message}
|
||||
</div>
|
||||
))}
|
||||
<div ref={sentinelRef} />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<div className="flex h-12 shrink-0 items-center gap-2 border-t border-border bg-background px-3">
|
||||
<textarea
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Ask the agent…"
|
||||
rows={1}
|
||||
maxLength={4000}
|
||||
disabled={!workspaceId}
|
||||
className="max-h-32 min-h-8 flex-1 resize-none rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
||||
/>
|
||||
{prompt.isPending ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => workspaceId && cancel.mutate(workspaceId)}
|
||||
disabled={cancel.isPending}
|
||||
>
|
||||
<Ban className="size-4" aria-hidden="true" />
|
||||
<span className="sr-only">Cancel</span>
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleSend}
|
||||
disabled={!input.trim() || prompt.isPending}
|
||||
>
|
||||
<Send className="size-4" aria-hidden="true" />
|
||||
<span className="sr-only">Send</span>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user