elevenlabs-webhook-nodejs 1.0.0

package/web/src/components/whatsapp/ChatDetail.tsx

@@ -0,0 +1,417 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import api from '@/lib/api';
+import type { WhatsAppChat, WhatsAppMessage, WhatsAppSession, WhatsAppContactProfile } from '@/types';
+import { ChatHeader } from './ChatHeader';
+import { MessageStream } from './MessageStream';
+import { MessageInput } from './MessageInput';
+import { SessionHistory } from './SessionHistory';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+import {
+  MessageSquareIcon,
+  ZapIcon,
+  ClockIcon,
+  Loader2Icon,
+  UserIcon,
+  SparklesIcon,
+} from 'lucide-react';
+
+interface Props {
+  chatId: string;
+  onChatUpdate: () => void;
+}
+
+export function ChatDetail({ chatId, onChatUpdate }: Props) {
+  const navigate = useNavigate();
+  const [chat, setChat] = useState<WhatsAppChat | null>(null);
+  const [messages, setMessages] = useState<WhatsAppMessage[]>([]);
+  const [sessions, setSessions] = useState<WhatsAppSession[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState('');
+  const [releaseDialogOpen, setReleaseDialogOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState('messages');
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    setLoading(true);
+    setChat(null);
+    setMessages([]);
+    setSessions([]);
+    setActiveTab('messages');
+    loadAll();
+
+    pollRef.current = setInterval(() => {
+      loadChatAndMessages(true);
+    }, 3000);
+
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+    };
+  }, [chatId]);
+
+  async function loadAll() {
+    try {
+      const [chatRes, msgRes, sessRes] = await Promise.all([
+        api.get(`/whatsapp/chats/${chatId}`),
+        api.get(`/whatsapp/chats/${chatId}/messages?limit=200`),
+        api.get(`/whatsapp/chats/${chatId}/sessions?limit=50`),
+      ]);
+      setChat(chatRes.data.chat);
+      setMessages(msgRes.data.messages);
+      setSessions(sessRes.data.sessions);
+    } catch {
+      toast.error('Sohbet yuklenemedi');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function loadChatAndMessages(silent = false) {
+    try {
+      const [chatRes, msgRes, sessRes] = await Promise.all([
+        api.get(`/whatsapp/chats/${chatId}`),
+        api.get(`/whatsapp/chats/${chatId}/messages?limit=200`),
+        api.get(`/whatsapp/chats/${chatId}/sessions?limit=50`),
+      ]);
+      setChat(chatRes.data.chat);
+      // Only update messages/sessions if data actually changed (prevents unnecessary re-renders)
+      const newMsgs: WhatsAppMessage[] = msgRes.data.messages;
+      setMessages(prev => {
+        if (prev.length !== newMsgs.length) return newMsgs;
+        const lastPrev = prev[prev.length - 1];
+        const lastNew = newMsgs[newMsgs.length - 1];
+        if (lastPrev?._id !== lastNew?._id) return newMsgs;
+        return prev;
+      });
+      const newSess: WhatsAppSession[] = sessRes.data.sessions;
+      setSessions(prev => {
+        if (prev.length !== newSess.length) return newSess;
+        // Check if any session status changed
+        for (let i = 0; i < prev.length; i++) {
+          if (prev[i].status !== newSess[i].status
+            || prev[i].taken_over_by?._id !== newSess[i].taken_over_by?._id) {
+            return newSess;
+          }
+        }
+        return prev;
+      });
+    } catch {
+      if (!silent) toast.error('Veri yuklenemedi');
+    }
+  }
+
+  async function handleAction(action: string, label: string) {
+    setActionLoading(action);
+    try {
+      const { data } = await api.post(`/whatsapp/chats/${chatId}/${action}`);
+      setChat(data.chat);
+      // Refetch sessions after state change
+      const sessRes = await api.get(`/whatsapp/chats/${chatId}/sessions?limit=50`);
+      setSessions(sessRes.data.sessions);
+      toast.success(`${label} basarili`);
+      onChatUpdate();
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setActionLoading('');
+    }
+  }
+
+  async function handleRelease(immediate: boolean) {
+    setActionLoading('release');
+    try {
+      const { data } = await api.post(`/whatsapp/chats/${chatId}/release`, { immediate });
+      setChat(data.chat);
+      setReleaseDialogOpen(false);
+      const sessRes = await api.get(`/whatsapp/chats/${chatId}/sessions?limit=50`);
+      setSessions(sessRes.data.sessions);
+      if (immediate && data.pendingCount > 0) {
+        toast.success(`AI'ya birakildi, ${data.pendingCount} bekleyen mesaj yanitlaniyor`);
+      } else {
+        toast.success("AI'ya birakildi");
+      }
+      onChatUpdate();
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setActionLoading('');
+    }
+  }
+
+  async function handleDelete() {
+    setActionLoading('delete');
+    try {
+      await api.delete(`/whatsapp/chats/${chatId}`);
+      toast.success('Sohbet silindi');
+      onChatUpdate();
+      navigate('/whatsapp');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Sohbet silinemedi');
+    } finally {
+      setActionLoading('');
+    }
+  }
+
+  async function handleSend(text: string) {
+    try {
+      await api.post(`/whatsapp/chats/${chatId}/send`, { text });
+      await loadChatAndMessages(true);
+      onChatUpdate();
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Mesaj gonderilemedi');
+      throw err; // Let MessageInput know it failed
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex flex-col">
+        <div className="px-4 py-3 border-b space-y-2">
+          <Skeleton className="h-5 w-40" />
+          <Skeleton className="h-3 w-60" />
+        </div>
+        <div className="flex-1 p-4 space-y-3">
+          {[1, 2, 3, 4, 5].map(i => (
+            <Skeleton key={i} className={`h-12 ${i % 2 === 0 ? 'w-2/3 ml-auto' : 'w-2/3'}`} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (!chat) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <p className="text-muted-foreground">Sohbet bulunamadi</p>
+      </div>
+    );
+  }
+
+  // Sessions sorted ascending for message stream (API returns desc)
+  const sessionsAsc = [...sessions].reverse();
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      <ChatHeader
+        chat={chat}
+        actionLoading={actionLoading}
+        onTakeover={() => handleAction('takeover', 'Devralma')}
+        onRelease={() => setReleaseDialogOpen(true)}
+        onClose={() => handleAction('close', 'Kapatma')}
+        onReopen={() => handleAction('reopen', 'Yeniden acma')}
+        onDelete={handleDelete}
+      />
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col min-h-0">
+        <TabsList className="mx-4 mt-2 w-fit">
+          <TabsTrigger value="messages" className="gap-1.5">
+            <MessageSquareIcon className="size-3.5" />
+            Mesajlar
+          </TabsTrigger>
+          <TabsTrigger value="sessions" className="gap-1.5">
+            <ClockIcon className="size-3.5" />
+            Oturum Gecmisi
+          </TabsTrigger>
+          <TabsTrigger value="profile" className="gap-1.5">
+            <UserIcon className="size-3.5" />
+            Profil
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="messages" className="flex-1 flex flex-col min-h-0 mt-0">
+          <MessageStream messages={messages} sessions={sessionsAsc} />
+          <MessageInput mode={chat.mode} onSend={handleSend} />
+        </TabsContent>
+
+        <TabsContent value="sessions" className="flex-1 flex flex-col min-h-0 mt-0">
+          <SessionHistory chatId={chatId} />
+        </TabsContent>
+
+        <TabsContent value="profile" className="flex-1 overflow-y-auto mt-0 p-4">
+          <ContactProfileTab chatId={chatId} profile={chat.contact_profile || null} onProfileUpdate={loadAll} />
+        </TabsContent>
+      </Tabs>
+
+      {/* Release Dialog */}
+      <Dialog open={releaseDialogOpen} onOpenChange={setReleaseDialogOpen}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>AI'ya Birak</DialogTitle>
+            <DialogDescription>
+              Sohbet AI moduna gecirildikten sonra ne yapilsin?
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-3">
+            <Button
+              onClick={() => handleRelease(true)}
+              disabled={!!actionLoading}
+              className="justify-start h-auto py-3 px-4"
+            >
+              {actionLoading === 'release' ? (
+                <Loader2Icon className="size-5 animate-spin mr-3 shrink-0" />
+              ) : (
+                <ZapIcon className="size-5 mr-3 shrink-0" />
+              )}
+              <div className="text-left">
+                <div className="font-medium">Hemen Yanit Ver</div>
+                <div className="text-xs opacity-70 font-normal">AI, bekleyen mesajlari hemen yanitlar</div>
+              </div>
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => handleRelease(false)}
+              disabled={!!actionLoading}
+              className="justify-start h-auto py-3 px-4"
+            >
+              {actionLoading === 'release' ? (
+                <Loader2Icon className="size-5 animate-spin mr-3 shrink-0" />
+              ) : (
+                <ClockIcon className="size-5 mr-3 shrink-0" />
+              )}
+              <div className="text-left">
+                <div className="font-medium">Mesaj Bekle</div>
+                <div className="text-xs opacity-70 font-normal">AI, yeni mesaj gelene kadar bekler</div>
+              </div>
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function ContactProfileTab({
+  chatId,
+  profile,
+  onProfileUpdate,
+}: {
+  chatId: string;
+  profile: WhatsAppContactProfile | null;
+  onProfileUpdate: () => void;
+}) {
+  const [generating, setGenerating] = useState(false);
+  const [notes, setNotes] = useState(profile?.notes || '');
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    setNotes(profile?.notes || '');
+  }, [profile?._id, profile?.notes]);
+
+  async function handleGenerateSummary() {
+    setGenerating(true);
+    try {
+      const { data } = await api.post(`/whatsapp/chats/${chatId}/generate-summary`);
+      toast.success('Profil ozeti olusturuldu');
+      onProfileUpdate();
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Ozet olusturulamadi');
+    } finally {
+      setGenerating(false);
+    }
+  }
+
+  async function handleSaveNotes() {
+    if (!profile) return;
+    setSaving(true);
+    try {
+      await api.put(`/whatsapp/contacts/${profile._id}`, { notes });
+      toast.success('Notlar kaydedildi');
+      onProfileUpdate();
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Notlar kaydedilemedi');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="space-y-5 max-w-xl">
+      {/* Contact Info */}
+      {/* Contact Info */}
+      {profile && (
+        <div>
+          <h3 className="text-sm font-semibold mb-2">Iletisim Bilgileri</h3>
+          <div className="text-sm space-y-1">
+            <div><span className="text-muted-foreground">Ad:</span> {profile.display_name}</div>
+            <div><span className="text-muted-foreground">Telefon:</span> {profile.phone}</div>
+            <div><span className="text-muted-foreground">Ilk gorulme:</span> {new Date(profile.first_seen_at).toLocaleDateString('tr-TR')}</div>
+            <div><span className="text-muted-foreground">Son gorulme:</span> {new Date(profile.last_seen_at).toLocaleDateString('tr-TR')}</div>
+            <div><span className="text-muted-foreground">Toplam oturum:</span> {profile.total_sessions}</div>
+            <div><span className="text-muted-foreground">Toplam mesaj:</span> {profile.total_messages}</div>
+          </div>
+        </div>
+      )}
+
+      {/* Tags */}
+      {profile && profile.tags.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold mb-2">Etiketler</h3>
+          <div className="flex gap-1.5 flex-wrap">
+            {profile.tags.map(tag => (
+              <span key={tag} className="text-xs bg-muted px-2 py-0.5 rounded-full">{tag}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* AI Summary */}
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <h3 className="text-sm font-semibold">AI Profil Ozeti</h3>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={handleGenerateSummary}
+            disabled={generating}
+          >
+            {generating ? (
+              <Loader2Icon className="size-3.5 animate-spin mr-1.5" />
+            ) : (
+              <SparklesIcon className="size-3.5 mr-1.5" />
+            )}
+            {generating ? 'Olusturuluyor...' : 'Ozet Olustur'}
+          </Button>
+        </div>
+        {profile?.ai_summary ? (
+          <div className="text-sm bg-muted/50 rounded-lg p-3 whitespace-pre-wrap">
+            {profile.ai_summary}
+          </div>
+        ) : (
+          <div className="text-sm text-muted-foreground italic">
+            Henuz AI ozeti olusturulmamis. "Ozet Olustur" butonuna tiklayarak olusturabilirsiniz.
+          </div>
+        )}
+      </div>
+
+      {/* Notes */}
+      {profile && <div>
+        <h3 className="text-sm font-semibold mb-2">Notlar</h3>
+        <textarea
+          className="w-full min-h-[80px] text-sm border rounded-lg p-2.5 bg-background resize-y"
+          value={notes}
+          onChange={e => setNotes(e.target.value)}
+          placeholder="Bu kisi hakkinda notlar ekleyin..."
+        />
+        <Button
+          size="sm"
+          className="mt-2"
+          onClick={handleSaveNotes}
+          disabled={saving || notes === (profile.notes || '')}
+        >
+          {saving ? <Loader2Icon className="size-3.5 animate-spin mr-1.5" /> : null}
+          Kaydet
+        </Button>
+      </div>}
+    </div>
+  );
+}

package/web/src/components/whatsapp/ChatHeader.tsx

@@ -0,0 +1,78 @@
+import type { WhatsAppChat } from '@/types';
+import { ChatModeBadge, SessionStatusBadge } from '@/components/status-badge';
+import { Button } from '@/components/ui/button';
+import {
+  HandIcon,
+  PlayIcon,
+  XCircleIcon,
+  RotateCcwIcon,
+  Loader2Icon,
+  PhoneIcon,
+  Trash2Icon,
+} from 'lucide-react';
+
+interface Props {
+  chat: WhatsAppChat;
+  actionLoading: string;
+  onTakeover: () => void;
+  onRelease: () => void;
+  onClose: () => void;
+  onReopen: () => void;
+  onDelete: () => void;
+}
+
+export function ChatHeader({ chat, actionLoading, onTakeover, onRelease, onClose, onReopen, onDelete }: Props) {
+  return (
+    <div className="flex items-center justify-between px-4 py-3 border-b shrink-0">
+      <div className="min-w-0">
+        <h2 className="text-sm font-semibold flex items-center gap-2 truncate">
+          {chat.contact_name}
+          <ChatModeBadge mode={chat.mode} />
+          <SessionStatusBadge status={chat.session_status} />
+        </h2>
+        <p className="text-xs text-muted-foreground flex items-center gap-1 mt-0.5">
+          <PhoneIcon className="size-3 shrink-0" />
+          <span className="truncate">{chat.contact_phone}</span>
+          {chat.taken_over_by && (
+            <span className="ml-2 shrink-0">— Devralan: {chat.taken_over_by.name}</span>
+          )}
+          {chat.session_status === 'waiting' && chat.session_grace_deadline && (
+            <span className="ml-2 shrink-0">
+              — Bekleme: {new Date(chat.session_grace_deadline).toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+            </span>
+          )}
+        </p>
+      </div>
+
+      <div className="flex items-center gap-2 shrink-0 ml-4">
+        {chat.mode === 'ai' && (
+          <Button size="sm" variant="outline" onClick={onTakeover} disabled={!!actionLoading}>
+            {actionLoading === 'takeover' ? <Loader2Icon className="size-4 animate-spin mr-1" /> : <HandIcon className="size-4 mr-1" />}
+            Devral
+          </Button>
+        )}
+        {chat.mode === 'human' && (
+          <Button size="sm" variant="outline" onClick={onRelease} disabled={!!actionLoading}>
+            <PlayIcon className="size-4 mr-1" />
+            AI'ya Birak
+          </Button>
+        )}
+        {chat.mode !== 'closed' && (
+          <Button size="sm" variant="destructive" onClick={onClose} disabled={!!actionLoading}>
+            {actionLoading === 'close' ? <Loader2Icon className="size-4 animate-spin mr-1" /> : <XCircleIcon className="size-4 mr-1" />}
+            Kapat
+          </Button>
+        )}
+        {chat.mode === 'closed' && (
+          <Button size="sm" variant="outline" onClick={onReopen} disabled={!!actionLoading}>
+            {actionLoading === 'reopen' ? <Loader2Icon className="size-4 animate-spin mr-1" /> : <RotateCcwIcon className="size-4 mr-1" />}
+            Yeniden Ac
+          </Button>
+        )}
+        <Button size="sm" variant="ghost" onClick={onDelete} disabled={!!actionLoading} title="Sohbeti sil">
+          {actionLoading === 'delete' ? <Loader2Icon className="size-4 animate-spin" /> : <Trash2Icon className="size-4" />}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/web/src/components/whatsapp/ChatList.tsx

@@ -0,0 +1,107 @@
+import type { WhatsAppChat, WhatsAppStats } from '@/types';
+import { ChatListItem } from './ChatListItem';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  MessageSquareIcon,
+  BotIcon,
+  UserIcon,
+  TimerIcon,
+  SearchIcon,
+} from 'lucide-react';
+
+interface Props {
+  chats: WhatsAppChat[];
+  stats: WhatsAppStats | null;
+  selectedChatId: string | null;
+  modeFilter: string;
+  searchQuery: string;
+  onSelectChat: (chatId: string) => void;
+  onModeFilterChange: (mode: string) => void;
+  onSearchChange: (q: string) => void;
+}
+
+export function ChatList({
+  chats, stats, selectedChatId,
+  modeFilter, searchQuery,
+  onSelectChat, onModeFilterChange, onSearchChange,
+}: Props) {
+  // Filter chats by search query (client-side)
+  const filtered = searchQuery.trim()
+    ? chats.filter(c =>
+        c.contact_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        c.contact_phone.includes(searchQuery)
+      )
+    : chats;
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Stats bar */}
+      {stats && (
+        <div className="flex items-center gap-3 px-3 py-2 border-b text-[11px] text-muted-foreground">
+          <span className="flex items-center gap-1">
+            <MessageSquareIcon className="size-3" /> {stats.totalChats}
+          </span>
+          <span className="flex items-center gap-1">
+            <BotIcon className="size-3" /> {stats.aiChats}
+          </span>
+          <span className="flex items-center gap-1">
+            <UserIcon className="size-3" /> {stats.humanChats}
+          </span>
+          <span className="flex items-center gap-1">
+            <TimerIcon className="size-3" /> {stats.waitingChats}
+          </span>
+        </div>
+      )}
+
+      {/* Filter + search */}
+      <div className="px-3 py-2 space-y-2 border-b">
+        <Select value={modeFilter} onValueChange={onModeFilterChange}>
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Tumunu Goster</SelectItem>
+            <SelectItem value="ai">AI</SelectItem>
+            <SelectItem value="human">Insan</SelectItem>
+            <SelectItem value="waiting">Bekleyen</SelectItem>
+            <SelectItem value="closed">Kapali</SelectItem>
+          </SelectContent>
+        </Select>
+        <div className="relative">
+          <SearchIcon className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
+          <Input
+            placeholder="Ara..."
+            value={searchQuery}
+            onChange={e => onSearchChange(e.target.value)}
+            className="h-8 pl-8 text-xs"
+          />
+        </div>
+      </div>
+
+      {/* Chat items */}
+      <div className="flex-1 overflow-y-auto">
+        {filtered.length === 0 ? (
+          <div className="flex items-center justify-center h-32">
+            <p className="text-xs text-muted-foreground">Sohbet bulunamadi</p>
+          </div>
+        ) : (
+          filtered.map(chat => (
+            <ChatListItem
+              key={chat._id}
+              chat={chat}
+              selected={chat._id === selectedChatId}
+              onClick={() => onSelectChat(chat._id)}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/web/src/components/whatsapp/ChatListItem.tsx

@@ -0,0 +1,60 @@
+import type { WhatsAppChat } from '@/types';
+import { ChatModeBadge } from '@/components/status-badge';
+import { cn } from '@/lib/utils';
+
+interface Props {
+  chat: WhatsAppChat;
+  selected: boolean;
+  onClick: () => void;
+}
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'simdi';
+  if (mins < 60) return `${mins}dk`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}sa`;
+  const days = Math.floor(hours / 24);
+  return `${days}g`;
+}
+
+export function ChatListItem({ chat, selected, onClick }: Props) {
+  const initials = chat.contact_name
+    .split(' ')
+    .map(w => w[0])
+    .join('')
+    .substring(0, 2)
+    .toUpperCase();
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'w-full flex items-start gap-3 px-3 py-3 text-left transition-colors hover:bg-muted/50 border-b border-border/50',
+        selected && 'bg-muted',
+      )}
+    >
+      {/* Avatar */}
+      <div className="size-10 rounded-full bg-primary/10 text-primary flex items-center justify-center text-sm font-semibold shrink-0">
+        {initials}
+      </div>
+
+      {/* Content */}
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-sm font-medium truncate">{chat.contact_name}</span>
+          <span className="text-[10px] text-muted-foreground shrink-0">
+            {timeAgo(chat.last_message_at)}
+          </span>
+        </div>
+        <div className="flex items-center justify-between gap-2 mt-0.5">
+          <p className="text-xs text-muted-foreground truncate">
+            {chat.last_message_preview || 'Mesaj yok'}
+          </p>
+          <ChatModeBadge mode={chat.mode} />
+        </div>
+      </div>
+    </button>
+  );
+}