@banbox/chat 1.0.7 → 1.0.9

package/src/modals/{chat/ChatConfirmModal.tsx → ChatConfirmModal.tsx}

@@ -1,6 +1,6 @@
 import React from "react";
-import { cn } from "../../utils/cn";
-import Button from "../../ui/Button";
+import { cn } from "../utils/cn";
+import Button from "../ui/Button";
 
 type Props = {
   open: boolean;

package/src/modals/ChatTranslateSettingsModal.tsx

@@ -0,0 +1,182 @@
+// modals/ChatTranslateSettingsModal.tsx
+"use client";
+
+import clsx from "clsx";
+import React, { useState } from "react";
+
+import { ChatInfoIcon } from "../icons";
+import Button from "../ui/Button";
+import Select from "../ui/Select";
+
+/* ───────── Types ───────── */
+
+export type TranslateSettings = {
+  incomingTarget?: string;
+  autoIncoming: boolean;
+  enableOutgoing: boolean;
+  outgoingFrom: string;
+  outgoingTo: string;
+};
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onSave: (settings: TranslateSettings) => void;
+  initial?: Partial<TranslateSettings>;
+  className?: string;
+  /** Controls layout / placement */
+  variant?: "single" | "group";
+};
+
+/* Language options */
+const LANG_OPTIONS = [
+  "English",
+  "Bangla",
+  "Arabic",
+  "Chinese",
+  "French",
+  "German",
+  "Hindi",
+  "Italian",
+  "Japanese",
+  "Korean",
+  "Portuguese",
+  "Russian",
+  "Spanish",
+  "Turkish",
+  "Urdu",
+].map((l) => ({ label: l, value: l }));
+
+const ChatTranslateSettingsModal: React.FC<Props> = ({
+  open,
+  onClose,
+  onSave,
+  initial,
+  className,
+  variant = "group",
+}) => {
+  const [incomingTarget, setIncomingTarget] = useState(
+    initial?.incomingTarget ?? "",
+  );
+
+  // ESC to close
+  React.useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const handleSave = () => {
+    onSave({
+      incomingTarget,
+      autoIncoming: true,
+      enableOutgoing: false,
+      outgoingFrom: "English",
+      outgoingTo: "Bangla",
+    });
+  };
+
+  // Use absolute inset-0 to overlay the nearest positioned ancestor (the chat panel).
+  // This works for both SinglePopup and InboxPopup because the parent containers
+  // already establish a stacking context.
+  // No createPortal needed — the parent's `position: relative` is the containing block.
+  return (
+    <div
+      className={clsx(
+        "absolute inset-0 z-[9999] flex items-center justify-center",
+        variant === "single" && "rounded-[inherit]",
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClose();
+      }}
+    >
+      {/* Semi-transparent backdrop over the chat panel */}
+      <div className="absolute inset-0 bg-black/30 rounded-[inherit]" />
+
+      {/* Modal card */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="translate-settings-title"
+        onClick={(e) => e.stopPropagation()}
+        className={clsx(
+          "relative w-[460px] max-w-[95%]",
+          "overflow-clip rounded-[6px] bg-white shadow-[0px_2px_12px_0px_rgba(59,51,51,0.1)]",
+          className,
+        )}
+      >
+        {/* Header */}
+        <div className="h-[44px] px-6 py-2 flex items-center w-full shadow-[0px_2px_2px_0px_rgba(47,47,47,0.08)] bg-[#f8f8f8] rounded-t-[6px]">
+          <h2
+            id="translate-settings-title"
+            className="text-[20px] font-semibold text-black capitalize tracking-[0.5px] truncate leading-normal"
+          >
+            Translation Settings
+          </h2>
+        </div>
+
+        {/* Body */}
+        <div className="px-6 pt-4 pb-6">
+          <div className="flex flex-col gap-[24px]">
+            {/* Language select */}
+            <div className="flex flex-col gap-[6px]">
+              <span className="text-[12px] font-medium text-black tracking-[0.25px] leading-normal">
+                Translate message into
+              </span>
+
+              <Select
+                options={LANG_OPTIONS}
+                value={incomingTarget}
+                onChange={setIncomingTarget}
+                placeholder="Select Language"
+                size={34}
+              />
+            </div>
+
+            {/* Info section */}
+            <div className="flex gap-[6px] items-start text-[#ff5200]">
+              <span className="pt-[2px] shrink-0">
+                <ChatInfoIcon className="w-4 h-4" />
+              </span>
+              <p className="text-[12px] font-normal tracking-[0.25px] leading-normal">
+                Automatically translate incoming messages. The language you save here will be used
+                to display all incoming messages. You can choose from Spanish, Russian, French,
+                Arabic, Portuguese, Turkish, Bangla, and among others.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 py-[9px] bg-[#f0f4ff] flex items-center justify-end rounded-b-[6px]">
+          <div className="flex items-center justify-end gap-6">
+            <Button
+              onClick={onClose}
+              variant="outlined"
+              color="black"
+              size="34"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSave}
+              variant="filled"
+              color="black"
+              size="34"
+            >
+              Update
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatTranslateSettingsModal;

package/src/styles/index.build.css

@@ -0,0 +1,15 @@
+/*
+ * @banbox/chat — Build-time CSS
+ * Used by tsup during `npm run build` only.
+ * Includes @import "tailwindcss" so the compiled dist/index.js
+ * bundle has all Tailwind utilities injected via injectStyle.
+ *
+ * Do NOT import this in src/index.ts — it is only referenced by tsup.config.ts.
+ */
+
+@import "tailwindcss";
+
+/* ═══════════════════════════════════════════════════════════════
+   Re-export the main package styles
+   ═══════════════════════════════════════════════════════════════ */
+@import "./index.css";

package/src/styles/index.css

@@ -1,6 +1,13 @@
 /*
- * @banbox/chat — Compiled CSS
- * Import once in your app:  import "@banbox/chat/dist/index.css";
+ * @banbox/chat — Package CSS
+ *
+ * When used via dist/: tsup's injectStyle pre-compiles this with @import "tailwindcss"
+ *   so all Tailwind utilities are bundled into the injected JS.
+ *
+ * When used via src/ alias in dev: the seller app's vite config strips this
+ *   @import via a custom plugin to avoid double-injecting Tailwind.
+ *   The seller app's @tailwindcss/vite then scans banbox-chat/src files
+ *   and generates all needed utilities automatically.
  *
  * Theme usage:
  *   <ChatUIProvider theme="marketplace"> — orange primary (#ff5300)
@@ -9,6 +16,7 @@
 
 @import "tailwindcss";
 
+
 /* ═══════════════════════════════════════════════════════════════
    THEME: Default / Marketplace / Retailers  (orange primary)
    ═══════════════════════════════════════════════════════════════ */

package/src/ui/{chat/AttachmentPreviewStrip.tsx → AttachmentPreviewStrip.tsx}

@@ -1,8 +1,8 @@
-// components/chat/ui/chat/AttachmentPreviewStrip.tsx
+// ui/AttachmentPreviewStrip.tsx
 "use client";
 import clsx from "clsx";
 import React from "react";
-import { FileIcon, ChatXIcon } from "../../icons";
+import { FileIcon, ChatXIcon } from "../icons";
 
 const extColor = (ext: string) => {
   const e = ext.toLowerCase();

package/src/ui/{chat/ChatComposerBar.tsx → ChatComposerBar.tsx}

@@ -1,9 +1,9 @@
-// components/chat/ui/chat/ChatComposerBar.tsx
+// ui/ChatComposerBar.tsx
 "use client";
 
 import clsx from "clsx";
 import React, { useRef, useState } from "react";
-import { ArrowSendAngleIcon, ArrowSendIcon, RecordMicIcon, ChatXIcon } from "../../icons";
+import { ArrowSendAngleIcon, ArrowSendIcon, RecordMicIcon, ChatXIcon } from "../icons";
 
 type Props = {
   recording: boolean;

package/src/ui/{chat/ChatFooter.tsx → ChatFooter.tsx}

@@ -1,9 +1,10 @@
-// ui/chat/ChatFooter.tsx
+// ui/ChatFooter.tsx
 "use client";
 
-import { AttachIcon, ChatInfoIcon, SmileIcon, ChatXIcon, ProfileCardIcon, NewLanguageIcon } from "../../icons";
-import ChatTranslateSettingsModal from "../../modals/chat/ChatTranslateSettingsModal";
-import type { TranslateSettings } from "../../modals/chat/ChatTranslateSettingsModal";
+import { AttachIcon, ChatInfoIcon, SmileIcon, ChatXIcon, ProfileCardIcon, NewLanguageIcon, MapIcon2 } from "../icons";
+import ChatTranslateSettingsModal from "../modals/ChatTranslateSettingsModal";
+import type { TranslateSettings } from "../modals/ChatTranslateSettingsModal";
+import ChatAddressModal from "../modals/ChatAddressModal";
 import clsx from "clsx";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import AttachmentPreviewStrip, { type FilePreview as PreviewFile } from "./AttachmentPreviewStrip";
@@ -12,7 +13,7 @@ import BusinessCardDropup from "./drop-up/BusinessCardDropup";
 import EmojiDropup from "./drop-up/EmojiDropup";
 import ReplyCard from "./ReplyCard";
 import type { MessageRef } from "./types";
-import type { SendPayload } from "../../types";
+import type { SendPayload } from "../types";
 
 /* Simple tooltip wrapper */
 const Tooltip = ({ children, text }: { children: React.ReactNode; text?: string }) => (
@@ -39,6 +40,8 @@ type Props = {
   onAfterSend?: () => void;
 
   actions?: FooterAction[];
+  /** Keys of actions to hide from the toolbar, e.g. ["businessCard", "addressCard"] */
+  hiddenActionKeys?: string[];
   className?: string;
   maxRows?: number;
 
@@ -68,10 +71,11 @@ const ChatFooter: React.FC<Props> = ({
   maxRows = 4,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   actions: _actions,
+  hiddenActionKeys = [],
   replyTo,
   clearReply,
 }) => {
-  const actionData: FooterAction[] = [
+  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" /> },
     {
@@ -79,6 +83,11 @@ const ChatFooter: React.FC<Props> = ({
       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",
@@ -86,6 +95,11 @@ const ChatFooter: React.FC<Props> = ({
     },
   ];
 
+  // Filter hidden actions
+  const actionData = hiddenActionKeys.length
+    ? allActions.filter((a) => !hiddenActionKeys.includes(a.key))
+    : allActions;
+
   const textRef = useRef<HTMLTextAreaElement>(null);
   const emojiBtnRef = useRef<HTMLButtonElement | null>(null);
   const [text, setText] = useState("");
@@ -113,11 +127,19 @@ const ChatFooter: React.FC<Props> = ({
     outgoingTo: "Bangla",
   });
 
+  // Business card dropup + edit modal
   const bizBtnRef = useRef<HTMLButtonElement | null>(null);
   const [showBiz, setShowBiz] = useState(false);
+  const [showBizEdit, setShowBizEdit] = useState(false);
+
+  const handleOpenBizEdit = () => {
+    setShowBiz(false);
+    setShowBizEdit(true);
+  };
 
+  // Address card modal
   const addrBtnRef = useRef<HTMLButtonElement | null>(null);
-  const [, setShowAddress] = useState(false);
+  const [showAddress, setShowAddress] = useState(false);
 
   // insert emoji at caret
   const insertEmoji = (emoji: string) => {
@@ -390,7 +412,8 @@ const ChatFooter: React.FC<Props> = ({
           open={showBiz}
           onClose={() => setShowBiz(false)}
           anchorRef={bizBtnRef}
-          onSend={async (card) => {
+          onEdit={handleOpenBizEdit}
+          onSend={(card) => {
             onSend({ type: "businessCard", card, replyTo });
             clearReply?.();
             onAfterSend?.();
@@ -435,6 +458,77 @@ const ChatFooter: React.FC<Props> = ({
           setShowTranslate(false);
         }}
       />
+
+      <ChatAddressModal
+        variant={variant}
+        open={showAddress}
+        onClose={() => setShowAddress(false)}
+        onSend={(card) => {
+          onSend({ type: "addressCard", card, replyTo });
+          clearReply?.();
+          onAfterSend?.();
+        }}
+      />
+
+      {/* Business card edit modal — simple inline form */}
+      {showBizEdit && (
+        <div
+          className="fixed inset-0 z-[10003] flex items-center justify-center"
+          onClick={() => setShowBizEdit(false)}
+        >
+          <div className="fixed inset-0 bg-black/30" />
+          <div
+            role="dialog"
+            aria-modal="true"
+            onClick={(e) => e.stopPropagation()}
+            className="relative z-[10004] w-[480px] max-w-[95vw] overflow-hidden rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)]"
+          >
+            <div className="flex h-[44px] items-center justify-between bg-[#f8f8f8] px-6">
+              <h2 className="text-xl font-semibold text-black">Business Info</h2>
+              <button
+                type="button"
+                onClick={() => setShowBizEdit(false)}
+                className="flex h-8 w-8 items-center justify-center rounded-full hover:bg-black/10 cursor-pointer"
+              >
+                <ChatXIcon className="h-5 w-5" />
+              </button>
+            </div>
+            <div className="p-6 space-y-3 text-sm text-[#374151]">
+              <p className="text-[#6b7280]">
+                Update your business card information below.
+              </p>
+              {/* For now this is a placeholder — integrate your full BusinessAccountForm here */}
+              <div className="grid grid-cols-2 gap-3">
+                {["First Name", "Last Name", "Business Name", "Mobile", "Email", "Website"].map((label) => (
+                  <div key={label} className="flex flex-col gap-1">
+                    <label className="text-xs font-medium text-[#374151]">{label}</label>
+                    <input
+                      placeholder={label}
+                      className="rounded-md border border-[#d1d5db] px-3 py-2 text-sm text-black placeholder-[#9ca3af] outline-none focus:border-[#ff5200] focus:ring-1 focus:ring-[#ff5200]/30"
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="flex h-[52px] items-center justify-end gap-3 bg-[#f0f4ff] px-6">
+              <button
+                type="button"
+                onClick={() => setShowBizEdit(false)}
+                className="h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={() => setShowBizEdit(false)}
+                className="h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00]"
+              >
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

package/src/ui/{chat/ChatHeader.tsx → ChatHeader.tsx}

@@ -1,4 +1,5 @@
 "use client";
+import clsx from "clsx";
 import React from "react";
 
 type Props = {
@@ -10,10 +11,12 @@ type Props = {
 
 export default function ChatHeader({ left, right, below, className }: Props) {
   return (
-    <div className={`border-b border-[#ededed] h-[64px]${className ? ` ${className}` : ""}`}>
-      <div className="flex items-center justify-between px-4 h-full">
-        <div className="flex items-center gap-3">{left}</div>
-        {right}
+    <div>
+      <div className={clsx("border-b border-[#ededed] h-[64px]", className)}>
+        <div className="flex items-center justify-between px-4 pt-2.5">
+          <div className="flex items-center gap-3">{left}</div>
+          {right}
+        </div>
       </div>
       {below && <>{below}</>}
     </div>

package/src/ui/{chat/ChatIdentity.tsx → ChatIdentity.tsx}

@@ -7,8 +7,8 @@ import _Lottie from "lottie-react";
 const Lottie = ((_Lottie as any).default ?? _Lottie) as typeof _Lottie;
 
 import React from "react";
-import { BlueBadgeIcon } from "../../icons";
-import globe from "../../lottie/banbox-chat-globe.json";
+import { BlueBadgeIcon } from "../icons";
+import globe from "../lottie/banbox-chat-globe.json";
 
 type SubtitleVariant = "live" | "muted";
 

package/src/ui/{chat/ChatInquiryBar.tsx → ChatInquiryBar.tsx}

@@ -1,7 +1,7 @@
 "use client";
 import clsx from "clsx";
 import React from "react";
-import { RightArrow } from "../../icons";
+import { RightArrow } from "../icons";
 
 type Props = {
   id?: string; // if undefined, don't render

package/src/ui/ChatKebabMenu.tsx

@@ -0,0 +1,125 @@
+// ui/ChatKebabMenu.tsx
+// Self-contained kebab (⋮) menu for the chat header.
+// 100% clone of the marketplace ChatKebabMenu — no external deps.
+"use client";
+
+import clsx from "clsx";
+import React, { useEffect, useRef, useState } from "react";
+
+import { MenuIcon, PinIcon, PinOffIcon, TrashIcon } from "../icons";
+
+/* ─── Types ─── */
+
+export type ChatKebabMenuProps = {
+  pinned?: boolean;
+  onPinToggle?: () => void;
+  onDelete?: () => void;
+  className?: string;
+};
+
+/* ─── Shared item class — exact marketplace style ─── */
+
+const baseItem =
+  "flex w-full items-center gap-3 px-3 py-2 text-sm hover:bg-black/5 cursor-pointer";
+
+/* ─── Component ─── */
+
+const ChatKebabMenu: React.FC<ChatKebabMenuProps> = ({
+  pinned,
+  onPinToggle,
+  onDelete,
+  className,
+}) => {
+  const [open, setOpen] = useState(false);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  const menuId = "chat-kebab-menu";
+
+  /* Close on outside click */
+  useEffect(() => {
+    if (!open) return;
+
+    const onDoc = (e: MouseEvent) => {
+      const menu = document.getElementById(menuId);
+      if (!menu || !btnRef.current) return;
+      const target = e.target as Node;
+      if (menu.contains(target) || btnRef.current.contains(target)) return;
+      setOpen(false);
+    };
+
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+
+  /* Close on ESC */
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  return (
+    <div className={clsx("relative", className)}>
+      {/* Trigger */}
+      <button
+        ref={btnRef}
+        type="button"
+        className="grid h-9 w-9 place-items-center rounded-full hover:bg-black/5 cursor-pointer"
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        title="More options"
+      >
+        <MenuIcon className="w-6 h-6" />
+      </button>
+
+      {/* Dropdown */}
+      {open && (
+        <div
+          id={menuId}
+          role="menu"
+          className="absolute right-0 z-10 mt-2 w-44 rounded-xs bg-white py-1 shadow-[0_4px_16px_rgba(0,0,0,0.08)]"
+        >
+          {/* Speech-bubble caret */}
+          <div className="pointer-events-none absolute -z-[1] -top-[6px] right-4 h-3 w-3 rotate-45 bg-white" />
+
+          {/* Pin / Unpin */}
+          <button
+            role="menuitem"
+            type="button"
+            className={baseItem}
+            onClick={() => {
+              onPinToggle?.();
+              setOpen(false);
+            }}
+          >
+            {pinned ? (
+              <PinOffIcon className="h-[18px] w-[18px] text-[#636363]" />
+            ) : (
+              <PinIcon className="h-[18px] w-[18px] text-[#636363]" />
+            )}
+            <span className="text-[#161616]">
+              {pinned ? "Unpin" : "Pin on top"}
+            </span>
+          </button>
+
+          {/* Delete */}
+          <button
+            role="menuitem"
+            type="button"
+            className={baseItem}
+            onClick={() => {
+              onDelete?.();
+              setOpen(false);
+            }}
+          >
+            <TrashIcon className="h-[18px] w-[18px] text-[#636363]" />
+            <span className="text-[#161616]">Delete</span>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ChatKebabMenu;