@banbox/chat 1.0.0

package/src/ui/chat/MessageHoverActions.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import React from "react";
+
+import { MessageReplayIcon } from "../../icons";
+import { NewLanguageIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+/* =======================
+   Types
+======================= */
+
+type ItemButton = "replay" | "translate";
+
+type Props = {
+  mine: boolean;
+  onReply?: () => void;
+  onTranslate?: () => void;
+  children: React.ReactNode;
+  className?: string;
+  alwaysVisible?: boolean;
+
+  /** Which buttons to show (omit => show all) */
+  isItemButton?: ItemButton[];
+  /** Which buttons are “active/on” for styling */
+  activeButtons?: ItemButton[];
+};
+
+/* =======================
+   Component
+======================= */
+
+const MessageHoverActions: React.FC<Props> = ({
+  mine,
+  onReply,
+  onTranslate,
+  children,
+  className,
+  alwaysVisible = false,
+  isItemButton,
+  activeButtons,
+}) => {
+  const sidePos = mine ? "right-full" : "left-full";
+  const railNudge = mine ? "-translate-x-1.5" : "translate-x-1.5";
+
+  const showReplay = !isItemButton || isItemButton.includes("replay");
+  const showTranslate = !isItemButton || isItemButton.includes("translate");
+  const hasAny = showReplay || showTranslate;
+
+  const isActive = (k: ItemButton) => Boolean(activeButtons?.includes(k));
+
+  return (
+    <div className={cn("relative inline-flex group/message", className)}>
+      {children}
+
+      {hasAny ? (
+        <div
+          aria-hidden
+          className={cn(
+            "pointer-events-auto absolute inset-y-0 w-2",
+            mine ? "right-full" : "left-full",
+          )}
+        />
+      ) : null}
+
+      {hasAny ? (
+        <div
+          className={cn(
+            "pointer-events-auto absolute bottom-0 transition-opacity",
+            sidePos,
+            railNudge,
+            alwaysVisible ? "opacity-100" : "opacity-0 group-hover/message:opacity-100",
+          )}
+        >
+          <div className="flex gap-2 pb-[2px]">
+            {showReplay ? (
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onReply?.();
+                }}
+                className={cn(
+                  "inline-flex h-[22px] w-[22px] items-center justify-center rounded-xs bg-white ",
+                  "shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
+                  isActive("replay") ? "bg-[#636363] text-white" : "text-[#2c2c2c]",
+                )}
+                title="Reply"
+                aria-label="Reply"
+              >
+                <MessageReplayIcon className="h-[14px] w-[14px]" />
+              </button>
+            ) : null}
+
+            {showTranslate ? (
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onTranslate?.();
+                }}
+                className={cn(
+                  "inline-flex h-[22px] w-[22px] items-center justify-center rounded-xs bg-white ",
+                  "shadow-banbox-card-secondary hover:bg-[#f8f8f8]",
+                  isActive("translate") ? "bg-[#636363]! text-white" : "text-[#2c2c2c]",
+                )}
+                title="Translate"
+                aria-label="Translate"
+              >
+                <NewLanguageIcon className="h-[14px] w-[14px]" />
+              </button>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default MessageHoverActions;

package/src/ui/chat/ReplyCard.tsx

@@ -0,0 +1,217 @@
+// components/chat/ui/chat/ReplyCard.tsx
+"use client";
+
+import clsx from "clsx";
+import React from "react";
+import { ArrowBackUpIcon, FileIcon, ChatXIcon } from "../../icons";
+import { scrollToMessageById } from "./scrollToMessage";
+import type { MessageRef } from "./types";
+
+type Props = {
+  refMsg: MessageRef;
+  onClose?: () => void; // present in composer bar
+  compact?: boolean;
+  className?: string;
+  jumpOnClick?: boolean;
+};
+
+const fmt = (s: number) => {
+  if (!Number.isFinite(s) || s <= 0) {
+    return "0:00";
+  }
+  const m = Math.floor(s / 60);
+  const sec = Math.round(s % 60)
+    .toString()
+    .padStart(2, "0");
+  return `${m}:${sec}`;
+};
+
+const ReplyCard: React.FC<Props> = ({ refMsg, onClose, compact, className, jumpOnClick }) => {
+  const hasText = !!refMsg.text && refMsg.text.trim().length > 0;
+  const hasFiles = (refMsg.files?.length ?? 0) > 0;
+  const hasImages = (refMsg.images?.length ?? 0) > 0;
+  // const hasAudio = !!refMsg.audio;
+
+  // priority matches your examples
+  const mode: "text" | "files" | "images" | "audio" = hasText
+    ? "text"
+    : hasFiles
+      ? "files"
+      : hasImages
+        ? "images"
+        : "audio";
+
+  const widthClamp = onClose ? "w-full" : "max-w-[200px] w-full";
+  const heightClamp = compact ? "py-1.5" : "py-1.5";
+
+  // ── Dynamic audio duration (no playback) ────────────────────────────────
+  const [durTxt, setDurTxt] = React.useState<string>(refMsg.audio?.duration ?? "0:06");
+
+  React.useEffect(() => {
+    if (mode !== "audio" || !refMsg.audio?.src) {
+      setDurTxt(refMsg.audio?.duration ?? "0:06");
+      return;
+    }
+
+    let disposed = false;
+    const a = new Audio();
+    a.preload = "metadata";
+    a.src = refMsg.audio.src;
+
+    const onLoaded = () => {
+      if (disposed) {
+        return;
+      }
+      const d = Number(a.duration);
+      setDurTxt(fmt(d));
+    };
+
+    const onError = () => {
+      if (disposed) {
+        return;
+      }
+      // keep any provided duration or fallback
+      setDurTxt(refMsg.audio?.duration ?? "0:06");
+    };
+
+    a.addEventListener("loadedmetadata", onLoaded);
+    a.addEventListener("error", onError);
+
+    // force metadata fetch: some browsers need load() trigger
+    try {
+      a.load?.();
+    } catch {
+      /* empty */
+    }
+
+    return () => {
+      disposed = true;
+      a.pause?.();
+      // help GC
+      a.src = "";
+      a.removeAttribute?.("src");
+      a.load?.();
+      a.removeEventListener("loadedmetadata", onLoaded);
+      a.removeEventListener("error", onError);
+    };
+  }, [mode, refMsg.audio?.src, refMsg.audio?.duration]);
+
+  const clickToJump = React.useCallback(() => {
+    if (!jumpOnClick) {
+      return;
+    }
+    // Use refMsg.id – make sure MessageRef includes `id: string`
+    if (refMsg.id) {
+      scrollToMessageById(refMsg.id);
+    }
+  }, [jumpOnClick, refMsg.id]);
+
+  return (
+    <div
+      onClick={clickToJump}
+      className={clsx(
+        widthClamp,
+        "relative rounded-md bg-[#f8f8f8] px-3",
+        "border-l-2 border-[#FF5300]",
+        "shadow-[0_1px_2px_rgba(0,0,0,0.04)]",
+        heightClamp,
+        className,
+      )}
+    >
+      {/* header row */}
+      <div className="mb-1.5 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <ArrowBackUpIcon className="h-[18px] w-[18px]" />
+          <div className="text-[13px] font-normal  text-[#2c2c2c]">Reply</div>
+        </div>
+
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            className="absolute right-3 top-1/2 -translate-y-1/2 grid h-8 w-8 place-items-center rounded-full bg-white text-[#3D3D3D] shadow-[0px_2px_4px_0px_#A5A3AE4D]  hover:text-[#FF5300]"
+            title="Remove"
+            aria-label="Remove"
+          >
+            <ChatXIcon className="h-[18px] w-[18px]" />
+          </button>
+        )}
+      </div>
+
+      {/* content preview */}
+      <div className="pb-1">
+        {mode === "text" && (
+          <div className="truncate text-[13px] text-[#636363]">
+            {refMsg.text!.replace(/\s+/g, " ")}
+          </div>
+        )}
+
+        {mode === "files" && (
+          <div className="flex items-center gap-2 h-[21px]">
+            <span className="inline-flex items-center gap-1 rounded-sm border-[0.7px] border-[#e1e1e1] bg-white px-2.5 py-[2px]">
+              <FileIcon className="h-4 w-4 text-[#6B7280]" />
+              <span className="max-w-[110px] truncate text-[10px] text-[#2c2c2c]">
+                {refMsg.files![0].name}
+              </span>
+            </span>
+            {refMsg.files!.length > 1 && (
+              <span className=" text-xs text-[#636363]">
+                +{refMsg.files!.length - 1}
+              </span>
+            )}
+          </div>
+        )}
+
+        {mode === "images" && (
+          <div className="flex items-center gap-1.5">
+            {refMsg.images!.slice(0, 3).map((src, i) => {
+              const extra = refMsg.images!.length - 3;
+              const isLast = i === 2 && extra > 0;
+              return (
+                <div
+                  key={i}
+                  className="relative h-[21px] w-[26px] overflow-hidden rounded-sm border border-[#E5E5E5] bg-[#F5F7FA]"
+                >
+                  <img src={src} alt="" className="h-full w-full object-cover" />
+                  {isLast && (
+                    <div className="absolute inset-0 grid place-items-center bg-black/40">
+                      <span className=" text-xs font-semibold text-white">+{extra}</span>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {mode === "audio" && (
+          <div className="flex items-center gap-2 h-[21px] border border-[#D8D8D8] rounded-[3.5px] p-[1.75px] max-w-[151px]">
+            {/* static play pill (no handlers) */}
+            <span className="grid h-[17.5px] w-[18.08px] place-items-center rounded-[2.33px] bg-[#f1f1f1] text-[#00486F]">
+              <svg viewBox="0 0 20 20" className="h-3 w-3" fill="currentColor" aria-hidden>
+                <path d="M6 4.5v11l9-5.5-9-5.5Z" />
+              </svg>
+            </span>
+
+            {/* mini progress bar (visual only) */}
+            <div className="relative h-[1.17px] w-[130px] rounded-full bg-[#BDBDBD]">
+              <span
+                className="absolute left-0 top-0 h-full rounded-full bg-[#747474]"
+                style={{ width: "0%" }}
+              />
+              <span
+                className="absolute top-1/2 -translate-y-1/2 h-[5.5px] w-[5.5px] rounded-full bg-[#747474]"
+                style={{ left: "calc(0% - 4px)" }}
+              />
+            </div>
+
+            {/* dynamic duration */}
+            <span className="text-[10px] text-[#747474] me-1">{durTxt}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ReplyCard;

package/src/ui/chat/TypingIndicator.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import React from "react";
+import { cn } from "../../utils/cn";
+
+/* =======================
+   Types
+======================= */
+
+type Props = {
+  /** Pixel box for the animation area */
+  size?: number;
+  loop?: boolean;
+  autoplay?: boolean;
+  className?: string;
+  ariaLabel?: string;
+  /** Avatar size in px */
+  avatarSize?: number;
+};
+
+/* =======================
+   CSS Typing Dots (no external dependency)
+======================= */
+
+const TypingDots: React.FC = () => (
+  <>
+    <style>{`
+      @keyframes banbox-typing-bounce {
+        0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+        30% { transform: translateY(-5px); opacity: 1; }
+      }
+      .banbox-typing-dot {
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        background: #888;
+        display: inline-block;
+        animation: banbox-typing-bounce 1.2s infinite ease-in-out;
+      }
+      .banbox-typing-dot:nth-child(1) { animation-delay: 0s; }
+      .banbox-typing-dot:nth-child(2) { animation-delay: 0.2s; }
+      .banbox-typing-dot:nth-child(3) { animation-delay: 0.4s; }
+    `}</style>
+    <span style={{ display: "inline-flex", gap: "4px", alignItems: "center", height: "28px", padding: "0 8px" }}>
+      <span className="banbox-typing-dot" />
+      <span className="banbox-typing-dot" />
+      <span className="banbox-typing-dot" />
+    </span>
+  </>
+);
+
+/* =======================
+   Component
+======================= */
+
+const TypingIndicator: React.FC<Props> = ({
+  className,
+  ariaLabel = "Typing…",
+  avatarSize = 40,
+}) => {
+  const isOnline = true;
+
+  return (
+    <div
+      className={cn("relative flex items-end gap-[6px]", className)}
+      role="status"
+      aria-label={ariaLabel}
+    >
+      {/* Avatar */}
+      <div
+        className="relative shrink-0 rounded-full border border-[#F1F1F1]"
+        style={{ width: avatarSize, height: avatarSize }}
+      >
+        <img
+          src="/chat/img/girl_support.png"
+          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>
+
+      {/* Typing dots */}
+      <span className="absolute bottom-[-13px] left-[30px]">
+        <TypingDots />
+      </span>
+    </div>
+  );
+};
+
+export default TypingIndicator;

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

@@ -0,0 +1,253 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { BusinessInfoIcon, ChatMailIcon, ChatPhoneCallIcon, ChatXIcon } from "../../../icons";
+
+import { cn } from "../../../utils/cn";
+import type { BusinessCard } from "../types";
+
+/* =======================
+   Types
+======================= */
+
+type BusinessCardDropupProps = {
+  open: boolean;
+  onClose: () => void;
+  onSend: (card: BusinessCard) => void;
+  /** Position against this button (like EmojiDropup) */
+  anchorRef?: React.RefObject<HTMLElement | null>;
+  className?: string;
+};
+
+/* =======================
+   Constants
+======================= */
+
+const WIDTH = 380;
+const GAP_Y = 0;
+const PADDING = 0;
+
+const defaultCard: BusinessCard = {
+  avatarSrc: "/chat/img/demo-a.jpg",
+  name: "Arman Hossain",
+  country: "Bangladesh",
+  flag: "🇧🇩",
+  company: "Easy Fashion",
+  email: "aminul@oceanget.com",
+  phone: "+880 1712 345678",
+};
+
+/* =======================
+   Component
+======================= */
+
+const BusinessCardDropup = ({
+  open,
+  onClose,
+  onSend,
+  anchorRef,
+  className,
+}: BusinessCardDropupProps) => {
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const [pos, setPos] = useState<{ left: number; top: number } | null>(null);
+  const [form] = useState<BusinessCard>(defaultCard);
+
+  const getPosition = useCallback(() => {
+    const anchor = anchorRef?.current;
+    const panel = panelRef.current;
+
+    if (!anchor || !panel) {
+      return null;
+    }
+
+    const ar = anchor.getBoundingClientRect();
+    const ph = panel.offsetHeight + 12;
+
+    let left = Math.min(ar.left, window.innerWidth - PADDING - WIDTH);
+    left = Math.max(left, PADDING);
+
+    let top = ar.top - GAP_Y - ph;
+    if (top < PADDING) {
+      top = Math.min(ar.bottom + GAP_Y, window.innerHeight - ph - PADDING);
+    }
+
+    return { left: Math.round(left - 18), top: Math.round(top) };
+  }, [anchorRef]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    let rafId = 0;
+    const update = () => {
+      const next = getPosition();
+      if (next) {
+        setPos(next);
+      }
+    };
+
+    rafId = requestAnimationFrame(update);
+
+    const onScroll = () => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(update);
+    };
+    const onResize = () => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(update);
+    };
+
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [open, getPosition]);
+
+  // Outside click & ESC
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const onDoc = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    const onEsc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onEsc);
+
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onEsc);
+    };
+  }, [open, onClose]);
+
+  const disabled = useMemo(() => !form.name || !form.company || !form.email || !form.phone, [form]);
+
+  if (!open) {
+    return null;
+  }
+
+  const body = (
+    <div
+      ref={panelRef}
+      role="dialog"
+      aria-label="Business card"
+      className={cn(
+        "z-9999 relative rounded-[12px] border border-[#EFEFEF] bg-white",
+        "p-3 shadow-[0_8px_24px_rgba(0,0,0,0.12)]",
+        className,
+      )}
+      style={{
+        width: WIDTH,
+        left: pos?.left ?? -9999,
+        top: pos?.top ?? -9999,
+        position: "fixed",
+      }}
+    >
+      {/* Header */}
+      <div className="mb-2 flex items-center justify-between">
+        <div className="text-lg font-semibold text-black">Business Card</div>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close"
+          className="grid h-8 w-8 place-items-center rounded-full hover:bg-black/5"
+        >
+          <ChatXIcon className="h-6 w-6" />
+        </button>
+      </div>
+
+      {/* Card preview */}
+      <div className="flex justify-center">
+        <div
+          className={cn(
+            "relative h-[208px] w-[355px] overflow-hidden rounded-[12px] bg-white",
+            "bg-cover bg-no-repeat shadow-[0_2px_12px_rgba(59,51,51,0.1)]",
+          )}
+          style={{ backgroundImage: "url('/chat/img/card_bg_raw.svg')" }}
+        >
+          <div className="flex h-full justify-between gap-4 px-6 py-6">
+            <div className="flex min-w-0 flex-1 flex-col justify-between">
+              <div>
+                <h3 className="text-xl font-semibold text-[#004F4F]">{form.name}</h3>
+
+                <div className="h-px w-[105px] bg-black" />
+
+                <div className="mt-[6px] flex items-center gap-2">
+                  <span className="text-xs font-medium text-[#636363]">
+                    {form.country}
+                  </span>
+                </div>
+              </div>
+
+              <div className="mt-4 mb-10 space-y-1.5 text-xs text-black">
+                <div className="flex items-center gap-3">
+                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-[#FFE9DB]">
+                    <BusinessInfoIcon className="h-3 w-3 text-[#EA580C]" />
+                  </div>
+                  <span className="truncate">{form.company}</span>
+                </div>
+
+                <div className="flex items-center gap-3">
+                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-[#FFE9DB]">
+                    <ChatMailIcon className="h-3 w-3 text-[#EA580C]" />
+                  </div>
+                  <span className="truncate">{form.email}</span>
+                </div>
+
+                <div className="flex items-center gap-3">
+                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-[#FFE9DB]">
+                    <ChatPhoneCallIcon className="h-3 w-3 text-[#EA580C]" />
+                  </div>
+                  <span className="truncate">{form.phone}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer actions */}
+      <div className="mt-3 flex justify-end gap-2">
+
+        <button
+          type="button"
+          disabled={disabled}
+          className="h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00] disabled:opacity-50"
+          onClick={() => {
+            onSend(form);
+            onClose();
+          }}
+        >
+          Send
+        </button>
+      </div>
+
+      {/* Speech arrow */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -bottom-2 left-6 h-4 w-4 rotate-45 rounded-[3px] border border-[#EFEFEF] border-l-transparent border-t-transparent bg-white"
+      />
+    </div>
+  );
+
+  return createPortal(body, document.body);
+};
+
+export default BusinessCardDropup;