💬 Quick Action Buttons for Case Agent - Discussion

Overview

Add WhatsApp-style quick action buttons to the case agent chat interface for better user experience when:

Sending banking alias - Add a copy button
Sharing social media URLs - Add quick action buttons to open/share on each platform

Current State

How Messages Are Currently Sent

Case Agent (toto-ai-hub/src/agents/CaseAgent.ts):
- Sends plain text messages via /api/case endpoint
- Returns: { success, message, metadata }
- Messages are just strings like:
  - "El alias bancario es: betoto.pet"
  - "Puedes compartir en Instagram: https://instagram.com/guardian"
Frontend (toto-app/src/components/cases/CaseChatModal.tsx):
- Receives messages as plain text
- Displays them in a chat bubble
- No interactive elements currently

Current Message Structure

interface ChatMessage {
  id: string;
  type: 'user' | 'system';
  message: string;  // Plain text
  timestamp: Date;
  metadata?: {
    agentType?: string;
    intent?: string;
  };
}

Proposed Solution

Option 1: Rich Message Format (Recommended)

Extend the message structure to support interactive elements:

interface ChatMessage {
  id: string;
  type: 'user' | 'system';
  message: string;
  timestamp: Date;
  metadata?: {
    agentType?: string;
    intent?: string;
    // NEW: Quick actions
    quickActions?: QuickAction[];
  };
}

interface QuickAction {
  type: 'copy' | 'open_url' | 'share';
  label: string;
  data: string; // The value to copy/URL to open
  icon?: string; // Optional icon name
}

Example Messages:

Alias with Copy Button:

{
  "message": "El alias bancario del guardián es:",
  "metadata": {
    "quickActions": [
      {
        "type": "copy",
        "label": "Copiar alias",
        "data": "betoto.pet",
        "icon": "copy"
      }
    ]
  }
}

Social Media URLs with Quick Actions:

{
  "message": "Puedes compartir este caso en:",
  "metadata": {
    "quickActions": [
      {
        "type": "open_url",
        "label": "Instagram",
        "data": "https://instagram.com/guardian",
        "icon": "instagram"
      },
      {
        "type": "open_url",
        "label": "Twitter",
        "data": "https://twitter.com/guardian",
        "icon": "twitter"
      },
      {
        "type": "open_url",
        "label": "Facebook",
        "data": "https://facebook.com/guardian",
        "icon": "facebook"
      }
    ]
  }
}

Option 2: Structured Message Types

Create specific message types for different content:

type MessageType = 
  | 'text'
  | 'alias' 
  | 'social_media_share'
  | 'link';

interface AliasMessage extends ChatMessage {
  type: 'system';
  messageType: 'alias';
  alias: string;
}

interface SocialMediaMessage extends ChatMessage {
  type: 'system';
  messageType: 'social_media_share';
  platforms: {
    instagram?: string;
    twitter?: string;
    facebook?: string;
  };
}

Implementation Considerations

Backend Changes (toto-ai-hub)

CaseAgent.ts - Detect when sending alias/social URLs:
- When alias is in response → add quickActions with copy button
- When social media URLs are in response → add quickActions for each platform

Response Format:

// In CaseAgent.processMessage()
const response = {
  success: true,
  message: "El alias es: betoto.pet",
  metadata: {
    quickActions: [
      { type: 'copy', label: 'Copiar', data: 'betoto.pet' }
    ]
  }
};

Frontend Changes (toto-app)

CaseChatModal.tsx:
- Render quick action buttons below system messages
- Handle button clicks:
  - Copy: Use Clipboard.setStringAsync() (Expo) or navigator.clipboard.writeText() (Web)
  - Open URL: Use Linking.openURL() (React Native) or window.open() (Web)
  - Share: Use native share dialog
Button Styling:
- WhatsApp-style: Rounded buttons, icon + text
- Position: Below message bubble
- Mobile-friendly: Touch targets ≥ 44px
Example Component:

{msg.metadata?.quickActions && (
  <View style={styles.quickActions}>
    {msg.metadata.quickActions.map((action, idx) => (
      <TouchableOpacity
        key={idx}
        onPress={() => handleQuickAction(action)}
        style={styles.quickActionButton}
      >
        <Icon name={action.icon} />
        <Text>{action.label}</Text>
      </TouchableOpacity>
    ))}
  </View>
)}

Decisions Made ✅

1. Detection Strategy ✅

Selected: Option A - Case Agent automatically detects alias/social URLs in response and adds quick actions
Frontend will parse message text to detect patterns and add buttons automatically

2. Button Behavior ✅

Minimal design - Clean, simple buttons
Transform on selection - When user clicks a button, it disappears and transforms into an actual user message
Example: Click "Copiar alias" → Button disappears → User message appears: "betoto.pet"

3. Copy Feedback

Copy feedback = Visual confirmation that copy action succeeded
Examples: Toast notification ("Alias copiado"), brief highlight, checkmark icon
Decision: To be determined during implementation

When user expresses sharing intent → Agent asks: "¿En qué plataforma quieres compartir?"
User responds with platform name → Agent sends URL for that specific platform
If user says "all" or "todas" → Show quick action buttons with all platform icons (Instagram, X/Twitter, Facebook)
Each button opens the specific platform URL

5. Implementation Order ✅

Phase 1: Alias copy button (start here)
Phase 2: Social media quick actions (after alias is working)

Design Mockup Ideas

Alias Message

┌─────────────────────────────┐
│ El alias bancario es:       │
│ betoto.pet                  │
└─────────────────────────────┘
    [📋 Copiar alias]

┌─────────────────────────────┐
│ Comparte este caso en:      │
└─────────────────────────────┘
[📷 Instagram] [🐦 Twitter] [👤 Facebook]

Next Steps

Decide on approach (Option 1 vs Option 2)
Define exact button styles (colors, icons, sizes)
Implement backend changes (CaseAgent quick action detection)
Implement frontend changes (Button rendering + handlers)
Test on mobile and web
Add analytics (track button clicks)

Benefits

✅ Better UX - Users can copy/open with one tap
✅ Reduces friction - No need to manually select and copy text
✅ Mobile-friendly - Large touch targets
✅ Familiar pattern - WhatsApp-style is well-known
✅ Actionable - Makes it clear what users can do

Potential Challenges

⚠️ Backend needs to detect when to add quick actions
⚠️ Frontend needs to handle both old (plain text) and new (with actions) messages
⚠️ Cross-platform clipboard/URL handling differences
⚠️ Message parsing if we go with Option C

Your Thoughts?

What do you think about:

Which option do you prefer? (Rich metadata vs Structured types)
Should we detect automatically or be explicit?
Any specific design preferences?
Should we start with alias copy button first, then add social media?

Overview​

Current State​

How Messages Are Currently Sent​

Current Message Structure​

Proposed Solution​

Option 1: Rich Message Format (Recommended)​

Option 2: Structured Message Types​

Implementation Considerations​

Backend Changes (toto-ai-hub)​

Frontend Changes (toto-app)​

Decisions Made ✅​

1. Detection Strategy ✅​

2. Button Behavior ✅​

3. Copy Feedback​

4. Social Media Flow ✅​

5. Implementation Order ✅​

Design Mockup Ideas​

Alias Message​

Social Media Message​

Next Steps​

Benefits​

Potential Challenges​

Your Thoughts?​