elevenlabs-webhook-nodejs 1.0.0

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

@@ -0,0 +1,351 @@
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import api from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Textarea } from '@/components/ui/textarea';
+import { StarIcon, Trash2Icon, Loader2Icon } from 'lucide-react';
+import { toast } from 'sonner';
+import confetti from 'canvas-confetti';
+
+export interface Evaluation {
+  conversation_id: string;
+  evaluator_name: string;
+  patient_audio_quality: number;
+  ai_comprehension: number;
+  ai_speech_quality: number;
+  ai_content_quality: number;
+  no_unnecessary_content: number;
+  patient_reached_goal: number;
+  overall_score: number;
+  notes: string;
+}
+
+interface CardEvaluationProps {
+  conversationId: string;
+  evaluation: Evaluation | null;
+  onSaved: (evaluation: Evaluation) => void;
+  onDeleted: () => void;
+  onNext?: () => void;
+}
+
+const CRITERIA: { key: keyof Omit<Evaluation, 'conversation_id' | 'evaluator_name' | 'overall_score' | 'notes'>; label: string }[] = [
+  { key: 'patient_audio_quality', label: 'Hasta Ses Kalitesi' },
+  { key: 'ai_comprehension', label: 'YZ Anlama' },
+  { key: 'ai_speech_quality', label: 'YZ Konusma' },
+  { key: 'ai_content_quality', label: 'YZ Icerik Kalitesi' },
+  { key: 'no_unnecessary_content', label: 'Gereksiz Icerik Yok' },
+  { key: 'patient_reached_goal', label: 'Sonuca Ulasma' },
+];
+
+function StarRating({
+  value,
+  onChange,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+}) {
+  const [hovered, setHovered] = useState(0);
+  const [justClicked, setJustClicked] = useState(0);
+
+  const handleClick = (star: number) => {
+    onChange(star);
+    setJustClicked(star);
+    setTimeout(() => setJustClicked(0), 600);
+  };
+
+  const display = hovered || value;
+
+  return (
+    <div className="flex gap-0.5" onMouseLeave={() => setHovered(0)}>
+      {[1, 2, 3, 4, 5].map((star) => {
+        const filled = star <= display;
+        const isClicked = star <= justClicked && justClicked > 0;
+
+        return (
+          <button
+            key={star}
+            type="button"
+            onClick={() => handleClick(star)}
+            onMouseEnter={() => setHovered(star)}
+            className="p-1 transition-transform hover:scale-125 active:scale-90"
+            style={{
+              animationDelay: isClicked ? `${(star - 1) * 50}ms` : undefined,
+            }}
+          >
+            <StarIcon
+              className={`size-6 transition-all duration-200 ${
+                filled
+                  ? 'text-yellow-400 fill-yellow-400 drop-shadow-[0_0_4px_rgba(250,204,21,0.6)]'
+                  : 'text-gray-300 hover:text-yellow-200'
+              } ${isClicked ? 'animate-bounce' : ''}`}
+              style={isClicked ? {
+                animationDuration: '0.4s',
+                animationDelay: `${(star - 1) * 50}ms`,
+              } : undefined}
+            />
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export default function CardEvaluation({
+  conversationId,
+  evaluation,
+  onSaved,
+  onDeleted,
+  onNext,
+}: CardEvaluationProps) {
+  const [ratings, setRatings] = useState<Record<string, number>>({
+    patient_audio_quality: 0,
+    ai_comprehension: 0,
+    ai_speech_quality: 0,
+    ai_content_quality: 0,
+    no_unnecessary_content: 0,
+    patient_reached_goal: 0,
+  });
+  const [notes, setNotes] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [savedFlash, setSavedFlash] = useState(false);
+  const [dirty, setDirty] = useState(false);
+
+  // Pre-fill from existing evaluation on mount only — don't reset after user saves
+  const mountedRef = useRef(false);
+  useEffect(() => {
+    if (mountedRef.current) return;
+    mountedRef.current = true;
+    if (evaluation) {
+      setRatings({
+        patient_audio_quality: evaluation.patient_audio_quality || 0,
+        ai_comprehension: evaluation.ai_comprehension || 0,
+        ai_speech_quality: evaluation.ai_speech_quality || 0,
+        ai_content_quality: evaluation.ai_content_quality || 0,
+        no_unnecessary_content: evaluation.no_unnecessary_content || 0,
+        patient_reached_goal: evaluation.patient_reached_goal || 0,
+      });
+      setNotes(evaluation.notes || '');
+      setDirty(false);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const overallScore = useMemo(() => {
+    const values = Object.values(ratings);
+    const filled = values.filter((v) => v > 0);
+    if (filled.length === 0) return 0;
+    return parseFloat((filled.reduce((a, b) => a + b, 0) / filled.length).toFixed(1));
+  }, [ratings]);
+
+  const handleRatingChange = useCallback((key: string, value: number) => {
+    setRatings((prev) => ({ ...prev, [key]: value }));
+    setDirty(true);
+  }, []);
+
+  const handleNotesChange = useCallback((value: string) => {
+    setNotes(value);
+    setDirty(true);
+  }, []);
+
+  // Streak counter — persisted in localStorage
+  const getStreak = (): number => {
+    try { return parseInt(localStorage.getItem('eval_streak') || '0', 10); } catch { return 0; }
+  };
+  const setStreak = (n: number) => {
+    try { localStorage.setItem('eval_streak', String(n)); } catch {}
+  };
+  const [streak, setStreakState] = useState(getStreak);
+
+  // Haptic feedback — intensity scales with overall score
+  const haptic = (score: number) => {
+    if (!navigator.vibrate) return;
+    if (score >= 4.5) {
+      navigator.vibrate([30, 50, 30, 50, 60]); // excited triple pulse
+    } else if (score >= 3) {
+      navigator.vibrate([40, 30, 40]); // solid double tap
+    } else {
+      navigator.vibrate(30); // gentle single tap
+    }
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const payload = {
+        ...ratings,
+        overall_score: overallScore,
+        notes,
+      };
+      // Claim first (prevents other admins from rating same conversation)
+      await api.post(`/admin/elevenlabs/conversations/${conversationId}/claim`).catch(() => {});
+
+      const { data } = await api.put(
+        `/admin/elevenlabs/conversations/${conversationId}/evaluation`,
+        payload
+      );
+      toast.success('Degerlendirme kaydedildi');
+      setDirty(false);
+      setSavedFlash(true);
+      setTimeout(() => setSavedFlash(false), 2000);
+
+      // Bump streak
+      const newStreak = streak + 1;
+      setStreakState(newStreak);
+      setStreak(newStreak);
+
+      // Haptic
+      haptic(overallScore);
+
+      // Fire confetti burst — double shot for extra dopamine
+      const burst = (opts: confetti.Options) => confetti({ ...opts, disableForReducedMotion: true });
+      burst({ particleCount: 60, spread: 55, origin: { x: 0.4, y: 0.7 }, colors: ['#facc15', '#f59e0b', '#eab308'] });
+      setTimeout(() => {
+        burst({ particleCount: 40, spread: 70, origin: { x: 0.6, y: 0.65 }, colors: ['#22c55e', '#10b981', '#34d399'] });
+      }, 150);
+
+      // Extra burst for high scores
+      if (overallScore >= 4.5) {
+        setTimeout(() => {
+          burst({ particleCount: 30, spread: 100, origin: { y: 0.5 }, scalar: 1.5, shapes: ['circle'], colors: ['#facc15', '#f97316', '#ef4444', '#8b5cf6', '#06b6d4'] });
+        }, 300);
+      }
+
+      // Milestone confetti at streak 5, 10, 25, 50...
+      if (newStreak === 5 || newStreak === 10 || newStreak === 25 || newStreak % 50 === 0) {
+        setTimeout(() => {
+          burst({ particleCount: 150, spread: 120, origin: { y: 0.4 }, scalar: 1.2 });
+        }, 500);
+      }
+
+      onSaved(data);
+
+      // Auto-scroll to next card after a brief moment
+      if (onNext) {
+        setTimeout(() => onNext(), 800);
+      }
+    } catch (err: any) {
+      console.error('[Evaluation] Save failed:', err);
+      toast.error('Kaydetme basarisiz: ' + (err?.response?.data?.error || err?.message || 'Bilinmeyen hata'));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    setDeleting(true);
+    try {
+      await api.delete(
+        `/admin/elevenlabs/conversations/${conversationId}/evaluation`
+      );
+      onDeleted();
+    } catch (err: any) {
+      toast.error('Silme basarisiz');
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const [skipping, setSkipping] = useState(false);
+  const handleSkip = async () => {
+    setSkipping(true);
+    try {
+      const { data } = await api.post(
+        `/admin/elevenlabs/conversations/${conversationId}/skip`,
+        { notes }
+      );
+      // Bump streak
+      const newStreak = streak + 1;
+      setStreakState(newStreak);
+      setStreak(newStreak);
+      onSaved(data);
+      if (onNext) setTimeout(() => onNext(), 400);
+    } catch (err: any) {
+      toast.error('Atlama basarisiz');
+    } finally {
+      setSkipping(false);
+    }
+  };
+
+  return (
+    <div className="w-full space-y-2">
+      {/* Criteria rows — compact grid */}
+      <div className="grid gap-1">
+        {CRITERIA.map(({ key, label }) => (
+          <div key={key} className="flex items-center justify-between gap-2">
+            <span className="text-xs text-muted-foreground shrink-0">{label}</span>
+            <StarRating
+              value={ratings[key]}
+              onChange={(v) => handleRatingChange(key, v)}
+            />
+          </div>
+        ))}
+      </div>
+
+      {/* Overall Score + Notes in a row on mobile */}
+      <div className="flex items-center gap-2">
+        <Badge
+          key={overallScore}
+          variant={overallScore >= 4 ? 'default' : overallScore >= 2.5 ? 'secondary' : 'outline'}
+          className={`text-sm px-2 py-0.5 shrink-0 transition-all duration-300 ${
+            overallScore >= 4
+              ? 'shadow-[0_0_8px_rgba(34,197,94,0.5)] animate-pulse'
+              : overallScore > 0
+                ? 'animate-bounce'
+                : ''
+          }`}
+          style={overallScore > 0 ? { animationDuration: '0.5s', animationIterationCount: '1' } : undefined}
+        >
+          {overallScore > 0 ? overallScore.toFixed(1) : '-'}
+        </Badge>
+        <Textarea
+          placeholder="Notlar (opsiyonel)"
+          value={notes}
+          onChange={(e) => handleNotesChange(e.target.value)}
+          className="min-h-20 text-xs flex-1 resize-none"
+          rows={3}
+        />
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 flex-wrap">
+          <Button onClick={handleSave} disabled={saving} className="h-10 text-sm px-6 font-semibold">
+            {saving && <Loader2Icon className="size-4 animate-spin" />}
+            Kaydet
+          </Button>
+          <Button onClick={handleSkip} disabled={skipping} variant="outline" className="h-10 text-sm px-4">
+            {skipping && <Loader2Icon className="size-4 animate-spin" />}
+            Degerlendirilemez
+          </Button>
+          {savedFlash && (
+            <span className="text-[10px] text-green-600 font-medium">Kaydedildi ✓</span>
+          )}
+          {dirty && !savedFlash && (
+            <span className="text-[10px] text-amber-500">Kaydedilmemis</span>
+          )}
+          {streak > 0 && (
+            <span className={`text-[10px] font-bold ${
+              streak >= 25 ? 'text-purple-500' :
+              streak >= 10 ? 'text-orange-500' :
+              streak >= 5 ? 'text-yellow-500' :
+              'text-muted-foreground'
+            }`}>
+              🔥 {streak}
+            </span>
+          )}
+        </div>
+
+        {evaluation && (
+          <button
+            onClick={handleDelete}
+            disabled={deleting}
+            className="text-[10px] text-destructive hover:underline disabled:opacity-50"
+          >
+            {deleting ? '...' : 'Sil'}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+import { Badge } from '@/components/ui/badge';
+import { PhoneIcon, CalendarIcon } from 'lucide-react';
+
+interface CardMetadataProps {
+  agentName: string;
+  externalNumber: string | null;
+  startTimeUnixSecs: number;
+}
+
+function formatDate(unix: number): string {
+  return new Date(unix * 1000).toLocaleString('tr-TR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export default function CardMetadata({
+  agentName,
+  externalNumber,
+  startTimeUnixSecs,
+}: CardMetadataProps) {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-1.5">
+      <Badge variant="outline" className="gap-1 text-[10px] py-0">
+        {agentName}
+      </Badge>
+
+      {externalNumber && (
+        <Badge variant="outline" className="gap-1 font-mono text-[10px] py-0">
+          <PhoneIcon className="size-2.5" />
+          {externalNumber}
+        </Badge>
+      )}
+
+      <Badge variant="outline" className="gap-1 text-[10px] py-0">
+        <CalendarIcon className="size-2.5" />
+        {formatDate(startTimeUnixSecs)}
+      </Badge>
+    </div>
+  );
+}

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

@@ -0,0 +1,95 @@
+import { useRef, forwardRef, useImperativeHandle } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import CardMetadata from '@/components/conversation-review/CardMetadata';
+import CardAudioPlayer, {
+  type AudioPlayerHandle,
+} from '@/components/conversation-review/CardAudioPlayer';
+import CardEvaluation, {
+  type Evaluation,
+} from '@/components/conversation-review/CardEvaluation';
+
+export interface ReviewConversation {
+  conversationId: string;
+  agentName: string;
+  callDurationSecs: number;
+  direction: string;
+  callSuccessful: string;
+  cost: number | null;
+  externalNumber: string | null;
+  startTimeUnixSecs: number;
+  transcriptSummary: string;
+  hasAudio: boolean;
+  hasEvaluation: boolean;
+  evaluation: Evaluation | null;
+}
+
+export interface CardHandle {
+  play: () => void;
+  pause: () => void;
+  toggle: () => void;
+  scrollIntoView: () => void;
+}
+
+interface ConversationCardProps {
+  conversation: ReviewConversation;
+  isActive: boolean;
+  isPrefetch: boolean;
+  onEvaluationChanged: (evaluation: Evaluation | null) => void;
+  onNext?: () => void;
+}
+
+const ConversationCard = forwardRef<CardHandle, ConversationCardProps>(
+  ({ conversation, isActive, isPrefetch, onEvaluationChanged, onNext }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const audioRef = useRef<AudioPlayerHandle>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: () => audioRef.current?.play(),
+        pause: () => audioRef.current?.pause(),
+        toggle: () => audioRef.current?.toggle(),
+        scrollIntoView: () =>
+          containerRef.current?.scrollIntoView({ behavior: 'smooth' }),
+      }),
+      []
+    );
+
+    return (
+      <div ref={containerRef} className="h-full snap-start flex-shrink-0 flex justify-center p-2 sm:p-4">
+        <Card className="w-full max-w-[600px] h-full overflow-y-auto">
+          <CardContent className="flex flex-col items-center justify-between gap-4 p-4 sm:p-6 flex-1">
+            {/* Top: Metadata badges */}
+            <CardMetadata
+              agentName={conversation.agentName}
+              externalNumber={conversation.externalNumber}
+              startTimeUnixSecs={conversation.startTimeUnixSecs}
+            />
+
+            {/* Center: Audio Player */}
+            <CardAudioPlayer
+              ref={audioRef}
+              conversationId={conversation.conversationId}
+              isActive={isActive}
+              isPrefetch={isPrefetch}
+            />
+
+            {/* Bottom: Evaluation */}
+            <CardEvaluation
+              conversationId={conversation.conversationId}
+              evaluation={conversation.evaluation}
+              onSaved={(ev) => onEvaluationChanged(ev)}
+              onDeleted={() => onEvaluationChanged(null)}
+              onNext={onNext}
+            />
+
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+);
+
+ConversationCard.displayName = 'ConversationCard';
+
+export default ConversationCard;

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

@@ -0,0 +1,120 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+import ConversationCard, {
+  type CardHandle,
+  type ReviewConversation,
+} from '@/components/conversation-review/ConversationCard';
+import type { Evaluation } from '@/components/conversation-review/CardEvaluation';
+
+interface ReviewContainerProps {
+  conversations: ReviewConversation[];
+  hasMore: boolean;
+  onLoadMore: () => void;
+  onEvaluationChanged: (conversationId: string, evaluation: Evaluation | null) => void;
+}
+
+export default function ReviewContainer({
+  conversations,
+  hasMore,
+  onLoadMore,
+  onEvaluationChanged,
+}: ReviewContainerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const cardRefs = useRef<Map<number, CardHandle>>(new Map());
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  // IntersectionObserver for active card detection
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const idx = Number(entry.target.getAttribute('data-index'));
+            if (!isNaN(idx)) setActiveIndex(idx);
+          }
+        }
+      },
+      { root: container, threshold: 0.6 }
+    );
+
+    const children = container.querySelectorAll('[data-index]');
+    children.forEach((child) => observer.observe(child));
+
+    return () => observer.disconnect();
+  }, [conversations.length]);
+
+  // Load more when user reaches the last 2 cards
+  useEffect(() => {
+    if (hasMore && conversations.length > 0 && activeIndex >= conversations.length - 2) {
+      onLoadMore();
+    }
+  }, [activeIndex, conversations.length, hasMore, onLoadMore]);
+
+  // Keyboard navigation
+  const scrollTo = useCallback(
+    (index: number) => {
+      const clamped = Math.max(0, Math.min(index, conversations.length - 1));
+      cardRefs.current.get(clamped)?.scrollIntoView();
+    },
+    [conversations.length]
+  );
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't intercept when focus is in a textarea or input
+      const tag = (e.target as HTMLElement).tagName;
+      if (tag === 'TEXTAREA' || tag === 'INPUT') return;
+
+      if (e.key === 'ArrowDown' || e.key === 'j') {
+        e.preventDefault();
+        scrollTo(activeIndex + 1);
+      } else if (e.key === 'ArrowUp' || e.key === 'k') {
+        e.preventDefault();
+        scrollTo(activeIndex - 1);
+      } else if (e.key === ' ') {
+        e.preventDefault();
+        cardRefs.current.get(activeIndex)?.toggle();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [activeIndex, scrollTo]);
+
+  const setCardRef = useCallback((index: number, handle: CardHandle | null) => {
+    if (handle) {
+      cardRefs.current.set(index, handle);
+    } else {
+      cardRefs.current.delete(index);
+    }
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className="flex-1 min-h-0 overflow-y-scroll snap-y snap-mandatory scroll-smooth"
+    >
+      {conversations.map((conv, i) => (
+        <div key={conv.conversationId} data-index={i} className="h-full">
+          <ConversationCard
+            ref={(handle) => setCardRef(i, handle)}
+            conversation={conv}
+            isActive={i === activeIndex}
+            isPrefetch={Math.abs(i - activeIndex) <= 1}
+            onEvaluationChanged={(evaluation) =>
+              onEvaluationChanged(conv.conversationId, evaluation)
+            }
+            onNext={() => {
+              if (i < conversations.length - 1) {
+                cardRefs.current.get(i + 1)?.scrollIntoView();
+              }
+            }}
+          />
+        </div>
+      ))}
+
+    </div>
+  );
+}

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

@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { FilterIcon, XIcon } from 'lucide-react';
+import api from '../../lib/api';
+
+interface Agent {
+  agent_id: string;
+  name: string;
+}
+
+interface ReviewFiltersProps {
+  filters: {
+    agent_id: string;
+    call_successful: string;
+    evaluated: string;
+  };
+  onFiltersChange: (filters: ReviewFiltersProps['filters']) => void;
+}
+
+export default function ReviewFilters({ filters, onFiltersChange }: ReviewFiltersProps) {
+  const [agents, setAgents] = useState<Agent[]>([]);
+
+  useEffect(() => {
+    api.get('/admin/elevenlabs/available-agents').then((res) => {
+      setAgents(res.data?.agents || res.data || []);
+    }).catch(() => {});
+  }, []);
+
+  const update = (key: string, value: string) => {
+    onFiltersChange({ ...filters, [key]: value });
+  };
+
+  const hasActiveFilters = filters.agent_id || filters.call_successful || filters.evaluated;
+
+  const clearAll = () => {
+    onFiltersChange({ agent_id: '', call_successful: '', evaluated: '' });
+  };
+
+  return (
+    <div className="flex items-center gap-3 flex-wrap">
+      <FilterIcon className="h-4 w-4 text-muted-foreground" />
+
+      <select
+        value={filters.agent_id}
+        onChange={(e) => update('agent_id', e.target.value)}
+        className="h-9 rounded-md border border-input bg-background px-3 text-sm"
+      >
+        <option value="">Tum Agentler</option>
+        {agents.map((a) => (
+          <option key={a.agent_id} value={a.agent_id}>{a.name}</option>
+        ))}
+      </select>
+
+      <select
+        value={filters.call_successful}
+        onChange={(e) => update('call_successful', e.target.value)}
+        className="h-9 rounded-md border border-input bg-background px-3 text-sm"
+      >
+        <option value="">Tum Sonuclar</option>
+        <option value="success">Basarili</option>
+        <option value="failure">Basarisiz</option>
+        <option value="unknown">Bilinmiyor</option>
+      </select>
+
+      <select
+        value={filters.evaluated}
+        onChange={(e) => update('evaluated', e.target.value)}
+        className="h-9 rounded-md border border-input bg-background px-3 text-sm"
+      >
+        <option value="">Tum Degerlendiremeler</option>
+        <option value="false">Degerlendirilmemis</option>
+        <option value="true">Degerlendirilmis</option>
+      </select>
+
+      {hasActiveFilters && (
+        <Button variant="ghost" size="sm" onClick={clearAll} className="h-9 gap-1">
+          <XIcon className="h-3 w-3" />
+          Temizle
+        </Button>
+      )}
+
+      {filters.evaluated === 'false' && (
+        <Badge variant="secondary">Sadece degerlendirilmemis</Badge>
+      )}
+    </div>
+  );
+}