@banbox/chat 1.0.0

package/src/ui/chat/ChatFooter.tsx

@@ -0,0 +1,442 @@
+// ui/chat/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 clsx from "clsx";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import AttachmentPreviewStrip, { type FilePreview as PreviewFile } from "./AttachmentPreviewStrip";
+import ChatComposerBar from "./ChatComposerBar";
+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";
+
+/* Simple tooltip wrapper */
+const Tooltip = ({ children, text }: { children: React.ReactNode; text?: string }) => (
+  <span title={text}>{children}</span>
+);
+
+/* ───────────────────────────── Types ───────────────────────────── */
+
+export type FooterAction = {
+  key: "attachment" | "emoji" | "businessCard" | "addressCard" | "translate" | string;
+  title: string;
+  icon: React.ReactNode;
+  onClick?: () => void;
+};
+
+type Props = {
+  variant?: "single" | "group";
+  /**
+   * Called when the user sends any type of message.
+   * The adapter (host app) handles storage and server communication.
+   */
+  onSend: (payload: SendPayload) => void;
+  /** Called after send completes — triggers parent re-render / scroll */
+  onAfterSend?: () => void;
+
+  actions?: FooterAction[];
+  className?: string;
+  maxRows?: number;
+
+  /** The message being replied to */
+  replyTo?: MessageRef;
+  clearReply?: () => void;
+};
+
+/* ────────────────────────── Utilities ─────────────────────────── */
+
+const fmtTime = (s: number) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+const mb = (bytes: number) => Math.max(0.1, bytes / (1024 * 1024));
+const extFromName = (name: string) => {
+  const dot = name.lastIndexOf(".");
+  return dot >= 0 ? name.slice(dot + 1).toLowerCase() : "";
+};
+const ACCEPT =
+  "image/*,.pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx,.txt,.csv,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+
+/* ───────────────────────── Component ──────────────────────────── */
+
+const ChatFooter: React.FC<Props> = ({
+  variant = "group",
+  onSend,
+  onAfterSend,
+  className,
+  maxRows = 4,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  actions: _actions,
+  replyTo,
+  clearReply,
+}) => {
+  const actionData: 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" /> },
+    {
+      key: "businessCard",
+      title: "Share business card",
+      icon: <ProfileCardIcon className="h-4 w-4" />,
+    },
+    {
+      key: "translate",
+      title: "Translation settings",
+      icon: <NewLanguageIcon className="h-4 w-4" />,
+    },
+  ];
+
+  const textRef = useRef<HTMLTextAreaElement>(null);
+  const emojiBtnRef = useRef<HTMLButtonElement | null>(null);
+  const [text, setText] = useState("");
+  const [showEmoji, setShowEmoji] = useState(false);
+
+  // recording (MediaRecorder)
+  const [recording, setRecording] = useState(false);
+  const [seconds, setSeconds] = useState(0);
+  const mediaRecRef = useRef<MediaRecorder | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const chunksRef = useRef<BlobPart[]>([]);
+  const [micError, setMicError] = useState<string>("");
+
+  // attachments
+  const [imgPreviews, setImgPreviews] = useState<string[]>([]);
+  const [filePreviews, setFilePreviews] = useState<PreviewFile[]>([]);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const [showTranslate, setShowTranslate] = useState(false);
+  const [translateSettings, setTranslateSettings] = useState<TranslateSettings>({
+    incomingTarget: "",
+    autoIncoming: true,
+    enableOutgoing: false,
+    outgoingFrom: "English",
+    outgoingTo: "Bangla",
+  });
+
+  const bizBtnRef = useRef<HTMLButtonElement | null>(null);
+  const [showBiz, setShowBiz] = useState(false);
+
+  const addrBtnRef = useRef<HTMLButtonElement | null>(null);
+  const [, setShowAddress] = useState(false);
+
+  // insert emoji at caret
+  const insertEmoji = (emoji: string) => {
+    const el = textRef.current;
+    if (!el) { return; }
+    const start = el.selectionStart ?? el.value.length;
+    const end = el.selectionEnd ?? el.value.length;
+    const next = `${text.slice(0, start)}${emoji}${text.slice(end)}`;
+    setText(next);
+    requestAnimationFrame(() => {
+      el.focus();
+      const pos = start + emoji.length;
+      el.setSelectionRange(pos, pos);
+    });
+  };
+
+  // auto-grow textarea
+  const handleAutoGrow = React.useCallback(() => {
+    const el = textRef.current;
+    if (!el) { return; }
+    el.style.height = "0px";
+    const styles = window.getComputedStyle(el);
+    const lh = parseFloat(styles.lineHeight || "20");
+    const max = lh * maxRows + parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
+    el.style.height = `${Math.min(el.scrollHeight, max)}px`;
+  }, [maxRows]);
+
+  useEffect(() => { handleAutoGrow(); }, [text, handleAutoGrow]);
+
+  // recording timer
+  useEffect(() => {
+    if (!recording) { return; }
+    setSeconds(0);
+    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
+    return () => clearInterval(id);
+  }, [recording]);
+
+  // cleanup blobs + streams
+  useEffect(() => {
+    return () => {
+      imgPreviews.forEach((u) => u.startsWith("blob:") && URL.revokeObjectURL(u));
+      filePreviews.forEach((f) => f.href?.startsWith("blob:") && URL.revokeObjectURL(f.href));
+      if (streamRef.current) { streamRef.current.getTracks().forEach((t) => t.stop()); }
+      try { mediaRecRef.current?.stop(); } catch { /* empty */ }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const isTyping = text.length > 0;
+  const hasAttachments = imgPreviews.length > 0 || filePreviews.length > 0;
+  const canSendArrow = useMemo(() => hasAttachments || isTyping, [hasAttachments, isTyping]);
+
+  const onFilesPicked: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const files = Array.from(e.target.files ?? []);
+    if (!files.length) { return; }
+    const imgs: string[] = [];
+    const docs: PreviewFile[] = [];
+    files.forEach((f) => {
+      const url = URL.createObjectURL(f);
+      if (f.type.startsWith("image/")) {
+        imgs.push(url);
+      } else {
+        docs.push({ name: f.name, sizeMB: mb(f.size), ext: extFromName(f.name), href: url, downloadName: f.name });
+      }
+    });
+    setImgPreviews((p) => [...p, ...imgs]);
+    setFilePreviews((p) => [...p, ...docs]);
+    e.target.value = "";
+  };
+
+  /* ────── Preview → payload helpers ────── */
+
+  const previewFilesToPayload = (files: PreviewFile[]) =>
+    files.map((f) => ({ name: f.name, sizeMB: f.sizeMB, ext: f.ext, href: f.href, downloadName: f.downloadName }));
+
+  const clearAttachments = () => {
+    imgPreviews.forEach((u) => u.startsWith("blob:") && URL.revokeObjectURL(u));
+    filePreviews.forEach((f) => f.href?.startsWith("blob:") && URL.revokeObjectURL(f.href));
+    setImgPreviews([]);
+    setFilePreviews([]);
+  };
+
+  /* ─────── Send handlers — all delegate to the single onSend prop ─────── */
+
+  const sendText = async () => {
+    const t = text.trim();
+    const hasAttachmentsNow = imgPreviews.length > 0 || filePreviews.length > 0;
+    if (!t && !hasAttachmentsNow) return;
+
+    if (hasAttachmentsNow) {
+      // Combined: text + files/images
+      onSend({
+        type: "combined",
+        text: t,
+        files: previewFilesToPayload(filePreviews),
+        images: imgPreviews,
+        replyTo,
+      });
+      clearAttachments();
+    } else {
+      onSend({ type: "text", text: t, replyTo });
+    }
+    setText("");
+    clearReply?.();
+    onAfterSend?.();
+  };
+
+  const sendAttachments = async () => {
+    if (text.length > 0) { await sendText(); return; }
+    const hasAttachmentsNow = imgPreviews.length > 0 || filePreviews.length > 0;
+    if (!hasAttachmentsNow) return;
+
+    onSend({
+      type: "attachments",
+      images: imgPreviews,
+      files: previewFilesToPayload(filePreviews),
+      replyTo,
+    });
+    clearAttachments();
+    clearReply?.();
+    onAfterSend?.();
+  };
+
+  /* ───── Recording control with MediaRecorder ───── */
+  const startRecording = async () => {
+    setMicError("");
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true }, video: false });
+      streamRef.current = stream;
+      const canWebm = typeof MediaRecorder !== "undefined" && MediaRecorder.isTypeSupported?.("audio/webm;codecs=opus");
+      const mime = canWebm ? "audio/webm;codecs=opus" : "audio/mp4";
+      const rec = new MediaRecorder(stream, { mimeType: mime });
+      mediaRecRef.current = rec;
+      chunksRef.current = [];
+      rec.ondataavailable = (e) => { if (e.data && e.data.size > 0) chunksRef.current.push(e.data); };
+      rec.start();
+      setRecording(true);
+    } catch (err: unknown) {
+      let name: string | undefined;
+      if (err instanceof DOMException || err instanceof Error) { ({ name } = err); }
+      const msg = name === "NotFoundError" ? "No audio input device found." : name === "NotAllowedError" ? "Microphone access was denied." : "Unable to access the microphone.";
+      setMicError(msg);
+      setRecording(false);
+      streamRef.current?.getTracks().forEach((t) => t.stop());
+      try { mediaRecRef.current?.stop(); } catch { /* empty */ }
+      streamRef.current = null;
+    }
+  };
+
+  const finalizeBlob = (rec: MediaRecorder): Promise<Blob> =>
+    new Promise((resolve) => {
+      const finish = () => resolve(new Blob(chunksRef.current, { type: rec.mimeType || "audio/webm" }));
+      rec.onstop = finish;
+      try { rec.stop(); } catch { finish(); }
+    });
+
+  const stopRecording = async (send = false) => {
+    const rec = mediaRecRef.current;
+    const stream = streamRef.current;
+    setRecording(false);
+    if (stream) { stream.getTracks().forEach((t) => t.stop()); streamRef.current = null; }
+    if (!rec) {
+      if (send) onSend({ type: "voice", durationSec: seconds, durationText: fmtTime(seconds), replyTo });
+      setSeconds(0);
+      return;
+    }
+    const blob = await finalizeBlob(rec);
+    mediaRecRef.current = null;
+    if (send) {
+      const src = URL.createObjectURL(blob);
+      onSend({ type: "voice", src, durationSec: seconds, durationText: fmtTime(seconds), replyTo });
+      clearReply?.();
+      onAfterSend?.();
+    }
+    setSeconds(0);
+  };
+
+  return (
+    <div className={clsx("border-t border-[#ededed] bg-white p-3.5", className)}>
+      {replyTo && (
+        <div className="mb-2">
+          <ReplyCard refMsg={replyTo} onClose={clearReply} />
+        </div>
+      )}
+
+      <AttachmentPreviewStrip
+        imgPreviews={imgPreviews}
+        filePreviews={filePreviews}
+        onRemoveFile={(i) =>
+          setFilePreviews((prev) => {
+            const cp = [...prev];
+            const [rm] = cp.splice(i, 1);
+            if (rm?.href?.startsWith("blob:")) URL.revokeObjectURL(rm.href);
+            return cp;
+          })
+        }
+        onRemoveImage={(i) =>
+          setImgPreviews((prev) => {
+            const cp = [...prev];
+            const [rm] = cp.splice(i, 1);
+            if (rm?.startsWith("blob:")) URL.revokeObjectURL(rm);
+            return cp;
+          })
+        }
+      />
+
+      <div className="mb-2 flex items-center gap-3">
+        {(actionData ?? []).map((a) => {
+          const isAttach = a.key === "attachment";
+          const isEmoji = a.key === "emoji";
+          const isTranslate = a.key === "translate";
+          const isBiz = a.key === "businessCard";
+          const isAddress = a.key === "addressCard";
+
+          if (isEmoji) {
+            return (
+              <span key={a.key} className="relative inline-flex">
+                <Tooltip text={a.title}>
+                  <button ref={emojiBtnRef} type="button" onClick={() => setShowEmoji((v) => !v)} className="flex h-6 w-6 items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
+                    <span>{a.icon}</span>
+                  </button>
+                </Tooltip>
+              </span>
+            );
+          }
+          if (isTranslate) {
+            return (
+              <Tooltip key={a.key} text={a.title}>
+                <button type="button" onClick={() => setShowTranslate(true)} className="flex h-6 w-6 items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
+                  <span>{a.icon}</span>
+                </button>
+              </Tooltip>
+            );
+          }
+          if (isBiz) {
+            return (
+              <span key={a.key} className="relative inline-flex">
+                <Tooltip text={a.title}>
+                  <button ref={bizBtnRef} type="button" onClick={() => setShowBiz((v) => !v)} className="flex h-6 w-6 items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
+                    <span>{a.icon}</span>
+                  </button>
+                </Tooltip>
+              </span>
+            );
+          }
+          if (isAddress) {
+            return (
+              <span key={a.key} className="relative inline-flex">
+                <Tooltip text={a.title}>
+                  <button ref={addrBtnRef} type="button" onClick={() => setShowAddress(true)} className="flex h-6 w-6 items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
+                    <span>{a.icon}</span>
+                  </button>
+                </Tooltip>
+              </span>
+            );
+          }
+          return (
+            <Tooltip key={a.key} text={a.title}>
+              <button type="button" onClick={isAttach ? () => fileInputRef.current?.click() : a.onClick} className="flex h-6 w-6 items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]">
+                <span>{a.icon}</span>
+              </button>
+            </Tooltip>
+          );
+        })}
+
+        <input ref={fileInputRef} type="file" multiple accept={ACCEPT} onChange={onFilesPicked} className="hidden" />
+
+        <EmojiDropup open={showEmoji} onClose={() => setShowEmoji(false)} onSelect={insertEmoji} anchorRef={emojiBtnRef} />
+        <BusinessCardDropup
+          open={showBiz}
+          onClose={() => setShowBiz(false)}
+          anchorRef={bizBtnRef}
+          onSend={async (card) => {
+            onSend({ type: "businessCard", card, replyTo });
+            clearReply?.();
+            onAfterSend?.();
+          }}
+        />
+      </div>
+
+      {micError && (
+        <div className="mb-2 flex items-start gap-2 rounded-sm bg-[#f8f8f8] px-2 py-1.5 text-xs text-[#ff5301]">
+          <span><ChatInfoIcon className="mt-0.5 h-3.5 w-3.5" /></span>
+          <span>{micError}</span>
+          <span className="pointer flex cursor-pointer items-center justify-center rounded-full p-1 hover:bg-black/10" onClick={() => setMicError("")}>
+            <ChatXIcon className="h-3.5 w-3.5" />
+          </span>
+        </div>
+      )}
+
+      <ChatComposerBar
+        recording={recording}
+        seconds={seconds}
+        isTyping={isTyping}
+        textRef={textRef}
+        text={text}
+        onTextChange={setText}
+        onAutoGrow={handleAutoGrow}
+        hasAttachments={hasAttachments}
+        canSendArrow={canSendArrow}
+        startRecording={startRecording}
+        stopRecording={stopRecording}
+        sendText={sendText}
+        sendAttachments={sendAttachments}
+        fmtTime={fmtTime}
+      />
+
+      <ChatTranslateSettingsModal
+        variant={variant}
+        open={showTranslate}
+        onClose={() => setShowTranslate(false)}
+        initial={translateSettings}
+        onSave={(s) => {
+          setTranslateSettings(s);
+          setShowTranslate(false);
+        }}
+      />
+    </div>
+  );
+};
+
+export default ChatFooter;

package/src/ui/chat/ChatHeader.tsx

@@ -0,0 +1,24 @@
+"use client";
+import clsx from "clsx";
+import React from "react";
+
+type Props = {
+  left: React.ReactNode; // header left content (avatar/title)
+  right?: React.ReactNode; // header right content (icons/actions)
+  below?: React.ReactNode; // optional bar below the header (e.g., Inquiry ID)
+  className?: string;
+};
+
+export default function ChatHeader({ left, right, below, className }: Props) {
+  return (
+    <div>
+      <div className={clsx("border-b border-[#e1e1e1] h-[64px]", className)}>
+        <div className="flex items-start justify-between px-4 pt-2.5">
+          <div className="flex items-start gap-3">{left}</div>
+          {right}
+        </div>
+      </div>
+      {below && <>{below}</>}
+    </div>
+  );
+}

package/src/ui/chat/ChatIdentity.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { BlueBadgeIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+/* =======================
+   Types
+======================= */
+
+type SubtitleVariant = "live" | "muted";
+// Variant = "avatar" | "initial" | "logo" — inferred from union props below
+
+type BaseProps = {
+  title: string;
+  subtitle?: string;
+  subtitleVariant?: SubtitleVariant;
+  online?: boolean;
+  verified?: boolean;
+  /** Circle size in px (default 46) */
+  size?: number;
+  className?: string;
+};
+
+type AvatarVariant = BaseProps & {
+  variant: "avatar";
+  src: string;
+};
+
+type InitialVariant = BaseProps & {
+  variant: "initial";
+  initial: string;
+  initialSrc?: string;
+  bg?: string;
+  textClassName?: string;
+};
+
+type LogoVariant = BaseProps & {
+  variant: "logo";
+  src: string;
+  ringColor?: string;
+};
+
+export type ChatIdentityProps = AvatarVariant | InitialVariant | LogoVariant;
+
+/* =======================
+   Component
+======================= */
+
+const ChatIdentity = (props: ChatIdentityProps) => {
+  const {
+    title,
+    subtitle,
+    subtitleVariant = "muted",
+    online = false,
+    verified = false,
+    size = 46,
+    className,
+  } = props;
+
+  const subtitleClass = cn(
+    "text-[10px] font-medium",
+    subtitleVariant === "live" ? "text-[#1E9E6A]" : "text-[#929292]",
+  );
+
+  return (
+    <div className={cn("flex items-start gap-3", className)}>
+      <div className="relative" style={{ width: size, height: size }}>
+        {/* Avatar */}
+        {props.variant === "avatar" ? (
+          <img
+            src={props.src}
+            alt={title}
+            className="h-full w-full rounded-xs object-cover border border-[#f1f1f1]"
+          />
+        ) : null}
+
+        {/* Initial */}
+        {props.variant === "initial" ? (
+          <div
+            className={cn(
+              "grid h-full w-full place-items-center rounded-xs text-[15px] font-semibold text-[#2c2c2c]",
+              props.textClassName,
+            )}
+            style={{ backgroundColor: props.bg ?? "#FFE5DA" }}
+          >
+            {props.initial}
+          </div>
+        ) : null}
+
+        {/* Logo */}
+        {props.variant === "logo" ? (
+          <div
+            className="grid h-full w-full place-items-center rounded-xs"
+            style={{ boxShadow: `0 0 0 1px ${props.ringColor ?? "#EDEDED"} inset` }}
+          >
+            <img src={props.src} alt={title} className="h-full w-full rounded-xs object-cover" />
+          </div>
+        ) : null}
+
+        {/* Online / Offline dot */}
+        <span
+          className={cn(
+            "absolute rounded-full ring-1 ring-white bottom-[-2px] right-[-2px]",
+            online ? "bg-[#328545]" : "bg-[#eb2127]",
+          )}
+          style={{
+            width: "15px",
+            height: "15px",
+            right: 0,
+            bottom: 0,
+          }}
+        />
+      </div>
+
+      <div>
+        <div className="flex items-start gap-1 text-[14px] font-medium text-black">
+          <span className="max-w-[300px] truncate">{title}</span>
+          {verified ? (
+            <span>
+              <BlueBadgeIcon />
+            </span>
+          ) : null}
+        </div>
+
+        {subtitle ? (
+          title.toLowerCase() === "banbox.com" ? (
+            <div className="flex items-center">
+              <img
+                src="/chat/globe.gif"
+                alt="globe"
+                className="h-[12px] w-auto shrink-0 object-contain"
+                style={{ mixBlendMode: "multiply" }}
+              />
+              <div className={subtitleClass}>{subtitle}</div>
+            </div>
+          ) : (
+            <div className={subtitleClass}>{subtitle}</div>
+          )
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default ChatIdentity;

package/src/ui/chat/ChatInquiryBar.tsx

@@ -0,0 +1,57 @@
+"use client";
+import clsx from "clsx";
+import React from "react";
+import { RightArrow } from "../../icons";
+
+type Props = {
+  id?: string; // if undefined, don't render
+  onView?: () => void; // handler for "View Inquiry"
+  className?: string; // optional container classes
+  label?: string;
+  buttonLabel?: string;
+};
+
+const ChatInquiryBar: React.FC<Props> = ({ id, onView, className, label, buttonLabel }) => {
+  if (!id) {
+    return null;
+  }
+
+  return (
+    <div
+      className={clsx(
+        "flex items-center justify-between border-b border-[#ededed] bg-[#f8f8f8] ps-[16px] pe-[30px] h-[30px]",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-1.5 text-xs">
+        <span className="font-semibold text-black">{label}</span>
+        <span className="h-5 w-px bg-[#e1e1e1]" />
+        <span className="text-[#636363]">{id}</span>
+      </div>
+
+      {/* Button with 'static' + 'hover/animated' layers */}
+      <button
+        type="button"
+        onClick={onView}
+        className="group relative inline-flex w-fit items-center justify-end text-xs font-medium text-black"
+      >
+        <span className="flex items-center transition-opacity duration-300 ease-in-out group-hover:opacity-0">
+          <span>{buttonLabel}</span>
+          <span className="ml-[4px] flex h-4 w-4 items-center justify-center">
+            <RightArrow />
+          </span>
+        </span>
+
+        {/* hover layer (slides in) */}
+        <span className="pointer-events-none absolute inset-0 flex items-center opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
+          <span>{buttonLabel}</span>
+          <span className="ml-[2px] flex h-4 w-4 items-center justify-center animate-slide-right">
+            <RightArrow />
+          </span>
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default ChatInquiryBar;