elevenlabs-webhook-nodejs 1.0.0

package/web/src/components/LeadConversation.tsx

@@ -0,0 +1,251 @@
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import api from '@/lib/api';
+import type { WhatsAppMessage, WhatsAppSession } from '@/types';
+import { MessageBubble } from '@/components/whatsapp/MessageBubble';
+import { SessionDivider } from '@/components/whatsapp/SessionDivider';
+import { UserIcon, BotIcon, Loader2Icon, ChevronUpIcon } from 'lucide-react';
+
+const PAGE_SIZE = 50;
+
+interface Props {
+  sourceType: 'call' | 'whatsapp';
+  sourceId: string;
+  chatId: string | null;
+  fullPage?: boolean;
+}
+
+function parseTranscript(transcript: string): { isAgent: boolean; text: string }[] {
+  try {
+    const parsed = JSON.parse(transcript);
+    if (Array.isArray(parsed)) {
+      return parsed
+        .filter((m: { text?: string }) => m.text?.trim())
+        .map((m: { role: string; text: string }) => ({
+          isAgent: m.role === 'agent',
+          text: m.text,
+        }));
+    }
+  } catch {
+    // Legacy plain-text format
+  }
+  return transcript
+    .split('\n')
+    .filter(line => line.trim())
+    .map(line => {
+      const isAgent = /^Asistan:\s*/i.test(line);
+      const text = line.replace(/^(Asistan|Arayan):\s*/i, '');
+      return { isAgent, text };
+    });
+}
+
+function buildMessageElements(messages: WhatsAppMessage[], sessions: WhatsAppSession[]): JSX.Element[] {
+  const sessionMap = new Map<string, WhatsAppSession>();
+  for (const s of sessions) sessionMap.set(s._id, s);
+
+  const els: JSX.Element[] = [];
+  let prevSessionId: string | null | undefined = undefined;
+  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;
+
+    if (curSessionId && curSessionId !== prevSessionId) {
+      const session = sessionMap.get(curSessionId);
+      if (session) {
+        if (prevSessionId !== undefined) {
+          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} />);
+      }
+    }
+
+    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;
+  }
+
+  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;
+}
+
+export function LeadConversation({ sourceType, sourceId, chatId, fullPage }: Props) {
+  const [transcript, setTranscript] = useState<{ isAgent: boolean; text: string }[] | null>(null);
+  const [messages, setMessages] = useState<WhatsAppMessage[]>([]);
+  const [sessions, setSessions] = useState<WhatsAppSession[]>([]);
+  const [totalMessages, setTotalMessages] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setLoading(true);
+    setMessages([]);
+    setSessions([]);
+    setTranscript(null);
+    setTotalMessages(0);
+    setPage(1);
+    if (sourceType === 'call') {
+      api.get(`/calls/${sourceId}`)
+        .then(({ data }) => {
+          if (data.call?.transcript) {
+            setTranscript(parseTranscript(data.call.transcript));
+          }
+        })
+        .catch(() => {})
+        .finally(() => setLoading(false));
+    } else if (chatId) {
+      Promise.all([
+        api.get(`/whatsapp/chats/${chatId}/messages?limit=${PAGE_SIZE}&page=1`),
+        api.get(`/whatsapp/chats/${chatId}/sessions?limit=50`),
+      ])
+        .then(([msgRes, sessRes]) => {
+          setMessages(msgRes.data.messages || []);
+          setTotalMessages(msgRes.data.total || 0);
+          setSessions(sessRes.data.sessions || []);
+          setPage(1);
+        })
+        .catch(() => {})
+        .finally(() => setLoading(false));
+    } else {
+      setLoading(false);
+    }
+  }, [sourceType, sourceId, chatId]);
+
+  const hasMore = messages.length < totalMessages;
+
+  const loadMore = useCallback(async () => {
+    if (!chatId || loadingMore || !hasMore) return;
+    setLoadingMore(true);
+    const nextPage = page + 1;
+    try {
+      const { data } = await api.get(`/whatsapp/chats/${chatId}/messages?limit=${PAGE_SIZE}&page=${nextPage}`);
+      const olderMessages: WhatsAppMessage[] = data.messages || [];
+      setMessages(prev => {
+        const existingIds = new Set(prev.map(m => m._id));
+        const newMsgs = olderMessages.filter(m => !existingIds.has(m._id));
+        return [...newMsgs, ...prev];
+      });
+      setPage(nextPage);
+    } catch {
+      // ignore
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [chatId, page, loadingMore, hasMore]);
+
+  const messageElements = useMemo(
+    () => buildMessageElements(messages, sessions),
+    [messages, sessions]
+  );
+
+  const containerClass = fullPage
+    ? 'max-h-[calc(100vh-14rem)] overflow-y-auto space-y-2 pr-1'
+    : 'max-h-[400px] overflow-y-auto space-y-2 rounded-lg border p-3';
+
+  if (loading) {
+    return (
+      <div>
+        {!fullPage && <h4 className="text-sm font-medium mb-2">Konusma</h4>}
+        <div className="flex items-center justify-center py-8">
+          <Loader2Icon className="size-5 animate-spin text-muted-foreground" />
+        </div>
+      </div>
+    );
+  }
+
+  // Call transcript
+  if (sourceType === 'call' && transcript && transcript.length > 0) {
+    return (
+      <div>
+        {!fullPage && <h4 className="text-sm font-medium mb-2">Konusma</h4>}
+        <div className={containerClass}>
+          {transcript.map((msg, i) => (
+            <div key={i} className={`flex items-end gap-1.5 ${msg.isAgent ? 'justify-end' : 'justify-start'}`}>
+              {!msg.isAgent && (
+                <div className="size-6 rounded-full bg-secondary text-secondary-foreground flex items-center justify-center shrink-0">
+                  <UserIcon className="size-3" />
+                </div>
+              )}
+              <div className={`max-w-[70%] rounded-xl px-3 py-1.5 text-xs ${
+                msg.isAgent
+                  ? 'bg-primary text-primary-foreground rounded-br-sm'
+                  : 'bg-muted text-foreground rounded-bl-sm'
+              }`}>
+                {msg.text}
+              </div>
+              {msg.isAgent && (
+                <div className="size-6 rounded-full bg-primary/10 text-primary flex items-center justify-center shrink-0">
+                  <BotIcon className="size-3" />
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // WhatsApp messages
+  if (sourceType === 'whatsapp' && messages.length > 0) {
+    return (
+      <div>
+        {!fullPage && <h4 className="text-sm font-medium mb-2">Konusma</h4>}
+        <div
+          ref={scrollRef}
+          className={fullPage ? 'max-h-[calc(100vh-14rem)] overflow-y-auto space-y-1.5 pr-1' : 'max-h-[400px] overflow-y-auto space-y-1.5 rounded-lg border p-3'}
+        >
+          {hasMore && (
+            <div className="flex justify-center py-2">
+              <button
+                onClick={loadMore}
+                disabled={loadingMore}
+                className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
+              >
+                {loadingMore ? (
+                  <Loader2Icon className="size-3 animate-spin" />
+                ) : (
+                  <ChevronUpIcon className="size-3" />
+                )}
+                {loadingMore ? 'Yukleniyor...' : `Eski mesajlari yukle (${totalMessages - messages.length} daha)`}
+              </button>
+            </div>
+          )}
+          {messageElements}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {!fullPage && <h4 className="text-sm font-medium mb-2">Konusma</h4>}
+      <p className="text-sm text-muted-foreground">Konusma bulunamadi</p>
+    </div>
+  );
+}

package/web/src/components/ProtectedRoute.tsx

@@ -0,0 +1,20 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+
+export default function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <div className="text-gray-500">Yukleniyor...</div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <>{children}</>;
+}

package/web/src/components/conversation-review/CardAudioPlayer.tsx

@@ -0,0 +1,200 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import api from '@/lib/api';
+import { PlayIcon, PauseIcon, Loader2Icon } from 'lucide-react';
+
+export interface AudioPlayerHandle {
+  play: () => void;
+  pause: () => void;
+  toggle: () => void;
+}
+
+interface CardAudioPlayerProps {
+  conversationId: string;
+  isActive: boolean;
+  isPrefetch: boolean;
+  onEnded?: () => void;
+}
+
+function formatTime(secs: number): string {
+  const m = Math.floor(secs / 60);
+  const s = Math.floor(secs % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+const CardAudioPlayer = forwardRef<AudioPlayerHandle, CardAudioPlayerProps>(
+  ({ conversationId, isActive, isPrefetch, onEnded }, ref) => {
+    const audioRef = useRef<HTMLAudioElement | null>(null);
+    const blobUrlRef = useRef<string | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [loaded, setLoaded] = useState(false);
+    const [playing, setPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [error, setError] = useState<string | null>(null);
+    const fetchedRef = useRef(false);
+
+    // Fetch audio blob once when isPrefetch becomes true
+    useEffect(() => {
+      if (!isPrefetch || fetchedRef.current) return;
+      fetchedRef.current = true;
+      setLoading(true);
+      setError(null);
+
+      console.log('[AudioPlayer] Fetching audio for', conversationId);
+
+      api
+        .get(`/admin/elevenlabs/conversations/${conversationId}/audio`, {
+          responseType: 'arraybuffer',
+        })
+        .then(({ data, headers }) => {
+          console.log('[AudioPlayer] Got audio data', conversationId, { size: data?.byteLength });
+
+          const contentType = headers?.['content-type'] || 'audio/mpeg';
+          const mimeType = contentType.includes('audio') ? contentType : 'audio/mpeg';
+          const blob = new Blob([data], { type: mimeType });
+          const url = URL.createObjectURL(blob);
+          blobUrlRef.current = url;
+
+          const audio = new Audio();
+          audio.preload = 'auto';
+          audio.src = url;
+
+          const markLoaded = () => {
+            setDuration(audio.duration && isFinite(audio.duration) ? audio.duration : 0);
+            setLoaded(true);
+            setLoading(false);
+          };
+
+          audio.addEventListener('loadedmetadata', markLoaded);
+          audio.addEventListener('canplay', markLoaded);
+
+          // Fallback: mark loaded after 2s regardless
+          setTimeout(markLoaded, 2000);
+
+          audio.addEventListener('timeupdate', () => {
+            setCurrentTime(audio.currentTime);
+            if (audio.duration && isFinite(audio.duration)) {
+              setDuration(audio.duration);
+            }
+          });
+
+          audio.addEventListener('ended', () => {
+            setPlaying(false);
+            onEnded?.();
+          });
+
+          audio.addEventListener('play', () => setPlaying(true));
+          audio.addEventListener('pause', () => setPlaying(false));
+          audio.addEventListener('error', () => {
+            setError('Ses kaynagi yuklenemedi');
+            setLoading(false);
+          });
+
+          audioRef.current = audio;
+        })
+        .catch((err) => {
+          console.error('[AudioPlayer] Fetch failed', conversationId, err);
+          setError('Ses yuklenemedi');
+          setLoading(false);
+        });
+    }, [isPrefetch, conversationId, onEnded]);
+
+    // Autoplay when scrolled into view, pause when scrolled away
+    useEffect(() => {
+      if (isActive && loaded && audioRef.current) {
+        audioRef.current.play().catch(() => {});
+      }
+      if (!isActive && audioRef.current) {
+        audioRef.current.pause();
+      }
+    }, [isActive, loaded]);
+
+    // Cleanup blob URL on unmount
+    useEffect(() => {
+      return () => {
+        if (blobUrlRef.current) {
+          URL.revokeObjectURL(blobUrlRef.current);
+        }
+      };
+    }, []);
+
+    const play = useCallback(() => {
+      audioRef.current?.play().catch((err) => {
+        console.warn('Play failed:', err.message);
+      });
+    }, []);
+
+    const pause = useCallback(() => {
+      audioRef.current?.pause();
+    }, []);
+
+    const toggle = useCallback(() => {
+      if (!audioRef.current) return;
+      if (audioRef.current.paused) {
+        audioRef.current.play().catch((err) => {
+          console.warn('Toggle play failed:', err.message);
+        });
+      } else {
+        audioRef.current.pause();
+      }
+    }, []);
+
+    useImperativeHandle(ref, () => ({ play, pause, toggle }), [play, pause, toggle]);
+
+    const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = parseFloat(e.target.value);
+      if (audioRef.current) {
+        audioRef.current.currentTime = val;
+        setCurrentTime(val);
+      }
+    };
+
+    const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+
+    return (
+      <div className="w-full flex items-center gap-2">
+        <button
+          onClick={toggle}
+          disabled={!loaded}
+          className="size-8 rounded-full bg-muted hover:bg-muted/80 transition-colors flex items-center justify-center disabled:opacity-40 shrink-0"
+        >
+          {loading ? (
+            <Loader2Icon className="size-3.5 animate-spin" />
+          ) : playing ? (
+            <PauseIcon className="size-3.5" />
+          ) : (
+            <PlayIcon className="size-3.5 ml-0.5" />
+          )}
+        </button>
+
+        <div className="relative flex-1 h-5 flex items-center cursor-pointer" onClick={(e) => {
+          if (!loaded || !audioRef.current || !duration) return;
+          const rect = e.currentTarget.getBoundingClientRect();
+          const pct = (e.clientX - rect.left) / rect.width;
+          audioRef.current.currentTime = pct * duration;
+          setCurrentTime(pct * duration);
+        }}>
+          <div className="absolute inset-x-0 h-1 rounded-full bg-muted" />
+          <div className="absolute left-0 h-1 rounded-full bg-foreground/40" style={{ width: `${progress}%` }} />
+        </div>
+
+        <span className="text-[10px] text-muted-foreground font-mono shrink-0">
+          {formatTime(currentTime)}/{formatTime(duration)}
+        </span>
+
+        {error && <span className="text-[10px] text-red-400">{error}</span>}
+      </div>
+    );
+  }
+);
+
+CardAudioPlayer.displayName = 'CardAudioPlayer';
+
+export default CardAudioPlayer;