Files
copilotkit__copilotkit/showcase/integrations/claude-sdk-python/qa/chat-customization-css.md
Jordan Ritter dd06dd89d1 refactor(showcase): rename packages/ to integrations/
The showcase framework directories better reflect their role as
integration examples rather than distributable packages.
Renames showcase/packages/ -> showcase/integrations/ and updates
the test docker-compose file reference accordingly.
2026-04-28 07:47:35 -07:00

40 lines
1.1 KiB
Markdown

# QA: Chat Customization (CSS) — Claude Agent SDK (Python)
## Prerequisites
- Demo is deployed and accessible
- Agent backend is healthy (check /api/health)
## Test Steps
### 1. Basic Functionality
- [ ] Navigate to `/demos/chat-customization-css`
- [ ] Verify the chat loads inside the `.chat-css-demo-scope` wrapper
- [ ] Send a basic message
- [ ] Verify the agent responds
### 2. Feature-Specific Checks
#### Theme Application
- [ ] Verify user message bubbles render with the hot-pink gradient
- [ ] Verify assistant message bubbles render with the amber background and monospace font
- [ ] Verify the input area shows a dashed pink border
- [ ] Verify the input placeholder color is pink italic
#### Variable Overrides
- [ ] Inspect the `.chat-css-demo-scope` element and verify CopilotKit CSS variables are overridden (e.g. `--copilot-kit-primary-color: #ff006e`)
- [ ] Verify the customization does not leak outside the scoped container
### 3. Error Handling
- [ ] Verify no console errors during normal usage
## Expected Results
- Page loads within 3 seconds
- Theme is applied only inside `.chat-css-demo-scope`
- Agent responds within 10 seconds