Support Bot UI Kit

Seven interactive components that power modern support bot interfaces. Each demo is fully functional - click around to see how they behave in a real customer support context.

Message Scroller & Scroll-to-Bottom

Auto-scrolling chat feed with a floating scroll-to-bottom button that appears when you scroll up. Click “Send follow-up” to see streaming bot responses word by word.

How do I reset my password?
You can reset your password by visiting the settings page and clicking 'Forgot Password'. I can walk you through it if you like.

Horizontal Chip Carousel

Quick reply suggestions in a horizontally scrollable chip strip with arrow navigation. Click any chip to preview the interaction pattern.

Collapsible Diagnostics Accordion

Technical diagnostic logs nested inside a chat bubble. Expand each section to inspect request headers, response metadata, stack traces, and session context.

Diagnostic Logs

4 entries found

GET /api/v2/support/ticket/43829 HTTP/2.0
Host: api.example.com
Authorization: Bearer eyJhbGciOiJSUzI1NiIs...
User-Agent: SupportBot/2.1.0 (WebKit)
X-Request-ID: req_a1b2c3d4e5f6
Status: 200 OK
Latency: 342ms
Cache: MISS
Server: nginx/1.24.0
X-RateLimit-Remaining: 42
X-RateLimit-Reset: 1719273600
Error: Connection timeout after 30s
  at TCP.connect (node:net:1820:15)
  at makeConnection (/app/services/socket.ts:145:12)
  at SocketService.connect (/app/services/socket.ts:89:8)
  at async SupportEngine.init (/app/engine.ts:52:3)
Session ID: sess_9876abcd
User Tier: premium
Messages in session: 14
Escalation path: bot -> billing -> tier2
Last intent: password_reset
Confidence: 0.87

Rich Media Carousel

Horizontal card carousel for articles, products, or options. Each card has an icon, label, title, description, and a hover-reveal CTA.

Inline Feedback Utility

Thumbs up/down with a micro-dialog for quick sentiment collection. Select a reaction category and submit, or undo after submission.

Skeleton Loader Bubbles

Animated placeholder bubbles that simulate a bot thinking and typing. Press simulate to see the loading shimmer in action.

Press simulate to see thinking states

Inline CSAT Dialog

End-of-session customer satisfaction rating with a 5-star scale and optional freeform comment. Submits inline to show the thank-you state.