elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/admin/agents/import.tsx

@@ -0,0 +1,280 @@
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
+import { toast } from "sonner"
+import {
+  ArrowLeft,
+  Download,
+  Loader2,
+  Check,
+  Bot,
+  Search,
+  RefreshCw,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react"
+
+import { api } from "@/lib/api"
+import { PageHeader } from "@/components/shared"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+
+// ─── Types ──────────────────────────────────────────────────
+
+interface ELAgent {
+  elevenlabsId: string
+  name: string
+  linked: boolean
+  linkedAgentId: string | null
+  linkedAgentName: string | null
+}
+
+interface ELPage {
+  agents: ELAgent[]
+  has_more: boolean
+  next_cursor: string | null
+}
+
+interface TenantOption {
+  tenant_id: string
+  tenant_name: string
+}
+
+// ─── Hooks ──────────────────────────────────────────────────
+
+function useTenants() {
+  return useQuery({
+    queryKey: ["tenants-list"],
+    queryFn: async () => (await api.get<TenantOption[]>("/admin/tenants")).data,
+  })
+}
+
+function useElevenLabsPage(tenantId: string, cursor: string | null) {
+  return useQuery({
+    queryKey: ["el-agents", tenantId || "all", cursor || "first"],
+    queryFn: async () => {
+      const params = new URLSearchParams()
+      if (tenantId) params.set("tenantId", tenantId)
+      if (cursor) params.set("cursor", cursor)
+      const qs = params.toString()
+      return (await api.get<ELPage>(`/agents/elevenlabs/list${qs ? `?${qs}` : ""}`)).data
+    },
+  })
+}
+
+// ─── Main Page ──────────────────────────────────────────────
+
+export default function ImportAgentsPage() {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const qc = useQueryClient()
+  const { data: tenants } = useTenants()
+
+  const [tenantId, setTenantId] = useState("")
+  const [search, setSearch] = useState("")
+  const [importing, setImporting] = useState<string | null>(null)
+
+  // Cursor stack: [null] = first page, push next_cursor for forward, pop for back
+  const [cursorStack, setCursorStack] = useState<(string | null)[]>([null])
+  const currentCursor = cursorStack[cursorStack.length - 1]
+  const pageNum = cursorStack.length
+
+  const { data: elPage, isLoading, refetch } = useElevenLabsPage(tenantId, currentCursor)
+
+  const agents = elPage?.agents ?? []
+  const filtered = search
+    ? agents.filter((a) => a.name.toLowerCase().includes(search.toLowerCase()) || a.elevenlabsId.includes(search))
+    : agents
+  const linkedCount = agents.filter((a) => a.linked).length
+  const unlinkedCount = agents.filter((a) => !a.linked).length
+
+  const goNext = () => {
+    if (elPage?.next_cursor) {
+      setCursorStack([...cursorStack, elPage.next_cursor])
+    }
+  }
+  const goPrev = () => {
+    if (cursorStack.length > 1) {
+      setCursorStack(cursorStack.slice(0, -1))
+    }
+  }
+  const resetPagination = () => setCursorStack([null])
+
+  const handleImport = async (elevenlabsId: string) => {
+    setImporting(elevenlabsId)
+    try {
+      const { data } = await api.post("/agents/elevenlabs/import", { elevenlabsId, tenantId: tenantId || undefined })
+      toast.success(t("agents.imported"))
+      qc.invalidateQueries({ queryKey: ["el-agents"] })
+      qc.invalidateQueries({ queryKey: ["agents"] })
+      navigate(`/admin/agents/${data.agent_id}`)
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "Import failed")
+    }
+    setImporting(null)
+  }
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title={t("agents.importEL")}
+        description={t("agents.importELDesc")}
+      >
+        <Button variant="ghost" onClick={() => navigate("/admin/agents")}>
+          <ArrowLeft className="w-4 h-4 mr-1.5" />
+          {t("common.back")}
+        </Button>
+      </PageHeader>
+
+      {/* Filters */}
+      <div className="flex items-end gap-3">
+        <div className="space-y-1.5 w-64">
+          <label className="text-xs text-muted-foreground font-medium">Tenant</label>
+          <Select
+            value={tenantId || "__all__"}
+            onValueChange={(v) => { setTenantId(v === "__all__" ? "" : v); resetPagination() }}
+          >
+            <SelectTrigger className="h-9">
+              <SelectValue>{tenants?.find((t) => t.tenant_id === tenantId)?.tenant_name || "All tenants (draft)"}</SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__all__">All tenants (draft)</SelectItem>
+              {(tenants ?? []).map((t) => (
+                <SelectItem key={t.tenant_id} value={t.tenant_id}>{t.tenant_name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="relative flex-1 max-w-xs">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            className="pl-8 h-9"
+            placeholder="Search within page..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+        </div>
+
+        <Button variant="outline" size="sm" className="h-9" onClick={() => { resetPagination(); refetch() }}>
+          <RefreshCw className="w-3.5 h-3.5 mr-1.5" /> Refresh
+        </Button>
+
+        {elPage && (
+          <div className="flex gap-2 ml-auto">
+            <Badge variant="outline" className="text-xs">
+              {agents.length} on page
+            </Badge>
+            <Badge variant="outline" className="text-xs text-green-600">
+              {linkedCount} linked
+            </Badge>
+            <Badge variant="outline" className="text-xs text-amber-600">
+              {unlinkedCount} unlinked
+            </Badge>
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      {isLoading ? (
+        <div className="space-y-2">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <Skeleton key={i} className="h-16 rounded-xl" />
+          ))}
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-20 text-center">
+          <Bot className="w-10 h-10 text-muted-foreground/30 mb-3" />
+          <p className="text-sm text-muted-foreground">
+            {search ? "No agents match your search on this page" : t("agents.noELAgents")}
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {filtered.map((el) => (
+            <div
+              key={el.elevenlabsId}
+              className={cn(
+                "flex items-center justify-between px-4 py-3 rounded-xl border bg-card transition-colors",
+                el.linked && "bg-green-500/5 border-green-500/20",
+              )}
+            >
+              <div className="flex items-center gap-3">
+                <div className={cn(
+                  "w-9 h-9 rounded-lg flex items-center justify-center",
+                  el.linked ? "bg-green-500/10" : "bg-muted",
+                )}>
+                  <Bot className={cn("w-4 h-4", el.linked ? "text-green-600" : "text-muted-foreground")} />
+                </div>
+                <div>
+                  <p className="text-sm font-medium">{el.name}</p>
+                  <p className="text-[10px] text-muted-foreground font-mono">{el.elevenlabsId}</p>
+                </div>
+              </div>
+
+              {el.linked ? (
+                <div className="flex items-center gap-2">
+                  <Badge variant="outline" className="text-[9px] gap-1 text-green-600 border-green-500/30">
+                    <Check className="w-2.5 h-2.5" /> {t("agents.alreadyLinked")}
+                  </Badge>
+                  <Button
+                    size="sm" variant="ghost" className="h-7 text-xs"
+                    onClick={() => navigate(`/admin/agents/${el.linkedAgentId}`)}
+                  >
+                    View
+                  </Button>
+                </div>
+              ) : (
+                <Button
+                  size="sm" variant="outline" className="h-8"
+                  disabled={importing === el.elevenlabsId}
+                  onClick={() => handleImport(el.elevenlabsId)}
+                >
+                  {importing === el.elevenlabsId
+                    ? <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                    : <><Download className="w-3.5 h-3.5 mr-1.5" /> {t("agents.import")}</>}
+                </Button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Server pagination */}
+      {(pageNum > 1 || elPage?.has_more) && (
+        <div className="flex items-center justify-between pt-2">
+          <p className="text-xs text-muted-foreground">
+            Page {pageNum}
+          </p>
+          <div className="flex gap-1">
+            <Button
+              size="sm" variant="outline" className="h-7 text-xs"
+              disabled={pageNum <= 1}
+              onClick={goPrev}
+            >
+              <ChevronLeft className="w-3.5 h-3.5 mr-0.5" /> Previous
+            </Button>
+            <Button
+              size="sm" variant="outline" className="h-7 text-xs"
+              disabled={!elPage?.has_more}
+              onClick={goNext}
+            >
+              Next <ChevronRight className="w-3.5 h-3.5 ml-0.5" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/frontend/src/pages/admin/agents/index.tsx

@@ -0,0 +1,245 @@
+import { useTranslation } from "react-i18next"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { useNavigate } from "react-router-dom"
+import { toast } from "sonner"
+import {
+  Bot,
+  Plus,
+  Loader2,
+  Settings,
+  Power,
+  PowerOff,
+  Pencil,
+  MessageSquare,
+  Phone,
+  Zap,
+  Download,
+  Building,
+} from "lucide-react"
+
+import { api } from "@/lib/api"
+import { PageHeader, EmptyState, StatusBadge } from "@/components/shared"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+// ─── Types ──────────────────────────────────────────────────
+
+interface Agent {
+  agent_id: string
+  agent_name: string
+  agent_description: string
+  agent_language: string
+  agent_greeting: string
+  agent_system_prompt: string
+  agent_ai_provider: string | null
+  agent_ai_model: string | null
+  agent_elevenlabs_id: string
+  agent_is_active: boolean
+  agent_clinic_id: string | null
+  agent_extra_config: any
+  tenant?: { tenant_id: string; tenant_name: string } | null
+  clinic?: { clinic_id: string; clinic_name: string } | null
+  phone_numbers?: { phone_id: string; phone_number: string }[]
+}
+
+// ─── Hooks ──────────────────────────────────────────────────
+
+function useAgents() {
+  return useQuery({
+    queryKey: ["agents"],
+    queryFn: async () => {
+      const { data } = await api.get<Agent[]>("/agents")
+      return data
+    },
+  })
+}
+
+function useToggleAgent() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (id: string) => { await api.post(`/agents/${id}/toggle`) },
+    onSuccess: () => { qc.invalidateQueries({ queryKey: ["agents"] }) },
+  })
+}
+
+// ─── Main Page ──────────────────────────────────────────────
+
+export default function AgentsPage() {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { data: agents, isLoading } = useAgents()
+  const toggle = useToggleAgent()
+
+  const activeAgents = (agents ?? []).filter((a) => a.agent_is_active)
+  const inactiveAgents = (agents ?? []).filter((a) => !a.agent_is_active)
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={t("agents.title")} description={t("agents.description")}>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => navigate("/admin/agents/import")}>
+            <Download className="w-4 h-4 mr-1.5" />
+            {t("agents.importEL")}
+          </Button>
+          <Button onClick={() => navigate("/admin/agents/new")}>
+            <Plus className="w-4 h-4 mr-1.5" />
+            {t("agents.create")}
+          </Button>
+        </div>
+      </PageHeader>
+
+      {isLoading ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton key={i} className="h-40 rounded-2xl" />
+          ))}
+        </div>
+      ) : !agents?.length ? (
+        <EmptyState
+          icon={<Bot className="w-6 h-6" />}
+          title={t("agents.noAgents")}
+          action={
+            <Button variant="outline" onClick={() => navigate("/admin/agents/new")}>
+              <Plus className="w-4 h-4 mr-1.5" />{t("agents.create")}
+            </Button>
+          }
+        />
+      ) : (
+        <div className="space-y-6">
+          {activeAgents.length > 0 && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {activeAgents.map((agent) => (
+                <AgentCard key={agent.agent_id} agent={agent} onToggle={() => toggle.mutateAsync(agent.agent_id)} />
+              ))}
+            </div>
+          )}
+
+          {inactiveAgents.length > 0 && (
+            <div className="space-y-2">
+              <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                {t("agents.inactive")} ({inactiveAgents.length})
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {inactiveAgents.map((agent) => (
+                  <AgentCard key={agent.agent_id} agent={agent} onToggle={() => toggle.mutateAsync(agent.agent_id)} />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+    </div>
+  )
+}
+
+// ─── Agent Card ─────────────────────────────────────────────
+
+function AgentCard({ agent, onToggle }: { agent: Agent; onToggle: () => void }) {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const providerLabel = agent.agent_ai_provider || "elevenlabs"
+
+  return (
+    <Card className={cn("rounded-2xl transition-opacity", !agent.agent_is_active && "opacity-60")}>
+      <CardContent className="p-5">
+        <div className="flex items-start gap-4">
+          {/* Icon */}
+          <div className={cn(
+            "w-11 h-11 rounded-xl flex items-center justify-center shrink-0",
+            agent.agent_is_active ? "bg-primary/10" : "bg-muted",
+          )}>
+            <Bot className={cn("w-5 h-5", agent.agent_is_active ? "text-primary" : "text-muted-foreground")} />
+          </div>
+
+          {/* Info */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <h3 className="text-sm font-semibold truncate">{agent.agent_name || "Unnamed Agent"}</h3>
+              <Badge variant={agent.agent_is_active ? "outline" : "secondary"} className="text-[9px] px-1.5 py-0 h-4 shrink-0">
+                {agent.agent_is_active ? t("common.active") : t("common.inactive")}
+              </Badge>
+            </div>
+
+            {agent.agent_description && (
+              <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{agent.agent_description}</p>
+            )}
+
+            {/* Tags */}
+            <div className="flex items-center gap-1.5 mt-2 flex-wrap">
+              {agent.tenant ? (
+                <Badge variant="outline" className="text-[9px] px-1.5 py-0 h-4 gap-0.5 border-primary/30 text-primary">
+                  <Building className="w-2.5 h-2.5" />
+                  {agent.tenant.tenant_name}
+                </Badge>
+              ) : (
+                <Badge variant="outline" className="text-[9px] px-1.5 py-0 h-4 border-amber-500/30 text-amber-600">
+                  Unassigned
+                </Badge>
+              )}
+              <Badge variant="outline" className="text-[9px] px-1.5 py-0 h-4 gap-0.5">
+                <Zap className="w-2.5 h-2.5" />
+                {providerLabel}
+              </Badge>
+              {agent.agent_language && (
+                <Badge variant="outline" className="text-[9px] px-1.5 py-0 h-4">
+                  {agent.agent_language.toUpperCase()}
+                </Badge>
+              )}
+              {agent.clinic && (
+                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 h-4">
+                  {agent.clinic.clinic_name}
+                </Badge>
+              )}
+              {!agent.clinic && (
+                <Badge variant="secondary" className="text-[9px] px-1.5 py-0 h-4">
+                  {t("agents.tenantWide")}
+                </Badge>
+              )}
+              {agent.agent_elevenlabs_id && (
+                <Badge variant="outline" className="text-[9px] px-1.5 py-0 h-4 font-mono">
+                  EL
+                </Badge>
+              )}
+            </div>
+
+            {/* Phone numbers */}
+            {agent.phone_numbers && agent.phone_numbers.length > 0 && (
+              <div className="flex items-center gap-1 mt-2">
+                <Phone className="w-3 h-3 text-muted-foreground" />
+                <span className="text-[10px] text-muted-foreground font-mono">
+                  {agent.phone_numbers.map((p) => p.phone_number).join(", ")}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Actions */}
+          <div className="flex flex-col gap-1 shrink-0">
+            <Button size="sm" variant="ghost" className="h-7 w-7 p-0" onClick={() => navigate(`/admin/agents/${agent.agent_id}`)}>
+              <Pencil className="w-3.5 h-3.5" />
+            </Button>
+            <Button size="sm" variant="ghost" className="h-7 w-7 p-0" onClick={onToggle}>
+              {agent.agent_is_active
+                ? <PowerOff className="w-3.5 h-3.5 text-destructive" />
+                : <Power className="w-3.5 h-3.5 text-green-600" />}
+            </Button>
+          </div>
+        </div>
+
+        {/* System prompt preview */}
+        {agent.agent_system_prompt && (
+          <div className="mt-3 p-2.5 rounded-lg bg-muted/50 text-xs text-muted-foreground line-clamp-2">
+            {agent.agent_system_prompt}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+