elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/chats/index.tsx

@@ -0,0 +1,981 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react"
+import { useQueryClient } from "@tanstack/react-query"
+import { api } from "@/lib/api"
+import { useTranslation } from "react-i18next"
+import { format, formatDistanceToNow } from "date-fns"
+import { tr } from "date-fns/locale"
+import { TZDate } from "@date-fns/tz"
+import { toast } from "sonner"
+import {
+  Search,
+  Send,
+  ArrowDownLeft,
+  ArrowUpRight,
+  CheckCircle,
+  Bot,
+  User,
+  Phone,
+  MessageSquare,
+  Loader2,
+  Hash,
+  Paperclip,
+} from "lucide-react"
+
+import {
+  useChats,
+  useChatMessages,
+  useSendMessage,
+  useTakeover,
+  useRelease,
+  useResolve,
+  useAssignChat,
+  useUnassignChat,
+  useConnectionStatus,
+} from "@/lib/hooks/use-chats"
+import { useUsers } from "@/lib/hooks/use-users"
+import type { Chat, ChatMessage } from "@/lib/hooks/use-chats"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useClinicTimezone } from "@/lib/hooks/use-clinics"
+import { cn } from "@/lib/utils"
+
+// ─── Helpers ────────────────────────────────────────────────
+
+function useMediaUrl(msgId: string | null) {
+  const [url, setUrl] = useState<string | null>(null)
+  useEffect(() => {
+    if (!msgId) return
+    let revoked = false
+    api.get(`/whatsapp/media/${msgId}`, { responseType: "blob" })
+      .then(({ data }) => {
+        if (!revoked) setUrl(URL.createObjectURL(data))
+      })
+      .catch(() => {})
+    return () => { revoked = true; if (url) URL.revokeObjectURL(url) }
+  }, [msgId])
+  return url
+}
+
+function safeDate(val: string | null | undefined): Date | null {
+  if (!val) return null
+  const d = new Date(val)
+  return isNaN(d.getTime()) ? null : d
+}
+
+function InstagramIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={cn("text-pink-500", className)}>
+      <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+      <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
+    </svg>
+  )
+}
+
+function ChannelIcon({ channel, className }: { channel: string; className?: string }) {
+  if (channel === "instagram") {
+    return <InstagramIcon className={className} />
+  }
+  // WhatsApp SVG icon
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={cn("text-green-500", className)}>
+      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
+    </svg>
+  )
+}
+
+function channelColor(channel: string) {
+  return channel === "instagram" ? "bg-pink-500/10" : "bg-green-500/10"
+}
+
+// ─── Main Page ───────────────────────────────────────────────
+
+export default function ChatsPage() {
+  const { t } = useTranslation()
+  const [search, setSearch] = useState("")
+  const [statusFilter, setStatusFilter] = useState("all")
+  const [channelFilter, setChannelFilter] = useState("all")
+  const [selectedChatId, setSelectedChatId] = useState<string | null>(null)
+
+  const { data, isLoading } = useChats({
+    search: search || undefined,
+    status: statusFilter !== "all" ? statusFilter : undefined,
+    limit: 50,
+  })
+
+  const { data: connections } = useConnectionStatus()
+
+  // Build receiver ID → label lookup from connections
+  const receiverLabels = useMemo(() => {
+    const map: Record<string, string> = {}
+    for (const c of connections ?? []) {
+      if (c.type === "whatsapp" && c.phoneNumberId) map[c.phoneNumberId] = c.label || c.phone || ""
+      if (c.type === "instagram" && c.instagramPageId) map[c.instagramPageId] = c.label || c.phone || ""
+    }
+    return map
+  }, [connections])
+
+  const allChats = data?.data ?? []
+  const chats = channelFilter === "all"
+    ? allChats
+    : allChats.filter((c) => c.chat_channel === channelFilter)
+  const selectedChat = chats.find((c) => c.chat_id === selectedChatId) ?? null
+
+  return (
+    <div className="flex h-full -m-4 sm:-m-6">
+      {/* Sidebar — Chat List */}
+      <div className="w-80 border-r flex flex-col bg-card shrink-0">
+        {/* Filters */}
+        <div className="p-3 space-y-2 border-b">
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              className="pl-8 h-8"
+              placeholder={t("chats.searchChats")}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+          <div className="flex gap-1.5">
+            {/* Channel tabs */}
+            <div className="flex rounded-lg border overflow-hidden flex-1">
+              {(["all", "whatsapp", "instagram"] as const).map((ch) => (
+                <button
+                  key={ch}
+                  onClick={() => setChannelFilter(ch)}
+                  className={cn(
+                    "flex-1 flex items-center justify-center gap-1 py-1 text-[10px] font-medium transition-colors",
+                    channelFilter === ch
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-background hover:bg-muted text-muted-foreground",
+                    ch !== "all" && "border-l",
+                  )}
+                >
+                  {ch === "all" ? t("chats.allChats") : ch === "whatsapp" ? (
+                    <><ChannelIcon channel="whatsapp" className="w-3 h-3" /> WA</>
+                  ) : (
+                    <><InstagramIcon className="w-3 h-3" /> IG</>
+                  )}
+                </button>
+              ))}
+            </div>
+            {/* Status filter */}
+            <Select value={statusFilter} onValueChange={setStatusFilter}>
+              <SelectTrigger className="h-7 text-[10px] w-[90px]">
+                <SelectValue>
+                  {statusFilter === "all" ? t("common.all") : t(`chats.status_${statusFilter}`)}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">{t("common.all")}</SelectItem>
+                <SelectItem value="active">{t("chats.status_active")}</SelectItem>
+                <SelectItem value="waiting">{t("chats.status_waiting")}</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {/* Chat list */}
+        <ScrollArea className="flex-1">
+          {isLoading ? (
+            <div className="space-y-1 p-2">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <Skeleton key={i} className="h-16 w-full rounded-lg" />
+              ))}
+            </div>
+          ) : chats.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-16 text-center px-4">
+              <MessageSquare className="w-8 h-8 text-muted-foreground/40 mb-2" />
+              <p className="text-sm text-muted-foreground">{t("chats.noChats")}</p>
+            </div>
+          ) : (
+            <div className="p-1">
+              {chats.map((chat) => (
+                <ChatListItem
+                  key={chat.chat_id}
+                  chat={chat}
+                  isActive={selectedChatId === chat.chat_id}
+                  onClick={() => setSelectedChatId(chat.chat_id)}
+                  receiverLabels={receiverLabels}
+                />
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+      </div>
+
+      {/* Main Area */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {selectedChat ? (
+          <ChatView chat={selectedChat} receiverLabels={receiverLabels} />
+        ) : (
+          <div className="flex-1 flex items-center justify-center">
+            <div className="text-center space-y-2">
+              <MessageSquare className="w-12 h-12 text-muted-foreground/30 mx-auto" />
+              <p className="text-sm text-muted-foreground">{t("chats.selectChat")}</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ─── Chat List Item ──────────────────────────────────────────
+
+function ChatListItem({
+  chat,
+  isActive,
+  onClick,
+  receiverLabels,
+}: {
+  chat: Chat
+  isActive: boolean
+  onClick: () => void
+  receiverLabels: Record<string, string>
+}) {
+  const { t } = useTranslation()
+  const session = chat.sessions[0]
+  const name = chat.patient?.patient_display_name || chat.chat_contact_name || chat.chat_contact_phone || "?"
+  const assignee = chat.assigned_to
+  const lastDate = safeDate(chat.chat_last_message_at)
+  const receiverId = chat.chat_external_id?.split("@")[1] || ""
+  const receiverLabel = chat.phone?.phone_label || chat.phone?.phone_number || receiverLabels[receiverId] || ""
+
+  return (
+    <button
+      className={cn(
+        "w-full text-left px-3 py-2.5 rounded-lg transition-colors",
+        isActive ? "bg-primary/10" : "hover:bg-muted/50",
+      )}
+      onClick={onClick}
+    >
+      <div className="flex items-start gap-2.5">
+        {/* Channel-colored avatar */}
+        <div className={cn(
+          "w-9 h-9 rounded-full flex items-center justify-center shrink-0 mt-0.5",
+          channelColor(chat.chat_channel),
+        )}>
+          <ChannelIcon channel={chat.chat_channel} className="w-4 h-4" />
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between gap-1">
+            <span className="text-sm font-medium truncate">{name}</span>
+            <span className="text-[10px] text-muted-foreground shrink-0">
+              {lastDate ? formatDistanceToNow(lastDate, { addSuffix: true, locale: tr }) : ""}
+            </span>
+          </div>
+          <p className="text-xs text-muted-foreground truncate mt-0.5">
+            {chat.chat_last_message_preview || chat.chat_contact_phone}
+          </p>
+          <div className="flex items-center gap-1 mt-1">
+            {session && (
+              <Badge variant="outline" className={cn(
+                "text-[9px] px-1.5 py-0 h-4",
+                session.session_status === "active" && !session.session_taken_over_by_id && "border-blue-500/30 text-blue-600",
+                session.session_status === "active" && session.session_taken_over_by_id && "border-orange-500/30 text-orange-600",
+                session.session_status === "waiting" && "border-yellow-500/30 text-yellow-600",
+              )}>
+                {session.session_status === "active"
+                  ? session.session_taken_over_by_id ? t("chats.human") : t("chats.ai")
+                  : t(`chats.status_${session.session_status}`)}
+              </Badge>
+            )}
+            {assignee && (
+              <Badge variant="secondary" className="text-[9px] px-1.5 py-0 h-4">
+                {assignee.user_first_name}
+              </Badge>
+            )}
+            {receiverLabel && (
+              <Badge variant="outline" className="text-[9px] px-1.5 py-0 h-4 ml-auto font-mono">
+                {receiverLabel}
+              </Badge>
+            )}
+          </div>
+        </div>
+      </div>
+    </button>
+  )
+}
+
+// ─── Chat View ───────────────────────────────────────────────
+
+function ChatView({ chat, receiverLabels }: { chat: Chat; receiverLabels: Record<string, string> }) {
+  const { t } = useTranslation()
+  const clinicTZ = useClinicTimezone()
+  const { data: messages, isLoading } = useChatMessages(chat.chat_id)
+  const sendMessage = useSendMessage()
+  const takeover = useTakeover()
+  const release = useRelease()
+  const resolve = useResolve()
+  const assignChat = useAssignChat()
+  const unassignChat = useUnassignChat()
+  const { data: allUsers } = useUsers()
+  const [text, setText] = useState("")
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+
+  const session = chat.sessions[0]
+  const isTakenOver = !!session?.session_taken_over_by_id
+  const name = chat.patient?.patient_display_name || chat.chat_contact_name || chat.chat_contact_phone || "?"
+  const staffUsers = (allUsers ?? []).filter((u) => u.isActive)
+  const receiverId = chat.chat_external_id?.split("@")[1] || ""
+  const receiverLabel = chat.phone?.phone_label || chat.phone?.phone_number || receiverLabels[receiverId] || ""
+
+  useEffect(() => {
+    const el = messagesContainerRef.current
+    if (el) el.scrollTop = el.scrollHeight
+  }, [messages])
+
+  const handleSend = useCallback(() => {
+    if (!text.trim()) return
+    const msg = text.trim()
+    setText("") // Clear immediately
+    sendMessage.mutate(
+      { chatId: chat.chat_id, text: msg },
+      { onError: () => toast.error(t("chats.sendError")) },
+    )
+  }, [text, chat.chat_id, sendMessage, t])
+
+  const handleAssign = async (userId: string) => {
+    try {
+      if (userId === "unassigned") {
+        await unassignChat.mutateAsync(chat.chat_id)
+        toast.success(t("chats.chatUnassigned"))
+      } else {
+        await assignChat.mutateAsync({ chatId: chat.chat_id, userId })
+        toast.success(t("chats.chatAssigned"))
+      }
+    } catch {
+      toast.error(t("chats.assignError"))
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Header */}
+      <div className="border-b flex items-center justify-between px-4 py-2.5 shrink-0 bg-card">
+        <div className="flex items-center gap-3 min-w-0">
+          <div className={cn(
+            "w-10 h-10 rounded-full flex items-center justify-center shrink-0",
+            channelColor(chat.chat_channel),
+          )}>
+            <ChannelIcon channel={chat.chat_channel} className="w-5 h-5" />
+          </div>
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <p className="text-sm font-medium truncate">{name}</p>
+              {chat.clinic && (
+                <Badge variant="outline" className="text-[9px] px-1.5 py-0 h-4 shrink-0">
+                  {chat.clinic.clinic_name}
+                </Badge>
+              )}
+            </div>
+            <div className="flex items-center gap-3 text-xs text-muted-foreground">
+              <span className="flex items-center gap-1">
+                {chat.chat_channel === "instagram"
+                  ? <InstagramIcon className="w-3 h-3" />
+                  : <Phone className="w-3 h-3" />}
+                {chat.chat_contact_phone}
+              </span>
+              {receiverLabel && (
+                <span className="flex items-center gap-1 font-mono text-[10px]">
+                  → {receiverLabel}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-1.5">
+          {/* Assign */}
+          <Select
+            value={chat.chat_assigned_to_id || "unassigned"}
+            onValueChange={handleAssign}
+          >
+            <SelectTrigger className="h-8 w-[130px] text-xs">
+              <SelectValue>
+                {chat.assigned_to
+                  ? `${chat.assigned_to.user_first_name} ${chat.assigned_to.user_last_name}`
+                  : t("chats.unassigned_label")}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="unassigned">{t("chats.unassigned_label")}</SelectItem>
+              {staffUsers.map((u) => (
+                <SelectItem key={u.id} value={u.id}>
+                  {u.firstName} {u.lastName}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          {session?.session_status === "active" && !isTakenOver && (
+            <Button size="sm" variant="outline" className="h-8" onClick={() => takeover.mutateAsync(chat.chat_id).then(() => toast.success(t("chats.takenOver")))}>
+              <ArrowDownLeft className="w-3.5 h-3.5 mr-1" />
+              {t("chats.takeover")}
+            </Button>
+          )}
+          {session?.session_status === "active" && isTakenOver && (
+            <Button size="sm" variant="outline" className="h-8" onClick={() => release.mutateAsync(chat.chat_id).then(() => toast.success(t("chats.released")))}>
+              <ArrowUpRight className="w-3.5 h-3.5 mr-1" />
+              {t("chats.release")}
+            </Button>
+          )}
+          {session && session.session_status !== "resolved" && (
+            <Button size="sm" variant="ghost" className="h-8" onClick={() => resolve.mutateAsync(chat.chat_id).then(() => toast.success(t("chats.resolved_msg")))}>
+              <CheckCircle className="w-3.5 h-3.5 mr-1" />
+              {t("chats.resolve")}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Messages */}
+      <div ref={messagesContainerRef} className="flex-1 overflow-y-auto px-4 py-3 min-h-0">
+        {isLoading ? (
+          <div className="space-y-3">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <Skeleton key={i} className={`h-10 ${i % 2 === 0 ? "w-2/3" : "w-1/2 ml-auto"} rounded-xl`} />
+            ))}
+          </div>
+        ) : !messages?.length ? (
+          <div className="flex items-center justify-center h-full">
+            <p className="text-sm text-muted-foreground">{t("chats.noMessages")}</p>
+          </div>
+        ) : (
+          <div className="space-y-1.5">
+            {messages.map((msg) => (
+              <MessageBubble key={msg.id} message={msg} tz={clinicTZ} channel={chat.chat_channel} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Input */}
+      {(!session || session.session_status !== "resolved") && (
+        <div className="border-t p-3 flex items-center gap-2 bg-card shrink-0">
+          {/* <FileAttachButton chatId={chat.chat_id} channel={chat.chat_channel} /> */}
+          <Input
+            className="flex-1"
+            placeholder={t("chats.typeMessage")}
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && handleSend()}
+          />
+          <Button size="icon" className="shrink-0" onClick={handleSend} disabled={!text.trim()}>
+            <Send className="w-4 h-4" />
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── Message Bubble ──────────────────────────────────────────
+
+const MEDIA_LABELS: Record<string, string> = {
+  image: "📷 Fotoğraf",
+  video: "🎥 Video",
+  audio: "🎵 Ses",
+  voice: "🎤 Sesli mesaj",
+  document: "📎 Belge",
+  sticker: "🏷️ Sticker",
+  location: "📍 Konum",
+  contacts: "👤 Kişi",
+  reaction: "",
+  unreaction: "",
+  button_reply: "🔘",
+  list_reply: "📋",
+  button: "🔘",
+  order: "🛒 Sipariş",
+  view_once: "🔒 Tek seferlik",
+  unsupported: "🔒 Desteklenmeyen",
+  story_mention: "📖 Hikayede bahsetti",
+  story_reply: "💬 Hikayeye yanıt",
+  share: "🔗 Paylaşım",
+  reel: "🎬 Reels",
+  ig_reel: "🎬 Reels",
+  quick_reply: "⚡",
+  postback: "📌",
+}
+
+function MessageBubble({ message: msg, tz, channel }: { message: ChatMessage; tz: string; channel: string }) {
+  const isContact = msg.sender === "contact"
+  const isAI = msg.sender === "ai"
+  const isSystem = msg.sender === "system"
+  const date = safeDate(msg.createdAt)
+  const mt = msg.mediaType || ""
+
+  // System messages — centered pill
+  if (isSystem || mt === "system") {
+    return (
+      <div className="flex justify-center my-2">
+        <span className="text-[10px] text-muted-foreground bg-muted/50 rounded-full px-3 py-0.5">
+          {msg.text}
+        </span>
+      </div>
+    )
+  }
+
+  // Reactions — small inline
+  if (mt === "reaction") {
+    return (
+      <div className={cn("flex", isContact ? "justify-start" : "justify-end")}>
+        <div className="text-xl px-1" title="Tepki">
+          {msg.metadata?.emoji || msg.text || "❤️"}
+        </div>
+      </div>
+    )
+  }
+
+  // Unreaction — skip display
+  if (mt === "unreaction") return null
+
+  // Unsupported / view-once / deleted — can't display
+  if (mt === "unsupported" || mt === "view_once") {
+    return (
+      <div className={cn("flex", isContact ? "justify-start" : "justify-end")}>
+        <div className="rounded-2xl px-3.5 py-2 text-sm bg-muted/50 border border-dashed rounded-bl-sm">
+          <p className="text-xs text-muted-foreground italic flex items-center gap-1.5">
+            <span>🔒</span>
+            {msg.metadata?.is_deleted
+              ? "Bu mesaj silindi"
+              : msg.metadata?.original_type
+                ? `Tek seferlik ${msg.metadata.original_type === "video" ? "video" : "fotoğraf"}`
+                : "Desteklenmeyen mesaj türü"}
+          </p>
+          <p className="text-[10px] text-muted-foreground/60 mt-0.5">
+            Bu içerik yalnızca telefondan görüntülenebilir
+          </p>
+          {date && (
+            <p className="text-[10px] text-muted-foreground mt-1 text-right">
+              {format(new TZDate(date, tz || "UTC"), "HH:mm")}
+            </p>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  const mediaLabel = MEDIA_LABELS[mt] || ""
+  const hasMedia = mt && mt !== "text" && mt !== "transcribedAudio" && mt !== "reaction"
+  const hasVisualMedia = mt === "image" || mt === "video" || mt === "sticker" || mt === "reel" || mt === "story_mention" || mt === "ig_reel"
+  // Instagram stores direct URLs in mediaKey; WhatsApp stores media IDs that need proxy
+  const isDirectUrl = msg.mediaKey?.startsWith("http") || msg.mediaKey?.startsWith("blob:")
+  const proxyMediaUrl = useMediaUrl(hasVisualMedia && !isDirectUrl ? msg.id : null)
+  const mediaUrl = isDirectUrl ? msg.mediaKey : proxyMediaUrl
+
+  return (
+    <div className={cn("flex", isContact ? "justify-start" : "justify-end")}>
+      <div
+        className={cn(
+          "max-w-[75%] rounded-2xl px-3.5 py-2 text-sm",
+          isContact
+            ? "bg-muted text-foreground rounded-bl-sm"
+            : isAI
+              ? "bg-blue-500/10 text-foreground border border-blue-500/20 rounded-br-sm"
+              : "bg-primary text-primary-foreground rounded-br-sm",
+        )}
+      >
+        {isAI && (
+          <div className="flex items-center gap-1 mb-0.5">
+            <Bot className="w-3 h-3" />
+            <span className="text-[10px] font-medium opacity-70">AI</span>
+          </div>
+        )}
+        {!isContact && !isAI && msg.senderName && (
+          <div className="flex items-center gap-1 mb-0.5">
+            <User className="w-3 h-3" />
+            <span className="text-[10px] font-medium opacity-70">{msg.senderName}</span>
+          </div>
+        )}
+
+        {/* Ad context banner */}
+        {msg.adContext && (msg.adContext.headline || msg.adContext.source_type || msg.adContext.body) && (
+          <div className="rounded-lg bg-amber-500/10 border border-amber-500/20 px-2.5 py-1.5 mb-1.5">
+            <div className="flex items-center gap-1.5 mb-0.5">
+              <span className="text-[10px]">📢</span>
+              <span className="text-[10px] font-medium text-amber-700 dark:text-amber-400">
+                {msg.adContext.source_type === "ad" ? "Reklam tıklaması" : "Reklam üzerinden geldi"}
+              </span>
+            </div>
+            {msg.adContext.headline && (
+              <p className="text-xs font-medium">{msg.adContext.headline}</p>
+            )}
+            {msg.adContext.body && (
+              <p className="text-[10px] text-muted-foreground">{msg.adContext.body}</p>
+            )}
+            {msg.adContext.source_url && (
+              <a
+                href={msg.adContext.source_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-[10px] text-primary underline mt-0.5 block"
+              >
+                Reklamı gör →
+              </a>
+            )}
+          </div>
+        )}
+
+        {/* Visual media (image/video/sticker) */}
+        {mediaUrl && (
+          <div className={cn("mb-1.5", mt === "sticker" ? "w-24 h-24" : "max-w-[240px]")}>
+            {(mt === "video" || mt === "reel" || mt === "ig_reel") ? (
+              <video
+                src={mediaUrl}
+                controls
+                className="rounded-lg w-full"
+                preload="metadata"
+              />
+            ) : (
+              <img
+                src={mediaUrl}
+                alt=""
+                className={cn("rounded-lg", mt === "sticker" ? "w-24 h-24 object-contain" : "w-full")}
+                loading="lazy"
+                onError={(e) => { (e.target as HTMLImageElement).style.display = "none" }}
+              />
+            )}
+          </div>
+        )}
+
+        {/* Document */}
+        {mt === "document" && (
+          <DocumentCard msgId={msg.id} filename={msg.mediaFilename} />
+        )}
+
+        {/* Audio / voice */}
+        {(mt === "audio" || mt === "voice") && (
+          <AudioPlayer msgId={msg.id} isVoice={mt === "voice"} />
+        )}
+
+        {/* Other non-visual media (order, button, etc.) */}
+        {hasMedia && !hasVisualMedia && mt !== "document" && mt !== "audio" && mt !== "voice" && mt !== "location" && mt !== "contacts" && mt !== "reaction" && (
+          <div className="flex items-center gap-1.5 mb-1">
+            <span className="text-xs opacity-70">{mediaLabel}</span>
+          </div>
+        )}
+
+        {/* Location map link */}
+        {mt === "location" && msg.metadata?.latitude && (
+          <a
+            href={msg.metadata.url || `https://maps.google.com/?q=${msg.metadata.latitude},${msg.metadata.longitude}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block mb-1.5 rounded-lg overflow-hidden border hover:border-primary/50 transition-colors"
+          >
+            <div className="bg-green-500/10 px-3 py-2.5 flex items-start gap-2.5">
+              <span className="text-lg mt-0.5">📍</span>
+              <div className="min-w-0">
+                {msg.metadata.name && <p className="text-xs font-medium truncate">{msg.metadata.name}</p>}
+                {msg.metadata.address && <p className="text-[10px] text-muted-foreground truncate">{msg.metadata.address}</p>}
+                {!msg.metadata.name && !msg.metadata.address && (
+                  <p className="text-xs text-muted-foreground font-mono">{msg.metadata.latitude.toFixed(5)}, {msg.metadata.longitude.toFixed(5)}</p>
+                )}
+                <p className="text-[10px] text-primary mt-1">Haritada aç →</p>
+              </div>
+            </div>
+          </a>
+        )}
+
+        {/* Contact cards */}
+        {mt === "contacts" && msg.metadata?.contacts && (
+          <div className="space-y-1 mb-1">
+            {(msg.metadata.contacts as any[]).map((c: any, i: number) => (
+              <div key={i} className="text-xs">
+                <span className="font-medium">{c.name}</span>
+                {c.phones?.[0]?.phone && <span className="opacity-70 ml-1">{c.phones[0].phone}</span>}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Story mention / story reply */}
+        {(mt === "story_mention" || mt === "story_reply") && (
+          <div className="rounded-lg bg-gradient-to-r from-purple-500/10 to-pink-500/10 border border-purple-500/20 px-3 py-2 mb-1.5">
+            <p className="text-[10px] font-medium text-purple-600">
+              {mt === "story_mention" ? "📖 Hikayenizde bahsetti" : "💬 Hikayenize yanıt verdi"}
+            </p>
+            {msg.metadata?.story_url && (
+              <a href={msg.metadata.story_url} target="_blank" rel="noopener noreferrer" className="text-[10px] text-primary underline">
+                Hikayeyi gör
+              </a>
+            )}
+          </div>
+        )}
+
+        {/* IG Reel title + link */}
+        {mt === "ig_reel" && msg.metadata?.title && (
+          <p className="text-xs opacity-70 mb-1 truncate">{msg.metadata.title}</p>
+        )}
+        {mt === "ig_reel" && msg.metadata?.url && !mediaUrl && (
+          <a
+            href={msg.metadata.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block mb-1.5 rounded-lg border hover:border-primary/50 transition-colors overflow-hidden"
+          >
+            <div className="bg-pink-500/5 px-3 py-2 flex items-center gap-2">
+              <span className="text-base">🎬</span>
+              <div className="min-w-0 flex-1">
+                <p className="text-[10px] text-muted-foreground">Instagram Reels</p>
+                <p className="text-xs text-primary truncate">{msg.metadata.title || "Reels'i aç"}</p>
+              </div>
+            </div>
+          </a>
+        )}
+
+        {/* Share (post/reel link) */}
+        {mt === "share" && msg.metadata?.url && (
+          <a
+            href={msg.metadata.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block mb-1.5 rounded-lg border hover:border-primary/50 transition-colors overflow-hidden"
+          >
+            <div className="bg-purple-500/5 px-3 py-2 flex items-center gap-2">
+              <span className="text-base">🔗</span>
+              <div className="min-w-0 flex-1">
+                <p className="text-[10px] text-muted-foreground">Instagram gönderi paylaşıldı</p>
+                <p className="text-xs text-primary truncate">{msg.metadata.url}</p>
+              </div>
+            </div>
+          </a>
+        )}
+
+        {/* Button/list reply indicator */}
+        {(mt === "button_reply" || mt === "list_reply" || mt === "quick_reply" || mt === "postback") && (
+          <div className="text-[10px] opacity-60 mb-0.5">
+            {mt === "button_reply" ? "Butona basıldı" : mt === "list_reply" ? "Listeden seçildi" : mt === "quick_reply" ? "Hızlı yanıt" : "Menüden seçildi"}
+          </div>
+        )}
+
+        {/* Message text (skip for location/contacts/reaction — already rendered above) */}
+        {msg.text && mt !== "location" && mt !== "contacts" && mt !== "reaction" && (
+          <p className="whitespace-pre-wrap break-words">{msg.text}</p>
+        )}
+
+        {/* Timestamp */}
+        <p className={cn(
+          "text-[10px] mt-1 text-right",
+          isContact ? "text-muted-foreground" : "opacity-60",
+        )}>
+          {msg.metadata?._sending ? (
+            <Loader2 className="w-3 h-3 animate-spin inline-block" />
+          ) : date ? format(new TZDate(date, tz || "UTC"), "HH:mm") : ""}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+// ─── Document Card ──────────────────────────────────────────
+
+function DocumentCard({ msgId, filename }: { msgId: string; filename: string | null }) {
+  const [downloading, setDownloading] = useState(false)
+
+  const handleOpen = async () => {
+    setDownloading(true)
+    try {
+      const { data } = await api.get(`/whatsapp/media/${msgId}`, { responseType: "blob" })
+      const url = URL.createObjectURL(data)
+      window.open(url, "_blank")
+    } catch {}
+    setDownloading(false)
+  }
+
+  const ext = filename?.split(".").pop()?.toUpperCase() || "FILE"
+
+  return (
+    <button
+      onClick={handleOpen}
+      disabled={downloading}
+      className="flex items-center gap-2.5 rounded-lg border bg-background/50 px-3 py-2 mb-1.5 hover:bg-muted/50 transition-colors w-full text-left"
+    >
+      <div className="w-9 h-9 rounded-lg bg-blue-500/10 flex items-center justify-center shrink-0">
+        <span className="text-[10px] font-bold text-blue-600">{ext}</span>
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="text-xs font-medium truncate">{filename || "Belge"}</p>
+        <p className="text-[10px] text-muted-foreground">{downloading ? "Aciliyor..." : "Acmak icin tiklayin"}</p>
+      </div>
+    </button>
+  )
+}
+
+// ─── Audio Player ───────────────────────────────────────────
+
+function AudioPlayer({ msgId, isVoice }: { msgId: string; isVoice: boolean }) {
+  const audioUrl = useMediaUrl(msgId)
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const [playing, setPlaying] = useState(false)
+  const [progress, setProgress] = useState(0)
+  const [duration, setDuration] = useState(0)
+
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) return
+    const onTime = () => setProgress(audio.currentTime)
+    const onMeta = () => setDuration(audio.duration || 0)
+    const onEnd = () => { setPlaying(false); setProgress(0) }
+    audio.addEventListener("timeupdate", onTime)
+    audio.addEventListener("loadedmetadata", onMeta)
+    audio.addEventListener("ended", onEnd)
+    return () => {
+      audio.removeEventListener("timeupdate", onTime)
+      audio.removeEventListener("loadedmetadata", onMeta)
+      audio.removeEventListener("ended", onEnd)
+    }
+  }, [audioUrl])
+
+  const toggle = () => {
+    const audio = audioRef.current
+    if (!audio) return
+    if (playing) { audio.pause() } else { audio.play() }
+    setPlaying(!playing)
+  }
+
+  const seek = (e: React.MouseEvent<HTMLDivElement>) => {
+    const audio = audioRef.current
+    if (!audio || !duration) return
+    const rect = e.currentTarget.getBoundingClientRect()
+    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+    audio.currentTime = pct * duration
+    setProgress(pct * duration)
+  }
+
+  const fmt = (s: number) => {
+    const m = Math.floor(s / 60)
+    const sec = Math.floor(s % 60)
+    return `${m}:${sec.toString().padStart(2, "0")}`
+  }
+
+  if (!audioUrl) {
+    return <div className="w-[220px] h-10 rounded-full bg-muted/50 animate-pulse mb-1.5" />
+  }
+
+  return (
+    <div className="mb-1.5">
+      <audio ref={audioRef} src={audioUrl} preload="metadata" />
+      <div className="flex items-center gap-2 w-[220px]">
+        <button
+          onClick={toggle}
+          className="w-8 h-8 rounded-full bg-primary/10 hover:bg-primary/20 flex items-center justify-center shrink-0 transition-colors"
+        >
+          {playing ? (
+            <svg viewBox="0 0 24 24" fill="currentColor" className="w-3.5 h-3.5 text-primary">
+              <rect x="6" y="5" width="4" height="14" rx="1" />
+              <rect x="14" y="5" width="4" height="14" rx="1" />
+            </svg>
+          ) : (
+            <svg viewBox="0 0 24 24" fill="currentColor" className="w-3.5 h-3.5 text-primary ml-0.5">
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          )}
+        </button>
+        <div className="flex-1 min-w-0">
+          <div
+            className="h-1.5 rounded-full bg-muted cursor-pointer relative"
+            onClick={seek}
+          >
+            <div
+              className="h-full rounded-full bg-primary/60 transition-all"
+              style={{ width: `${duration ? (progress / duration) * 100 : 0}%` }}
+            />
+          </div>
+          <div className="flex justify-between mt-0.5">
+            <span className="text-[9px] text-muted-foreground">{fmt(progress)}</span>
+            <span className="text-[9px] text-muted-foreground">{duration ? fmt(duration) : isVoice ? "Sesli mesaj" : "Ses"}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ─── File Attach Button ─────────────────────────────────────
+
+function FileAttachButton({ chatId, channel }: { chatId: string; channel: string }) {
+  const { t } = useTranslation()
+  const fileRef = useRef<HTMLInputElement>(null)
+  const qc = useQueryClient()
+
+  const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    // Optimistic: show file immediately
+    const mediaType = file.type.startsWith("image/") ? "image"
+      : file.type.startsWith("video/") ? "video"
+      : file.type.startsWith("audio/") ? "audio"
+      : "document"
+
+    const optimisticId = `optimistic-file-${Date.now()}`
+    const blobUrl = URL.createObjectURL(file)
+
+    const optimistic: ChatMessage = {
+      id: optimisticId,
+      sender: "human",
+      senderName: "",
+      text: "",
+      mediaType,
+      mediaKey: blobUrl,
+      mediaFilename: file.name,
+      metadata: { _sending: true },
+      adContext: null,
+      createdAt: new Date().toISOString(),
+    }
+
+    // Insert optimistic message
+    qc.setQueryData<ChatMessage[]>(["chat-messages", chatId], (old) => [...(old ?? []), optimistic])
+
+    try {
+      const form = new FormData()
+      form.append("file", file)
+      await api.post(`/whatsapp/chats/${chatId}/media`, form, {
+        headers: { "Content-Type": "multipart/form-data" },
+      })
+    } catch {
+      toast.error(t("chats.sendError"))
+    }
+
+    // Refetch real data
+    qc.invalidateQueries({ queryKey: ["chat-messages", chatId] })
+    qc.invalidateQueries({ queryKey: ["chats"] })
+    URL.revokeObjectURL(blobUrl)
+    if (fileRef.current) fileRef.current.value = ""
+  }
+
+  return (
+    <>
+      <input
+        ref={fileRef}
+        type="file"
+        className="hidden"
+        accept={channel === "instagram" ? "image/*,video/*" : "image/*,video/*,audio/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv,.zip"}
+        onChange={handleFile}
+      />
+      <Button
+        size="icon"
+        variant="ghost"
+        className="shrink-0"
+        onClick={() => fileRef.current?.click()}
+      >
+        <Paperclip className="w-4 h-4" />
+      </Button>
+    </>
+  )
+}