@banbox/chat 1.0.0

package/src/ui/chat/ChatListHeader.tsx

@@ -0,0 +1,179 @@
+// components/ui/chat/ChatListHeader.tsx
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { Variants } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { MessageIcon, ChatSearchIcon, ChatXIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+/* =======================
+   Types
+======================= */
+
+type Props = {
+  className?: string;
+  onClose?: () => void;
+  onSearchChange?: (value: string) => void;
+};
+
+/* =======================
+   Component
+======================= */
+
+const ChatListHeader = ({ className, onClose, onSearchChange }: Props) => {
+  const [searching, setSearching] = useState(false);
+  const [q, setQ] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (searching) {
+      const timer = setTimeout(() => inputRef.current?.focus(), 200);
+      return () => clearTimeout(timer);
+    }
+  }, [searching]);
+
+  useEffect(() => {
+    if (!searching) {
+      return;
+    }
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setSearching(false);
+        setQ("");
+        onSearchChange?.("");
+      }
+    };
+
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [searching, onSearchChange]);
+
+  // const clearInside = () => {
+  //   setQ("");
+  //   onSearchChange?.("");
+  //   inputRef.current?.focus();
+  // };
+
+  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] },
+    },
+  };
+
+  return (
+    <div className={cn("h-[64px] border-b border-[#ededed]", className)}>
+      <div className="flex h-full items-center px-[20px]">
+        <AnimatePresence initial={false} mode="wait">
+          {!searching ? (
+            /* =======================
+               Normal header
+            ======================= */
+            <motion.div
+              key="normal"
+              className="flex w-full items-center justify-between"
+              initial={{ opacity: 0, x: -24 }}
+              animate="inFromLeft"
+              exit="outToLeft"
+              variants={variants}
+            >
+              <div className="flex items-center gap-3">
+                <div className="flex items-center gap-2 text-[#2c2c2c]">
+                  <MessageIcon className="h-6 w-6" />
+                  <span className="text-[22px] font-semibold">Messenger</span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  title="Search"
+                  onClick={() => setSearching(true)}
+                  className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-black/5"
+                >
+                  <ChatSearchIcon className="h-6 w-6" />
+                </button>
+
+                <button
+                  type="button"
+                  title="Close"
+                  onClick={onClose}
+                  className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-black/5"
+                >
+                  <ChatXIcon className="h-6 w-6" />
+                </button>
+              </div>
+            </motion.div>
+          ) : (
+            /* =======================
+               Search header
+            ======================= */
+            <motion.div
+              key="search"
+              className="flex w-full items-center gap-3"
+              initial={{ opacity: 0, x: 24 }}
+              animate="inFromRight"
+              exit="outToRight"
+              variants={variants}
+            >
+              <div className="relative flex-1">
+                <div className="flex justify-between h-10 w-full items-center gap-1.5 rounded-full border border-[#6A6A6A] bg-white px-[4px]">
+                  <div className="ms-[12px] flex items-center">
+                    <span className="mr-2 grid h-6 w-6 shrink-0 place-items-center text-#929292]">
+                      <ChatSearchIcon className="h-5 w-5" />
+                    </span>
+                    <span className="mr-2 h-6 w-px shrink-0 bg-[#e1e1e1]" />
+                    <input
+                      ref={inputRef}
+                      value={q}
+                      onChange={(e) => {
+                        setQ(e.target.value);
+                        onSearchChange?.(e.target.value);
+                      }}
+                      placeholder="Search"
+                      className="h-full w-full flex-1 bg-transparent text-[15px] outline-none placeholder:text-[#9C9C9C]"
+                    />
+                  </div>
+
+                  <button
+                    type="button"
+                    title="Close search"
+                    onClick={() => {
+                      setSearching(false);
+                      setQ("");
+                      onSearchChange?.("");
+                    }}
+                    className="flex h-8! w-8! items-center justify-center rounded-full hover:bg-black/5"
+                  >
+                    <ChatXIcon className="h-5 w-5" />
+                  </button>
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+};
+
+export default ChatListHeader;

package/src/ui/chat/ChatMessageItem.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import ChatAddressCard from "./message-items/ChatAddressCard";
+import ChatBubbleAudio from "./message-items/ChatBubbleAudio";
+import ChatBubbleFiles from "./message-items/ChatBubbleFiles";
+import ChatBubbleImages from "./message-items/ChatBubbleImages";
+import ChatBubbleText from "./message-items/ChatBubbleText";
+import ChatBusinessCard from "./message-items/ChatBusinessCard";
+import MessageHoverActions from "./MessageHoverActions";
+import ReplyCard from "./ReplyCard";
+import type { AddressCard, BusinessCard, MessageRef } from "./types";
+import { cn } from "../../utils/cn";
+
+/* =======================
+   Demo translator
+======================= */
+
+const toBanglaDemo = (s: string): 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}`;
+};
+
+/* =======================
+   Types
+======================= */
+
+export type ChatAudio = {
+  src?: string;
+  duration?: string;
+};
+
+export type ChatFile = {
+  name: string;
+  sizeMB: number;
+  ext: string;
+  href?: string;
+  downloadName?: string;
+};
+
+export type ChatMessageItemProps = {
+  id: string;
+  mine?: boolean;
+  time: string;
+  authorInitial?: string;
+  avatarBg?: string;
+
+  text?: string;
+  businessCard?: BusinessCard;
+  addressCard?: AddressCard;
+  images?: string[];
+  files?: ChatFile[];
+  audio?: ChatAudio;
+
+  replyTo?: MessageRef;
+  showStatus?: boolean;
+  status?: string;
+  className?: string;
+
+  onReply?: () => void;
+  onTranslate?: () => void;
+
+  initialSrc?: string;
+};
+
+/* =======================
+   Component
+======================= */
+
+const ChatMessageItem = ({
+  id,
+  mine = false,
+  time,
+  authorInitial = "U",
+  avatarBg = "#ffffff",
+  text,
+  businessCard,
+  addressCard,
+  images,
+  files,
+  audio,
+  replyTo,
+  showStatus = false,
+  status = "Seen",
+  className,
+  onReply,
+  onTranslate,
+  initialSrc,
+}: ChatMessageItemProps) => {
+  const originalText = useMemo(() => text ?? "", [text]);
+  const [translated, setTranslated] = useState(false);
+
+  const displayText = translated ? toBanglaDemo(originalText) : originalText;
+
+  const handleTranslateClick = () => {
+    setTranslated((v) => !v);
+    onTranslate?.();
+  };
+
+  const isOnline = true;
+
+  return (
+    <div className={cn("mb-4", className)} data-msg-id={id}>
+      <div className={cn("flex items-end gap-3", mine && "justify-end")}>
+        {!mine ? (
+          <div className={cn(showStatus ? "mb-5" : "mb-0")}>
+            {initialSrc ? (
+              <div className="relative h-10 w-10 shrink-0 rounded-full border border-[#F1F1F1]">
+                <img
+                  src={initialSrc}
+                  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" />
+                ) : null}
+              </div>
+            ) : (
+              <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 }}
+              >
+                {authorInitial}
+
+                {isOnline ? (
+                  <span className="absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" />
+                ) : null}
+              </div>
+            )}
+          </div>
+        ) : null}
+
+        <div className="flex w-full flex-col gap-1">
+          <div
+            className={cn(
+              "text-xs font-light text-[#636363]",
+              mine ? "text-right" : "text-left",
+            )}
+          >
+            {time}
+          </div>
+
+          <div className={cn("flex w-full flex-col gap-1", mine ? "items-end" : "items-start")}>
+            {/* Reply preview */}
+            <div className={cn("flex w-full", mine ? "justify-end" : "justify-start")}>
+              {replyTo ? <ReplyCard jumpOnClick refMsg={replyTo} compact className="mb-1" /> : null}
+            </div>
+
+            {businessCard ? <ChatBusinessCard mine={mine} card={businessCard} /> : null}
+            {addressCard ? <ChatAddressCard mine={mine} card={addressCard} /> : null}
+
+            {files?.length ? (
+              <MessageHoverActions mine={mine} onReply={onReply} isItemButton={["replay"]}>
+                <ChatBubbleFiles files={files} />
+              </MessageHoverActions>
+            ) : null}
+
+            {images?.length ? (
+              <MessageHoverActions mine={mine} onReply={onReply} isItemButton={["replay"]}>
+                <ChatBubbleImages images={images} />
+              </MessageHoverActions>
+            ) : null}
+
+            {audio ? (
+              <MessageHoverActions
+                mine={mine}
+                onReply={onReply}
+                onTranslate={onTranslate}
+                isItemButton={["replay", "translate"]}
+              >
+                <ChatBubbleAudio mine={mine} audio={audio} />
+              </MessageHoverActions>
+            ) : null}
+
+            {typeof text === "string" && text.length > 0 ? (
+              <MessageHoverActions
+                mine={mine}
+                onReply={onReply}
+                onTranslate={handleTranslateClick}
+                isItemButton={["replay", "translate"]}
+                activeButtons={translated ? ["translate"] : []}
+              >
+                <ChatBubbleText mine={mine} text={displayText} />
+              </MessageHoverActions>
+            ) : null}
+
+            {showStatus ? (
+              <div className={cn("text-xs text-[#9AA1A9]", mine ? "text-right" : "text-left")}>
+                {status}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatMessageItem;

package/src/ui/chat/ChatScroll.tsx

@@ -0,0 +1,64 @@
+"use client";
+import clsx from "clsx";
+import React from "react";
+
+type Props = {
+  top?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  /** 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.FC<Props> = ({
+  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
+  React.useEffect(() => {
+    // immediate
+    scrollToBottom();
+    // nudge after paint/layout (covers images)
+    const id = window.setTimeout(scrollToBottom, 0);
+    return () => window.clearTimeout(id);
+  }, [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-start",
+        )}
+      >
+        {top}
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ChatScroll;

package/src/ui/chat/ChatSpinner.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { cn } from "../../utils/cn";
+
+/* ===========================================================
+   ChatSpinner
+   Matches the inline-area spinner from the seller app's
+   PageLoader (dark dual-ring on white background).
+=========================================================== */
+
+type Props = {
+  className?: string;
+  /** Size in px (default 32) */
+  size?: number;
+};
+
+const ChatSpinner: React.FC<Props> = ({ className, size = 32 }) => (
+  <>
+    <style>{`
+      @keyframes banbox-chat-spin {
+        to { transform: rotate(360deg); }
+      }
+    `}</style>
+    <div className={cn("flex items-center justify-center", className)}>
+      <svg
+        style={{
+          width: size,
+          height: size,
+          animation: "banbox-chat-spin 1.4s linear infinite",
+        }}
+        viewBox="0 0 36 36"
+        fill="none"
+        aria-hidden="true"
+      >
+        <circle cx="18" cy="18" r="15" stroke="#e5e7eb" strokeWidth="3" />
+        <circle
+          cx="18"
+          cy="18"
+          r="15"
+          stroke="#3d3d3d"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeDasharray="22 72"
+        />
+      </svg>
+    </div>
+  </>
+);
+
+export default ChatSpinner;

package/src/ui/chat/ChatThreadItem.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { BlueBadgeIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+/* =======================
+   Types
+======================= */
+
+export type ChatThreadStatus =
+  | { kind: "seen" }
+  | { kind: "delivered" }
+  | { kind: "new"; count: number };
+
+type Props = {
+  active?: boolean;
+  pinned?: boolean;
+  online?: boolean;
+  verified?: boolean;
+
+  title: string;
+  preview: string;
+  time: string;
+
+  status: ChatThreadStatus;
+
+  avatarText: string;
+  avatarSrc?: string;
+  size?: number;
+  avatarBg?: string;
+  className?: string;
+  onClick?: () => void;
+};
+
+/* =======================
+   Helpers
+======================= */
+
+const formatTwoDigits = (value: number): string => {
+  return String(Math.max(0, value)).padStart(2, "0");
+};
+
+/* =======================
+   Component
+======================= */
+
+const ChatThreadItem = ({
+  active = false,
+  pinned = false,
+  online = false,
+  verified = false,
+  title,
+  preview,
+  time,
+  status,
+  avatarText,
+  avatarSrc,
+  avatarBg = "#FFE5DA",
+  className,
+  onClick,
+}: Props) => {
+  const statusEl = (() => {
+    switch (status.kind) {
+      case "seen":
+        return <span className="text-[#005694]">Seen</span>;
+
+      case "delivered":
+        return <span className="text-[#929292]">Delivered</span>;
+
+      case "new":
+        return <span className="text-[#EB2127]">New {formatTwoDigits(status.count)}</span>;
+    }
+  })();
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "relative w-full px-5 py-2 text-left focus:outline-none border-b border-[#f1f1f1]",
+        "hover:bg-[#f8f8f8]",
+        active && "bg-[#f8f8f8]",
+        className,
+      )}
+    >
+      {/* Pinned corner */}
+      {pinned ? (
+        <span className="absolute right-0 top-0 h-0 w-0 border-l-16 border-t-16 border-l-transparent border-t-[#FFD2BD]" />
+      ) : null}
+
+      <div className="flex items-start gap-3">
+        <div className="relative shrink-0" style={{ width: 36, height: 36 }}>
+          {avatarSrc ? (
+            <div className="h-9 w-9 overflow-hidden rounded-[2px] border border-[#f1f1f1]">
+              <img src={avatarSrc} alt={title} className="h-full w-full rounded-[2px] object-cover" />
+            </div>
+          ) : (
+            <div
+              className="grid h-9 w-9 place-items-center rounded-[2px] border border-[#f1f1f1] text-[15px] font-semibold text-[#2c2c2c]"
+              style={{ backgroundColor: avatarBg }}
+            >
+              {avatarText}
+            </div>
+          )}
+
+          <span
+            className={cn(
+              "absolute rounded-full",
+              online ? "bg-[#74A380]" : "bg-[#EB2127]",
+            )}
+            style={{ bottom: -1.5, right: -1.5, width: 11.25, height: 11.25, border: "1px solid #FFFFFF" }}
+          />
+        </div>
+
+        {/* Content */}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-1 text-[14px]">
+            <span className="truncate font-medium text-black">{title}</span>
+            {verified ? (
+              <span>
+                <BlueBadgeIcon />
+              </span>
+            ) : null}
+          </div>
+
+          <div className="truncate text-xs font-normal text-[#2c2c2c]">
+            {preview}
+          </div>
+
+          <div className="mt-0.5 flex items-center justify-between text-[12px]">
+            <div>{statusEl}</div>
+            <span className="font-light text-[#636363] tracking-[0.5px]">{time}</span>
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+};
+
+export default ChatThreadItem;