📨 Construindo o Inbox Unificado (InboxAI)

📐 Wireframe — proporções e função

📁 Estrutura de pastas

app/
└── inbox/
    └── page.tsx                  # rota /inbox
components/
└── inbox/
    ├── ConversationList.tsx      # coluna esquerda
    ├── ConversationItem.tsx      # cada linha da lista
    ├── ChannelBadge.tsx          # 🟢 IG ✉️ 💬
    ├── MessageThread.tsx         # coluna central
    ├── MessageBubble.tsx         # cada balão
    ├── MessageComposer.tsx       # textarea + botões
    └── ContactPanel.tsx          # coluna direita
lib/
├── mock-conversations.ts         # dados fake
└── types.ts                      # Conversation, Message, Contact
store/
└── inbox-store.ts                # Zustand

⚙️ Snippet — ConversationItem

type Props = {
  conversation: Conversation;
  isActive: boolean;
  onClick: () => void;
};

export function ConversationItem({ conversation, isActive, onClick }: Props) {
  const { contact, lastMessage, channel, unreadCount } = conversation;
  return (
    <button
      onClick={onClick}
      className={`w-full flex items-start gap-3 p-3 rounded-lg
        ${isActive ? 'bg-purple-500/15' : 'hover:bg-neutral-800/50'}`}
    >
      <Avatar src={contact.avatar} alt={contact.name} />
      <div className="flex-1 min-w-0 text-left">
        <div className="flex items-center gap-2">
          <span className="font-medium truncate">{contact.name}</span>
          <ChannelBadge channel={channel} />
        </div>
        <p className="text-xs text-neutral-400 truncate">{lastMessage.preview}</p>
      </div>
      {unreadCount > 0 && (
        <span className="bg-purple-500 text-white text-xs px-2 py-0.5 rounded-full">
          {unreadCount}
        </span>
      )}
    </button>
  );
}

📐 Schema sugerido (TypeScript)

// lib/types.ts
export type Channel = 'whatsapp' | 'instagram' | 'email' | 'web';
export type ConversationStatus = 'open' | 'pending' | 'resolved';

export type Contact = {
  id: string;
  name: string;
  avatar?: string;
  phone?: string;
  email?: string;
  tags: string[];
};

export type Message = {
  id: string;
  conversationId: string;
  authorId: string;            // 'agent' | contactId | 'ai'
  body: string;
  createdAt: number;           // epoch ms
  readAt?: number;
};

export type Conversation = {
  id: string;
  contactId: string;
  channel: Channel;
  status: ConversationStatus;
  assignedTo?: string;         // userId do operador
  lastMessage: { preview: string; at: number };
  unreadCount: number;
  createdAt: number;
};

⏲️ Mock com setInterval

// hooks/useFakeIncomingMessages.ts
import { useEffect } from 'react';
import { useInboxStore } from '@/store/inbox-store';
import { generateFakeMessage } from '@/lib/fake-data';

export function useFakeIncomingMessages(intervalMs = 8000) {
  const addMessage = useInboxStore((s) => s.addMessage);

  useEffect(() => {
    const id = setInterval(() => {
      const msg = generateFakeMessage();
      addMessage(msg);
      // notification, scroll, badge — tudo reage automático
    }, intervalMs);
    return () => clearInterval(id);
  }, [addMessage, intervalMs]);
}

🎨 Tabela de canais

⚙️ Snippet — ChannelBadge

const CHANNELS = {
  whatsapp:  { emoji: '🟢', label: 'WhatsApp',  className: 'bg-green-500/15 text-green-400' },
  instagram: { emoji: '📷', label: 'Instagram', className: 'bg-pink-500/15 text-pink-400' },
  email:     { emoji: '✉️', label: 'Email',     className: 'bg-blue-500/15 text-blue-400' },
  web:       { emoji: '💬', label: 'Web Chat',  className: 'bg-purple-500/15 text-purple-400' },
} as const;

export function ChannelBadge({ channel }: { channel: Channel }) {
  const c = CHANNELS[channel];
  return (
    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs ${c.className}`}>
      <span>{c.emoji}</span>
      <span>{c.label}</span>
    </span>
  );
}

⚙️ Snippet — listener global

// hooks/useInboxKeybindings.ts
useEffect(() => {
  const handler = (e: KeyboardEvent) => {
    // não dispara se tá digitando em input/textarea
    if (e.target instanceof HTMLElement &&
        ['INPUT', 'TEXTAREA'].includes(e.target.tagName)) return;

    if (e.key === 'j') selectNext();
    if (e.key === 'k') selectPrev();
    if (e.key === 'r') focusComposer();
    if (e.key === 'e') resolveActive();
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') openCommandPalette();
  };
  window.addEventListener('keydown', handler);
  return () => window.removeEventListener('keydown', handler);
}, []);