Improve Image Generation UX

[haiphucnguyen]

Problem Statement

Currently, the image generation UI treats all providers the same way—users must toggle an explicit "Image Mode" button. However, this doesn't account for different provider capabilities:

1. Multi-modal providers (Gemini, Claude with vision, GPT-4o): Can generate images natively within chat mode

   • Users expect to ask "generate an image of X" directly in chat
   • The explicit toggle button creates unnecessary friction
   • Users are confused whether they need to click the button or just ask

2. Explicit image providers (DALL-E 3, standalone image models): Require dedicated image mode

   • These providers have separate image generation APIs
   • Users must switch modes to generate images
   • The toggle button is essential for distinguishing intent

3. OpenAI-compatible / Custom endpoints: Unknown capabilities

   • Could be multi-modal (like Gemini), explicit-mode only, or either
   • We cannot detect this ahead of time
   • Should default to explicit toggle mode (safer assumption)

4. Current UX: No distinction between these patterns

   • Image button appears equally for all providers
   • No guidance on which providers support which mode
   • Users don't know if they can ask directly or must toggle

Proposed Solution

Implement provider-aware image generation UX with two distinct flows:

Flow A: Multi-Modal Providers (Gemini, Claude, GPT-4o, etc.)

When user is on a multi-modal provider:

1. Contextual Guidance Banner (first session or dismissible):

2. • Appears once per provider, can be dismissed
   • Educates users they don't need a separate mode

3. Keyword Detection & Smart Hints:

   • Detect phrases: "generate image", "create a picture", "draw", "paint", "visualize"
   • Show inline hint: "✨ You can ask me to generate images directly!"
   • Does NOT force image mode toggle

4. Image Button Behavior:

   • Button remains visible but de-emphasized (gray, lower opacity)
   • Optional: Tooltip explains "For text-based generation, just ask in chat"
   • If clicked, behaves as "attachment mode" or is disabled

Flow B: Explicit Image Providers (DALL-E, etc.)

When user is on an explicit image provider:

1. No banner — image mode is the primary/only way to generate

2. Emphasis on Image Button:

   • Button is prominently visible and highlighted
   • Tooltip: "Switch to Image Generation Mode to create images"
   • Required step before generation

3. Keyword Detection (Optional):

   • Suggest toggling image mode when user types generation keywords
   • Highlight the image button with subtle animation

Flow C: Unknown/Custom Providers (OpenAI-compatible endpoints)

When user is on OpenAI-compatible or custom endpoint:

1. Default to explicit toggle mode (safer assumption)

   • Image button is prominent and required
   • Same UX as Flow B (explicit providers)

2. Reasoning:

   • We cannot detect provider capabilities at runtime
   • Explicit toggle is safest default (won't accidentally try wrong generation method)
   • If user's endpoint is multi-modal (like Gemini), they can ignore the button and ask directly
   • No banner shown (we're uncertain about provider)

3. Future enhancement (optional):

   • Could add user preference: "This endpoint is multi-modal, don't require toggle"
   • Stored in provider settings
   • Allows users to opt into multi-modal UX for compatible custom endpoints

Detection: Provider Capabilities

Add provider capability detection:

Extend the existing provider model config to include:

enum class ImageGenerationMode {
    MULTI_MODAL,      // Can generate images in chat (Gemini, Claude, GPT-4o)
    EXPLICIT_TOGGLE,  // Requires mode toggle (DALL-E, Midjourney)
    UNKNOWN           // Cannot determine (OpenAI-compatible, custom endpoints)
}

[haiphucnguyen]

It's done via #529