chat-bubble
AI message bubble with streaming
AIchat-bubble.csschat-bubble.js
Installation
$
npx skeehn add chat-bubblePreview
Can you explain how dither rendering works in CSS?
Dither rendering in CSS uses repeating gradient patterns and SVG filters to simulate the halftone effect. The key is layering multiple gradient stops at sub-pixel intervals.
search_docs("dither CSS pattern") = 3 resultsBased on the search results, I can see that...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| role | 'user' | 'assistant' | 'tool' | 'system' | — | Message author role (required) |
| streaming | boolean | false | Whether the message is currently streaming |
Usage
chat-bubble.tsx
1import { ChatBubble } from '@skeehn/react';23export function ChatThread() {4 return (5 <div className="flex flex-col gap-3">6 <ChatBubble role="user">7 How do I set up dither rendering?8 </ChatBubble>9 <ChatBubble role="assistant">10 You can use the CSS dither engine included in skeehn...11 </ChatBubble>12 <ChatBubble role="assistant" streaming>13 Let me search for more details...14 </ChatBubble>15 </div>16 );17}