elevenlabs-webhook-nodejs 1.0.0

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

@@ -0,0 +1,46 @@
+import type { WhatsAppMessage } from '@/types';
+import { UserIcon, BotIcon, MicIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface Props {
+  message: WhatsAppMessage;
+}
+
+export function MessageBubble({ message }: Props) {
+  const isContact = message.sender === 'contact';
+  const isAi = message.sender_name === 'AI';
+  const isHuman = !isContact && !isAi;
+  const isTranscribed = message.media_type === 'transcribedAudio';
+
+  return (
+    <div className={cn('flex', isContact ? 'justify-start' : 'justify-end')}>
+      <div
+        className={cn(
+          'max-w-[75%] rounded-lg px-3 py-2 text-sm',
+          isContact && 'bg-muted text-foreground',
+          isAi && 'bg-emerald-100 text-emerald-900 dark:bg-emerald-900/40 dark:text-emerald-100',
+          isHuman && 'bg-sky-100 text-sky-900 dark:bg-sky-900/40 dark:text-sky-100',
+        )}
+      >
+        <div className="flex items-center gap-1.5 mb-0.5">
+          {isContact && <UserIcon className="size-3 opacity-60" />}
+          {isAi && <BotIcon className="size-3 opacity-60" />}
+          {isHuman && <UserIcon className="size-3 opacity-60" />}
+          <span className="text-[10px] font-medium opacity-60">
+            {isContact ? message.sender_name : isAi ? 'AI Agent' : 'Operator'}
+          </span>
+        </div>
+        {isTranscribed && (
+          <div className="flex items-center gap-1 text-[10px] opacity-50 mb-0.5">
+            <MicIcon className="size-3" />
+            <span>Sesli mesaj transkripsiyonu</span>
+          </div>
+        )}
+        <p className="whitespace-pre-wrap break-words">{message.text}</p>
+        <p className="text-[10px] opacity-40 mt-1 text-right">
+          {new Date(message.createdAt).toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' })}
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import type { ChatMode } from '@/types';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { SendIcon, Loader2Icon } from 'lucide-react';
+
+interface Props {
+  mode: ChatMode;
+  onSend: (text: string) => Promise<void>;
+}
+
+export function MessageInput({ mode, onSend }: Props) {
+  const [text, setText] = useState('');
+  const [sending, setSending] = useState(false);
+
+  async function handleSend() {
+    if (!text.trim()) return;
+    setSending(true);
+    try {
+      await onSend(text.trim());
+      setText('');
+    } finally {
+      setSending(false);
+    }
+  }
+
+  if (mode === 'ai') {
+    return (
+      <div className="border-t p-3">
+        <p className="text-sm text-muted-foreground text-center py-1">
+          AI yanit veriyor. Mesaj gondermek icin once sohbeti devralin.
+        </p>
+      </div>
+    );
+  }
+
+  if (mode === 'closed') {
+    return (
+      <div className="border-t p-3">
+        <p className="text-sm text-muted-foreground text-center py-1">
+          Bu sohbet kapatilmis. Yeniden acarak devam edebilirsiniz.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="border-t p-3">
+      <div className="flex gap-2">
+        <Input
+          value={text}
+          onChange={e => setText(e.target.value)}
+          placeholder="Mesajinizi yazin..."
+          onKeyDown={e => e.key === 'Enter' && !e.shiftKey && handleSend()}
+          disabled={sending}
+        />
+        <Button onClick={handleSend} disabled={sending || !text.trim()}>
+          {sending ? <Loader2Icon className="size-4 animate-spin" /> : <SendIcon className="size-4" />}
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,135 @@
+import { useEffect, useRef, useMemo, useCallback } from 'react';
+import type { WhatsAppMessage, WhatsAppSession } from '@/types';
+import { MessageBubble } from './MessageBubble';
+import { SessionDivider } from './SessionDivider';
+
+interface Props {
+  messages: WhatsAppMessage[];
+  sessions: WhatsAppSession[];
+}
+
+export function MessageStream({ messages, sessions }: Props) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const prevCountRef = useRef(0);
+  const isInitialRef = useRef(true);
+
+  const isNearBottom = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return true;
+    return el.scrollHeight - el.scrollTop - el.clientHeight < 120;
+  }, []);
+
+  useEffect(() => {
+    if (messages.length !== prevCountRef.current) {
+      const hadMessages = prevCountRef.current > 0;
+      prevCountRef.current = messages.length;
+      // Auto-scroll only if already near the bottom or first load
+      if (!hadMessages || isNearBottom()) {
+        bottomRef.current?.scrollIntoView({ behavior: hadMessages ? 'smooth' : 'instant' });
+      }
+    }
+  }, [messages.length, isNearBottom]);
+
+  // Initial scroll to bottom
+  useEffect(() => {
+    if (isInitialRef.current) {
+      isInitialRef.current = false;
+      bottomRef.current?.scrollIntoView({ behavior: 'instant' });
+    }
+  }, []);
+
+  // Build session lookup
+  const sessionMap = useMemo(() => {
+    const map = new Map<string, WhatsAppSession>();
+    for (const s of sessions) {
+      map.set(s._id, s);
+    }
+    return map;
+  }, [sessions]);
+
+  // Build rendered elements with session dividers
+  const elements = useMemo(() => {
+    if (messages.length === 0) return null;
+
+    const els: JSX.Element[] = [];
+    let prevSessionId: string | null | undefined = undefined; // undefined = not set yet
+    const aiShown = new Set<string>();
+    const humanShown = new Set<string>();
+
+    for (let i = 0; i < messages.length; i++) {
+      const msg = messages[i];
+      const curSessionId = msg.session_id;
+
+      // When session_id changes, insert divider(s)
+      if (curSessionId && curSessionId !== prevSessionId) {
+        const session = sessionMap.get(curSessionId);
+        if (session) {
+          // If this is a new session (different from previous), show "start" divider
+          if (prevSessionId !== undefined) {
+            // Also show "resolved" for the previous session if it's resolved
+            const prevSession = prevSessionId ? sessionMap.get(prevSessionId) : null;
+            if (prevSession && prevSession.status === 'resolved') {
+              els.push(
+                <SessionDivider key={`resolved-${prevSession._id}`} type="resolved" session={prevSession} />
+              );
+            }
+          }
+          els.push(
+            <SessionDivider key={`start-${session._id}`} type="start" session={session} />
+          );
+        }
+      }
+
+      // Detect AI/human takeover — only show once per session
+      if (curSessionId && prevSessionId === curSessionId) {
+        const prevMsg = messages[i - 1];
+        const session = sessionMap.get(curSessionId);
+        if (session) {
+          if (!aiShown.has(curSessionId) && prevMsg?.sender === 'contact' && msg.sender === 'human' && msg.sender_name === 'AI') {
+            els.push(
+              <SessionDivider key={`ai-takeover-${session._id}`} type="ai_takeover" session={session} />
+            );
+            aiShown.add(curSessionId);
+          }
+          if (!humanShown.has(curSessionId) && prevMsg?.sender === 'human' && prevMsg?.sender_name === 'AI' && msg.sender === 'human' && msg.sender_name !== 'AI') {
+            els.push(
+              <SessionDivider key={`human-takeover-${session._id}`} type="human_takeover" session={session} />
+            );
+            humanShown.add(curSessionId);
+          }
+        }
+      }
+
+      els.push(<MessageBubble key={msg._id} message={msg} />);
+      prevSessionId = curSessionId;
+    }
+
+    // Show resolved divider for the last session if it's resolved
+    if (prevSessionId) {
+      const lastSession = sessionMap.get(prevSessionId);
+      if (lastSession && lastSession.status === 'resolved') {
+        els.push(
+          <SessionDivider key={`resolved-${lastSession._id}`} type="resolved" session={lastSession} />
+        );
+      }
+    }
+
+    return els;
+  }, [messages, sessionMap]);
+
+  if (!elements) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <p className="text-muted-foreground">Henuz mesaj yok</p>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} className="flex-1 overflow-y-auto p-4 space-y-3">
+      {elements}
+      <div ref={bottomRef} />
+    </div>
+  );
+}

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

@@ -0,0 +1,65 @@
+import type { WhatsAppSession } from '@/types';
+import { Separator } from '@/components/ui/separator';
+
+type DividerType = 'start' | 'ai_takeover' | 'human_takeover' | 'resolved';
+
+interface Props {
+  type: DividerType;
+  session: WhatsAppSession;
+}
+
+function getLabel(type: DividerType, session: WhatsAppSession): string {
+  switch (type) {
+    case 'start':
+      return 'Yeni oturum baslatildi';
+    case 'ai_takeover':
+      return 'AI devraldi';
+    case 'human_takeover': {
+      const name = session.taken_over_by?.name || 'Operator';
+      return `${name} devraladi`;
+    }
+    case 'resolved': {
+      const by = session.resolved_by === 'human' ? 'insan'
+        : session.resolved_by === 'ai' ? 'AI'
+        : session.resolved_by === 'timeout' ? 'zaman asimi'
+        : session.resolved_by === 'manual' ? 'manuel'
+        : session.resolved_by || 'bilinmiyor';
+      return `Oturum kapandi (${by})`;
+    }
+  }
+}
+
+function getTimestamp(type: DividerType, session: WhatsAppSession): string {
+  let date: Date | null = null;
+  switch (type) {
+    case 'start':
+      date = new Date(session.started_at);
+      break;
+    case 'ai_takeover':
+      date = session.grace_deadline ? new Date(session.grace_deadline) : new Date(session.started_at);
+      break;
+    case 'human_takeover':
+      date = session.taken_over_at ? new Date(session.taken_over_at) : new Date(session.started_at);
+      break;
+    case 'resolved':
+      date = session.resolved_at ? new Date(session.resolved_at) : null;
+      break;
+  }
+  if (!date) return '';
+  return date.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });
+}
+
+export function SessionDivider({ type, session }: Props) {
+  const label = getLabel(type, session);
+  const time = getTimestamp(type, session);
+
+  return (
+    <div className="flex items-center gap-3 py-2">
+      <Separator className="flex-1" />
+      <span className="text-[11px] text-muted-foreground whitespace-nowrap">
+        {label}{time ? ` \u00b7 ${time}` : ''}
+      </span>
+      <Separator className="flex-1" />
+    </div>
+  );
+}

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

@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react';
+import api from '@/lib/api';
+import type { WhatsAppSession } from '@/types';
+import { Badge } from '@/components/ui/badge';
+import { SentimentBadge, CategoryBadge } from '@/components/status-badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ClockIcon, BotIcon, UserIcon, CheckCircleIcon } from 'lucide-react';
+
+interface Props {
+  chatId: string;
+}
+
+const STATUS_CONFIG: Record<string, { label: string; className: string; icon: typeof ClockIcon }> = {
+  waiting: { label: 'Bekleniyor', className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400', icon: ClockIcon },
+  active: { label: 'Aktif', className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400', icon: BotIcon },
+  resolved: { label: 'Kapandi', className: 'bg-secondary text-secondary-foreground', icon: CheckCircleIcon },
+};
+
+export function SessionHistory({ chatId }: Props) {
+  const [sessions, setSessions] = useState<WhatsAppSession[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadSessions();
+  }, [chatId]);
+
+  async function loadSessions() {
+    setLoading(true);
+    try {
+      const { data } = await api.get(`/whatsapp/chats/${chatId}/sessions?limit=50`);
+      setSessions(data.sessions);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="p-4 space-y-3">
+        {[1, 2, 3].map(i => (
+          <Skeleton key={i} className="h-20 w-full rounded-lg" />
+        ))}
+      </div>
+    );
+  }
+
+  if (sessions.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <p className="text-muted-foreground">Oturum gecmisi yok</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto p-4 space-y-3">
+      {sessions.map(session => {
+        const cfg = STATUS_CONFIG[session.status] || STATUS_CONFIG.resolved;
+        const Icon = cfg.icon;
+        const startDate = new Date(session.started_at);
+        const resolvedDate = session.resolved_at ? new Date(session.resolved_at) : null;
+
+        return (
+          <div key={session._id} className="border rounded-lg p-3 space-y-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Icon className="size-4 text-muted-foreground" />
+                <Badge variant="secondary" className={cfg.className}>{cfg.label}</Badge>
+                {session.resolved_by && (
+                  <span className="text-xs text-muted-foreground">
+                    ({session.resolved_by === 'human' ? 'insan' : session.resolved_by === 'ai' ? 'AI' : session.resolved_by === 'timeout' ? 'zaman asimi' : session.resolved_by})
+                  </span>
+                )}
+              </div>
+              <span className="text-xs text-muted-foreground">
+                {session.message_count} mesaj
+              </span>
+            </div>
+
+            <div className="flex items-center gap-4 text-xs text-muted-foreground">
+              <span>
+                Baslangic: {startDate.toLocaleString('tr-TR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })}
+              </span>
+              {resolvedDate && (
+                <span>
+                  Bitis: {resolvedDate.toLocaleString('tr-TR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })}
+                </span>
+              )}
+            </div>
+
+            {session.taken_over_by && (
+              <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                <UserIcon className="size-3" />
+                <span>Devralan: {session.taken_over_by.name}</span>
+              </div>
+            )}
+
+            {(session.sentiment || (session.categories && session.categories.length > 0)) && (
+              <div className="flex flex-wrap gap-1.5">
+                <SentimentBadge sentiment={session.sentiment} />
+                {session.categories?.map(cat => (
+                  <CategoryBadge key={cat} category={cat} />
+                ))}
+              </div>
+            )}
+
+            {session.llm_summary && (
+              <p className="text-xs text-muted-foreground line-clamp-2">
+                {session.llm_summary}
+              </p>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}