@handled-ai/design-system 0.8.0 → 0.9.0

package/dist/components/activity-log.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Activity, Scale, Heart, MessageSquare, ArrowRight, ChevronDown } from "lucide-react";
+import { format } from "date-fns";
+const getIcon = (type) => {
+  switch (type) {
+    case "workout":
+      return /* @__PURE__ */ jsx(Activity, { size: 16, className: "text-orange-500" });
+    case "weighin":
+      return /* @__PURE__ */ jsx(Scale, { size: 16, className: "text-blue-500" });
+    case "biometric":
+      return /* @__PURE__ */ jsx(Heart, { size: 16, className: "text-rose-500" });
+    case "checkin":
+      return /* @__PURE__ */ jsx(MessageSquare, { size: 16, className: "text-indigo-500" });
+    default:
+      return /* @__PURE__ */ jsx(Activity, { size: 16, className: "text-gray-500" });
+  }
+};
+function ActivityRow({ item }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-3 border-b border-gray-100 last:border-0 hover:bg-gray-50 px-2 -mx-2 rounded-md transition-colors group", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded-full bg-gray-50 border border-gray-200 flex items-center justify-center", children: getIcon(item.type) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-sm text-gray-900", children: item.title }),
+      /* @__PURE__ */ jsx("span", { className: "hidden sm:inline text-gray-300", children: "\u2022" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 truncate", children: item.details }),
+      item.type === "checkin" && /* @__PURE__ */ jsxs("button", { className: "ml-auto sm:ml-2 text-xs text-indigo-600 hover:text-indigo-800 font-medium flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+        "view ",
+        /* @__PURE__ */ jsx(ArrowRight, { size: 10 })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "text-right flex-shrink-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500", children: format(new Date(item.date), "MMM d") }),
+      /* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-400", children: item.time })
+    ] })
+  ] });
+}
+function ActivityLog({ items, title = "Recent Activity", initialLimit = 5 }) {
+  const [limit, setLimit] = React.useState(initialLimit);
+  const displayedLogs = items.slice(0, limit);
+  const hasMore = limit < items.length;
+  return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl border border-gray-200 p-6 shadow-sm", children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-4", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: displayedLogs.map((item) => /* @__PURE__ */ jsx(ActivityRow, { item }, item.id)) }),
+    hasMore && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setLimit((prev) => prev + 5),
+        className: "w-full mt-4 py-2 flex items-center justify-center gap-2 text-sm text-gray-500 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors border border-dashed border-gray-200",
+        children: [
+          /* @__PURE__ */ jsx(ChevronDown, { size: 14 }),
+          "Show more"
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ActivityLog,
+  ActivityRow
+};
+//# sourceMappingURL=activity-log.js.map

package/dist/components/activity-log.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/activity-log.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Activity, Scale, Heart, MessageSquare, ArrowRight, ChevronDown } from \"lucide-react\"\nimport { format } from \"date-fns\"\n\n\nexport interface ActivityLogItem {\n  id: string\n  type: \"workout\" | \"weighin\" | \"biometric\" | \"checkin\" | string\n  title: string\n  details: string\n  date: string\n  time: string\n}\n\nexport interface ActivityLogProps {\n  items: ActivityLogItem[]\n  title?: string\n  initialLimit?: number\n}\n\nconst getIcon = (type: string) => {\n  switch (type) {\n    case \"workout\":\n      return <Activity size={16} className=\"text-orange-500\" />\n    case \"weighin\":\n      return <Scale size={16} className=\"text-blue-500\" />\n    case \"biometric\":\n      return <Heart size={16} className=\"text-rose-500\" />\n    case \"checkin\":\n      return <MessageSquare size={16} className=\"text-indigo-500\" />\n    default:\n      return <Activity size={16} className=\"text-gray-500\" />\n  }\n}\n\nexport function ActivityRow({ item }: { item: ActivityLogItem }) {\n  return (\n    <div className=\"flex items-center gap-4 py-3 border-b border-gray-100 last:border-0 hover:bg-gray-50 px-2 -mx-2 rounded-md transition-colors group\">\n      <div className=\"flex-shrink-0 w-8 h-8 rounded-full bg-gray-50 border border-gray-200 flex items-center justify-center\">\n        {getIcon(item.type)}\n      </div>\n\n      <div className=\"flex-1 min-w-0 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2\">\n        <span className=\"font-medium text-sm text-gray-900\">{item.title}</span>\n        <span className=\"hidden sm:inline text-gray-300\">•</span>\n        <span className=\"text-xs text-gray-500 truncate\">{item.details}</span>\n\n        {item.type === \"checkin\" && (\n          <button className=\"ml-auto sm:ml-2 text-xs text-indigo-600 hover:text-indigo-800 font-medium flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity\">\n            view <ArrowRight size={10} />\n          </button>\n        )}\n      </div>\n\n      <div className=\"text-right flex-shrink-0\">\n        <div className=\"text-xs text-gray-500\">{format(new Date(item.date), \"MMM d\")}</div>\n        <div className=\"text-[10px] text-gray-400\">{item.time}</div>\n      </div>\n    </div>\n  )\n}\n\nexport function ActivityLog({ items, title = \"Recent Activity\", initialLimit = 5 }: ActivityLogProps) {\n  const [limit, setLimit] = React.useState(initialLimit)\n  const displayedLogs = items.slice(0, limit)\n  const hasMore = limit < items.length\n\n  return (\n    <div className=\"bg-white rounded-xl border border-gray-200 p-6 shadow-sm\">\n      <h2 className=\"text-lg font-semibold text-gray-900 mb-4\">{title}</h2>\n\n      <div className=\"flex flex-col\">\n        {displayedLogs.map((item) => (\n          <ActivityRow key={item.id} item={item} />\n        ))}\n      </div>\n\n      {hasMore && (\n        <button\n          onClick={() => setLimit((prev) => prev + 5)}\n          className=\"w-full mt-4 py-2 flex items-center justify-center gap-2 text-sm text-gray-500 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors border border-dashed border-gray-200\"\n        >\n          <ChevronDown size={14} />\n          Show more\n        </button>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAuBa,cAyBH,YAzBG;AAvBb,YAAY,WAAW;AACvB,SAAS,UAAU,OAAO,OAAO,eAAe,YAAY,mBAAmB;AAC/E,SAAS,cAAc;AAkBvB,MAAM,UAAU,CAAC,SAAiB;AAChC,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,oBAAC,YAAS,MAAM,IAAI,WAAU,mBAAkB;AAAA,IACzD,KAAK;AACH,aAAO,oBAAC,SAAM,MAAM,IAAI,WAAU,iBAAgB;AAAA,IACpD,KAAK;AACH,aAAO,oBAAC,SAAM,MAAM,IAAI,WAAU,iBAAgB;AAAA,IACpD,KAAK;AACH,aAAO,oBAAC,iBAAc,MAAM,IAAI,WAAU,mBAAkB;AAAA,IAC9D;AACE,aAAO,oBAAC,YAAS,MAAM,IAAI,WAAU,iBAAgB;AAAA,EACzD;AACF;AAEO,SAAS,YAAY,EAAE,KAAK,GAA8B;AAC/D,SACE,qBAAC,SAAI,WAAU,sIACb;AAAA,wBAAC,SAAI,WAAU,yGACZ,kBAAQ,KAAK,IAAI,GACpB;AAAA,IAEA,qBAAC,SAAI,WAAU,2EACb;AAAA,0BAAC,UAAK,WAAU,qCAAqC,eAAK,OAAM;AAAA,MAChE,oBAAC,UAAK,WAAU,kCAAiC,oBAAC;AAAA,MAClD,oBAAC,UAAK,WAAU,kCAAkC,eAAK,SAAQ;AAAA,MAE9D,KAAK,SAAS,aACb,qBAAC,YAAO,WAAU,4JAA2J;AAAA;AAAA,QACtK,oBAAC,cAAW,MAAM,IAAI;AAAA,SAC7B;AAAA,OAEJ;AAAA,IAEA,qBAAC,SAAI,WAAU,4BACb;AAAA,0BAAC,SAAI,WAAU,yBAAyB,iBAAO,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,GAAE;AAAA,MAC7E,oBAAC,SAAI,WAAU,6BAA6B,eAAK,MAAK;AAAA,OACxD;AAAA,KACF;AAEJ;AAEO,SAAS,YAAY,EAAE,OAAO,QAAQ,mBAAmB,eAAe,EAAE,GAAqB;AACpG,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,YAAY;AACrD,QAAM,gBAAgB,MAAM,MAAM,GAAG,KAAK;AAC1C,QAAM,UAAU,QAAQ,MAAM;AAE9B,SACE,qBAAC,SAAI,WAAU,4DACb;AAAA,wBAAC,QAAG,WAAU,4CAA4C,iBAAM;AAAA,IAEhE,oBAAC,SAAI,WAAU,iBACZ,wBAAc,IAAI,CAAC,SAClB,oBAAC,eAA0B,QAAT,KAAK,EAAgB,CACxC,GACH;AAAA,IAEC,WACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM,SAAS,CAAC,SAAS,OAAO,CAAC;AAAA,QAC1C,WAAU;AAAA,QAEV;AAAA,8BAAC,eAAY,MAAM,IAAI;AAAA,UAAE;AAAA;AAAA;AAAA,IAE3B;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/agent-popover.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { AgentWidgetMessage, AgentWidgetStatus, AgentWidgetMode } from './agent-widget.js';
+
+type AgentPopoverStep = string;
+interface AgentPopoverContextValue {
+    step: AgentPopoverStep;
+    setStep: (step: AgentPopoverStep) => void;
+}
+declare function useAgentPopover(): AgentPopoverContextValue;
+interface AgentPopoverProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    defaultStep?: string;
+    step?: string;
+    onStepChange?: (step: string) => void;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function AgentPopover({ open, onOpenChange, defaultStep, step: controlledStep, onStepChange, children, className, }: AgentPopoverProps): React.JSX.Element | null;
+type ConnectionStatus = "ready" | "connected" | "listening" | "speaking";
+interface AgentPopoverBrandingProps {
+    title?: string;
+    subtitle?: string;
+    badge?: string;
+    visualSlot?: React.ReactNode;
+    statusIndicator?: ConnectionStatus;
+    className?: string;
+}
+declare function AgentPopoverBranding({ title, subtitle, badge, visualSlot, statusIndicator, className, }: AgentPopoverBrandingProps): React.JSX.Element;
+interface AgentPopoverStepContentProps {
+    step: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function AgentPopoverStepContent({ step, children, className }: AgentPopoverStepContentProps): React.JSX.Element | null;
+interface AgentPopoverFormField {
+    name: string;
+    label: string;
+    type?: "text" | "email" | "tel" | "textarea";
+    placeholder?: string;
+    required?: boolean;
+}
+interface AgentPopoverFormProps {
+    fields?: AgentPopoverFormField[];
+    submitLabel?: string;
+    onSubmit?: (values: Record<string, string>) => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare function AgentPopoverForm({ fields, submitLabel, onSubmit, className, children, }: AgentPopoverFormProps): React.JSX.Element;
+interface AgentPopoverOverviewProps {
+    userSummary?: Record<string, string>;
+    discussionPoints?: string[];
+    actions?: React.ReactNode;
+    className?: string;
+}
+declare function AgentPopoverOverview({ userSummary, discussionPoints, actions, className, }: AgentPopoverOverviewProps): React.JSX.Element;
+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;
+}
+declare function AgentPopoverChat({ messages, onSendMessage, onEndSession, inputMode, visualSlot, assistantAvatarSlot, status, mode, className, }: AgentPopoverChatProps): React.JSX.Element;
+
+export { AgentPopover, AgentPopoverBranding, type AgentPopoverBrandingProps, AgentPopoverChat, type AgentPopoverChatProps, type AgentPopoverContextValue, AgentPopoverForm, type AgentPopoverFormField, type AgentPopoverFormProps, AgentPopoverOverview, type AgentPopoverOverviewProps, type AgentPopoverProps, type AgentPopoverStep, AgentPopoverStepContent, type AgentPopoverStepContentProps, type ConnectionStatus, useAgentPopover };

package/dist/components/agent-popover.js

@@ -0,0 +1,282 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { AgentWidget } from "./agent-widget.js";
+const AgentPopoverContext = React.createContext(null);
+function useAgentPopover() {
+  const ctx = React.useContext(AgentPopoverContext);
+  if (!ctx) throw new Error("useAgentPopover must be used within <AgentPopover>");
+  return ctx;
+}
+function AgentPopover({
+  open,
+  onOpenChange,
+  defaultStep = "details",
+  step: controlledStep,
+  onStepChange,
+  children,
+  className
+}) {
+  const [uncontrolledStep, setUncontrolledStep] = React.useState(defaultStep);
+  const step = controlledStep != null ? controlledStep : uncontrolledStep;
+  const setStep = React.useCallback(
+    (s) => {
+      if (controlledStep === void 0) setUncontrolledStep(s);
+      onStepChange == null ? void 0 : onStepChange(s);
+    },
+    [controlledStep, onStepChange]
+  );
+  React.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onOpenChange(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onOpenChange]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(AgentPopoverContext.Provider, { value: { step, setStep }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm animate-in fade-in duration-200",
+        onClick: () => onOpenChange(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "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
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "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",
+              children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+            }
+          ),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function AgentPopoverBranding({
+  title,
+  subtitle,
+  badge,
+  visualSlot,
+  statusIndicator = "ready",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "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
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 pointer-events-none opacity-[0.06]",
+            style: {
+              backgroundImage: "radial-gradient(circle, var(--primary) 1px, transparent 1px)",
+              backgroundSize: "24px 24px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col items-center gap-6 text-center", children: [
+          visualSlot && /* @__PURE__ */ jsx("div", { className: "w-[200px] h-[200px] flex items-center justify-center", children: visualSlot }),
+          badge && /* @__PURE__ */ jsx("span", { className: "inline-flex px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium border border-primary/10", children: badge }),
+          title && /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-foreground", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground max-w-[240px]", children: subtitle }),
+          /* @__PURE__ */ jsx(StatusPill, { status: statusIndicator })
+        ] })
+      ]
+    }
+  );
+}
+function StatusPill({ status }) {
+  const label = {
+    ready: "Ready to connect",
+    connected: "Connected",
+    listening: "Listening...",
+    speaking: "Speaking..."
+  };
+  const dotColor = {
+    ready: "bg-muted-foreground",
+    connected: "bg-green-500",
+    listening: "bg-green-500 animate-pulse",
+    speaking: "bg-primary animate-pulse"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-full border border-border px-3 py-1.5 bg-background/50", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("h-2 w-2 rounded-full", dotColor[status]) }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: label[status] })
+  ] });
+}
+function AgentPopoverStepContent({ step, children, className }) {
+  const { step: currentStep } = useAgentPopover();
+  if (currentStep !== step) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex-1 flex flex-col overflow-hidden", className), children });
+}
+function AgentPopoverForm({
+  fields = [],
+  submitLabel = "Continue",
+  onSubmit,
+  className,
+  children
+}) {
+  const [values, setValues] = React.useState({});
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit == null ? void 0 : onSubmit(values);
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: cn("flex flex-col h-full p-8 overflow-y-auto", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-4", children: [
+          fields.map(
+            (field) => {
+              var _a, _b, _c;
+              return field.type === "textarea" ? /* @__PURE__ */ jsxs("label", { className: "block space-y-1.5", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-foreground", children: [
+                  field.label,
+                  field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-0.5", children: "*" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "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: (_a = values[field.name]) != null ? _a : "",
+                    onChange: (e) => setValues((prev) => __spreadProps(__spreadValues({}, prev), { [field.name]: e.target.value }))
+                  }
+                )
+              ] }, field.name) : /* @__PURE__ */ jsxs("label", { className: "block space-y-1.5", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-foreground", children: [
+                  field.label,
+                  field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-0.5", children: "*" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: (_b = field.type) != null ? _b : "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: (_c = values[field.name]) != null ? _c : "",
+                    onChange: (e) => setValues((prev) => __spreadProps(__spreadValues({}, prev), { [field.name]: e.target.value }))
+                  }
+                )
+              ] }, field.name);
+            }
+          ),
+          children
+        ] }),
+        /* @__PURE__ */ jsx(
+          "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",
+            children: submitLabel
+          }
+        )
+      ]
+    }
+  );
+}
+function AgentPopoverOverview({
+  userSummary,
+  discussionPoints,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full p-8 overflow-y-auto", className), children: [
+    userSummary && Object.keys(userSummary).length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-6 rounded-xl bg-muted/50 p-4 space-y-2", children: Object.entries(userSummary).map(([key, val]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground capitalize", children: key }),
+      /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: val })
+    ] }, key)) }),
+    discussionPoints && discussionPoints.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground mb-3", children: "Discussion Points" }),
+      /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: discussionPoints.map((point, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm text-foreground", children: [
+        /* @__PURE__ */ jsx("div", { className: "mt-1.5 w-1.5 h-1.5 rounded-full bg-primary shrink-0" }),
+        point
+      ] }, i)) })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "mt-auto pt-6", children: actions })
+  ] });
+}
+function AgentPopoverChat({
+  messages = [],
+  onSendMessage,
+  onEndSession,
+  inputMode = "voice+text",
+  visualSlot,
+  assistantAvatarSlot,
+  status = "connected",
+  mode = null,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    AgentWidget,
+    {
+      messages,
+      onSendMessage,
+      onEndSession,
+      inputMode,
+      visualSlot,
+      assistantAvatarSlot,
+      status,
+      mode,
+      className: cn("h-full", className)
+    }
+  );
+}
+export {
+  AgentPopover,
+  AgentPopoverBranding,
+  AgentPopoverChat,
+  AgentPopoverForm,
+  AgentPopoverOverview,
+  AgentPopoverStepContent,
+  useAgentPopover
+};
+//# sourceMappingURL=agent-popover.js.map

package/dist/components/agent-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/agent-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { X } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\nimport { AgentWidget, type AgentWidgetMessage, type AgentWidgetStatus, type AgentWidgetMode } from \"./agent-widget\"\n\n/* ========================================\n   AgentPopover (root)\n   ======================================== */\n\nexport type AgentPopoverStep = string\n\nexport interface AgentPopoverContextValue {\n  step: AgentPopoverStep\n  setStep: (step: AgentPopoverStep) => void\n}\n\nconst AgentPopoverContext = React.createContext<AgentPopoverContextValue | null>(null)\n\nexport function useAgentPopover() {\n  const ctx = React.useContext(AgentPopoverContext)\n  if (!ctx) throw new Error(\"useAgentPopover must be used within <AgentPopover>\")\n  return ctx\n}\n\nexport interface AgentPopoverProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  defaultStep?: string\n  step?: string\n  onStepChange?: (step: string) => void\n  children: React.ReactNode\n  className?: string\n}\n\nexport function AgentPopover({\n  open,\n  onOpenChange,\n  defaultStep = \"details\",\n  step: controlledStep,\n  onStepChange,\n  children,\n  className,\n}: AgentPopoverProps) {\n  const [uncontrolledStep, setUncontrolledStep] = React.useState(defaultStep)\n  const step = controlledStep ?? uncontrolledStep\n  const setStep = React.useCallback(\n    (s: string) => {\n      if (controlledStep === undefined) setUncontrolledStep(s)\n      onStepChange?.(s)\n    },\n    [controlledStep, onStepChange],\n  )\n\n  React.useEffect(() => {\n    if (!open) return\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onOpenChange(false)\n    }\n    document.addEventListener(\"keydown\", onKeyDown)\n    return () => document.removeEventListener(\"keydown\", onKeyDown)\n  }, [open, onOpenChange])\n\n  if (!open) return null\n\n  return (\n    <AgentPopoverContext.Provider value={{ step, setStep }}>\n      {/* Backdrop */}\n      <div\n        className=\"fixed inset-0 z-50 bg-black/30 backdrop-blur-sm animate-in fade-in duration-200\"\n        onClick={() => onOpenChange(false)}\n      />\n      {/* Panel */}\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        className={cn(\n          \"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\",\n          \"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]\",\n          className,\n        )}\n      >\n        {/* Close button */}\n        <button\n          type=\"button\"\n          onClick={() => onOpenChange(false)}\n          className=\"absolute right-4 top-4 z-20 p-2 rounded-full bg-background/80 hover:bg-muted transition-colors text-foreground\"\n        >\n          <X className=\"w-4 h-4\" />\n        </button>\n\n        {children}\n      </div>\n    </AgentPopoverContext.Provider>\n  )\n}\n\n/* ========================================\n   AgentPopoverBranding (left panel)\n   ======================================== */\n\nexport type ConnectionStatus = \"ready\" | \"connected\" | \"listening\" | \"speaking\"\n\nexport interface AgentPopoverBrandingProps {\n  title?: string\n  subtitle?: string\n  badge?: string\n  visualSlot?: React.ReactNode\n  statusIndicator?: ConnectionStatus\n  className?: string\n}\n\nexport function AgentPopoverBranding({\n  title,\n  subtitle,\n  badge,\n  visualSlot,\n  statusIndicator = \"ready\",\n  className,\n}: AgentPopoverBrandingProps) {\n  return (\n    <div\n      className={cn(\n        \"relative hidden w-[40%] shrink-0 flex-col items-center justify-center p-8 md:flex\",\n        \"bg-gradient-to-br from-primary/5 via-background to-primary/10\",\n        className,\n      )}\n    >\n      {/* Dot pattern overlay */}\n      <div\n        className=\"absolute inset-0 pointer-events-none opacity-[0.06]\"\n        style={{\n          backgroundImage: \"radial-gradient(circle, var(--primary) 1px, transparent 1px)\",\n          backgroundSize: \"24px 24px\",\n        }}\n      />\n\n      <div className=\"relative z-10 flex flex-col items-center gap-6 text-center\">\n        {visualSlot && (\n          <div className=\"w-[200px] h-[200px] flex items-center justify-center\">\n            {visualSlot}\n          </div>\n        )}\n\n        {badge && (\n          <span className=\"inline-flex px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium border border-primary/10\">\n            {badge}\n          </span>\n        )}\n\n        {title && <h2 className=\"text-xl font-semibold text-foreground\">{title}</h2>}\n        {subtitle && <p className=\"text-sm text-muted-foreground max-w-[240px]\">{subtitle}</p>}\n\n        <StatusPill status={statusIndicator} />\n      </div>\n    </div>\n  )\n}\n\nfunction StatusPill({ status }: { status: ConnectionStatus }) {\n  const label: Record<ConnectionStatus, string> = {\n    ready: \"Ready to connect\",\n    connected: \"Connected\",\n    listening: \"Listening...\",\n    speaking: \"Speaking...\",\n  }\n\n  const dotColor: Record<ConnectionStatus, string> = {\n    ready: \"bg-muted-foreground\",\n    connected: \"bg-green-500\",\n    listening: \"bg-green-500 animate-pulse\",\n    speaking: \"bg-primary animate-pulse\",\n  }\n\n  return (\n    <div className=\"flex items-center gap-2 rounded-full border border-border px-3 py-1.5 bg-background/50\">\n      <div className={cn(\"h-2 w-2 rounded-full\", dotColor[status])} />\n      <span className=\"text-xs text-muted-foreground\">{label[status]}</span>\n    </div>\n  )\n}\n\n/* ========================================\n   AgentPopoverStepContent (right panel step)\n   ======================================== */\n\nexport interface AgentPopoverStepContentProps {\n  step: string\n  children: React.ReactNode\n  className?: string\n}\n\nexport function AgentPopoverStepContent({ step, children, className }: AgentPopoverStepContentProps) {\n  const { step: currentStep } = useAgentPopover()\n  if (currentStep !== step) return null\n  return <div className={cn(\"flex-1 flex flex-col overflow-hidden\", className)}>{children}</div>\n}\n\n/* ========================================\n   AgentPopoverForm (details step)\n   ======================================== */\n\nexport interface AgentPopoverFormField {\n  name: string\n  label: string\n  type?: \"text\" | \"email\" | \"tel\" | \"textarea\"\n  placeholder?: string\n  required?: boolean\n}\n\nexport interface AgentPopoverFormProps {\n  fields?: AgentPopoverFormField[]\n  submitLabel?: string\n  onSubmit?: (values: Record<string, string>) => void\n  className?: string\n  children?: React.ReactNode\n}\n\nexport function AgentPopoverForm({\n  fields = [],\n  submitLabel = \"Continue\",\n  onSubmit,\n  className,\n  children,\n}: AgentPopoverFormProps) {\n  const [values, setValues] = React.useState<Record<string, string>>({})\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault()\n    onSubmit?.(values)\n  }\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className={cn(\"flex flex-col h-full p-8 overflow-y-auto\", className)}\n    >\n      <div className=\"flex-1 space-y-4\">\n        {fields.map((field) =>\n          field.type === \"textarea\" ? (\n            <label key={field.name} className=\"block space-y-1.5\">\n              <span className=\"text-sm font-medium text-foreground\">\n                {field.label}\n                {field.required && <span className=\"text-destructive ml-0.5\">*</span>}\n              </span>\n              <textarea\n                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\"\n                placeholder={field.placeholder}\n                required={field.required}\n                value={values[field.name] ?? \"\"}\n                onChange={(e) => setValues((prev) => ({ ...prev, [field.name]: e.target.value }))}\n              />\n            </label>\n          ) : (\n            <label key={field.name} className=\"block space-y-1.5\">\n              <span className=\"text-sm font-medium text-foreground\">\n                {field.label}\n                {field.required && <span className=\"text-destructive ml-0.5\">*</span>}\n              </span>\n              <input\n                type={field.type ?? \"text\"}\n                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\"\n                placeholder={field.placeholder}\n                required={field.required}\n                value={values[field.name] ?? \"\"}\n                onChange={(e) => setValues((prev) => ({ ...prev, [field.name]: e.target.value }))}\n              />\n            </label>\n          ),\n        )}\n        {children}\n      </div>\n      <button\n        type=\"submit\"\n        className=\"mt-6 w-full px-6 py-3 rounded-full bg-primary text-primary-foreground hover:bg-primary/90 font-medium transition-colors\"\n      >\n        {submitLabel}\n      </button>\n    </form>\n  )\n}\n\n/* ========================================\n   AgentPopoverOverview\n   ======================================== */\n\nexport interface AgentPopoverOverviewProps {\n  userSummary?: Record<string, string>\n  discussionPoints?: string[]\n  actions?: React.ReactNode\n  className?: string\n}\n\nexport function AgentPopoverOverview({\n  userSummary,\n  discussionPoints,\n  actions,\n  className,\n}: AgentPopoverOverviewProps) {\n  return (\n    <div className={cn(\"flex flex-col h-full p-8 overflow-y-auto\", className)}>\n      {userSummary && Object.keys(userSummary).length > 0 && (\n        <div className=\"mb-6 rounded-xl bg-muted/50 p-4 space-y-2\">\n          {Object.entries(userSummary).map(([key, val]) => (\n            <div key={key} className=\"flex items-center justify-between text-sm\">\n              <span className=\"text-muted-foreground capitalize\">{key}</span>\n              <span className=\"text-foreground font-medium\">{val}</span>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {discussionPoints && discussionPoints.length > 0 && (\n        <div className=\"mb-6\">\n          <h3 className=\"text-sm font-semibold text-foreground mb-3\">Discussion Points</h3>\n          <ul className=\"space-y-2\">\n            {discussionPoints.map((point, i) => (\n              <li key={i} className=\"flex items-start gap-2 text-sm text-foreground\">\n                <div className=\"mt-1.5 w-1.5 h-1.5 rounded-full bg-primary shrink-0\" />\n                {point}\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n\n      {actions && <div className=\"mt-auto pt-6\">{actions}</div>}\n    </div>\n  )\n}\n\n/* ========================================\n   AgentPopoverChat (interview step)\n   ======================================== */\n\nexport interface AgentPopoverChatProps {\n  messages?: AgentWidgetMessage[]\n  onSendMessage?: (text: string) => void\n  onEndSession?: () => void\n  inputMode?: \"voice\" | \"text\" | \"voice+text\"\n  visualSlot?: React.ReactNode\n  assistantAvatarSlot?: React.ReactNode\n  status?: AgentWidgetStatus\n  mode?: AgentWidgetMode\n  className?: string\n}\n\nexport function AgentPopoverChat({\n  messages = [],\n  onSendMessage,\n  onEndSession,\n  inputMode = \"voice+text\",\n  visualSlot,\n  assistantAvatarSlot,\n  status = \"connected\",\n  mode = null,\n  className,\n}: AgentPopoverChatProps) {\n  return (\n    <AgentWidget\n      messages={messages}\n      onSendMessage={onSendMessage}\n      onEndSession={onEndSession}\n      inputMode={inputMode}\n      visualSlot={visualSlot}\n      assistantAvatarSlot={assistantAvatarSlot}\n      status={status}\n      mode={mode}\n      className={cn(\"h-full\", className)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqEM,cAKA,YALA;AAnEN,YAAY,WAAW;AACvB,SAAS,SAAS;AAClB,SAAS,UAAU;AACnB,SAAS,mBAA0F;AAanG,MAAM,sBAAsB,MAAM,cAA+C,IAAI;AAE9E,SAAS,kBAAkB;AAChC,QAAM,MAAM,MAAM,WAAW,mBAAmB;AAChD,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,oDAAoD;AAC9E,SAAO;AACT;AAYO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,MAAM,SAAS,WAAW;AAC1E,QAAM,OAAO,0CAAkB;AAC/B,QAAM,UAAU,MAAM;AAAA,IACpB,CAAC,MAAc;AACb,UAAI,mBAAmB,OAAW,qBAAoB,CAAC;AACvD,mDAAe;AAAA,IACjB;AAAA,IACA,CAAC,gBAAgB,YAAY;AAAA,EAC/B;AAEA,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,KAAM;AACX,UAAM,YAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,QAAQ,SAAU,cAAa,KAAK;AAAA,IAC5C;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,MAAM,YAAY,CAAC;AAEvB,MAAI,CAAC,KAAM,QAAO;AAElB,SACE,qBAAC,oBAAoB,UAApB,EAA6B,OAAO,EAAE,MAAM,QAAQ,GAEnD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM,aAAa,KAAK;AAAA;AAAA,IACnC;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAGA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,aAAa,KAAK;AAAA,cACjC,WAAU;AAAA,cAEV,8BAAC,KAAE,WAAU,WAAU;AAAA;AAAA,UACzB;AAAA,UAEC;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAiBO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AACF,GAA8B;AAC5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAGA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,iBAAiB;AAAA,cACjB,gBAAgB;AAAA,YAClB;AAAA;AAAA,QACF;AAAA,QAEA,qBAAC,SAAI,WAAU,8DACZ;AAAA,wBACC,oBAAC,SAAI,WAAU,wDACZ,sBACH;AAAA,UAGD,SACC,oBAAC,UAAK,WAAU,8GACb,iBACH;AAAA,UAGD,SAAS,oBAAC,QAAG,WAAU,yCAAyC,iBAAM;AAAA,UACtE,YAAY,oBAAC,OAAE,WAAU,+CAA+C,oBAAS;AAAA,UAElF,oBAAC,cAAW,QAAQ,iBAAiB;AAAA,WACvC;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,WAAW,EAAE,OAAO,GAAiC;AAC5D,QAAM,QAA0C;AAAA,IAC9C,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AAEA,QAAM,WAA6C;AAAA,IACjD,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,EACZ;AAEA,SACE,qBAAC,SAAI,WAAU,0FACb;AAAA,wBAAC,SAAI,WAAW,GAAG,wBAAwB,SAAS,MAAM,CAAC,GAAG;AAAA,IAC9D,oBAAC,UAAK,WAAU,iCAAiC,gBAAM,MAAM,GAAE;AAAA,KACjE;AAEJ;AAYO,SAAS,wBAAwB,EAAE,MAAM,UAAU,UAAU,GAAiC;AACnG,QAAM,EAAE,MAAM,YAAY,IAAI,gBAAgB;AAC9C,MAAI,gBAAgB,KAAM,QAAO;AACjC,SAAO,oBAAC,SAAI,WAAW,GAAG,wCAAwC,SAAS,GAAI,UAAS;AAC1F;AAsBO,SAAS,iBAAiB;AAAA,EAC/B,SAAS,CAAC;AAAA,EACV,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAiC,CAAC,CAAC;AAErE,QAAM,eAAe,CAAC,MAAuB;AAC3C,MAAE,eAAe;AACjB,yCAAW;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW,GAAG,4CAA4C,SAAS;AAAA,MAEnE;AAAA,6BAAC,SAAI,WAAU,oBACZ;AAAA,iBAAO;AAAA,YAAI,CAAC,UAAO;AA/O5B;AAgPU,2BAAM,SAAS,aACb,qBAAC,WAAuB,WAAU,qBAChC;AAAA,qCAAC,UAAK,WAAU,uCACb;AAAA,wBAAM;AAAA,kBACN,MAAM,YAAY,oBAAC,UAAK,WAAU,2BAA0B,eAAC;AAAA,mBAChE;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,aAAa,MAAM;AAAA,oBACnB,UAAU,MAAM;AAAA,oBAChB,QAAO,YAAO,MAAM,IAAI,MAAjB,YAAsB;AAAA,oBAC7B,UAAU,CAAC,MAAM,UAAU,CAAC,SAAU,iCAAK,OAAL,EAAW,CAAC,MAAM,IAAI,GAAG,EAAE,OAAO,MAAM,EAAE;AAAA;AAAA,gBAClF;AAAA,mBAXU,MAAM,IAYlB,IAEA,qBAAC,WAAuB,WAAU,qBAChC;AAAA,qCAAC,UAAK,WAAU,uCACb;AAAA,wBAAM;AAAA,kBACN,MAAM,YAAY,oBAAC,UAAK,WAAU,2BAA0B,eAAC;AAAA,mBAChE;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAM,WAAM,SAAN,YAAc;AAAA,oBACpB,WAAU;AAAA,oBACV,aAAa,MAAM;AAAA,oBACnB,UAAU,MAAM;AAAA,oBAChB,QAAO,YAAO,MAAM,IAAI,MAAjB,YAAsB;AAAA,oBAC7B,UAAU,CAAC,MAAM,UAAU,CAAC,SAAU,iCAAK,OAAL,EAAW,CAAC,MAAM,IAAI,GAAG,EAAE,OAAO,MAAM,EAAE;AAAA;AAAA,gBAClF;AAAA,mBAZU,MAAM,IAalB;AAAA;AAAA,UAEJ;AAAA,UACC;AAAA,WACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAaO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,SACE,qBAAC,SAAI,WAAW,GAAG,4CAA4C,SAAS,GACrE;AAAA,mBAAe,OAAO,KAAK,WAAW,EAAE,SAAS,KAChD,oBAAC,SAAI,WAAU,6CACZ,iBAAO,QAAQ,WAAW,EAAE,IAAI,CAAC,CAAC,KAAK,GAAG,MACzC,qBAAC,SAAc,WAAU,6CACvB;AAAA,0BAAC,UAAK,WAAU,oCAAoC,eAAI;AAAA,MACxD,oBAAC,UAAK,WAAU,+BAA+B,eAAI;AAAA,SAF3C,GAGV,CACD,GACH;AAAA,IAGD,oBAAoB,iBAAiB,SAAS,KAC7C,qBAAC,SAAI,WAAU,QACb;AAAA,0BAAC,QAAG,WAAU,8CAA6C,+BAAiB;AAAA,MAC5E,oBAAC,QAAG,WAAU,aACX,2BAAiB,IAAI,CAAC,OAAO,MAC5B,qBAAC,QAAW,WAAU,kDACpB;AAAA,4BAAC,SAAI,WAAU,uDAAsD;AAAA,QACpE;AAAA,WAFM,CAGT,CACD,GACH;AAAA,OACF;AAAA,IAGD,WAAW,oBAAC,SAAI,WAAU,gBAAgB,mBAAQ;AAAA,KACrD;AAEJ;AAkBO,SAAS,iBAAiB;AAAA,EAC/B,WAAW,CAAC;AAAA,EACZ;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AAAA,EACP;AACF,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,UAAU,SAAS;AAAA;AAAA,EACnC;AAEJ;","names":[]}

package/dist/components/agent-widget.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+type AgentWidgetStatus = "idle" | "connecting" | "connected" | "error";
+type AgentWidgetMode = "listening" | "speaking" | null;
+interface AgentWidgetMessage {
+    from: "user" | "assistant";
+    text: string;
+}
+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;
+}
+declare function AgentWidget({ status, mode, messages, onSendMessage, onEndSession, inputMode, visualSlot, assistantAvatarSlot, header, footer, className, }: AgentWidgetProps): React.JSX.Element;
+
+export { AgentWidget, type AgentWidgetMessage, type AgentWidgetMode, type AgentWidgetProps, type AgentWidgetStatus };

package/dist/components/agent-widget.js

@@ -0,0 +1,117 @@
+"use client"
+
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Mic, PhoneOff, Send, Sparkles } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Message, MessageContent, MessageAvatar } from "./message.js";
+function AgentWidget({
+  status = "idle",
+  mode = null,
+  messages = [],
+  onSendMessage,
+  onEndSession,
+  inputMode = "voice+text",
+  visualSlot,
+  assistantAvatarSlot,
+  header,
+  footer,
+  className
+}) {
+  const [textInput, setTextInput] = React.useState("");
+  const messagesEndRef = React.useRef(null);
+  React.useEffect(() => {
+    var _a;
+    (_a = messagesEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const handleSend = () => {
+    if (!textInput.trim()) return;
+    onSendMessage == null ? void 0 : onSendMessage(textInput);
+    setTextInput("");
+  };
+  const showTextInput = inputMode === "text" || inputMode === "voice+text";
+  const isConnected = status === "connected";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col h-full overflow-hidden", className), children: [
+    header,
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 bg-muted/20", children: messages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-muted-foreground space-y-2 opacity-50", children: [
+      visualSlot != null ? visualSlot : /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx(Sparkles, { className: "w-5 h-5" }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: status === "connecting" ? "Connecting..." : "Conversation started..." })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      messages.map((msg, idx) => /* @__PURE__ */ jsxs(Message, { from: msg.from, children: [
+        msg.from === "assistant" && assistantAvatarSlot ? /* @__PURE__ */ jsx(MessageAvatar, { children: assistantAvatarSlot }) : null,
+        /* @__PURE__ */ jsx(MessageContent, { children: msg.text.replace(/^["']|["']$/g, "") })
+      ] }, idx)),
+      /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+    ] }) }),
+    inputMode !== "text" && isConnected && /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2 bg-background", children: mode === "listening" ? /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-2 bg-primary/5 rounded-full border border-primary/10", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-green-500 rounded-full animate-pulse" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: "Listening" })
+    ] }) : mode === "speaking" ? /* @__PURE__ */ jsxs(
+      "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",
+        children: [
+          /* @__PURE__ */ jsx(Mic, { className: "w-4 h-4 text-primary" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: "Talk to interrupt" })
+        ]
+      }
+    ) : null }),
+    /* @__PURE__ */ jsx("div", { className: "flex-none p-4 bg-background border-t border-border", children: showTextInput ? /* @__PURE__ */ jsxs("div", { className: "relative border-2 border-foreground rounded-2xl p-4 bg-background shadow-sm transition-all focus-within:shadow-md", children: [
+      /* @__PURE__ */ jsx(
+        "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();
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 right-4 flex items-center gap-3", children: [
+        onEndSession && /* @__PURE__ */ jsx(
+          "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",
+            children: /* @__PURE__ */ jsx(PhoneOff, { className: "w-5 h-5 text-foreground group-hover:text-destructive transition-colors" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "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",
+            children: /* @__PURE__ */ jsx(Send, { className: "w-5 h-5 ml-0.5" })
+          }
+        )
+      ] })
+    ] }) : onEndSession ? /* @__PURE__ */ jsxs(
+      "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",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "w-2 h-2 bg-destructive rounded-full" }),
+          "End Session"
+        ]
+      }
+    ) : null }),
+    footer
+  ] });
+}
+export {
+  AgentWidget
+};
+//# sourceMappingURL=agent-widget.js.map

package/dist/components/agent-widget.js.map

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

package/dist/components/avatar.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Avatar as Avatar$1 } from 'radix-ui';
+
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof Avatar$1.Root> & {
+    size?: "default" | "sm" | "lg";
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof Avatar$1.Image>): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof Avatar$1.Fallback>): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };