Chatbot UI

Provides a unified chat UI that abstracts away provider-specific API differences, allowing users to switch between OpenAI, Anthropic, and other LLM providers without changing conversation context or UI. Implements a provider adapter pattern that normalizes request/response schemas across different API specifications, maintaining conversation state independently of the underlying model backend.

Stores conversation history locally (browser localStorage or IndexedDB) or in a backend database, enabling users to resume conversations across sessions and search/filter past interactions. Implements a conversation model that captures message content, metadata (timestamps, model used, parameters), and relationships, with indexing for fast retrieval and filtering by date, model, or keyword.

Renders LLM responses that contain Markdown (headers, lists, code blocks, links) with proper formatting, and applies syntax highlighting to code blocks based on language detection. Implements a Markdown parser (e.g., markdown-it) with a custom renderer for code blocks that integrates a syntax highlighter (e.g., Prism, Highlight.js).

Provides one-click copy buttons for code blocks and responses, with automatic formatting (e.g., removing Markdown syntax from copied code). Implements copy functionality using the Clipboard API with fallback to older methods, and tracks copy success/failure with user feedback.

Enables users to export conversations as JSON, Markdown, or PDF, and import previously exported conversations to restore full context. Implements serialization logic that preserves message structure, metadata, and formatting, with format-specific renderers for human-readable output (Markdown/PDF) and machine-readable interchange (JSON).

Allows users to define custom system prompts (instructions that shape model behavior) and adjust model parameters (temperature, max tokens, top-p) per conversation without code changes. Implements a parameter UI that maps to provider-specific APIs, with validation and presets for common use cases (creative writing, code generation, analysis).

Streams LLM responses token-by-token to the UI as they arrive from the provider, rendering text in real-time rather than waiting for the full response. Implements WebSocket or Server-Sent Events (SSE) to handle streaming, with buffering logic to balance responsiveness and rendering performance, and graceful fallback to buffered responses for non-streaming providers.

Allows users to create alternative branches from any message in a conversation, exploring different response paths without losing the original conversation thread. Implements a tree-based conversation model where each message can have multiple child responses, with UI controls to navigate between branches and merge or delete branches as needed.

Enables users to organize conversations into hierarchical folders and apply tags for flexible categorization and filtering. Implements a metadata layer that associates conversations with folder paths and tag arrays, with UI controls for drag-and-drop folder organization and tag-based filtering/search.

Provides a library of pre-written prompt templates for common tasks (code generation, writing, analysis, etc.) that users can quickly insert into conversations. Implements a template system with variable substitution (e.g., {{language}}, {{topic}}) and a UI for browsing, searching, and creating custom templates.

Implements keyboard-driven navigation and commands (e.g., Cmd+K for command palette, Cmd+N for new conversation) to enable power users to operate the UI without mouse interaction. Uses a command registry pattern where commands are defined with keyboard bindings and can be searched via a command palette UI.

Provides dark and light theme options with customizable color schemes, allowing users to personalize the UI appearance. Implements a theme system with CSS variables or a theming library (e.g., Tailwind CSS) that allows switching themes without page reload, with persistence of theme preference across sessions.