@cimplify/sdk 0.29.0 → 0.31.0

package/dist/react.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkR4AKAGZQ_js = require('./chunk-R4AKAGZQ.js');
+var chunk6HCBOIZ4_js = require('./chunk-6HCBOIZ4.js');
 var chunk2CGA3MUW_js = require('./chunk-2CGA3MUW.js');
 var chunkPEDLCL72_js = require('./chunk-PEDLCL72.js');
 var React10 = require('react');
@@ -1063,7 +1063,7 @@ var DEFAULT_COUNTRY = "US";
 function createDefaultClient() {
   const processRef = globalThis.process;
   const envPublicKey = processRef?.env?.NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY || "";
-  return chunkR4AKAGZQ_js.createCimplifyClient({ publicKey: envPublicKey });
+  return chunk6HCBOIZ4_js.createCimplifyClient({ publicKey: envPublicKey });
 }
 function getStoredLocationId() {
   if (typeof window === "undefined" || !window.localStorage) {
@@ -3315,6 +3315,182 @@ function useBootstrap(options = {}) {
   const { data, isLoading, error, refetch } = bootstrapQuery(options);
   return { bootstrap: data, isLoading, error, refetch };
 }
+var POLL_INTERVAL_MS = 3e3;
+var POLL_IDLE_INTERVAL_MS = 15e3;
+var IDLE_TIMEOUT_MS = 6e4;
+var WS_MAX_RECONNECT_ATTEMPTS = 10;
+var WS_PATH = "/api/v1/support/conversation/ws";
+function useChat(options = {}) {
+  const context = useOptionalCimplifyClient();
+  const client = options.client ?? context?.client;
+  const [messages, setMessages] = React10.useState([]);
+  const [isLoading, setIsLoading] = React10.useState(false);
+  const [isSending, setIsSending] = React10.useState(false);
+  const [error, setError] = React10.useState(null);
+  const [conversationOpened, setConversationOpened] = React10.useState(false);
+  const pollRef = React10.useRef(null);
+  const lastActivityRef = React10.useRef(Date.now());
+  const openedRef = React10.useRef(false);
+  const messagesRef = React10.useRef([]);
+  const clientRef = React10.useRef(client);
+  const wsRef = React10.useRef(null);
+  const wsReconnectAttemptRef = React10.useRef(0);
+  const wsReconnectTimerRef = React10.useRef(null);
+  messagesRef.current = messages;
+  clientRef.current = client;
+  const pollInterval = options.pollInterval ?? POLL_INTERVAL_MS;
+  const pollIdleInterval = options.pollIdleInterval ?? POLL_IDLE_INTERVAL_MS;
+  const appendMessages = React10.useCallback((incoming) => {
+    setMessages((prev) => {
+      const ids = new Set(prev.map((m) => m.id));
+      const fresh = incoming.filter((m) => !ids.has(m.id));
+      return fresh.length > 0 ? [...prev, ...fresh] : prev;
+    });
+  }, []);
+  const pollMessages = React10.useCallback(async () => {
+    const c = clientRef.current;
+    if (!c) return;
+    if (Date.now() - lastActivityRef.current > IDLE_TIMEOUT_MS) return;
+    const last = messagesRef.current[messagesRef.current.length - 1];
+    const result = await c.support.getMessages({
+      after: last?.created_at,
+      limit: 50
+    });
+    if (result.ok && result.value.length > 0) {
+      appendMessages(result.value);
+    }
+  }, [appendMessages]);
+  const startPolling = React10.useCallback(() => {
+    if (pollRef.current) clearInterval(pollRef.current);
+    const interval = Date.now() - lastActivityRef.current > IDLE_TIMEOUT_MS ? pollIdleInterval : pollInterval;
+    pollRef.current = setInterval(pollMessages, interval);
+  }, [pollMessages, pollInterval, pollIdleInterval]);
+  const stopPolling = React10.useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+  }, []);
+  const connectWebSocket = React10.useCallback(() => {
+    const c = clientRef.current;
+    if (!c || typeof WebSocket === "undefined") {
+      startPolling();
+      return;
+    }
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    const url = c.buildWsUrl(WS_PATH);
+    const ws = new WebSocket(url);
+    ws.onopen = () => {
+      wsReconnectAttemptRef.current = 0;
+      stopPolling();
+    };
+    ws.onmessage = (event) => {
+      try {
+        const envelope = JSON.parse(event.data);
+        if (envelope.type === "message.created" && envelope.data) {
+          appendMessages([envelope.data]);
+        }
+      } catch {
+      }
+    };
+    ws.onclose = () => {
+      wsRef.current = null;
+      if (!openedRef.current) return;
+      pollMessages();
+      if (wsReconnectAttemptRef.current < WS_MAX_RECONNECT_ATTEMPTS) {
+        const attempt = wsReconnectAttemptRef.current++;
+        const delay = Math.min(1e3 * Math.pow(2, attempt) + Math.random() * 500, 3e4);
+        wsReconnectTimerRef.current = setTimeout(connectWebSocket, delay);
+      } else {
+        startPolling();
+      }
+    };
+    ws.onerror = () => {
+    };
+    wsRef.current = ws;
+  }, [appendMessages, startPolling, stopPolling, pollMessages]);
+  React10.useEffect(() => {
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+      if (wsReconnectTimerRef.current) clearTimeout(wsReconnectTimerRef.current);
+      if (wsRef.current) {
+        wsRef.current.onclose = null;
+        wsRef.current.close();
+      }
+    };
+  }, []);
+  const openConversation = React10.useCallback(async () => {
+    if (openedRef.current || !client) return;
+    openedRef.current = true;
+    setIsLoading(true);
+    setError(null);
+    const result = await client.support.openConversation();
+    if (result.ok) {
+      setMessages(result.value.messages);
+      setConversationOpened(true);
+      connectWebSocket();
+    } else {
+      openedRef.current = false;
+      setError(result.error);
+    }
+    setIsLoading(false);
+  }, [client, connectWebSocket]);
+  const send = React10.useCallback(
+    async (content) => {
+      if (!client || !content.trim()) return;
+      setError(null);
+      lastActivityRef.current = Date.now();
+      if (!openedRef.current) {
+        await openConversation();
+        if (!openedRef.current) return;
+      }
+      const optimisticId = `opt_${Date.now()}`;
+      const optimistic = {
+        id: optimisticId,
+        sender_type: "customer",
+        content: content.trim(),
+        content_type: "text",
+        attachments: [],
+        metadata: {},
+        created_at: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setMessages((prev) => [...prev, optimistic]);
+      setIsSending(true);
+      const result = await client.support.sendMessage(content.trim());
+      if (result.ok) {
+        setMessages(
+          (prev) => prev.map((m) => m.id === optimisticId ? result.value : m)
+        );
+      } else {
+        setMessages((prev) => prev.filter((m) => m.id !== optimisticId));
+        setError(result.error);
+      }
+      setIsSending(false);
+    },
+    [client, openConversation]
+  );
+  const startConversation = React10.useCallback(
+    async (starterText) => {
+      await openConversation();
+      if (starterText) {
+        await send(starterText);
+      }
+    },
+    [openConversation, send]
+  );
+  return {
+    messages,
+    isLoading,
+    isSending,
+    error,
+    isActive: conversationOpened && messages.length > 0,
+    send,
+    startConversation
+  };
+}
 var ElementsContext = React10.createContext({
   elements: null,
   isReady: false
@@ -3737,7 +3913,7 @@ function VariantSelector({
                   {
                     "data-cimplify-variant-name": true,
                     className: cn("flex-1 min-w-0 text-sm", classNames?.name),
-                    children: chunkR4AKAGZQ_js.getVariantDisplayName(variant, productName)
+                    children: chunk6HCBOIZ4_js.getVariantDisplayName(variant, productName)
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-variant-pricing": true, className: cn("text-sm text-muted-foreground", classNames?.pricing), children: [
@@ -4666,8 +4842,26 @@ function CompositeSelector({
     )
   ] });
 }
+
+// src/react/utils/format-duration.ts
+var UNIT_LABELS = {
+  minutes: { singular: "min", plural: "min" },
+  hours: { singular: "hr", plural: "hrs" },
+  days: { singular: "day", plural: "days" },
+  nights: { singular: "night", plural: "nights" },
+  weeks: { singular: "week", plural: "weeks" },
+  months: { singular: "month", plural: "months" },
+  years: { singular: "year", plural: "years" }
+};
+function formatDuration2(value, unit) {
+  const resolved = unit ?? "minutes";
+  const labels = UNIT_LABELS[resolved];
+  const label = value === 1 ? labels.singular : labels.plural;
+  return `${value} ${label}`;
+}
 var FREQUENCY_LABELS = {
   weekly: "Weekly",
+  biweekly: "Biweekly",
   monthly: "Monthly",
   quarterly: "Quarterly",
   annually: "Annually"
@@ -4936,12 +5130,12 @@ function FieldInput({
     classNames?.input
   );
   switch (field.field_type) {
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Text:
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Url:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Text:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Url:
       return /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
-          type: field.field_type === chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Url ? "url" : "text",
+          type: field.field_type === chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Url ? "url" : "text",
           value: typeof value === "string" ? value : "",
           onChange: (e) => onValueChange(e.target.value),
           placeholder: field.placeholder,
@@ -4950,7 +5144,7 @@ function FieldInput({
           className: inputClass
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Textarea:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Textarea:
       return /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
@@ -4963,7 +5157,7 @@ function FieldInput({
           className: cn(inputClass, "resize-none", classNames?.textarea)
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Number:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Number:
       return /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -4977,7 +5171,7 @@ function FieldInput({
           className: inputClass
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Select:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Select:
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "select",
         {
@@ -4991,7 +5185,7 @@ function FieldInput({
           ]
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Radio:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Radio:
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2", classNames?.radioGroup), children: (field.options || []).map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
         "label",
         {
@@ -5016,7 +5210,7 @@ function FieldInput({
         },
         opt
       )) });
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Checkbox:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Checkbox:
       return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cn("flex items-center gap-2 text-sm cursor-pointer", classNames?.checkboxLabel), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
@@ -5029,7 +5223,7 @@ function FieldInput({
         ),
         field.placeholder || field.name
       ] });
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Color:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Color:
       return /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -5039,7 +5233,7 @@ function FieldInput({
           className: cn("w-12 h-10 rounded-md border border-input cursor-pointer", classNames?.colorInput)
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Date:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Date:
       return /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -5050,8 +5244,8 @@ function FieldInput({
           className: inputClass
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.File:
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Image:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.File:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Image:
       return /* @__PURE__ */ jsxRuntime.jsx(
         FileUploadInput,
         {
@@ -5062,7 +5256,7 @@ function FieldInput({
           classNames
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Email:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Email:
       return /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -5074,7 +5268,7 @@ function FieldInput({
           className: inputClass
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.DateTime: {
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.DateTime: {
       const dtLocalValue = typeof value === "string" && value.includes("T") ? value.slice(0, 16) : typeof value === "string" ? value : "";
       return /* @__PURE__ */ jsxRuntime.jsx(
         "input",
@@ -5094,7 +5288,7 @@ function FieldInput({
         }
       );
     }
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Time:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Time:
       return /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -5105,7 +5299,7 @@ function FieldInput({
           className: inputClass
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.MultiSelect:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.MultiSelect:
       return /* @__PURE__ */ jsxRuntime.jsx(
         MultiSelectInput,
         {
@@ -5115,7 +5309,7 @@ function FieldInput({
           classNames
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.DateRange:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.DateRange:
       return /* @__PURE__ */ jsxRuntime.jsx(
         DateRangeInput,
         {
@@ -5126,7 +5320,7 @@ function FieldInput({
           inputClass
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Address:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Address:
       return /* @__PURE__ */ jsxRuntime.jsx(
         AddressInput,
         {
@@ -5137,7 +5331,7 @@ function FieldInput({
           inputClass
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Location:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Location:
       return /* @__PURE__ */ jsxRuntime.jsx(
         LocationInput,
         {
@@ -5148,7 +5342,7 @@ function FieldInput({
           inputClass
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Phone:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Phone:
       return /* @__PURE__ */ jsxRuntime.jsx(
         PhoneInput,
         {
@@ -5159,7 +5353,7 @@ function FieldInput({
           inputClass
         }
       );
-    case chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Signature:
+    case chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Signature:
       return /* @__PURE__ */ jsxRuntime.jsx(
         SignatureInput,
         {
@@ -5192,7 +5386,7 @@ function FileUploadInput({
   const [isUploading, setIsUploading] = React10__default.default.useState(false);
   const fileUrl = typeof value === "string" ? value : void 0;
   const acceptedFormats = field.validation?.accepted_formats;
-  const accept = acceptedFormats ? acceptedFormats.map((f) => `.${f}`).join(",") : field.field_type === chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Image ? "image/*" : void 0;
+  const accept = acceptedFormats ? acceptedFormats.map((f) => `.${f}`).join(",") : field.field_type === chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Image ? "image/*" : void 0;
   const handleFile = async (file) => {
     if (!onFileUpload) return;
     if (field.validation?.max_size_mb) {
@@ -5210,7 +5404,7 @@ function FileUploadInput({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-2", classNames?.fileInput), children: fileUrl ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-    field.field_type === chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Image && /* @__PURE__ */ jsxRuntime.jsx("img", { src: fileUrl, alt: "Uploaded", className: "w-16 h-16 object-cover rounded-md border border-border" }),
+    field.field_type === chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Image && /* @__PURE__ */ jsxRuntime.jsx("img", { src: fileUrl, alt: "Uploaded", className: "w-16 h-16 object-cover rounded-md border border-border" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground truncate", children: fileUrl.split("/").pop() }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -5236,7 +5430,7 @@ function FileUploadInput({
       }
     ),
     isUploading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Uploading..." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: field.placeholder || `Upload ${field.field_type === chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Image ? "image" : "file"}` }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: field.placeholder || `Upload ${field.field_type === chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Image ? "image" : "file"}` }),
       acceptedFormats && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground/60 mt-1", children: [
         acceptedFormats.map((f) => f.toUpperCase()).join(", "),
         field.validation?.max_size_mb && ` \xB7 Max ${field.validation.max_size_mb}MB`
@@ -5991,9 +6185,7 @@ function ProductCustomizer({
     )) }),
     isService && product.duration_minutes != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-customizer-duration": true, className: cn("text-sm text-muted-foreground", classNames?.duration), children: [
       "Duration: ",
-      product.duration_minutes,
-      " ",
-      product.duration_unit ?? "minutes"
+      formatDuration2(product.duration_minutes, product.duration_unit)
     ] }),
     showSpecialInstructions && !isDigital && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-customizer-special-instructions": true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
@@ -6166,7 +6358,7 @@ function CartLineItemRow({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-item": true, className: classNames?.item, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-item-info": true, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-item-name": true, className: classNames?.itemName, children: item.product.name }),
-      item.variant && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-item-variant": true, children: chunkR4AKAGZQ_js.getVariantDisplayName(item.variant, item.product.name) }),
+      item.variant && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-item-variant": true, children: chunk6HCBOIZ4_js.getVariantDisplayName(item.variant, item.product.name) }),
       item.addOnOptions && item.addOnOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-cart-item-addons": true, children: [
         "+ ",
         item.addOnOptions.map((opt) => opt.name).join(", ")
@@ -6175,7 +6367,7 @@ function CartLineItemRow({
       item.specialInstructions && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-item-instructions": true, className: "text-xs text-muted-foreground", children: item.specialInstructions }),
       item.customerInputs && item.customerInputs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-cart-customer-inputs": true, className: classNames?.customerInputs, children: item.customerInputs.map((input) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-input": true, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-input-label": true, children: input.field_name }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-input-value": true, children: input.field_type === chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.File || input.field_type === chunkR4AKAGZQ_js.INPUT_FIELD_TYPE.Image ? String(input.value).split("/").pop() || "Uploaded file" : String(input.value) })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-input-value": true, children: input.field_type === chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.File || input.field_type === chunk6HCBOIZ4_js.INPUT_FIELD_TYPE.Image ? String(input.value).split("/").pop() || "Uploaded file" : String(input.value) })
       ] }, input.field_id)) }),
       (item.lineType === "service" || item.product.type === "service") && item.scheduledStart && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-service-info": true, className: classNames?.serviceInfo, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -6695,7 +6887,7 @@ function FoodProductCard({
   const tags = product.tags || [];
   const isSignature = product.metadata?.is_signature === true;
   const isNew = product.metadata?.is_new === true;
-  const isComposite = product.type === chunkR4AKAGZQ_js.PRODUCT_TYPE.Composite;
+  const isComposite = product.type === chunk6HCBOIZ4_js.PRODUCT_TYPE.Composite;
   return /* @__PURE__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "square", renderImage, children: [
       isSignature && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute top-3 left-3 inline-flex items-center gap-1 text-[11px] font-semibold tracking-wide bg-amber-50 text-amber-700 border border-amber-200/60 px-2 py-0.5 rounded-md", children: [
@@ -6956,7 +7148,7 @@ function CompositeProductCard({
     ] })
   ] });
 }
-function formatDuration2(minutes, unit) {
+function formatDuration3(minutes, unit) {
   if (unit && unit !== "minutes") return `${minutes} ${unit}`;
   if (minutes >= 60) {
     const h = Math.floor(minutes / 60);
@@ -6977,7 +7169,7 @@ function StandardServiceCard({
   return /* @__PURE__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
-      product.duration_minutes != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-3 left-3 inline-flex items-center gap-1 text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm", children: formatDuration2(product.duration_minutes, product.duration_unit) }),
+      product.duration_minutes != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-3 left-3 inline-flex items-center gap-1 text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm", children: formatDuration3(product.duration_minutes, product.duration_unit) }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
@@ -7011,7 +7203,7 @@ function StandardServiceCard({
     ] })
   ] });
 }
-function formatDuration3(minutes, unit) {
+function formatDuration4(minutes, unit) {
   if (unit && unit !== "minutes") return `${minutes} ${unit}`;
   if (minutes >= 60) {
     const h = Math.floor(minutes / 60);
@@ -7036,7 +7228,7 @@ function CompactServiceCard({
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14px] font-semibold text-foreground leading-tight truncate", children: product.name }),
       product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-muted-foreground mt-0.5 truncate", children: product.description }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-2 flex-wrap", children: [
-        product.duration_minutes != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: formatDuration3(product.duration_minutes, product.duration_unit) }),
+        product.duration_minutes != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: formatDuration4(product.duration_minutes, product.duration_unit) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-[10.5px] font-medium text-emerald-600", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-[6px] h-[6px] rounded-full bg-emerald-500" }),
           "Available"
@@ -7076,7 +7268,7 @@ function ScheduleServiceCard({
 }) {
   const image = product.image_url || product.images?.[0] || "";
   const href = `/products/${product.slug}`;
-  const durationLabel = product.duration_minutes != null ? `${product.duration_minutes} ${product.duration_unit ?? "min"}` : null;
+  const durationLabel = product.duration_minutes != null ? formatDuration2(product.duration_minutes, product.duration_unit) : null;
   const displaySlots = (slots || []).slice(0, 3);
   const shellClass = cn(
     "group block text-left cursor-pointer bg-card rounded-[14px] overflow-hidden",
@@ -7129,7 +7321,7 @@ function ScheduleServiceCard({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: shellClass, "data-cimplify-card": true, children: inner });
 }
-var UNIT_LABELS = {
+var UNIT_LABELS2 = {
   minutes: "min",
   hours: "hr",
   days: "day",
@@ -7147,7 +7339,7 @@ function RentalServiceCard({
 }) {
   const image = product.image_url || product.images?.[0] || "";
   const hasDeposit = product.deposit_type && product.deposit_type !== "none" && product.deposit_amount;
-  const unit = product.duration_unit ? UNIT_LABELS[product.duration_unit] || product.duration_unit : "day";
+  const unit = product.duration_unit ? UNIT_LABELS2[product.duration_unit] || product.duration_unit : "day";
   const status = product.inventory_status;
   return /* @__PURE__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
@@ -7267,7 +7459,7 @@ function AccommodationCard({
     ] })
   ] });
 }
-var UNIT_LABELS2 = {
+var UNIT_LABELS3 = {
   weeks: "week",
   months: "mo",
   years: "yr"
@@ -7282,7 +7474,7 @@ function LeaseServiceCard({
   const image = product.image_url || product.images?.[0] || "";
   const hasDeposit = product.deposit_type && product.deposit_type !== "none" && product.deposit_amount;
   const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;
-  const unit = product.duration_unit ? UNIT_LABELS2[product.duration_unit] || product.duration_unit : "mo";
+  const unit = product.duration_unit ? UNIT_LABELS3[product.duration_unit] || product.duration_unit : "mo";
   const tags = product.tags || [];
   const cancellationHours = product.cancellation_window_minutes ? Math.floor(product.cancellation_window_minutes / 60) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
@@ -7340,6 +7532,7 @@ function LeaseServiceCard({
 }
 var FREQUENCY_LABELS2 = {
   weekly: "/week",
+  biweekly: "/2wk",
   monthly: "/mo",
   quarterly: "/qtr",
   annually: "/yr"
@@ -7447,26 +7640,26 @@ var BUILT_IN_CARDS = {
   ["composite" /* Composite */]: CompositeProductCard,
   ["subscription" /* Subscription */]: SubscriptionCard
 };
-var RENTAL_UNITS = /* @__PURE__ */ new Set([chunkR4AKAGZQ_js.DURATION_UNIT.Days, chunkR4AKAGZQ_js.DURATION_UNIT.Hours]);
-var LEASE_UNITS = /* @__PURE__ */ new Set([chunkR4AKAGZQ_js.DURATION_UNIT.Weeks, chunkR4AKAGZQ_js.DURATION_UNIT.Months, chunkR4AKAGZQ_js.DURATION_UNIT.Years]);
+var RENTAL_UNITS = /* @__PURE__ */ new Set([chunk6HCBOIZ4_js.DURATION_UNIT.Days, chunk6HCBOIZ4_js.DURATION_UNIT.Hours]);
+var LEASE_UNITS = /* @__PURE__ */ new Set([chunk6HCBOIZ4_js.DURATION_UNIT.Weeks, chunk6HCBOIZ4_js.DURATION_UNIT.Months, chunk6HCBOIZ4_js.DURATION_UNIT.Years]);
 function resolveCardVariant(product) {
-  if (product.type === chunkR4AKAGZQ_js.PRODUCT_TYPE.Bundle) {
+  if (product.type === chunk6HCBOIZ4_js.PRODUCT_TYPE.Bundle) {
     return "bundle" /* Bundle */;
   }
-  if (product.type === chunkR4AKAGZQ_js.PRODUCT_TYPE.Composite) {
+  if (product.type === chunk6HCBOIZ4_js.PRODUCT_TYPE.Composite) {
     return "composite" /* Composite */;
   }
   if (product.quantity_pricing && product.quantity_pricing.length > 1) {
     return "wholesale" /* Wholesale */;
   }
-  if (product.type === chunkR4AKAGZQ_js.PRODUCT_TYPE.Digital) {
+  if (product.type === chunk6HCBOIZ4_js.PRODUCT_TYPE.Digital) {
     return "digital" /* Digital */;
   }
-  if (product.type === chunkR4AKAGZQ_js.PRODUCT_TYPE.Service) {
+  if (product.type === chunk6HCBOIZ4_js.PRODUCT_TYPE.Service) {
     if (product.duration_unit && RENTAL_UNITS.has(product.duration_unit)) {
       return "rental" /* Rental */;
     }
-    if (product.duration_unit === chunkR4AKAGZQ_js.DURATION_UNIT.Nights) {
+    if (product.duration_unit === chunk6HCBOIZ4_js.DURATION_UNIT.Nights) {
       return "accommodation" /* Accommodation */;
     }
     if (product.duration_unit && LEASE_UNITS.has(product.duration_unit)) {
@@ -7477,10 +7670,10 @@ function resolveCardVariant(product) {
     }
     return "standard" /* Standard */;
   }
-  if (product.render_hint === chunkR4AKAGZQ_js.RENDER_HINT.Food) {
+  if (product.render_hint === chunk6HCBOIZ4_js.RENDER_HINT.Food) {
     return "food" /* Food */;
   }
-  if (product.render_hint === chunkR4AKAGZQ_js.RENDER_HINT.Physical) {
+  if (product.render_hint === chunk6HCBOIZ4_js.RENDER_HINT.Physical) {
     return "retail" /* Retail */;
   }
   return "retail" /* Retail */;
@@ -9842,15 +10035,6 @@ function WholesaleProductLayout({
     )
   ] });
 }
-function formatMinutes(minutes) {
-  if (minutes >= 1440) return `${Math.floor(minutes / 1440)} day${minutes >= 2880 ? "s" : ""}`;
-  if (minutes >= 60) {
-    const h = Math.floor(minutes / 60);
-    const m = minutes % 60;
-    return m > 0 ? `${h}h ${m}min` : `${h} hour${h > 1 ? "s" : ""}`;
-  }
-  return `${minutes} min`;
-}
 function ServiceProductLayout({
   product,
   onAddToCart,
@@ -9882,7 +10066,7 @@ function ServiceProductLayout({
             /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-2xl font-bold text-primary mt-2 block" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-layout-service-info": true, className: "flex flex-wrap gap-2", children: [
-            product.duration_minutes != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full", children: formatMinutes(product.duration_minutes) }),
+            product.duration_minutes != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full", children: formatDuration2(product.duration_minutes, product.duration_unit) }),
             hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 px-3 py-1.5 bg-muted text-sm text-muted-foreground rounded-full", children: [
               /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositAmount }),
               " deposit"
@@ -9919,7 +10103,7 @@ function ServiceProductLayout({
                 cancellationHours,
                 " hours"
               ] }),
-              " before the appointment"
+              " before the booking"
             ] }),
             product.no_show_fee && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground", children: [
               "No-show fee: ",
@@ -10250,25 +10434,25 @@ function resolveTemplateKey(product) {
   if (typeof metaTemplate === "string" && metaTemplate.trim()) {
     return metaTemplate.trim();
   }
-  if (product.type === chunkR4AKAGZQ_js.PRODUCT_TYPE.Bundle) {
+  if (product.type === chunk6HCBOIZ4_js.PRODUCT_TYPE.Bundle) {
     return "bundle" /* Bundle */;
   }
-  if (product.type === chunkR4AKAGZQ_js.PRODUCT_TYPE.Composite) {
+  if (product.type === chunk6HCBOIZ4_js.PRODUCT_TYPE.Composite) {
     return "composite" /* Composite */;
   }
   if (product.quantity_pricing && product.quantity_pricing.length > 1) {
     return "wholesale" /* Wholesale */;
   }
-  if (product.type === chunkR4AKAGZQ_js.PRODUCT_TYPE.Service) {
+  if (product.type === chunk6HCBOIZ4_js.PRODUCT_TYPE.Service) {
     return "service" /* Service */;
   }
-  if (product.type === chunkR4AKAGZQ_js.PRODUCT_TYPE.Digital) {
+  if (product.type === chunk6HCBOIZ4_js.PRODUCT_TYPE.Digital) {
     return "digital" /* Digital */;
   }
-  if (product.render_hint === chunkR4AKAGZQ_js.RENDER_HINT.Food) {
+  if (product.render_hint === chunk6HCBOIZ4_js.RENDER_HINT.Food) {
     return "food" /* Food */;
   }
-  if (product.render_hint === chunkR4AKAGZQ_js.RENDER_HINT.Physical) {
+  if (product.render_hint === chunk6HCBOIZ4_js.RENDER_HINT.Physical) {
     return "physical" /* Physical */;
   }
   return "default" /* Default */;
@@ -11843,10 +12027,496 @@ function ResourcePicker({
     }
   );
 }
+function ChatWidget({
+  client: clientProp,
+  businessName = "Support",
+  greeting = "Hi there!",
+  subtitle = "Ask us anything \u2014 we typically reply in a few seconds.",
+  starters,
+  placeholder = "Type a message\u2026",
+  position = "bottom-right",
+  defaultOpen = false,
+  pollInterval,
+  className,
+  classNames
+}) {
+  const context = useOptionalCimplifyClient();
+  const client = clientProp ?? context?.client;
+  const [open, setOpen] = React10.useState(defaultOpen);
+  const [unread, setUnread] = React10.useState(0);
+  const { messages, isLoading, isSending, error, isActive, send, startConversation } = useChat({ client, pollInterval });
+  const prevCountRef = React10.useRef(messages.length);
+  React10.useEffect(() => {
+    if (!open && messages.length > prevCountRef.current) {
+      const newMessages = messages.slice(prevCountRef.current);
+      const incomingCount = newMessages.filter(
+        (m) => m.sender_type !== "customer"
+      ).length;
+      if (incomingCount > 0) setUnread((n) => n + incomingCount);
+    }
+    prevCountRef.current = messages.length;
+  }, [messages, open]);
+  const handleOpen = React10.useCallback(() => {
+    setOpen(true);
+    setUnread(0);
+  }, []);
+  const handleClose = React10.useCallback(() => setOpen(false), []);
+  const isLeft = position === "bottom-left";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "fixed bottom-6 z-[9999]",
+        isLeft ? "left-6" : "right-6",
+        className,
+        classNames?.root
+      ),
+      children: [
+        !open && /* @__PURE__ */ jsxRuntime.jsx(
+          Bubble,
+          {
+            unread,
+            onClick: handleOpen,
+            className: classNames?.bubble
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsx(
+          Panel,
+          {
+            businessName,
+            greeting,
+            subtitle,
+            starters,
+            placeholder,
+            messages,
+            isLoading,
+            isSending,
+            error,
+            isActive,
+            isLeft,
+            onClose: handleClose,
+            onSend: send,
+            onStartConversation: startConversation,
+            classNames
+          }
+        )
+      ]
+    }
+  );
+}
+function Bubble({
+  unread,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": "Open chat",
+      className: cn(
+        "relative flex h-14 w-14 items-center justify-center rounded-full",
+        "bg-foreground text-background shadow-lg",
+        "transition-transform duration-300 ease-out",
+        "hover:scale-[1.08] active:scale-95",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ChatIcon, { className: "h-6 w-6" }),
+        unread > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "absolute -right-0.5 -top-0.5 flex h-5 w-5 items-center justify-center",
+              "rounded-full bg-red-500 text-[10px] font-bold text-white",
+              "ring-2 ring-background"
+            ),
+            children: unread > 9 ? "9+" : unread
+          }
+        )
+      ]
+    }
+  );
+}
+function Panel({
+  businessName,
+  greeting,
+  subtitle,
+  starters,
+  placeholder,
+  messages,
+  isLoading,
+  isSending,
+  error,
+  isActive,
+  isLeft,
+  onClose,
+  onSend,
+  onStartConversation,
+  classNames
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col overflow-hidden rounded-2xl bg-background shadow-2xl",
+        "w-[400px] max-w-[calc(100vw-3rem)]",
+        "h-[min(600px,calc(100vh-6rem))]",
+        "animate-in fade-in slide-in-from-bottom-4 duration-300",
+        isLeft ? "origin-bottom-left" : "origin-bottom-right",
+        classNames?.panel
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Header,
+          {
+            businessName,
+            onClose,
+            className: classNames?.header
+          }
+        ),
+        !isActive && !isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+          Welcome,
+          {
+            greeting,
+            subtitle,
+            starters,
+            onStarter: onStartConversation,
+            className: classNames?.welcome
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          MessageList,
+          {
+            messages,
+            isLoading,
+            isSending,
+            className: classNames?.messages
+          }
+        ),
+        error != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-red-200 bg-red-50 px-4 py-2 text-xs text-red-600", children: "Something went wrong. Please try again." }),
+        (isActive || isLoading) && /* @__PURE__ */ jsxRuntime.jsx(
+          ChatInput,
+          {
+            placeholder,
+            isSending,
+            onSend,
+            className: classNames?.input
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 border-t border-border bg-background px-4 py-1.5 text-center text-[10px] text-muted-foreground", children: [
+          "Powered by",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: "Cimplify" })
+        ] })
+      ]
+    }
+  );
+}
+function Header({
+  businessName,
+  onClose,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-shrink-0 items-center gap-3 bg-foreground px-5 py-4 text-background",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-[10px] bg-white/15", children: /* @__PURE__ */ jsxRuntime.jsx(ChatIcon, { className: "h-5 w-5" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[15px] font-semibold leading-tight", children: businessName }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-xs text-white/60", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-[7px] w-[7px] flex-shrink-0 rounded-full bg-emerald-400" }),
+            "Online"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            "aria-label": "Close chat",
+            className: cn(
+              "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg",
+              "bg-white/10 text-white/70 transition-colors hover:bg-white/20 hover:text-white"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "h-[18px] w-[18px]" })
+          }
+        )
+      ]
+    }
+  );
+}
+function Welcome({
+  greeting,
+  subtitle,
+  starters,
+  onStarter,
+  className
+}) {
+  const defaultStarters = [
+    { icon: "\u{1F50D}", text: "Help me find a product" },
+    { icon: "\u{1F6D2}", text: "Check my cart" },
+    { icon: "\u{1F4E6}", text: "Track my order" }
+  ];
+  const items = starters ?? defaultStarters;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-1 flex-col items-center justify-center overflow-y-auto bg-muted/50 px-8 py-10 text-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-5 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(ChatIcon, { className: "h-7 w-7 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-xl font-bold text-foreground", children: greeting }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 max-w-[280px] text-sm leading-relaxed text-muted-foreground", children: subtitle }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-[300px] flex-col gap-2", children: items.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onStarter(s.text),
+            className: cn(
+              "flex items-center gap-3 rounded-xl border border-border bg-background px-4 py-3",
+              "text-left text-[13px] font-medium text-foreground",
+              "transition-all hover:-translate-y-px hover:border-foreground hover:shadow-sm"
+            ),
+            children: [
+              s.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-muted text-[15px]", children: s.icon }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: s.text })
+            ]
+          },
+          s.text
+        )) })
+      ]
+    }
+  );
+}
+function MessageList({
+  messages,
+  isLoading,
+  isSending,
+  className
+}) {
+  const bottomRef = React10.useRef(null);
+  React10.useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages.length, isSending]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-1 flex-col gap-1 overflow-y-auto bg-muted/50 px-5 py-5",
+        className
+      ),
+      children: [
+        isLoading && messages.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(TypingDots, {}) }),
+        messages.map((msg, i) => {
+          const isCustomer = msg.sender_type === "customer";
+          const prev = messages[i - 1];
+          const sameSenderAsPrev = prev?.sender_type === msg.sender_type;
+          const isOptimistic = msg.id.startsWith("opt_");
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            !sameSenderAsPrev && i > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "flex max-w-[85%]",
+                  isCustomer ? "ml-auto" : "mr-auto"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "rounded-2xl px-3.5 py-2.5 text-sm leading-relaxed",
+                      isCustomer ? "bg-foreground text-background" : "border border-border bg-background text-foreground",
+                      isCustomer ? sameSenderAsPrev ? "rounded-tr" : "rounded-br" : sameSenderAsPrev ? "rounded-tl" : "rounded-bl",
+                      isOptimistic && "opacity-70"
+                    ),
+                    children: [
+                      !isCustomer && !sameSenderAsPrev && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mb-1 inline-flex items-center gap-1 rounded bg-violet-100 px-1.5 py-0.5 text-[10px] font-semibold text-violet-600", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(SparkleIcon, { className: "h-[11px] w-[11px]" }),
+                        "AI"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap", children: msg.content })
+                    ]
+                  }
+                )
+              }
+            )
+          ] }, msg.id);
+        }),
+        isSending && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-auto mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(TypingDots, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: bottomRef })
+      ]
+    }
+  );
+}
+function ChatInput({
+  placeholder,
+  isSending,
+  onSend,
+  className
+}) {
+  const [value, setValue] = React10.useState("");
+  const textareaRef = React10.useRef(null);
+  const handleSend = React10.useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed || isSending) return;
+    setValue("");
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+    onSend(trimmed);
+  }, [value, isSending, onSend]);
+  const handleKeyDown = React10.useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+  const handleInput = React10.useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 100)}px`;
+  }, []);
+  const hasContent = value.trim().length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-shrink-0 items-end gap-2 border-t border-border bg-background px-4 py-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex flex-1 items-end rounded-xl border-[1.5px] border-transparent bg-muted px-1",
+              "transition-colors focus-within:border-foreground focus-within:bg-background"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "textarea",
+              {
+                ref: textareaRef,
+                value,
+                onChange: (e) => setValue(e.target.value),
+                onKeyDown: handleKeyDown,
+                onInput: handleInput,
+                placeholder,
+                rows: 1,
+                className: cn(
+                  "max-h-[100px] min-h-[20px] flex-1 resize-none bg-transparent px-2.5 py-2",
+                  "text-sm text-foreground outline-none placeholder:text-muted-foreground"
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleSend,
+            disabled: !hasContent || isSending,
+            "aria-label": "Send message",
+            className: cn(
+              "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[10px]",
+              "transition-all duration-200",
+              hasContent && !isSending ? "bg-foreground text-background hover:scale-105 active:scale-95" : "bg-muted text-muted-foreground"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(SendIcon, { className: "h-[18px] w-[18px]" })
+          }
+        )
+      ]
+    }
+  );
+}
+function TypingDots() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 px-4 py-3", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "h-[7px] w-[7px] animate-bounce rounded-full bg-muted-foreground/40",
+      style: { animationDelay: `${i * 160}ms` }
+    },
+    i
+  )) });
+}
+function ChatIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("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" })
+    }
+  );
+}
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+    }
+  );
+}
+function SendIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+        /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+      ]
+    }
+  );
+}
+function SparkleIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.5,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" })
+    }
+  );
+}
 
 Object.defineProperty(exports, "getVariantDisplayName", {
   enumerable: true,
-  get: function () { return chunkR4AKAGZQ_js.getVariantDisplayName; }
+  get: function () { return chunk6HCBOIZ4_js.getVariantDisplayName; }
 });
 exports.AccommodationCard = AccommodationCard;
 exports.Ad = Ad;
@@ -11872,6 +12542,7 @@ exports.CataloguePage = CataloguePage;
 exports.CatalogueTemplate = CatalogueTemplate;
 exports.CategoryFilter = CategoryFilter;
 exports.CategoryGrid = CategoryGrid;
+exports.ChatWidget = ChatWidget;
 exports.CheckoutPage = CheckoutPage;
 exports.CimplifyAccount = CimplifyAccount;
 exports.CimplifyCheckout = CimplifyCheckout;
@@ -11963,6 +12634,7 @@ exports.useBootstrap = useBootstrap;
 exports.useBundles = useBundles;
 exports.useCart = useCart;
 exports.useCategories = useCategories;
+exports.useChat = useChat;
 exports.useCheckout = useCheckout;
 exports.useCimplify = useCimplify;
 exports.useCimplifyClient = useCimplifyClient;