@cimplify/sdk 0.103.0 → 0.104.1

package/dist/utils.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var chunkL5GKVQVJ_js = require('./chunk-L5GKVQVJ.js');
-var chunkNNG6IFFX_js = require('./chunk-NNG6IFFX.js');
-require('./chunk-JG5CQNCB.js');
+var chunkXAUSDMMZ_js = require('./chunk-XAUSDMMZ.js');
+require('./chunk-SFUJMS5E.js');
 require('./chunk-OWW5GUSB.js');
 
 
@@ -21,117 +21,121 @@ Object.defineProperty(exports, "resolvePhoneCountryCode", {
 });
 Object.defineProperty(exports, "CURRENCY_SYMBOLS", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.CURRENCY_SYMBOLS; }
+  get: function () { return chunkXAUSDMMZ_js.CURRENCY_SYMBOLS; }
 });
 Object.defineProperty(exports, "MOBILE_MONEY_PROVIDERS", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.MOBILE_MONEY_PROVIDERS; }
+  get: function () { return chunkXAUSDMMZ_js.MOBILE_MONEY_PROVIDERS; }
 });
 Object.defineProperty(exports, "canonicalMobileMoneyProvider", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.canonicalMobileMoneyProvider; }
+  get: function () { return chunkXAUSDMMZ_js.canonicalMobileMoneyProvider; }
 });
 Object.defineProperty(exports, "categorizePaymentError", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.categorizePaymentError; }
+  get: function () { return chunkXAUSDMMZ_js.categorizePaymentError; }
 });
 Object.defineProperty(exports, "detectMobileMoneyProvider", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.detectMobileMoneyProvider; }
+  get: function () { return chunkXAUSDMMZ_js.detectMobileMoneyProvider; }
 });
 Object.defineProperty(exports, "formatMoney", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.formatMoney; }
+  get: function () { return chunkXAUSDMMZ_js.formatMoney; }
 });
 Object.defineProperty(exports, "formatNumberCompact", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.formatNumberCompact; }
+  get: function () { return chunkXAUSDMMZ_js.formatNumberCompact; }
 });
 Object.defineProperty(exports, "formatPrice", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.formatPrice; }
+  get: function () { return chunkXAUSDMMZ_js.formatPrice; }
 });
 Object.defineProperty(exports, "formatPriceAdjustment", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.formatPriceAdjustment; }
+  get: function () { return chunkXAUSDMMZ_js.formatPriceAdjustment; }
 });
 Object.defineProperty(exports, "formatPriceCompact", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.formatPriceCompact; }
+  get: function () { return chunkXAUSDMMZ_js.formatPriceCompact; }
 });
 Object.defineProperty(exports, "formatPriceWithTax", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.formatPriceWithTax; }
+  get: function () { return chunkXAUSDMMZ_js.formatPriceWithTax; }
 });
 Object.defineProperty(exports, "formatProductPrice", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.formatProductPrice; }
+  get: function () { return chunkXAUSDMMZ_js.formatProductPrice; }
 });
 Object.defineProperty(exports, "getBasePrice", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.getBasePrice; }
+  get: function () { return chunkXAUSDMMZ_js.getBasePrice; }
 });
 Object.defineProperty(exports, "getCurrencySymbol", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.getCurrencySymbol; }
+  get: function () { return chunkXAUSDMMZ_js.getCurrencySymbol; }
 });
 Object.defineProperty(exports, "getDiscountPercentage", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.getDiscountPercentage; }
+  get: function () { return chunkXAUSDMMZ_js.getDiscountPercentage; }
 });
 Object.defineProperty(exports, "getDisplayPrice", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.getDisplayPrice; }
+  get: function () { return chunkXAUSDMMZ_js.getDisplayPrice; }
 });
 Object.defineProperty(exports, "getMarkupPercentage", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.getMarkupPercentage; }
+  get: function () { return chunkXAUSDMMZ_js.getMarkupPercentage; }
 });
 Object.defineProperty(exports, "getProductCurrency", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.getProductCurrency; }
+  get: function () { return chunkXAUSDMMZ_js.getProductCurrency; }
 });
 Object.defineProperty(exports, "getTaxAmount", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.getTaxAmount; }
+  get: function () { return chunkXAUSDMMZ_js.getTaxAmount; }
 });
 Object.defineProperty(exports, "hasTaxInfo", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.hasTaxInfo; }
+  get: function () { return chunkXAUSDMMZ_js.hasTaxInfo; }
 });
 Object.defineProperty(exports, "isOnSale", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.isOnSale; }
+  get: function () { return chunkXAUSDMMZ_js.isOnSale; }
 });
 Object.defineProperty(exports, "isPaymentStatusFailure", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.isPaymentStatusFailure; }
+  get: function () { return chunkXAUSDMMZ_js.isPaymentStatusFailure; }
 });
 Object.defineProperty(exports, "isPaymentStatusRequiresAction", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.isPaymentStatusRequiresAction; }
+  get: function () { return chunkXAUSDMMZ_js.isPaymentStatusRequiresAction; }
 });
 Object.defineProperty(exports, "isPaymentStatusSuccess", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.isPaymentStatusSuccess; }
+  get: function () { return chunkXAUSDMMZ_js.isPaymentStatusSuccess; }
 });
 Object.defineProperty(exports, "isTaxInclusive", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.isTaxInclusive; }
+  get: function () { return chunkXAUSDMMZ_js.isTaxInclusive; }
 });
 Object.defineProperty(exports, "normalizePaymentResponse", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.normalizePaymentResponse; }
+  get: function () { return chunkXAUSDMMZ_js.normalizePaymentResponse; }
 });
 Object.defineProperty(exports, "normalizeStatusResponse", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.normalizeStatusResponse; }
+  get: function () { return chunkXAUSDMMZ_js.normalizeStatusResponse; }
 });
 Object.defineProperty(exports, "parsePrice", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.parsePrice; }
+  get: function () { return chunkXAUSDMMZ_js.parsePrice; }
 });
 Object.defineProperty(exports, "paymentAuthorizationUrl", {
   enumerable: true,
-  get: function () { return chunkNNG6IFFX_js.paymentAuthorizationUrl; }
+  get: function () { return chunkXAUSDMMZ_js.paymentAuthorizationUrl; }
+});
+Object.defineProperty(exports, "purchaseIntentMobileMoneyNetwork", {
+  enumerable: true,
+  get: function () { return chunkXAUSDMMZ_js.purchaseIntentMobileMoneyNetwork; }
 });

package/dist/utils.mjs

@@ -1,4 +1,4 @@
 export { isValidPhoneForContext, normalizePhoneToE164, resolvePhoneCountryCode } from './chunk-YOIVZ6OA.mjs';
-export { CURRENCY_SYMBOLS, MOBILE_MONEY_PROVIDERS, canonicalMobileMoneyProvider, categorizePaymentError, detectMobileMoneyProvider, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatPriceWithTax, formatProductPrice, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getProductCurrency, getTaxAmount, hasTaxInfo, isOnSale, isPaymentStatusFailure, isPaymentStatusRequiresAction, isPaymentStatusSuccess, isTaxInclusive, normalizePaymentResponse, normalizeStatusResponse, parsePrice, paymentAuthorizationUrl } from './chunk-M4URVKHE.mjs';
-import './chunk-VNPEYLB2.mjs';
+export { CURRENCY_SYMBOLS, MOBILE_MONEY_PROVIDERS, canonicalMobileMoneyProvider, categorizePaymentError, detectMobileMoneyProvider, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatPriceWithTax, formatProductPrice, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getProductCurrency, getTaxAmount, hasTaxInfo, isOnSale, isPaymentStatusFailure, isPaymentStatusRequiresAction, isPaymentStatusSuccess, isTaxInclusive, normalizePaymentResponse, normalizeStatusResponse, parsePrice, paymentAuthorizationUrl, purchaseIntentMobileMoneyNetwork } from './chunk-U54CWUUT.mjs';
+import './chunk-RBNBSQI7.mjs';
 import './chunk-3G6RQLXK.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.103.0",
+  "version": "0.104.1",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",
@@ -148,34 +148,34 @@
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20260616.1",
-    "@hono/node-server": "^2.0.5",
-    "@opennextjs/aws": "^4.0.3",
-    "@opennextjs/cloudflare": "^1.19.11",
+    "@hono/node-server": "^2.1.1",
+    "@opennextjs/aws": "^4.1.0",
+    "@opennextjs/cloudflare": "^1.20.2",
     "@paystack/inline-js": "^2.23.0",
     "@stripe/stripe-js": "^9.12.0",
-    "@tailwindcss/cli": "4.3.1",
+    "@tailwindcss/cli": "4.3.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^25.9.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@typescript/native-preview": "^7.0.0-dev.20260616.1",
-    "hono": "^4.12.25",
+    "hono": "^4.13.2",
     "jsdom": "^29.1.1",
     "msw": "^2.14.6",
     "openapi-typescript": "^7.13.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "tailwindcss": "4.3.1",
+    "tailwindcss": "4.3.3",
     "tsup": "^8.5.1",
     "typescript": "6.0.3",
-    "vitest": "^4.1.9"
+    "vitest": "^4.1.10"
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
-    "dompurify": "3.4.10",
+    "dompurify": "3.4.13",
     "jose": "^6.2.3",
     "libphonenumber-js": "1.13.6",
     "marked": "18.0.5",

package/registry/chat-widget.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "chat-widget.tsx",
-      "content": "\"use client\";\n\nimport React, {\n  useState,\n  useRef,\n  useCallback,\n  type KeyboardEvent,\n} from \"react\";\nimport type { CimplifyClient } from \"../client\";\nimport { CimplifyError } from \"@cimplify/sdk\";\nimport type { ChatMessage, ChatUploadAttachment, ChatWidgetStarter } from \"../types/support\";\nimport { isOptimistic } from \"./chat-model\";\nimport {\n  ChatKitProgram,\n  ChatReplyCards,\n  MessageBubble,\n  Seam,\n  chatTimeline,\n  dayLabel,\n  deliveryState,\n  groupPosition,\n  proseOf,\n  sameDay,\n  type GenUIActionEvent,\n} from \"./chat-kit\";\nimport { useChat } from \"./hooks/use-chat\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst MAX_ATTACHMENT_BYTES = 25 * 1024 * 1024;\n\n/** Mirrors the server allowlist: images plus inert document types. */\nconst DOCUMENT_MIME_TYPES = new Set([\n  \"application/pdf\",\n  \"text/plain\",\n  \"text/csv\",\n  \"application/msword\",\n  \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n  \"application/vnd.ms-excel\",\n  \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n]);\n\nconst ATTACHMENT_ACCEPT = [\"image/*\", ...DOCUMENT_MIME_TYPES].join(\",\");\n\nfunction isAllowedAttachment(file: File): boolean {\n  return file.type.startsWith(\"image/\") || DOCUMENT_MIME_TYPES.has(file.type);\n}\nconst KEEP_DISMISSED_KEY = \"cimplify_keep_chat_dismissed\";\n/** How close to the bottom still counts as reading the live edge. */\nconst AT_BOTTOM_SLACK_PX = 48;\n\n/* ─── Public API ──────────────────────────────────────────── */\n\nexport interface ChatWidgetClassNames {\n  root?: string;\n  bubble?: string;\n  panel?: string;\n  header?: string;\n  messages?: string;\n  input?: string;\n  welcome?: string;\n}\n\nexport interface ChatWidgetProps {\n  client?: CimplifyClient;\n  /** Business display name shown in the header */\n  businessName?: string;\n  /** Greeting text on the welcome screen */\n  greeting?: string;\n  /** Subtitle on the welcome screen */\n  subtitle?: string;\n  /** Conversation starters */\n  starters?: ChatWidgetStarter[];\n  /** Input placeholder */\n  placeholder?: string;\n  /** Position of the bubble */\n  position?: \"bottom-right\" | \"bottom-left\";\n  /** Start with the panel open */\n  defaultOpen?: boolean;\n  /** Poll interval in ms (default: 3000) */\n  pollInterval?: number;\n  /** Currency for structured product cards (e.g. \"GHS\"). */\n  currency?: string;\n  /**\n   * Receives taps on GenUI buttons and structured cards\n   * (`chat:view_product:{id}`, `chat:view_order:{id}`). Without it, cards\n   * render read-only and program buttons no-op.\n   */\n  onGenUIAction?: (event: GenUIActionEvent) => void;\n  className?: string;\n  classNames?: ChatWidgetClassNames;\n}\n\nexport function ChatWidget({\n  client: clientProp,\n  businessName: businessNameProp,\n  greeting = \"Hi there!\",\n  subtitle = \"Ask us anything — we typically reply in a few seconds.\",\n  starters,\n  placeholder = \"Type a message\\u2026\",\n  position = \"bottom-right\",\n  defaultOpen = false,\n  pollInterval,\n  currency: currencyProp,\n  onGenUIAction,\n  className,\n  classNames,\n}: ChatWidgetProps) {\n  const context = useOptionalCimplifyClient();\n  const client = clientProp ?? context?.client;\n  // Provider-wrapped hosts get the real identity with zero config.\n  const businessName = businessNameProp ?? context?.business?.name ?? \"Support\";\n  const currency = currencyProp ?? context?.baseCurrency;\n\n  const [open, setOpen] = useState(defaultOpen);\n  const [readAt, setReadAt] = useState<string | null>(null);\n  const [attachError, setAttachError] = useState<CimplifyError | null>(null);\n  const [replyTo, setReplyTo] = useState<ChatMessage | null>(null);\n\n  const {\n    messages,\n    isLoading,\n    isSending,\n    awaitingReply,\n    seenAt,\n    error,\n    isActive,\n    humanRequested,\n    claimedAs,\n    signOut,\n    send,\n    react,\n    requestHuman,\n    startConversation,\n    loadOlder,\n    mayHaveOlder,\n    openIfExisting,\n  } = useChat({ client, starters, pollInterval });\n  const showTyping = isSending || awaitingReply;\n\n  const attachFile = useCallback(\n    async (file: File) => {\n      if (!client) return;\n      setAttachError(null);\n      if (!isAllowedAttachment(file)) {\n        setAttachError(\n          new CimplifyError(\"invalid_attachment\", \"Only photos and documents can be attached.\"),\n        );\n        return;\n      }\n      if (file.size > MAX_ATTACHMENT_BYTES) {\n        setAttachError(new CimplifyError(\"attachment_too_large\", \"Files must be under 25MB.\"));\n        return;\n      }\n      const uploaded = await client.uploads.upload(file);\n      if (!uploaded.ok) {\n        setAttachError(uploaded.error);\n        return;\n      }\n      const attachment: ChatUploadAttachment = {\n        upload_id: uploaded.value.id,\n        url: uploaded.value.url,\n        mime_type: uploaded.value.content_type,\n        filename: uploaded.value.filename,\n        size: uploaded.value.size_bytes,\n      };\n      await send(\"\", { attachments: [attachment] });\n    },\n    [client, send],\n  );\n\n  const handleSend = useCallback(\n    (content: string) => {\n      setAttachError(null);\n      const target = replyTo;\n      setReplyTo(null);\n      return send(content, target ? { replyTo: target } : undefined);\n    },\n    [send, replyTo],\n  );\n\n  // Unread badge: incoming messages newer than the watermark snapshotted\n  // when the panel last closed.\n  const unread = open\n    ? 0\n    : messages.filter(\n        (m) => m.sender_type !== \"customer\" && (!readAt || m.created_at > readAt),\n      ).length;\n\n  useState(() => {\n    if (defaultOpen) void openIfExisting();\n  });\n\n  const handleOpen = useCallback(() => {\n    setOpen(true);\n    void openIfExisting();\n  }, [openIfExisting]);\n\n  const handleClose = useCallback(() => {\n    const newest = messages[messages.length - 1];\n    setReadAt(newest?.created_at ?? null);\n    setOpen(false);\n  }, [messages]);\n\n  const isLeft = position === \"bottom-left\";\n\n  return (\n    <div\n      className={cn(\n        \"fixed bottom-6 z-[9999]\",\n        isLeft ? \"left-6\" : \"right-6\",\n        className,\n        classNames?.root,\n      )}\n    >\n      {/* Bubble */}\n      {!open && (\n        <Bubble\n          unread={unread}\n          onClick={handleOpen}\n          className={classNames?.bubble}\n        />\n      )}\n\n      {/* Panel */}\n      {open && (\n        <Panel\n          client={client}\n          businessName={businessName}\n          greeting={greeting}\n          subtitle={subtitle}\n          starters={starters}\n          placeholder={placeholder}\n          messages={messages}\n          isLoading={isLoading}\n          isSending={isSending}\n          isTyping={showTyping}\n          seenAt={seenAt}\n          readAt={readAt}\n          error={error ?? attachError}\n          isActive={isActive}\n          isLeft={isLeft}\n          humanRequested={humanRequested}\n          mayHaveOlder={mayHaveOlder}\n          replyTo={replyTo}\n          claimedAs={claimedAs}\n          onSignOut={() => void signOut()}\n          onClose={handleClose}\n          onSend={handleSend}\n          onReact={react}\n          onReply={setReplyTo}\n          onCancelReply={() => setReplyTo(null)}\n          onRequestHuman={() => void requestHuman()}\n          onLoadOlder={() => void loadOlder()}\n          onAttach={attachFile}\n          onStartConversation={startConversation}\n          currency={currency}\n          onGenUIAction={onGenUIAction}\n          classNames={classNames}\n        />\n      )}\n    </div>\n  );\n}\n\n/* ─── Bubble ──────────────────────────────────────────────── */\n\nfunction Bubble({\n  unread,\n  onClick,\n  className,\n}: {\n  unread: number;\n  onClick: () => void;\n  className?: string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label=\"Open chat\"\n      className={cn(\n        \"relative flex h-14 w-14 items-center justify-center rounded-full\",\n        \"bg-foreground text-background shadow-lg\",\n        \"transition-transform duration-300 ease-out\",\n        \"hover:scale-[1.08] active:scale-95\",\n        className,\n      )}\n    >\n      <ChatIcon className=\"h-6 w-6\" />\n      {unread > 0 && (\n        <span\n          className={cn(\n            \"absolute -right-0.5 -top-0.5 flex h-5 w-5 items-center justify-center\",\n            \"rounded-full bg-destructive text-[10px] font-bold text-white\",\n            \"ring-2 ring-background\",\n          )}\n        >\n          {unread > 9 ? \"9+\" : unread}\n        </span>\n      )}\n    </button>\n  );\n}\n\n/* ─── Panel ───────────────────────────────────────────────── */\n\nfunction Panel({\n  client,\n  businessName,\n  greeting,\n  subtitle,\n  starters,\n  placeholder,\n  messages,\n  isLoading,\n  isSending,\n  isTyping,\n  seenAt,\n  readAt,\n  error,\n  isActive,\n  isLeft,\n  humanRequested,\n  mayHaveOlder,\n  replyTo,\n  claimedAs,\n  onSignOut,\n  onClose,\n  onSend,\n  onReact,\n  onReply,\n  onCancelReply,\n  onRequestHuman,\n  onLoadOlder,\n  onAttach,\n  onStartConversation,\n  currency,\n  onGenUIAction,\n  classNames,\n}: {\n  client: CimplifyClient | undefined;\n  businessName: string;\n  greeting: string;\n  subtitle: string;\n  starters?: ChatWidgetStarter[];\n  placeholder: string;\n  messages: ChatMessage[];\n  isLoading: boolean;\n  isSending: boolean;\n  isTyping: boolean;\n  seenAt: string | null;\n  readAt: string | null;\n  error: CimplifyError | null;\n  isActive: boolean;\n  isLeft: boolean;\n  humanRequested: boolean;\n  mayHaveOlder: boolean;\n  replyTo: ChatMessage | null;\n  claimedAs: string | null;\n  onSignOut: () => void;\n  onClose: () => void;\n  onSend: (content: string) => Promise<boolean>;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  onReply: (message: ChatMessage) => void;\n  onCancelReply: () => void;\n  onRequestHuman: () => void;\n  onLoadOlder: () => void;\n  onAttach: (file: File) => Promise<void>;\n  onStartConversation: (text?: string) => Promise<void>;\n  currency?: string;\n  onGenUIAction?: (event: GenUIActionEvent) => void;\n  classNames?: ChatWidgetClassNames;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col overflow-hidden rounded-2xl bg-background shadow-2xl\",\n        \"w-[400px] max-w-[calc(100vw-3rem)]\",\n        \"h-[min(600px,calc(100vh-6rem))]\",\n        \"animate-in fade-in slide-in-from-bottom-4 duration-300\",\n        isLeft ? \"origin-bottom-left\" : \"origin-bottom-right\",\n        classNames?.panel,\n      )}\n    >\n      {/* Header */}\n      <Header\n        businessName={businessName}\n        claimedAs={claimedAs}\n        onSignOut={onSignOut}\n        onClose={onClose}\n        className={classNames?.header}\n      />\n\n      {/* Body */}\n      {!isActive && !isLoading ? (\n        <Welcome\n          greeting={greeting}\n          subtitle={subtitle}\n          starters={starters}\n          onStarter={onStartConversation}\n          className={classNames?.welcome}\n        />\n      ) : (\n        <MessageList\n          messages={messages}\n          businessName={businessName}\n          isLoading={isLoading}\n          isSending={isTyping}\n          seenAt={seenAt}\n          readAt={readAt}\n          humanRequested={humanRequested}\n          mayHaveOlder={mayHaveOlder}\n          onReact={onReact}\n          onReply={onReply}\n          onRequestHuman={onRequestHuman}\n          onLoadOlder={onLoadOlder}\n          currency={currency}\n          onGenUIAction={onGenUIAction}\n          className={classNames?.messages}\n        />\n      )}\n\n      {isActive && !claimedAs && client && <KeepConversation client={client} />}\n\n      {humanRequested && isActive && (\n        <div className=\"flex items-center gap-2 border-t border-border bg-muted/50 px-4 py-2 text-[11px] text-muted-foreground\">\n          <span className=\"h-1.5 w-1.5 flex-shrink-0 animate-pulse rounded-full bg-amber-500\" />\n          Waiting for {businessName} — usually replies in minutes\n        </div>\n      )}\n\n      {/* Error */}\n      {error != null && (\n        <div className=\"border-t border-destructive/20 bg-destructive/10 px-4 py-2 text-xs text-destructive\">\n          {error.userMessage || \"Something went wrong. Please try again.\"}\n        </div>\n      )}\n\n      {replyTo && (\n        <div className=\"flex items-start gap-2 border-t border-border bg-muted/50 px-4 py-2\">\n          <span className=\"w-[3px] shrink-0 self-stretch rounded-full bg-foreground/40\" />\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"text-[11px] font-semibold text-foreground\">\n              Replying to {replyTo.sender_type === \"customer\" ? \"yourself\" : businessName}\n            </div>\n            <div className=\"truncate text-[11px] text-muted-foreground\">\n              {proseOf(replyTo.content) || \"Photo\"}\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            aria-label=\"Cancel reply\"\n            onClick={onCancelReply}\n            className=\"flex-shrink-0 p-0.5 text-muted-foreground hover:text-foreground\"\n          >\n            <CloseIcon className=\"h-3.5 w-3.5\" />\n          </button>\n        </div>\n      )}\n\n      {/* Always present: gating on an active conversation left a visitor who\n          wants to type their own question with only the starter buttons. */}\n      <ChatInput\n        placeholder={placeholder}\n        isSending={isSending}\n        onSend={isActive ? onSend : async (text) => { await onStartConversation(text); return true; }}\n        onAttach={onAttach}\n        className={classNames?.input}\n      />\n\n\n      {/* Footer */}\n      <div className=\"flex-shrink-0 border-t border-border bg-background px-4 py-1.5 text-center text-[10px] text-muted-foreground\">\n        Powered by{\" \"}\n        <span className=\"font-semibold text-foreground\">Cimplify</span>\n      </div>\n    </div>\n  );\n}\n\n/* ─── Header ──────────────────────────────────────────────── */\n\nfunction Header({\n  businessName,\n  claimedAs,\n  onSignOut,\n  onClose,\n  className,\n}: {\n  businessName: string;\n  claimedAs: string | null;\n  onSignOut: () => void;\n  onClose: () => void;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-shrink-0 items-center gap-3 bg-foreground px-5 py-4 text-background\",\n        className,\n      )}\n    >\n      <div className=\"flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-[10px] bg-background/15\">\n        <ChatIcon className=\"h-5 w-5\" />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"truncate text-[15px] font-semibold leading-tight\">\n          {businessName}\n        </div>\n        {claimedAs ? (\n          <div className=\"flex items-center gap-1 truncate text-xs text-background/60\">\n            <span className=\"truncate\">Chatting as {claimedAs}</span>\n            <span aria-hidden=\"true\">·</span>\n            <button\n              type=\"button\"\n              onClick={onSignOut}\n              className=\"flex-shrink-0 underline underline-offset-2 hover:text-background\"\n            >\n              Not you?\n            </button>\n          </div>\n        ) : (\n          <div className=\"flex items-center gap-1.5 text-xs text-background/60\">\n            <span className=\"h-[7px] w-[7px] flex-shrink-0 rounded-full bg-emerald-400\" />\n            Online\n          </div>\n        )}\n      </div>\n      <button\n        type=\"button\"\n        onClick={onClose}\n        aria-label=\"Close chat\"\n        className={cn(\n          \"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg\",\n          \"bg-background/10 text-background/70 transition-colors hover:bg-background/20 hover:text-background\",\n        )}\n      >\n        <CloseIcon className=\"h-[18px] w-[18px]\" />\n      </button>\n    </div>\n  );\n}\n\n/* ─── Welcome ─────────────────────────────────────────────── */\n\nfunction Welcome({\n  greeting,\n  subtitle,\n  starters,\n  onStarter,\n  className,\n}: {\n  greeting: string;\n  subtitle: string;\n  starters?: ChatWidgetStarter[];\n  onStarter: (text?: string) => Promise<void>;\n  className?: string;\n}) {\n  const defaultStarters: ChatWidgetStarter[] = [\n    { icon: \"\\ud83d\\udd0d\", text: \"Help me find a product\" },\n    { icon: \"\\ud83d\\uded2\", text: \"Check my cart\" },\n    { icon: \"\\ud83d\\udce6\", text: \"Track my order\" },\n  ];\n\n  const items = starters ?? defaultStarters;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-1 flex-col items-center justify-center overflow-y-auto bg-muted/50 px-8 py-10 text-center\",\n        className,\n      )}\n    >\n      <div className=\"mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted\">\n        <ChatIcon className=\"h-7 w-7 text-muted-foreground\" />\n      </div>\n      <h3 className=\"mb-2 text-xl font-bold text-foreground\">{greeting}</h3>\n      <p className=\"mb-6 max-w-[280px] text-sm leading-relaxed text-muted-foreground\">\n        {subtitle}\n      </p>\n      <div className=\"flex w-full max-w-[300px] flex-col gap-2\">\n        {items.map((s) => (\n          <button\n            key={s.text}\n            type=\"button\"\n            onClick={() => onStarter(s.text)}\n            className={cn(\n              \"flex items-center gap-3 rounded-xl border border-border bg-background px-4 py-3\",\n              \"text-left text-[13px] font-medium text-foreground\",\n              \"transition-all hover:-translate-y-px hover:border-foreground hover:shadow-sm\",\n            )}\n          >\n            {s.icon && (\n              <span className=\"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-muted text-[15px]\">\n                {s.icon}\n              </span>\n            )}\n            <span>{s.text}</span>\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/* ─── Messages ────────────────────────────────────────────── */\n\nconst QUICK_REACTIONS = [\"👍\", \"❤️\"] as const;\n\nfunction LetterAvatar({ name }: { name: string }) {\n  return (\n    <span className=\"flex size-6 items-center justify-center rounded-full bg-foreground text-[10px] font-bold text-background\">\n      {name.charAt(0).toUpperCase()}\n    </span>\n  );\n}\n\nfunction MessageList({\n  messages,\n  businessName,\n  isLoading,\n  isSending,\n  seenAt,\n  readAt,\n  humanRequested,\n  mayHaveOlder,\n  onReact,\n  onReply,\n  onRequestHuman,\n  onLoadOlder,\n  currency,\n  onGenUIAction,\n  className,\n}: {\n  messages: ChatMessage[];\n  businessName: string;\n  isLoading: boolean;\n  isSending: boolean;\n  seenAt: string | null;\n  readAt: string | null;\n  humanRequested: boolean;\n  mayHaveOlder: boolean;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  onReply: (message: ChatMessage) => void;\n  onRequestHuman: () => void;\n  onLoadOlder: () => void;\n  currency?: string;\n  onGenUIAction?: (event: GenUIActionEvent) => void;\n  className?: string;\n}) {\n  const scrolledUpRef = useRef(false);\n  const timeline = chatTimeline(messages, { readAt, rendersPrograms: true });\n  const { bubbles, reactionsByTarget, firstUnreadId, unreadOnOpen, firstAgentMessageId } =\n    timeline;\n  const lastBubble = bubbles[bubbles.length - 1];\n  const offerHuman = !humanRequested && lastBubble?.sender_type === \"bot\" && !isSending;\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const node = event.currentTarget;\n    scrolledUpRef.current =\n      node.scrollHeight - node.scrollTop - node.clientHeight >= AT_BOTTOM_SLACK_PX;\n  };\n\n  return (\n    <div\n      onScroll={handleScroll}\n      style={{ background: \"var(--color-chat-canvas, var(--color-muted, #f3f5f3))\" }}\n      className={cn(\"flex flex-1 flex-col gap-0.5 overflow-y-auto px-3.5 py-3.5\", className)}\n    >\n      {isLoading && messages.length === 0 && (\n        <div className=\"flex flex-1 items-center justify-center\">\n          <TypingDots />\n        </div>\n      )}\n\n      {mayHaveOlder && (\n        <div className=\"flex justify-center pb-1\">\n          <button\n            type=\"button\"\n            onClick={onLoadOlder}\n            className=\"rounded-full border border-foreground/[0.06] bg-background px-3.5 py-[7px] text-xs font-semibold text-muted-foreground shadow-[0_1px_2px_rgba(15,23,42,0.04)]\"\n          >\n            Show earlier messages\n          </button>\n        </div>\n      )}\n\n      {bubbles.map((msg, i) => {\n        const prev = bubbles[i - 1];\n        const newDay = !prev || !sameDay(prev.created_at, msg.created_at);\n        const group = groupPosition(timeline, i);\n        const startsRun = group === \"single\" || group === \"first\";\n        const delivery = deliveryState(msg, timeline, seenAt, isOptimistic);\n\n        return (\n          <div\n            key={msg.id}\n            className={cn(\"flex flex-col gap-1.5\", startsRun && i > 0 && \"mt-2.5\")}\n          >\n            {newDay && <Seam variant=\"chip\" label={dayLabel(msg.created_at)} />}\n            {msg.id === firstUnreadId && (\n              <Seam\n                variant=\"unread\"\n                label={`${unreadOnOpen} new message${unreadOnOpen === 1 ? \"\" : \"s\"}`}\n              />\n            )}\n            {msg.id === firstAgentMessageId && <Seam label=\"A person joined\" />}\n            {msg.sender_type === \"system\" ? (\n              <Seam label=\"Passing you to the team\" />\n            ) : (\n              <div className=\"group relative\">\n                {msg.sender_type !== \"customer\" && !isOptimistic(msg) && (\n                  <HoverRail message={msg} onReact={onReact} onReply={onReply} />\n                )}\n                <MessageBubble\n                  message={msg}\n                  reactions={reactionsByTarget.get(msg.id)}\n                  businessName={businessName}\n                  group={group}\n                  delivery={delivery}\n                  onReply={onReply}\n                  avatar={<LetterAvatar name={businessName} />}\n                  renderProgram={(source) => (\n                    <ChatKitProgram source={source} onAction={onGenUIAction} />\n                  )}\n                  renderCards={(target) => (\n                    <ChatReplyCards message={target} currency={currency} onAction={onGenUIAction} />\n                  )}\n                  onQuoteMiss={async () => {\n                    onLoadOlder();\n                    return true;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n        );\n      })}\n\n      {isSending && (\n        <div className=\"mr-auto mt-1\">\n          <TypingDots />\n        </div>\n      )}\n\n      {offerHuman && (\n        <div className=\"mt-2\">\n          <button\n            type=\"button\"\n            onClick={onRequestHuman}\n            className=\"rounded-full border border-border bg-background px-3 py-1.5 text-xs font-semibold text-foreground hover:border-foreground\"\n          >\n            Talk to a person\n          </button>\n        </div>\n      )}\n\n      <div\n        key={`${messages.length}:${isSending}`}\n        ref={(node) => {\n          // Keyed so the callback re-fires per new message/typing change —\n          // follows the conversation, but never yanks a reader out of history.\n          if (node && !scrolledUpRef.current) node.scrollIntoView({ behavior: \"smooth\" });\n        }}\n      />\n    </div>\n  );\n}\n\nfunction HoverRail({\n  message,\n  onReact,\n  onReply,\n}: {\n  message: ChatMessage;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  onReply: (message: ChatMessage) => void;\n}) {\n  return (\n    <div className=\"absolute -top-3 right-0 z-10 hidden gap-0.5 rounded-full border border-border bg-background px-1 py-0.5 shadow-sm group-hover:flex\">\n      {QUICK_REACTIONS.map((emoji) => (\n        <button\n          key={emoji}\n          type=\"button\"\n          aria-label={`React ${emoji}`}\n          onClick={() => void onReact(message, emoji)}\n          className=\"flex h-6 w-6 items-center justify-center rounded-full text-[13px] hover:bg-muted\"\n        >\n          {emoji}\n        </button>\n      ))}\n      <button\n        type=\"button\"\n        aria-label=\"Reply\"\n        onClick={() => onReply(message)}\n        className=\"flex h-6 w-6 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground\"\n      >\n        <ReplyIcon className=\"h-3.5 w-3.5\" />\n      </button>\n    </div>\n  );\n}\n\n/* ─── Keep this conversation ──────────────────────────────── */\n\nfunction readKeepDismissed(): boolean {\n  try {\n    return typeof window !== \"undefined\" && window.localStorage.getItem(KEEP_DISMISSED_KEY) === \"1\";\n  } catch {\n    return false;\n  }\n}\n\nfunction writeKeepDismissed(): void {\n  try {\n    window.localStorage.setItem(KEEP_DISMISSED_KEY, \"1\");\n  } catch {}\n}\n\nfunction KeepConversation({ client }: { client: CimplifyClient }) {\n  const [step, setStep] = useState<\"row\" | \"contact\" | \"code\">(\"row\");\n  const [dismissed, setDismissed] = useState(readKeepDismissed);\n  const [contact, setContact] = useState(\"\");\n  const [code, setCode] = useState(\"\");\n  const [busy, setBusy] = useState(false);\n  const [verifyError, setVerifyError] = useState<string | null>(null);\n\n  if (dismissed) return null;\n\n  const contactType = contact.includes(\"@\") ? \"email\" : \"phone\";\n\n  const requestCode = async () => {\n    const trimmed = contact.trim();\n    if (!trimmed || busy) return;\n    setBusy(true);\n    setVerifyError(null);\n    const result = await client.link.requestOtp({ contact: trimmed, contact_type: contactType });\n    setBusy(false);\n    if (result.ok) {\n      setCode(\"\");\n      setStep(\"code\");\n    } else {\n      setVerifyError(result.error.userMessage || \"Couldn't send a code — try again.\");\n    }\n  };\n\n  const verify = async (value: string) => {\n    if (value.length !== 6 || busy) return;\n    setBusy(true);\n    setVerifyError(null);\n    const result = await client.link.verifyOtp({\n      contact: contact.trim(),\n      contact_type: contactType,\n      otp_code: value,\n    });\n    setBusy(false);\n    if (!result.ok) {\n      setCode(\"\");\n      setVerifyError(result.error.userMessage || \"Invalid or expired code.\");\n    }\n  };\n\n  return (\n    <div className=\"flex-shrink-0 border-t border-border bg-muted/50 px-4 py-2.5\">\n      {step === \"row\" && (\n        <div className=\"flex items-center gap-2.5\">\n          <button\n            type=\"button\"\n            onClick={() => setStep(\"contact\")}\n            className=\"flex min-w-0 flex-1 flex-col text-left\"\n          >\n            <span className=\"text-xs font-semibold text-foreground\">Keep this conversation</span>\n            <span className=\"truncate text-[11px] text-muted-foreground\">\n              Verify your number and it follows you — any device\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            aria-label=\"Dismiss\"\n            onClick={() => {\n              writeKeepDismissed();\n              setDismissed(true);\n            }}\n            className=\"flex-shrink-0 p-1 text-muted-foreground hover:text-foreground\"\n          >\n            <CloseIcon className=\"h-3.5 w-3.5\" />\n          </button>\n        </div>\n      )}\n\n      {step === \"contact\" && (\n        <div className=\"flex items-center gap-2\">\n          <input\n            type=\"text\"\n            inputMode=\"email\"\n            value={contact}\n            onChange={(e) => setContact(e.target.value)}\n            onKeyDown={(e) => e.key === \"Enter\" && void requestCode()}\n            placeholder=\"Phone or email\"\n            autoFocus\n            className=\"h-9 min-w-0 flex-1 rounded-lg border border-border bg-background px-3 text-xs text-foreground outline-none placeholder:text-muted-foreground focus:border-foreground\"\n          />\n          <button\n            type=\"button\"\n            onClick={() => void requestCode()}\n            disabled={!contact.trim() || busy}\n            className=\"h-9 flex-shrink-0 rounded-lg bg-foreground px-3 text-xs font-semibold text-background disabled:opacity-50\"\n          >\n            {busy ? \"Sending…\" : \"Send code\"}\n          </button>\n        </div>\n      )}\n\n      {step === \"code\" && (\n        <div className=\"flex items-center gap-2\">\n          <input\n            type=\"text\"\n            inputMode=\"numeric\"\n            autoComplete=\"one-time-code\"\n            maxLength={6}\n            value={code}\n            onChange={(e) => {\n              const digits = e.target.value.replace(/\\D/g, \"\").slice(0, 6);\n              setCode(digits);\n              if (digits.length === 6) void verify(digits);\n            }}\n            placeholder=\"6-digit code\"\n            autoFocus\n            className=\"h-9 min-w-0 flex-1 rounded-lg border border-border bg-background px-3 text-xs tracking-[0.2em] text-foreground outline-none placeholder:tracking-normal placeholder:text-muted-foreground focus:border-foreground\"\n          />\n          <button\n            type=\"button\"\n            onClick={() => void requestCode()}\n            disabled={busy}\n            className=\"h-9 flex-shrink-0 rounded-lg px-2 text-[11px] font-medium text-muted-foreground hover:text-foreground disabled:opacity-50\"\n          >\n            Resend\n          </button>\n        </div>\n      )}\n\n      {verifyError && <p className=\"mt-1.5 text-[11px] text-destructive\">{verifyError}</p>}\n    </div>\n  );\n}\n\n/* ─── Input ───────────────────────────────────────────────── */\n\nfunction ChatInput({\n  placeholder,\n  isSending,\n  onSend,\n  onAttach,\n  className,\n}: {\n  placeholder: string;\n  isSending: boolean;\n  onSend: (content: string) => Promise<boolean>;\n  onAttach: (file: File) => Promise<void>;\n  className?: string;\n}) {\n  const [value, setValue] = useState(\"\");\n  const [uploading, setUploading] = useState(false);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const fileRef = useRef<HTMLInputElement>(null);\n\n  const handleAttach = useCallback(\n    async (file: File) => {\n      setUploading(true);\n      try {\n        await onAttach(file);\n      } finally {\n        setUploading(false);\n      }\n    },\n    [onAttach],\n  );\n\n  const handleSend = useCallback(async () => {\n    const trimmed = value.trim();\n    if (!trimmed || isSending) return;\n    setValue(\"\");\n    if (textareaRef.current) {\n      textareaRef.current.style.height = \"auto\";\n    }\n    const sent = await onSend(trimmed);\n    // A failed send must not eat the message — put it back to retry.\n    if (!sent) setValue((current) => current || trimmed);\n  }, [value, isSending, onSend]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSend();\n      }\n    },\n    [handleSend],\n  );\n\n  const handleInput = useCallback(() => {\n    const el = textareaRef.current;\n    if (!el) return;\n    el.style.height = \"auto\";\n    el.style.height = `${Math.min(el.scrollHeight, 100)}px`;\n  }, []);\n\n  const hasContent = value.trim().length > 0;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-shrink-0 items-end gap-2 border-t border-border bg-background px-4 py-3\",\n        className,\n      )}\n    >\n      <input\n        ref={fileRef}\n        type=\"file\"\n        accept={ATTACHMENT_ACCEPT}\n        className=\"hidden\"\n        aria-hidden=\"true\"\n        tabIndex={-1}\n        onChange={(e) => {\n          const file = e.target.files?.[0];\n          e.target.value = \"\";\n          if (file) void handleAttach(file);\n        }}\n      />\n      <button\n        type=\"button\"\n        aria-label=\"Attach a photo\"\n        disabled={uploading}\n        onClick={() => fileRef.current?.click()}\n        className={cn(\n          \"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[10px]\",\n          \"bg-muted text-muted-foreground transition-colors hover:text-foreground\",\n          uploading && \"animate-pulse\",\n        )}\n      >\n        <ImageIcon className=\"h-[18px] w-[18px]\" />\n      </button>\n      <div\n        className={cn(\n          \"flex flex-1 items-end rounded-xl border-[1.5px] border-transparent bg-muted px-1\",\n          \"transition-colors focus-within:border-foreground focus-within:bg-background\",\n        )}\n      >\n        <textarea\n          ref={textareaRef}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          onInput={handleInput}\n          placeholder={placeholder}\n          rows={1}\n          className={cn(\n            \"max-h-[100px] min-h-[20px] flex-1 resize-none bg-transparent px-2.5 py-2\",\n            \"text-sm text-foreground outline-none placeholder:text-muted-foreground\",\n          )}\n        />\n      </div>\n\n      <button\n        type=\"button\"\n        onClick={handleSend}\n        disabled={!hasContent || isSending}\n        aria-label=\"Send message\"\n        className={cn(\n          \"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[10px]\",\n          \"transition-all duration-200\",\n          hasContent && !isSending\n            ? \"bg-foreground text-background hover:scale-105 active:scale-95\"\n            : \"bg-muted text-muted-foreground\",\n        )}\n      >\n        <SendIcon className=\"h-[18px] w-[18px]\" />\n      </button>\n    </div>\n  );\n}\n\n/* ─── Typing dots ─────────────────────────────────────────── */\n\nfunction TypingDots() {\n  return (\n    <div className=\"flex items-center gap-1 px-4 py-3\">\n      {[0, 1, 2].map((i) => (\n        <span\n          key={i}\n          className=\"h-[7px] w-[7px] animate-bounce rounded-full bg-muted-foreground/40\"\n          style={{ animationDelay: `${i * 160}ms` }}\n        />\n      ))}\n    </div>\n  );\n}\n\n/* ─── Icons (inline SVG — no icon library) ────────────────── */\n\nfunction ChatIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z\" />\n    </svg>\n  );\n}\n\nfunction CloseIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M18 6L6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\nfunction SendIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\" />\n      <polygon points=\"22 2 15 22 11 13 2 9 22 2\" />\n    </svg>\n  );\n}\n\nfunction ImageIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n      <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" />\n      <polyline points=\"21 15 16 10 5 21\" />\n    </svg>\n  );\n}\n\nfunction ReplyIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"9 17 4 12 9 7\" />\n      <path d=\"M20 18v-2a4 4 0 0 0-4-4H4\" />\n    </svg>\n  );\n}\n\n"
+      "content": "\"use client\";\n\nimport React, {\n  useState,\n  useRef,\n  useCallback,\n  type KeyboardEvent,\n} from \"react\";\nimport type { CimplifyClient } from \"../client\";\nimport { CimplifyError } from \"@cimplify/sdk\";\nimport type { ChatMessage, ChatUploadAttachment, ChatWidgetStarter } from \"../types/support\";\nimport { isOptimistic } from \"./chat-model\";\nimport {\n  ChatKitProgram,\n  ChatReplyCards,\n  MessageBubble,\n  Seam,\n  chatTimeline,\n  dayLabel,\n  deliveryState,\n  groupPosition,\n  proseOf,\n  sameDay,\n  type GenUIActionEvent,\n} from \"./chat-kit\";\nimport { useChat } from \"./hooks/use-chat\";\nimport { useOptionalCimplifyClient } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst MAX_ATTACHMENT_BYTES = 25 * 1024 * 1024;\n\n/** Mirrors the server allowlist: images plus inert document types. */\nconst DOCUMENT_MIME_TYPES = new Set([\n  \"application/pdf\",\n  \"text/plain\",\n  \"text/csv\",\n  \"application/msword\",\n  \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n  \"application/vnd.ms-excel\",\n  \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n]);\n\nconst ATTACHMENT_ACCEPT = [\"image/*\", ...DOCUMENT_MIME_TYPES].join(\",\");\n\nfunction isAllowedAttachment(file: File): boolean {\n  return file.type.startsWith(\"image/\") || DOCUMENT_MIME_TYPES.has(file.type);\n}\nconst KEEP_DISMISSED_KEY = \"cimplify_keep_chat_dismissed\";\n/** How close to the bottom still counts as reading the live edge. */\nconst AT_BOTTOM_SLACK_PX = 48;\n\n/* ─── Public API ──────────────────────────────────────────── */\n\nexport interface ChatWidgetClassNames {\n  root?: string;\n  bubble?: string;\n  panel?: string;\n  header?: string;\n  messages?: string;\n  input?: string;\n  welcome?: string;\n}\n\nexport interface ChatWidgetProps {\n  client?: CimplifyClient;\n  /** Business display name shown in the header */\n  businessName?: string;\n  /** Greeting text on the welcome screen */\n  greeting?: string;\n  /** Subtitle on the welcome screen */\n  subtitle?: string;\n  /** Conversation starters */\n  starters?: ChatWidgetStarter[];\n  /** Input placeholder */\n  placeholder?: string;\n  /** Position of the bubble */\n  position?: \"bottom-right\" | \"bottom-left\";\n  /** Start with the panel open */\n  defaultOpen?: boolean;\n  /** Poll interval in ms (default: 3000) */\n  pollInterval?: number;\n  /** Currency for structured product cards (e.g. \"GHS\"). */\n  currency?: string;\n  /**\n   * Receives taps on GenUI buttons and structured cards\n   * (`chat:view_product:{id}`, `chat:view_order:{id}`). Without it, cards\n   * render read-only and program buttons no-op.\n   */\n  onGenUIAction?: (event: GenUIActionEvent) => void;\n  className?: string;\n  classNames?: ChatWidgetClassNames;\n}\n\nexport function ChatWidget({\n  client: clientProp,\n  businessName: businessNameProp,\n  greeting = \"Hi there!\",\n  subtitle = \"Ask us anything — we typically reply in a few seconds.\",\n  starters,\n  placeholder = \"Type a message\\u2026\",\n  position = \"bottom-right\",\n  defaultOpen = false,\n  pollInterval,\n  currency: currencyProp,\n  onGenUIAction,\n  className,\n  classNames,\n}: ChatWidgetProps) {\n  const context = useOptionalCimplifyClient();\n  const client = clientProp ?? context?.client;\n  // Provider-wrapped hosts get the real identity with zero config.\n  const businessName = businessNameProp ?? context?.business?.name ?? \"Support\";\n  const currency = currencyProp ?? context?.baseCurrency;\n\n  const [open, setOpen] = useState(defaultOpen);\n  const [readAt, setReadAt] = useState<string | null>(null);\n  const [attachError, setAttachError] = useState<CimplifyError | null>(null);\n  const [replyTo, setReplyTo] = useState<ChatMessage | null>(null);\n\n  const {\n    messages,\n    isLoading,\n    isSending,\n    awaitingReply,\n    seenAt,\n    error,\n    isActive,\n    humanRequested,\n    claimedAs,\n    signOut,\n    send,\n    react,\n    requestHuman,\n    startConversation,\n    loadOlder,\n    mayHaveOlder,\n    openIfExisting,\n  } = useChat({ client, starters, pollInterval });\n  const showTyping = isSending || awaitingReply;\n\n  const attachFile = useCallback(\n    async (file: File) => {\n      if (!client) return;\n      setAttachError(null);\n      if (!isAllowedAttachment(file)) {\n        setAttachError(\n          new CimplifyError(\"invalid_attachment\", \"Only photos and documents can be attached.\"),\n        );\n        return;\n      }\n      if (file.size > MAX_ATTACHMENT_BYTES) {\n        setAttachError(new CimplifyError(\"attachment_too_large\", \"Files must be under 25MB.\"));\n        return;\n      }\n      const uploaded = await client.uploads.upload(file);\n      if (!uploaded.ok) {\n        setAttachError(uploaded.error);\n        return;\n      }\n      const attachment: ChatUploadAttachment = {\n        upload_id: uploaded.value.id,\n        url: uploaded.value.url,\n        mime_type: uploaded.value.content_type,\n        filename: uploaded.value.filename,\n        size: uploaded.value.size_bytes,\n      };\n      await send(\"\", { attachments: [attachment] });\n    },\n    [client, send],\n  );\n\n  const handleSend = useCallback(\n    (content: string) => {\n      setAttachError(null);\n      const target = replyTo;\n      setReplyTo(null);\n      return send(content, target ? { replyTo: target } : undefined);\n    },\n    [send, replyTo],\n  );\n\n  // Unread badge: incoming messages newer than the watermark snapshotted\n  // when the panel last closed.\n  const unread = open\n    ? 0\n    : messages.filter(\n        (m) => m.sender_type !== \"customer\" && (!readAt || m.created_at > readAt),\n      ).length;\n\n  useState(() => {\n    if (defaultOpen) void openIfExisting();\n  });\n\n  const handleOpen = useCallback(() => {\n    setOpen(true);\n    void openIfExisting();\n  }, [openIfExisting]);\n\n  const handleClose = useCallback(() => {\n    const newest = messages[messages.length - 1];\n    setReadAt(newest?.created_at ?? null);\n    setOpen(false);\n  }, [messages]);\n\n  const isLeft = position === \"bottom-left\";\n\n  return (\n    <div\n      className={cn(\n        \"fixed bottom-6 z-[9999]\",\n        isLeft ? \"left-6\" : \"right-6\",\n        className,\n        classNames?.root,\n      )}\n    >\n      {/* Bubble */}\n      {!open && (\n        <Bubble\n          unread={unread}\n          onClick={handleOpen}\n          className={classNames?.bubble}\n        />\n      )}\n\n      {/* Panel */}\n      {open && (\n        <Panel\n          client={client}\n          businessName={businessName}\n          greeting={greeting}\n          subtitle={subtitle}\n          starters={starters}\n          placeholder={placeholder}\n          messages={messages}\n          isLoading={isLoading}\n          isSending={isSending}\n          isTyping={showTyping}\n          seenAt={seenAt}\n          readAt={readAt}\n          error={error ?? attachError}\n          isActive={isActive}\n          isLeft={isLeft}\n          humanRequested={humanRequested}\n          mayHaveOlder={mayHaveOlder}\n          replyTo={replyTo}\n          claimedAs={claimedAs}\n          onSignOut={() => void signOut()}\n          onClose={handleClose}\n          onSend={handleSend}\n          onReact={react}\n          onReply={setReplyTo}\n          onCancelReply={() => setReplyTo(null)}\n          onRequestHuman={() => void requestHuman()}\n          onLoadOlder={() => void loadOlder()}\n          onAttach={attachFile}\n          onStartConversation={startConversation}\n          currency={currency}\n          onGenUIAction={onGenUIAction}\n          classNames={classNames}\n        />\n      )}\n    </div>\n  );\n}\n\n/* ─── Bubble ──────────────────────────────────────────────── */\n\nfunction Bubble({\n  unread,\n  onClick,\n  className,\n}: {\n  unread: number;\n  onClick: () => void;\n  className?: string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label=\"Open chat\"\n      className={cn(\n        \"relative flex h-14 w-14 items-center justify-center rounded-full\",\n        \"bg-foreground text-background shadow-lg\",\n        \"transition-transform duration-300 ease-out\",\n        \"hover:scale-[1.08] active:scale-95\",\n        className,\n      )}\n    >\n      <ChatIcon className=\"h-6 w-6\" />\n      {unread > 0 && (\n        <span\n          className={cn(\n            \"absolute -right-0.5 -top-0.5 flex h-5 w-5 items-center justify-center\",\n            \"rounded-full bg-destructive text-[10px] font-bold text-white\",\n            \"ring-2 ring-background\",\n          )}\n        >\n          {unread > 9 ? \"9+\" : unread}\n        </span>\n      )}\n    </button>\n  );\n}\n\n/* ─── Panel ───────────────────────────────────────────────── */\n\nfunction Panel({\n  client,\n  businessName,\n  greeting,\n  subtitle,\n  starters,\n  placeholder,\n  messages,\n  isLoading,\n  isSending,\n  isTyping,\n  seenAt,\n  readAt,\n  error,\n  isActive,\n  isLeft,\n  humanRequested,\n  mayHaveOlder,\n  replyTo,\n  claimedAs,\n  onSignOut,\n  onClose,\n  onSend,\n  onReact,\n  onReply,\n  onCancelReply,\n  onRequestHuman,\n  onLoadOlder,\n  onAttach,\n  onStartConversation,\n  currency,\n  onGenUIAction,\n  classNames,\n}: {\n  client: CimplifyClient | undefined;\n  businessName: string;\n  greeting: string;\n  subtitle: string;\n  starters?: ChatWidgetStarter[];\n  placeholder: string;\n  messages: ChatMessage[];\n  isLoading: boolean;\n  isSending: boolean;\n  isTyping: boolean;\n  seenAt: string | null;\n  readAt: string | null;\n  error: CimplifyError | null;\n  isActive: boolean;\n  isLeft: boolean;\n  humanRequested: boolean;\n  mayHaveOlder: boolean;\n  replyTo: ChatMessage | null;\n  claimedAs: string | null;\n  onSignOut: () => void;\n  onClose: () => void;\n  onSend: (content: string) => Promise<boolean>;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  onReply: (message: ChatMessage) => void;\n  onCancelReply: () => void;\n  onRequestHuman: () => void;\n  onLoadOlder: () => void;\n  onAttach: (file: File) => Promise<void>;\n  onStartConversation: (text?: string) => Promise<void>;\n  currency?: string;\n  onGenUIAction?: (event: GenUIActionEvent) => void;\n  classNames?: ChatWidgetClassNames;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col overflow-hidden rounded-2xl bg-background shadow-2xl\",\n        \"w-[400px] max-w-[calc(100vw-3rem)]\",\n        \"h-[min(600px,calc(100vh-6rem))]\",\n        \"animate-in fade-in slide-in-from-bottom-4 duration-300\",\n        isLeft ? \"origin-bottom-left\" : \"origin-bottom-right\",\n        classNames?.panel,\n      )}\n    >\n      {/* Header */}\n      <Header\n        businessName={businessName}\n        claimedAs={claimedAs}\n        onSignOut={onSignOut}\n        onClose={onClose}\n        className={classNames?.header}\n      />\n\n      {/* Body */}\n      {!isActive && !isLoading ? (\n        <Welcome\n          greeting={greeting}\n          subtitle={subtitle}\n          starters={starters}\n          onStarter={onStartConversation}\n          className={classNames?.welcome}\n        />\n      ) : (\n        <MessageList\n          messages={messages}\n          businessName={businessName}\n          isLoading={isLoading}\n          isSending={isTyping}\n          seenAt={seenAt}\n          readAt={readAt}\n          humanRequested={humanRequested}\n          mayHaveOlder={mayHaveOlder}\n          onReact={onReact}\n          onReply={onReply}\n          onRequestHuman={onRequestHuman}\n          onLoadOlder={onLoadOlder}\n          currency={currency}\n          onGenUIAction={onGenUIAction}\n          className={classNames?.messages}\n        />\n      )}\n\n      {isActive && !claimedAs && client && <KeepConversation client={client} />}\n\n      {humanRequested && isActive && (\n        <div className=\"flex items-center gap-2 border-t border-border bg-muted/50 px-4 py-2 text-[11px] text-muted-foreground\">\n          <span className=\"h-1.5 w-1.5 flex-shrink-0 animate-pulse rounded-full bg-amber-500\" />\n          Waiting for {businessName} — usually replies in minutes\n        </div>\n      )}\n\n      {/* Error */}\n      {error != null && (\n        <div className=\"border-t border-destructive/20 bg-destructive/10 px-4 py-2 text-xs text-destructive\">\n          {error.userMessage || \"Something went wrong. Please try again.\"}\n        </div>\n      )}\n\n      {replyTo && (\n        <div className=\"flex items-start gap-2 border-t border-border bg-muted/50 px-4 py-2\">\n          <span className=\"w-[3px] shrink-0 self-stretch rounded-full bg-foreground/40\" />\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"text-[11px] font-semibold text-foreground\">\n              Replying to {replyTo.sender_type === \"customer\" ? \"yourself\" : businessName}\n            </div>\n            <div className=\"truncate text-[11px] text-muted-foreground\">\n              {proseOf(replyTo.content) || \"Photo\"}\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            aria-label=\"Cancel reply\"\n            onClick={onCancelReply}\n            className=\"flex-shrink-0 p-0.5 text-muted-foreground hover:text-foreground\"\n          >\n            <CloseIcon className=\"h-3.5 w-3.5\" />\n          </button>\n        </div>\n      )}\n\n      {/* Always present: gating on an active conversation left a visitor who\n          wants to type their own question with only the starter buttons. */}\n      <ChatInput\n        placeholder={placeholder}\n        isSending={isSending}\n        onSend={isActive ? onSend : async (text) => { await onStartConversation(text); return true; }}\n        onAttach={onAttach}\n        className={classNames?.input}\n      />\n\n\n      {/* Footer */}\n      <div className=\"flex-shrink-0 border-t border-border bg-background px-4 py-1.5 text-center text-[10px] text-muted-foreground\">\n        Powered by{\" \"}\n        <span className=\"font-semibold text-foreground\">Cimplify</span>\n      </div>\n    </div>\n  );\n}\n\n/* ─── Header ──────────────────────────────────────────────── */\n\nfunction Header({\n  businessName,\n  claimedAs,\n  onSignOut,\n  onClose,\n  className,\n}: {\n  businessName: string;\n  claimedAs: string | null;\n  onSignOut: () => void;\n  onClose: () => void;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-shrink-0 items-center gap-3 bg-foreground px-5 py-4 text-background\",\n        className,\n      )}\n    >\n      <div className=\"flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-[10px] bg-background/15\">\n        <ChatIcon className=\"h-5 w-5\" />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"truncate text-[15px] font-semibold leading-tight\">\n          {businessName}\n        </div>\n        {claimedAs ? (\n          <div className=\"flex items-center gap-1 truncate text-xs text-background/60\">\n            <span className=\"truncate\">Chatting as {claimedAs}</span>\n            <span aria-hidden=\"true\">·</span>\n            <button\n              type=\"button\"\n              onClick={onSignOut}\n              className=\"flex-shrink-0 underline underline-offset-2 hover:text-background\"\n            >\n              Not you?\n            </button>\n          </div>\n        ) : (\n          <div className=\"flex items-center gap-1.5 text-xs text-background/60\">\n            <span className=\"h-[7px] w-[7px] flex-shrink-0 rounded-full bg-emerald-400\" />\n            Online\n          </div>\n        )}\n      </div>\n      <button\n        type=\"button\"\n        onClick={onClose}\n        aria-label=\"Close chat\"\n        className={cn(\n          \"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg\",\n          \"bg-background/10 text-background/70 transition-colors hover:bg-background/20 hover:text-background\",\n        )}\n      >\n        <CloseIcon className=\"h-[18px] w-[18px]\" />\n      </button>\n    </div>\n  );\n}\n\n/* ─── Welcome ─────────────────────────────────────────────── */\n\nfunction Welcome({\n  greeting,\n  subtitle,\n  starters,\n  onStarter,\n  className,\n}: {\n  greeting: string;\n  subtitle: string;\n  starters?: ChatWidgetStarter[];\n  onStarter: (text?: string) => Promise<void>;\n  className?: string;\n}) {\n  const defaultStarters: ChatWidgetStarter[] = [\n    { icon: \"\\ud83d\\udd0d\", text: \"Help me find a product\" },\n    { icon: \"\\ud83d\\uded2\", text: \"Check my cart\" },\n    { icon: \"\\ud83d\\udce6\", text: \"Track my order\" },\n  ];\n\n  const items = starters ?? defaultStarters;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-1 flex-col items-center justify-center overflow-y-auto bg-muted/50 px-8 py-10 text-center\",\n        className,\n      )}\n    >\n      <div className=\"mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted\">\n        <ChatIcon className=\"h-7 w-7 text-muted-foreground\" />\n      </div>\n      <h3 className=\"mb-2 text-xl font-bold text-foreground\">{greeting}</h3>\n      <p className=\"mb-6 max-w-[280px] text-sm leading-relaxed text-muted-foreground\">\n        {subtitle}\n      </p>\n      <div className=\"flex w-full max-w-[300px] flex-col gap-2\">\n        {items.map((s) => (\n          <button\n            key={s.text}\n            type=\"button\"\n            onClick={() => onStarter(s.text)}\n            className={cn(\n              \"flex items-center gap-3 rounded-xl border border-border bg-background px-4 py-3\",\n              \"text-left text-[13px] font-medium text-foreground\",\n              \"transition-all hover:-translate-y-px hover:border-foreground hover:shadow-sm\",\n            )}\n          >\n            {s.icon && (\n              <span className=\"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-muted text-[15px]\">\n                {s.icon}\n              </span>\n            )}\n            <span>{s.text}</span>\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/* ─── Messages ────────────────────────────────────────────── */\n\nconst QUICK_REACTIONS = [\"👍\", \"❤️\"] as const;\n\nfunction LetterAvatar({ name }: { name: string }) {\n  return (\n    <span className=\"flex size-6 items-center justify-center rounded-full bg-foreground text-[10px] font-bold text-background\">\n      {name.charAt(0).toUpperCase()}\n    </span>\n  );\n}\n\nfunction MessageList({\n  messages,\n  businessName,\n  isLoading,\n  isSending,\n  seenAt,\n  readAt,\n  humanRequested,\n  mayHaveOlder,\n  onReact,\n  onReply,\n  onRequestHuman,\n  onLoadOlder,\n  currency,\n  onGenUIAction,\n  className,\n}: {\n  messages: ChatMessage[];\n  businessName: string;\n  isLoading: boolean;\n  isSending: boolean;\n  seenAt: string | null;\n  readAt: string | null;\n  humanRequested: boolean;\n  mayHaveOlder: boolean;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  onReply: (message: ChatMessage) => void;\n  onRequestHuman: () => void;\n  onLoadOlder: () => void;\n  currency?: string;\n  onGenUIAction?: (event: GenUIActionEvent) => void;\n  className?: string;\n}) {\n  const scrolledUpRef = useRef(false);\n  const timeline = chatTimeline(messages, { readAt, rendersPrograms: true });\n  const { bubbles, reactionsByTarget, firstUnreadId, unreadOnOpen, firstAgentMessageId } =\n    timeline;\n  const lastBubble = bubbles[bubbles.length - 1];\n  const offerHuman = !humanRequested && lastBubble?.sender_type === \"bot\" && !isSending;\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const node = event.currentTarget;\n    scrolledUpRef.current =\n      node.scrollHeight - node.scrollTop - node.clientHeight >= AT_BOTTOM_SLACK_PX;\n  };\n\n  return (\n    <div\n      onScroll={handleScroll}\n      style={{ background: \"var(--color-chat-canvas, var(--color-muted, #f3f5f3))\" }}\n      className={cn(\"flex flex-1 flex-col gap-0.5 overflow-y-auto px-3.5 py-3.5\", className)}\n    >\n      {isLoading && messages.length === 0 && (\n        <div className=\"flex flex-1 items-center justify-center\">\n          <TypingDots />\n        </div>\n      )}\n\n      {mayHaveOlder && (\n        <div className=\"flex justify-center pb-1\">\n          <button\n            type=\"button\"\n            onClick={onLoadOlder}\n            className=\"rounded-full border border-foreground/[0.06] bg-background px-3.5 py-[7px] text-xs font-semibold text-muted-foreground shadow-[0_1px_2px_rgba(15,23,42,0.04)]\"\n          >\n            Show earlier messages\n          </button>\n        </div>\n      )}\n\n      {bubbles.map((msg, i) => {\n        const prev = bubbles[i - 1];\n        const newDay = !prev || !sameDay(prev.created_at, msg.created_at);\n        const group = groupPosition(timeline, i);\n        const startsRun = group === \"single\" || group === \"first\";\n        const delivery = deliveryState(msg, timeline, seenAt, isOptimistic);\n\n        return (\n          <div\n            key={msg.id}\n            className={cn(\"flex flex-col gap-1.5\", startsRun && i > 0 && \"mt-2.5\")}\n          >\n            {newDay && <Seam variant=\"chip\" label={dayLabel(msg.created_at)} />}\n            {msg.id === firstUnreadId && (\n              <Seam\n                variant=\"unread\"\n                label={`${unreadOnOpen} new message${unreadOnOpen === 1 ? \"\" : \"s\"}`}\n              />\n            )}\n            {msg.id === firstAgentMessageId && <Seam label=\"A person joined\" />}\n            {msg.sender_type === \"system\" ? (\n              <Seam label=\"Passing you to the team\" />\n            ) : (\n              <div className=\"group relative\">\n                {msg.sender_type !== \"customer\" && !isOptimistic(msg) && (\n                  <HoverRail message={msg} onReact={onReact} onReply={onReply} />\n                )}\n                <MessageBubble\n                  message={msg}\n                  reactions={reactionsByTarget.get(msg.id)}\n                  businessName={businessName}\n                  group={group}\n                  delivery={delivery}\n                  onReply={onReply}\n                  avatar={<LetterAvatar name={businessName} />}\n                  renderProgram={(source) => (\n                    <ChatKitProgram source={source} onAction={onGenUIAction} />\n                  )}\n                  renderCards={(target) => (\n                    <ChatReplyCards message={target} currency={currency} onAction={onGenUIAction} />\n                  )}\n                  onQuoteMiss={async () => {\n                    onLoadOlder();\n                    return true;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n        );\n      })}\n\n      {isSending && (\n        <div className=\"mr-auto mt-1\">\n          <TypingDots />\n        </div>\n      )}\n\n      {offerHuman && (\n        <div className=\"mt-2\">\n          <button\n            type=\"button\"\n            onClick={onRequestHuman}\n            className=\"rounded-full border border-border bg-background px-3 py-1.5 text-xs font-semibold text-foreground hover:border-foreground\"\n          >\n            Talk to a person\n          </button>\n        </div>\n      )}\n\n      <div\n        key={`${messages.length}:${isSending}`}\n        ref={(node) => {\n          // Keyed so the callback re-fires per new message/typing change —\n          // follows the conversation, but never yanks a reader out of history.\n          if (node && !scrolledUpRef.current) node.scrollIntoView({ behavior: \"smooth\" });\n        }}\n      />\n    </div>\n  );\n}\n\nfunction HoverRail({\n  message,\n  onReact,\n  onReply,\n}: {\n  message: ChatMessage;\n  onReact: (message: ChatMessage, emoji: string) => Promise<boolean>;\n  onReply: (message: ChatMessage) => void;\n}) {\n  return (\n    <div className=\"absolute -top-3 right-0 z-10 hidden gap-0.5 rounded-full border border-border bg-background px-1 py-0.5 shadow-sm group-hover:flex\">\n      {QUICK_REACTIONS.map((emoji) => (\n        <button\n          key={emoji}\n          type=\"button\"\n          aria-label={`React ${emoji}`}\n          onClick={() => void onReact(message, emoji)}\n          className=\"flex h-6 w-6 items-center justify-center rounded-full text-[13px] hover:bg-muted\"\n        >\n          {emoji}\n        </button>\n      ))}\n      <button\n        type=\"button\"\n        aria-label=\"Reply\"\n        onClick={() => onReply(message)}\n        className=\"flex h-6 w-6 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground\"\n      >\n        <ReplyIcon className=\"h-3.5 w-3.5\" />\n      </button>\n    </div>\n  );\n}\n\n/* ─── Keep this conversation ──────────────────────────────── */\n\nfunction readKeepDismissed(): boolean {\n  try {\n    return typeof window !== \"undefined\" && window.localStorage.getItem(KEEP_DISMISSED_KEY) === \"1\";\n  } catch {\n    return false;\n  }\n}\n\nfunction writeKeepDismissed(): void {\n  try {\n    window.localStorage.setItem(KEEP_DISMISSED_KEY, \"1\");\n  } catch {}\n}\n\nfunction KeepConversation({ client }: { client: CimplifyClient }) {\n  const [step, setStep] = useState<\"row\" | \"contact\" | \"code\">(\"row\");\n  const [dismissed, setDismissed] = useState(readKeepDismissed);\n  const [contact, setContact] = useState(\"\");\n  const [code, setCode] = useState(\"\");\n  const [challengeId, setChallengeId] = useState<string | null | undefined>(null);\n  const [busy, setBusy] = useState(false);\n  const [verifyError, setVerifyError] = useState<string | null>(null);\n\n  if (dismissed) return null;\n\n  const contactType = contact.includes(\"@\") ? \"email\" : \"phone\";\n\n  const requestCode = async () => {\n    const trimmed = contact.trim();\n    if (!trimmed || busy) return;\n    setBusy(true);\n    setVerifyError(null);\n    const result = await client.link.requestOtp({ contact: trimmed, contact_type: contactType });\n    setBusy(false);\n    if (result.ok) {\n      setChallengeId(result.value.challenge_id);\n      setCode(\"\");\n      setStep(\"code\");\n    } else {\n      setVerifyError(result.error.userMessage || \"Couldn't send a code — try again.\");\n    }\n  };\n\n  const verify = async (value: string) => {\n    if (value.length !== 6 || busy || challengeId === null) return;\n    setBusy(true);\n    setVerifyError(null);\n    const result = await client.link.verifyOtp({\n      ...(challengeId === undefined ? {} : { challenge_id: challengeId }),\n      contact: contact.trim(),\n      contact_type: contactType,\n      otp_code: value,\n    });\n    setBusy(false);\n    if (!result.ok) {\n      setCode(\"\");\n      setVerifyError(result.error.userMessage || \"Invalid or expired code.\");\n    }\n  };\n\n  return (\n    <div className=\"flex-shrink-0 border-t border-border bg-muted/50 px-4 py-2.5\">\n      {step === \"row\" && (\n        <div className=\"flex items-center gap-2.5\">\n          <button\n            type=\"button\"\n            onClick={() => setStep(\"contact\")}\n            className=\"flex min-w-0 flex-1 flex-col text-left\"\n          >\n            <span className=\"text-xs font-semibold text-foreground\">Keep this conversation</span>\n            <span className=\"truncate text-[11px] text-muted-foreground\">\n              Verify your number and it follows you — any device\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            aria-label=\"Dismiss\"\n            onClick={() => {\n              writeKeepDismissed();\n              setDismissed(true);\n            }}\n            className=\"flex-shrink-0 p-1 text-muted-foreground hover:text-foreground\"\n          >\n            <CloseIcon className=\"h-3.5 w-3.5\" />\n          </button>\n        </div>\n      )}\n\n      {step === \"contact\" && (\n        <div className=\"flex items-center gap-2\">\n          <input\n            type=\"text\"\n            inputMode=\"email\"\n            value={contact}\n            onChange={(e) => setContact(e.target.value)}\n            onKeyDown={(e) => e.key === \"Enter\" && void requestCode()}\n            placeholder=\"Phone or email\"\n            autoFocus\n            className=\"h-9 min-w-0 flex-1 rounded-lg border border-border bg-background px-3 text-xs text-foreground outline-none placeholder:text-muted-foreground focus:border-foreground\"\n          />\n          <button\n            type=\"button\"\n            onClick={() => void requestCode()}\n            disabled={!contact.trim() || busy}\n            className=\"h-9 flex-shrink-0 rounded-lg bg-foreground px-3 text-xs font-semibold text-background disabled:opacity-50\"\n          >\n            {busy ? \"Sending…\" : \"Send code\"}\n          </button>\n        </div>\n      )}\n\n      {step === \"code\" && (\n        <div className=\"flex items-center gap-2\">\n          <input\n            type=\"text\"\n            inputMode=\"numeric\"\n            autoComplete=\"one-time-code\"\n            maxLength={6}\n            value={code}\n            onChange={(e) => {\n              const digits = e.target.value.replace(/\\D/g, \"\").slice(0, 6);\n              setCode(digits);\n              if (digits.length === 6) void verify(digits);\n            }}\n            placeholder=\"6-digit code\"\n            autoFocus\n            className=\"h-9 min-w-0 flex-1 rounded-lg border border-border bg-background px-3 text-xs tracking-[0.2em] text-foreground outline-none placeholder:tracking-normal placeholder:text-muted-foreground focus:border-foreground\"\n          />\n          <button\n            type=\"button\"\n            onClick={() => void requestCode()}\n            disabled={busy}\n            className=\"h-9 flex-shrink-0 rounded-lg px-2 text-[11px] font-medium text-muted-foreground hover:text-foreground disabled:opacity-50\"\n          >\n            Resend\n          </button>\n        </div>\n      )}\n\n      {verifyError && <p className=\"mt-1.5 text-[11px] text-destructive\">{verifyError}</p>}\n    </div>\n  );\n}\n\n/* ─── Input ───────────────────────────────────────────────── */\n\nfunction ChatInput({\n  placeholder,\n  isSending,\n  onSend,\n  onAttach,\n  className,\n}: {\n  placeholder: string;\n  isSending: boolean;\n  onSend: (content: string) => Promise<boolean>;\n  onAttach: (file: File) => Promise<void>;\n  className?: string;\n}) {\n  const [value, setValue] = useState(\"\");\n  const [uploading, setUploading] = useState(false);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const fileRef = useRef<HTMLInputElement>(null);\n\n  const handleAttach = useCallback(\n    async (file: File) => {\n      setUploading(true);\n      try {\n        await onAttach(file);\n      } finally {\n        setUploading(false);\n      }\n    },\n    [onAttach],\n  );\n\n  const handleSend = useCallback(async () => {\n    const trimmed = value.trim();\n    if (!trimmed || isSending) return;\n    setValue(\"\");\n    if (textareaRef.current) {\n      textareaRef.current.style.height = \"auto\";\n    }\n    const sent = await onSend(trimmed);\n    // A failed send must not eat the message — put it back to retry.\n    if (!sent) setValue((current) => current || trimmed);\n  }, [value, isSending, onSend]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLTextAreaElement>) => {\n      if (e.key === \"Enter\" && !e.shiftKey) {\n        e.preventDefault();\n        handleSend();\n      }\n    },\n    [handleSend],\n  );\n\n  const handleInput = useCallback(() => {\n    const el = textareaRef.current;\n    if (!el) return;\n    el.style.height = \"auto\";\n    el.style.height = `${Math.min(el.scrollHeight, 100)}px`;\n  }, []);\n\n  const hasContent = value.trim().length > 0;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-shrink-0 items-end gap-2 border-t border-border bg-background px-4 py-3\",\n        className,\n      )}\n    >\n      <input\n        ref={fileRef}\n        type=\"file\"\n        accept={ATTACHMENT_ACCEPT}\n        className=\"hidden\"\n        aria-hidden=\"true\"\n        tabIndex={-1}\n        onChange={(e) => {\n          const file = e.target.files?.[0];\n          e.target.value = \"\";\n          if (file) void handleAttach(file);\n        }}\n      />\n      <button\n        type=\"button\"\n        aria-label=\"Attach a photo\"\n        disabled={uploading}\n        onClick={() => fileRef.current?.click()}\n        className={cn(\n          \"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[10px]\",\n          \"bg-muted text-muted-foreground transition-colors hover:text-foreground\",\n          uploading && \"animate-pulse\",\n        )}\n      >\n        <ImageIcon className=\"h-[18px] w-[18px]\" />\n      </button>\n      <div\n        className={cn(\n          \"flex flex-1 items-end rounded-xl border-[1.5px] border-transparent bg-muted px-1\",\n          \"transition-colors focus-within:border-foreground focus-within:bg-background\",\n        )}\n      >\n        <textarea\n          ref={textareaRef}\n          value={value}\n          onChange={(e) => setValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          onInput={handleInput}\n          placeholder={placeholder}\n          rows={1}\n          className={cn(\n            \"max-h-[100px] min-h-[20px] flex-1 resize-none bg-transparent px-2.5 py-2\",\n            \"text-sm text-foreground outline-none placeholder:text-muted-foreground\",\n          )}\n        />\n      </div>\n\n      <button\n        type=\"button\"\n        onClick={handleSend}\n        disabled={!hasContent || isSending}\n        aria-label=\"Send message\"\n        className={cn(\n          \"flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[10px]\",\n          \"transition-all duration-200\",\n          hasContent && !isSending\n            ? \"bg-foreground text-background hover:scale-105 active:scale-95\"\n            : \"bg-muted text-muted-foreground\",\n        )}\n      >\n        <SendIcon className=\"h-[18px] w-[18px]\" />\n      </button>\n    </div>\n  );\n}\n\n/* ─── Typing dots ─────────────────────────────────────────── */\n\nfunction TypingDots() {\n  return (\n    <div className=\"flex items-center gap-1 px-4 py-3\">\n      {[0, 1, 2].map((i) => (\n        <span\n          key={i}\n          className=\"h-[7px] w-[7px] animate-bounce rounded-full bg-muted-foreground/40\"\n          style={{ animationDelay: `${i * 160}ms` }}\n        />\n      ))}\n    </div>\n  );\n}\n\n/* ─── Icons (inline SVG — no icon library) ────────────────── */\n\nfunction ChatIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z\" />\n    </svg>\n  );\n}\n\nfunction CloseIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M18 6L6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\nfunction SendIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\" />\n      <polygon points=\"22 2 15 22 11 13 2 9 22 2\" />\n    </svg>\n  );\n}\n\nfunction ImageIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n      <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" />\n      <polyline points=\"21 15 16 10 5 21\" />\n    </svg>\n  );\n}\n\nfunction ReplyIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"9 17 4 12 9 7\" />\n      <path d=\"M20 18v-2a4 4 0 0 0-4-4H4\" />\n    </svg>\n  );\n}\n"
     }
   ]
 }

package/registry/order-history.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "order-history.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Order, OrderStatus } from \"@cimplify/sdk\";\nimport { useOrders } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderHistoryClassNames {\n  root?: string;\n  item?: string;\n  orderId?: string;\n  status?: string;\n  date?: string;\n  total?: string;\n  empty?: string;\n  loading?: string;\n  reorderButton?: string;\n}\n\nexport interface OrderHistoryProps {\n  /** Override orders (skips fetch). For SSR, pass pre-fetched orders. */\n  orders?: Order[];\n  /** Filter by status. */\n  status?: OrderStatus;\n  /** Max orders to display. */\n  limit?: number;\n  /** Called when an order row is clicked. */\n  onOrderClick?: (order: Order) => void;\n  /** Custom order row renderer. */\n  renderOrder?: (order: Order) => React.ReactNode;\n  /** Called when the reorder button is clicked. If provided, a reorder button is rendered. */\n  onReorder?: (order: Order) => void;\n  /** Text shown when empty. */\n  emptyMessage?: string;\n  className?: string;\n  classNames?: OrderHistoryClassNames;\n}\n\nconst STATUS_LABELS: Record<OrderStatus, string> = {\n  pending: \"Pending\",\n  created: \"Created\",\n  confirmed: \"Confirmed\",\n  in_preparation: \"In Preparation\",\n  ready_to_serve: \"Ready\",\n  partially_served: \"Partially Served\",\n  served: \"Served\",\n  delivered: \"Delivered\",\n  picked_up: \"Picked Up\",\n  completed: \"Completed\",\n  cancelled: \"Cancelled\",\n  refunded: \"Refunded\",\n};\n\n/**\n * OrderHistory — list of past orders with status and totals.\n *\n * Fetches via `useOrders` unless pre-loaded orders are passed.\n */\nexport function OrderHistory({\n  orders: ordersProp,\n  status,\n  limit,\n  onOrderClick,\n  renderOrder,\n  onReorder,\n  emptyMessage = \"No orders yet\",\n  className,\n  classNames,\n}: OrderHistoryProps): React.ReactElement {\n  const { orders: fetched, isLoading } = useOrders({\n    status,\n    limit,\n    enabled: ordersProp === undefined,\n  });\n\n  const orders = ordersProp ?? fetched;\n\n  if (isLoading && orders.length === 0) {\n    return (\n      <div\n        data-cimplify-order-history\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (orders.length === 0) {\n    return (\n      <div\n        data-cimplify-order-history\n        data-empty\n        className={cn(className, classNames?.root, classNames?.empty)}\n      >\n        <p>{emptyMessage}</p>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-order-history className={cn(className, classNames?.root)}>\n      {orders.map((order) => (\n        <button\n          key={order.id}\n          type=\"button\"\n          onClick={() => onOrderClick?.(order)}\n          data-cimplify-order-history-item\n          data-status={order.status}\n          className={classNames?.item}\n        >\n          {renderOrder ? (\n            renderOrder(order)\n          ) : (\n            <>\n              <div data-cimplify-order-history-main>\n                <span data-cimplify-order-history-id className={classNames?.orderId}>\n                  #{order.user_friendly_id}\n                </span>\n                <span\n                  data-cimplify-order-history-status\n                  data-status={order.status}\n                  className={classNames?.status}\n                >\n                  {STATUS_LABELS[order.status] ?? order.status}\n                </span>\n              </div>\n              <div data-cimplify-order-history-details>\n                <time\n                  data-cimplify-order-history-date\n                  dateTime={order.created_at}\n                  className={classNames?.date}\n                >\n                  {new Date(order.created_at).toLocaleDateString()}\n                </time>\n                <span data-cimplify-order-history-items>\n                  {order.total_quantity} {order.total_quantity === 1 ? \"item\" : \"items\"}\n                </span>\n                <span data-cimplify-order-history-total className={classNames?.total}>\n                  <Price amount={order.total_price} />\n                </span>\n              </div>\n              {onReorder && (\n                <button\n                  type=\"button\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onReorder(order);\n                  }}\n                  data-cimplify-order-reorder\n                  className={classNames?.reorderButton}\n                >\n                  Reorder\n                </button>\n              )}\n            </>\n          )}\n        </button>\n      ))}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Order, OrderStatus } from \"@cimplify/sdk\";\nimport { useOrders } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderHistoryClassNames {\n  root?: string;\n  item?: string;\n  orderId?: string;\n  status?: string;\n  date?: string;\n  total?: string;\n  empty?: string;\n  loading?: string;\n  reorderButton?: string;\n}\n\nexport interface OrderHistoryProps {\n  /** Override orders (skips fetch). For SSR, pass pre-fetched orders. */\n  orders?: Order[];\n  /** Filter by status. */\n  status?: OrderStatus;\n  /** Max orders to display. */\n  limit?: number;\n  /** Called when an order row is clicked. */\n  onOrderClick?: (order: Order) => void;\n  /** Custom order row renderer. */\n  renderOrder?: (order: Order) => React.ReactNode;\n  /** Called when the reorder button is clicked. If provided, a reorder button is rendered. */\n  onReorder?: (order: Order) => void;\n  /** Text shown when empty. */\n  emptyMessage?: string;\n  className?: string;\n  classNames?: OrderHistoryClassNames;\n}\n\nconst STATUS_LABELS: Record<OrderStatus, string> = {\n  pending: \"Pending\",\n  created: \"Created\",\n  confirmed: \"Confirmed\",\n  in_preparation: \"In Preparation\",\n  ready_to_serve: \"Ready\",\n  partially_served: \"Partially Served\",\n  served: \"Served\",\n  delivered: \"Delivered\",\n  picked_up: \"Picked Up\",\n  completed: \"Completed\",\n  cancelled: \"Cancelled\",\n};\n\n/**\n * OrderHistory — list of past orders with status and totals.\n *\n * Fetches via `useOrders` unless pre-loaded orders are passed.\n */\nexport function OrderHistory({\n  orders: ordersProp,\n  status,\n  limit,\n  onOrderClick,\n  renderOrder,\n  onReorder,\n  emptyMessage = \"No orders yet\",\n  className,\n  classNames,\n}: OrderHistoryProps): React.ReactElement {\n  const { orders: fetched, isLoading } = useOrders({\n    status,\n    limit,\n    enabled: ordersProp === undefined,\n  });\n\n  const orders = ordersProp ?? fetched;\n\n  if (isLoading && orders.length === 0) {\n    return (\n      <div\n        data-cimplify-order-history\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (orders.length === 0) {\n    return (\n      <div\n        data-cimplify-order-history\n        data-empty\n        className={cn(className, classNames?.root, classNames?.empty)}\n      >\n        <p>{emptyMessage}</p>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-order-history className={cn(className, classNames?.root)}>\n      {orders.map((order) => (\n        <button\n          key={order.id}\n          type=\"button\"\n          onClick={() => onOrderClick?.(order)}\n          data-cimplify-order-history-item\n          data-status={order.status}\n          className={classNames?.item}\n        >\n          {renderOrder ? (\n            renderOrder(order)\n          ) : (\n            <>\n              <div data-cimplify-order-history-main>\n                <span data-cimplify-order-history-id className={classNames?.orderId}>\n                  #{order.user_friendly_id}\n                </span>\n                <span\n                  data-cimplify-order-history-status\n                  data-status={order.status}\n                  className={classNames?.status}\n                >\n                  {STATUS_LABELS[order.status] ?? order.status}\n                </span>\n              </div>\n              <div data-cimplify-order-history-details>\n                <time\n                  data-cimplify-order-history-date\n                  dateTime={order.created_at}\n                  className={classNames?.date}\n                >\n                  {new Date(order.created_at).toLocaleDateString()}\n                </time>\n                <span data-cimplify-order-history-items>\n                  {order.total_quantity} {order.total_quantity === 1 ? \"item\" : \"items\"}\n                </span>\n                <span data-cimplify-order-history-total className={classNames?.total}>\n                  <Price amount={order.total_price} />\n                </span>\n              </div>\n              {onReorder && (\n                <button\n                  type=\"button\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onReorder(order);\n                  }}\n                  data-cimplify-order-reorder\n                  className={classNames?.reorderButton}\n                >\n                  Reorder\n                </button>\n              )}\n            </>\n          )}\n        </button>\n      ))}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/order-summary.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "order-summary.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Order, LineItem, OrderStatus, PaymentState } from \"@cimplify/sdk\";\nimport { useOrder } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderSummaryClassNames {\n  root?: string;\n  header?: string;\n  orderId?: string;\n  status?: string;\n  paymentState?: string;\n  fulfillmentDetails?: string;\n  deliveryAddress?: string;\n  items?: string;\n  lineItem?: string;\n  notes?: string;\n  totals?: string;\n  customer?: string;\n  loading?: string;\n  serviceInfo?: string;\n  digitalInfo?: string;\n  bundleBreakdown?: string;\n  compositeBreakdown?: string;\n  trackingLink?: string;\n  reorderButton?: string;\n}\n\nexport interface OrderSummaryProps {\n  /** Pass an Order object directly (skips fetch). */\n  order?: Order;\n  /** Or pass an order ID to fetch via useOrder. */\n  orderId?: string;\n  /** Poll for status updates. */\n  poll?: boolean;\n  /** Custom line item renderer. */\n  renderLineItem?: (item: LineItem) => React.ReactNode;\n  /** Called when the reorder button is clicked. */\n  onReorder?: (order: Order) => void;\n  /** Called when the order status changes during polling. */\n  onStatusChange?: (previousStatus: OrderStatus, newStatus: OrderStatus, order: Order) => void;\n  className?: string;\n  classNames?: OrderSummaryClassNames;\n}\n\nconst STATUS_LABELS: Record<OrderStatus, string> = {\n  pending: \"Pending\",\n  created: \"Created\",\n  confirmed: \"Confirmed\",\n  in_preparation: \"In Preparation\",\n  ready_to_serve: \"Ready\",\n  partially_served: \"Partially Served\",\n  served: \"Served\",\n  delivered: \"Delivered\",\n  picked_up: \"Picked Up\",\n  completed: \"Completed\",\n  cancelled: \"Cancelled\",\n  refunded: \"Refunded\",\n};\n\nconst PAYMENT_STATE_LABELS: Record<PaymentState, string> = {\n  not_paid: \"Not Paid\",\n  partially_paid: \"Partially Paid\",\n  paid: \"Paid\",\n  partially_refunded: \"Partially Refunded\",\n  refunded: \"Refunded\",\n};\n\n/**\n * OrderSummary — displays a single order's details, line items, and totals.\n *\n * Accepts either a pre-loaded `order` object or an `orderId` to fetch.\n * Supports polling for live status updates.\n */\nexport function OrderSummary({\n  order: orderProp,\n  orderId,\n  poll = false,\n  renderLineItem,\n  onReorder,\n  onStatusChange,\n  className,\n  classNames,\n}: OrderSummaryProps): React.ReactElement {\n  const { order: fetched, isLoading } = useOrder(orderProp ? null : orderId, {\n    enabled: !orderProp && !!orderId,\n    poll,\n    onStatusChange,\n  });\n\n  const order = orderProp ?? fetched;\n\n  if (isLoading && !order) {\n    return (\n      <div\n        data-cimplify-order-summary\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      >\n        <div data-cimplify-order-summary-skeleton />\n      </div>\n    );\n  }\n\n  if (!order) {\n    return (\n      <div data-cimplify-order-summary className={cn(className, classNames?.root)}>\n        <p>Order not found.</p>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-order-summary className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-order-header className={classNames?.header}>\n        <span data-cimplify-order-id className={classNames?.orderId}>\n          Order #{order.user_friendly_id}\n        </span>\n        <span\n          data-cimplify-order-status\n          data-status={order.status}\n          className={classNames?.status}\n        >\n          {STATUS_LABELS[order.status] ?? order.status}\n        </span>\n        {order.payment_state && (\n          <span\n            data-cimplify-order-payment-state\n            data-payment-state={order.payment_state}\n            className={classNames?.paymentState}\n          >\n            {PAYMENT_STATE_LABELS[order.payment_state] ?? order.payment_state}\n          </span>\n        )}\n      </div>\n\n      {/* Fulfillment details */}\n      {order.order_type === \"pickup\" && order.pickup_time && (\n        <div data-cimplify-order-fulfillment className={classNames?.fulfillmentDetails}>\n          <span>Pickup time: {new Date(order.pickup_time).toLocaleString()}</span>\n        </div>\n      )}\n      {order.order_type === \"dine-in\" && order.table_number && (\n        <div data-cimplify-order-fulfillment className={classNames?.fulfillmentDetails}>\n          <span>Table: {order.table_number}</span>\n        </div>\n      )}\n\n      {/* Date */}\n      <time data-cimplify-order-date dateTime={order.created_at}>\n        {new Date(order.created_at).toLocaleDateString(undefined, {\n          year: \"numeric\",\n          month: \"long\",\n          day: \"numeric\",\n          hour: \"2-digit\",\n          minute: \"2-digit\",\n        })}\n      </time>\n\n      {/* Customer info */}\n      {(order.customer_name || order.customer_email) && (\n        <div data-cimplify-order-customer className={classNames?.customer}>\n          {order.customer_name && (\n            <span data-cimplify-order-customer-name>{order.customer_name}</span>\n          )}\n          {order.customer_email && (\n            <span data-cimplify-order-customer-email>{order.customer_email}</span>\n          )}\n        </div>\n      )}\n\n      {/* Delivery address */}\n      {order.delivery_address && (\n        <div data-cimplify-order-delivery-address className={classNames?.deliveryAddress}>\n          <span>Delivery address</span>\n          <p>{order.delivery_address}</p>\n        </div>\n      )}\n\n      {/* Line items */}\n      <div data-cimplify-order-items className={classNames?.items}>\n        {order.items.map((item) =>\n          renderLineItem ? (\n            <React.Fragment key={item.id}>{renderLineItem(item)}</React.Fragment>\n          ) : (\n            <div key={item.id} data-cimplify-order-line-item className={classNames?.lineItem}>\n              <div data-cimplify-order-line-info>\n                <span data-cimplify-order-line-qty>{item.quantity}&times;</span>\n                <span data-cimplify-order-line-key>{item.line_key}</span>\n              </div>\n              <Price amount={item.price} />\n              {item.fulfillment_type === \"digital\" && item.fulfillment_id && (\n                <a\n                  href={item.fulfillment_id}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  data-cimplify-order-line-download\n                  className=\"text-sm text-primary underline\"\n                >\n                  Download\n                </a>\n              )}\n\n              {/* Service items: show scheduling and confirmation details */}\n              {item.configuration.type === \"service\" && (\n                <div data-cimplify-order-service-info className={classNames?.serviceInfo}>\n                  {item.configuration.scheduled_start && (\n                    <span>{\"\\u{1F4C5}\"} {new Date(item.configuration.scheduled_start).toLocaleDateString()} at {new Date(item.configuration.scheduled_start).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" })}</span>\n                  )}\n                  {item.configuration.confirmation_code && (\n                    <span>Confirmation: {item.configuration.confirmation_code}</span>\n                  )}\n                  {item.configuration.service_status && (\n                    <span data-status={item.configuration.service_status}>{item.configuration.service_status}</span>\n                  )}\n                </div>\n              )}\n\n              {/* Digital items: instant delivery badge */}\n              {item.configuration.type === \"digital\" && (\n                <div data-cimplify-order-digital-info className={classNames?.digitalInfo}>\n                  <span>{\"\\u26A1\"} Instant digital delivery</span>\n                </div>\n              )}\n\n              {/* Bundle items: component breakdown */}\n              {item.configuration.type === \"bundle\" && item.configuration.resolved && (\n                <div data-cimplify-order-bundle-breakdown className={classNames?.bundleBreakdown}>\n                  {item.configuration.resolved.selections.map((sel) => (\n                    <div key={sel.component_id} data-product-type={sel.product_type}>\n                      <span>{sel.quantity}&times; {sel.product_name}</span>\n                      {sel.product_type === \"service\" && sel.scheduling?.scheduled_start && (\n                        <span> &mdash; {new Date(sel.scheduling.scheduled_start).toLocaleDateString()}</span>\n                      )}\n                      {sel.product_type === \"digital\" && <span> &mdash; Digital</span>}\n                    </div>\n                  ))}\n                </div>\n              )}\n\n              {/* Composite items: component breakdown with pricing */}\n              {item.configuration.type === \"composite\" && item.configuration.resolved && (\n                <div data-cimplify-order-composite-breakdown className={classNames?.compositeBreakdown}>\n                  {item.configuration.resolved.selections.map((sel) => (\n                    <div key={sel.component_id} data-product-type={sel.product_type}>\n                      <span>{sel.quantity}&times; {sel.component_name}</span>\n                      {sel.product_type === \"service\" && sel.scheduling?.scheduled_start && (\n                        <span> &mdash; {new Date(sel.scheduling.scheduled_start).toLocaleDateString()}</span>\n                      )}\n                      <Price amount={sel.unit_price} />\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          ),\n        )}\n      </div>\n\n      {/* Customer notes / special instructions */}\n      {order.customer_notes && order.customer_notes.length > 0 && (\n        <div data-cimplify-order-notes className={classNames?.notes}>\n          <span>Notes</span>\n          {order.customer_notes.map((note, index) => (\n            <p key={index} data-cimplify-order-note>{note}</p>\n          ))}\n        </div>\n      )}\n\n      {/* Totals */}\n      <div data-cimplify-order-totals className={classNames?.totals}>\n        {order.total_discount != null && parsePrice(order.total_discount) !== 0 && (\n          <div data-cimplify-order-discount>\n            <span>Discount</span>\n            <Price amount={order.total_discount} prefix=\"-\" />\n          </div>\n        )}\n        {order.delivery_fee != null && parsePrice(order.delivery_fee) > 0 && (\n          <div data-cimplify-order-delivery-fee>\n            <span>Delivery fee</span>\n            <Price amount={order.delivery_fee} />\n          </div>\n        )}\n        {order.service_charge != null && parsePrice(order.service_charge) !== 0 && (\n          <div data-cimplify-order-service-charge>\n            <span>Service charge</span>\n            <Price amount={order.service_charge} />\n          </div>\n        )}\n        {order.tax != null && parsePrice(order.tax) !== 0 && (\n          <div data-cimplify-order-tax>\n            <span>Tax</span>\n            <Price amount={order.tax} />\n          </div>\n        )}\n        <div data-cimplify-order-total>\n          <span>Total</span>\n          <Price amount={order.total_price} />\n        </div>\n      </div>\n\n      {/* Tracking */}\n      {order.tracking_link && (\n        <a\n          href={order.tracking_link}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          data-cimplify-order-tracking\n          className={classNames?.trackingLink}\n        >\n          Track your order\n        </a>\n      )}\n\n      {onReorder && (\n        <button\n          type=\"button\"\n          onClick={() => onReorder(order)}\n          data-cimplify-order-reorder\n          className={classNames?.reorderButton}\n        >\n          Reorder\n        </button>\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Order, LineItem, OrderStatus, PaymentState } from \"@cimplify/sdk\";\nimport { useOrder } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderSummaryClassNames {\n  root?: string;\n  header?: string;\n  orderId?: string;\n  status?: string;\n  paymentState?: string;\n  fulfillmentDetails?: string;\n  deliveryAddress?: string;\n  items?: string;\n  lineItem?: string;\n  notes?: string;\n  totals?: string;\n  customer?: string;\n  loading?: string;\n  serviceInfo?: string;\n  digitalInfo?: string;\n  bundleBreakdown?: string;\n  compositeBreakdown?: string;\n  trackingLink?: string;\n  reorderButton?: string;\n}\n\nexport interface OrderSummaryProps {\n  /** Pass an Order object directly (skips fetch). */\n  order?: Order;\n  /** Or pass an order ID to fetch via useOrder. */\n  orderId?: string;\n  /** Poll for status updates. */\n  poll?: boolean;\n  /** Custom line item renderer. */\n  renderLineItem?: (item: LineItem) => React.ReactNode;\n  /** Called when the reorder button is clicked. */\n  onReorder?: (order: Order) => void;\n  /** Called when the order status changes during polling. */\n  onStatusChange?: (previousStatus: OrderStatus, newStatus: OrderStatus, order: Order) => void;\n  className?: string;\n  classNames?: OrderSummaryClassNames;\n}\n\nconst STATUS_LABELS: Record<OrderStatus, string> = {\n  pending: \"Pending\",\n  created: \"Created\",\n  confirmed: \"Confirmed\",\n  in_preparation: \"In Preparation\",\n  ready_to_serve: \"Ready\",\n  partially_served: \"Partially Served\",\n  served: \"Served\",\n  delivered: \"Delivered\",\n  picked_up: \"Picked Up\",\n  completed: \"Completed\",\n  cancelled: \"Cancelled\",\n};\n\nconst PAYMENT_STATE_LABELS: Record<PaymentState, string> = {\n  not_paid: \"Not Paid\",\n  partially_paid: \"Partially Paid\",\n  paid: \"Paid\",\n  partially_refunded: \"Partially Refunded\",\n  refunded: \"Refunded\",\n};\n\n/**\n * OrderSummary — displays a single order's details, line items, and totals.\n *\n * Accepts either a pre-loaded `order` object or an `orderId` to fetch.\n * Supports polling for live status updates.\n */\nexport function OrderSummary({\n  order: orderProp,\n  orderId,\n  poll = false,\n  renderLineItem,\n  onReorder,\n  onStatusChange,\n  className,\n  classNames,\n}: OrderSummaryProps): React.ReactElement {\n  const { order: fetched, isLoading } = useOrder(orderProp ? null : orderId, {\n    enabled: !orderProp && !!orderId,\n    poll,\n    onStatusChange,\n  });\n\n  const order = orderProp ?? fetched;\n\n  if (isLoading && !order) {\n    return (\n      <div\n        data-cimplify-order-summary\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      >\n        <div data-cimplify-order-summary-skeleton />\n      </div>\n    );\n  }\n\n  if (!order) {\n    return (\n      <div data-cimplify-order-summary className={cn(className, classNames?.root)}>\n        <p>Order not found.</p>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-order-summary className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-order-header className={classNames?.header}>\n        <span data-cimplify-order-id className={classNames?.orderId}>\n          Order #{order.user_friendly_id}\n        </span>\n        <span\n          data-cimplify-order-status\n          data-status={order.status}\n          className={classNames?.status}\n        >\n          {STATUS_LABELS[order.status] ?? order.status}\n        </span>\n        {order.payment_state && (\n          <span\n            data-cimplify-order-payment-state\n            data-payment-state={order.payment_state}\n            className={classNames?.paymentState}\n          >\n            {PAYMENT_STATE_LABELS[order.payment_state] ?? order.payment_state}\n          </span>\n        )}\n      </div>\n\n      {/* Fulfillment details */}\n      {order.order_type === \"pickup\" && order.pickup_time && (\n        <div data-cimplify-order-fulfillment className={classNames?.fulfillmentDetails}>\n          <span>Pickup time: {new Date(order.pickup_time).toLocaleString()}</span>\n        </div>\n      )}\n      {order.order_type === \"dine-in\" && order.table_number && (\n        <div data-cimplify-order-fulfillment className={classNames?.fulfillmentDetails}>\n          <span>Table: {order.table_number}</span>\n        </div>\n      )}\n\n      {/* Date */}\n      <time data-cimplify-order-date dateTime={order.created_at}>\n        {new Date(order.created_at).toLocaleDateString(undefined, {\n          year: \"numeric\",\n          month: \"long\",\n          day: \"numeric\",\n          hour: \"2-digit\",\n          minute: \"2-digit\",\n        })}\n      </time>\n\n      {/* Customer info */}\n      {(order.customer_name || order.customer_email) && (\n        <div data-cimplify-order-customer className={classNames?.customer}>\n          {order.customer_name && (\n            <span data-cimplify-order-customer-name>{order.customer_name}</span>\n          )}\n          {order.customer_email && (\n            <span data-cimplify-order-customer-email>{order.customer_email}</span>\n          )}\n        </div>\n      )}\n\n      {/* Delivery address */}\n      {order.delivery_address && (\n        <div data-cimplify-order-delivery-address className={classNames?.deliveryAddress}>\n          <span>Delivery address</span>\n          <p>{order.delivery_address}</p>\n        </div>\n      )}\n\n      {/* Line items */}\n      <div data-cimplify-order-items className={classNames?.items}>\n        {order.items.map((item) =>\n          renderLineItem ? (\n            <React.Fragment key={item.id}>{renderLineItem(item)}</React.Fragment>\n          ) : (\n            <div key={item.id} data-cimplify-order-line-item className={classNames?.lineItem}>\n              <div data-cimplify-order-line-info>\n                <span data-cimplify-order-line-qty>{item.quantity}&times;</span>\n                <span data-cimplify-order-line-key>{item.line_key}</span>\n              </div>\n              <Price amount={item.price} />\n              {item.fulfillment_type === \"digital\" && item.fulfillment_id && (\n                <a\n                  href={item.fulfillment_id}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  data-cimplify-order-line-download\n                  className=\"text-sm text-primary underline\"\n                >\n                  Download\n                </a>\n              )}\n\n              {/* Service items: show scheduling and confirmation details */}\n              {item.configuration.type === \"service\" && (\n                <div data-cimplify-order-service-info className={classNames?.serviceInfo}>\n                  {item.configuration.scheduled_start && (\n                    <span>{\"\\u{1F4C5}\"} {new Date(item.configuration.scheduled_start).toLocaleDateString()} at {new Date(item.configuration.scheduled_start).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" })}</span>\n                  )}\n                  {item.configuration.confirmation_code && (\n                    <span>Confirmation: {item.configuration.confirmation_code}</span>\n                  )}\n                  {item.configuration.service_status && (\n                    <span data-status={item.configuration.service_status}>{item.configuration.service_status}</span>\n                  )}\n                </div>\n              )}\n\n              {/* Digital items: instant delivery badge */}\n              {item.configuration.type === \"digital\" && (\n                <div data-cimplify-order-digital-info className={classNames?.digitalInfo}>\n                  <span>{\"\\u26A1\"} Instant digital delivery</span>\n                </div>\n              )}\n\n              {/* Bundle items: component breakdown */}\n              {item.configuration.type === \"bundle\" && item.configuration.resolved && (\n                <div data-cimplify-order-bundle-breakdown className={classNames?.bundleBreakdown}>\n                  {item.configuration.resolved.selections.map((sel) => (\n                    <div key={sel.component_id} data-product-type={sel.product_type}>\n                      <span>{sel.quantity}&times; {sel.product_name}</span>\n                      {sel.product_type === \"service\" && sel.scheduling?.scheduled_start && (\n                        <span> &mdash; {new Date(sel.scheduling.scheduled_start).toLocaleDateString()}</span>\n                      )}\n                      {sel.product_type === \"digital\" && <span> &mdash; Digital</span>}\n                    </div>\n                  ))}\n                </div>\n              )}\n\n              {/* Composite items: component breakdown with pricing */}\n              {item.configuration.type === \"composite\" && item.configuration.resolved && (\n                <div data-cimplify-order-composite-breakdown className={classNames?.compositeBreakdown}>\n                  {item.configuration.resolved.selections.map((sel) => (\n                    <div key={sel.component_id} data-product-type={sel.product_type}>\n                      <span>{sel.quantity}&times; {sel.component_name}</span>\n                      {sel.product_type === \"service\" && sel.scheduling?.scheduled_start && (\n                        <span> &mdash; {new Date(sel.scheduling.scheduled_start).toLocaleDateString()}</span>\n                      )}\n                      <Price amount={sel.unit_price} />\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          ),\n        )}\n      </div>\n\n      {/* Customer notes / special instructions */}\n      {order.customer_notes && order.customer_notes.length > 0 && (\n        <div data-cimplify-order-notes className={classNames?.notes}>\n          <span>Notes</span>\n          {order.customer_notes.map((note, index) => (\n            <p key={index} data-cimplify-order-note>{note}</p>\n          ))}\n        </div>\n      )}\n\n      {/* Totals */}\n      <div data-cimplify-order-totals className={classNames?.totals}>\n        {order.total_discount != null && parsePrice(order.total_discount) !== 0 && (\n          <div data-cimplify-order-discount>\n            <span>Discount</span>\n            <Price amount={order.total_discount} prefix=\"-\" />\n          </div>\n        )}\n        {order.delivery_fee != null && parsePrice(order.delivery_fee) > 0 && (\n          <div data-cimplify-order-delivery-fee>\n            <span>Delivery fee</span>\n            <Price amount={order.delivery_fee} />\n          </div>\n        )}\n        {order.service_charge != null && parsePrice(order.service_charge) !== 0 && (\n          <div data-cimplify-order-service-charge>\n            <span>Service charge</span>\n            <Price amount={order.service_charge} />\n          </div>\n        )}\n        {order.tax != null && parsePrice(order.tax) !== 0 && (\n          <div data-cimplify-order-tax>\n            <span>Tax</span>\n            <Price amount={order.tax} />\n          </div>\n        )}\n        <div data-cimplify-order-total>\n          <span>Total</span>\n          <Price amount={order.total_price} />\n        </div>\n      </div>\n\n      {/* Tracking */}\n      {order.tracking_link && (\n        <a\n          href={order.tracking_link}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          data-cimplify-order-tracking\n          className={classNames?.trackingLink}\n        >\n          Track your order\n        </a>\n      )}\n\n      {onReorder && (\n        <button\n          type=\"button\"\n          onClick={() => onReorder(order)}\n          data-cimplify-order-reorder\n          className={classNames?.reorderButton}\n        >\n          Reorder\n        </button>\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }