AI Elements Vue

The Message component suite is designed for building chat interfaces. It provides tools for:

• Displaying messages from both users and AI assistants.
• Managing multiple response branches (branching).
• Adding action buttons to messages.
• Rendering markdown content within chat responses.

The MicSelector is a composable dropdown component designed for selecting audio input devices. It is built on top of shadcn-vue's Command and Popover components.

Key features include:

• Automatic device detection: Identifies available microphones in the user's environment.
• Permission handling: Manages the lifecycle of microphone access permissions.
• Dynamic updates: Detects and updates the list of devices when hardware changes (e.g., plugging in a new USB mic).
• Intelligent parsing: Automatically parses device names for better readability.

The EnvironmentVariables component is designed to display environment variables in a user interface. It includes built-in support for:

• Value masking: Hiding sensitive information by default.
• Visibility toggle: Allowing users to reveal or hide values.
• Copy functionality: Enabling users to quickly copy variable values to their clipboard.

The Commit component is designed to display detailed commit information. It provides a structured way to show:

• Commit hash
• Commit message
• Author details
• Timestamp
• List of changed files

The OpenIn component provides a set of pre-configured links to popular AI chat platforms, allowing users to export their current query to an external AI assistant.

Key capabilities include:

• Context-based query passing: Automatically encodes and passes queries to the target platform.
• Supported Platforms: ChatGPT, Claude, T3 Chat, Scira AI, v0, and Cursor.
• Customization: Supports a customizable dropdown trigger button and additional CSS classes for the content area.
• Accessibility: Includes an accessible dropdown menu with keyboard navigation and external link indicators.

The PromptInput component is a feature-rich input system for AI chat interfaces, including:

• Text Handling: Auto-resizing textarea, customizable min/max height, and keyboard shortcuts (Enter to submit, Shift+Enter for new line).
• Attachments: File attachment support with drag-and-drop, image previews, and configurable constraints (max files, max size, accepted types).
• Voice: Built-in native speech recognition button using the Web Speech API.
• Tools & Actions: Flexible toolbar (PromptInputTools) for custom actions, model selection dropdowns, and web search toggles.
• UX: Automatic submit button icon updates based on status, global document drop support (via global-drop prop), and responsive mobile-friendly design.

The StackTrace component parses standard JavaScript/Node.js stack trace strings and displays them in a formatted, interactive UI. It features error type highlighting, dimming of internal frames (like node_modules), collapsible content, and clickable file paths.

Key Features

• Parsing: Automatically handles standard JS/Node.js stack trace formats.
• Visuals: Highlights error types in red and dims internal frames.
• Interactivity: Supports collapsing/expanding, copying the full trace to the clipboard, and clicking file paths to trigger actions.
• Customization: Allows hiding internal frames and using slots for custom error types or messages.

The Commit component suite provides a complete UI for displaying git-style commit information, including:

• Commit hash display: Includes a built-in copy button.
• Author details: Displays author avatars with initials.
• Timestamps: Supports relative timestamp formatting.
• File changes: A collapsible list of changed files featuring:
  • Color-coded file status (added, modified, deleted, renamed).
  • Line addition and deletion counts.

The Message component provides a rich set of features for AI chat interfaces:

• Styling: Distinct alignment and styling for user vs. assistant messages.
• Response Branching: Navigation controls to switch between multiple AI response versions.
• Markdown & Math: GFM support (tables, task lists, etc.), math equations, and smart streaming.
• Action Buttons: Built-in support for retry, like, dislike, copy, and share with tooltips.
• Code Blocks: Syntax highlighting and copy-to-clipboard functionality.
• Attachments: Support for images and generic files (Note: Attachment components are managed in a separate module).
• Accessibility: Keyboard accessible with proper ARIA labels.
• Theming: Seamless light/dark mode integration.

The Context component is a compound component system used to provide a comprehensive view of AI model usage. It is designed to show:

• Context window utilization: How much of the model's available context is being used.
• Token consumption breakdown: Detailed usage for input, output, reasoning, and cache tokens.
• Cost estimation: Interactive cost calculations, typically presented via a hover card interface.