feat(showcase/google-adk/headless-simple): port frontend from langgraph-python

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: tylerslaton

showcase/integrations/google-adk/src/app/demos/headless-simple/chat.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+/**
+ * The whole demo, in one screenful: two hooks turn a shadcn shell into a
+ * working chat. `useAgent` exposes the message log + run state for one
+ * agent; `useCopilotKit` runs it.
+ */
+
+import { useState } from "react";
+import { useAgent, useCopilotKit } from "@copilotkit/react-core/v2";
+import { Sparkles } from "lucide-react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+
+import { AssistantBubble, UserBubble } from "./message-bubble";
+import { Composer } from "./composer";
+import { EmptyState } from "./empty-state";
+import { TypingIndicator } from "./typing-indicator";
+
+export function Chat() {
+  const { agent } = useAgent({ agentId: "headless-simple" });
+  const { copilotkit } = useCopilotKit();
+  const [input, setInput] = useState("");
+
+  const send = (text: string) => {
+    const trimmed = text.trim();
+    if (!trimmed || agent.isRunning) return;
+    agent.addMessage({
+      id: crypto.randomUUID(),
+      role: "user",
+      content: trimmed,
+    });
+    setInput("");
+    void copilotkit.runAgent({ agent }).catch(() => {});
+  };
+
+  // Render only plain user/assistant text — Simple skips tool/system/etc.
+  const visible = agent.messages.flatMap((m) => {
+    if (m.role !== "user" && m.role !== "assistant") return [];
+    if (typeof m.content !== "string" || m.content.length === 0) return [];
+    return [{ id: m.id, role: m.role, content: m.content }];
+  });
+
+  const last = visible[visible.length - 1];
+  const showTyping = agent.isRunning && (!last || last.role === "user");
+
+  const hasMessages = visible.length > 0;
+
+  return (
+    <div className="flex h-screen w-full justify-center bg-background p-4 sm:p-6">
+      <Card className="flex h-full w-full max-w-3xl flex-col gap-0 overflow-hidden border-border py-0 shadow-2xl shadow-black/10">
+        <CardHeader className="border-b border-border/60 py-4">
+          <CardTitle className="flex items-center gap-2 text-base">
+            <Sparkles className="h-4 w-4 text-primary" aria-hidden="true" />
+            Headless Chat
+          </CardTitle>
+          <CardDescription>
+            Two hooks, your design system — that&apos;s the whole demo.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="flex min-h-0 flex-1 flex-col p-0">
+          {!hasMessages ? (
+            // Render empty state OUTSIDE ScrollArea so flex-1 + justify-
+            // center can vertically center it. Radix ScrollArea wraps
+            // content in a `display: table` div that breaks `h-full`
+            // propagation, so a centered child inside it hugs the top.
+            <div className="flex min-h-0 flex-1 flex-col">
+              <EmptyState onPick={send} />
+            </div>
+          ) : (
+            <ScrollArea className="min-h-0 flex-1">
+              <div className="flex flex-col gap-4 px-4 py-4 sm:px-6">
+                {visible.map((m) =>
+                  m.role === "user" ? (
+                    <UserBubble key={m.id} content={m.content} />
+                  ) : (
+                    <AssistantBubble key={m.id} content={m.content} />
+                  ),
+                )}
+                {showTyping && <TypingIndicator />}
+              </div>
+            </ScrollArea>
+          )}
+
+          <Separator className="bg-border/60" />
+
+          <Composer
+            value={input}
+            onChange={setInput}
+            onSend={() => send(input)}
+            disabled={!input.trim() || agent.isRunning}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

showcase/integrations/google-adk/src/app/demos/headless-simple/composer.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+/** Bottom-of-chat input. Enter sends, Shift+Enter inserts a newline. */
+
+import { ArrowUp } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+export function Composer({
+  value,
+  onChange,
+  onSend,
+  disabled,
+}: {
+  value: string;
+  onChange: (next: string) => void;
+  onSend: () => void;
+  disabled: boolean;
+}) {
+  return (
+    <div data-testid="headless-composer" className="bg-background p-3 sm:p-4">
+      <div
+        className={cn(
+          "flex items-end gap-2 rounded-2xl border border-border/60 bg-muted/50 p-2",
+          "focus-within:bg-background focus-within:ring-2 focus-within:ring-ring/40",
+          "transition-colors",
+        )}
+      >
+        <Textarea
+          rows={1}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              if (!disabled) onSend();
+            }
+          }}
+          placeholder="Message the agent..."
+          className={cn(
+            "min-h-[40px] max-h-40 flex-1 resize-none border-0 bg-transparent",
+            "px-2 py-2 text-sm shadow-none",
+            "focus-visible:ring-0 focus-visible:border-transparent",
+          )}
+        />
+        <Button
+          type="button"
+          size="icon"
+          onClick={onSend}
+          disabled={disabled}
+          aria-label="Send message"
+          className="h-9 w-9 shrink-0 rounded-xl"
+        >
+          <ArrowUp className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

showcase/integrations/google-adk/src/app/demos/headless-simple/empty-state.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+/** First-load pane: heading, sparkles icon, and three sample prompt chips. */
+
+import { Sparkles } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+const SAMPLES = [
+  "Say hello in one short sentence.",
+  "Tell me a one-line joke.",
+  "Give me a fun fact.",
+];
+
+export function EmptyState({ onPick }: { onPick: (text: string) => void }) {
+  return (
+    <div className="flex h-full flex-1 flex-col items-center justify-center gap-6 px-8 py-10 text-center">
+      <div className="flex flex-col items-center gap-2">
+        <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+          <Sparkles className="h-6 w-6" aria-hidden="true" />
+        </div>
+        <h2 className="text-lg font-semibold tracking-tight">
+          Start a conversation
+        </h2>
+        <p className="max-w-sm text-sm text-muted-foreground">
+          Two hooks, one shadcn shell — text in, text out.
+        </p>
+      </div>
+      <div className="flex w-full max-w-md flex-wrap items-center justify-center gap-2">
+        {SAMPLES.map((s) => (
+          <Badge
+            key={s}
+            asChild
+            variant="secondary"
+            className="cursor-pointer px-3 py-1.5 text-xs font-normal hover:bg-secondary/80"
+          >
+            <button type="button" onClick={() => onPick(s)}>
+              {s}
+            </button>
+          </Badge>
+        ))}
+      </div>
+    </div>
+  );
+}

showcase/integrations/google-adk/src/app/demos/headless-simple/message-bubble.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+/** User and assistant bubbles. Plain text only — Simple skips markdown. */
+
+import { Bot, User } from "lucide-react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+export function UserBubble({ content }: { content: string }) {
+  return (
+    <div
+      data-testid="headless-message-user"
+      data-message-role="user"
+      className="flex w-full items-start gap-3 flex-row-reverse"
+    >
+      <Avatar className="h-8 w-8 shrink-0 border bg-primary text-primary-foreground">
+        <AvatarFallback className="bg-primary text-primary-foreground">
+          <User className="h-4 w-4" />
+        </AvatarFallback>
+      </Avatar>
+      <div className="max-w-[80%] rounded-2xl rounded-tr-sm bg-primary px-4 py-2.5 text-sm leading-relaxed text-primary-foreground shadow-sm">
+        <p className="whitespace-pre-wrap break-words">{content}</p>
+      </div>
+    </div>
+  );
+}
+
+export function AssistantBubble({ content }: { content: string }) {
+  return (
+    <div
+      data-testid="headless-message-assistant"
+      data-message-role="assistant"
+      className="flex w-full items-start gap-3"
+    >
+      <Avatar className="h-8 w-8 shrink-0 border bg-muted text-muted-foreground">
+        <AvatarFallback className="bg-muted text-muted-foreground">
+          <Bot className="h-4 w-4" />
+        </AvatarFallback>
+      </Avatar>
+      <div className="max-w-[80%] rounded-2xl rounded-tl-sm bg-muted px-4 py-2.5 text-sm leading-relaxed text-foreground shadow-sm">
+        <p className="whitespace-pre-wrap break-words">{content}</p>
+      </div>
+    </div>
+  );
+}