elevenlabs-webhook-nodejs 1.0.0

package/web/src/pages/admin/AdminWhatsAppTestChat.tsx

@@ -0,0 +1,328 @@
+import { useEffect, useRef, useState } from 'react';
+import api from '../../lib/api';
+import { PageHeader } from '@/components/page-header';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { toast } from 'sonner';
+import {
+  BotIcon,
+  UserIcon,
+  SendIcon,
+  Loader2Icon,
+  PlayIcon,
+  SquareIcon,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface WhatsAppAgent {
+  tenant_id: string;
+  tenant_name: string;
+  agent_id: string;
+  elevenlabs_agent_id: string;
+  is_active: boolean;
+  connected_phone: string | null;
+}
+
+interface ContactProfile {
+  _id: string;
+  display_name: string;
+  phone: string;
+  ai_summary: string;
+  tags: string[];
+  total_sessions: number;
+}
+
+interface Message {
+  id: number;
+  role: 'user' | 'ai';
+  text: string;
+}
+
+export default function AdminWhatsAppTestChat() {
+  const [agents, setAgents] = useState<WhatsAppAgent[]>([]);
+  const [profiles, setProfiles] = useState<ContactProfile[]>([]);
+  const [selectedAgentIdx, setSelectedAgentIdx] = useState('');
+  const [selectedProfileId, setSelectedProfileId] = useState('');
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [conversationId, setConversationId] = useState<string | null>(null);
+  const [starting, setStarting] = useState(false);
+  const [ending, setEnding] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [messageText, setMessageText] = useState('');
+  const [messages, setMessages] = useState<Message[]>([]);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const nextId = useRef(0);
+
+  useEffect(() => {
+    loadAgents();
+    loadProfiles();
+  }, []);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  async function loadAgents() {
+    try {
+      const { data } = await api.get('/admin/whatsapp/agents');
+      setAgents(data.agents || []);
+    } catch {
+      toast.error('WhatsApp agent listesi yuklenemedi');
+    }
+  }
+
+  async function loadProfiles(search?: string) {
+    try {
+      const params = search ? `?search=${encodeURIComponent(search)}&limit=50` : '?limit=50';
+      const { data } = await api.get(`/admin/whatsapp/contact-profiles${params}`);
+      setProfiles(data.profiles || []);
+    } catch {
+      toast.error('Profil listesi yuklenemedi');
+    }
+  }
+
+  const selectedAgent = selectedAgentIdx ? agents[parseInt(selectedAgentIdx, 10)] : null;
+
+  async function handleStart() {
+    if (!selectedAgent) return;
+    setStarting(true);
+    try {
+      const body: Record<string, string> = {
+        agent_id: selectedAgent.elevenlabs_agent_id,
+      };
+      if (selectedProfileId) {
+        body.contact_profile_id = selectedProfileId;
+      }
+      const { data } = await api.post('/admin/whatsapp/test-chat/start', body);
+      setSessionId(data.session_id);
+      setConversationId(data.conversation_id);
+      setMessages([]);
+      toast.success(
+        selectedProfileId
+          ? 'Oturum baslatildi (profil konteksti gonderildi)'
+          : 'Oturum baslatildi'
+      );
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Oturum baslatilamadi');
+    } finally {
+      setStarting(false);
+    }
+  }
+
+  async function handleEnd() {
+    if (!sessionId) return;
+    setEnding(true);
+    try {
+      await api.post('/admin/whatsapp/test-chat/end', { session_id: sessionId });
+      setSessionId(null);
+      setConversationId(null);
+      toast.success('Oturum sonlandirildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setEnding(false);
+    }
+  }
+
+  async function handleSend() {
+    if (!sessionId || !messageText.trim()) return;
+    const text = messageText.trim();
+    setMessageText('');
+
+    const userMsg: Message = { id: nextId.current++, role: 'user', text };
+    setMessages((prev) => [...prev, userMsg]);
+
+    setSending(true);
+    try {
+      const { data } = await api.post('/admin/whatsapp/test-chat/message', {
+        session_id: sessionId,
+        text,
+      });
+      const aiMsg: Message = { id: nextId.current++, role: 'ai', text: data.response };
+      setMessages((prev) => [...prev, aiMsg]);
+    } catch (err: any) {
+      const errMsg = err.response?.data?.error || 'Yanit alinamadi';
+      toast.error(errMsg);
+      if (errMsg.includes('not found') || errMsg.includes('closed')) {
+        setSessionId(null);
+        setConversationId(null);
+      }
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-3rem)]">
+      <PageHeader title="WhatsApp Agent Test Chat" />
+
+      {/* Controls */}
+      <div className="flex items-center gap-3 mb-4 shrink-0 flex-wrap">
+        <Select value={selectedAgentIdx} onValueChange={setSelectedAgentIdx} disabled={!!sessionId}>
+          <SelectTrigger className="w-[320px]">
+            <SelectValue placeholder="Agent secin" />
+          </SelectTrigger>
+          <SelectContent>
+            {agents.map((a, idx) => (
+              <SelectItem key={a.elevenlabs_agent_id} value={String(idx)}>
+                <span className="flex items-center gap-2">
+                  {a.tenant_name}
+                  {a.connected_phone && (
+                    <span className="text-muted-foreground font-mono text-xs">
+                      {a.connected_phone}
+                    </span>
+                  )}
+                  {!a.is_active && (
+                    <Badge variant="destructive" className="text-[9px] px-1 py-0">
+                      Pasif
+                    </Badge>
+                  )}
+                </span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Select value={selectedProfileId} onValueChange={setSelectedProfileId} disabled={!!sessionId}>
+          <SelectTrigger className="w-[320px]">
+            <SelectValue placeholder="Profil secin (opsiyonel)" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="none">Profil yok</SelectItem>
+            {profiles.map((p) => (
+              <SelectItem key={p._id} value={p._id}>
+                <span className="flex items-center gap-2">
+                  <span>{p.display_name || 'Isimsiz'}</span>
+                  <span className="text-muted-foreground font-mono text-xs">{p.phone}</span>
+                  {p.total_sessions > 0 && (
+                    <span className="text-muted-foreground text-[10px]">
+                      ({p.total_sessions} oturum)
+                    </span>
+                  )}
+                </span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {!sessionId ? (
+          <Button onClick={handleStart} disabled={starting || !selectedAgent}>
+            {starting ? (
+              <Loader2Icon className="size-4 animate-spin mr-2" />
+            ) : (
+              <PlayIcon className="size-4 mr-2" />
+            )}
+            Baslat
+          </Button>
+        ) : (
+          <Button variant="destructive" onClick={handleEnd} disabled={ending}>
+            {ending ? (
+              <Loader2Icon className="size-4 animate-spin mr-2" />
+            ) : (
+              <SquareIcon className="size-4 mr-2" />
+            )}
+            Sonlandir
+          </Button>
+        )}
+
+        {conversationId && (
+          <span className="text-xs text-muted-foreground font-mono ml-auto">
+            conv: {conversationId}
+          </span>
+        )}
+      </div>
+
+      {/* Chat Area — WhatsApp themed */}
+      <Card className="flex-1 overflow-hidden bg-[#efeae2] dark:bg-zinc-900 border-emerald-200 dark:border-zinc-700">
+        <CardContent className="h-full flex flex-col p-0">
+          <div className="flex-1 overflow-y-auto p-4 space-y-3">
+            {!sessionId && messages.length === 0 ? (
+              <p className="text-center text-muted-foreground py-8">
+                Agent secin ve oturum baslatin. Opsiyonel olarak bir musteri profili secebilirsiniz.
+              </p>
+            ) : messages.length === 0 ? (
+              <p className="text-center text-muted-foreground py-8">
+                Oturum aktif. Musteri gibi mesaj gonderin.
+              </p>
+            ) : (
+              messages.map((msg) => (
+                <div
+                  key={msg.id}
+                  className={cn('flex', msg.role === 'user' ? 'justify-end' : 'justify-start')}
+                >
+                  <div
+                    className={cn(
+                      'max-w-[75%] rounded-lg px-3 py-2 text-sm shadow-sm',
+                      msg.role === 'user'
+                        ? 'bg-emerald-100 text-emerald-900 dark:bg-emerald-900/50 dark:text-emerald-100'
+                        : 'bg-white text-foreground dark:bg-zinc-800'
+                    )}
+                  >
+                    <div className="flex items-center gap-1.5 mb-0.5">
+                      {msg.role === 'user' ? (
+                        <UserIcon className="size-3 opacity-60" />
+                      ) : (
+                        <BotIcon className="size-3 opacity-60" />
+                      )}
+                      <span className="text-[10px] font-medium opacity-60">
+                        {msg.role === 'user' ? 'Musteri (Sen)' : 'AI Agent'}
+                      </span>
+                    </div>
+                    <p className="whitespace-pre-wrap break-words">{msg.text}</p>
+                  </div>
+                </div>
+              ))
+            )}
+            {sending && (
+              <div className="flex justify-start">
+                <div className="bg-white dark:bg-zinc-800 rounded-lg px-3 py-2 text-sm shadow-sm">
+                  <Loader2Icon className="size-4 animate-spin text-muted-foreground" />
+                </div>
+              </div>
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+
+          {/* Input */}
+          <div className="border-t bg-background p-3 shrink-0">
+            {sessionId ? (
+              <div className="flex gap-2">
+                <Input
+                  value={messageText}
+                  onChange={(e) => setMessageText(e.target.value)}
+                  placeholder="Musteri olarak mesaj yazin..."
+                  onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && handleSend()}
+                  disabled={sending}
+                />
+                <Button
+                  onClick={handleSend}
+                  disabled={sending || !messageText.trim()}
+                  className="bg-emerald-600 hover:bg-emerald-700"
+                >
+                  {sending ? (
+                    <Loader2Icon className="size-4 animate-spin" />
+                  ) : (
+                    <SendIcon className="size-4" />
+                  )}
+                </Button>
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground text-center py-1">
+                Mesaj gondermek icin once oturum baslatin.
+              </p>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/web/src/types/index.ts

@@ -0,0 +1,242 @@
+export type UserRole = 'superadmin' | 'admin' | 'manager' | 'viewer';
+export type Feature = 'inbound_agent' | 'outbound_campaigns' | 'survey_builder' | 'whatsapp_notifications' | 'whatsapp_agent' | 'google_calendar' | 'operator_workflow' | 'sms_notifications' | 'appointment_validation' | 'inbound_call_schedule' | 'voice_transcription';
+
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  role: UserRole;
+}
+
+export interface WhatsAppAgentSettings {
+  unipile_account_id: string | null;
+  unipile_account_status: string | null;
+  agent_id: string | null;
+  connected_at: string | null;
+  connected_phone: string | null;
+  grace_period_seconds: number;
+  blacklisted_numbers: string[];
+}
+
+export interface TenantSettings {
+  kvkk_consent: boolean;
+  notification_recipients: string[];
+  default_language: string;
+  whatsapp_agent?: WhatsAppAgentSettings;
+}
+
+export interface Tenant {
+  id: string;
+  name: string;
+  plan: string;
+  enabled_features: Feature[];
+  settings: TenantSettings;
+}
+
+export interface AuthResponse {
+  user: User;
+  tenant: Tenant;
+  access_token: string;
+  refresh_token: string;
+}
+
+export interface Call {
+  _id: string;
+  tenant_id: string;
+  agent_id: { _id: string; phone_number: string; agent_template: string } | string;
+  campaign_id: string | null;
+  direction: 'inbound' | 'outbound';
+  caller_number: string;
+  callee_number: string;
+  duration_seconds: number;
+  start_time: string | null;
+  end_time: string | null;
+  termination_reason: string | null;
+  call_language: string | null;
+  status: 'completed' | 'failed' | 'no_answer' | 'voicemail' | 'transferred';
+  transcript?: string;
+  llm_summary: string | null;
+  sentiment: 'positive' | 'neutral' | 'negative' | null;
+  categories: string[];
+  survey_responses: SurveyResponse[] | null;
+  whatsapp_notification_sent: boolean;
+  recording_url: string | null;
+  createdAt: string;
+}
+
+export interface SurveyResponse {
+  question_id: string;
+  question_text: string;
+  answer: string;
+  parsed_value: unknown;
+}
+
+export interface CallStats {
+  total: number;
+  completed: number;
+  failed: number;
+  no_answer: number;
+  inbound: number;
+  outbound: number;
+  avg_duration: number;
+  total_duration: number;
+}
+
+export interface UsageSummary {
+  period_start: string;
+  period_end: string;
+  total_calls: number;
+  total_duration_seconds: number;
+  total_duration_minutes: number;
+  inbound_calls: number;
+  outbound_calls: number;
+  total_charges: number;
+  currency: string;
+  plan_name: string;
+  plan_slug: string;
+  included_minutes: number;
+  extra_minutes: number;
+  total_quota: number;
+  used_minutes: number;
+  remaining_minutes: number;
+  usage_percentage: number;
+  overage_minutes: number;
+  // Per-service quotas
+  included_inbound_minutes: number;
+  included_inbound_calls: number;
+  included_outbound_minutes: number;
+  included_outbound_calls: number;
+  included_wa_chats: number;
+  // Per-service usage
+  inbound_used_minutes: number;
+  inbound_used_calls: number;
+  outbound_used_minutes: number;
+  outbound_used_calls: number;
+  wa_used_chats: number;
+  // WhatsApp metrics
+  wa_billable_chats: number;
+  wa_total_sessions: number;
+  wa_total_messages: number;
+  wa_ai_messages: number;
+  wa_elevenlabs_cost: number;
+  wa_stt_count: number;
+  wa_stt_seconds: number;
+}
+
+// ─── WhatsApp Agent Types ────────────────────────────────
+
+export type ChatMode = 'ai' | 'human' | 'closed';
+export type MessageSender = 'contact' | 'ai' | 'human';
+
+export type SessionStatus = 'idle' | 'waiting' | 'resolved';
+export type BackendSessionStatus = 'waiting' | 'active' | 'resolved';
+
+export interface WhatsAppSession {
+  _id: string;
+  chat_id: string;
+  tenant_id: string;
+  status: BackendSessionStatus;
+  resolved_by: 'ai' | 'human' | 'timeout' | 'manual' | null;
+  started_at: string;
+  resolved_at: string | null;
+  grace_deadline: string | null;
+  taken_over_by: { _id: string; name: string; email: string } | null;
+  taken_over_at: string | null;
+  elevenlabs_conversation_id: string | null;
+  message_count: number;
+  llm_summary: string | null;
+  sentiment: 'positive' | 'neutral' | 'negative' | null;
+  categories: string[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface WhatsAppChat {
+  _id: string;
+  tenant_id: string;
+  unipile_chat_id: string;
+  contact_name: string;
+  contact_phone: string;
+  mode: ChatMode;
+  taken_over_by: { _id: string; name: string; email: string } | null;
+  taken_over_at: string | null;
+  last_message_at: string;
+  last_message_preview: string;
+  message_count: number;
+  session_status: SessionStatus;
+  session_started_at: string | null;
+  session_grace_deadline: string | null;
+  session_resolved_by: string | null;
+  contact_profile?: WhatsAppContactProfile | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface WhatsAppContactProfile {
+  _id: string;
+  tenant_id: string;
+  phone: string;
+  display_name: string;
+  notes: string;
+  tags: string[];
+  ai_summary: string;
+  metadata: Record<string, unknown>;
+  first_seen_at: string;
+  last_seen_at: string;
+  total_sessions: number;
+  total_messages: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface WhatsAppMessage {
+  _id: string;
+  chat_id: string;
+  session_id: string | null;
+  sender: MessageSender;
+  sender_name: string;
+  text: string;
+  media_type: string | null;
+  sent_via_unipile: boolean;
+  createdAt: string;
+}
+
+export interface WhatsAppStats {
+  totalChats: number;
+  aiChats: number;
+  humanChats: number;
+  closedChats: number;
+  waitingChats: number;
+  totalMessages: number;
+}
+
+// ─── Lead Types ────────────────────────────────
+
+export interface Lead {
+  _id: string;
+  source_type: 'call' | 'whatsapp';
+  source_id: string;
+  chat_id: string | null;
+  name: string | null;
+  phone: string;
+  service_of_interest: string | null;
+  channel: 'phone' | 'whatsapp';
+  lead_status: 'new' | 'contacted' | 'appointment_scheduled' | 'completed' | 'lost' | 'expired';
+  categories: string[];
+  summary: string | null;
+  createdAt: string;
+}
+
+// ─── Label Display Maps ────────────────────────────────
+
+export const SENTIMENT_LABELS: Record<string, string> = {
+  positive: 'Olumlu',
+  neutral: 'Notr',
+  negative: 'Olumsuz',
+};
+
+export const CATEGORY_LABELS: Record<string, string> = {
+  callback_required: 'Geri Arama',
+  appointment_inquiry: 'Randevu',
+  other: 'Diger',
+};

package/web/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/web/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/web/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/web/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3005',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  }
+})