@customerhero/js 2.2.0 → 2.4.0

package/dist/index.js

@@ -7,7 +7,29 @@ var DEFAULTS = {
   position: "bottom-right",
   placeholderText: "Type your message...",
   welcomeMessage: "Hi! How can I help you today?",
-  title: "CustomerHero"
+  title: "CustomerHero",
+  // Appearance pack (B1–B6) defaults.
+  colorScheme: "light",
+  // Dark fallbacks used when the effective scheme is dark and no per-chatbot
+  // dark color is configured. Operators can — and should — override these.
+  primaryColorDark: "#A78BFA",
+  backgroundColorDark: "#0F172A",
+  textColorDark: "#E5E7EB",
+  size: "default",
+  cornerStyle: "rounded",
+  offsetBottom: 20,
+  offsetSide: 20,
+  zIndex: 99999
+};
+var SIZE_PRESETS = {
+  compact: { bubble: 48, width: 320, height: 480, fontSize: 13 },
+  default: { bubble: 56, width: 380, height: 520, fontSize: 14 },
+  large: { bubble: 64, width: 440, height: 600, fontSize: 15 }
+};
+var CORNER_RADIUS = {
+  soft: 8,
+  rounded: 16,
+  square: 0
 };
 
 // src/i18n/locales/en.ts
@@ -38,7 +60,10 @@ var en = {
   drop_files_here: "Drop files here",
   incident_dismiss: "Dismiss",
   incident_default_link_label: "Learn more",
-  attachment_unsupported_type: "Unsupported file type"
+  attachment_unsupported_type: "Unsupported file type",
+  attachment_open: "Open attachment",
+  attachment_image_alt: "Image attachment",
+  attachment_location: "Shared location"
 };
 
 // src/i18n/locales/es.ts
@@ -69,7 +94,10 @@ var es = {
   drop_files_here: "Suelta los archivos aqu\xED",
   incident_dismiss: "Descartar",
   incident_default_link_label: "M\xE1s informaci\xF3n",
-  attachment_unsupported_type: "Tipo de archivo no admitido"
+  attachment_unsupported_type: "Tipo de archivo no admitido",
+  attachment_open: "Abrir adjunto",
+  attachment_image_alt: "Imagen adjunta",
+  attachment_location: "Ubicaci\xF3n compartida"
 };
 
 // src/i18n/locales/pt-BR.ts
@@ -100,7 +128,10 @@ var ptBR = {
   drop_files_here: "Solte os arquivos aqui",
   incident_dismiss: "Dispensar",
   incident_default_link_label: "Saiba mais",
-  attachment_unsupported_type: "Tipo de arquivo n\xE3o suportado"
+  attachment_unsupported_type: "Tipo de arquivo n\xE3o suportado",
+  attachment_open: "Abrir anexo",
+  attachment_image_alt: "Imagem anexada",
+  attachment_location: "Localiza\xE7\xE3o compartilhada"
 };
 
 // src/i18n/locales/pt-PT.ts
@@ -131,7 +162,10 @@ var ptPT = {
   drop_files_here: "Largue os ficheiros aqui",
   incident_dismiss: "Dispensar",
   incident_default_link_label: "Saiba mais",
-  attachment_unsupported_type: "Tipo de ficheiro n\xE3o suportado"
+  attachment_unsupported_type: "Tipo de ficheiro n\xE3o suportado",
+  attachment_open: "Abrir anexo",
+  attachment_image_alt: "Imagem anexa",
+  attachment_location: "Localiza\xE7\xE3o partilhada"
 };
 
 // src/i18n/locales/fr.ts
@@ -162,7 +196,10 @@ var fr = {
   drop_files_here: "D\xE9posez les fichiers ici",
   incident_dismiss: "Ignorer",
   incident_default_link_label: "En savoir plus",
-  attachment_unsupported_type: "Type de fichier non pris en charge"
+  attachment_unsupported_type: "Type de fichier non pris en charge",
+  attachment_open: "Ouvrir la pi\xE8ce jointe",
+  attachment_image_alt: "Pi\xE8ce jointe (image)",
+  attachment_location: "Position partag\xE9e"
 };
 
 // src/i18n/locales/de.ts
@@ -193,7 +230,10 @@ var de = {
   drop_files_here: "Dateien hier ablegen",
   incident_dismiss: "Schlie\xDFen",
   incident_default_link_label: "Mehr erfahren",
-  attachment_unsupported_type: "Dateityp nicht unterst\xFCtzt"
+  attachment_unsupported_type: "Dateityp nicht unterst\xFCtzt",
+  attachment_open: "Anhang \xF6ffnen",
+  attachment_image_alt: "Bildanhang",
+  attachment_location: "Geteilter Standort"
 };
 
 // src/i18n/locales/it.ts
@@ -224,7 +264,10 @@ var it = {
   drop_files_here: "Trascina qui i file",
   incident_dismiss: "Chiudi",
   incident_default_link_label: "Scopri di pi\xF9",
-  attachment_unsupported_type: "Tipo di file non supportato"
+  attachment_unsupported_type: "Tipo di file non supportato",
+  attachment_open: "Apri allegato",
+  attachment_image_alt: "Allegato immagine",
+  attachment_location: "Posizione condivisa"
 };
 
 // src/i18n/locales/nl.ts
@@ -255,7 +298,10 @@ var nl = {
   drop_files_here: "Sleep bestanden hier",
   incident_dismiss: "Sluiten",
   incident_default_link_label: "Meer informatie",
-  attachment_unsupported_type: "Bestandstype niet ondersteund"
+  attachment_unsupported_type: "Bestandstype niet ondersteund",
+  attachment_open: "Bijlage openen",
+  attachment_image_alt: "Afbeeldingsbijlage",
+  attachment_location: "Gedeelde locatie"
 };
 
 // src/i18n/locales/pl.ts
@@ -286,7 +332,10 @@ var pl = {
   drop_files_here: "Upu\u015B\u0107 pliki tutaj",
   incident_dismiss: "Zamknij",
   incident_default_link_label: "Dowiedz si\u0119 wi\u0119cej",
-  attachment_unsupported_type: "Nieobs\u0142ugiwany typ pliku"
+  attachment_unsupported_type: "Nieobs\u0142ugiwany typ pliku",
+  attachment_open: "Otw\xF3rz za\u0142\u0105cznik",
+  attachment_image_alt: "Za\u0142\u0105cznik obrazu",
+  attachment_location: "Udost\u0119pniona lokalizacja"
 };
 
 // src/i18n/locales/tr.ts
@@ -317,7 +366,10 @@ var tr = {
   drop_files_here: "Dosyalar\u0131 buraya b\u0131rak",
   incident_dismiss: "Kapat",
   incident_default_link_label: "Daha fazla bilgi",
-  attachment_unsupported_type: "Desteklenmeyen dosya t\xFCr\xFC"
+  attachment_unsupported_type: "Desteklenmeyen dosya t\xFCr\xFC",
+  attachment_open: "Eki a\xE7",
+  attachment_image_alt: "Resim eki",
+  attachment_location: "Payla\u015F\u0131lan konum"
 };
 
 // src/i18n/locales/ar.ts
@@ -348,7 +400,10 @@ var ar = {
   drop_files_here: "\u0623\u0641\u0644\u062A \u0627\u0644\u0645\u0644\u0641\u0627\u062A \u0647\u0646\u0627",
   incident_dismiss: "\u0625\u063A\u0644\u0627\u0642",
   incident_default_link_label: "\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F",
-  attachment_unsupported_type: "\u0646\u0648\u0639 \u0627\u0644\u0645\u0644\u0641 \u063A\u064A\u0631 \u0645\u062F\u0639\u0648\u0645"
+  attachment_unsupported_type: "\u0646\u0648\u0639 \u0627\u0644\u0645\u0644\u0641 \u063A\u064A\u0631 \u0645\u062F\u0639\u0648\u0645",
+  attachment_open: "\u0641\u062A\u062D \u0627\u0644\u0645\u0631\u0641\u0642",
+  attachment_image_alt: "\u0635\u0648\u0631\u0629 \u0645\u0631\u0641\u0642\u0629",
+  attachment_location: "\u0645\u0648\u0642\u0639 \u0645\u0634\u062A\u0631\u0643"
 };
 
 // src/i18n/locales/ja.ts
@@ -379,7 +434,10 @@ var ja = {
   drop_files_here: "\u30D5\u30A1\u30A4\u30EB\u3092\u3053\u3053\u306B\u30C9\u30ED\u30C3\u30D7",
   incident_dismiss: "\u9589\u3058\u308B",
   incident_default_link_label: "\u8A73\u7D30\u3092\u898B\u308B",
-  attachment_unsupported_type: "\u30B5\u30DD\u30FC\u30C8\u3055\u308C\u3066\u3044\u306A\u3044\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F"
+  attachment_unsupported_type: "\u30B5\u30DD\u30FC\u30C8\u3055\u308C\u3066\u3044\u306A\u3044\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F",
+  attachment_open: "\u6DFB\u4ED8\u30D5\u30A1\u30A4\u30EB\u3092\u958B\u304F",
+  attachment_image_alt: "\u753B\u50CF\u306E\u6DFB\u4ED8\u30D5\u30A1\u30A4\u30EB",
+  attachment_location: "\u5171\u6709\u3055\u308C\u305F\u4F4D\u7F6E\u60C5\u5831"
 };
 
 // src/i18n/locales/ko.ts
@@ -410,7 +468,10 @@ var ko = {
   drop_files_here: "\uD30C\uC77C\uC744 \uC5EC\uAE30\uC5D0 \uB193\uAE30",
   incident_dismiss: "\uB2EB\uAE30",
   incident_default_link_label: "\uC790\uC138\uD788 \uC54C\uC544\uBCF4\uAE30",
-  attachment_unsupported_type: "\uC9C0\uC6D0\uB418\uC9C0 \uC54A\uB294 \uD30C\uC77C \uD615\uC2DD"
+  attachment_unsupported_type: "\uC9C0\uC6D0\uB418\uC9C0 \uC54A\uB294 \uD30C\uC77C \uD615\uC2DD",
+  attachment_open: "\uCCA8\uBD80 \uD30C\uC77C \uC5F4\uAE30",
+  attachment_image_alt: "\uC774\uBBF8\uC9C0 \uCCA8\uBD80 \uD30C\uC77C",
+  attachment_location: "\uACF5\uC720\uB41C \uC704\uCE58"
 };
 
 // src/i18n/locales/zh-CN.ts
@@ -441,7 +502,10 @@ var zhCN = {
   drop_files_here: "\u5C06\u6587\u4EF6\u62D6\u653E\u5230\u6B64\u5904",
   incident_dismiss: "\u5173\u95ED",
   incident_default_link_label: "\u4E86\u89E3\u66F4\u591A",
-  attachment_unsupported_type: "\u4E0D\u652F\u6301\u7684\u6587\u4EF6\u7C7B\u578B"
+  attachment_unsupported_type: "\u4E0D\u652F\u6301\u7684\u6587\u4EF6\u7C7B\u578B",
+  attachment_open: "\u6253\u5F00\u9644\u4EF6",
+  attachment_image_alt: "\u56FE\u7247\u9644\u4EF6",
+  attachment_location: "\u5171\u4EAB\u7684\u4F4D\u7F6E"
 };
 
 // src/i18n/locales/zh-TW.ts
@@ -472,7 +536,10 @@ var zhTW = {
   drop_files_here: "\u5C07\u6A94\u6848\u62D6\u653E\u5230\u6B64\u8655",
   incident_dismiss: "\u95DC\u9589",
   incident_default_link_label: "\u77AD\u89E3\u66F4\u591A",
-  attachment_unsupported_type: "\u4E0D\u652F\u63F4\u7684\u6A94\u6848\u985E\u578B"
+  attachment_unsupported_type: "\u4E0D\u652F\u63F4\u7684\u6A94\u6848\u985E\u578B",
+  attachment_open: "\u958B\u555F\u9644\u4EF6",
+  attachment_image_alt: "\u5716\u7247\u9644\u4EF6",
+  attachment_location: "\u5171\u4EAB\u7684\u4F4D\u7F6E"
 };
 
 // src/i18n/index.ts
@@ -975,7 +1042,14 @@ function startTriggersRuntime(options) {
 }
 
 // src/client.ts
+function clampInt(value, min, max, fallback) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+  return Math.max(min, Math.min(max, Math.trunc(value)));
+}
 function resolveConfig(userConfig, fetched) {
+  const launcherUser = userConfig.launcher ?? {};
+  const launcherFetched = fetched?.launcher ?? {};
+  const offsetUser = userConfig.offset ?? {};
   return {
     chatbotId: userConfig.chatbotId,
     apiBase: userConfig.apiBase ?? DEFAULTS.apiBase,
@@ -988,7 +1062,32 @@ function resolveConfig(userConfig, fetched) {
     title: userConfig.title ?? fetched?.title ?? DEFAULTS.title,
     avatarUrl: userConfig.avatarUrl ?? fetched?.avatarUrl,
     suggestedMessages: userConfig.suggestedMessages ?? fetched?.suggestedMessages ?? [],
-    stringOverrides: fetched?.stringOverrides
+    stringOverrides: fetched?.stringOverrides,
+    // Appearance pack. Color palette + size + corner style + launcher all
+    // come from the server widget_config (with host-side override). The
+    // *runtime* knobs — colorScheme, offset, zIndex — are host-only because
+    // they depend on the page the widget is embedded in, not the chatbot.
+    primaryColorDark: userConfig.primaryColorDark ?? fetched?.primaryColorDark,
+    backgroundColorDark: userConfig.backgroundColorDark ?? fetched?.backgroundColorDark,
+    textColorDark: userConfig.textColorDark ?? fetched?.textColorDark,
+    size: userConfig.size ?? fetched?.size ?? DEFAULTS.size,
+    cornerStyle: userConfig.cornerStyle ?? fetched?.cornerStyle ?? DEFAULTS.cornerStyle,
+    launcher: {
+      iconUrl: launcherUser.iconUrl ?? launcherFetched.iconUrl,
+      label: launcherUser.label ?? launcherFetched.label,
+      showOnlineDot: launcherUser.showOnlineDot ?? launcherFetched.showOnlineDot ?? false
+    },
+    colorScheme: userConfig.colorScheme ?? DEFAULTS.colorScheme,
+    offset: {
+      bottom: clampInt(offsetUser.bottom, 0, 1e3, DEFAULTS.offsetBottom),
+      side: clampInt(offsetUser.side, 0, 1e3, DEFAULTS.offsetSide)
+    },
+    zIndex: clampInt(userConfig.zIndex, 0, 2e9, DEFAULTS.zIndex),
+    // Defaults to true — the widget shows the attach button unless the
+    // chatbot explicitly opts out via widget_config or the host passes
+    // allowAttachments=false. Server still enforces the same flag at the
+    // upload endpoint either way.
+    allowAttachments: userConfig.allowAttachments ?? fetched?.allowAttachments ?? true
   };
 }
 function sanitizeIncidentBanner(input) {
@@ -1078,9 +1177,40 @@ var CustomerHeroChat = class {
       pendingTriggerId: null,
       pendingPrefill: null,
       incidentBanner: null,
-      incidentBannerDismissed: false
+      incidentBannerDismissed: false,
+      readOnly: false
     };
   }
+  /**
+   * Mark the config as loaded and put the client into read-only preview
+   * mode without hitting the API. Used by `@customerhero/react/preview` to
+   * render the widget against a host-supplied config (the dashboard preview
+   * pane). Public API consumers should not call this.
+   *
+   * Pass a config to re-resolve and update the rendered colors/size/launcher
+   * in place. Callers should reuse the same client instance across config
+   * changes so the open animation only fires once.
+   *
+   * @internal
+   */
+  __seedForPreview(config, extras) {
+    const resolved = config ? resolveConfig(config) : this.state.config;
+    if (config) this.userConfig = config;
+    const seededMessages = resolved.welcomeMessage ? [{ role: "bot", content: resolved.welcomeMessage }] : [];
+    const sanitizedBanner = extras && "banner" in extras ? sanitizeIncidentBanner(extras.banner ?? null) : this.state.incidentBanner;
+    this.setState({
+      config: resolved,
+      configLoaded: true,
+      configError: null,
+      readOnly: true,
+      isOpen: true,
+      messages: seededMessages,
+      incidentBanner: sanitizedBanner,
+      // Reset the dismissed flag so toggling the banner on in the dashboard
+      // re-renders it after a previous preview-side dismiss.
+      incidentBannerDismissed: false
+    });
+  }
   // ── Proactive engagement state ─────────────────────────────────────
   triggersRuntime = null;
   preChatFormSubmitted = false;
@@ -1189,12 +1319,15 @@ var CustomerHeroChat = class {
     const { chatbotId, apiBase } = this.state.config;
     const { conversationId } = this.state;
     if (!conversationId) return;
+    const readToken = this.storage?.getItem(`ch_conv_token_${chatbotId}`);
+    const messagesUrl = `${apiBase}/api/chat/${chatbotId}/messages/${conversationId}`;
     try {
       const response = await fetch(
-        `${apiBase}/api/chat/${chatbotId}/messages/${conversationId}`
+        readToken ? `${messagesUrl}?t=${encodeURIComponent(readToken)}` : messagesUrl
       );
       if (!response.ok) {
         this.storage?.removeItem(`ch_conv_${chatbotId}`);
+        this.storage?.removeItem(`ch_conv_token_${chatbotId}`);
         this.setState({ conversationId: null });
         return;
       }
@@ -1206,7 +1339,8 @@ var CustomerHeroChat = class {
         content: m.content,
         ...m.sources ? { sources: m.sources } : {},
         ...m.blocks ? { blocks: m.blocks } : {},
-        ...m.suggestions ? { suggestions: m.suggestions } : {}
+        ...m.suggestions ? { suggestions: m.suggestions } : {},
+        ...m.attachments?.length ? { attachments: m.attachments } : {}
       }));
       const lastBotIndex = findLastIndex(
         messages,
@@ -1226,6 +1360,7 @@ var CustomerHeroChat = class {
     }
   }
   async sendMessage(message, options) {
+    if (this.state.readOnly) return;
     const trimmed = message.trim();
     const attachmentTokens = options?.attachmentTokens ?? [];
     if (!trimmed || this.state.isLoading) return;
@@ -1309,6 +1444,16 @@ var CustomerHeroChat = class {
             }
             break;
           }
+          case "read-token": {
+            const tok = safeParse(evt.data);
+            if (tok?.readToken) {
+              this.storage?.setItem(
+                `ch_conv_token_${chatbotId}`,
+                tok.readToken
+              );
+            }
+            break;
+          }
           case "token": {
             const tok = safeParse(evt.data);
             const text = tok?.text ?? "";
@@ -1421,6 +1566,9 @@ var CustomerHeroChat = class {
       await this.loadHistory();
       return;
     }
+    const decisionBlock = this.state.messages[targetIndex].blocks?.find(
+      (b) => b.type === "action_confirmation" && b.pendingToolCallId === pendingId
+    );
     const messages = this.state.messages.slice();
     const original = messages[targetIndex];
     messages[targetIndex] = {
@@ -1429,7 +1577,8 @@ var CustomerHeroChat = class {
     };
     this.setState({ messages, error: null });
     const { chatbotId, apiBase } = this.state.config;
-    const url = `${apiBase}/api/chat/${chatbotId}/tool-calls/${pendingId}/decision`;
+    const href = decision === "approve" ? decisionBlock?.approveHref : decisionBlock?.cancelHref;
+    const url = href ? `${apiBase}${href}` : `${apiBase}/api/chat/${chatbotId}/tool-calls/${pendingId}/decision`;
     try {
       const response = await fetch(url, {
         method: "POST",
@@ -1461,6 +1610,16 @@ var CustomerHeroChat = class {
             }
             break;
           }
+          case "read-token": {
+            const tok = safeParse(evt.data);
+            if (tok?.readToken) {
+              this.storage?.setItem(
+                `ch_conv_token_${chatbotId}`,
+                tok.readToken
+              );
+            }
+            break;
+          }
           case "token": {
             const tok = safeParse(evt.data);
             const text = tok?.text ?? "";
@@ -1567,6 +1726,7 @@ var CustomerHeroChat = class {
   reset() {
     const { chatbotId, welcomeMessage } = this.state.config;
     this.storage?.removeItem(`ch_conv_${chatbotId}`);
+    this.storage?.removeItem(`ch_conv_token_${chatbotId}`);
     this.setState({
       messages: welcomeMessage ? [{ role: "bot", content: welcomeMessage }] : [],
       conversationId: null,
@@ -1734,6 +1894,7 @@ var CustomerHeroChat = class {
     };
     const { chatbotId, welcomeMessage } = this.state.config;
     this.storage?.removeItem(`ch_conv_${chatbotId}`);
+    this.storage?.removeItem(`ch_conv_token_${chatbotId}`);
     this.setState({
       messages: welcomeMessage ? [{ role: "bot", content: welcomeMessage }] : [],
       conversationId: null,
@@ -1778,6 +1939,33 @@ function pickExtension(mime) {
   return "jpg";
 }
 
+// src/theme.ts
+function resolveScheme(colorScheme, prefersDark) {
+  if (colorScheme === "dark") return "dark";
+  if (colorScheme === "light") return "light";
+  return prefersDark ? "dark" : "light";
+}
+function effectiveColors(config, scheme) {
+  if (scheme === "dark") {
+    return {
+      primary: config.primaryColorDark ?? DEFAULTS.primaryColorDark,
+      background: config.backgroundColorDark ?? DEFAULTS.backgroundColorDark,
+      text: config.textColorDark ?? DEFAULTS.textColorDark
+    };
+  }
+  return {
+    primary: config.primaryColor,
+    background: config.backgroundColor,
+    text: config.textColor
+  };
+}
+function sizePreset(size) {
+  return SIZE_PRESETS[size];
+}
+function panelRadius(cornerStyle) {
+  return CORNER_RADIUS[cornerStyle];
+}
+
 // src/screenshot.ts
 var ScreenshotCancelled = class extends Error {
   constructor(message = "Screenshot cancelled") {
@@ -1911,8 +2099,10 @@ async function canvasToBlob(canvas, quality) {
   });
 }
 export {
+  CORNER_RADIUS,
   CustomerHeroChat,
   DEFAULTS,
+  SIZE_PRESETS,
   SUPPORTED_LOCALES,
   ScreenshotCancelled,
   ScreenshotUnavailable,
@@ -1920,9 +2110,13 @@ export {
   captureScreenshot,
   createTranslator,
   detectLocale,
+  effectiveColors,
   evaluate,
   isRtlLocale,
+  panelRadius,
   pickFire,
   resolveLocale,
+  resolveScheme,
+  sizePreset,
   startTriggersRuntime
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customerhero/js",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "private": false,
   "description": "Framework-agnostic JavaScript client for the CustomerHero chat widget.",
   "keywords": [