@banbox/chat 1.0.9 → 1.0.11

package/dist/index.d.cts

@@ -316,8 +316,18 @@ type ChatRootProps = {
      * <ChatRoot adapter={adapter} theme="admin" />
      */
     theme?: ChatTheme;
+    /**
+     * Keys of footer toolbar actions to hide.
+     *
+     * Available keys: "attachment" | "emoji" | "businessCard" | "addressCard" | "translate"
+     *
+     * @example
+     * // Hide the Delivery Address button in the seller app:
+     * <ChatRoot hiddenActionKeys={["addressCard"]} ... />
+     */
+    hiddenActionKeys?: string[];
 };
-declare function ChatRoot({ adapter, uiCallbacks, theme }: ChatRootProps): React$1.ReactPortal | null;
+declare function ChatRoot({ adapter, uiCallbacks, theme, hiddenActionKeys }: ChatRootProps): React$1.ReactPortal | null;
 
 declare function ChatUIProvider({ children }: {
     children: React__default.ReactNode;
@@ -471,7 +481,13 @@ type ChatMessageItemProps = {
     status?: string;
     className?: string;
     onReply?: () => void;
-    onTranslate?: () => void;
+    /**
+     * Optional async translator. Receives the original text and returns the
+     * translated string. When omitted the translate button is still shown but
+     * does nothing (good for demo mode).
+     * Example: `onTranslate={(t) => googleTranslate(t, "bn")}`
+     */
+    onTranslate?: (text: string) => string | undefined;
     initialSrc?: string;
 };
 declare const ChatMessageItem: React__default.FC<ChatMessageItemProps>;

package/dist/index.d.ts

@@ -316,8 +316,18 @@ type ChatRootProps = {
      * <ChatRoot adapter={adapter} theme="admin" />
      */
     theme?: ChatTheme;
+    /**
+     * Keys of footer toolbar actions to hide.
+     *
+     * Available keys: "attachment" | "emoji" | "businessCard" | "addressCard" | "translate"
+     *
+     * @example
+     * // Hide the Delivery Address button in the seller app:
+     * <ChatRoot hiddenActionKeys={["addressCard"]} ... />
+     */
+    hiddenActionKeys?: string[];
 };
-declare function ChatRoot({ adapter, uiCallbacks, theme }: ChatRootProps): React$1.ReactPortal | null;
+declare function ChatRoot({ adapter, uiCallbacks, theme, hiddenActionKeys }: ChatRootProps): React$1.ReactPortal | null;
 
 declare function ChatUIProvider({ children }: {
     children: React__default.ReactNode;
@@ -471,7 +481,13 @@ type ChatMessageItemProps = {
     status?: string;
     className?: string;
     onReply?: () => void;
-    onTranslate?: () => void;
+    /**
+     * Optional async translator. Receives the original text and returns the
+     * translated string. When omitted the translate button is still shown but
+     * does nothing (good for demo mode).
+     * Example: `onTranslate={(t) => googleTranslate(t, "bn")}`
+     */
+    onTranslate?: (text: string) => string | undefined;
     initialSrc?: string;
 };
 declare const ChatMessageItem: React__default.FC<ChatMessageItemProps>;

package/dist/index.js

@@ -3243,21 +3243,6 @@ var MessageHoverActions = ({
   ] });
 };
 var MessageHoverActions_default = MessageHoverActions;
-var toBanglaDemo = (s) => {
-  const map = {
-    Hi: "\u09B9\u09BE\u0987",
-    "Do you have a freight forwarder in China?": "\u0986\u09AA\u09A8\u09BE\u09B0 \u0995\u09BF \u099A\u09C0\u09A8\u09C7 \u0995\u09CB\u09A8\u09CB \u09AB\u09CD\u09B0\u09C7\u0987\u099F \u09AB\u09B0\u0993\u09AF\u09BC\u09BE\u09B0\u09CD\u09A1\u09BE\u09B0 \u0986\u099B\u09C7?",
-    "This conversation is empty. Say hi \u{1F44B}": "\u098F\u0987 \u0995\u09A5\u09CB\u09AA\u0995\u09A5\u09A8\u099F\u09BF \u0996\u09BE\u09B2\u09BF \u0964 \u09B9\u09BE\u0987 \u09B9\u09BE\u0987 \u09B9\u09BE\u0987 \u09AC\u09B2\u09C1\u09A8 \u{1F44B}",
-    "Can we schedule a call for tomorrow?": "\u0986\u09AE\u09B0\u09BE \u0995\u09BF \u0986\u0997\u09BE\u09AE\u09C0\u0995\u09BE\u09B2 \u098F\u0995\u099F\u09BF \u0995\u09B2 \u09A8\u09BF\u09B0\u09CD\u09A7\u09BE\u09B0\u09A3 \u0995\u09B0\u09A4\u09C7 \u09AA\u09BE\u09B0\u09BF?",
-    "Sure, what time suits you?": "\u0985\u09AC\u09B6\u09CD\u09AF\u0987, \u0986\u09AA\u09A8\u09BE\u09B0 \u099C\u09A8\u09CD\u09AF \u0995\u09CB\u09A8 \u09B8\u09AE\u09AF\u09BC\u099F\u09BF \u09B8\u09C1\u09AC\u09BF\u09A7\u09BE\u099C\u09A8\u0995?",
-    "Welcome to Global Marketplace": "\u0997\u09CD\u09B2\u09CB\u09AC\u09BE\u09B2 \u09AE\u09BE\u09B0\u09CD\u0995\u09C7\u099F\u09AA\u09CD\u09B2\u09C7\u09B8\u09C7 \u0986\u09AA\u09A8\u09BE\u0995\u09C7 \u09B8\u09CD\u09AC\u09BE\u0997\u09A4\u09AE \u{1F389}",
-    "Happy to be here!": "\u098F\u0996\u09BE\u09A8\u09C7 \u09A5\u09BE\u0995\u09A4\u09C7 \u09AA\u09C7\u09B0\u09C7 \u0986\u09A8\u09A8\u09CD\u09A6\u09BF\u09A4!"
-  };
-  if (map[s]) {
-    return map[s];
-  }
-  return `\u09AC\u09BE\u0982\u09B2\u09BE ${s}`;
-};
 var ChatMessageItem = ({
   id,
   mine = false,
@@ -3280,31 +3265,24 @@ var ChatMessageItem = ({
 }) => {
   const originalTextRef = React16.useRef(text ?? "");
   const [translated, setTranslated] = React16.useState(false);
-  const displayText = translated ? toBanglaDemo(originalTextRef.current) : originalTextRef.current;
+  const displayText = translated ? onTranslate?.(originalTextRef.current) ?? originalTextRef.current : originalTextRef.current;
   const handleTranslateClick = () => {
     setTranslated((v) => !v);
-    onTranslate?.();
   };
   return /* @__PURE__ */ jsx("div", { className: clsx3("mb-4", className), "data-msg-id": id, children: /* @__PURE__ */ jsxs("div", { className: clsx3("flex items-end gap-3", mine && "justify-end"), children: [
-    !mine && /* @__PURE__ */ jsx("div", { className: `${showStatus ? "mb-5" : "mb-0"}`, children: initialSrc ? /* @__PURE__ */ jsxs("div", { className: "relative h-10 w-10 shrink-0 rounded-full border border-[#F1F1F1]", children: [
-      /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: initialSrc,
-          alt: "avatar image",
-          className: "h-full w-full rounded-full object-cover"
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" })
-    ] }) : /* @__PURE__ */ jsxs(
+    !mine && /* @__PURE__ */ jsx("div", { className: `${showStatus ? "mb-5" : "mb-0"}`, children: initialSrc ? /* @__PURE__ */ jsx("div", { className: "relative h-10 w-10 shrink-0 rounded-full border border-[#F1F1F1]", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: initialSrc,
+        alt: "avatar image",
+        className: "h-full w-full rounded-full object-cover"
+      }
+    ) }) : /* @__PURE__ */ jsx(
       "div",
       {
         className: "relative grid h-10 w-10 shrink-0 place-items-center rounded-full border border-[#f1f1f1] font-semibold text-[#2c2c2c]",
         style: { backgroundColor: avatarBg },
-        children: [
-          authorInitial,
-          /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" })
-        ]
+        children: authorInitial
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: clsx3("flex flex-col gap-1 w-full"), children: [
@@ -3707,6 +3685,22 @@ var ChatImagePreviewModal = ({
   ) }) });
 };
 var ChatImagePreviewModal_default = ChatImagePreviewModal;
+
+// src/utils/theme.ts
+var GRADIENT_BORDER = "linear-gradient(236.83deg, rgba(51,201,212,0.3) 0.4%, rgba(39,83,251,0.3) 30.28%, rgba(39,83,251,0.3) 50.2%, rgba(39,83,251,0.3) 65.14%, rgba(235,67,255,0.3) 100%)";
+function getThemeAttr(theme) {
+  if (!theme || theme === "marketplace") return "marketplace";
+  if (theme === "admin") return "admin";
+  return "custom";
+}
+function getThemeVars(theme) {
+  if (!theme || theme === "marketplace" || theme === "admin") return {};
+  const vars = {};
+  if (theme.primary) vars["--color-banbox-primary"] = theme.primary;
+  if (theme.primaryActive) vars["--color-banbox-primary-active"] = theme.primaryActive;
+  if (theme.surfaceLow) vars["--color-banbox-surface-container-low"] = theme.surfaceLow;
+  return vars;
+}
 var baseItem = "flex w-full items-center gap-3 px-3 py-2 text-sm hover:bg-black/5 cursor-pointer";
 var ChatKebabMenu = ({
   pinned,
@@ -3802,21 +3796,7 @@ var avatarBgByInitial = {
   B: "#F0EDEB",
   b: "#F0EDEB"
 };
-var GRADIENT_BORDER = "linear-gradient(236.83deg, rgba(51,201,212,0.3) 0.4%, rgba(39,83,251,0.3) 30.28%, rgba(39,83,251,0.3) 50.2%, rgba(39,83,251,0.3) 65.14%, rgba(235,67,255,0.3) 100%)";
-function getThemeAttr(theme) {
-  if (!theme || theme === "marketplace") return "marketplace";
-  if (theme === "admin") return "admin";
-  return "custom";
-}
-function getThemeVars(theme) {
-  if (!theme || theme === "marketplace" || theme === "admin") return {};
-  const vars = {};
-  if (theme.primary) vars["--color-banbox-primary"] = theme.primary;
-  if (theme.primaryActive) vars["--color-banbox-primary-active"] = theme.primaryActive;
-  if (theme.surfaceLow) vars["--color-banbox-surface-container-low"] = theme.surfaceLow;
-  return vars;
-}
-var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
+var InboxPopup = ({ adapter, uiCallbacks, theme, hiddenActionKeys }) => {
   const { close, selectThread, selectedThreadId, reference } = useChatUI();
   const { isOpen: isGalleryOpen, closeGallery } = useGallery();
   const [threads, setThreads] = useState(() => adapter.threads.list(reference));
@@ -3870,6 +3850,9 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
       if (activeId) adapter.threads.markRead?.(activeId);
     }
   }, [activeId, adapter]);
+  useEffect(() => {
+    if (activeId) adapter.threads.markRead?.(activeId);
+  }, []);
   const toRef2 = (m) => ({
     id: m.id,
     author: typeof m.author === "string" ? m.author : "U",
@@ -4041,6 +4024,7 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
                       replyTo,
                       clearReply: () => setReplyTo(void 0),
                       onAfterSend: () => setRev((v) => v + 1),
+                      hiddenActionKeys,
                       onSend: (payload) => {
                         if (activeId) adapter.messages.send(activeId, payload);
                       }
@@ -4092,13 +4076,10 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
   ] });
 };
 var InboxPopup_default = InboxPopup;
-var GRADIENT_BORDER2 = "linear-gradient(236.83deg, rgba(51,201,212,0.3) 0.4%, rgba(39,83,251,0.3) 30.28%, rgba(39,83,251,0.3) 50.2%, rgba(39,83,251,0.3) 65.14%, rgba(235,67,255,0.3) 100%)";
 function coalesceThreadId(reference, threads) {
-  const referenceId = reference?.id;
-  if (reference?.kind === "quotation") {
-    return threads.find((t) => t.id === "t4")?.id ?? (threads[0]?.id ?? "");
-  }
-  return referenceId && (threads.find((t) => t.id === referenceId)?.id || threads.find((t) => t.inquiryId === referenceId)?.id) || (threads.length ? threads[0].id : "");
+  if (!reference?.id) return threads[0]?.id ?? "";
+  const refId = reference.id;
+  return threads.find((t) => t.id === refId)?.id ?? threads.find((t) => t.orderId === refId)?.id ?? threads.find((t) => t.inquiryId === refId)?.id ?? threads[0]?.id ?? "";
 }
 function toRef(m) {
   return {
@@ -4111,25 +4092,19 @@ function toRef(m) {
     audio: m.audio
   };
 }
-function getThemeAttr2(theme) {
-  if (!theme || theme === "marketplace") return "marketplace";
-  if (theme === "admin") return "admin";
-  return "custom";
-}
-function getThemeVars2(theme) {
-  if (!theme || theme === "marketplace" || theme === "admin") return {};
-  const vars = {};
-  if (theme.primary) vars["--color-banbox-primary"] = theme.primary;
-  if (theme.primaryActive) vars["--color-banbox-primary-active"] = theme.primaryActive;
-  if (theme.surfaceLow) vars["--color-banbox-surface-container-low"] = theme.surfaceLow;
-  return vars;
-}
-var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
+var SinglePopup = ({ adapter, uiCallbacks, theme, hiddenActionKeys }) => {
   const { close, reference } = useChatUI();
   const { isOpen: isGalleryOpen, closeGallery } = useGallery();
-  const threads = adapter.threads.list(reference);
+  const [threads, setThreads] = React16.useState(() => adapter.threads.list(reference));
+  React16.useEffect(() => {
+    setThreads(adapter.threads.list(reference));
+    const unsub = adapter.threads.subscribe(() => {
+      setThreads(adapter.threads.list(reference));
+    });
+    return unsub;
+  }, [adapter, reference]);
   const initialThreadId = React16.useMemo(
-    () => coalesceThreadId(reference, threads),
+    () => coalesceThreadId(reference, adapter.threads.list(reference)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [reference]
   );
@@ -4193,12 +4168,12 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
       {
         role: "dialog",
         "aria-modal": "true",
-        "data-theme": getThemeAttr2(theme),
+        "data-theme": getThemeAttr(theme),
         className: "banbox-chat-root relative h-[650px] w-[450px] rounded-[20px] p-[2px]",
         style: {
           boxShadow: "0px 2px 12px 0px #3B33331A",
-          background: GRADIENT_BORDER2,
-          ...getThemeVars2(theme)
+          background: GRADIENT_BORDER,
+          ...getThemeVars(theme)
         },
         initial: { x: "110%" },
         animate: { x: 0 },
@@ -4297,6 +4272,7 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
                   replyTo,
                   clearReply: () => setReplyTo(void 0),
                   onAfterSend: handleAfterSend,
+                  hiddenActionKeys,
                   onSend: (payload) => {
                     if (activeId) adapter.messages.send(activeId, payload);
                   }
@@ -4319,7 +4295,7 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
   ] });
 };
 var SinglePopup_default = SinglePopup;
-function ChatRoot({ adapter, uiCallbacks, theme }) {
+function ChatRoot({ adapter, uiCallbacks, theme, hiddenActionKeys }) {
   const { isOpen, variant } = useChatUI();
   useDisableBodyScroll(isOpen);
   if (typeof window === "undefined") {
@@ -4332,7 +4308,8 @@ function ChatRoot({ adapter, uiCallbacks, theme }) {
       {
         adapter,
         uiCallbacks,
-        theme
+        theme,
+        hiddenActionKeys
       },
       "inbox"
     ) : /* @__PURE__ */ jsx(
@@ -4340,7 +4317,8 @@ function ChatRoot({ adapter, uiCallbacks, theme }) {
       {
         adapter,
         uiCallbacks,
-        theme
+        theme,
+        hiddenActionKeys
       },
       "single"
     )) }) }),