Skip to content

chat-customization-css.md

Latest commit

 

History

History
39 lines (25 loc) · 1.15 KB

chat-customization-css.md

File metadata and controls

39 lines (25 loc) · 1.15 KB
Raw

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