elevenlabs-webhook-nodejs 1.0.0

package/web/src/pages/CallDetail.tsx

@@ -0,0 +1,293 @@
+import { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import api from '../lib/api';
+import type { Call } from '../types';
+import { PageLoader } from '@/components/page-loader';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { CallStatusBadge, DirectionBadge, SentimentBadge, CategoryBadge } from '@/components/status-badge';
+import {
+  ArrowLeftIcon,
+  ClockIcon,
+  PhoneIcon,
+  PhoneIncomingIcon,
+  PhoneOutgoingIcon,
+  GlobeIcon,
+  MessageSquareIcon,
+  LogOutIcon,
+  BotIcon,
+  UserIcon,
+} from 'lucide-react';
+
+function formatDuration(secs: number): string {
+  const m = Math.floor(secs / 60);
+  const s = secs % 60;
+  return m > 0 ? `${m}dk ${s}sn` : `${s}sn`;
+}
+
+function formatDate(dateStr: string | null): string {
+  if (!dateStr) return '-';
+  return new Date(dateStr).toLocaleString('tr-TR');
+}
+
+const FIELD_META: Record<string, { label: string; emoji: string }> = {
+  arayan: { label: 'Arayan', emoji: '\u{1F464}' },
+  amac: { label: 'Amac', emoji: '\u{1F4CC}' },
+  talep: { label: 'Talep', emoji: '\u{1F5D3}' },
+  durum: { label: 'Durum', emoji: '\u{1F4CB}' },
+  aksiyon: { label: 'Aksiyon', emoji: '\u{1F9ED}' },
+  // legacy fields
+  konu: { label: 'Konu', emoji: '\u{1F4CC}' },
+  yanit: { label: 'Yanit', emoji: '\u{1F4AC}' },
+  sonuc: { label: 'Sonuc', emoji: '\u{2705}' },
+  notlar: { label: 'Notlar', emoji: '\u{1F4DD}' },
+};
+
+function SummaryDisplay({ summary }: { summary: string }) {
+  try {
+    const parsed = JSON.parse(summary);
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      const entries = Object.entries(parsed).filter(([, v]) => v);
+      if (entries.length === 0) return <p className="text-sm text-muted-foreground">Ozet mevcut degil</p>;
+      return (
+        <div className="space-y-3 text-sm">
+          {entries.map(([key, val]) => {
+            const meta = FIELD_META[key] || { label: key, emoji: '' };
+            return (
+              <div key={key} className="flex gap-2">
+                {meta.emoji && <span className="shrink-0">{meta.emoji}</span>}
+                <div>
+                  <p className="text-xs text-muted-foreground font-medium">{meta.label}</p>
+                  <p>{typeof val === 'object' ? JSON.stringify(val) : String(val)}</p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      );
+    }
+  } catch {
+    // Not JSON — fall through to plain text
+  }
+  return <p className="text-sm whitespace-pre-wrap leading-relaxed">{summary}</p>;
+}
+
+function InfoRow({ label, value, icon }: { label: string; value: React.ReactNode; icon?: React.ReactNode }) {
+  return (
+    <div className="flex items-start gap-3 py-2.5 border-b last:border-0">
+      {icon && <span className="text-muted-foreground mt-0.5 shrink-0">{icon}</span>}
+      <div className="min-w-0">
+        <p className="text-xs text-muted-foreground">{label}</p>
+        <div className="text-sm font-medium mt-0.5">{value}</div>
+      </div>
+    </div>
+  );
+}
+
+function parseTranscript(transcript: string): { isAgent: boolean; text: string }[] {
+  // New format: JSON array of { role, text }
+  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 TranscriptChat({ transcript }: { transcript: string }) {
+  const messages = parseTranscript(transcript);
+
+  return (
+    <div className="space-y-3 max-h-[500px] overflow-y-auto">
+      {messages.map((msg, i) => (
+        <div key={i} className={`flex items-end gap-2 ${msg.isAgent ? 'justify-end' : 'justify-start'}`}>
+          {!msg.isAgent && (
+            <div className="size-7 rounded-full bg-secondary text-secondary-foreground flex items-center justify-center shrink-0">
+              <UserIcon className="size-3.5" />
+            </div>
+          )}
+          <div className={`max-w-[75%] rounded-2xl px-3.5 py-2 text-sm ${
+            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-7 rounded-full bg-primary/10 text-primary flex items-center justify-center shrink-0">
+              <BotIcon className="size-3.5" />
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function CallDetail() {
+  const { id } = useParams<{ id: string }>();
+  const [call, setCall] = useState<Call | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    api.get(`/calls/${id}`)
+      .then(({ data }) => setCall(data.call))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  if (loading) return <PageLoader />;
+  if (!call) return <p className="text-muted-foreground">Arama bulunamadi</p>;
+
+  return (
+    <div>
+      <Button variant="ghost" size="sm" asChild className="mb-4">
+        <Link to="/calls">
+          <ArrowLeftIcon className="size-4 mr-1" />
+          Aramalara Don
+        </Link>
+      </Button>
+
+      {/* Call Info Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+        {/* Left: Call Details */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">Arama Bilgileri</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-0">
+            <InfoRow
+              label="Arayan"
+              value={call.caller_number}
+              icon={<PhoneIncomingIcon className="size-4" />}
+            />
+            <InfoRow
+              label="Aranan"
+              value={call.callee_number}
+              icon={<PhoneOutgoingIcon className="size-4" />}
+            />
+            <InfoRow
+              label="Yon / Durum"
+              value={
+                <div className="flex gap-2">
+                  <DirectionBadge direction={call.direction} />
+                  <CallStatusBadge status={call.status} />
+                </div>
+              }
+              icon={<PhoneIcon className="size-4" />}
+            />
+            <InfoRow
+              label="Sure"
+              value={formatDuration(call.duration_seconds)}
+              icon={<ClockIcon className="size-4" />}
+            />
+            {call.termination_reason && (
+              <InfoRow
+                label="Sonlanma Nedeni"
+                value={<Badge variant="outline">{call.termination_reason}</Badge>}
+                icon={<LogOutIcon className="size-4" />}
+              />
+            )}
+            <InfoRow
+              label="WhatsApp Bildirimi"
+              value={
+                <Badge variant={call.whatsapp_notification_sent ? 'default' : 'secondary'}>
+                  {call.whatsapp_notification_sent ? 'Gonderildi' : 'Gonderilmedi'}
+                </Badge>
+              }
+              icon={<MessageSquareIcon className="size-4" />}
+            />
+          </CardContent>
+        </Card>
+
+        {/* Right: Meta */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base">Detaylar</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-0">
+            <InfoRow
+              label="Baslangic"
+              value={formatDate(call.start_time)}
+              icon={<ClockIcon className="size-4" />}
+            />
+            <InfoRow
+              label="Bitis"
+              value={formatDate(call.end_time)}
+              icon={<ClockIcon className="size-4" />}
+            />
+            {call.call_language && (
+              <InfoRow
+                label="Dil"
+                value={call.call_language}
+                icon={<GlobeIcon className="size-4" />}
+              />
+            )}
+            <InfoRow
+              label="Kayit Tarihi"
+              value={formatDate(call.createdAt)}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Labels */}
+      {(call.sentiment || (call.categories && call.categories.length > 0)) && (
+        <Card className="mb-6">
+          <CardHeader>
+            <CardTitle className="text-base">Etiketler</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              <SentimentBadge sentiment={call.sentiment} />
+              {call.categories?.map(cat => (
+                <CategoryBadge key={cat} category={cat} />
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Summary */}
+      {call.llm_summary && (
+        <Card className="mb-6">
+          <CardHeader>
+            <CardTitle>Ozet</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <SummaryDisplay summary={call.llm_summary} />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Transcript */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Transkript</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {call.transcript ? (
+            <TranscriptChat transcript={call.transcript} />
+          ) : (
+            <p className="text-sm text-muted-foreground">Transkript mevcut degil</p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/web/src/pages/CallSettings.tsx

@@ -0,0 +1,313 @@
+import { useEffect, useRef, useState } from 'react';
+import api from '@/lib/api';
+import { useAuth, useFeature } from '@/contexts/AuthContext';
+import { PageHeader } from '@/components/page-header';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import {
+  Loader2Icon,
+  PlusIcon,
+  TrashIcon,
+  PhoneIcon,
+  ClockIcon,
+  PowerIcon,
+} from 'lucide-react';
+import { toast } from 'sonner';
+
+interface ShiftEntry {
+  day: number;
+  start: string;
+  end: string;
+}
+
+interface InboundCallConfig {
+  _id: string;
+  phone_number: string;
+  label: string;
+  elevenlabs_agent_id: string;
+  schedule_enabled: boolean;
+  schedule: ShiftEntry[];
+  agent_assigned: boolean;
+}
+
+const TIME_OPTIONS: string[] = [];
+for (let h = 0; h < 24; h++) {
+  for (let m = 0; m < 60; m += 15) {
+    TIME_OPTIONS.push(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`);
+  }
+}
+
+const DAYS = [
+  { day: 1, label: 'Pzt' },
+  { day: 2, label: 'Sal' },
+  { day: 3, label: 'Car' },
+  { day: 4, label: 'Per' },
+  { day: 5, label: 'Cum' },
+  { day: 6, label: 'Cmt' },
+  { day: 0, label: 'Paz' },
+];
+
+export default function CallSettings() {
+  const { tenant } = useAuth();
+  const hasInboundSchedule = useFeature('inbound_call_schedule');
+
+  const [recipients, setRecipients] = useState<string[]>([]);
+  const [newRecipient, setNewRecipient] = useState('');
+  const [savingRecipients, setSavingRecipients] = useState(false);
+
+  // Inbound call schedule state
+  const [inboundConfig, setInboundConfig] = useState<InboundCallConfig | null>(null);
+  const [scheduleEnabled, setScheduleEnabled] = useState(false);
+  const [schedule, setSchedule] = useState<ShiftEntry[]>([]);
+  const [savingSchedule, setSavingSchedule] = useState(false);
+  const [toggling, setToggling] = useState(false);
+
+  useEffect(() => {
+    if (tenant) {
+      setRecipients(tenant.settings?.notification_recipients || []);
+    }
+  }, [tenant]);
+
+  const inboundFetched = useRef(false);
+  useEffect(() => {
+    if (!hasInboundSchedule || inboundFetched.current) return;
+    inboundFetched.current = true;
+    api.get('/inbound-call/configs').then(res => {
+      const configs: InboundCallConfig[] = res.data.configs;
+      if (configs.length > 0) {
+        setInboundConfig(configs[0]);
+        setScheduleEnabled(configs[0].schedule_enabled);
+        setSchedule(configs[0].schedule);
+      }
+    }).catch(() => {});
+  }, [hasInboundSchedule]);
+
+  async function handleAddRecipient() {
+    const cleaned = newRecipient.replace(/\s/g, '');
+    if (!cleaned) return;
+    if (recipients.includes(cleaned)) { toast.error('Zaten listede'); return; }
+    setSavingRecipients(true);
+    try {
+      const updated = [...recipients, cleaned];
+      await api.put('/tenants/me', { settings: { notification_recipients: updated } });
+      setRecipients(updated);
+      setNewRecipient('');
+      toast.success('Alıcı eklendi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSavingRecipients(false);
+    }
+  }
+
+  async function handleRemoveRecipient(phone: string) {
+    setSavingRecipients(true);
+    try {
+      const updated = recipients.filter(r => r !== phone);
+      await api.put('/tenants/me', { settings: { notification_recipients: updated } });
+      setRecipients(updated);
+      toast.success('Alıcı çıkarıldı');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSavingRecipients(false);
+    }
+  }
+
+  function toggleDay(day: number) {
+    setSchedule(prev => {
+      const exists = prev.find(e => e.day === day);
+      if (exists) return prev.filter(e => e.day !== day);
+      return [...prev, { day, start: '09:00', end: '18:00' }].sort((a, b) => a.day - b.day);
+    });
+  }
+
+  function updateDayTime(day: number, field: 'start' | 'end', value: string) {
+    setSchedule(prev =>
+      prev.map(e => e.day === day ? { ...e, [field]: value } : e)
+    );
+  }
+
+  async function handleSaveSchedule() {
+    if (!inboundConfig) return;
+    setSavingSchedule(true);
+    try {
+      const res = await api.put(`/inbound-call/configs/${inboundConfig._id}/schedule`, {
+        schedule_enabled: scheduleEnabled,
+        schedule,
+      });
+      const updated: InboundCallConfig = res.data.config;
+      setInboundConfig(updated);
+      setScheduleEnabled(updated.schedule_enabled);
+      setSchedule(updated.schedule);
+      toast.success('Program kaydedildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setSavingSchedule(false);
+    }
+  }
+
+  async function handleToggleNow() {
+    if (!inboundConfig) return;
+    const assign = !inboundConfig.agent_assigned;
+    setToggling(true);
+    try {
+      const res = await api.post(`/inbound-call/configs/${inboundConfig._id}/toggle-now`, { assign });
+      const updated: InboundCallConfig = res.data.config;
+      setInboundConfig(updated);
+      toast.success(assign ? 'Agent atandi' : 'Agent kaldirildi');
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || 'Hata');
+    } finally {
+      setToggling(false);
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader title="Arama Ayarları" />
+
+      <div className="space-y-6">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base flex items-center gap-2">
+                <PhoneIcon className="size-4" /> Bildirim Alıcıları
+              </CardTitle>
+              <CardDescription>Arama özetleri bu numaralara WhatsApp ile gönderilir</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="flex flex-col sm:flex-row gap-2">
+                <Input
+                  placeholder="+905551234567"
+                  value={newRecipient}
+                  onChange={e => setNewRecipient(e.target.value)}
+                  onKeyDown={e => e.key === 'Enter' && handleAddRecipient()}
+                  className="flex-1"
+                />
+                <Button onClick={handleAddRecipient} disabled={savingRecipients || !newRecipient.trim()} size="sm" className="w-full sm:w-auto">
+                  {savingRecipients ? <Loader2Icon className="size-4 animate-spin" /> : <><PlusIcon className="size-4 mr-1 sm:mr-0" /><span className="sm:hidden">Ekle</span></>}
+                </Button>
+              </div>
+              {recipients.length > 0 && (
+                <div className="space-y-1">
+                  {recipients.map(number => (
+                    <div key={number} className="flex items-center justify-between py-1.5 px-3 rounded-md border text-sm">
+                      <span className="font-mono text-xs">{number}</span>
+                      <Button variant="ghost" size="sm" onClick={() => handleRemoveRecipient(number)} disabled={savingRecipients} className="text-destructive hover:text-destructive h-7 w-7 p-0">
+                        <TrashIcon className="size-3.5" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Inbound Call Schedule */}
+        {hasInboundSchedule && inboundConfig && (
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-base flex items-center gap-2">
+                  <PhoneIcon className="size-4" />
+                  Gelen Arama Programi
+                </CardTitle>
+                <div className="flex items-center gap-2">
+                  <Badge
+                    variant={inboundConfig.agent_assigned ? 'default' : 'secondary'}
+                    className={inboundConfig.agent_assigned ? 'bg-green-100 text-green-800' : ''}
+                  >
+                    {inboundConfig.agent_assigned ? 'Agent Aktif' : 'Agent Devre Disi'}
+                  </Badge>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleToggleNow}
+                    disabled={toggling}
+                  >
+                    {toggling ? (
+                      <Loader2Icon className="size-4 animate-spin" />
+                    ) : (
+                      <>
+                        <PowerIcon className="size-4 mr-1" />
+                        {inboundConfig.agent_assigned ? 'Simdi Kapat' : 'Simdi Ac'}
+                      </>
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="inbound-schedule-enabled"
+                  checked={scheduleEnabled}
+                  onCheckedChange={(checked) => setScheduleEnabled(!!checked)}
+                />
+                <Label htmlFor="inbound-schedule-enabled" className="text-sm">
+                  Otomatik programi etkinlestir
+                </Label>
+              </div>
+
+              {scheduleEnabled && (
+                <div className="space-y-2 pl-0 sm:pl-6">
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                    <ClockIcon className="size-3" />
+                    Bu saatlerde agent aramalari yanitlamaz (Europe/Istanbul)
+                  </div>
+                  {DAYS.map(({ day, label }) => {
+                    const entry = schedule.find(e => e.day === day);
+                    return (
+                      <div key={day} className="flex flex-wrap items-center gap-2">
+                        <Button
+                          variant={entry ? 'default' : 'outline'}
+                          size="sm"
+                          className="h-8 w-14 text-xs justify-center shrink-0"
+                          onClick={() => toggleDay(day)}
+                        >
+                          {label}
+                        </Button>
+                        {entry ? (
+                          <div className="flex items-center gap-2">
+                            <select
+                              value={entry.start}
+                              onChange={(e) => updateDayTime(day, 'start', e.target.value)}
+                              className="h-8 w-[90px] rounded-md border border-input bg-background px-2 text-xs"
+                            >
+                              {TIME_OPTIONS.map(t => <option key={t} value={t}>{t}</option>)}
+                            </select>
+                            <span className="text-xs text-muted-foreground">-</span>
+                            <select
+                              value={entry.end}
+                              onChange={(e) => updateDayTime(day, 'end', e.target.value)}
+                              className="h-8 w-[90px] rounded-md border border-input bg-background px-2 text-xs"
+                            >
+                              {TIME_OPTIONS.map(t => <option key={t} value={t}>{t}</option>)}
+                            </select>
+                          </div>
+                        ) : (
+                          <span className="text-xs text-muted-foreground">Kisitlama yok — Agent yanitlar</span>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+
+              <Button size="sm" onClick={handleSaveSchedule} disabled={savingSchedule}>
+                {savingSchedule ? <Loader2Icon className="size-4 animate-spin" /> : 'Kaydet'}
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}