@cimplify/sdk 0.90.0 → 0.93.0

package/dist/react.mjs

@@ -1,12 +1,12 @@
 "use client";
-import { DURATION_UNIT, getVariantDisplayName, INPUT_FIELD_TYPE, PRODUCT_TYPE, BOUNDARY_KIND, resolveGallery, RENDER_HINT, DEFAULT_CDN_BASE_URL } from './chunk-OZDDHSIB.mjs';
-export { getVariantDisplayName } from './chunk-OZDDHSIB.mjs';
+import { DURATION_UNIT, getVariantDisplayName, INPUT_FIELD_TYPE, isMultiDayService, serviceBillingMultiplier, PRODUCT_TYPE, BOUNDARY_KIND, resolveGallery, RENDER_HINT, DEFAULT_CDN_BASE_URL } from './chunk-RRBY35TJ.mjs';
+export { getVariantDisplayName } from './chunk-RRBY35TJ.mjs';
 import { messagePreview } from './chunk-U4MW6PYU.mjs';
 export { messagePreview, splitGenUIContent } from './chunk-U4MW6PYU.mjs';
-import { createCimplifyClient } from './chunk-2UDEWILL.mjs';
-import { ELEMENT_TYPES, EVENT_TYPES, startSignIn } from './chunk-ZU4ZRYUR.mjs';
+import { SESSION_CLAIMED, SESSION_CLEARED, createCimplifyClient, MUTATION_ERROR } from './chunk-FKARGZK3.mjs';
+import { generateIdempotencyKey, ELEMENT_TYPES, EVENT_TYPES, startSignIn } from './chunk-VUSHG3HA.mjs';
 import { parsePrice, formatMoney, formatPrice, getProductCurrency, getUnitPriceAtQuantity, isOnSale, getDiscountPercentage, getBasePrice, getPriceRange, formatPriceRange } from './chunk-KFLGQGMC.mjs';
-import { isSupportedCurrency } from './chunk-K5EN2W2Q.mjs';
+import { isSupportedCurrency, CimplifyError } from './chunk-K5EN2W2Q.mjs';
 import './chunk-3G6RQLXK.mjs';
 import React14, { createContext, lazy, memo, Suspense, useContext, useMemo, useRef, useState, useCallback, useEffect, useId, useSyncExternalStore } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -723,6 +723,7 @@ function mapServerCart(serverCart, fallbackCurrency) {
       scheduledStart: item.scheduled_start || void 0,
       scheduledEnd: item.scheduled_end || void 0,
       staffId: item.staff_id || void 0,
+      units: item.units || void 0,
       lineType: item.line_type,
       confirmationCode: item.confirmation_code || void 0,
       serviceStatus: item.service_status || void 0,
@@ -781,7 +782,7 @@ async function syncFromServer(entry) {
   return next;
 }
 function emitMutationError(entry, operation, opId, idempotencyKey, error) {
-  entry.client.events.emit("mutation:error", {
+  entry.client.events.emit(MUTATION_ERROR, {
     service: "cart",
     operation,
     opId,
@@ -821,6 +822,12 @@ function getOrCreateStore(params) {
     syncTail: Promise.resolve(),
     failedOpRemovers: /* @__PURE__ */ new Set()
   };
+  client.events.on(SESSION_CLAIMED, () => {
+    if (entry.initialized) void syncFromServer(entry);
+  });
+  client.events.on(SESSION_CLEARED, () => {
+    if (entry.initialized) void syncFromServer(entry);
+  });
   cartStores.set(storeKey, entry);
   return entry;
 }
@@ -879,7 +886,8 @@ async function performAddItem(entry, product, quantity, options) {
     specialInstructions: normalizedOptions.specialInstructions,
     scheduledStart: normalizedOptions.scheduledStart,
     scheduledEnd: normalizedOptions.scheduledEnd,
-    staffId: normalizedOptions.staffId
+    staffId: normalizedOptions.staffId,
+    units: normalizedOptions.units
   });
   const idempotencyKey = `idem_${typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}_${Math.random().toString(36).slice(2, 10)}`}`;
   const patch = { kind: "add_item", tempItem, lineKey };
@@ -901,6 +909,7 @@ async function performAddItem(entry, product, quantity, options) {
         scheduled_end: normalizedOptions.scheduledEnd,
         staff_id: normalizedOptions.staffId,
         resource_id: normalizedOptions.resourceId,
+        units: normalizedOptions.units,
         customer_inputs: normalizedOptions.customerInputs
       },
       { idempotencyKey }
@@ -5454,14 +5463,24 @@ function useServices(options = {}) {
 }
 
 // src/react/hooks/use-available-slots.ts
+function narrowingUnits(units) {
+  return units != null && units > 1 ? units : void 0;
+}
 var slotsQuery = createCachedQuery({
   name: "useAvailableSlots",
-  key: (client, options) => cacheKey(client.getPublicKey(), options.serviceId, options.date, options.participantCount),
+  key: (client, options) => cacheKey(
+    client.getPublicKey(),
+    options.serviceId,
+    options.date,
+    options.participantCount,
+    narrowingUnits(options.units)
+  ),
   fetch: async (client, options) => {
     const result = await client.scheduling.getAvailableSlots({
       service_id: options.serviceId,
       date: options.date,
-      participant_count: options.participantCount
+      participant_count: options.participantCount,
+      units: narrowingUnits(options.units)
     });
     if (!result.ok) throw result.error;
     return result.value;
@@ -5478,6 +5497,9 @@ function useAvailableSlots(serviceId, date, options = {}) {
 }
 
 // src/react/hooks/use-service-availability.ts
+function narrowingUnits2(units) {
+  return units != null && units > 1 ? units : void 0;
+}
 var serviceAvailabilityQuery = createCachedQuery({
   name: "useServiceAvailability",
   key: (client, options) => cacheKey(
@@ -5485,7 +5507,8 @@ var serviceAvailabilityQuery = createCachedQuery({
     options.serviceId,
     options.startDate,
     options.endDate,
-    options.participantCount
+    options.participantCount,
+    narrowingUnits2(options.units)
   ),
   fetch: async (client, options) => {
     const result = await client.scheduling.getServiceAvailability({
@@ -5493,7 +5516,8 @@ var serviceAvailabilityQuery = createCachedQuery({
       start_date: options.startDate,
       end_date: options.endDate,
       location_id: options.locationId,
-      participant_count: options.participantCount
+      participant_count: options.participantCount,
+      units: narrowingUnits2(options.units)
     });
     if (!result.ok) throw result.error;
     return result.value.availability;
@@ -5865,6 +5889,20 @@ var IDLE_TIMEOUT_MS = 6e4;
 var WS_MAX_RECONNECT_ATTEMPTS = 10;
 var WS_PATH = "/api/v1/support/conversation/ws";
 var AWAIT_REPLY_TIMEOUT_MS = 3e4;
+function mergeMessages(prev, incoming) {
+  const ids = new Set(prev.map((m) => m.id));
+  const fresh = incoming.filter((m) => !ids.has(m.id));
+  if (fresh.length === 0) return prev;
+  const merged = [...prev, ...fresh].sort(
+    (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+  );
+  const confirmed = new Set(
+    merged.filter((m) => !m.id.startsWith("opt_") && m.client_id).map((m) => m.client_id)
+  );
+  return merged.filter(
+    (m) => !(m.id.startsWith("opt_") && m.client_id && confirmed.has(m.client_id))
+  );
+}
 function useChat(options = {}) {
   const context = useOptionalCimplifyClient();
   const client = options.client ?? context?.client;
@@ -5877,6 +5915,9 @@ function useChat(options = {}) {
   const [awaitingReply, setAwaitingReply] = useState(false);
   const [seenAt, setSeenAt] = useState(null);
   const [mayHaveOlder, setMayHaveOlder] = useState(false);
+  const [claimedAs, setClaimedAs] = useState(
+    () => client?.support.claimedCustomerName ?? null
+  );
   const pollRef = useRef(null);
   const lastActivityRef = useRef(Date.now());
   const openedRef = useRef(false);
@@ -5888,6 +5929,7 @@ function useChat(options = {}) {
   const aiEnabledRef = useRef(false);
   const humanRequestedRef = useRef(false);
   const awaitReplyTimerRef = useRef(null);
+  const claimUnsubRef = useRef(null);
   messagesRef.current = messages;
   clientRef.current = client;
   humanRequestedRef.current = humanRequested;
@@ -5913,18 +5955,22 @@ function useChat(options = {}) {
       if (incoming.some((m) => m.sender_type === "bot" || m.sender_type === "agent")) {
         stopAwaitingReply();
       }
-      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;
-      });
+      if (incoming.length > 0) lastActivityRef.current = Date.now();
+      setMessages((prev) => mergeMessages(prev, incoming));
     },
     [stopAwaitingReply]
   );
+  const lastConfirmedMessage = useCallback(() => {
+    const list = messagesRef.current;
+    for (let i = list.length - 1; i >= 0; i--) {
+      if (!list[i].id.startsWith("opt_")) return list[i];
+    }
+    return void 0;
+  }, []);
   const fetchNewMessages = useCallback(async () => {
     const c = clientRef.current;
     if (!c) return;
-    const last = messagesRef.current[messagesRef.current.length - 1];
+    const last = lastConfirmedMessage();
     const result = await c.support.getMessages({
       after: last?.created_at,
       limit: 50
@@ -5932,29 +5978,61 @@ function useChat(options = {}) {
     if (result.ok && result.value.length > 0) {
       appendMessages(result.value);
     }
-  }, [appendMessages]);
-  const pollMessages = useCallback(async () => {
-    if (Date.now() - lastActivityRef.current > IDLE_TIMEOUT_MS) return;
-    await fetchNewMessages();
-  }, [fetchNewMessages]);
+  }, [appendMessages, lastConfirmedMessage]);
   const startPolling = 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 idle = () => Date.now() - lastActivityRef.current > IDLE_TIMEOUT_MS;
+    let current = idle() ? pollIdleInterval : pollInterval;
+    const tick = () => {
+      void fetchNewMessages().then(() => {
+        const desired = idle() ? pollIdleInterval : pollInterval;
+        if (desired !== current && pollRef.current) {
+          current = desired;
+          clearInterval(pollRef.current);
+          pollRef.current = setInterval(tick, current);
+        }
+      });
+    };
+    pollRef.current = setInterval(tick, current);
+  }, [fetchNewMessages, pollInterval, pollIdleInterval]);
   const stopPolling = useCallback(() => {
     if (pollRef.current) {
       clearInterval(pollRef.current);
       pollRef.current = null;
     }
   }, []);
+  const resyncConversation = useCallback(async () => {
+    const c = clientRef.current;
+    if (!c || !openedRef.current) return;
+    const result = await c.support.openConversation();
+    if (!result.ok) return;
+    const snapshot = result.value.messages;
+    setMessages((prev) => {
+      const snapshotIds = new Set(snapshot.map((m) => m.id));
+      const tail = snapshot.length > 0 ? new Date(snapshot[snapshot.length - 1].created_at).getTime() : 0;
+      const extras = prev.filter(
+        (m) => !snapshotIds.has(m.id) && (m.id.startsWith("opt_") || new Date(m.created_at).getTime() > tail)
+      );
+      return mergeMessages(snapshot, extras);
+    });
+    aiEnabledRef.current = result.value.conversation.ai_enabled;
+    setHumanRequested(result.value.conversation.needs_human_review ?? false);
+    setSeenAt(result.value.conversation.team_read_at ?? null);
+    setMayHaveOlder(result.value.messages.length >= 50);
+  }, []);
   const connectWebSocket = useCallback(() => {
     const c = clientRef.current;
     if (!c || typeof WebSocket === "undefined") {
       startPolling();
       return;
     }
+    if (wsReconnectTimerRef.current) {
+      clearTimeout(wsReconnectTimerRef.current);
+      wsReconnectTimerRef.current = null;
+    }
     if (wsRef.current) {
+      wsRef.current.onclose = null;
+      wsRef.current.onmessage = null;
       wsRef.current.close();
       wsRef.current = null;
     }
@@ -5978,10 +6056,12 @@ function useChat(options = {}) {
           else stopAwaitingReply();
         } else if (envelope.type === "resync") {
           const latest = envelope.latest_message_at;
-          const last = messagesRef.current[messagesRef.current.length - 1];
+          const last = lastConfirmedMessage();
           if (latest && (!last || new Date(last.created_at).getTime() < new Date(latest).getTime())) {
             fetchNewMessages();
           }
+        } else if (envelope.type === "rekey") {
+          void resyncConversation();
         }
       } catch {
       }
@@ -5993,6 +6073,7 @@ function useChat(options = {}) {
       if (wsReconnectAttemptRef.current < WS_MAX_RECONNECT_ATTEMPTS) {
         const attempt = wsReconnectAttemptRef.current++;
         const delay = Math.min(1e3 * Math.pow(2, attempt) + Math.random() * 500, 3e4);
+        if (wsReconnectTimerRef.current) clearTimeout(wsReconnectTimerRef.current);
         wsReconnectTimerRef.current = setTimeout(connectWebSocket, delay);
       } else {
         startPolling();
@@ -6001,14 +6082,91 @@ function useChat(options = {}) {
     ws.onerror = () => {
     };
     wsRef.current = ws;
-  }, [appendMessages, startPolling, stopPolling, fetchNewMessages]);
+  }, [appendMessages, startPolling, stopPolling, fetchNewMessages, resyncConversation, lastConfirmedMessage]);
+  const resetConversation = useCallback(() => {
+    stopPolling();
+    if (wsReconnectTimerRef.current) {
+      clearTimeout(wsReconnectTimerRef.current);
+      wsReconnectTimerRef.current = null;
+    }
+    if (wsRef.current) {
+      wsRef.current.onclose = null;
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    wsReconnectAttemptRef.current = 0;
+    openedRef.current = false;
+    stopAwaitingReply();
+    setMessages([]);
+    setConversationOpened(false);
+    setHumanRequested(false);
+    setSeenAt(null);
+    setMayHaveOlder(false);
+    setError(null);
+    setClaimedAs(null);
+  }, [stopPolling, stopAwaitingReply]);
+  const hydrateConversation = useCallback(
+    (value) => {
+      const c = clientRef.current;
+      setMessages(value.messages);
+      setConversationOpened(true);
+      aiEnabledRef.current = value.conversation.ai_enabled;
+      setHumanRequested(value.conversation.needs_human_review ?? false);
+      setSeenAt(value.conversation.team_read_at ?? null);
+      setMayHaveOlder(value.messages.length >= 50);
+      setClaimedAs(c?.support.claimedCustomerName ?? null);
+      connectWebSocket();
+    },
+    [connectWebSocket]
+  );
+  const openIfExisting = useCallback(async () => {
+    const c = clientRef.current;
+    if (!c || openedRef.current) return;
+    openedRef.current = true;
+    setIsLoading(true);
+    const result = await c.support.peekConversation();
+    if (result.ok && result.value) {
+      hydrateConversation(result.value);
+    } else {
+      openedRef.current = false;
+    }
+    setIsLoading(false);
+  }, [hydrateConversation]);
+  const watchSessionClaims = useCallback(() => {
+    const c = clientRef.current;
+    if (!c || claimUnsubRef.current) return;
+    const unsubClaimed = c.events.on(SESSION_CLAIMED, (event) => {
+      setClaimedAs(event.customerName || c.support.claimedCustomerName || null);
+      if (!openedRef.current) {
+        void openIfExisting();
+        return;
+      }
+      connectWebSocket();
+      void resyncConversation();
+    });
+    const unsubCleared = c.events.on(SESSION_CLEARED, resetConversation);
+    claimUnsubRef.current = () => {
+      unsubClaimed();
+      unsubCleared();
+    };
+  }, [connectWebSocket, resyncConversation, resetConversation, openIfExisting]);
+  const signOut = useCallback(async () => {
+    const c = clientRef.current;
+    if (!c) return false;
+    const result = await c.link.logout();
+    return result.ok;
+  }, []);
   useEffect(() => {
+    watchSessionClaims();
     return () => {
       if (pollRef.current) clearInterval(pollRef.current);
       if (wsReconnectTimerRef.current) clearTimeout(wsReconnectTimerRef.current);
       if (awaitReplyTimerRef.current) clearTimeout(awaitReplyTimerRef.current);
+      claimUnsubRef.current?.();
+      claimUnsubRef.current = null;
       if (wsRef.current) {
         wsRef.current.onclose = null;
+        wsRef.current.onmessage = null;
         wsRef.current.close();
       }
     };
@@ -6020,19 +6178,13 @@ function useChat(options = {}) {
     setError(null);
     const result = await client.support.openConversation();
     if (result.ok) {
-      setMessages(result.value.messages);
-      setConversationOpened(true);
-      aiEnabledRef.current = result.value.conversation.ai_enabled;
-      setHumanRequested(result.value.conversation.needs_human_review ?? false);
-      setSeenAt(result.value.conversation.team_read_at ?? null);
-      setMayHaveOlder(result.value.messages.length >= 50);
-      connectWebSocket();
+      hydrateConversation(result.value);
     } else {
       openedRef.current = false;
       setError(result.error);
     }
     setIsLoading(false);
-  }, [client, connectWebSocket]);
+  }, [client, hydrateConversation]);
   const send = useCallback(
     async (content, opts) => {
       const attachments = opts?.attachments ?? [];
@@ -6044,7 +6196,8 @@ function useChat(options = {}) {
         if (!openedRef.current) return false;
       }
       const replyTo = opts?.replyTo;
-      const optimisticId = `opt_${Date.now()}`;
+      const clientId = generateIdempotencyKey();
+      const optimisticId = `opt_${clientId}`;
       const optimistic = {
         id: optimisticId,
         sender_type: "customer",
@@ -6052,6 +6205,7 @@ function useChat(options = {}) {
         content_type: attachments.length > 0 ? "image" : "text",
         attachments,
         metadata: {},
+        client_id: clientId,
         // Same shape the server echoes back, so the bubble doesn't reflow
         // when the confirmed message replaces it.
         reply_to: replyTo ? {
@@ -6064,6 +6218,7 @@ function useChat(options = {}) {
       setMessages((prev) => [...prev, optimistic]);
       setIsSending(true);
       const result = await client.support.sendMessage(content.trim(), {
+        idempotencyKey: clientId,
         replyToMessageId: replyTo?.id,
         attachments: attachments.length > 0 ? attachments : void 0
       });
@@ -6134,11 +6289,7 @@ function useChat(options = {}) {
     const older = result.value;
     setMayHaveOlder(older.length >= 50);
     if (older.length === 0) return false;
-    setMessages((prev) => {
-      const ids = new Set(prev.map((m) => m.id));
-      const fresh = older.filter((m) => !ids.has(m.id));
-      return fresh.length > 0 ? [...fresh, ...prev] : prev;
-    });
+    setMessages((prev) => mergeMessages(prev, older));
     return true;
   }, []);
   const agentArrived = messages.some((m) => m.sender_type === "agent");
@@ -6152,11 +6303,14 @@ function useChat(options = {}) {
     awaitingReply,
     seenAt,
     mayHaveOlder,
+    claimedAs,
+    signOut,
     send,
     startConversation,
     react,
     requestHuman,
-    loadOlder
+    loadOlder,
+    openIfExisting
   };
 }
 var ElementsContext = createContext({
@@ -7886,6 +8040,177 @@ function VolumePricing({
     }
   );
 }
+function createPlacesSessionToken() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return `places_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+}
+var MIN_QUERY_LENGTH = 3;
+var DEBOUNCE_MS = 300;
+var BLUR_CLOSE_MS = 120;
+function AddressAutocomplete({
+  value,
+  onSelect,
+  onDirty,
+  placeholder,
+  required,
+  autoFocus,
+  id,
+  className,
+  classNames
+}) {
+  const clientContext = useOptionalCimplifyClient();
+  const [inputText, setInputText] = React14.useState(value?.formatted_address ?? "");
+  const [suggestions, setSuggestions] = React14.useState([]);
+  const [isOpen, setIsOpen] = React14.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React14.useState(-1);
+  const debounceRef = React14.useRef(null);
+  const seqRef = React14.useRef(0);
+  const sessionTokenRef = React14.useRef(createPlacesSessionToken());
+  const blurTimeoutRef = React14.useRef(null);
+  React14.useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
+      seqRef.current += 1;
+    };
+  }, []);
+  const fetchSuggestions = React14.useCallback(
+    async (query) => {
+      const client = clientContext?.client;
+      if (!client || query.length < MIN_QUERY_LENGTH) {
+        setSuggestions([]);
+        setIsOpen(false);
+        return;
+      }
+      const seq = ++seqRef.current;
+      const result = await client.places.autocomplete(query, sessionTokenRef.current);
+      if (seqRef.current !== seq) return;
+      if (result.ok && result.value.predictions.length > 0) {
+        setSuggestions(result.value.predictions);
+        setHighlightedIndex(0);
+        setIsOpen(true);
+      } else {
+        setSuggestions([]);
+        setIsOpen(false);
+      }
+    },
+    [clientContext]
+  );
+  const handleInputChange = (nextValue) => {
+    setInputText(nextValue);
+    onDirty?.();
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), DEBOUNCE_MS);
+  };
+  const selectSuggestion = React14.useCallback(
+    async (suggestion) => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
+      const fallback = suggestion.description.split(",")[0]?.trim() || suggestion.description;
+      setInputText(fallback);
+      setSuggestions([]);
+      setIsOpen(false);
+      const client = clientContext?.client;
+      if (!client) return;
+      const result = await client.places.details(suggestion.place_id, sessionTokenRef.current);
+      sessionTokenRef.current = createPlacesSessionToken();
+      if (result.ok) {
+        const d = result.value;
+        const address = {
+          formatted_address: d.formatted_address || fallback,
+          street_address: d.street_address,
+          apartment: d.apartment,
+          city: d.city,
+          region: d.region,
+          postal_code: d.postal_code,
+          country: d.country,
+          latitude: d.latitude,
+          longitude: d.longitude,
+          place_id: d.place_id
+        };
+        setInputText(address.formatted_address);
+        onSelect(address);
+      }
+    },
+    [clientContext, onSelect]
+  );
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-address-autocomplete": true, className: cn("relative", className, classNames?.root), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "text",
+        value: inputText,
+        onChange: (e) => handleInputChange(e.target.value),
+        onFocus: () => {
+          if (suggestions.length > 0) setIsOpen(true);
+        },
+        onBlur: () => {
+          blurTimeoutRef.current = setTimeout(() => setIsOpen(false), BLUR_CLOSE_MS);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Escape") {
+            setIsOpen(false);
+            return;
+          }
+          if (!isOpen || suggestions.length === 0) return;
+          if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setHighlightedIndex((i) => i < suggestions.length - 1 ? i + 1 : 0);
+          } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setHighlightedIndex((i) => i > 0 ? i - 1 : suggestions.length - 1);
+          } else if (e.key === "Enter" && highlightedIndex >= 0) {
+            e.preventDefault();
+            void selectSuggestion(suggestions[highlightedIndex]);
+          }
+        },
+        placeholder: placeholder ?? "Search for an address...",
+        required,
+        autoFocus,
+        autoComplete: "off",
+        "aria-autocomplete": "list",
+        "aria-expanded": isOpen && suggestions.length > 0,
+        "data-cimplify-address-input": true,
+        className: classNames?.input
+      }
+    ),
+    isOpen && suggestions.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "listbox",
+        "data-cimplify-address-list": true,
+        className: cn(
+          "absolute left-0 right-0 top-full z-20 mt-1 overflow-hidden rounded-md border border-border bg-background shadow-lg",
+          classNames?.list
+        ),
+        children: suggestions.map((s, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": i === highlightedIndex,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              void selectSuggestion(s);
+            },
+            "data-cimplify-address-option": true,
+            className: cn(
+              "block w-full px-3 py-2.5 text-left text-sm transition-colors",
+              i === highlightedIndex ? "bg-muted text-foreground" : "text-foreground hover:bg-muted/70",
+              classNames?.option,
+              i === highlightedIndex && classNames?.activeOption
+            ),
+            children: s.description
+          },
+          s.place_id
+        ))
+      }
+    )
+  ] });
+}
 function parseValue(value) {
   if (!value) return void 0;
   const date = parseISO(value);
@@ -8646,129 +8971,18 @@ function AddressInput({
   classNames,
   inputClass
 }) {
-  const clientContext = useOptionalCimplifyClient();
   const addr = value && typeof value === "object" ? value : null;
-  const [inputText, setInputText] = React14.useState(addr?.formatted_address ?? "");
-  const [suggestions, setSuggestions] = React14.useState([]);
-  const [isOpen, setIsOpen] = React14.useState(false);
-  const [highlightedIndex, setHighlightedIndex] = React14.useState(-1);
-  const debounceRef = React14.useRef(null);
-  const seqRef = React14.useRef(0);
-  const sessionTokenRef = React14.useRef(createSessionToken());
-  const blurTimeoutRef = React14.useRef(null);
-  React14.useEffect(() => {
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
-      seqRef.current += 1;
-    };
-  }, []);
-  const fetchSuggestions = React14.useCallback(async (query) => {
-    const client = clientContext?.client;
-    if (!client || query.length < 3) {
-      setSuggestions([]);
-      setIsOpen(false);
-      return;
-    }
-    const seq = ++seqRef.current;
-    const result = await client.places.autocomplete(query, sessionTokenRef.current);
-    if (seqRef.current !== seq) return;
-    if (result.ok && result.value.predictions.length > 0) {
-      setSuggestions(result.value.predictions);
-      setHighlightedIndex(0);
-      setIsOpen(true);
-    } else {
-      setSuggestions([]);
-      setIsOpen(false);
-    }
-  }, [clientContext]);
-  const handleInputChange = (nextValue) => {
-    setInputText(nextValue);
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);
-  };
-  const selectSuggestion = React14.useCallback(async (suggestion) => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
-    const fallback = suggestion.description.split(",")[0]?.trim() || suggestion.description;
-    setInputText(fallback);
-    setSuggestions([]);
-    setIsOpen(false);
-    const client = clientContext?.client;
-    if (!client) return;
-    const result = await client.places.details(suggestion.place_id, sessionTokenRef.current);
-    sessionTokenRef.current = createSessionToken();
-    if (result.ok) {
-      const d = result.value;
-      const addressValue = {
-        formatted_address: d.formatted_address || fallback,
-        street_address: d.street_address,
-        apartment: d.apartment,
-        city: d.city,
-        region: d.region,
-        postal_code: d.postal_code,
-        country: d.country,
-        latitude: d.latitude,
-        longitude: d.longitude,
-        place_id: d.place_id
-      };
-      setInputText(addressValue.formatted_address);
-      onValueChange(addressValue);
-    }
-  }, [clientContext, onValueChange]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2 relative", classNames?.addressInput), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", classNames?.addressInput), children: [
     /* @__PURE__ */ jsx(
-      "input",
+      AddressAutocomplete,
       {
-        type: "text",
-        value: inputText,
-        onChange: (e) => handleInputChange(e.target.value),
-        onFocus: () => {
-          if (suggestions.length > 0) setIsOpen(true);
-        },
-        onBlur: () => {
-          blurTimeoutRef.current = setTimeout(() => setIsOpen(false), 120);
-        },
-        onKeyDown: (e) => {
-          if (e.key === "Escape") {
-            setIsOpen(false);
-            return;
-          }
-          if (!isOpen || suggestions.length === 0) return;
-          if (e.key === "ArrowDown") {
-            e.preventDefault();
-            setHighlightedIndex((i) => i < suggestions.length - 1 ? i + 1 : 0);
-          } else if (e.key === "ArrowUp") {
-            e.preventDefault();
-            setHighlightedIndex((i) => i > 0 ? i - 1 : suggestions.length - 1);
-          } else if (e.key === "Enter" && highlightedIndex >= 0) {
-            e.preventDefault();
-            void selectSuggestion(suggestions[highlightedIndex]);
-          }
-        },
+        value: addr,
+        onSelect: onValueChange,
         placeholder: field.placeholder || "Search for an address...",
         required: field.is_required,
-        autoComplete: "off",
-        "aria-autocomplete": "list",
-        "aria-expanded": isOpen && suggestions.length > 0,
-        className: inputClass
+        classNames: { input: inputClass }
       }
     ),
-    isOpen && suggestions.length > 0 && /* @__PURE__ */ jsx("div", { role: "listbox", className: "absolute left-0 right-0 top-full z-20 mt-1 overflow-hidden rounded-md border border-border bg-background shadow-lg", children: suggestions.map((s, i) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        role: "option",
-        "aria-selected": i === highlightedIndex,
-        onMouseDown: (e) => {
-          e.preventDefault();
-          void selectSuggestion(s);
-        },
-        className: cn("block w-full px-3 py-2.5 text-left text-sm transition-colors", i === highlightedIndex ? "bg-muted text-foreground" : "text-foreground hover:bg-muted/70"),
-        children: s.description
-      },
-      s.place_id
-    )) }),
     addr && /* @__PURE__ */ jsx(
       "input",
       {
@@ -8788,121 +9002,22 @@ function LocationInput({
   classNames,
   inputClass
 }) {
-  const clientContext = useOptionalCimplifyClient();
   const loc = value && typeof value === "object" ? value : null;
-  const [inputText, setInputText] = React14.useState(loc?.label ?? "");
-  const [suggestions, setSuggestions] = React14.useState([]);
-  const [isOpen, setIsOpen] = React14.useState(false);
-  const [highlightedIndex, setHighlightedIndex] = React14.useState(-1);
-  const debounceRef = React14.useRef(null);
-  const seqRef = React14.useRef(0);
-  const sessionTokenRef = React14.useRef(createSessionToken());
-  const blurTimeoutRef = React14.useRef(null);
-  React14.useEffect(() => {
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
-      seqRef.current += 1;
-    };
-  }, []);
-  const fetchSuggestions = React14.useCallback(async (query) => {
-    const client = clientContext?.client;
-    if (!client || query.length < 3) {
-      setSuggestions([]);
-      setIsOpen(false);
-      return;
-    }
-    const seq = ++seqRef.current;
-    const result = await client.places.autocomplete(query, sessionTokenRef.current);
-    if (seqRef.current !== seq) return;
-    if (result.ok && result.value.predictions.length > 0) {
-      setSuggestions(result.value.predictions);
-      setHighlightedIndex(0);
-      setIsOpen(true);
-    } else {
-      setSuggestions([]);
-      setIsOpen(false);
-    }
-  }, [clientContext]);
-  const handleInputChange = (nextValue) => {
-    setInputText(nextValue);
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => void fetchSuggestions(nextValue.trim()), 300);
-  };
-  const selectSuggestion = React14.useCallback(async (suggestion) => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
-    const label = suggestion.description.split(",")[0]?.trim() || suggestion.description;
-    setInputText(label);
-    setSuggestions([]);
-    setIsOpen(false);
-    const client = clientContext?.client;
-    if (!client) return;
-    const result = await client.places.details(suggestion.place_id, sessionTokenRef.current);
-    sessionTokenRef.current = createSessionToken();
-    if (result.ok) {
-      const d = result.value;
-      onValueChange({
-        latitude: d.latitude,
-        longitude: d.longitude,
-        label: d.formatted_address || label
-      });
-      setInputText(d.formatted_address || label);
-    }
-  }, [clientContext, onValueChange]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative", classNames?.locationInput), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(classNames?.locationInput), children: [
     /* @__PURE__ */ jsx(
-      "input",
+      AddressAutocomplete,
       {
-        type: "text",
-        value: inputText,
-        onChange: (e) => handleInputChange(e.target.value),
-        onFocus: () => {
-          if (suggestions.length > 0) setIsOpen(true);
-        },
-        onBlur: () => {
-          blurTimeoutRef.current = setTimeout(() => setIsOpen(false), 120);
-        },
-        onKeyDown: (e) => {
-          if (e.key === "Escape") {
-            setIsOpen(false);
-            return;
-          }
-          if (!isOpen || suggestions.length === 0) return;
-          if (e.key === "ArrowDown") {
-            e.preventDefault();
-            setHighlightedIndex((i) => i < suggestions.length - 1 ? i + 1 : 0);
-          } else if (e.key === "ArrowUp") {
-            e.preventDefault();
-            setHighlightedIndex((i) => i > 0 ? i - 1 : suggestions.length - 1);
-          } else if (e.key === "Enter" && highlightedIndex >= 0) {
-            e.preventDefault();
-            void selectSuggestion(suggestions[highlightedIndex]);
-          }
-        },
+        value: loc ? { formatted_address: loc.label ?? "", latitude: loc.latitude, longitude: loc.longitude } : null,
+        onSelect: (address) => onValueChange({
+          latitude: address.latitude,
+          longitude: address.longitude,
+          label: address.formatted_address
+        }),
         placeholder: field.placeholder || "Search for a location...",
         required: field.is_required,
-        autoComplete: "off",
-        "aria-autocomplete": "list",
-        "aria-expanded": isOpen && suggestions.length > 0,
-        className: inputClass
+        classNames: { input: inputClass }
       }
     ),
-    isOpen && suggestions.length > 0 && /* @__PURE__ */ jsx("div", { role: "listbox", className: "absolute left-0 right-0 top-full z-20 mt-1 overflow-hidden rounded-md border border-border bg-background shadow-lg", children: suggestions.map((s, i) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        role: "option",
-        "aria-selected": i === highlightedIndex,
-        onMouseDown: (e) => {
-          e.preventDefault();
-          void selectSuggestion(s);
-        },
-        className: cn("block w-full px-3 py-2.5 text-left text-sm transition-colors", i === highlightedIndex ? "bg-muted text-foreground" : "text-foreground hover:bg-muted/70"),
-        children: s.description
-      },
-      s.place_id
-    )) }),
     loc && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-1", children: [
       loc.latitude.toFixed(4),
       ", ",
@@ -9033,12 +9148,6 @@ function SignatureInput({
     !sig?.data_url && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: field.placeholder || "Draw your signature above" })
   ] });
 }
-function createSessionToken() {
-  if (typeof crypto !== "undefined" && crypto.randomUUID) {
-    return crypto.randomUUID();
-  }
-  return `places_${Date.now()}_${Math.random().toString(16).slice(2)}`;
-}
 function getTimeOfDay(timeStr) {
   const hour = parseInt(timeStr.split("T").pop()?.split(":")[0] ?? timeStr.split(":")[0], 10);
   if (hour < 12) return "morning";
@@ -9284,6 +9393,7 @@ function DateSlotPicker({
   serviceId,
   daysToShow = 7,
   participantCount,
+  units,
   selectedSlot,
   onSlotSelect,
   availability: availabilityProp,
@@ -9318,6 +9428,7 @@ function DateSlotPicker({
     dateRange.endDate,
     {
       participantCount,
+      units,
       enabled: availabilityProp === void 0
     }
   );
@@ -9475,6 +9586,7 @@ function ProductCustomizer({
   const [specialInstructions, setSpecialInstructions] = useState("");
   const [selectedSlot, setSelectedSlot] = useState(null);
   const [selectedStaffId, setSelectedStaffId] = useState(null);
+  const [unitsCount, setUnitsCount] = useState(1);
   const cart = useCart();
   const currency = getProductCurrency(product);
   const productType = product.type || "product";
@@ -9482,6 +9594,7 @@ function ProductCustomizer({
   const isBundle = productType === "bundle";
   const isDigital = productType === "digital";
   const isService = productType === "service";
+  const offersUnits = isService && isMultiDayService(product);
   const isStandard = !isComposite && !isBundle;
   const hasVariants = isStandard && product.variants && product.variants.length > 0;
   const hasAddOns = isStandard && product.add_ons && product.add_ons.length > 0;
@@ -9503,6 +9616,7 @@ function ProductCustomizer({
     setSpecialInstructions("");
     setSelectedSlot(null);
     setSelectedStaffId(null);
+    setUnitsCount(1);
   }, [product.id, product.min_order_quantity]);
   const slotStaff = useMemo(
     () => (selectedSlot?.available_staff ?? []).map((member) => ({
@@ -9592,7 +9706,17 @@ function ProductCustomizer({
     if (perUnit === void 0 || perUnit === null) return void 0;
     return parsePrice(perUnit) * quantity;
   }, [quote, quantity]);
-  const displayTotalPrice = quotedTotalPrice ?? localTotalPrice;
+  const displayTotalPrice = useMemo(() => {
+    const total = quotedTotalPrice ?? localTotalPrice;
+    const multiplier = serviceBillingMultiplier(product, {
+      quantity,
+      units: unitsCount,
+      scheduledStart: selectedSlot?.start_time,
+      scheduledEnd: selectedSlot?.end_time
+    });
+    if (multiplier === null) return total;
+    return total / Math.max(1, quantity) * multiplier;
+  }, [quotedTotalPrice, localTotalPrice, product, quantity, unitsCount, selectedSlot]);
   const handleVariantChange = useCallback(
     (variantId, variant) => {
       setSelectedVariantId(variantId);
@@ -9624,7 +9748,8 @@ function ProductCustomizer({
         scheduledStart: selectedSlot.start_time,
         scheduledEnd: selectedSlot.end_time,
         staffId: selectedStaffId ?? selectedSlot.available_staff?.[0]?.staff_id,
-        resourceId: selectedSlot.available_resources?.[0]?.resource_id
+        resourceId: selectedSlot.available_resources?.[0]?.resource_id,
+        units: unitsCount > 1 ? unitsCount : void 0
       } : {},
       customerInputs: Object.keys(customerInputValues).length > 0 ? Object.entries(customerInputValues).filter(([, v]) => v !== void 0 && v !== "").map(([fieldId, value]) => ({ field_id: fieldId, value })) : void 0,
       specialInstructions: specialInstructions.trim() || void 0
@@ -9645,7 +9770,7 @@ function ProductCustomizer({
     } finally {
       setIsSubmitting(false);
     }
-  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, selectedStaffId, isSubmitting, onAddToCart, cart]);
+  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, selectedStaffId, unitsCount, isSubmitting, onAddToCart, cart]);
   return /* @__PURE__ */ jsxs("div", { "data-cimplify-customizer": true, className: cn("space-y-6", className, classNames?.root), children: [
     isComposite && product.groups && product.composite_id && /* @__PURE__ */ jsx(
       CompositeSelector,
@@ -9682,9 +9807,17 @@ function ProductCustomizer({
           setSelectedStaffId(null);
         },
         participantCount: quantity,
-        currency
+        units: offersUnits ? unitsCount : void 0,
+        currency,
+        schedulingMode: product.scheduling_mode ?? (offersUnits ? "multi_day" : "intraday"),
+        durationUnit: product.duration_unit,
+        durationValue: product.duration_value
       }
     ),
+    offersUnits && /* @__PURE__ */ jsxs("div", { "data-cimplify-customizer-units": true, className: classNames?.units, children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3", children: "Units" }),
+      /* @__PURE__ */ jsx(QuantitySelector, { value: unitsCount, onChange: setUnitsCount, min: 1 })
+    ] }),
     isService && slotStaff.length > 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-customizer-staff": true, children: [
       /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3", children: "Choose your specialist" }),
       /* @__PURE__ */ jsx(
@@ -11738,18 +11871,18 @@ function RentalServiceCard({
   const currency = getProductCurrency(product);
   const hasDeposit = product.deposit_type && product.deposit_type !== "none" && product.deposit_amount;
   const unit = product.duration_unit ? UNIT_LABELS2[product.duration_unit] || product.duration_unit : "day";
+  const priceUnit = product.price_basis === "per_person" ? "guest" : product.price_basis === "flat" ? "" : unit;
   const status = product.inventory_status;
   return /* @__PURE__ */ jsxs(CardShell, { product, renderLink, className, children: [
     /* @__PURE__ */ jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
-      /* @__PURE__ */ jsxs("span", { className: "absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm", children: [
+      priceUnit && /* @__PURE__ */ jsxs("span", { className: "absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm", children: [
         "Per ",
-        unit
+        priceUnit
       ] }),
       /* @__PURE__ */ jsxs("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: [
         /* @__PURE__ */ jsx(Price, { amount: product.default_price, currency }),
-        "/",
-        unit
+        priceUnit && `/${priceUnit}`
       ] }),
       product.general_service_capacity != null && product.general_service_capacity > 1 && /* @__PURE__ */ jsxs("span", { className: "absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-blue-50/90 text-blue-700 border border-blue-200/50 backdrop-blur px-2 py-0.5 rounded-md", children: [
         "Up to ",
@@ -12343,6 +12476,18 @@ function ProductGrid({
   ] });
 }
 
+// src/react/utils/attachment.ts
+var IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png", ".webp", ".gif", ".bmp", ".svg"];
+function safeAttachmentUrl(url) {
+  return /^https?:\/\//i.test(url) ? url : null;
+}
+function isImageAttachment(attachment) {
+  if (attachment.mime_type?.startsWith("image/")) return true;
+  if (attachment.mime_type) return false;
+  const path = attachment.url.split("?")[0].split("#")[0].toLowerCase();
+  return IMAGE_EXTENSIONS.some((extension) => path.endsWith(extension));
+}
+
 // src/react/utils/boundary-labels.ts
 var PRESET_LABELS = {
   check_in_out: { start: "Check-in", end: "Check-out" },
@@ -13524,6 +13669,7 @@ function BookingPage({
   const [selectedDate, setSelectedDate] = useState(null);
   const [selectedStaffId, setSelectedStaffId] = useState(null);
   const [selectedResourceId, setSelectedResourceId] = useState(null);
+  const [bookingUnits, setBookingUnits] = useState(1);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState(null);
   const hasResourceStep = resources && resources.length > 0;
@@ -13617,7 +13763,8 @@ function BookingPage({
           scheduledStart: selectedSlot.start_time,
           scheduledEnd: selectedSlot.end_time,
           staffId: selectedStaffId || void 0,
-          resourceId: selectedResourceId || void 0
+          resourceId: selectedResourceId || void 0,
+          units: bookingUnits > 1 ? bookingUnits : void 0
         });
         onBooked?.(selectedSlot, selectedStaffId);
       }
@@ -13713,6 +13860,31 @@ function BookingPage({
     ] }),
     step === STEP.CONFIRM && selectedSlot && /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-step": "confirm", className: classNames?.step, children: [
       /* @__PURE__ */ jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Confirm your booking" }),
+      /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-units": true, className: classNames?.summaryRow, children: [
+        /* @__PURE__ */ jsx("span", { children: "Units" }),
+        /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-units-stepper": true, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-cimplify-booking-units-decrement": true,
+              onClick: () => setBookingUnits((current) => Math.max(1, current - 1)),
+              disabled: bookingUnits <= 1,
+              children: "\u2212"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { "data-cimplify-booking-units-value": true, children: bookingUnits }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-cimplify-booking-units-increment": true,
+              onClick: () => setBookingUnits((current) => current + 1),
+              children: "+"
+            }
+          )
+        ] })
+      ] }),
       /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-summary": true, className: classNames?.summary, children: [
         /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
           /* @__PURE__ */ jsx("span", { children: "Service" }),
@@ -16955,6 +17127,7 @@ function partitionMessages(messages) {
   }
   return { bubbles, reactionsByTarget };
 }
+var MAX_ATTACHMENT_BYTES = 5 * 1024 * 1024;
 function ChatWidget({
   client: clientProp,
   businessName = "Support",
@@ -16971,7 +17144,8 @@ function ChatWidget({
   const context = useOptionalCimplifyClient();
   const client = clientProp ?? context?.client;
   const [open, setOpen] = useState(defaultOpen);
-  const [unread, setUnread] = useState(0);
+  const [readAt, setReadAt] = useState(null);
+  const [attachError, setAttachError] = useState(null);
   const {
     messages,
     isLoading,
@@ -16980,16 +17154,31 @@ function ChatWidget({
     seenAt,
     error,
     isActive,
+    claimedAs,
+    signOut,
     send,
     react,
-    startConversation
+    startConversation,
+    openIfExisting
   } = useChat({ client, pollInterval });
   const showTyping = isSending || awaitingReply;
   const attachPhoto = useCallback(
     async (file) => {
-      if (!client || !file.type.startsWith("image/") || file.size > 5 * 1024 * 1024) return;
+      if (!client) return;
+      setAttachError(null);
+      if (!file.type.startsWith("image/")) {
+        setAttachError(new CimplifyError("invalid_attachment", "Only photos can be attached."));
+        return;
+      }
+      if (file.size > MAX_ATTACHMENT_BYTES) {
+        setAttachError(new CimplifyError("attachment_too_large", "Photos must be under 5MB."));
+        return;
+      }
       const uploaded = await client.uploads.upload(file);
-      if (!uploaded.ok) return;
+      if (!uploaded.ok) {
+        setAttachError(uploaded.error);
+        return;
+      }
       const attachment = {
         upload_id: uploaded.value.id,
         url: uploaded.value.url,
@@ -17001,22 +17190,28 @@ function ChatWidget({
     },
     [client, send]
   );
-  const prevCountRef = useRef(messages.length);
-  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 handleSend = useCallback(
+    (content) => {
+      setAttachError(null);
+      return send(content);
+    },
+    [send]
+  );
+  const unread = open ? 0 : messages.filter(
+    (m) => m.sender_type !== "customer" && (!readAt || m.created_at > readAt)
+  ).length;
+  useState(() => {
+    if (defaultOpen) void openIfExisting();
+  });
   const handleOpen = useCallback(() => {
     setOpen(true);
-    setUnread(0);
-  }, []);
-  const handleClose = useCallback(() => setOpen(false), []);
+    void openIfExisting();
+  }, [openIfExisting]);
+  const handleClose = useCallback(() => {
+    const newest = messages[messages.length - 1];
+    setReadAt(newest?.created_at ?? null);
+    setOpen(false);
+  }, [messages]);
   const isLeft = position === "bottom-left";
   return /* @__PURE__ */ jsxs(
     "div",
@@ -17049,11 +17244,13 @@ function ChatWidget({
             isSending,
             isTyping: showTyping,
             seenAt,
-            error,
+            error: error ?? attachError,
             isActive,
             isLeft,
+            claimedAs,
+            onSignOut: () => void signOut(),
             onClose: handleClose,
-            onSend: send,
+            onSend: handleSend,
             onReact: react,
             onAttach: attachPhoto,
             onStartConversation: startConversation,
@@ -17113,6 +17310,8 @@ function Panel({
   error,
   isActive,
   isLeft,
+  claimedAs,
+  onSignOut,
   onClose,
   onSend,
   onReact,
@@ -17136,6 +17335,8 @@ function Panel({
           Header,
           {
             businessName,
+            claimedAs,
+            onSignOut,
             onClose,
             className: classNames?.header
           }
@@ -17160,7 +17361,7 @@ function Panel({
             className: classNames?.messages
           }
         ),
-        error != null && /* @__PURE__ */ 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." }),
+        error != null && /* @__PURE__ */ jsx("div", { className: "border-t border-red-200 bg-red-50 px-4 py-2 text-xs text-red-600", children: error.userMessage || "Something went wrong. Please try again." }),
         (isActive || isLoading) && /* @__PURE__ */ jsx(
           ChatInput,
           {
@@ -17182,6 +17383,8 @@ function Panel({
 }
 function Header({
   businessName,
+  claimedAs,
+  onSignOut,
   onClose,
   className
 }) {
@@ -17196,7 +17399,22 @@ function Header({
         /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-[10px] bg-white/15", children: /* @__PURE__ */ jsx(ChatIcon, { className: "h-5 w-5" }) }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx("div", { className: "truncate text-[15px] font-semibold leading-tight", children: businessName }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-white/60", children: [
+          claimedAs ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 truncate text-xs text-white/60", children: [
+            /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+              "Chatting as ",
+              claimedAs
+            ] }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onSignOut,
+                className: "flex-shrink-0 underline underline-offset-2 hover:text-white",
+                children: "Not you?"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-white/60", children: [
             /* @__PURE__ */ jsx("span", { className: "h-[7px] w-[7px] flex-shrink-0 rounded-full bg-emerald-400" }),
             "Online"
           ] })
@@ -17280,10 +17498,6 @@ function MessageList({
   onReact,
   className
 }) {
-  const bottomRef = useRef(null);
-  useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages.length, isSending]);
   const { bubbles, reactionsByTarget } = partitionMessages(messages);
   const seenMessageId = lastSeenCustomerMessageId(bubbles, seenAt);
   return /* @__PURE__ */ jsxs(
@@ -17357,11 +17571,13 @@ function MessageList({
                             ]
                           }
                         ),
-                        msg.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-1.5", msg.content && "mb-1.5"), children: msg.attachments.map(
-                          (attachment, index) => attachment.mime_type?.startsWith("image/") ? /* @__PURE__ */ jsx("a", { href: attachment.url, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx(
+                        msg.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-1.5", msg.content && "mb-1.5"), children: msg.attachments.map((attachment, index) => {
+                          const url = safeAttachmentUrl(attachment.url);
+                          if (!url) return null;
+                          return attachment.mime_type?.startsWith("image/") ? /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx(
                             "img",
                             {
-                              src: attachment.url,
+                              src: url,
                               alt: attachment.filename ?? "Photo",
                               loading: "lazy",
                               className: "max-h-48 max-w-full rounded-lg object-cover"
@@ -17369,15 +17585,15 @@ function MessageList({
                           ) }, index) : /* @__PURE__ */ jsx(
                             "a",
                             {
-                              href: attachment.url,
+                              href: url,
                               target: "_blank",
                               rel: "noreferrer",
                               className: "truncate text-xs underline",
                               children: attachment.filename ?? "Attachment"
                             },
                             index
-                          )
-                        ) }),
+                          );
+                        }) }),
                         isCustomer ? msg.content && /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap", children: msg.content }) : /* @__PURE__ */ jsx(
                           ChatMarkdown,
                           {
@@ -17403,7 +17619,15 @@ function MessageList({
           ] }, msg.id);
         }),
         isSending && /* @__PURE__ */ jsx("div", { className: "mr-auto mt-1", children: /* @__PURE__ */ jsx(TypingDots, {}) }),
-        /* @__PURE__ */ jsx("div", { ref: bottomRef })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (node) => {
+              node?.scrollIntoView({ behavior: "smooth" });
+            }
+          },
+          `${messages.length}:${isSending}`
+        )
       ]
     }
   );
@@ -19450,4 +19674,4 @@ async function genUIFingerprint(manifest) {
   return Array.from(new Uint8Array(digest)).map((byte) => byte.toString(16).padStart(2, "0")).join("").slice(0, 16);
 }
 
-export { AccommodationCard, AccountContent, AccountDashboardPage, AccountHero, AccountIdentityStrip, AccountLineItem, AccountLineItems, AccountNav, AccountOrderDetailPage, AccountOrderView, AccountOrdersPage, AccountShell, AccountSidebar, AccountSignedOutPrompt, AccountSubscriptionDetailPage, AccountSubscriptionsPage, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BackLink, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingSummary, BookingsPage, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, Button, CIMPLIFY_GENUI_REGISTRY, CardImage, CardShell, CardVariant, CartDrawer, CartDrawerProvider, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, ChatMarkdown, ChatWidget, CheckIcon, CheckoutPage, CimplifyCheckout, CimplifyProvider, CimplifySignInButton, CimplifyUserButton, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, ContextCard, ContinuityCard, CurrencySelector, CustomAttributesTable, CustomerInputFields, DashboardIcon, DashboardIcon20, DatePicker, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DeliveryTracker, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, EmptyState, ErrorState, FeaturedCollectionLayout, FilterTabs, FoodProductCard, FoodProductLayout, GenUIView, HappeningCard, IdentityIcon, IdentityOfframp, InventoryBadge, ItemsCard, LeaseServiceCard, LineItemDetails, LocationPicker, MediaGallery, MetadataStringList, MobileAccountShell, MobileBackButton, MobileMoreButton, MobileTabBar, NextDeliveryCard, OrderDetailHeader, OrderDetailMetaPipe, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderList, OrderRow, OrderSummary, OrderTimeline, OrderTotals, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductModel3D, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, RichText, SaleBadge, SalePrice, SaleTeaser, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, Section, SectionMore, ServiceProductLayout, SessionMessageBanner, SignOutIcon, Skeleton, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, Status, StoreNav, StoreVideo, SubscriptionCard, SubscriptionList, SubscriptionRow, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, Toast, TwoColumnGrid, VariantSelector, VolumePricing, WelcomeCard, WholesaleProductCard, WholesaleProductLayout, WishlistButton, clearOrdersCache, cn, defaultBoundaryKind, genUICatalog, genUIFingerprint, genUIManifest, genUIManifestJson, getBoundaryLabels, isTerminalOrderStatus, parse as parseGenUIProgram, partitionMessages, prefetchProduct, prefetchProducts, resolveBoundaryKind, roomToResource, sanitizeRichTextHtml, stripHtmlToText, toAccountLineItem, toAccountLineItems, toAccountOrderView, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useDeliveryOptions, useElements, useElementsReady, useFxRate, useGenUIProgram, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useStoreCredit, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, AccountContent, AccountDashboardPage, AccountHero, AccountIdentityStrip, AccountLineItem, AccountLineItems, AccountNav, AccountOrderDetailPage, AccountOrderView, AccountOrdersPage, AccountShell, AccountSidebar, AccountSignedOutPrompt, AccountSubscriptionDetailPage, AccountSubscriptionsPage, Ad, AdProvider, AddOnSelector, AddressAutocomplete, AddressElement, AuthElement, AvailabilityBadge, BackLink, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingSummary, BookingsPage, BoxIcon24, BundleProductCard, BundleProductLayout, BundleSelector, Button, CIMPLIFY_GENUI_REGISTRY, CardImage, CardShell, CardVariant, CartDrawer, CartDrawerProvider, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, ChatMarkdown, ChatWidget, CheckIcon, CheckoutPage, CimplifyCheckout, CimplifyProvider, CimplifySignInButton, CimplifyUserButton, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, ContextCard, ContinuityCard, CurrencySelector, CustomAttributesTable, CustomerInputFields, DashboardIcon, DashboardIcon20, DatePicker, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DeliveryTracker, DeliveryTruckIcon, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, EmptyState, ErrorState, FeaturedCollectionLayout, FilterTabs, FoodProductCard, FoodProductLayout, GenUIView, HappeningCard, IdentityIcon, IdentityOfframp, InventoryBadge, ItemsCard, LeaseServiceCard, LineItemDetails, LocationPicker, MediaGallery, MetadataStringList, MobileAccountShell, MobileBackButton, MobileMoreButton, MobileTabBar, NextDeliveryCard, OrderDetailHeader, OrderDetailMetaPipe, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderList, OrderRow, OrderSummary, OrderTimeline, OrderTotals, OrdersIcon, OrdersIcon20, OvenIcon, PackageIcon, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductModel3D, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, RichText, SaleBadge, SalePrice, SaleTeaser, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, Section, SectionMore, ServiceProductLayout, SessionMessageBanner, SignOutIcon, Skeleton, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, Status, StoreNav, StoreVideo, SubscriptionCard, SubscriptionList, SubscriptionRow, SubscriptionsIcon, SubscriptionsIcon20, TagPills, TimePicker, Toast, TwoColumnGrid, VariantSelector, VolumePricing, WelcomeCard, WholesaleProductCard, WholesaleProductLayout, WishlistButton, clearOrdersCache, cn, createPlacesSessionToken, defaultBoundaryKind, genUICatalog, genUIFingerprint, genUIManifest, genUIManifestJson, getBoundaryLabels, isImageAttachment, isTerminalOrderStatus, parse as parseGenUIProgram, partitionMessages, prefetchProduct, prefetchProducts, resolveBoundaryKind, roomToResource, safeAttachmentUrl, sanitizeRichTextHtml, stripHtmlToText, toAccountLineItem, toAccountLineItems, toAccountOrderView, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCimplifySession, useCollection, useCollections, useDeals, useDeliveryFee, useDeliveryOptions, useElements, useElementsReady, useFxRate, useGenUIProgram, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useStoreCredit, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };