AI Response Display Modes

Customize how AI responses are displayed to match your preference and workflow.

Overview

MineAI gives you control over how AI responses appear on your screen. Choose between three display modes to optimize your chat experience:

⚡
Streaming Mode: See responses appear gradually with a typing animation
📄
Instant Mode: Display complete responses immediately
🔄
Auto Mode: Smart adaptive mode - instant for short, streaming for long responses

Response Modes Comparison

Mode	Icon	Behavior	Best For
Streaming	⚡	Always displays responses with gradual typing animation	Users who enjoy interactive, real-time feedback
Instant	📄	Always displays complete responses immediately	Power users who want instant complete views
Auto	🔄	Instant for short (<500 chars), streaming for long (≥500 chars)	Best of both worlds - optimal for all response lengths

How It Works

Response Flow

Auto Mode Smart Logic

Auto mode intelligently adapts to response length for the best user experience:

✓

Short responses (<500 characters):

Display instantly for quick answers

✓

Long responses (≥500 characters):

Use streaming animation for better readability

🎯

User Control

Logged-in users can customize their AI interaction experience to match their preference

💾

Persistent

Your selected mode is saved to your account and synced across all devices and sessions

🔒

Access Control

Toggle is only visible for logged-in users. Guest users use optimized streaming by default

How to Use

locate the Toggle

Find the Response Mode Toggle near the send button in the chat interface (only visible when logged in)

Select Your Preferred Mode

Click on Streaming (⚡), Instant (📄), or Auto (🔄) to change the display mode

Start Chatting

Send messages and experience responses in your selected mode. The preference is automatically saved!

Alternative Access

You can also change the response mode from Settings → Preferences → AI Response Mode section

Performance Impact

Metric	Streaming	Instant	Auto
Time to First Character	~2-3 seconds	~1-2 seconds	Varies (1-3s)
Animation Overhead	Minimal (~10ms)	None (0ms)	Conditional
User Experience	⭐ Engaging	⚡ Fast	🎯 Optimal

👨‍💻Developer Documentation

Technical architecture and implementation details for developers

System Architecture

🔧Component Architecture

ResponseModeToggle.jsx

• Framer Motion animations
• Clerk useUser() hook
• POST to /api/user/preferences
• Toast notifications

PromptBox.jsx

• useState: responseMode
• useEffect: Load preference on mount
• Function: streamAIResponse()
• Chunk size: 15 chars, Interval: 30ms

⚡API Endpoints

GET /api/user/preferences

• Returns: {success, preferences: {responseMode}}
• Auth: Clerk userId required
• Source: MongoDB User collection

POST /api/user/preferences

• Body: {responseMode: "streaming|instant|auto"}
• Validation: Enum check
• Update: MongoDB $set operation

MongoDB Schema

// User Model
{
  userId: String,          // Clerk user ID
  preferences: {
    theme: String,         // 'light' | 'dark' | 'system'
    language: String,      // Default: 'en'
    responseMode: {
      type: String,
      enum: ['streaming', 'instant', 'auto'],
      default: 'auto'      // Default value
    }
  },
  createdAt: Date,
  updatedAt: Date
}