32 interactive components for AI-powered interfaces. All components follow the dh-ai-* class convention, are fully dark-themed, and require no external dependencies.
Multi-line textarea with toolbar actions, character counter, and send button. Handles file attach, voice, web search, and code injection shortcuts.
Editable system prompt editor with token count display. Lets users define model persona, constraints, and output formatting instructions.
Inline file attachment chips with icon, filename, size and remove action. Supports any MIME type and renders inline in the prompt area.
Command palette triggered by / or @ prefix. Groups commands by category with keyboard shortcut hints.
Push-to-talk voice recording with animated waveform visualiser and duration counter. Transcribes audio to text on release.
Browsable, filterable library of reusable prompt templates. Supports category filters and one-click insertion into the prompt field.
Real-time streaming text renderer with animated cursor and token/speed metadata. Driven by the data-dh-ai-stream attribute.
Collapsible reasoning trace panel. Shows spinner while active, checkmark when done, with token and duration metadata.
Displays tool invocations with input arguments and result payloads. Supports done, running, and error states.
Inline citation chips that reference a source panel below the response. Clicking a chip scrolls to the matching citation entry.
Large language models have demonstrated remarkable few-shot learning capabilities Brown et al., 20201 and have since been scaled to trillions of parameters Chowdhery et al., 20222 with significant downstream improvements.
Full-featured artifact viewer with code/preview tabs, copy, download, and external open actions. Renders rich code with syntax highlights.
// Iterative Fibonacci sequence function fibonacci(n) { if (n <= 1) return n; let [a, b] = [0, 1]; for (let i = 2; i <= n; i++) { [a, b] = [b, a + b]; } return b; }
Image generation widget with prompt, model metadata, progress bar, and generated image display area.
Playback widget for text-to-speech output. Includes waveform progress track, voice name, and duration metadata.
Dropdown picker for switching between LLM providers and model variants. Shows tier badge and model capability description.
Range sliders for adjusting temperature, max tokens, top-p, and frequency penalty. Each control shows live value readout.
Visual usage bar showing how much of the model's context window is consumed, broken down by source category.
Pill-based tone selector that applies a personality preset to the system prompt. Only one pill is active at a time.
Vertical step progress indicator for agentic workflows. Supports done, active, error, and pending states per step.
Human-in-the-loop confirmation dialog shown before the agent executes a destructive or irreversible action.
Searchable conversation history list grouped by date. Click any item to resume a previous session.
Persistent memory store showing facts the model has learned or been told. Items can be edited or deleted inline.
Branch selector for parallel conversation threads. Users can explore alternative directions without losing the main context.
Alternating user and assistant message bubbles with avatar, content, and timestamp metadata.
Thumbs up/down vote buttons plus emoji reaction panel for granular response quality signals.
Model self-reported confidence score shown as a filled track with colour-coded level indicators.
Status badges in 6 colour variants. Used across all components to indicate operational state at a glance.
Animated placeholder shapes shown while content is loading. Prevents layout shift and signals activity without a spinner.
Transient notification popups in 4 semantic types. Appear at the viewport edge and auto-dismiss after 4 seconds.
Displayed when the model declines to answer. Shows policy reason and suggests alternative approaches the user can take.
Inline warning surfaced when the model's output has low grounding confidence or cites unverifiable sources.
Token and cost analytics panel showing consumption across input, output, context, and API calls with a summary row.
Colour-coded round-trip latency readout with dot, value, and label. Green for fast, amber for medium, red for slow.