@banbox/chat 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banbox/chat",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Banbox Chat UI components — reusable across all Banbox React/Next.js projects",
   "type": "module",
   "license": "UNLICENSED",

package/src/chat/InboxPopup.tsx

@@ -18,6 +18,7 @@ import type { ChatThreadStatus } from "../ui/ChatThreadItem";
 import ChatThreadItem from "../ui/ChatThreadItem";
 import TypingIndicator from "../ui/TypingIndicator";
 import ChatImagePreviewModal from "./ChatImagePreviewModal";
+import { GRADIENT_BORDER, getThemeAttr, getThemeVars } from "../utils/theme";
 
 import ChatKebabMenu from "../ui/ChatKebabMenu";
 import type { ChatAdapter, ChatUICallbacks } from "../adapter/types";
@@ -44,23 +45,7 @@ const avatarBgByInitial: Record<string, string> = {
   b: "#F0EDEB",
 };
 
-const 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?: ChatTheme): string {
-  if (!theme || theme === "marketplace") return "marketplace";
-  if (theme === "admin") return "admin";
-  return "custom";
-}
-
-function getThemeVars(theme?: ChatTheme): React.CSSProperties {
-  if (!theme || theme === "marketplace" || theme === "admin") return {};
-  const vars: Record<string, string> = {};
-  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 as React.CSSProperties;
-}
 
 /* ══════════════════════════════════════════════════
    Component
@@ -136,12 +121,19 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
 
   const prevActiveIdRef = useRef(activeId);
   useEffect(() => {
+    // Mark read on thread SWITCH
     if (prevActiveIdRef.current !== activeId) {
       prevActiveIdRef.current = activeId;
       if (activeId) adapter.threads.markRead?.(activeId);
     }
   }, [activeId, adapter]);
 
+  // Mark read on initial open (prevActiveIdRef starts equal to activeId so the above won't fire)
+  useEffect(() => {
+    if (activeId) adapter.threads.markRead?.(activeId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const toRef = (m: Message): MessageRef => ({
     id: m.id,
     author: typeof m.author === "string" ? m.author : "U",

package/src/chat/SinglePopup.tsx

@@ -16,25 +16,24 @@ import ChatMessageItem from "../ui/ChatMessageItem";
 import ChatScroll from "../ui/ChatScroll";
 import TypingIndicator from "../ui/TypingIndicator";
 import ChatImagePreviewModal from "./ChatImagePreviewModal";
+import { GRADIENT_BORDER, getThemeAttr, getThemeVars } from "../utils/theme";
 
 import type { ChatAdapter, ChatUICallbacks } from "../adapter/types";
 import type { Message, MessageRef, Reference, Thread } from "../types";
 import type { ChatTheme } from "./InboxPopup";
 
-/* ─── Helpers ─── */
-const 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 coalesceThreadId(reference: Reference | undefined, threads: Thread[]): string {
-  const referenceId = reference?.id;
-  if (reference?.kind === "quotation") {
-    return threads.find((t) => t.id === "t4")?.id ?? (threads[0]?.id ?? "");
-  }
+  if (!reference?.id) return threads[0]?.id ?? "";
+  const refId = reference.id;
+  // Priority: exact thread.id match → orderId match → inquiryId match → first thread
   return (
-    (referenceId &&
-      (threads.find((t) => t.id === referenceId)?.id ||
-        threads.find((t) => t.inquiryId === referenceId)?.id)) ||
-    (threads.length ? threads[0].id : "")
+    threads.find((t) => t.id === refId)?.id ??
+    threads.find((t) => t.orderId === refId)?.id ??
+    threads.find((t) => t.inquiryId === refId)?.id ??
+    threads[0]?.id ??
+    ""
   );
 }
 
@@ -50,20 +49,7 @@ function toRef(m: Message): MessageRef {
   };
 }
 
-function getThemeAttr(theme?: ChatTheme): string {
-  if (!theme || theme === "marketplace") return "marketplace";
-  if (theme === "admin") return "admin";
-  return "custom";
-}
 
-function getThemeVars(theme?: ChatTheme): React.CSSProperties {
-  if (!theme || theme === "marketplace" || theme === "admin") return {};
-  const vars: Record<string, string> = {};
-  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 as React.CSSProperties;
-}
 
 export type SinglePopupProps = {
   adapter: ChatAdapter;
@@ -78,9 +64,19 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme }
   const { close, reference } = useChatUI();
   const { isOpen: isGalleryOpen, closeGallery } = useGallery();
 
-  const threads = adapter.threads.list(reference);
+  // ── Threads — subscribed so real-API updates (new msg, pin, delete) are reflected
+  const [threads, setThreads] = React.useState<Thread[]>(() => adapter.threads.list(reference));
+  React.useEffect(() => {
+    // Refresh once on mount (covers any gap between render and subscribe)
+    setThreads(adapter.threads.list(reference));
+    const unsub = adapter.threads.subscribe(() => {
+      setThreads(adapter.threads.list(reference));
+    });
+    return unsub;
+  }, [adapter, reference]);
+
   const initialThreadId = React.useMemo(
-    () => coalesceThreadId(reference, threads),
+    () => coalesceThreadId(reference, adapter.threads.list(reference)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [reference],
   );

package/src/ui/ChatMessageItem.tsx

@@ -13,22 +13,6 @@ import MessageHoverActions from "./MessageHoverActions";
 import ReplyCard from "./ReplyCard";
 import type { AddressCard, BusinessCard, MessageRef } from "./types";
 
-/** super-simple demo translator for your seed data */
-const toBanglaDemo = (s: string) => {
-  const map: Record<string, string> = {
-    Hi: "হাই",
-    "Do you have a freight forwarder in China?": "আপনার কি চীনে কোনো ফ্রেইট ফরওয়ার্ডার আছে?",
-    "This conversation is empty. Say hi 👋": "এই কথোপকথনটি খালি । হাই হাই হাই বলুন 👋",
-    "Can we schedule a call for tomorrow?": "আমরা কি আগামীকাল একটি কল নির্ধারণ করতে পারি?",
-    "Sure, what time suits you?": "অবশ্যই, আপনার জন্য কোন সময়টি সুবিধাজনক?",
-    "Welcome to Global Marketplace": "গ্লোবাল মার্কেটপ্লেসে আপনাকে স্বাগতম 🎉",
-    "Happy to be here!": "এখানে থাকতে পেরে আনন্দিত!",
-  };
-  if (map[s]) {
-    return map[s];
-  }
-  return `বাংলা ${s}`;
-};
 
 export type ChatAudio = { src?: string; duration?: string };
 export type ChatFile = {
@@ -59,7 +43,13 @@ export type ChatMessageItemProps = {
   className?: string;
 
   onReply?: () => void;
-  onTranslate?: () => void; // optional external hook
+  /**
+   * 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;
 };
@@ -84,18 +74,14 @@ const ChatMessageItem: React.FC<ChatMessageItemProps> = ({
   onTranslate,
   initialSrc,
 }) => {
-  // translation state only affects the text bubble
   const originalTextRef = React.useRef(text ?? "");
   const [translated, setTranslated] = React.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); // toggle EN ⇄ BN
-    onTranslate?.(); // still let parent know if needed
+    setTranslated((v) => !v);
   };
 
-  const isOnline = true;
-
   return (
     <div className={clsx("mb-4", className)} data-msg-id={id}>
       <div className={clsx("flex items-end gap-3", mine && "justify-end")}>
@@ -108,10 +94,6 @@ const ChatMessageItem: React.FC<ChatMessageItemProps> = ({
                   alt="avatar image"
                   className="h-full w-full rounded-full object-cover"
                 />
-
-                {isOnline && (
-                  <span className="absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" />
-                )}
               </div>
             ) : (
               <div
@@ -119,10 +101,6 @@ const ChatMessageItem: React.FC<ChatMessageItemProps> = ({
                 style={{ backgroundColor: avatarBg }}
               >
                 {authorInitial}
-
-                {isOnline && (
-                  <span className="absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" />
-                )}
               </div>
             )}
           </div>

package/src/utils/theme.ts

@@ -0,0 +1,37 @@
+// utils/theme.ts
+// Shared theme helpers used by InboxPopup and SinglePopup.
+// Centralised here to avoid duplication.
+
+import type React from "react";
+import type { ChatTheme } from "../chat/InboxPopup";
+
+/**
+ * The gradient border used on both InboxPopup and SinglePopup outer wrapper.
+ * Semi-transparent so the white inner card shows through cleanly.
+ */
+export const 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%)";
+
+/**
+ * Returns the `data-theme` attribute value for the root element.
+ * Used by CSS to apply theme-specific colour variables.
+ */
+export function getThemeAttr(theme?: ChatTheme): string {
+  if (!theme || theme === "marketplace") return "marketplace";
+  if (theme === "admin") return "admin";
+  return "custom";
+}
+
+/**
+ * Returns inline CSS variables for a custom theme object.
+ * Returns an empty object for named themes ("marketplace" / "admin")
+ * because those are handled by CSS data-theme selectors.
+ */
+export function getThemeVars(theme?: ChatTheme): React.CSSProperties {
+  if (!theme || theme === "marketplace" || theme === "admin") return {};
+  const vars: Record<string, string> = {};
+  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 as React.CSSProperties;
+}