@banbox/chat 1.0.7 → 1.0.9

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

@@ -1,30 +1,43 @@
 "use client";
 
+import clsx from "clsx";
 import type { Variants } from "framer-motion";
 import { AnimatePresence, motion } from "framer-motion";
 import React from "react";
-import { ChatSearchIcon, ChatXIcon, MessageIcon } from "../../icons";
+import { ChatSearchIcon, ChatXIcon, MessageIcon } from "../icons";
 
 type Props = {
   className?: string;
   onClose?: () => void;
   onSearchChange?: (value: string) => void;
+  hideSearch?: boolean;
 };
 
-const ChatListHeader: React.FC<Props> = ({ className, onClose, onSearchChange }) => {
+const ChatListHeader: React.FC<Props> = ({
+  className,
+  onClose,
+  onSearchChange,
+  hideSearch = false,
+}) => {
   const [searching, setSearching] = React.useState(false);
   const [q, setQ] = React.useState("");
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   React.useEffect(() => {
     const timer = searching
-      ? setTimeout(() => { inputRef.current?.focus(); }, 220)
+      ? setTimeout(() => {
+          inputRef.current?.focus();
+        }, 220)
       : undefined;
-    return () => { clearTimeout(timer); };
+    return () => {
+      clearTimeout(timer);
+    };
   }, [searching]);
 
   React.useEffect(() => {
-    if (!searching) return;
+    if (!searching) {
+      return;
+    }
     const onKey = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
         setSearching(false);
@@ -33,18 +46,20 @@ const ChatListHeader: React.FC<Props> = ({ className, onClose, onSearchChange })
       }
     };
     window.addEventListener("keydown", onKey);
-    return () => { window.removeEventListener("keydown", onKey); };
+    return () => {
+      window.removeEventListener("keydown", onKey);
+    };
   }, [searching, onSearchChange]);
 
   const variants: Variants = {
     inFromRight: { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
-    outToLeft:   { opacity: 0, x: -24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } },
-    inFromLeft:  { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
-    outToRight:  { opacity: 0, x: 24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } },
+    outToLeft: { opacity: 0, x: -24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } },
+    inFromLeft: { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
+    outToRight: { opacity: 0, x: 24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } },
   };
 
   return (
-    <div className={`h-[64px] border-b border-[#ededed]${className ? ` ${className}` : ""}`}>
+    <div className={clsx("h-[64px] border-b border-[#ededed]", className)}>
       <div className="flex h-full items-center px-[20px]">
         <AnimatePresence initial={false} mode="wait">
           {!searching ? (
@@ -64,13 +79,16 @@ const ChatListHeader: React.FC<Props> = ({ className, onClose, onSearchChange })
               </div>
 
               <div className="flex items-center gap-2">
-                <button
-                  title="Search"
-                  onClick={() => setSearching(true)}
-                  className="h-9 w-9 place-items-center rounded-full hover:bg-black/5 flex items-center justify-center cursor-pointer border-none bg-transparent"
-                >
-                  <ChatSearchIcon className="w-5 h-5" />
-                </button>
+                {!hideSearch && (
+                  <button
+                    title="Search"
+                    onClick={() => setSearching(true)}
+                    className="h-9 w-9 place-items-center rounded-full hover:bg-black/5 flex items-center justify-center cursor-pointer border-none bg-transparent"
+                  >
+                    <ChatSearchIcon className="w-5 h-5" />
+                  </button>
+                )}
+
                 <button
                   title="Close"
                   onClick={onClose}
@@ -95,7 +113,7 @@ const ChatListHeader: React.FC<Props> = ({ className, onClose, onSearchChange })
                     <span className="mr-2 grid h-6 w-6 shrink-0 place-items-center text-[#929292]">
                       <ChatSearchIcon className="w-5 h-5" />
                     </span>
-                    <span className="mr-2 h-6 w-px shrink-0 bg-[#e1e1e1]" />
+
                     <input
                       ref={inputRef}
                       value={q}
@@ -108,13 +126,19 @@ const ChatListHeader: React.FC<Props> = ({ className, onClose, onSearchChange })
                     />
                   </div>
 
-                  <button
-                    title="Close search"
-                    onClick={() => { setSearching(false); setQ(""); onSearchChange?.(""); }}
-                    className="grid h-8 w-8 place-items-center rounded-full text-xl hover:bg-black/5 cursor-pointer border-none bg-transparent"
-                  >
-                    <ChatXIcon className="w-5 h-5" />
-                  </button>
+                  <div>
+                    <button
+                      title="Close search"
+                      onClick={() => {
+                        setSearching(false);
+                        setQ("");
+                        onSearchChange?.("");
+                      }}
+                      className="grid h-8 w-8 place-items-center rounded-full text-xl hover:bg-black/5 cursor-pointer border-none bg-transparent"
+                    >
+                      <ChatXIcon className="w-5 h-5" />
+                    </button>
+                  </div>
                 </div>
               </div>
             </motion.div>

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

@@ -1,4 +1,4 @@
-// components/ui/chat/ChatMessageItem.tsx
+// ui/ChatMessageItem.tsx
 "use client";
 
 import clsx from "clsx";

package/src/ui/ChatScroll.tsx

@@ -0,0 +1,59 @@
+// ui/ChatScroll.tsx
+"use client";
+import clsx from "clsx";
+import React from "react";
+
+type Props = {
+  top?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  /** set true if you want short threads anchored at the bottom */
+  bottomAlignWhenShort?: boolean;
+  /** when this value changes, we auto-scroll to the bottom */
+  scrollKey?: string | number;
+};
+
+const ChatScroll = React.forwardRef<HTMLDivElement, Props>(function ChatScroll(
+  { top, children, className, bottomAlignWhenShort = false, scrollKey },
+  _,
+) {
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = React.useCallback(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    el.scrollTop = el.scrollHeight;
+  }, []);
+
+  // On mount & when scrollKey changes — useLayoutEffect guarantees synchronous scroll before paint!
+  React.useLayoutEffect(() => {
+    scrollToBottom();
+  }, [scrollKey, scrollToBottom]);
+
+  return (
+    <div
+      ref={ref}
+      data-chat-scroll
+      className={clsx(
+        "h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden",
+        className,
+      )}
+    >
+      {/* This wrapper ensures content is at least as tall as the scroll area */}
+      <div
+        className={clsx(
+          "min-h-full flex flex-col",
+          bottomAlignWhenShort ? "justify-end" : "justify-between",
+        )}
+      >
+        {top}
+        {children}
+      </div>
+    </div>
+  );
+});
+
+export default ChatScroll;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../../utils/cn";
+import { cn } from "../utils/cn";
 
 /* ===========================================================
    ChatSpinner

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

@@ -2,7 +2,7 @@
 
 import clsx from "clsx";
 import React from "react";
-import { BlueBadgeIcon } from "../../icons";
+import { BlueBadgeIcon } from "../icons";
 
 export type ChatThreadStatus =
   | { kind: "seen" }
@@ -16,14 +16,13 @@ type Props = {
   verified?: boolean;
 
   title: string;
-  preview: string; // last message snippet
-  time: string; // "29 Jul 2025 16:51"
+  preview: string;
+  time: string;
   status: ChatThreadStatus;
 
-  avatarText: string; // e.g. "A"
-  avatarSrc?: string; // e.g. "A"
-  _size?: number;
-  avatarBg?: string; // default soft peach
+  avatarText: string;
+  avatarSrc?: string;
+  avatarBg?: string;
   className?: string;
   onClick?: () => void;
 };
@@ -39,28 +38,22 @@ const ChatThreadItem: React.FC<Props> = ({
   status,
   avatarText,
   avatarSrc,
-  _size = 46,
   avatarBg = "#FFF1EC",
   className,
   onClick,
 }) => {
-  const count = status.kind === "new" ? String(Math.max(0, status.count)).padStart(2, "0") : "";
-
   const statusEl = (() => {
     switch (status.kind) {
       case "seen":
         return <span className="text-[#0D5EA8]">Seen</span>;
-
       case "delivered":
         return <span className="text-[#B7B7B7]">Delivered</span>;
-
       case "new":
         return (
           <span className="text-[#E63946]">
-            {count} New
+            {String(Math.max(0, status.count)).padStart(2, "0")} New
           </span>
         );
-
       default:
         return null;
     }
@@ -81,10 +74,10 @@ const ChatThreadItem: React.FC<Props> = ({
       )}
 
       <div className="flex items-start gap-3 border-b border-[#f8f8f8] pb-2">
-        {/* Avatar + online */}
+        {/* Avatar + online dot */}
         <div className="relative mt-[2px]">
           {avatarSrc ? (
-            <div className="grid h-9 w-9 place-items-center rounded-xs font-semibold text-2xl border border-[#f1f1f1] relative overflow-hidden">
+            <div className="grid h-9 w-9 place-items-center rounded-xs font-semibold text-2xl border border-[#f1f1f1]">
               <img
                 src={avatarSrc}
                 alt={title}

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

@@ -1,9 +1,9 @@
-// components/ui/chat/MessageHoverActions.tsx
+// ui/MessageHoverActions.tsx
 "use client";
 
 import clsx from "clsx";
 import React from "react";
-import { MessageReplayIcon, NewLanguageIcon } from "../../icons";
+import { MessageReplayIcon, NewLanguageIcon } from "../icons";
 
 type ItemButton = "replay" | "translate";
 

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

@@ -1,9 +1,9 @@
-// components/chat/ui/chat/ReplyCard.tsx
+// ui/ReplyCard.tsx
 "use client";
 
 import clsx from "clsx";
 import React from "react";
-import { ArrowBackUpIcon, FileIcon, ChatXIcon } from "../../icons";
+import { ArrowBackUpIcon, FileIcon, ChatXIcon } from "../icons";
 import { scrollToMessageById } from "./scrollToMessage";
 import type { MessageRef } from "./types";
 

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

@@ -6,7 +6,7 @@ import _Lottie from "lottie-react";
 const Lottie = ((_Lottie as any).default ?? _Lottie) as typeof _Lottie;
 
 import React from "react";
-import dots from "../../lottie/typingdotanimation2.json";
+import dots from "../lottie/typingdotanimation2.json";
 
 type Props = {
   size?: number;

package/src/ui/{chat/drop-up → drop-up}/BusinessCardDropup.tsx

@@ -3,9 +3,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
-import { BusinessInfoIcon, ChatMailIcon, ChatPhoneCallIcon, ChatXIcon } from "../../../icons";
+import { BusinessInfoIcon, ChatMailIcon, ChatPhoneCallIcon, ChatXIcon } from "../../icons";
 
-import { cn } from "../../../utils/cn";
+import { cn } from "../../utils/cn";
 import type { BusinessCard } from "../types";
 
 /* =======================
@@ -19,6 +19,8 @@ type BusinessCardDropupProps = {
   /** Position against this button (like EmojiDropup) */
   anchorRef?: React.RefObject<HTMLElement | null>;
   className?: string;
+  /** Called when the Edit button is clicked — opens business info modal */
+  onEdit?: () => void;
 };
 
 /* =======================
@@ -49,6 +51,7 @@ const BusinessCardDropup = ({
   onSend,
   anchorRef,
   className,
+  onEdit,
 }: BusinessCardDropupProps) => {
   const panelRef = useRef<HTMLDivElement | null>(null);
   const [pos, setPos] = useState<{ left: number; top: number } | null>(null);
@@ -233,7 +236,16 @@ const BusinessCardDropup = ({
 
       {/* Footer actions */}
       <div className="mt-3 flex justify-end gap-2">
-
+        <button
+          type="button"
+          onClick={() => {
+            onClose();
+            onEdit?.();
+          }}
+          className="h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]"
+        >
+          Edit
+        </button>
         <button
           type="button"
           disabled={disabled}

package/src/ui/{chat/drop-up → drop-up}/EmojiDropup.tsx

@@ -98,7 +98,7 @@ const EmojiDropup: React.FC<Props> = ({ open, onClose, onSelect, anchorRef, clas
       aria-label="Emoji picker"
       className={clsx("emoji-dropup", className)}
       style={{
-        zIndex: "9999",
+        zIndex: 99999, // Must be above chat panel z-index (10002)
         width: WIDTH,
         left: pos?.left ?? -9999,
         top: pos?.top ?? -9999,

package/src/ui/{chat/message-items → message-items}/ChatAddressCard.tsx

@@ -1,12 +1,12 @@
-// components/ui/chat/message-items/ChatAddressCard.tsx
+// ui/message-items/ChatAddressCard.tsx
 "use client";
 
 import clsx from "clsx";
 import React from "react";
 
-import { ChatPhoneCallIcon, BadgeHomeIcon, MapPinIcon } from "../../../icons";
-import { BadgeOfficeIcon } from "../../../icons";
-import { cn } from "../../../utils/cn";
+import { ChatPhoneCallIcon, BadgeHomeIcon, MapPinIcon } from "../../icons";
+import { BadgeOfficeIcon } from "../../icons";
+import { cn } from "../../utils/cn";
 import type { AddressCard } from "../types";
 
 type Props = {

package/src/ui/{chat/message-items → message-items}/ChatBubbleFiles.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import React from "react";
-import { FileDownloadIcon, FileIcon } from "../../../icons";
+import { FileDownloadIcon, FileIcon } from "../../icons";
 
 export type ChatFile = {
   /** Visible filename */

package/src/ui/{chat/message-items → message-items}/ChatBubbleImages.tsx

@@ -1,9 +1,9 @@
-// components/ui/chat/message-items/ChatBubbleImages.tsx
+// ui/message-items/ChatBubbleImages.tsx
 "use client";
 
 import React from "react";
 
-import { useGallery } from "../../../contexts/GalleryContext";
+import { useGallery } from "../../contexts/GalleryContext";
 
 type ImgTileProps = {
   src: string;

package/src/ui/{chat/message-items → message-items}/ChatBusinessCard.tsx

@@ -3,7 +3,7 @@
 import clsx from "clsx";
 import React from "react";
 
-import { BusinessInfoIcon, ChatMailIcon, ChatPhoneCallIcon } from "../../../icons";
+import { BusinessInfoIcon, ChatMailIcon, ChatPhoneCallIcon } from "../../icons";
 import type { BusinessCard } from "../types";
 
 // const AVATAR_SIZE = 60; // uncomment if avatar section is re-enabled

package/src/ui/{chat/scrollToMessage.ts → scrollToMessage.ts}

@@ -1,4 +1,4 @@
-// components/chat/ui/chat/scrollToMessage.ts
+// ui/scrollToMessage.ts
 export function scrollToMessageById(messageId: string) {
   if (!messageId) {
     return;

package/src/ui/{chat/types.ts → types.ts}

@@ -1,5 +1,5 @@
-// components/chat/ui/chat/types.ts
-import type { MessageAudio, MessageFile } from "../../types";
+// ui/types.ts
+import type { MessageAudio, MessageFile } from "../types";
 
 // Re-export global types so UI components can import from this local file
 export type { MessageAudio as ChatAudio, MessageFile as ChatFile };

package/src/modals/chat/ChatTranslateSettingsModal.tsx

@@ -1,180 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import React, { useState } from "react";
-import { createPortal } from "react-dom";
-
-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 isSingle = variant === "single";
-
-  const handleSave = () => {
-    onSave({
-      incomingTarget,
-      autoIncoming: true,
-      enableOutgoing: false,
-      outgoingFrom: "English",
-      outgoingTo: "Bangla",
-    });
-  };
-
-  const content = (
-    <div
-      className={clsx(
-        isSingle
-          ? "fixed inset-0 z-9999 flex"
-          : "absolute inset-0 z-50 flex items-center justify-center",
-      )}
-      onClick={() => onClose()}
-    >
-      {/* Backdrop */}
-      <div className={isSingle ? "fixed inset-0 bg-black/30" : "absolute inset-0 bg-black/30"} />
-
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="translate-settings-title"
-        onClick={(e) => e.stopPropagation()}
-        className={clsx(
-          isSingle
-            ? "fixed bottom-6 right-6 w-[500px] max-w-[95vw]"
-            : "relative w-[500px] max-w-[95vw]",
-          "z-10000 overflow-visible rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)]",
-          className,
-        )}
-      >
-        {/* Header */}
-        <div className="flex h-[44px] w-full items-center rounded-t-md bg-[#f8f8f8] px-6 py-[7px] shadow-[0px_2px_2px_rgba(47,47,47,0.08)]">
-          <h2
-            id="translate-settings-title"
-            className="w-full text-[20px] font-semibold text-black"
-          >
-            Translation Settings
-          </h2>
-        </div>
-
-        {/* Body */}
-        <div className="p-4">
-          <div className="grid gap-2">
-            <span className="text-[12px] font-medium text-black">
-              Translate message into
-            </span>
-
-            <Select
-              options={LANG_OPTIONS}
-              value={incomingTarget}
-              onChange={setIncomingTarget}
-              placeholder="Select Language"
-              size={36}
-            />
-          </div>
-
-          <div className="mt-6 flex items-start gap-1.5 text-[#FF5300]">
-            <ChatInfoIcon className="h-4 w-4 shrink-0" />
-            <p className="text-xs leading-relaxed">
-              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>
-
-        {/* Footer */}
-        <div className="flex h-[52px] items-center justify-end rounded-b-md bg-[#f8f8f8] px-6">
-          <div className="flex items-center gap-3">
-            <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>
-  );
-
-  if (isSingle) {
-    return createPortal(content, document.body);
-  }
-
-  return content;
-};
-
-export default ChatTranslateSettingsModal;

package/src/ui/chat/ChatScroll.tsx

@@ -1,52 +0,0 @@
-"use client";
-import React from "react";
-
-type Props = {
-  top?: React.ReactNode;
-  children: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-  bottomAlignWhenShort?: boolean;
-  scrollKey?: string | number;
-};
-
-const ChatScroll: React.FC<Props> = ({
-  top,
-  children,
-  className,
-  style,
-  bottomAlignWhenShort = false,
-  scrollKey,
-}) => {
-  const ref = React.useRef<HTMLDivElement>(null);
-
-  const scrollToBottom = React.useCallback(() => {
-    const el = ref.current;
-    if (!el) return;
-    el.scrollTop = el.scrollHeight;
-  }, []);
-
-  React.useEffect(() => {
-    scrollToBottom();
-    const id = window.setTimeout(scrollToBottom, 0);
-    return () => window.clearTimeout(id);
-  }, [scrollKey, scrollToBottom]);
-
-  return (
-    <div
-      ref={ref}
-      data-chat-scroll
-      className={`h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden${className ? ` ${className}` : ""}`}
-      style={style}
-    >
-      <div
-        className={`min-h-full flex flex-col${bottomAlignWhenShort ? " justify-end" : " justify-start"}`}
-      >
-        {top}
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default ChatScroll;