elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/pages/admin/ai-playground.tsx

@@ -0,0 +1,543 @@
+import { useState, useRef, useEffect } from "react"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
+import { toast } from "sonner"
+import {
+  Send,
+  Loader2,
+  Bot,
+  Wrench,
+  Zap,
+  Clock,
+  Settings,
+  Plus,
+  Trash2,
+  MessageSquare,
+} from "lucide-react"
+
+import { api } from "@/lib/api"
+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 { Checkbox } from "@/components/ui/checkbox"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+
+// ─── Types ──────────────────────────────────────────────────
+
+interface AIProvider { name: string; available: boolean }
+interface AITool { name: string; description: string }
+
+interface AgentOption {
+  agent_id: string
+  agent_name: string
+  agent_system_prompt: string
+  agent_ai_provider: string | null
+  agent_ai_model: string | null
+  agent_elevenlabs_id: string
+  agent_language: string
+  agent_greeting: string
+  agent_tenant_id: string | null
+  tenant?: { tenant_id: string; tenant_name: string } | null
+}
+
+interface Session {
+  acs_id: string
+  acs_title: string
+  acs_provider: string
+  acs_agent_id: string | null
+  acs_message_count: number
+  acs_last_message_at: string | null
+  acs_enable_tools: boolean
+  acs_created_at: string
+  acs_updated_at: string
+}
+
+interface SessionMessage {
+  acm_id: string
+  acm_role: "user" | "assistant" | "system" | "tool_result"
+  acm_content: string
+  acm_metadata: any
+  acm_created_at: string
+}
+
+interface SessionFull extends Session {
+  acs_tenant_id: string | null
+  acs_clinic_id: string | null
+  acs_system_prompt: string
+  acs_channel: string
+  messages: SessionMessage[]
+}
+
+interface ConverseResult {
+  text: string | null
+  toolCalls: { id: string; name: string; arguments: Record<string, any> }[]
+  stopReason: string
+  usage: { inputTokens: number; outputTokens: number }
+  durationMs: number
+}
+
+// ─── Hooks ──────────────────────────────────────────────────
+
+function useProviders() {
+  return useQuery({
+    queryKey: ["ai-providers"],
+    queryFn: async () => (await api.get<AIProvider[]>("/admin/ai-test/providers")).data,
+  })
+}
+
+function useAllAgents() {
+  return useQuery({
+    queryKey: ["agents"],
+    queryFn: async () => (await api.get<AgentOption[]>("/agents")).data,
+  })
+}
+
+function useTools(features: string) {
+  return useQuery({
+    queryKey: ["ai-tools", features],
+    queryFn: async () => (await api.get<AITool[]>(`/admin/ai-test/tools?features=${features}`)).data,
+    enabled: !!features,
+  })
+}
+
+function useSessions() {
+  return useQuery({
+    queryKey: ["ai-chat-sessions"],
+    queryFn: async () => (await api.get<Session[]>("/admin/ai-test/sessions")).data,
+  })
+}
+
+function useSession(sessionId: string | null) {
+  return useQuery({
+    queryKey: ["ai-chat-session", sessionId],
+    queryFn: async () => (await api.get<SessionFull>(`/admin/ai-test/sessions/${sessionId}`)).data,
+    enabled: !!sessionId,
+  })
+}
+
+// ─── Main Page ──────────────────────────────────────────────
+
+export default function AIPlaygroundPage() {
+  const qc = useQueryClient()
+  const { data: providers, isLoading: loadingProviders } = useProviders()
+  const { data: allAgents } = useAllAgents()
+  const { data: sessions } = useSessions()
+
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null)
+  const { data: activeSession } = useSession(activeSessionId)
+
+  // Config state
+  const [agentId, setAgentId] = useState("")
+  const [provider, setProvider] = useState("anthropic")
+  const [systemPrompt, setSystemPrompt] = useState("")
+  const [enableTools, setEnableTools] = useState(false)
+  const [tenantId, setTenantId] = useState("")
+
+  const [input, setInput] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [lastUsage, setLastUsage] = useState<ConverseResult["usage"] | null>(null)
+  const [lastDuration, setLastDuration] = useState<number | null>(null)
+  const [showConfig, setShowConfig] = useState(true)
+  const messagesRef = useRef<HTMLDivElement>(null)
+
+  const selectedAgent = allAgents?.find((a) => a.agent_id === agentId)
+  const messages = activeSession?.messages ?? []
+
+  // Resolve tools features from agent's tenant
+  const toolFeatures = enableTools ? "google_calendar,operator_workflow,voice_transcription,appointment_validation,sms,tektippay,outbound_calls" : ""
+  const { data: tools } = useTools(toolFeatures)
+
+  // When agent changes, apply its config
+  const applyAgent = (id: string) => {
+    setAgentId(id)
+    if (!id) return
+    const agent = allAgents?.find((a) => a.agent_id === id)
+    if (!agent) return
+    // Auto-detect provider: if agent has EL ID, default to elevenlabs; otherwise use its explicit provider
+    if (agent.agent_elevenlabs_id) {
+      setProvider(agent.agent_ai_provider || "elevenlabs")
+    } else if (agent.agent_ai_provider) {
+      setProvider(agent.agent_ai_provider)
+    }
+    if (agent.agent_system_prompt) setSystemPrompt(agent.agent_system_prompt)
+    setTenantId(agent.agent_tenant_id ?? "")
+  }
+
+  // Auto-scroll
+  useEffect(() => {
+    if (messagesRef.current) messagesRef.current.scrollTop = messagesRef.current.scrollHeight
+  }, [messages])
+
+  // Load session config when switching sessions
+  useEffect(() => {
+    if (!activeSession) return
+    setProvider(activeSession.acs_provider)
+    setAgentId(activeSession.acs_agent_id ?? "")
+    setTenantId(activeSession.acs_tenant_id ?? "")
+    setSystemPrompt(activeSession.acs_system_prompt || "")
+    setEnableTools(activeSession.acs_enable_tools)
+    setShowConfig(false)
+  }, [activeSession?.acs_id])
+
+  const createSession = async () => {
+    const { data } = await api.post<Session>("/admin/ai-test/sessions", {
+      provider,
+      tenantId: tenantId || undefined,
+      agentId: agentId || undefined,
+      systemPrompt,
+      enableTools,
+    })
+    qc.invalidateQueries({ queryKey: ["ai-chat-sessions"] })
+    return data.acs_id
+  }
+
+  const handleSend = async () => {
+    if (!input.trim() || loading) return
+    const content = input.trim()
+    setInput("")
+    setLoading(true)
+
+    try {
+      let sid = activeSessionId
+      if (!sid) {
+        sid = await createSession()
+        setActiveSessionId(sid)
+      }
+
+      const { data } = await api.post<ConverseResult>(`/admin/ai-test/sessions/${sid}/converse`, { content })
+      setLastUsage(data.usage)
+      setLastDuration(data.durationMs)
+
+      // Force refetch so messages appear immediately
+      await qc.refetchQueries({ queryKey: ["ai-chat-session", sid] })
+      qc.invalidateQueries({ queryKey: ["ai-chat-sessions"] })
+    } catch (err: any) {
+      toast.error(err?.response?.data?.message || "AI request failed")
+    }
+    setLoading(false)
+  }
+
+  const handleNewChat = () => {
+    setActiveSessionId(null)
+    setAgentId("")
+    setProvider("anthropic")
+    setSystemPrompt("")
+    setEnableTools(false)
+    setTenantId("")
+    setLastUsage(null)
+    setLastDuration(null)
+    setShowConfig(true)
+  }
+
+  const handleDeleteSession = async (id: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    await api.delete(`/admin/ai-test/sessions/${id}`)
+    qc.invalidateQueries({ queryKey: ["ai-chat-sessions"] })
+    if (activeSessionId === id) handleNewChat()
+  }
+
+  // ─── Render ───────────────────────────────────────────────
+
+  return (
+    <div className="flex gap-4 h-[calc(100vh-8rem)]">
+
+      {/* ── Session Sidebar ─────────────────────────────── */}
+      <div className="w-56 shrink-0 flex flex-col rounded-2xl border bg-card overflow-hidden">
+        <div className="p-3 border-b shrink-0">
+          <Button size="sm" className="w-full h-8 text-xs" onClick={handleNewChat}>
+            <Plus className="w-3.5 h-3.5 mr-1.5" /> New Chat
+          </Button>
+        </div>
+        <div className="flex-1 overflow-y-auto">
+          {!sessions?.length ? (
+            <div className="px-3 py-8 text-center">
+              <MessageSquare className="w-6 h-6 text-muted-foreground/30 mx-auto mb-2" />
+              <p className="text-[10px] text-muted-foreground">No sessions yet</p>
+            </div>
+          ) : (
+            <div className="p-1.5 space-y-0.5">
+              {sessions.map((s) => (
+                <button
+                  key={s.acs_id}
+                  onClick={() => { setActiveSessionId(s.acs_id); setLastUsage(null); setLastDuration(null) }}
+                  className={cn(
+                    "w-full text-left rounded-lg px-2.5 py-2 transition-colors group cursor-pointer",
+                    activeSessionId === s.acs_id ? "bg-primary/10 text-primary" : "hover:bg-muted text-foreground",
+                  )}
+                >
+                  <div className="flex items-start justify-between gap-1">
+                    <p className="text-xs font-medium truncate flex-1">{s.acs_title || "Untitled"}</p>
+                    <button
+                      onClick={(e) => handleDeleteSession(s.acs_id, e)}
+                      className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive p-0.5 shrink-0"
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </button>
+                  </div>
+                  <div className="flex items-center gap-1.5 mt-0.5">
+                    <Badge variant="outline" className="text-[8px] px-1 py-0 h-3.5">{s.acs_provider}</Badge>
+                    <span className="text-[9px] text-muted-foreground">{s.acs_message_count} msg</span>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* ── Chat Area ───────────────────────────────────── */}
+      <div className="flex-1 flex flex-col rounded-2xl border bg-card overflow-hidden">
+        {/* Header */}
+        <div className="border-b px-4 py-2.5 flex items-center justify-between shrink-0">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
+              <Bot className="w-4 h-4 text-primary" />
+            </div>
+            <div>
+              <p className="text-sm font-medium">
+                {activeSession?.acs_title || selectedAgent?.agent_name || "AI Playground"}
+              </p>
+              <p className="text-[10px] text-muted-foreground">
+                {provider}
+                {selectedAgent?.tenant && ` · ${selectedAgent.tenant.tenant_name}`}
+                {lastDuration && ` · ${lastDuration}ms`}
+                {lastUsage && ` · ${lastUsage.inputTokens + lastUsage.outputTokens} tok`}
+              </p>
+            </div>
+          </div>
+          <Button size="sm" variant="ghost" className="h-7" onClick={() => setShowConfig(!showConfig)}>
+            <Settings className="w-3.5 h-3.5" />
+          </Button>
+        </div>
+
+        {/* Config panel */}
+        {showConfig && (
+          <div className="border-b px-4 py-3 space-y-3 bg-muted/30 shrink-0">
+            {/* Row 1: Agent OR Provider — the two entry points */}
+            <div className="flex gap-2">
+              <div className="space-y-1 flex-1">
+                <Label className="text-[10px] text-muted-foreground">Agent</Label>
+                <Select value={agentId || "__none__"} onValueChange={(v) => applyAgent(v === "__none__" ? "" : v)}>
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue>{selectedAgent?.agent_name || "No agent (custom)"}</SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__none__">No agent (custom)</SelectItem>
+                    {(allAgents ?? []).map((a) => (
+                      <SelectItem key={a.agent_id} value={a.agent_id}>
+                        <div className="flex items-center gap-2">
+                          <span>{a.agent_name || "Unnamed"}</span>
+                          {a.agent_elevenlabs_id && <Badge variant="outline" className="text-[8px] px-1 py-0 h-3.5">EL</Badge>}
+                          {a.agent_ai_provider && a.agent_ai_provider !== "elevenlabs" && <Badge variant="outline" className="text-[8px] px-1 py-0 h-3.5">{a.agent_ai_provider}</Badge>}
+                          {a.tenant && <span className="text-[9px] text-muted-foreground">{a.tenant.tenant_name}</span>}
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1 w-44">
+                <Label className="text-[10px] text-muted-foreground">Provider</Label>
+                <Select value={provider} onValueChange={setProvider}>
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue>{provider}</SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="elevenlabs">elevenlabs (WS)</SelectItem>
+                    {(providers ?? []).map((p) => (
+                      <SelectItem key={p.name} value={p.name} disabled={!p.available}>
+                        {p.name} {!p.available && "(no key)"}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {provider === "elevenlabs" && !selectedAgent?.agent_elevenlabs_id && (
+                  <p className="text-[9px] text-amber-600">Select an agent with ElevenLabs ID</p>
+                )}
+              </div>
+              <div className="flex items-end pb-0.5">
+                <label className="flex items-center gap-1.5 text-xs h-7 whitespace-nowrap">
+                  <Checkbox checked={enableTools} onCheckedChange={(v) => setEnableTools(!!v)} disabled={provider === "elevenlabs"} />
+                  <Wrench className="w-3 h-3" /> Tools
+                </label>
+              </div>
+            </div>
+
+            {/* Row 2: System prompt */}
+            <div className="space-y-1">
+              <Label className="text-[10px] text-muted-foreground">System Prompt</Label>
+              <textarea
+                className="w-full rounded-md border bg-background px-3 py-2 text-xs min-h-[50px] max-h-[120px] resize-y focus:outline-none focus:ring-1 focus:ring-ring"
+                value={systemPrompt}
+                onChange={(e) => setSystemPrompt(e.target.value)}
+                placeholder="Instructions for the AI agent..."
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Messages */}
+        <div ref={messagesRef} className="flex-1 overflow-y-auto px-4 py-3 min-h-0">
+          {messages.length === 0 && !activeSessionId ? (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-center space-y-2">
+                <Bot className="w-10 h-10 text-muted-foreground/30 mx-auto" />
+                <p className="text-sm text-muted-foreground">Send a message to start testing</p>
+                <p className="text-xs text-muted-foreground/60">
+                  {selectedAgent ? `${selectedAgent.agent_name} · ${provider}` : provider}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {messages.map((msg) => (
+                <div key={msg.acm_id} className={cn("flex", msg.acm_role === "user" ? "justify-end" : "justify-start")}>
+                  <div className={cn(
+                    "max-w-[80%] rounded-2xl px-3.5 py-2 text-sm",
+                    msg.acm_role === "user"
+                      ? "bg-primary text-primary-foreground rounded-br-sm"
+                      : msg.acm_role === "tool_result"
+                        ? "bg-amber-500/10 text-foreground border border-amber-500/20 rounded-bl-sm font-mono text-xs"
+                        : "bg-muted text-foreground rounded-bl-sm",
+                  )}>
+                    {msg.acm_role === "assistant" && (
+                      <div className="flex items-center gap-1 mb-0.5">
+                        <Bot className="w-3 h-3" />
+                        <span className="text-[10px] font-medium opacity-70">{activeSession?.acs_provider || provider}</span>
+                        {msg.acm_metadata?.durationMs && (
+                          <span className="text-[9px] opacity-50">{msg.acm_metadata.durationMs}ms</span>
+                        )}
+                      </div>
+                    )}
+                    {msg.acm_role === "tool_result" && (
+                      <div className="flex items-center gap-1 mb-0.5">
+                        <Wrench className="w-2.5 h-2.5" />
+                        <span className="text-[10px] font-medium opacity-70">{msg.acm_metadata?.toolName || "tool"}</span>
+                      </div>
+                    )}
+                    <p className="whitespace-pre-wrap break-words">{msg.acm_content}</p>
+                  </div>
+                </div>
+              ))}
+              {loading && (
+                <div className="flex justify-start">
+                  <div className="bg-muted rounded-2xl rounded-bl-sm px-4 py-2.5">
+                    <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Input */}
+        <div className="border-t p-3 flex items-center gap-2 shrink-0">
+          <Input
+            className="flex-1"
+            placeholder="Type a test message..."
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && handleSend()}
+          />
+          <Button size="icon" onClick={handleSend} disabled={!input.trim() || loading}>
+            <Send className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* ── Right Sidebar ───────────────────────────────── */}
+      <div className="w-56 space-y-3 shrink-0 overflow-y-auto">
+        {/* Providers */}
+        <Card className="rounded-2xl">
+          <CardHeader className="pb-2 px-4 pt-4">
+            <CardTitle className="text-[10px] uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+              <Zap className="w-3 h-3" /> Providers
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-4 pb-3 space-y-1">
+            {loadingProviders ? <Skeleton className="h-8" /> : (providers ?? []).map((p) => (
+              <div key={p.name} className="flex items-center justify-between text-xs">
+                <span className={cn(!p.available && "text-muted-foreground")}>{p.name}</span>
+                <span className={cn("w-1.5 h-1.5 rounded-full", p.available ? "bg-green-500" : "bg-red-500")} />
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        {/* Agent info */}
+        {selectedAgent && (
+          <Card className="rounded-2xl">
+            <CardHeader className="pb-2 px-4 pt-4">
+              <CardTitle className="text-[10px] uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+                <Bot className="w-3 h-3" /> Agent
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="px-4 pb-3 space-y-1.5 text-[10px]">
+              <p className="font-medium text-xs">{selectedAgent.agent_name}</p>
+              {selectedAgent.tenant && <p className="text-muted-foreground">{selectedAgent.tenant.tenant_name}</p>}
+              <div className="flex gap-1 flex-wrap">
+                {selectedAgent.agent_ai_provider && <Badge variant="outline" className="text-[8px] px-1 py-0 h-3.5">{selectedAgent.agent_ai_provider}</Badge>}
+                <Badge variant="outline" className="text-[8px] px-1 py-0 h-3.5">{selectedAgent.agent_language}</Badge>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Tools */}
+        {enableTools && tools && tools.length > 0 && (
+          <Card className="rounded-2xl">
+            <CardHeader className="pb-2 px-4 pt-4">
+              <CardTitle className="text-[10px] uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+                <Wrench className="w-3 h-3" /> Tools ({tools.length})
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="px-4 pb-3">
+              <div className="space-y-1.5 max-h-[200px] overflow-y-auto">
+                {tools.map((t) => (
+                  <div key={t.name} className="text-[10px]">
+                    <p className="font-mono font-medium truncate">{t.name}</p>
+                    <p className="text-muted-foreground truncate">{t.description}</p>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Stats */}
+        {lastUsage && (
+          <Card className="rounded-2xl">
+            <CardHeader className="pb-2 px-4 pt-4">
+              <CardTitle className="text-[10px] uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
+                <Clock className="w-3 h-3" /> Last Response
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="px-4 pb-3 space-y-1 text-[10px]">
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Input</span>
+                <span className="font-mono">{lastUsage.inputTokens.toLocaleString()} tok</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Output</span>
+                <span className="font-mono">{lastUsage.outputTokens.toLocaleString()} tok</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Duration</span>
+                <span className="font-mono">{lastDuration}ms</span>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  )
+}