feat(showcase/google-adk/chat-customization-css): 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/chat-customization-css/README.md

@@ -0,0 +1,81 @@
+# Chat Customization (CSS)
+
+## What This Demo Shows
+
+How far you can push `CopilotChat` with CSS alone — no slot overrides, no
+component swaps, no React. The default look is rounded, system-sans, and
+minimal-light. This demo replaces it with **HALCYON**, a warm-paper
+editorial brand: cream parchment surface, sharp 90° corners, copper-ember
+accents, an italic display serif for big headings, a Fraunces serif voice
+for the assistant, and JetBrains Mono dispatch lines for the user.
+
+The point: a team can take CopilotChat off the shelf and skin it to match
+their own brand without ever opening a component file.
+
+## How it works
+
+Two layers do the work:
+
+1. **v2 token overrides on `[data-copilotkit]`** — `--background`,
+   `--foreground`, `--primary`, `--muted`, `--border`, `--ring`, `--radius`,
+   etc. Recolors every Tailwind utility (`cpk:bg-muted`,
+   `cpk:text-foreground`, …) the runtime renders.
+2. **Class-targeted styling** — `.copilotKitChat`, `.copilotKitMessages`,
+   `.copilotKitMessage.copilotKitUserMessage`,
+   `.copilotKitMessage.copilotKitAssistantMessage`, `.copilotKitInput`, the
+   welcome screen, suggestions, scrollbar.
+
+Every selector is namespaced under `.chat-css-demo-scope`, so the theme
+cannot leak into the rest of the showcase.
+
+## How to Interact
+
+Type any prompt and watch the conversation render in the HALCYON voice:
+
+- `"Say hi"`
+- `"Write a one-paragraph product memo about quarterly OKRs"`
+- `"Show me a Python snippet for retry with exponential backoff"`
+- `"Quote a famous business strategist on focus"`
+
+You'll see:
+
+- The user line render as a mono CLI dispatch with an ember `→` marker
+- The assistant respond in serif body type with editorial spacing, an
+  ember left rule, and a dark code-card for code blocks
+- The composer pill flatten to a sharp card with an ember focus ring and
+  a square copper send button
+
+## Aesthetic Notes
+
+- **Surface** — warm parchment (`#F4EFE6`) with a single ambient ember glow
+  in the top-left and a barely-perceptible paper-grain noise via inline
+  SVG
+- **Masthead** — a centered mono label pinned just under the top edge of
+  the chat surface (`CopilotChat · Customized with CSS`)
+- **Typography** — Instrument Serif (display, italic), Fraunces (assistant
+  body), Inter Tight (UI), JetBrains Mono (user dispatch + metadata +
+  suggestions)
+- **Accent** — deep copper ember (`#C44A1F`), used only on the user prompt
+  marker, the assistant left rule, the send button, and focus rings —
+  sparingly, so it actually reads as signal
+- **Geometry** — sharp 90° corners everywhere (radius is overridden to
+  `0px`), opposite of the default rounded pills
+
+## Technical Details
+
+- `<CopilotKit>` wires `runtimeUrl="/api/copilotkit"` and
+  `agent="chat-customization-css"` (backed by the shared simple chat
+  agent in `src/agents/shared_chat.py`)
+- `<CopilotChat>` is wrapped in `<div className="chat-css-demo-scope">`;
+  the theme is applied by `import "./theme.css"` at the top of the page
+- `theme.css` first overrides the v2 token variables on `[data-copilotkit]`
+  (so Tailwind utilities recolor automatically), then layers
+  class-targeted rules on top for the editorial details that CSS
+  variables alone can't express
+- Fonts load from Google Fonts via `@import` at the top of `theme.css`
+  so the demo is self-contained — copy the file into another project and
+  the theme works end-to-end
+- Reach for slots (see `chat-slots`) when you need to change _what_ a
+  piece renders, not just how it looks; reach for CSS — like this demo —
+  when the default structure is fine and you only need a different
+  visual identity

showcase/integrations/google-adk/src/app/demos/chat-customization-css/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-// Chat Customization (CSS) — all theming lives in theme.css, scoped to the
-// `.chat-css-demo-scope` wrapper. The page stays intentionally minimal;
-// only <CopilotChat /> is visibly re-themed.
+// Chat Customization (CSS) — every visual choice in this demo lives in
+// theme.css and is scoped to the `.chat-css-demo-scope` wrapper. The page
+// intentionally stays minimal so the contrast against the default look
+// comes entirely from the stylesheet.
 //
 // https://docs.copilotkit.ai/custom-look-and-feel/customize-built-in-ui-components
 
@@ -14,12 +15,13 @@ import "./theme.css";
 
 export default function ChatCustomizationCssDemo() {
   return (
-    <CopilotKit runtimeUrl="/api/copilotkit" agent="chat_customization_css">
-      <div className="flex justify-center items-center h-screen w-full">
+    <CopilotKit runtimeUrl="/api/copilotkit" agent="chat-customization-css">
+      <div className="flex justify-center items-center h-screen w-full bg-white p-6">
         <div className="chat-css-demo-scope h-full w-full max-w-4xl">
           <CopilotChat
-            agentId="chat_customization_css"
-            className="h-full rounded-2xl"
+            agentId="chat-customization-css"
+            className="h-full"
+            attachments={{ enabled: true }}
           />
         </div>
       </div>