@banbox/chat 1.0.10 → 1.0.12

package/package.json

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

package/src/chat/ChatRoot.tsx

@@ -11,30 +11,44 @@ import SinglePopup from "./SinglePopup";
 import type { ChatTheme } from "./InboxPopup";
 
 export type ChatRootProps = {
+  /** The unified data adapter — provides all threads, messages, and send logic. */
+  adapter: ChatAdapter;
+
+  /** Optional UI callbacks — toast, navigation, kebab menu. */
+  uiCallbacks?: ChatUICallbacks;
+
   /**
-   * The unified data adapter — provides all threads, messages, and send logic.
+   * Visual theme: "marketplace" | "admin" | { primary, primaryActive, surfaceLow }
+   * @example <ChatRoot adapter={adapter} theme="admin" />
    */
-  adapter: ChatAdapter;
+  theme?: ChatTheme;
 
   /**
-   * Optional UI callbacks — controls toast notifications, navigation,
-   * and the kebab (⋮) menu renderer.
+   * Allow-list of toolbar buttons shown in the **InboxPopup** footer.
+   *
+   * Keys: "attachment" | "emoji" | "businessCard" | "addressCard" | "translate"
+   * Default: ["attachment", "emoji", "translate"]
+   *
+   * @example
+   * // Seller inbox — no cards at all:
+   * inboxFooterActions={["attachment", "emoji", "translate"]}
    */
-  uiCallbacks?: ChatUICallbacks;
+  inboxFooterActions?: string[];
 
   /**
-   * Visual theme:
-   * - "marketplace" (default) — orange primary (#ff5300)
-   * - "admin"                 — black primary (#1a1a1a)
-   * - custom object           — { primary, primaryActive, surfaceLow }
+   * Allow-list of toolbar buttons shown in the **SinglePopup** footer.
+   *
+   * Keys: "attachment" | "emoji" | "businessCard" | "addressCard" | "translate"
+   * Default: ["attachment", "emoji", "translate"]
    *
    * @example
-   * <ChatRoot adapter={adapter} theme="admin" />
+   * // Single chat with location sharing enabled:
+   * singleFooterActions={["attachment", "emoji", "translate", "addressCard"]}
    */
-  theme?: ChatTheme;
+  singleFooterActions?: string[];
 };
 
-export default function ChatRoot({ adapter, uiCallbacks, theme }: ChatRootProps) {
+export default function ChatRoot({ adapter, uiCallbacks, theme, inboxFooterActions, singleFooterActions }: ChatRootProps) {
   const { isOpen, variant } = useChatUI();
 
   // Lock page scroll whenever the chat is open
@@ -45,7 +59,6 @@ export default function ChatRoot({ adapter, uiCallbacks, theme }: ChatRootProps)
   }
 
   return createPortal(
-    // GalleryProvider is scoped to the chat only.
     <GalleryProvider>
       <AnimatePresence mode="wait">
         {isOpen && (
@@ -55,6 +68,7 @@ export default function ChatRoot({ adapter, uiCallbacks, theme }: ChatRootProps)
               adapter={adapter}
               uiCallbacks={uiCallbacks}
               theme={theme}
+              footerActions={inboxFooterActions}
             />
           ) : (
             <SinglePopup
@@ -62,6 +76,7 @@ export default function ChatRoot({ adapter, uiCallbacks, theme }: ChatRootProps)
               adapter={adapter}
               uiCallbacks={uiCallbacks}
               theme={theme}
+              footerActions={singleFooterActions}
             />
           )
         )}

package/src/chat/InboxPopup.tsx

@@ -34,6 +34,11 @@ export type InboxPopupProps = {
   adapter: ChatAdapter;
   uiCallbacks?: ChatUICallbacks;
   theme?: ChatTheme;
+  /**
+   * Allow-list of footer toolbar keys. Defaults to ["attachment", "emoji", "translate"].
+   * Pass e.g. ["attachment", "emoji", "translate", "businessCard"] to opt-in to more.
+   */
+  footerActions?: string[];
 };
 
 /* ─── Helpers ─── */
@@ -50,7 +55,7 @@ const avatarBgByInitial: Record<string, string> = {
 /* ══════════════════════════════════════════════════
    Component
 ══════════════════════════════════════════════════ */
-const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme }) => {
+const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme, footerActions }) => {
   const { close, selectThread, selectedThreadId, reference } = useChatUI();
   const { isOpen: isGalleryOpen, closeGallery } = useGallery();
 
@@ -337,6 +342,7 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
                   replyTo={replyTo}
                   clearReply={() => setReplyTo(undefined)}
                   onAfterSend={() => setRev((v) => v + 1)}
+                  enabledActions={footerActions}
                   onSend={(payload) => {
                     if (activeId) adapter.messages.send(activeId, payload);
                   }}

package/src/chat/SinglePopup.tsx

@@ -55,12 +55,17 @@ export type SinglePopupProps = {
   adapter: ChatAdapter;
   uiCallbacks?: ChatUICallbacks;
   theme?: ChatTheme;
+  /**
+   * Allow-list of footer toolbar keys. Defaults to ["attachment", "emoji", "translate"].
+   * Pass e.g. ["attachment", "emoji", "translate", "addressCard"] to add location sharing.
+   */
+  footerActions?: string[];
 };
 
 /* ══════════════════════════════════════════════════
    Component
 ══════════════════════════════════════════════════ */
-const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme }) => {
+const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme, footerActions }) => {
   const { close, reference } = useChatUI();
   const { isOpen: isGalleryOpen, closeGallery } = useGallery();
 
@@ -258,6 +263,7 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme }
               replyTo={replyTo}
               clearReply={() => setReplyTo(undefined)}
               onAfterSend={handleAfterSend}
+              enabledActions={footerActions}
               onSend={(payload) => {
                 if (activeId) adapter.messages.send(activeId, payload);
               }}

package/src/ui/ChatFooter.tsx

@@ -39,9 +39,26 @@ type Props = {
   /** Called after send completes — triggers parent re-render / scroll */
   onAfterSend?: () => void;
 
-  actions?: FooterAction[];
-  /** Keys of actions to hide from the toolbar, e.g. ["businessCard", "addressCard"] */
-  hiddenActionKeys?: string[];
+  /**
+   * Allow-list of toolbar action keys to show.
+   * If omitted, defaults to ["attachment", "emoji", "translate"].
+   *
+   * Available keys:
+   *   "attachment"   — 📎 Attach file / image
+   *   "emoji"        — 😊 Emoji picker
+   *   "businessCard" — 👤 Share business card  (opt-in)
+   *   "addressCard"  — 📍 Share address card   (opt-in)
+   *   "translate"    — 🌐 Translation settings
+   *
+   * @example
+   * // InboxPopup: no location, no business card
+   * enabledActions={["attachment", "emoji", "translate"]}
+   *
+   * // SinglePopup: add location button
+   * enabledActions={["attachment", "emoji", "translate", "addressCard"]}
+   */
+  enabledActions?: string[];
+
   className?: string;
   maxRows?: number;
 
@@ -50,6 +67,13 @@ type Props = {
   clearReply?: () => void;
 };
 
+/**
+ * Default toolbar actions when `enabledActions` is not specified.
+ * businessCard and addressCard are opt-in (not shown by default).
+ */
+export const DEFAULT_FOOTER_ACTIONS: string[] = ["attachment", "emoji", "translate"];
+
+
 /* ────────────────────────── Utilities ─────────────────────────── */
 
 const fmtTime = (s: number) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
@@ -69,36 +93,22 @@ const ChatFooter: React.FC<Props> = ({
   onAfterSend,
   className,
   maxRows = 4,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  actions: _actions,
-  hiddenActionKeys = [],
+  enabledActions,
   replyTo,
   clearReply,
 }) => {
   const allActions: FooterAction[] = [
     { key: "attachment", title: "Attach file", icon: <AttachIcon className="h-4 w-4" /> },
-    { key: "emoji", title: "Add emoji", icon: <SmileIcon className="h-4 w-4" /> },
-    {
-      key: "businessCard",
-      title: "Share business card",
-      icon: <ProfileCardIcon className="h-4 w-4" />,
-    },
-    {
-      key: "addressCard",
-      title: "Share address",
-      icon: <MapIcon2 className="h-4 w-4" />,
-    },
-    {
-      key: "translate",
-      title: "Translation settings",
-      icon: <NewLanguageIcon className="h-4 w-4" />,
-    },
+    { key: "emoji",      title: "Add emoji",   icon: <SmileIcon className="h-4 w-4" /> },
+    { key: "businessCard", title: "Share business card", icon: <ProfileCardIcon className="h-4 w-4" /> },
+    { key: "addressCard",  title: "Share address",       icon: <MapIcon2 className="h-4 w-4" /> },
+    { key: "translate",    title: "Translation settings", icon: <NewLanguageIcon className="h-4 w-4" /> },
   ];
 
-  // Filter hidden actions
-  const actionData = hiddenActionKeys.length
-    ? allActions.filter((a) => !hiddenActionKeys.includes(a.key))
-    : allActions;
+  // Allow-list filter: show only explicitly requested keys.
+  // Falls back to DEFAULT_FOOTER_ACTIONS when enabledActions is not provided.
+  const allowed = enabledActions ?? DEFAULT_FOOTER_ACTIONS;
+  const actionData = allActions.filter((a) => allowed.includes(a.key));
 
   const textRef = useRef<HTMLTextAreaElement>(null);
   const emojiBtnRef = useRef<HTMLButtonElement | null>(null);