feat: JSX preview in chat with artifact and web preview support#141
Merged
shzd-tridz merged 32 commits intodevelopfrom Feb 13, 2026
Merged
feat: JSX preview in chat with artifact and web preview support#141shzd-tridz merged 32 commits intodevelopfrom
shzd-tridz merged 32 commits intodevelopfrom
Conversation
- Add artifact.types for ParsedArtifact, ParsedWebPreview, ParsedJSXPreview - Add artifactParser for <artifact> tag parsing - Add webPreviewParser for <web-preview> tag parsing - Add jsxPreviewParser for <jsx-preview> tag parsing - Support code fence unwrapping for jsx-preview in markdown
- Add MessageContentWithArtifacts to parse and render artifacts, web previews, JSX - Add ArtifactRenderer for code, html, svg, mermaid artifacts - Add WebPreviewRenderer for iframe-based web previews - Add Mermaid component for diagram rendering - Decode HTML entities for escaped tags
- Add JSXPreview component with react-jsx-parser, streaming support - Support Recharts (BarChart, LineChart, PieChart, etc.) - Support shadcn/ui (Card, Badge, Alert, Table, Tabs, etc.) - Support Lucide icons and data formatting utilities - Add JSXPreviewRenderer for chat message integration - Use html-to-image for PNG export (oklch-compatible) - Hide export buttons during PNG capture - Add html-to-image dependency, remove html2canvas
- Use MessageContentWithArtifacts in ChatMessage for V2 chat - Add MessageContentWithArtifacts to ChatWindow for legacy chat - Full-width assistant messages for JSX preview
- Rename sidebar title from Workspaces to Chat - Default to Recents tab to prioritize conversations - Reduce padding and spacing for compact layout - Add collapsible sidebar with toggle button - Narrow sidebar width (w-96 to w-80) - Add left padding to header for toggle alignment
- Add AI-ELEMENTS-USAGE.md for artifact usage - Add AI-ELEMENTS-WEBPREVIEW-ARTIFACT-GUIDE.md for web previews - Update agent_message doctype if applicable
Add utility functions to determine OCR processing strategy and select appropriate models based on file type and provider. - _determine_ocr_strategy(): Routes PDFs to OCR endpoint, images to vision models - _get_default_ocr_model(): Auto-selects model based on provider and strategy These functions enable intelligent file-type routing for optimal OCR results.
Add create_ocr_document_tool() function to register OCR tool in Agent Tool Function system. Features: - Creates OCR tool type if not exists - Registers tool with parameters: file_id, file_url, pages, include_images, model - Updates after_install() and after_migrate() hooks - Idempotent (handles both creation and updates) Tool enables agents to extract text from PDFs and images using intelligent routing to OCR endpoint or vision models.
Add _process_with_ocr_endpoint() function to handle PDF and multi-page document processing using LiteLLM's OCR endpoint. Features: - Base64 encoding of document content - Multi-page support with page selection - Optional embedded image extraction - Markdown-formatted text output - Page-by-page breakdown with dimensions Uses litellm.ocr() API for optimal PDF processing results.
Add _process_with_vision_model() function to handle single image OCR using LiteLLM vision models (GPT-4o, Claude, Gemini, etc.). Features: - Base64 encoding of image content - Vision model integration via litellm.completion() - Markdown-formatted text output - Better context understanding for images Uses vision models for optimal single-image OCR results.
Add handle_ocr_document() function that intelligently routes documents to appropriate processing method based on file type. Features: - File lookup by file_id or file_url with fallback - Intelligent strategy selection (OCR for PDFs, Vision for images) - Auto-model detection based on provider and strategy - Agent Message creation with extracted text - WebSocket events for real-time updates - Comprehensive error handling Routes PDFs to OCR endpoint and images to vision models for optimal results.
…n run_agent_stream
- Add 'upload_file_and_process' whitelist method to handle file uploads. - Decode base64 file data and save as 'Agent Message' attachment. - Asynchronously trigger 'handle_ocr_document' for processing. - Ensure correct agent and conversation context is maintained.
…prevent validation errors.
- Add file upload button for PDFs and images in chat interface. - Implement 'sendDocToServer' to handle file uploads via 'upload_file_and_process'. - Handle real-time WebSocket updates to display extracted text immediately. - Update 'append_message' to support new message types.
- Added 'Standard Tools' section to AGENTS.md - Documented 'ocr_document' parameters and functionality for text extraction - Documented 'generate_image'parameters for AI image creation - Clarified that these tools are automatically registered and available to agents
Add a Select field (Text, JSX, Mermaid, Markdown, Artifact, HTML, Image) to Agent Message for future categorization and filtering of message content types. Not required; purely additive.
Add PreviewViewPage at /huf/view/:messageId that fetches an Agent Message, parses JSX previews and artifacts, and renders them full-screen with a minimal toolbar (back-to-chat link + export). Also includes the official ai-elements jsx-preview component installed via npx ai-elements for future migration reference.
Add an "Open full screen" button to JSXPreviewRenderer and ArtifactRenderer (for jsx/chart types) that opens the message content in the new /huf/view/:messageId page in a new tab. Thread messageId (Agent Message doc name) from MessageContentWithArtifacts and ChatWindow through to the renderers.
Replace toReversed() with [...stack].reverse() (ES2023 not in lib). Add explicit type for map callback parameter (tag: string).
Parse and display full message content (text, JSX, web previews, artifacts) in the same order and structure as chat. Use MessageResponse, JSXPreviewRenderer, WebPreviewRenderer, and ArtifactRenderer. Show 'No content' only when message is empty. Omit messageId on view page so Open button is not shown.
…erlay content Wrap content in pt-10 in JSXPreviewRenderer and in ArtifactRenderer (jsx/chart case) so PNG, SVG, and Open buttons sit above the content.
Default view shows only JSX previews and jsx/chart artifacts. Use ?preview=full for full message. Move Full message / JSX only toggle to right-aligned toolbar next to Export PNG.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds JSX preview rendering in chat messages, along with artifact and web preview infrastructure.
Changes