@handled-ai/design-system 0.8.0 → 0.9.0

package/src/components/agent-popover.tsx

@@ -0,0 +1,373 @@
+"use client"
+
+import * as React from "react"
+import { X } from "lucide-react"
+import { cn } from "../lib/utils"
+import { AgentWidget, type AgentWidgetMessage, type AgentWidgetStatus, type AgentWidgetMode } from "./agent-widget"
+
+/* ========================================
+   AgentPopover (root)
+   ======================================== */
+
+export type AgentPopoverStep = string
+
+export interface AgentPopoverContextValue {
+  step: AgentPopoverStep
+  setStep: (step: AgentPopoverStep) => void
+}
+
+const AgentPopoverContext = React.createContext<AgentPopoverContextValue | null>(null)
+
+export function useAgentPopover() {
+  const ctx = React.useContext(AgentPopoverContext)
+  if (!ctx) throw new Error("useAgentPopover must be used within <AgentPopover>")
+  return ctx
+}
+
+export interface AgentPopoverProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  defaultStep?: string
+  step?: string
+  onStepChange?: (step: string) => void
+  children: React.ReactNode
+  className?: string
+}
+
+export function AgentPopover({
+  open,
+  onOpenChange,
+  defaultStep = "details",
+  step: controlledStep,
+  onStepChange,
+  children,
+  className,
+}: AgentPopoverProps) {
+  const [uncontrolledStep, setUncontrolledStep] = React.useState(defaultStep)
+  const step = controlledStep ?? uncontrolledStep
+  const setStep = React.useCallback(
+    (s: string) => {
+      if (controlledStep === undefined) setUncontrolledStep(s)
+      onStepChange?.(s)
+    },
+    [controlledStep, onStepChange],
+  )
+
+  React.useEffect(() => {
+    if (!open) return
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onOpenChange(false)
+    }
+    document.addEventListener("keydown", onKeyDown)
+    return () => document.removeEventListener("keydown", onKeyDown)
+  }, [open, onOpenChange])
+
+  if (!open) return null
+
+  return (
+    <AgentPopoverContext.Provider value={{ step, setStep }}>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-50 bg-black/30 backdrop-blur-sm animate-in fade-in duration-200"
+        onClick={() => onOpenChange(false)}
+      />
+      {/* Panel */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={cn(
+          "fixed inset-4 z-50 flex overflow-hidden rounded-3xl bg-background shadow-2xl ring-1 ring-border/50 animate-in zoom-in-95 fade-in duration-300",
+          "md:inset-auto md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:max-w-5xl md:w-[92vw] md:h-[85vh]",
+          className,
+        )}
+      >
+        {/* Close button */}
+        <button
+          type="button"
+          onClick={() => onOpenChange(false)}
+          className="absolute right-4 top-4 z-20 p-2 rounded-full bg-background/80 hover:bg-muted transition-colors text-foreground"
+        >
+          <X className="w-4 h-4" />
+        </button>
+
+        {children}
+      </div>
+    </AgentPopoverContext.Provider>
+  )
+}
+
+/* ========================================
+   AgentPopoverBranding (left panel)
+   ======================================== */
+
+export type ConnectionStatus = "ready" | "connected" | "listening" | "speaking"
+
+export interface AgentPopoverBrandingProps {
+  title?: string
+  subtitle?: string
+  badge?: string
+  visualSlot?: React.ReactNode
+  statusIndicator?: ConnectionStatus
+  className?: string
+}
+
+export function AgentPopoverBranding({
+  title,
+  subtitle,
+  badge,
+  visualSlot,
+  statusIndicator = "ready",
+  className,
+}: AgentPopoverBrandingProps) {
+  return (
+    <div
+      className={cn(
+        "relative hidden w-[40%] shrink-0 flex-col items-center justify-center p-8 md:flex",
+        "bg-gradient-to-br from-primary/5 via-background to-primary/10",
+        className,
+      )}
+    >
+      {/* Dot pattern overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none opacity-[0.06]"
+        style={{
+          backgroundImage: "radial-gradient(circle, var(--primary) 1px, transparent 1px)",
+          backgroundSize: "24px 24px",
+        }}
+      />
+
+      <div className="relative z-10 flex flex-col items-center gap-6 text-center">
+        {visualSlot && (
+          <div className="w-[200px] h-[200px] flex items-center justify-center">
+            {visualSlot}
+          </div>
+        )}
+
+        {badge && (
+          <span className="inline-flex px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium border border-primary/10">
+            {badge}
+          </span>
+        )}
+
+        {title && <h2 className="text-xl font-semibold text-foreground">{title}</h2>}
+        {subtitle && <p className="text-sm text-muted-foreground max-w-[240px]">{subtitle}</p>}
+
+        <StatusPill status={statusIndicator} />
+      </div>
+    </div>
+  )
+}
+
+function StatusPill({ status }: { status: ConnectionStatus }) {
+  const label: Record<ConnectionStatus, string> = {
+    ready: "Ready to connect",
+    connected: "Connected",
+    listening: "Listening...",
+    speaking: "Speaking...",
+  }
+
+  const dotColor: Record<ConnectionStatus, string> = {
+    ready: "bg-muted-foreground",
+    connected: "bg-green-500",
+    listening: "bg-green-500 animate-pulse",
+    speaking: "bg-primary animate-pulse",
+  }
+
+  return (
+    <div className="flex items-center gap-2 rounded-full border border-border px-3 py-1.5 bg-background/50">
+      <div className={cn("h-2 w-2 rounded-full", dotColor[status])} />
+      <span className="text-xs text-muted-foreground">{label[status]}</span>
+    </div>
+  )
+}
+
+/* ========================================
+   AgentPopoverStepContent (right panel step)
+   ======================================== */
+
+export interface AgentPopoverStepContentProps {
+  step: string
+  children: React.ReactNode
+  className?: string
+}
+
+export function AgentPopoverStepContent({ step, children, className }: AgentPopoverStepContentProps) {
+  const { step: currentStep } = useAgentPopover()
+  if (currentStep !== step) return null
+  return <div className={cn("flex-1 flex flex-col overflow-hidden", className)}>{children}</div>
+}
+
+/* ========================================
+   AgentPopoverForm (details step)
+   ======================================== */
+
+export interface AgentPopoverFormField {
+  name: string
+  label: string
+  type?: "text" | "email" | "tel" | "textarea"
+  placeholder?: string
+  required?: boolean
+}
+
+export interface AgentPopoverFormProps {
+  fields?: AgentPopoverFormField[]
+  submitLabel?: string
+  onSubmit?: (values: Record<string, string>) => void
+  className?: string
+  children?: React.ReactNode
+}
+
+export function AgentPopoverForm({
+  fields = [],
+  submitLabel = "Continue",
+  onSubmit,
+  className,
+  children,
+}: AgentPopoverFormProps) {
+  const [values, setValues] = React.useState<Record<string, string>>({})
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onSubmit?.(values)
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className={cn("flex flex-col h-full p-8 overflow-y-auto", className)}
+    >
+      <div className="flex-1 space-y-4">
+        {fields.map((field) =>
+          field.type === "textarea" ? (
+            <label key={field.name} className="block space-y-1.5">
+              <span className="text-sm font-medium text-foreground">
+                {field.label}
+                {field.required && <span className="text-destructive ml-0.5">*</span>}
+              </span>
+              <textarea
+                className="w-full rounded-xl border border-border bg-background px-4 py-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary min-h-[80px] resize-none"
+                placeholder={field.placeholder}
+                required={field.required}
+                value={values[field.name] ?? ""}
+                onChange={(e) => setValues((prev) => ({ ...prev, [field.name]: e.target.value }))}
+              />
+            </label>
+          ) : (
+            <label key={field.name} className="block space-y-1.5">
+              <span className="text-sm font-medium text-foreground">
+                {field.label}
+                {field.required && <span className="text-destructive ml-0.5">*</span>}
+              </span>
+              <input
+                type={field.type ?? "text"}
+                className="w-full rounded-xl border border-border bg-background px-4 py-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+                placeholder={field.placeholder}
+                required={field.required}
+                value={values[field.name] ?? ""}
+                onChange={(e) => setValues((prev) => ({ ...prev, [field.name]: e.target.value }))}
+              />
+            </label>
+          ),
+        )}
+        {children}
+      </div>
+      <button
+        type="submit"
+        className="mt-6 w-full px-6 py-3 rounded-full bg-primary text-primary-foreground hover:bg-primary/90 font-medium transition-colors"
+      >
+        {submitLabel}
+      </button>
+    </form>
+  )
+}
+
+/* ========================================
+   AgentPopoverOverview
+   ======================================== */
+
+export interface AgentPopoverOverviewProps {
+  userSummary?: Record<string, string>
+  discussionPoints?: string[]
+  actions?: React.ReactNode
+  className?: string
+}
+
+export function AgentPopoverOverview({
+  userSummary,
+  discussionPoints,
+  actions,
+  className,
+}: AgentPopoverOverviewProps) {
+  return (
+    <div className={cn("flex flex-col h-full p-8 overflow-y-auto", className)}>
+      {userSummary && Object.keys(userSummary).length > 0 && (
+        <div className="mb-6 rounded-xl bg-muted/50 p-4 space-y-2">
+          {Object.entries(userSummary).map(([key, val]) => (
+            <div key={key} className="flex items-center justify-between text-sm">
+              <span className="text-muted-foreground capitalize">{key}</span>
+              <span className="text-foreground font-medium">{val}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {discussionPoints && discussionPoints.length > 0 && (
+        <div className="mb-6">
+          <h3 className="text-sm font-semibold text-foreground mb-3">Discussion Points</h3>
+          <ul className="space-y-2">
+            {discussionPoints.map((point, i) => (
+              <li key={i} className="flex items-start gap-2 text-sm text-foreground">
+                <div className="mt-1.5 w-1.5 h-1.5 rounded-full bg-primary shrink-0" />
+                {point}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {actions && <div className="mt-auto pt-6">{actions}</div>}
+    </div>
+  )
+}
+
+/* ========================================
+   AgentPopoverChat (interview step)
+   ======================================== */
+
+export interface AgentPopoverChatProps {
+  messages?: AgentWidgetMessage[]
+  onSendMessage?: (text: string) => void
+  onEndSession?: () => void
+  inputMode?: "voice" | "text" | "voice+text"
+  visualSlot?: React.ReactNode
+  assistantAvatarSlot?: React.ReactNode
+  status?: AgentWidgetStatus
+  mode?: AgentWidgetMode
+  className?: string
+}
+
+export function AgentPopoverChat({
+  messages = [],
+  onSendMessage,
+  onEndSession,
+  inputMode = "voice+text",
+  visualSlot,
+  assistantAvatarSlot,
+  status = "connected",
+  mode = null,
+  className,
+}: AgentPopoverChatProps) {
+  return (
+    <AgentWidget
+      messages={messages}
+      onSendMessage={onSendMessage}
+      onEndSession={onEndSession}
+      inputMode={inputMode}
+      visualSlot={visualSlot}
+      assistantAvatarSlot={assistantAvatarSlot}
+      status={status}
+      mode={mode}
+      className={cn("h-full", className)}
+    />
+  )
+}

package/src/components/agent-widget.tsx

@@ -0,0 +1,163 @@
+"use client"
+
+import * as React from "react"
+import { Mic, PhoneOff, Send, Sparkles } from "lucide-react"
+import { cn } from "../lib/utils"
+import { Message, MessageContent, MessageAvatar } from "./message"
+
+export type AgentWidgetStatus = "idle" | "connecting" | "connected" | "error"
+export type AgentWidgetMode = "listening" | "speaking" | null
+
+export interface AgentWidgetMessage {
+  from: "user" | "assistant"
+  text: string
+}
+
+export interface AgentWidgetProps {
+  status?: AgentWidgetStatus
+  mode?: AgentWidgetMode
+  messages?: AgentWidgetMessage[]
+  onSendMessage?: (text: string) => void
+  onEndSession?: () => void
+  inputMode?: "voice" | "text" | "voice+text"
+  visualSlot?: React.ReactNode
+  assistantAvatarSlot?: React.ReactNode
+  header?: React.ReactNode
+  footer?: React.ReactNode
+  className?: string
+}
+
+export function AgentWidget({
+  status = "idle",
+  mode = null,
+  messages = [],
+  onSendMessage,
+  onEndSession,
+  inputMode = "voice+text",
+  visualSlot,
+  assistantAvatarSlot,
+  header,
+  footer,
+  className,
+}: AgentWidgetProps) {
+  const [textInput, setTextInput] = React.useState("")
+  const messagesEndRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+  }, [messages])
+
+  const handleSend = () => {
+    if (!textInput.trim()) return
+    onSendMessage?.(textInput)
+    setTextInput("")
+  }
+
+  const showTextInput = inputMode === "text" || inputMode === "voice+text"
+  const isConnected = status === "connected"
+
+  return (
+    <div className={cn("flex flex-col h-full overflow-hidden", className)}>
+      {header}
+
+      {/* Chat area */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4 bg-muted/20">
+        {messages.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-muted-foreground space-y-2 opacity-50">
+            {visualSlot ?? (
+              <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center">
+                <Sparkles className="w-5 h-5" />
+              </div>
+            )}
+            <p className="text-sm">
+              {status === "connecting" ? "Connecting..." : "Conversation started..."}
+            </p>
+          </div>
+        ) : (
+          <>
+            {messages.map((msg, idx) => (
+              <Message key={idx} from={msg.from}>
+                {msg.from === "assistant" && assistantAvatarSlot ? (
+                  <MessageAvatar>{assistantAvatarSlot}</MessageAvatar>
+                ) : null}
+                <MessageContent>{msg.text.replace(/^["']|["']$/g, "")}</MessageContent>
+              </Message>
+            ))}
+            <div ref={messagesEndRef} />
+          </>
+        )}
+      </div>
+
+      {/* Voice status indicator */}
+      {inputMode !== "text" && isConnected && (
+        <div className="flex justify-center py-2 bg-background">
+          {mode === "listening" ? (
+            <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/5 rounded-full border border-primary/10">
+              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+              <span className="text-sm font-medium text-foreground">Listening</span>
+            </div>
+          ) : mode === "speaking" ? (
+            <button
+              type="button"
+              className="inline-flex items-center gap-2 px-4 py-2 bg-background rounded-full border border-border hover:border-primary transition-colors"
+            >
+              <Mic className="w-4 h-4 text-primary" />
+              <span className="text-sm font-medium text-foreground">Talk to interrupt</span>
+            </button>
+          ) : null}
+        </div>
+      )}
+
+      {/* Input area */}
+      <div className="flex-none p-4 bg-background border-t border-border">
+        {showTextInput ? (
+          <div className="relative border-2 border-foreground rounded-2xl p-4 bg-background shadow-sm transition-all focus-within:shadow-md">
+            <textarea
+              className="w-full resize-none border-none focus:ring-0 p-0 text-sm placeholder:text-muted-foreground min-h-[60px] bg-transparent outline-none focus:outline-none pr-24"
+              placeholder="Send a message..."
+              value={textInput}
+              onChange={(e) => setTextInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault()
+                  handleSend()
+                }
+              }}
+            />
+            <div className="absolute bottom-4 right-4 flex items-center gap-3">
+              {onEndSession && (
+                <button
+                  type="button"
+                  onClick={onEndSession}
+                  className="w-10 h-10 flex items-center justify-center rounded-full bg-background border border-border shadow-sm hover:bg-muted transition-colors group"
+                  title="End session"
+                >
+                  <PhoneOff className="w-5 h-5 text-foreground group-hover:text-destructive transition-colors" />
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={handleSend}
+                disabled={!textInput.trim()}
+                className="w-10 h-10 flex items-center justify-center rounded-full bg-muted-foreground hover:bg-foreground disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-background shadow-sm"
+              >
+                <Send className="w-5 h-5 ml-0.5" />
+              </button>
+            </div>
+          </div>
+        ) : onEndSession ? (
+          <button
+            type="button"
+            onClick={onEndSession}
+            className="flex items-center justify-center gap-2 w-full px-6 py-3 bg-destructive/5 hover:bg-destructive/10 text-destructive border border-destructive/20 rounded-full font-medium transition-all"
+          >
+            <span className="w-2 h-2 bg-destructive rounded-full" />
+            End Session
+          </button>
+        ) : null}
+      </div>
+
+      {footer}
+    </div>
+  )
+}

package/src/components/avatar.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}

package/src/components/badge.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }