Skip to content

Conversation

@NakataCode
Copy link
Contributor

🚀 Enhanced AI Chat with Interactive Viewers and Improved UX

📋 Summary

This PR significantly enhances the AI chat interface with interactive JSON/code viewers, improved context awareness, and better user experience. The AI assistant now has full page visibility and provides rich, interactive responses.


✨ Features Added

🎨 Interactive Content Display

  • Interactive JSON Viewer

    • Expandable/collapsible tree structure with ▼/▶ triangles
    • Syntax-highlighted values (strings, numbers, booleans, null)
    • Formatted with proper indentation and structure
  • Enhanced Code Blocks

    • Rendered as styled DOM elements (not plain <pre><code>)
    • Language badges (xml, javascript, etc.) displayed in top-right corner
    • Line-by-line rendering for better readability
    • Fixed strikethrough/crossed-out text rendering issues

🧠 AI Context & Intelligence

  • Full Page Awareness

    • Expanded context includes full bindings data (not just previews)
    • Expanded context includes full aggregations data
    • Control selection automatically updates AI context
  • Smart Session Management

    • Session auto-initializes when Gemini Nano model is ready
    • No manual session creation needed

💎 UX Improvements

  • Token Counter

    • Always visible with current usage (tokens used / quota)
    • Shows percentage used
    • Warning state at 90%+ usage with red background
    • Automatic warning message at 70% usage
  • Custom Confirmation Dialog

    • In-panel modal for "Clear History" action (not browser popup)
    • Centered in AI chat with backdrop overlay
    • Smooth slide-in animation
    • Can dismiss by clicking overlay or Cancel button
  • Context Indicator

    • Shows currently selected control type and ID
    • Clear button (×) to remove context
    • Updates automatically on control selection

@NakataCode NakataCode requested a review from kgogov February 4, 2026 15:30
@kgogov
Copy link

kgogov commented Feb 11, 2026

Hello @dobrinyonkov,

Together with @NakataCode, we reviewed the functionality.

Overall, the AI functionality works quite well, but we noticed a few things that I will outline below:

  • Before downloading the AI model, the text fields as well as the “SEND” button should be disabled.
  • Idea: we could add a “Copy response” button after the response is generated.
  • Idea: we could add a “Copy” button in the top-right corner of the code snippets (HTML, XML, JavaScript, CSS, JSON etc.).
  • Maybe: We could consider renaming the “AI” tab to something more descriptive.
  • We could improve the message loading experience by adding a clearer busy/loading indicator state.
  • Important: please verify exactly which model is being downloaded when running in the Edge environment and adjust the message if necessary.

Additionally, I performed a full review of all changes and attached an AI analysis generated with Claude Code using the Opus 4.5 model. There are some interesting findings that are worth reviewing to determine whether they are relevant.

CODE_REVIEW_ANALYSIS.md
CODE_REVIEW_PLAN.md

That’s all from me for now.

Screenshot 2026-02-11 at 15 12 05
Screenshot 2026-02-11 at 15 11 46
Screenshot 2026-02-11 at 15 29 21

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants