wehub-resource-sync
60 lines
4.0 KiB
Markdown
60 lines
4.0 KiB
Markdown
# 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
|