@banbox/chat 1.0.0

package/src/ui/chat/drop-up/EmojiDropup.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import clsx from "clsx";
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (emoji: string) => void;
+  /** Button ref to position against */
+  anchorRef?: React.RefObject<HTMLElement | null>;
+  className?: string;
+};
+
+const EMOJIS =
+  "😀 😁 😂 🤣 😃 😄 😅 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😜 😝 😛 🫢 🤫 🤭 🤗 🤔 🤨 😐 😑 😶 🙄 😯 😪 😴 😌 🤤 😮‍💨 😮 😲 🤯 🥴 🥱 😬 😏 🤥 😕 😟 🙁 ☹️ 😢 😭".split(
+    " ",
+  );
+
+const WIDTH = 300; // fixed width (your ask)
+const GAP_Y = 1; // space above button
+const GAP_X = 1; // space right of button
+const PADDING = 1; // viewport padding
+
+const EmojiDropup: React.FC<Props> = ({ open, onClose, onSelect, anchorRef, className }) => {
+  const panelRef = React.useRef<HTMLDivElement | null>(null);
+  const [pos, setPos] = React.useState<{ left: number; top: number } | null>(null);
+
+  const place = React.useCallback(() => {
+    const anchor = anchorRef?.current;
+    const panel = panelRef.current;
+    if (!anchor || !panel) {
+      return;
+    }
+
+    // desired: to the RIGHT of button, and ABOVE it
+    const ar = anchor.getBoundingClientRect();
+    const ph = panel.offsetHeight + 10;
+
+    let left = ar.right + GAP_X - 45; // right side of button
+    let top = ar.top - GAP_Y - ph; // above the button
+
+    // clamp horizontally and vertically
+    left = Math.min(left, window.innerWidth - PADDING - WIDTH);
+    left = Math.max(left, PADDING);
+    top = Math.max(top, PADDING);
+
+    // set arrow X offset from panel's left edge so it points near the button
+    const arrowLeft = Math.max(12, Math.min(24, Math.round(Math.min(ar.right + GAP_X - left, 40))));
+    panel.style.setProperty("--arrow-left", `${arrowLeft}px`);
+
+    setPos({ left: Math.round(left), top: Math.round(top) });
+  }, [anchorRef]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    place();
+    const onScroll = () => place();
+    const onResize = () => place();
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [open, place]);
+
+  // close on outside + Esc
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onDoc = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const onEsc = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onEsc);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onEsc);
+    };
+  }, [open, onClose]);
+
+  if (!open) {
+    return null;
+  }
+
+  const body = (
+    <div
+      ref={panelRef}
+      role="dialog"
+      aria-label="Emoji picker"
+      className={clsx("emoji-dropup", className)}
+      style={{
+        zIndex: "9999",
+        width: WIDTH,
+        left: pos?.left ?? -9999,
+        top: pos?.top ?? -9999,
+        maxHeight: Math.max(140, window.innerHeight - 2 * PADDING), // dynamic height
+      }}
+    >
+      <div className="emoji-dropup__scroll">
+        <div className="grid grid-cols-7 gap-0">
+          {EMOJIS.map((e, i) => (
+            <button
+              key={i}
+              type="button"
+              className="emoji-dropup__item"
+              onClick={() => {
+                onSelect(e);
+                onClose();
+              }}
+              aria-label={`Insert ${e}`}
+            >
+              {e}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(body, document.body);
+};
+
+export default EmojiDropup;

package/src/ui/chat/message-items/ChatAddressCard.tsx

@@ -0,0 +1,130 @@
+// components/ui/chat/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 type { AddressCard } from "../types";
+
+type Props = {
+  mine?: boolean;
+  card: AddressCard;
+  className?: string;
+};
+
+type RowProps = {
+  icon: React.ReactNode;
+  label: string;
+  value?: string | null;
+  highlight?: boolean;
+};
+
+const Row: React.FC<RowProps> = ({ icon, label, value, highlight }) => {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  const trimmed = String(value).trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  const display = trimmed.length > 0 ? trimmed : "N/A";
+
+  return (
+    <div className="grid grid-cols-[18px_120px_1fr] items-start gap-1 text-xs">
+      <span className="pt-[2px] text-black">{icon}</span>
+      <strong className="truncate font-medium text-black">{label}</strong>
+      <span className={cn(highlight ? "text-black" : "text-[#747474]")}>{display}</span>
+    </div>
+  );
+};
+
+const ChatAddressCard: React.FC<Props> = ({ mine, card, className }) => {
+  const {
+    name,
+    label,
+    businessName,
+    mobileNumber,
+    country,
+    district,
+    policeStation,
+    postalCode,
+    addressLine,
+    landMark,
+  } = card;
+
+  // Build combined address:
+  // Landmark, Address line, Police Station, District, Postal Code, Country
+  const addressParts: string[] = [];
+
+  if (landMark?.trim()) {
+    addressParts.push(landMark.trim());
+  }
+  if (addressLine?.trim()) {
+    addressParts.push(addressLine.trim());
+  }
+  if (policeStation?.trim()) {
+    addressParts.push(policeStation.trim());
+  }
+  if (district?.trim()) {
+    addressParts.push(district.trim());
+  }
+  if (postalCode?.trim()) {
+    addressParts.push(postalCode.trim());
+  }
+  if (country?.trim()) {
+    addressParts.push(country.trim());
+  }
+
+  const combinedAddress = addressParts.length > 0 ? `${addressParts.join(", ")}.` : undefined;
+
+  const badge = label ? (
+    <span className="inline-flex h-[21px] items-center gap-1 rounded-xs bg-[#FFDBCF] px-2 py-[2px] text-[10px] text-[#ff5301]">
+      {label.toLowerCase() === "office" ? (
+        <BadgeOfficeIcon className="h-3 w-3" />
+      ) : (
+        <BadgeHomeIcon className="h-3 w-3" />
+      )}
+      {label}
+    </span>
+  ) : null;
+
+  return (
+    <div
+      className={clsx(
+        "w-[340px] rounded-md bg-[#f8f8f8] p-2",
+        mine ? "ml-auto" : "mr-auto",
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="mb-2 flex items-center gap-2">
+        <h3 className="text-xl font-semibold text-black">{name || "Recipient"}</h3>
+        {badge}
+      </div>
+
+      {/* Fields */}
+      <div className="space-y-[2px]">
+        <Row
+          highlight
+          icon={<BadgeOfficeIcon className="h-[14px] w-[14px]" />}
+          label="Business Name"
+          value={businessName ?? undefined}
+        />
+        <Row
+          highlight
+          icon={<ChatPhoneCallIcon className="h-[14px] w-[14px]" />}
+          label="Mobile Number"
+          value={mobileNumber ?? undefined}
+        />
+        <Row icon={<MapPinIcon className="h-4 w-4" />} label="Address" value={combinedAddress} />
+      </div>
+    </div>
+  );
+};
+
+export default ChatAddressCard;

package/src/ui/chat/message-items/ChatBubbleAudio.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import clsx from "clsx";
+import React from "react";
+
+export type ChatAudio = {
+  /** Local or remote audio file (e.g. "/chat/audio/sample.mp3") */
+  src?: string;
+  /** Optional display-only duration; will be auto-derived if omitted */
+  duration?: string;
+};
+
+const formatSec = (s: number) => {
+  if (!isFinite(s) || s < 0) {
+    return "0:00";
+  }
+  const m = Math.floor(s / 60);
+  const ss = Math.floor(s % 60)
+    .toString()
+    .padStart(2, "0");
+  return `${m}:${ss}`;
+};
+
+const PlayIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg viewBox="0 0 20 20" className={className} fill="currentColor" aria-hidden>
+    <path d="M6 4.5v11l9-5.5-9-5.5Z" />
+  </svg>
+);
+
+const PauseIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg viewBox="0 0 20 20" className={className} fill="currentColor" aria-hidden>
+    <path d="M5 4h4v12H5V4zm6 0h4v12h-4V4z" />
+  </svg>
+);
+
+/** Registry so only one audio plays at a time */
+const audioRegistry = new Set<HTMLAudioElement>();
+
+const ChatBubbleAudio: React.FC<{ mine: boolean; audio: ChatAudio }> = ({ mine, audio }) => {
+  const ref = React.useRef<HTMLAudioElement>(null);
+  const trackRef = React.useRef<HTMLDivElement>(null);
+
+  const [playing, setPlaying] = React.useState(false);
+  const [progress, setProgress] = React.useState(0); // 0..100
+  const [durSec, setDurSec] = React.useState<number>(0);
+  const [remain, setRemain] = React.useState<string>(audio.duration ?? "0:00");
+
+  // Register/unregister this audio element
+  React.useEffect(() => {
+    const a = ref.current;
+    if (!a) {
+      return;
+    }
+    audioRegistry.add(a);
+    const onPause = () => setPlaying(false);
+    const onPlay = () => setPlaying(true);
+    a.addEventListener("pause", onPause);
+    a.addEventListener("play", onPlay);
+    return () => {
+      a.removeEventListener("pause", onPause);
+      a.removeEventListener("play", onPlay);
+      audioRegistry.delete(a);
+    };
+  }, []);
+
+  const pauseOthers = (current: HTMLAudioElement) => {
+    audioRegistry.forEach((a) => {
+      if (a !== current && !a.paused) {
+        a.pause(); // their 'pause' listener updates their local state
+      }
+    });
+  };
+
+  const applyProgressToAudio = (pct: number) => {
+    const a = ref.current;
+    if (!a || !isFinite(a.duration) || a.duration <= 0) {
+      return;
+    }
+    const clamped = Math.min(100, Math.max(0, pct));
+    a.currentTime = (clamped / 100) * a.duration;
+    setProgress(clamped);
+    setRemain(formatSec(a.duration - a.currentTime));
+  };
+
+  const toggle = () => {
+    const a = ref.current;
+    if (!a) {
+      return;
+    }
+    if (a.paused) {
+      pauseOthers(a);
+      a.play();
+      // setPlaying will be driven by 'play' event too; keep optimistic:
+      setPlaying(true);
+    } else {
+      a.pause();
+      setPlaying(false);
+    }
+  };
+
+  const onTime = () => {
+    const a = ref.current;
+    if (!a) {
+      return;
+    }
+    const pct = (a.currentTime / (a.duration || 1)) * 100;
+    setProgress(isFinite(pct) ? pct : 0);
+    setRemain(formatSec((a.duration || 0) - a.currentTime));
+  };
+
+  const onLoaded = () => {
+    const a = ref.current;
+    if (!a) {
+      return;
+    }
+    setDurSec(a.duration || 0);
+    setRemain(formatSec(a.duration || 0));
+  };
+
+  // --- custom slider (no borders), draggable ---------------------------------
+  const pctFromClientX = (clientX: number) => {
+    const el = trackRef.current;
+    if (!el) {
+      return progress;
+    }
+    const rect = el.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const pct = (x / rect.width) * 100;
+    return Math.min(100, Math.max(0, pct));
+  };
+
+  const handleTrackClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    applyProgressToAudio(pctFromClientX(e.clientX));
+  };
+
+  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    (e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
+    applyProgressToAudio(pctFromClientX(e.clientX));
+  };
+
+  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if ((e.currentTarget as HTMLDivElement).hasPointerCapture(e.pointerId)) {
+      applyProgressToAudio(pctFromClientX(e.clientX));
+    }
+  };
+
+  return (
+    <div className="h-9 max-w-[260px] rounded-lg border border-[#E5E5E5] bg-white px-[3px] py-[3px]">
+      <div className="flex items-center gap-3">
+        {/* Play/Pause pill */}
+        <button
+          type="button"
+          aria-label={playing ? "Pause" : "Play"}
+          onClick={toggle}
+          className={clsx(
+            "grid h-7 w-[34px] place-items-center rounded-md transition-colors",
+            mine ? "bg-[#F1F1F1] text-[#00486F]" : "bg-[#F1F1F1] text-[#00486F]",
+          )}
+        >
+          {playing ? <PauseIcon className="h-4 w-4" /> : <PlayIcon className="h-4 w-4" />}
+        </button>
+
+        {/* Track (custom, borderless, draggable) */}
+        <div
+          ref={trackRef}
+          onClick={handleTrackClick}
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          className="relative h-[4px] w-[186px] cursor-pointer select-none rounded-full bg-[#BDBDBD]"
+          aria-label="Seek"
+          role="slider"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={Math.round(progress)}
+        >
+          {/* filled portion */}
+          <div
+            className="absolute left-0 top-0 h-full rounded-full bg-[#747474]"
+            style={{ width: `${progress}%` }}
+          />
+          {/* knob */}
+          <div
+            className="absolute top-1/2 -translate-y-1/2 h-3 w-3 rounded-full bg-[#747474]"
+            style={{ left: `calc(${progress}% - 6px)` }}
+          />
+        </div>
+
+        {/* Countdown (remaining) */}
+        <span className="pe-[4px] text-xs font-normal text-[#747474]">
+          {remain || (durSec ? formatSec(durSec) : "0:00")}
+        </span>
+      </div>
+
+      {audio.src ? (
+        <audio
+          ref={ref}
+          src={audio.src}
+          preload="metadata"
+          onTimeUpdate={onTime}
+          onLoadedMetadata={onLoaded}
+          onEnded={() => setPlaying(false)}
+          className="hidden"
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default ChatBubbleAudio;

package/src/ui/chat/message-items/ChatBubbleFiles.tsx

@@ -0,0 +1,80 @@
+import clsx from "clsx";
+import React from "react";
+import { FileDownloadIcon, FileIcon } from "../../../icons";
+
+export type ChatFile = {
+  /** Visible filename */
+  name: string;
+  /** File size in MB (display only) */
+  sizeMB: number;
+  /** File extension, e.g. "pdf" | "pptx" | "docx" */
+  ext: string;
+  /** Local or remote path to the file (e.g. "/chat/files/spec.pdf") */
+  href?: string;
+  /** Optional: force browser download */
+  downloadName?: string;
+};
+
+const extColor = (ext: string) => {
+  const e = ext.toLowerCase();
+  if (e === "pdf") {
+    return "text-[#D93025]";
+  }
+  if (e === "ppt" || e === "pptx") {
+    return "text-[#E69138]";
+  }
+  if (e === "doc" || e === "docx") {
+    return "text-[#2B579A]";
+  }
+  return "text-[#6B7280]";
+};
+
+const FileChip: React.FC<{ file: ChatFile }> = ({ file }) => (
+  <div className="flex items-center justify-between gap-3 rounded-sm border border-[#e1e1e1] bg-white px-3 py-2">
+    <div className="flex min-w-0 items-center gap-2">
+      <div className="min-w-0">
+        <div className="flex items-center gap-1">
+          <FileIcon className={clsx("h-[18px] w-[18px]", extColor(file.ext))} />{" "}
+          <div className="truncate text-xs font-normal text-black">{file.name}</div>
+        </div>
+        <div className="flex items-center gap-2 text-[10px] text-[#636363] mt-2">
+          <span>{file.sizeMB.toFixed(1)} MB</span>
+          <span className="h-3 w-px bg-[#e1e1e1]" />
+          <span className="uppercase">{file.ext}</span>
+        </div>
+      </div>
+    </div>
+    <div className="flex items-center gap-3">
+      <span className="h-[41px] w-px bg-[#cacaca]" />
+      {file.href ? (
+        <a
+          href={file.href}
+          download={file.downloadName}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex h-7 w-[28px] items-center justify-center rounded-full text-black hover:text-[#ff5301] shadow-[0px_2px_4px_0px_#A5A3AE4D]"
+          title={file.downloadName}
+          aria-label={file.downloadName}
+        >
+          <FileDownloadIcon className="h-5 w-5" />
+        </a>
+      ) : (
+        <span className="flex h-7 w-[28px] items-center justify-center rounded-full text-[#9ca3af]">
+          <FileDownloadIcon className="h-5 w-5" />
+        </span>
+      )}
+    </div>
+  </div>
+);
+
+const ChatBubbleFiles: React.FC<{ files: ChatFile[] }> = ({ files }) => {
+  return (
+    <div className="flex max-w-[260px] flex-col gap-1">
+      {files.map((f, i) => (
+        <FileChip key={i} file={f} />
+      ))}
+    </div>
+  );
+};
+
+export default ChatBubbleFiles;

package/src/ui/chat/message-items/ChatBubbleImages.tsx

@@ -0,0 +1,120 @@
+// components/ui/chat/message-items/ChatBubbleImages.tsx
+"use client";
+
+import React from "react";
+
+import { useGallery } from "../../../contexts/GalleryContext";
+
+type ImgTileProps = {
+  src: string;
+  w: number;
+  h: number;
+  overlayText?: string;
+  onClick?: () => void;
+};
+
+const ImgTile: React.FC<ImgTileProps> = ({ src, w, h, overlayText, onClick }) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="relative cursor-zoom-in overflow-hidden rounded-sm border border-[#EFEFEF] bg-[#F5F7FA]"
+      style={{ width: w, height: h }}
+      aria-label="Open image"
+    >
+      <img
+        src={src}
+        alt=""
+        width={w}
+        height={h}
+        className="h-full w-full object-cover"
+        loading="lazy"
+      />
+
+      {overlayText ? (
+        <div className="absolute inset-0 grid place-items-center bg-black/35">
+          <span className="text-4xl font-semibold text-white">+{overlayText}</span>
+        </div>
+      ) : null}
+    </button>
+  );
+};
+
+type Props = {
+  images: string[];
+};
+
+const ChatBubbleImages: React.FC<Props> = ({ images }) => {
+  const { openGallery } = useGallery();
+
+  const openAt = (index: number) => {
+    openGallery(
+      images.map((url) => ({
+        type: "image",
+        url,
+        altText: "Chat image",
+      })),
+      index,
+    );
+  };
+
+  const count = images.length;
+
+  // 1 image → 260 × 174
+  if (count === 1) {
+    return <ImgTile src={images[0]} w={260} h={174} onClick={() => openAt(0)} />;
+  }
+
+  // 2 images → 2 columns, 125 × 83
+  if (count === 2) {
+    return (
+      <div className="grid grid-cols-2 gap-1">
+        {images.map((src, i) => (
+          <ImgTile key={src + i} src={src} w={125} h={83} onClick={() => openAt(i)} />
+        ))}
+      </div>
+    );
+  }
+
+  // 3 images → asymmetric layout
+  if (count === 3) {
+    const [a, b, c] = images;
+
+    return (
+      <div className="grid grid-cols-[125px_125px] gap-1">
+        {/* Left column */}
+        <div className="flex flex-col gap-2">
+          <div style={{ width: 125, height: 83 }} />
+          <ImgTile src={a} w={125} h={83} onClick={() => openAt(0)} />
+        </div>
+
+        {/* Right column */}
+        <div className="flex flex-col gap-2">
+          <ImgTile src={b} w={125} h={83} onClick={() => openAt(1)} />
+          <ImgTile src={c} w={125} h={83} onClick={() => openAt(2)} />
+        </div>
+      </div>
+    );
+  }
+
+  // 4+ images → 2×2 grid, overlay on last tile
+  const visible = images.slice(0, 4);
+  const extraCount = count - 4;
+
+  return (
+    <div className="grid grid-cols-2 gap-1">
+      {visible.map((src, i) => (
+        <ImgTile
+          key={src + i}
+          src={src}
+          w={125}
+          h={83}
+          overlayText={i === 3 && extraCount > 0 ? String(extraCount) : undefined}
+          onClick={() => openAt(i)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ChatBubbleImages;

package/src/ui/chat/message-items/ChatBubbleText.tsx

@@ -0,0 +1,16 @@
+// ChatBubbleText.tsx
+import clsx from "clsx";
+import React from "react";
+
+const ChatBubbleText: React.FC<{ mine: boolean; text: string }> = ({ mine, text }) => {
+  const base =
+    "max-w-[289px] rounded-sm border border-[#f1f1f1] px-4 py-2.5 text-xs font-normal";
+  const color = mine ? "bg-[#f8f8f8] border-[#f1f1f1]" : "bg-white border-[#EFEFEF]";
+  const corner = mine ? "rounded-tr-[6px]" : "rounded-tl-md";
+  // key bit: preserve line breaks + spaces and still wrap long words
+  const textFormatting = "whitespace-pre-wrap break-words";
+
+  return <div className={clsx(base, color, corner, textFormatting)}>{text}</div>;
+};
+
+export default ChatBubbleText;