@banbox/chat 1.0.0

package/src/modals/chat/ChatTranslateSettingsModal.tsx

@@ -0,0 +1,180 @@
+"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/types/index.ts

@@ -0,0 +1,163 @@
+// @banbox/chat — Core Domain Types
+// Single source of truth for all data models.
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Thread status — controls the status badge/icon in the thread list.
+ * "seen"      — blue double tick
+ * "delivered" — grey double tick
+ * "new"       — unread count badge
+ */
+export type ThreadStatus =
+  | { kind: "seen" }
+  | { kind: "delivered" }
+  | { kind: "new"; count: number };
+
+/**
+ * A contextual reference attached to a chat session.
+ * Allows the host app to link a chat to an order, inquiry, or quotation.
+ */
+export type Reference = {
+  kind: "quotation" | "order" | "inquiry" | "productInquiry";
+  id?: string;
+  /** Human-readable label shown in the chat header (e.g. "Quotation Request", "Order #123") */
+  title?: string;
+  /** Arbitrary metadata the host app wants to attach (e.g. product name, amount) */
+  meta?: Record<string, string | number | boolean>;
+};
+
+/**
+ * A conversation thread shown in the thread list.
+ */
+export type Thread = {
+  id: string;
+  title: string;
+  subTitle?: string;
+  avatarText?: string;
+  avatarSrc?: string;
+  online?: boolean;
+  /** True if the contact has a "verified seller" badge */
+  badge?: boolean;
+  pinned?: boolean;
+  /** Unread message count */
+  unread?: number;
+  /** Preview of the last message */
+  last?: string;
+  /** Timestamp of the last message */
+  time?: string;
+  /** For linking to an order */
+  orderId?: string;
+  /** For linking to an inquiry */
+  inquiryId?: string;
+  status?: ThreadStatus;
+  /** Contextual references attached when opening from a specific order/inquiry */
+  references?: Reference[];
+};
+
+/** A file attachment in a message */
+export type MessageFile = {
+  name: string;
+  sizeMB: number;
+  ext: string;
+  href?: string;
+  downloadName?: string;
+};
+
+/** An audio clip attachment in a message */
+export type MessageAudio = {
+  src?: string;
+  duration?: string;
+};
+
+/** A reference to a message being replied to */
+export type MessageRef = {
+  id: string;
+  author: string | { name: string };
+  time?: string;
+  text?: string;
+  images?: string[];
+  files?: MessageFile[];
+  audio?: MessageAudio;
+};
+
+/** Business card shared in a message */
+export type BusinessCard = {
+  avatarSrc?: string;
+  name: string;
+  country?: string;
+  flag?: string;
+  company?: string;
+  email?: string;
+  phone?: string;
+  [key: string]: string | undefined;
+};
+
+/** Address card shared in a message */
+export type AddressCard = {
+  name?: string;
+  label?: string;
+  businessName?: string;
+  mobileNumber?: string;
+  country?: string;
+  district?: string | null;
+  policeStation?: string | null;
+  state?: string | null;
+  city?: string | null;
+  postalCode?: string;
+  addressLine?: string;
+  landMark?: string | null;
+  [key: string]: string | null | undefined;
+};
+
+/**
+ * A single chat message.
+ */
+export type Message = {
+  id: string;
+  author: string | { name: string };
+  time?: string;
+  /** Primary text content */
+  text?: string;
+  /** Alias for text (legacy compat) */
+  content?: string;
+  images?: string[];
+  files?: MessageFile[];
+  audio?: MessageAudio;
+  businessCard?: BusinessCard | Record<string, string>;
+  addressCard?: AddressCard | Record<string, string>;
+  replyTo?: MessageRef;
+  avatarSrc?: string;
+};
+
+/**
+ * The unified send payload — all message types in one discriminated union.
+ * ChatFooter produces one of these; the adapter's messages.send() consumes it.
+ *
+ * To add a new message type:
+ *   1. Add a new variant here
+ *   2. Handle it in the adapter's send() implementation
+ */
+export type SendPayload =
+  | { type: "text"; text: string; replyTo?: MessageRef }
+  | {
+      type: "voice";
+      src?: string;
+      durationSec: number;
+      durationText: string;
+      replyTo?: MessageRef;
+    }
+  | {
+      type: "attachments";
+      images: string[];
+      files: MessageFile[];
+      replyTo?: MessageRef;
+    }
+  | { type: "businessCard"; card: BusinessCard; replyTo?: MessageRef }
+  | { type: "addressCard"; card: AddressCard; replyTo?: MessageRef }
+  | {
+      type: "combined";
+      text: string;
+      images: string[];
+      files: MessageFile[];
+      replyTo?: MessageRef;
+    };

package/src/ui/Button.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { cn } from "../utils/cn";
+
+export type ButtonVariant = "filled" | "outlined" | "text" | "link" | "tonal";
+export type ButtonColor =
+  | "primary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info"
+  | "white"
+  | "transparent"
+  | "black"
+  | "orange"
+  | "green"
+  | "blue";
+export type ButtonSize = "26" | "30" | "32" | "34" | "36" | "40";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  color?: ButtonColor;
+  size?: ButtonSize;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  iconOnly?: boolean;
+  children: React.ReactNode;
+}
+
+const sizeClasses: Record<ButtonSize, string> = {
+  "26": "h-[26px] px-[10px] text-[12px] rounded-[4px] gap-1",
+  "30": "h-[30px] px-[12px] text-[13px] rounded-[4px] gap-1.5",
+  "32": "h-[32px] px-[14px] text-[13px] rounded-[4px] gap-1.5",
+  "34": "h-[34px] px-[16px] text-[13px] rounded-[4px] gap-2",
+  "36": "h-[36px] px-[18px] text-[13px] rounded-[4px] gap-2",
+  "40": "h-[40px] px-[20px] text-[16px] rounded-[4px] gap-2",
+};
+
+type ColorDef = { bg: string; hover: string; text: string; border: string; borderHover?: string; lightBg: string };
+
+const colorMap: Record<ButtonColor, ColorDef> = {
+  primary: { bg: "bg-[#3D3D3D]", hover: "hover:bg-[#646464]", text: "text-[#3D3D3D]", border: "border-[#3D3D3D]", lightBg: "bg-[#3D3D3D]/10" },
+  success: { bg: "bg-[#3d6b42]", hover: "hover:bg-[#2e5939]", text: "text-[#3d6b42]", border: "border-[#3d6b42]", lightBg: "bg-[#3d6b42]/10" },
+  warning: { bg: "bg-[#f59e0b]", hover: "hover:bg-[#d97706]", text: "text-[#f59e0b]", border: "border-[#f59e0b]", lightBg: "bg-[#f59e0b]/10" },
+  error: { bg: "bg-[#ef4444]", hover: "hover:bg-[#c91b20]", text: "text-[#ef4444]", border: "border-[#ef4444]", lightBg: "bg-[#ef4444]/10" },
+  info: { bg: "bg-[#00b8d4]", hover: "hover:bg-[#009db3]", text: "text-[#00b8d4]", border: "border-[#00b8d4]", lightBg: "bg-[#00b8d4]/10" },
+  white: { bg: "bg-white", hover: "hover:bg-gray-50", text: "text-black", border: "border-[#cacaca]", borderHover: "hover:border-[#777]", lightBg: "bg-white" },
+  transparent: { bg: "bg-transparent", hover: "hover:bg-black/5", text: "text-black", border: "border-[#cacaca]", lightBg: "bg-transparent" },
+  black: { bg: "bg-[#3d3d3d]", hover: "hover:bg-[#646464]", text: "text-black", border: "border-[#3d3d3d]", lightBg: "bg-[#ececec]" },
+  orange: { bg: "bg-[#FF5300]", hover: "hover:bg-[#e04a00]", text: "text-[#FF5300]", border: "border-[#FF5300]", borderHover: "hover:border-[#e04a00]", lightBg: "bg-[#FFEAE0]" },
+  green: { bg: "bg-[#086600]", hover: "hover:bg-[#28A745]", text: "text-[#086600]", border: "border-[#086600]", lightBg: "bg-[#E6F5E6]" },
+  blue: { bg: "bg-[#005694]", hover: "hover:bg-[#00375E]", text: "text-[#005694]", border: "border-[#005694]", lightBg: "bg-[#E0EFF8]" },
+};
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "filled", color = "primary", size = "40", leftIcon, rightIcon, iconOnly = false, children, className, disabled, ...props }, ref) => {
+    const c = colorMap[color];
+
+    return (
+      <button
+        ref={ref}
+        disabled={disabled}
+        className={cn(
+          "inline-flex cursor-pointer items-center justify-center font-semibold transition-all duration-200 select-none",
+          iconOnly ? `h-[${size === "40" ? "40" : size}px] w-[${size === "40" ? "40" : size}px]` : sizeClasses[size],
+          variant === "filled" && [c.bg, c.hover, "text-white", "border border-transparent"],
+          variant === "outlined" && [color === "white" ? "bg-white" : "bg-transparent", "border", c.border, c.borderHover, c.text],
+          variant === "text" && ["bg-transparent", "border border-transparent", c.text, "hover:bg-black/5"],
+          variant === "tonal" && [c.lightBg, c.text, "border border-transparent"],
+          disabled && "cursor-not-allowed opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {leftIcon && <span className="flex shrink-0">{leftIcon}</span>}
+        <>{children}</>
+        {rightIcon && <span className="flex shrink-0">{rightIcon}</span>}
+      </button>
+    );
+  },
+);
+
+Button.displayName = "Button";
+export default Button;

package/src/ui/Portal.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+interface PortalProps {
+  children: React.ReactNode;
+  containerId?: string;
+}
+
+export default function Portal({ children, containerId = "portal-root" }: PortalProps) {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    let node = document.getElementById(containerId);
+    let created = false;
+
+    if (!node) {
+      node = document.createElement("div");
+      node.setAttribute("id", containerId);
+      document.body.appendChild(node);
+      created = true;
+    }
+
+    queueMicrotask(() => {
+      setContainer(node);
+    });
+
+    return () => {
+      if (created && node?.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    };
+  }, [containerId]);
+
+  if (!container) {
+    return null;
+  }
+  return createPortal(children, container);
+}

package/src/ui/Select.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useRef, useEffect } from "react";
+import { cn } from "../utils/cn";
+
+type Option = { label: string; value: string };
+
+type Props = {
+  options: Option[];
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  size?: number;
+  className?: string;
+  disabled?: boolean;
+};
+
+const Select: React.FC<Props> = ({ options, value, onChange, placeholder = "Select...", size = 36, className, disabled }) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const selected = options.find((o) => o.value === value);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+
+  return (
+    <div ref={ref} className={cn("relative", className)}>
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => setOpen((v) => !v)}
+        className={cn(
+          "flex w-full items-center justify-between rounded-[4px] border border-[#cacaca] bg-white px-3 text-[13px] text-left",
+          disabled && "cursor-not-allowed opacity-50",
+        )}
+        style={{ height: size }}
+      >
+        <span className={cn(selected ? "text-black" : "text-[#9C9C9C]")}>
+          {selected ? selected.label : placeholder}
+        </span>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={cn("shrink-0 transition-transform", open && "rotate-180")}>
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </button>
+      {open && (
+        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-[200px] overflow-y-auto rounded-[4px] border border-[#e1e1e1] bg-white shadow-[0_4px_16px_rgba(0,0,0,0.08)]">
+          {options.map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              className={cn(
+                "flex w-full items-center px-3 py-2 text-[13px] text-left hover:bg-black/5",
+                opt.value === value && "bg-black/5 font-medium",
+              )}
+              onClick={() => {
+                onChange?.(opt.value);
+                setOpen(false);
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Select;