# QA: Chat Customization (Slots) — LangGraph (Python)

## Prerequisites

- Demo is deployed and accessible at `/demos/chat-slots` on the dashboard host
- Agent backend is healthy (`/api/health` or `/api/copilotkit` GET); `OPENAI_API_KEY` is set on Railway; `LANGGRAPH_DEPLOYMENT_URL` points at a LangGraph deployment exposing the neutral `sample_agent` graph (registered to the `chat-slots` agent name)
- Note: this demo DOES include `data-testid` attributes on every custom slot. Use them as the primary selectors. The underlying agent is the neutral "helpful, concise assistant" (no frontend tools, no agent tools) — this demo exercises frontend slot customization only.

## Test Steps

### 1. Basic Functionality

- [ ] Navigate to `/demos/chat-slots`; verify the page renders a centered chat surface (max-width 5xl, full viewport height) within 3s
- [ ] Verify the custom welcome screen is visible (`data-testid="custom-welcome-screen"`), replacing the default welcome
- [ ] Verify the nested welcomeMessage sub-slot renders inside the welcome screen (`data-testid="custom-welcome-message"`) with body text reading "Hover any region to see its slot path · click the badge to copy"
- [ ] Verify the welcome card wraps the default chat `input` element and a `suggestionView` row beneath it (both passed in as props by CopilotChatView)

### 2. Feature-Specific Checks

#### Welcome Screen Slot (`welcomeScreen`)

- [ ] Confirm the welcome card displays a hoverable SlotMarker badge (the gradient indigo/violet ring) — visually distinct from the default CopilotChat welcome
- [ ] Confirm NO default CopilotChat welcome heading is rendered (the custom card fully replaces it)

#### Suggestions (`useConfigureSuggestions`)

- [ ] Verify two suggestion pills render in the `suggestionView` slot beneath the input with verbatim titles:
  - "Write a sonnet"
  - "Tell me a joke"
- [ ] Click "Tell me a joke"; verify it sends the message "Tell me a short joke." and an assistant text response appears within 10s

#### Disclaimer Slot (`input.disclaimer`) — visible after first message

- [ ] After sending the first message, verify the custom disclaimer renders below the chat input (`data-testid="custom-disclaimer"`) containing:
  - a small badge reading "slot" (indigo background, lowercase bold)
  - body text "Custom disclaimer injected via `input.disclaimer`." (the phrase `input.disclaimer` is in monospace)
- [ ] Verify the default CopilotChat disclaimer text (if any) is NOT present — the custom disclaimer replaces it

#### Assistant Message Slot (`messageView.assistantMessage`)

- [ ] After the assistant response arrives, verify the assistant message is wrapped in the custom container (`data-testid="custom-assistant-message"`) with:
  - an indigo-tinted card background (`bg-indigo-50/60` in light mode)
  - an indigo border (`border-indigo-200`)
  - a small absolute-positioned "slot" badge at the top-left corner (indigo-600 background, white uppercase bold text)
- [ ] Verify the user message bubble is NOT wrapped in the custom container (user messages use the default styling)
- [ ] Send a second prompt ("Write a one-line sonnet"); verify the second assistant response is also wrapped in the `custom-assistant-message` container

### 3. Error Handling

- [ ] Attempt to send an empty message; verify it is a no-op (no user bubble, no network request)
- [ ] Send a ~500-character message; verify it wraps within the max-w-5xl container without horizontal scroll or layout break; the custom assistant-message card grows to fit the response
- [ ] Verify DevTools → Console shows no uncaught errors or missing-prop warnings during any flow above

## Expected Results

- Chat surface renders within 3 seconds with the custom welcome card visible
- Assistant text response within 10 seconds; wrapped in the custom assistant-message slot on every turn
- All three custom slots (`welcomeScreen`, `input.disclaimer`, `messageView.assistantMessage`) replace their defaults and are visually distinguishable via their "slot" badges / gradient styling
- No UI layout breaks, no uncaught console errors