wehub-resource-sync
40 lines
1.1 KiB
Markdown
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
|