@banbox/chat 1.0.0

package/dist/index.js

@@ -0,0 +1,3385 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { createPortal } from 'react-dom';
+import React11, { createContext, useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import clsx2, { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/chat/ChatRoot.tsx
+var ChatUIContext = createContext(null);
+function useChatUI() {
+  const ctx = useContext(ChatUIContext);
+  if (!ctx) {
+    throw new Error("useChatUI must be used within ChatUIProvider");
+  }
+  return ctx;
+}
+function useDisableBodyScroll(active) {
+  useEffect(() => {
+    if (!active) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [active]);
+}
+var GalleryContext = createContext(
+  void 0
+);
+var useGallery = () => {
+  const context = useContext(GalleryContext);
+  if (!context) {
+    throw new Error("useGallery must be used within a GalleryProvider");
+  }
+  return context;
+};
+var INITIAL_STATE = {
+  images: [],
+  currentIndex: null,
+  isOpen: false,
+  uploadDate: null,
+  showDots: false
+};
+var GalleryProvider = ({ children }) => {
+  const [state, setState] = useState(INITIAL_STATE);
+  const setImages = useCallback((images) => {
+    setState((prev2) => ({ ...prev2, images }));
+  }, []);
+  const setCurrentIndex = useCallback((currentIndex) => {
+    setState((prev2) => ({ ...prev2, currentIndex }));
+  }, []);
+  const setUploadDate = useCallback((uploadDate) => {
+    setState((prev2) => ({ ...prev2, uploadDate }));
+  }, []);
+  const openGallery = useCallback(
+    (imgs, startIndex = 0, date = null, dots = false) => {
+      setState({
+        images: imgs,
+        currentIndex: startIndex,
+        uploadDate: imgs[startIndex]?.uploadDate ?? date,
+        isOpen: true,
+        showDots: dots
+      });
+    },
+    []
+  );
+  const closeGallery = useCallback(() => {
+    setState((prev2) => ({ ...prev2, isOpen: false, currentIndex: null }));
+  }, []);
+  const next = useCallback(() => {
+    setState((prev2) => {
+      if (prev2.currentIndex === null || prev2.images.length === 0) return prev2;
+      const newIndex = prev2.currentIndex < prev2.images.length - 1 ? prev2.currentIndex + 1 : 0;
+      return { ...prev2, currentIndex: newIndex, uploadDate: prev2.images[newIndex]?.uploadDate ?? null };
+    });
+  }, []);
+  const prev = useCallback(() => {
+    setState((prev2) => {
+      if (prev2.currentIndex === null || prev2.images.length === 0) return prev2;
+      const newIndex = prev2.currentIndex > 0 ? prev2.currentIndex - 1 : prev2.images.length - 1;
+      return { ...prev2, currentIndex: newIndex, uploadDate: prev2.images[newIndex]?.uploadDate ?? null };
+    });
+  }, []);
+  const value = {
+    images: state.images,
+    currentIndex: state.currentIndex,
+    isOpen: state.isOpen,
+    uploadDate: state.uploadDate,
+    showDots: state.showDots,
+    setImages,
+    setCurrentIndex,
+    setUploadDate,
+    openGallery,
+    closeGallery,
+    next,
+    prev
+  };
+  return /* @__PURE__ */ jsx(GalleryContext.Provider, { value, children });
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var sizeClasses = {
+  "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"
+};
+var colorMap = {
+  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]" }
+};
+var Button = React11.forwardRef(
+  ({ variant = "filled", color = "primary", size = "40", leftIcon, rightIcon, iconOnly = false, children, className, disabled, ...props }, ref) => {
+    const c = colorMap[color];
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        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,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0", children: leftIcon }),
+          /* @__PURE__ */ jsx(Fragment, { children }),
+          rightIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Button_default = Button;
+function ChatConfirmModal({
+  open,
+  title = "DELETE CHAT",
+  confirmLabel = "Yes, Delete",
+  cancelLabel = "Not Now",
+  onConfirm,
+  onClose,
+  className
+}) {
+  React11.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "absolute inset-0 z-70 flex items-center justify-center overflow-hidden",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClose();
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            className: cn(
+              "relative z-71 w-[420px] overflow-hidden rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)]",
+              className
+            ),
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex h-[44px] items-center bg-[#ff5200] px-4 text-xl font-semibold uppercase tracking-wide text-white", children: title }),
+              /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+                /* @__PURE__ */ jsx("h3", { className: "mb-2 text-[14px] font-semibold text-black", children: "Are you Sure you want to delete the chat" }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-4 mb-[24px] flex items-start gap-1.5 text-xs font-normal text-[#636363]", children: [
+                  /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4", viewBox: "0 0 16 16", fill: "none", children: [
+                    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+                    /* @__PURE__ */ jsx("path", { d: "M8 4.5v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx("p", { children: "The chat history is permanently removed from your view; you won't be able to see previous messages anymore. Other person's copy stays, the other user may still have their copy of the conversation." })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-4 border-t border-[#e1e1e1] pt-[24px]", children: [
+                  /* @__PURE__ */ jsx(
+                    Button_default,
+                    {
+                      variant: "outlined",
+                      color: "white",
+                      size: "34",
+                      className: "flex-1",
+                      onClick: onClose,
+                      children: cancelLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button_default,
+                    {
+                      variant: "filled",
+                      color: "orange",
+                      size: "34",
+                      className: "flex-1",
+                      onClick: () => {
+                        onConfirm();
+                        onClose();
+                      },
+                      children: confirmLabel
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var ChatXIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M18.5 6L6.5 18", stroke: "CurrentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M6.5 6L18.5 18", stroke: "CurrentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var ChatSearchIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "m21 21-4.34-4.34" }),
+  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" })
+] });
+var MessageIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("rect", { x: "2.5", y: "4.16666", width: "15", height: "11.6667", rx: "2", stroke: "CurrentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M2.5 5.83334L10 10.8333L17.5 5.83334", stroke: "CurrentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var BlueBadgeIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M12.225 8.47394C12.1812 8.6256 12.085 8.7481 11.9479 8.82685L11.0087 9.35185V10.4252C11.0087 10.746 10.7462 11.0085 10.4254 11.0085H9.34913L8.82705 11.9477C8.7483 12.0848 8.6258 12.181 8.47413 12.2248C8.32538 12.2656 8.16788 12.2481 8.0308 12.1723L6.9983 11.5948L5.9658 12.1723C5.87538 12.2219 5.77913 12.2452 5.67997 12.2452C5.62747 12.2452 5.57497 12.2394 5.52247 12.2248C5.3708 12.181 5.2483 12.0848 5.16955 11.9477L4.64747 11.0085H3.57122C3.25038 11.0085 2.98788 10.746 2.98788 10.4252V9.35185L2.04872 8.82685C1.91163 8.7481 1.81538 8.6256 1.77163 8.47394C1.7308 8.32519 1.7483 8.16769 1.82413 8.0306L2.40163 6.9981L1.82413 5.9656C1.66663 5.68269 1.76872 5.32685 2.04872 5.16935L2.98788 4.64435V3.57102C2.98788 3.25019 3.25038 2.98769 3.57122 2.98769H4.64747L5.16955 2.04852C5.2483 1.91144 5.3708 1.81519 5.52247 1.77144C5.67122 1.7306 5.82872 1.7481 5.9658 1.82394L6.9983 2.40144L8.0308 1.82394C8.16788 1.7481 8.32538 1.7306 8.47413 1.77144C8.6258 1.81519 8.7483 1.91144 8.82705 2.04852L9.34913 2.98769H10.4254C10.7462 2.98769 11.0087 3.25019 11.0087 3.57102V4.64435L11.9479 5.16935C12.2279 5.32685 12.33 5.68269 12.1725 5.9656L11.595 6.9981L12.1725 8.0306C12.2483 8.16769 12.2658 8.32519 12.225 8.47394Z", fill: "url(#badge_grad)" }),
+  /* @__PURE__ */ jsx("path", { d: "M10.2578 3.65234C9.46271 4.36337 8.79456 5.33232 8.29345 6.39886C7.81906 7.41661 7.49167 8.53194 7.35135 9.62637H5.50726V9.61243L4.70547 7.41661L4.39144 6.55919L4.25781 6.18974L5.03955 6.16882C5.24668 6.16882 5.43376 6.2943 5.48053 6.48251L5.94155 7.45146L6.31572 8.2322L6.41594 8.44132C6.5028 8.25311 6.58966 8.07187 6.6832 7.89063C7.18432 6.88682 7.7322 5.98061 8.38031 5.21382C8.75447 4.77465 9.16204 4.37731 9.61639 4.03574C9.79679 3.90329 9.97719 3.77782 10.171 3.65931H10.2578V3.65234Z", fill: "white" }),
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "badge_grad", x1: "6.9983", y1: "12.2464", x2: "6.9983", y2: "1.75015", gradientUnits: "userSpaceOnUse", children: [
+    /* @__PURE__ */ jsx("stop", { stopColor: "#0064E1" }),
+    /* @__PURE__ */ jsx("stop", { offset: "0.994", stopColor: "#26B7FF" })
+  ] }) })
+] });
+var ArrowSendAngleIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M21.2929 1.29289C21.6834 0.902369 22.3164 0.902369 22.707 1.29289C23.0975 1.68342 23.0975 2.31643 22.707 2.70696L11.707 13.707C11.3164 14.0975 10.6834 14.0975 10.2929 13.707C9.90237 13.3164 9.90237 12.6834 10.2929 12.2929L21.2929 1.29289Z", fill: "url(#send_angle_g1)" }),
+  /* @__PURE__ */ jsx("path", { d: "M21.6698 1.05594C22.0323 0.929242 22.4354 1.02171 22.7069 1.29325C22.9784 1.56479 23.0709 1.96787 22.9442 2.33036L15.9442 22.3304C15.8088 22.7173 15.4504 22.9825 15.0409 22.9993C14.6312 23.016 14.2523 22.7812 14.0858 22.4065L10.242 13.7581L1.59361 9.91434C1.21893 9.74782 0.984123 9.36894 1.00084 8.95926C1.01765 8.54969 1.28286 8.19137 1.66978 8.05594L21.6698 1.05594ZM4.71177 9.11063L11.4061 12.0862L11.4891 12.1282C11.6764 12.2333 11.826 12.3963 11.9139 12.594L14.8885 19.2874L20.369 3.63016L4.71177 9.11063Z", fill: "url(#send_angle_g2)" }),
+  /* @__PURE__ */ jsxs("defs", { children: [
+    /* @__PURE__ */ jsxs("linearGradient", { id: "send_angle_g1", x1: "16.4999", y1: "1", x2: "16.4999", y2: "13.9998", gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx("stop", { stopColor: "#33C9D4" }),
+      /* @__PURE__ */ jsx("stop", { offset: "0.65", stopColor: "#2753FB" })
+    ] }),
+    /* @__PURE__ */ jsxs("linearGradient", { id: "send_angle_g2", x1: "12.0001", y1: "1", x2: "12.0001", y2: "23.0001", gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx("stop", { stopColor: "#33C9D4" }),
+      /* @__PURE__ */ jsx("stop", { offset: "0.65", stopColor: "#2753FB" })
+    ] })
+  ] })
+] });
+var ArrowSendIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("g", { clipPath: "url(#send_clip)", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.061819 2.80424C-0.034006 2.44295 -0.018158 2.06324 0.107481 1.71021C0.23312 1.35718 0.463272 1.04566 0.770608 0.812635C1.07794 0.57961 1.44955 0.434872 1.84131 0.395609C2.23306 0.356346 2.6285 0.424206 2.98068 0.591132L22.8602 9.98918C23.2025 10.1507 23.4904 10.3991 23.6916 10.7067C23.8929 11.0143 23.9995 11.3689 23.9995 11.7305C23.9995 12.0922 23.8929 12.4468 23.6916 12.7543C23.4904 13.0619 23.2025 13.3104 22.8602 13.4719L2.98068 22.8699C2.6285 23.0369 2.23306 23.1047 1.84131 23.0655C1.44955 23.0262 1.07794 22.8815 0.770608 22.6484C0.463272 22.4154 0.23312 22.1039 0.107481 21.7509C-0.018158 21.3978 -0.034006 21.0181 0.061819 20.6568L2.14353 12.7859L14.232 11.7305L2.14353 10.6752L0.061819 2.80424Z", fill: "CurrentColor" }) }),
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "send_clip", children: /* @__PURE__ */ jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
+] });
+var RecordMicIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M11.5298 20.0197V23.0399H6.47538C6.34807 23.0399 6.22598 23.0904 6.13596 23.1804C6.04595 23.2705 5.99537 23.3926 5.99537 23.5199C5.99537 23.6472 6.04595 23.7693 6.13596 23.8593C6.22598 23.9493 6.34807 23.9999 6.47538 23.9999H17.5443C17.6716 23.9999 17.7937 23.9493 17.8837 23.8593C17.9737 23.7693 18.0243 23.6472 18.0243 23.5199C18.0243 23.3926 17.9737 23.2705 17.8837 23.1804C17.7937 23.0904 17.6716 23.0399 17.5443 23.0399H12.4898V20.0197C16.6827 19.7696 20.0196 16.2891 20.0196 12.0343V10.23C20.0196 10.1027 19.9691 9.98061 19.879 9.89059C19.789 9.80057 19.6669 9.75 19.5396 9.75C19.4123 9.75 19.2902 9.80057 19.2002 9.89059C19.1102 9.98061 19.0596 10.1027 19.0596 10.23V12.0348C19.0596 15.9214 15.8974 19.0841 12.0098 19.0841C8.12227 19.0841 4.96001 15.9214 4.96001 12.0343V10.23C4.96001 10.1027 4.90944 9.98061 4.81942 9.89059C4.7294 9.80057 4.60731 9.75 4.48 9.75C4.3527 9.75 4.23061 9.80057 4.14059 9.89059C4.05057 9.98061 4 10.1027 4 10.23V12.0348C4 16.2891 7.33698 19.7696 11.5298 20.0197Z", fill: "CurrentColor" }),
+  /* @__PURE__ */ jsx("path", { d: "M12.0067 16.7132C14.5867 16.7132 16.6853 14.6147 16.6853 12.0346V4.67859C16.6853 2.09858 14.5867 0 12.0067 0C9.4267 0 7.32812 2.09858 7.32812 4.67859V12.0346C7.32812 14.6147 9.4267 16.7132 12.0067 16.7132ZM8.28813 4.67859C8.28813 2.62802 9.95662 0.960007 12.0067 0.960007C14.0568 0.960007 15.7253 2.62802 15.7253 4.67859V12.0346C15.7253 14.0852 14.0568 15.7532 12.0067 15.7532C9.95662 15.7532 8.28813 14.0852 8.28813 12.0346V4.67859Z", fill: "CurrentColor" })
+] });
+var AttachIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("g", { clipPath: "url(#attach_clip)", children: /* @__PURE__ */ jsx("path", { d: "M4.17813 15.1695C3.35175 15.1697 2.54387 14.9248 1.85671 14.4658C1.16955 14.0068 0.634002 13.3542 0.317821 12.5907C0.00164127 11.8272 -0.0809573 10.9871 0.0804774 10.1766C0.241912 9.36615 0.640124 8.6218 1.22473 8.03772L7.38945 1.87227C7.49167 1.77005 7.63031 1.71262 7.77488 1.71262C7.91944 1.71262 8.05809 1.77005 8.16031 1.87227C8.26253 1.9745 8.31996 2.11314 8.31996 2.25771C8.31996 2.40227 8.26253 2.54092 8.16031 2.64314L1.99486 8.80786C1.41359 9.38914 1.08503 10.1729 1.08203 10.9913C1.07903 11.8097 1.40196 12.5959 1.97897 13.1814C2.55598 13.7668 3.33986 14.1017 4.15823 14.1075C4.97659 14.1132 5.76532 13.7893 6.35061 13.212L14.325 5.20856C14.6899 4.83175 14.8921 4.3266 14.8879 3.80208C14.8837 3.27756 14.6734 2.77572 14.3025 2.40482C13.9316 2.03392 13.4298 1.82368 12.9053 1.81947C12.3807 1.81526 11.8756 2.01741 11.4988 2.38231L5.07759 8.80786C4.90208 8.98338 4.80411 9.22076 4.80411 9.46823C4.80411 9.7157 4.90208 9.95308 5.07759 10.1286C5.25311 10.3041 5.49049 10.4021 5.73796 10.4021C5.98543 10.4021 6.22281 10.3041 6.39833 10.1286L10.4707 5.98306C10.521 5.93099 10.5811 5.88945 10.6475 5.86086C10.714 5.83227 10.7855 5.81721 10.8579 5.81655C10.9302 5.81588 11.002 5.82964 11.0689 5.857C11.1359 5.88437 11.1968 5.9248 11.248 5.97594C11.2992 6.02708 11.3396 6.0879 11.3671 6.15485C11.3945 6.22181 11.4083 6.29355 11.4077 6.36591C11.4071 6.43826 11.3921 6.50977 11.3636 6.57626C11.3351 6.64276 11.2936 6.7029 11.2416 6.75319L7.13225 10.8633C6.94673 11.0488 6.72646 11.196 6.48404 11.2965C6.24162 11.3969 5.98179 11.4487 5.71938 11.4487C5.45697 11.4487 5.19713 11.3971 4.95468 11.2967C4.71223 11.1963 4.49194 11.0491 4.30636 10.8636C4.12079 10.6781 3.97357 10.4578 3.87312 10.2154C3.77267 9.97299 3.72095 9.71315 3.72092 9.45074C3.72085 8.92079 3.93131 8.41251 4.306 8.03772L10.7286 1.61944C11.3077 1.0403 12.0931 0.714912 12.912 0.714844C13.731 0.714776 14.5164 1.04004 15.0955 1.61907C15.6747 2.19811 16.0001 2.98349 16.0001 3.80244C16.0002 4.6214 15.6749 5.40683 15.0959 5.98597L7.13298 13.946C6.74578 14.3351 6.28527 14.6436 5.77807 14.8536C5.27088 15.0636 4.72708 15.171 4.17813 15.1695Z", fill: "CurrentColor" }) }),
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "attach_clip", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white" }) }) })
+] });
+var SmileIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M8.0026 14.6673C11.6845 14.6673 14.6693 11.6825 14.6693 8.00065C14.6693 4.31875 11.6845 1.33398 8.0026 1.33398C4.32071 1.33398 1.33594 4.31875 1.33594 8.00065C1.33594 11.6825 4.32071 14.6673 8.0026 14.6673Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.33594 9.33398C5.33594 9.33398 6.33594 10.6673 8.0026 10.6673C9.66927 10.6673 10.6693 9.33398 10.6693 9.33398", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M6 6H6.00667", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M10 6H10.0067", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var ProfileCardIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx("rect", { x: "2", y: "2.66406", width: "12", height: "10.6667", rx: "3", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("circle", { cx: "5.99935", cy: "6.66927", r: "1.33333", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M10 5.33333H11.3333", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M10 7.9974H11.3333", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M4.66602 10.6693H11.3327", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var NewLanguageIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M9.99414 10.548C9.99414 10.5385 9.99731 10.521 10.0037 10.4955L10.8914 7.58423C10.9167 7.50464 10.9749 7.44336 11.0656 7.40039C11.1562 7.35742 11.2604 7.33594 11.3782 7.33594C11.4958 7.33594 11.6001 7.35742 11.6908 7.40039C11.7815 7.44336 11.8395 7.50464 11.865 7.58423L12.7574 10.4955C12.7638 10.521 12.7671 10.5385 12.7671 10.548C12.7671 10.6307 12.7153 10.7024 12.6119 10.7628C12.5085 10.8232 12.4011 10.8534 12.2898 10.8534C12.153 10.8534 12.0718 10.8074 12.0464 10.7151L11.8842 10.1185H10.8771L10.7148 10.7151C10.6893 10.8074 10.6082 10.8534 10.4714 10.8534C10.36 10.8534 10.2526 10.8232 10.1492 10.7628C10.0458 10.7024 9.99414 10.6307 9.99414 10.548ZM11.0298 9.54578H11.7266L11.3782 8.26672L11.0298 9.54578Z", fill: "currentColor" }),
+  /* @__PURE__ */ jsx("path", { d: "M13.7277 5.55713H10.5369V3.99109C10.5369 2.73816 9.51758 1.71875 8.26453 1.71875H2.27234C1.01941 1.71875 0 2.73816 0 3.99109V6.65881C0 7.89465 0.991577 8.9032 2.22107 8.93067C2.21289 9.18982 2.18396 9.47852 2.13452 9.79297C2.10107 10.0052 2.18005 10.2139 2.34558 10.3511C2.45667 10.4431 2.59204 10.491 2.73035 10.491C2.79919 10.491 2.86877 10.479 2.93652 10.4548C3.38696 10.2938 4.17053 9.8866 4.57458 8.93115H6.82654V10.4973C6.82654 11.7502 7.84595 12.7697 9.09888 12.7697H11.4254C11.8296 13.7251 12.613 14.1322 13.0636 14.2933C13.1312 14.3175 13.2008 14.3293 13.2697 14.3293C13.408 14.3293 13.5433 14.2815 13.6544 14.1895C13.8201 14.0524 13.8989 13.8436 13.8655 13.6313C13.816 13.317 13.7871 13.0282 13.7789 12.769C15.0084 12.7417 16 11.7332 16 10.4973V7.82959C16 6.57654 14.9806 5.55713 13.7277 5.55713ZM6.48767 4.29578C6.66028 4.29578 6.80017 4.15588 6.80017 3.98328C6.80017 3.81067 6.66028 3.67078 6.48767 3.67078H5.29553V3.20312C5.29553 3.03052 5.15564 2.89062 4.98303 2.89062C4.81055 2.89062 4.67053 3.03052 4.67053 3.20312V3.67078H3.47852C3.30591 3.67078 3.16602 3.81067 3.16602 3.98328C3.16602 4.15588 3.30591 4.29578 3.47852 4.29578H6.48767ZM15.375 10.4972C15.375 11.4056 14.636 12.1447 13.7277 12.1447H13.467C13.2991 12.1447 13.1611 12.2775 13.1548 12.4454C13.1412 12.8063 13.1708 13.226 13.2427 13.6934C12.7877 13.5238 12.2042 13.1554 11.9375 12.358C11.8949 12.2306 11.7755 12.1447 11.6412 12.1447H9.09888C8.19055 12.1447 7.45154 11.4056 7.45154 10.4972V7.82947C7.45154 7.54932 7.52307 7.27271 7.65833 7.02966C7.74231 6.87878 7.68811 6.6886 7.53723 6.60461C7.38647 6.52063 7.19617 6.57495 7.11218 6.72571C6.92529 7.06152 6.82654 7.44312 6.82654 7.82947V8.30615H4.35876C4.22437 8.30615 4.10498 8.39209 4.06238 8.51953C3.79578 9.3169 3.21228 9.68543 2.75732 9.85486C2.8291 9.38745 2.85864 8.96777 2.84521 8.60693C2.83887 8.43897 2.70093 8.30615 2.53284 8.30615H2.27234C1.36401 8.30615 0.625 7.56714 0.625 6.65881V3.99109C0.625 3.08276 1.36401 2.34375 2.27234 2.34375H8.26453C9.17285 2.34375 9.91187 3.08276 9.91187 3.99109V5.55725H9.46875C9.29614 5.55725 9.15625 5.69714 9.15625 5.86975C9.15625 6.04236 9.29614 6.18225 9.46875 6.18225H13.7277C14.636 6.18225 15.375 6.92127 15.375 7.82959V10.4972Z", fill: "currentColor" })
+] });
+var ChatInfoIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "6.75", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M9.00016 6H9.00766", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M8.25 9H9V12H9.75", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var ArrowBackUpIcon = ({ className = "" }) => /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: /* @__PURE__ */ jsx("path", { d: "M6.13128 10.3687C6.47299 10.7104 7.02701 10.7104 7.36872 10.3687C7.71043 10.027 7.71043 9.47299 7.36872 9.13128L6.75 9.75L6.13128 10.3687ZM3.75 6.75L3.13128 6.13128C2.78957 6.47299 2.78957 7.02701 3.13128 7.36872L3.75 6.75ZM7.36872 4.36872C7.71043 4.02701 7.71043 3.47299 7.36872 3.13128C7.02701 2.78957 6.47299 2.78957 6.13128 3.13128L6.75 3.75L7.36872 4.36872ZM3.75 5.875C3.26675 5.875 2.875 6.26675 2.875 6.75C2.875 7.23325 3.26675 7.625 3.75 7.625V6.75V5.875ZM11.25 11.875C10.7668 11.875 10.375 12.2668 10.375 12.75C10.375 13.2332 10.7668 13.625 11.25 13.625V12.75V11.875ZM6.75 9.75L7.36872 9.13128L4.36872 6.13128L3.75 6.75L3.13128 7.36872L6.13128 10.3687L6.75 9.75ZM3.75 6.75L4.36872 7.36872L7.36872 4.36872L6.75 3.75L6.13128 3.13128L3.13128 6.13128L3.75 6.75ZM3.75 6.75V7.625H12V6.75V5.875H3.75V6.75ZM12 6.75V7.625C13.1736 7.625 14.125 8.5764 14.125 9.75H15H15.875C15.875 7.6099 14.1401 5.875 12 5.875V6.75ZM15 9.75H14.125C14.125 10.9236 13.1736 11.875 12 11.875V12.75V13.625C14.1401 13.625 15.875 11.8901 15.875 9.75H15ZM12 12.75V11.875H11.25V12.75V13.625H12V12.75Z", fill: "CurrentColor" }) });
+var FileIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M14 3V7C14 7.55228 14.4477 8 15 8H19", stroke: "CurrentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17 21H7C5.89543 21 5 20.1046 5 19V5C5 3.89543 5.89543 3 7 3H14L19 8V19C19 20.1046 18.1046 21 17 21Z", stroke: "CurrentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 9H10", stroke: "CurrentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 13H15", stroke: "CurrentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 17H15", stroke: "CurrentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var MessageReplayIcon = ({ className = "" }) => /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: /* @__PURE__ */ jsx("path", { d: "M6.70469 2.33346C6.87969 2.3918 6.93802 2.5668 6.93802 2.80013C6.93802 3.50013 6.93802 4.25846 6.93802 4.95846V5.07513C7.17135 5.07513 7.40469 5.07513 7.63802 5.07513C8.27969 5.07513 8.97969 5.25013 9.62135 5.48346C10.788 5.95013 11.488 6.7668 11.7797 7.93346C12.013 8.6918 12.013 9.45013 12.0714 10.2668C12.0714 10.4418 12.0714 10.6168 12.0714 10.7335C12.0714 10.9085 11.9547 11.0835 11.7797 11.0835C11.6047 11.0835 11.488 11.0835 11.3714 10.8501C11.2547 10.6168 11.138 10.3835 10.963 10.1501C10.5547 9.45013 9.97135 8.98346 9.27135 8.75013C8.51302 8.45846 7.75469 8.40013 6.93802 8.40013V8.5168C6.93802 9.27513 6.93802 9.97513 6.93802 10.7335C6.93802 10.9085 6.93802 11.0251 6.70469 11.0835C6.52969 11.1418 6.41302 11.0835 6.29635 10.9668C4.83802 9.62513 3.37969 8.28346 1.97969 6.9418C1.92135 6.9418 1.86302 6.82513 1.80469 6.70846V6.53346C1.80469 6.47513 1.92135 6.4168 1.97969 6.35846C3.43802 5.0168 4.83802 3.73346 6.29635 2.3918C6.35469 2.33346 6.47135 2.27513 6.52969 2.2168H6.70469V2.33346Z", fill: "CurrentColor" }) });
+var RightArrow = ({ className }) => /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M7.5 18H28.5", stroke: "CurrentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M19.5 27L28.5 18", stroke: "CurrentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M19.5 9L28.5 18", stroke: "CurrentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var FileDownloadIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M11.6641 2.5V5.83333C11.6641 6.29357 12.0372 6.66667 12.4974 6.66667H15.8307", stroke: "CurrentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1641 17.5H5.83073C4.91025 17.5 4.16406 16.7538 4.16406 15.8333V4.16667C4.16406 3.24619 4.91025 2.5 5.83073 2.5H11.6641L15.8307 6.66667V15.8333C15.8307 16.7538 15.0845 17.5 14.1641 17.5Z", stroke: "CurrentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M10.0026 9.16602V14.166", stroke: "CurrentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M7.5 11.666L10 14.166L12.5 11.666", stroke: "CurrentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var BusinessInfoIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M2 13.9993H14", stroke: "CurrentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3.33594 14V4.66667L8.66927 2V14", stroke: "CurrentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M12.6641 13.9993V7.33268L8.66406 4.66602", stroke: "CurrentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.9974 5.99992V6.00659", stroke: "CurrentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.9974 7.99992V8.00659", stroke: "CurrentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.9974 9.99992V10.0066", stroke: "CurrentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.9974 11.9999V12.0066", stroke: "CurrentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var ChatMailIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("rect", { x: "1.75", y: "2.91797", width: "10.5", height: "8.16667", rx: "2", stroke: "black", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M1.75 4.08203L7 7.58203L12.25 4.08203", stroke: "black", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var ChatPhoneCallIcon = ({ className = "" }) => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: /* @__PURE__ */ jsx("path", { d: "M3.33333 2.66602H6L7.33333 5.99935L5.66667 6.99935C6.38064 8.44704 7.55231 9.61871 9 10.3327L10 8.66602L13.3333 9.99935V12.666C13.3333 13.4024 12.7364 13.9993 12 13.9993C6.61843 13.6723 2.32704 9.38092 2 3.99935C2 3.26297 2.59695 2.66602 3.33333 2.66602", stroke: "CurrentColor", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var BadgeHomeIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M2.91667 7H1.75L7 1.75L12.25 7H11.0833", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M2.91406 7V11.0833C2.91406 11.7277 3.4364 12.25 4.08073 12.25H9.91406C10.5584 12.25 11.0807 11.7277 11.0807 11.0833V7", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("rect", { x: "5.83594", y: "7", width: "2.33333", height: "2.33333", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var BadgeOfficeIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M1.75 12.2507H12.25", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M2.91406 12.25V4.08333L7.58073 1.75V12.25", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11.0859 12.2507V6.41732L7.58594 4.08398", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.2526 5.24969V5.25552", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.2526 6.99969V7.00552", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.2526 8.74969V8.75552", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.2526 10.4997V10.5055", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var MapPinIcon = ({ className = "" }) => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M11.9974 4.00188V4.00854", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M12.0028 8.66599L9.66942 5.33266C9.04883 4.21101 9.31413 2.8065 10.3011 1.9885C11.2881 1.1705 12.7174 1.1705 13.7044 1.9885C14.6914 2.8065 14.9567 4.21101 14.3361 5.33266L12.0028 8.66599", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M7 3.16797L6 2.66797L2 4.66797V13.3346L6 11.3346L10 13.3346L14 11.3346V10.0013", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M5.9974 2.66797V11.3346", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M9.9974 10V13.3333", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var Select = ({ options, value, onChange, placeholder = "Select...", size = 36, className, disabled }) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const selected = options.find((o) => o.value === value);
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        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 },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn(selected ? "text-black" : "text-[#9C9C9C]"), children: selected ? selected.label : placeholder }),
+          /* @__PURE__ */ jsx("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"), children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("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)]", children: options.map((opt) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        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);
+        },
+        children: opt.label
+      },
+      opt.value
+    )) })
+  ] });
+};
+var Select_default = Select;
+var LANG_OPTIONS = [
+  "English",
+  "Bangla",
+  "Arabic",
+  "Chinese",
+  "French",
+  "German",
+  "Hindi",
+  "Italian",
+  "Japanese",
+  "Korean",
+  "Portuguese",
+  "Russian",
+  "Spanish",
+  "Turkish",
+  "Urdu"
+].map((l) => ({ label: l, value: l }));
+var ChatTranslateSettingsModal = ({
+  open,
+  onClose,
+  onSave,
+  initial,
+  className,
+  variant = "group"
+}) => {
+  const [incomingTarget, setIncomingTarget] = useState(
+    initial?.incomingTarget ?? ""
+  );
+  React11.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      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 = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx2(
+        isSingle ? "fixed inset-0 z-9999 flex" : "absolute inset-0 z-50 flex items-center justify-center"
+      ),
+      onClick: () => onClose(),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: isSingle ? "fixed inset-0 bg-black/30" : "absolute inset-0 bg-black/30" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "translate-settings-title",
+            onClick: (e) => e.stopPropagation(),
+            className: clsx2(
+              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
+            ),
+            children: [
+              /* @__PURE__ */ jsx("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)]", children: /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  id: "translate-settings-title",
+                  className: "w-full text-[20px] font-semibold text-black",
+                  children: "Translation Settings"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[12px] font-medium text-black", children: "Translate message into" }),
+                  /* @__PURE__ */ jsx(
+                    Select_default,
+                    {
+                      options: LANG_OPTIONS,
+                      value: incomingTarget,
+                      onChange: setIncomingTarget,
+                      placeholder: "Select Language",
+                      size: 36
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-start gap-1.5 text-[#FF5300]", children: [
+                  /* @__PURE__ */ jsx(ChatInfoIcon, { className: "h-4 w-4 shrink-0" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed", children: "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." })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex h-[52px] items-center justify-end rounded-b-md bg-[#f8f8f8] px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  Button_default,
+                  {
+                    onClick: onClose,
+                    variant: "outlined",
+                    color: "black",
+                    size: "34",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button_default,
+                  {
+                    onClick: handleSave,
+                    variant: "filled",
+                    color: "black",
+                    size: "34",
+                    children: "Update"
+                  }
+                )
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (isSingle) {
+    return createPortal(content, document.body);
+  }
+  return content;
+};
+var ChatTranslateSettingsModal_default = ChatTranslateSettingsModal;
+var extColor = (ext) => {
+  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]";
+};
+var FilePreviewChip = ({ name, sizeMB, ext, onRemove }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "mr-2 inline-flex h-[65px] max-w-[185px] items-center gap-3 whitespace-nowrap rounded-sm",
+        "border border-[#e1e1e1] bg-white px-3 py-2"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(FileIcon, { className: cn("h-[18px] w-[18px]", extColor(ext)) }),
+            /* @__PURE__ */ jsx("div", { className: "truncate text-[13px] font-normal text-black", children: name })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2 text-xs text-[#636363]", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              sizeMB.toFixed(1),
+              " MB"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "h-3 w-px bg-[#e1e1e1]" }),
+            /* @__PURE__ */ jsx("span", { className: "uppercase", children: ext })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            title: "Remove",
+            "aria-label": "Remove file",
+            className: cn(
+              "grid h-8 w-8 place-items-center rounded-full bg-white text-[#3D3D3D]",
+              "shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:bg-black/5"
+            ),
+            children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-[18px] w-[18px]" })
+          }
+        )
+      ]
+    }
+  );
+};
+var ImageThumb = ({ url, onRemove }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative mr-2 inline-block h-[65px] w-[65px] rounded-sm",
+        "border border-[#e1e1e1] bg-[#F7F7F7]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("img", { src: url, alt: "", className: "h-full w-full rounded-sm object-cover", loading: "lazy" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            "aria-label": "Remove image",
+            title: "Remove image",
+            className: cn(
+              "absolute left-1/2 top-1/2 z-10 grid h-6 w-6 -translate-x-1/2 -translate-y-1/2 place-items-center",
+              "rounded-full bg-black/30 text-white",
+              "shadow-[0px_2px_4px_0px_#A5A3AE4D]"
+            ),
+            children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-4 w-4 text-white" })
+          }
+        )
+      ]
+    }
+  );
+};
+var AttachmentPreviewStrip = ({
+  imgPreviews,
+  filePreviews,
+  onRemoveFile,
+  onRemoveImage
+}) => {
+  const has = imgPreviews.length > 0 || filePreviews.length > 0;
+  if (!has) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("mx-auto mb-2 max-w-[410px] overflow-x-auto custom-scroll"), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start whitespace-nowrap", children: [
+    filePreviews.map((file, index) => /* @__PURE__ */ jsx(
+      FilePreviewChip,
+      {
+        name: file.name,
+        sizeMB: file.sizeMB,
+        ext: file.ext,
+        onRemove: () => onRemoveFile(index)
+      },
+      `${file.name}-${index}`
+    )),
+    imgPreviews.map((url, index) => /* @__PURE__ */ jsx(ImageThumb, { url, onRemove: () => onRemoveImage(index) }, `${url}-${index}`))
+  ] }) });
+};
+var AttachmentPreviewStrip_default = AttachmentPreviewStrip;
+var idleGradient = "linear-gradient(90.85deg, rgba(51, 201, 212, 0.5) 0%, rgba(39, 83, 251, 0.5) 29.98%, rgba(39, 83, 251, 0.5) 49.97%, rgba(39, 83, 251, 0.5) 64.96%, rgba(235, 67, 255, 0.5) 99.94%)";
+var activeGradient = "linear-gradient(90.85deg, #33C9D4 0%, #2753FB 29.98%, #2753FB 49.97%, #2753FB 64.96%, #EB43FF 99.94%)";
+var ChatComposerBar = ({
+  recording,
+  seconds,
+  isTyping,
+  textRef,
+  text,
+  onTextChange,
+  onAutoGrow,
+  hasAttachments,
+  canSendArrow,
+  startRecording,
+  stopRecording,
+  sendText,
+  sendAttachments,
+  fmtTime: fmtTime2
+}) => {
+  const composingRef = useRef(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const isActiveBorder = isFocused || recording;
+  if (!recording) {
+    return /* @__PURE__ */ jsx("div", { className: "flex w-full items-stretch gap-2", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "w-full rounded-sm p-px transition-[background] duration-200",
+        style: {
+          background: isActiveBorder ? activeGradient : idleGradient
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-[50px] w-full items-center justify-between rounded-[3px] bg-white", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between p-[3px]", children: [
+            !isTyping ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: startRecording,
+                className: "grid h-[46px] w-[46px] place-items-center rounded-xs bg-[#f8f8f8] text-[#ff5301] hover:brightness-95",
+                title: "Record voice",
+                "aria-label": "Record voice",
+                children: /* @__PURE__ */ jsx(RecordMicIcon, { className: "h-6 w-6" })
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: textRef,
+                rows: 1,
+                autoFocus: true,
+                placeholder: "Type a message",
+                className: "custom-scroll-hidden max-h-[200px] flex-1 resize-none bg-transparent px-3 py-2 outline-none placeholder:text-[#777]",
+                value: text,
+                onChange: (e) => onTextChange(e.target.value),
+                onInput: onAutoGrow,
+                onFocus: () => setIsFocused(true),
+                onBlur: () => setIsFocused(false),
+                onCompositionStart: () => {
+                  composingRef.current = true;
+                },
+                onCompositionEnd: () => {
+                  composingRef.current = false;
+                  onAutoGrow();
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && e.shiftKey) {
+                    return;
+                  }
+                  if (composingRef.current) {
+                    return;
+                  }
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    if (text.length > 0) {
+                      sendText();
+                    }
+                  }
+                }
+              }
+            )
+          ] }),
+          !canSendArrow ? /* @__PURE__ */ jsx("div", { className: "grid h-full w-px place-items-center bg-[#E7E7E7]" }) : null,
+          /* @__PURE__ */ jsx("div", { className: "px-2", children: isTyping ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-10 w-px border-l border-[#CCCCCC]" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: sendText,
+                className: cn(
+                  "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full",
+                  "text-[#ff5301] hover:bg-[#f8f8f8]"
+                ),
+                title: hasAttachments ? "Send attachments" : "Send",
+                "aria-label": "Send",
+                children: /* @__PURE__ */ jsx(ArrowSendAngleIcon, { className: "h-6 w-6" })
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-10 w-px border-l border-[#CCCCCC]" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: sendAttachments,
+                disabled: !hasAttachments,
+                className: cn(
+                  "ms-1 grid h-[40px] w-[40px] place-items-center rounded-full hover:bg-[#f8f8f8]",
+                  hasAttachments ? "text-[#ff5301]" : "text-[#B9C3D4]"
+                ),
+                title: hasAttachments ? "Send attachments" : "Send",
+                "aria-label": "Send",
+                children: /* @__PURE__ */ jsx(ArrowSendIcon, { className: "h-6 w-6" })
+              }
+            )
+          ] }) })
+        ] })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full items-stretch gap-2", children: /* @__PURE__ */ jsx("div", { className: "w-full rounded-sm p-px", style: { background: activeGradient }, children: /* @__PURE__ */ jsxs("div", { className: "flex h-[52px] w-full items-center justify-between rounded-[3px] bg-white", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ms-[3px] grid h-[46px] w-[46px] place-items-center rounded-xs bg-[#f8f8f8] text-[#ff5301] hover:brightness-95",
+        "aria-label": "Recording",
+        title: "Recording",
+        children: /* @__PURE__ */ jsx(
+          RecordMicIcon,
+          {
+            className: cn(
+              "h-6 w-6",
+              seconds % 2 === 0 ? "text-[#929292]" : "text-[#ff5301]"
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "px-3 text-[13px]", children: fmtTime2(seconds) }),
+    /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-3 pr-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => stopRecording(false),
+          className: "grid h-8 w-8 place-items-center rounded-full text-[#3D3D3D] hover:bg-black/5",
+          title: "Discard",
+          "aria-label": "Discard recording",
+          children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-5 w-5" })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "h-6 w-px bg-[#E7E7E7]" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => stopRecording(true),
+          className: "grid h-10 w-[40px] place-items-center rounded-full text-[#ff5301]",
+          title: hasAttachments ? "Send attachments" : "Send",
+          "aria-label": "Send",
+          children: /* @__PURE__ */ jsx(ArrowSendAngleIcon, { className: "h-6 w-6" })
+        }
+      )
+    ] })
+  ] }) }) });
+};
+var ChatComposerBar_default = ChatComposerBar;
+var WIDTH = 380;
+var GAP_Y = 0;
+var PADDING = 0;
+var defaultCard = {
+  avatarSrc: "/chat/img/demo-a.jpg",
+  name: "Arman Hossain",
+  country: "Bangladesh",
+  flag: "\u{1F1E7}\u{1F1E9}",
+  company: "Easy Fashion",
+  email: "aminul@oceanget.com",
+  phone: "+880 1712 345678"
+};
+var BusinessCardDropup = ({
+  open,
+  onClose,
+  onSend,
+  anchorRef,
+  className
+}) => {
+  const panelRef = useRef(null);
+  const [pos, setPos] = useState(null);
+  const [form] = useState(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]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onDoc = (e) => {
+      if (panelRef.current && !panelRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    const onEsc = (e) => {
+      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 = /* @__PURE__ */ jsxs(
+    "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"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-black", children: "Business Card" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Close",
+              className: "grid h-8 w-8 place-items-center rounded-full hover:bg-black/5",
+              children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-6 w-6" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
+          "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')" },
+            children: /* @__PURE__ */ jsx("div", { className: "flex h-full justify-between gap-4 px-6 py-6", children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-[#004F4F]", children: form.name }),
+                /* @__PURE__ */ jsx("div", { className: "h-px w-[105px] bg-black" }),
+                /* @__PURE__ */ jsx("div", { className: "mt-[6px] flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[#636363]", children: form.country }) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-4 mb-10 space-y-1.5 text-xs text-black", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-[#FFE9DB]", children: /* @__PURE__ */ jsx(BusinessInfoIcon, { className: "h-3 w-3 text-[#EA580C]" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: form.company })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-[#FFE9DB]", children: /* @__PURE__ */ jsx(ChatMailIcon, { className: "h-3 w-3 text-[#EA580C]" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: form.email })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-[#FFE9DB]", children: /* @__PURE__ */ jsx(ChatPhoneCallIcon, { className: "h-3 w-3 text-[#EA580C]" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: form.phone })
+                ] })
+              ] })
+            ] }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 flex justify-end gap-2", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            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();
+            },
+            children: "Send"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            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"
+          }
+        )
+      ]
+    }
+  );
+  return createPortal(body, document.body);
+};
+var BusinessCardDropup_default = BusinessCardDropup;
+var EMOJIS = "\u{1F600} \u{1F601} \u{1F602} \u{1F923} \u{1F603} \u{1F604} \u{1F605} \u{1F60A} \u{1F607} \u{1F642} \u{1F643} \u{1F609} \u{1F60C} \u{1F60D} \u{1F970} \u{1F618} \u{1F617} \u{1F619} \u{1F61A} \u{1F60B} \u{1F61C} \u{1F61D} \u{1F61B} \u{1FAE2} \u{1F92B} \u{1F92D} \u{1F917} \u{1F914} \u{1F928} \u{1F610} \u{1F611} \u{1F636} \u{1F644} \u{1F62F} \u{1F62A} \u{1F634} \u{1F60C} \u{1F924} \u{1F62E}\u200D\u{1F4A8} \u{1F62E} \u{1F632} \u{1F92F} \u{1F974} \u{1F971} \u{1F62C} \u{1F60F} \u{1F925} \u{1F615} \u{1F61F} \u{1F641} \u2639\uFE0F \u{1F622} \u{1F62D}".split(
+  " "
+);
+var WIDTH2 = 300;
+var GAP_Y2 = 1;
+var GAP_X = 1;
+var PADDING2 = 1;
+var EmojiDropup = ({ open, onClose, onSelect, anchorRef, className }) => {
+  const panelRef = React11.useRef(null);
+  const [pos, setPos] = React11.useState(null);
+  const place = React11.useCallback(() => {
+    const anchor = anchorRef?.current;
+    const panel = panelRef.current;
+    if (!anchor || !panel) {
+      return;
+    }
+    const ar = anchor.getBoundingClientRect();
+    const ph = panel.offsetHeight + 10;
+    let left = ar.right + GAP_X - 45;
+    let top = ar.top - GAP_Y2 - ph;
+    left = Math.min(left, window.innerWidth - PADDING2 - WIDTH2);
+    left = Math.max(left, PADDING2);
+    top = Math.max(top, PADDING2);
+    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]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onDoc = (e) => {
+      if (panelRef.current && !panelRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    const onEsc = (e) => 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 = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: panelRef,
+      role: "dialog",
+      "aria-label": "Emoji picker",
+      className: clsx2("emoji-dropup", className),
+      style: {
+        zIndex: "9999",
+        width: WIDTH2,
+        left: pos?.left ?? -9999,
+        top: pos?.top ?? -9999,
+        maxHeight: Math.max(140, window.innerHeight - 2 * PADDING2)
+        // dynamic height
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "emoji-dropup__scroll", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-0", children: EMOJIS.map((e, i) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "emoji-dropup__item",
+          onClick: () => {
+            onSelect(e);
+            onClose();
+          },
+          "aria-label": `Insert ${e}`,
+          children: e
+        },
+        i
+      )) }) })
+    }
+  );
+  return createPortal(body, document.body);
+};
+var EmojiDropup_default = EmojiDropup;
+
+// src/ui/chat/scrollToMessage.ts
+function scrollToMessageById(messageId) {
+  if (!messageId) {
+    return;
+  }
+  const target = document.querySelector(`[data-msg-id="${messageId}"]`);
+  if (!target) {
+    return;
+  }
+  const scroller = target.closest("[data-chat-scroll]");
+  if (scroller) {
+    const top = target.offsetTop - scroller.clientHeight / 2 + target.clientHeight / 2;
+    scroller.scrollTo({ top, behavior: "smooth" });
+  } else {
+    target.scrollIntoView({ behavior: "smooth", block: "center" });
+  }
+  const cleanupId = `focus-overlay-${Date.now()}`;
+  const overlay = document.createElement("div");
+  overlay.id = cleanupId;
+  Object.assign(overlay.style, {
+    position: "absolute",
+    inset: "-4px",
+    // tiny spread so it peeks outside rounded corners
+    borderRadius: "6px",
+    background: "rgba(0,0,0,0.05)",
+    // black / 5% opacity
+    pointerEvents: "none",
+    zIndex: "1",
+    transition: "opacity 220ms ease",
+    opacity: "0"
+  });
+  const prevPos = target.style.position;
+  if (getComputedStyle(target).position === "static") {
+    target.style.position = "relative";
+  }
+  target.appendChild(overlay);
+  requestAnimationFrame(() => overlay.style.opacity = "1");
+  window.setTimeout(() => {
+    overlay.style.opacity = "0";
+    window.setTimeout(() => {
+      overlay.remove();
+      if (!prevPos) {
+        target.style.removeProperty("position");
+      } else {
+        target.style.position = prevPos;
+      }
+    }, 240);
+  }, 1200);
+}
+var fmt = (s) => {
+  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}`;
+};
+var ReplyCard = ({ 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 mode = 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";
+  const [durTxt, setDurTxt] = React11.useState(refMsg.audio?.duration ?? "0:06");
+  React11.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;
+      }
+      setDurTxt(refMsg.audio?.duration ?? "0:06");
+    };
+    a.addEventListener("loadedmetadata", onLoaded);
+    a.addEventListener("error", onError);
+    try {
+      a.load?.();
+    } catch {
+    }
+    return () => {
+      disposed = true;
+      a.pause?.();
+      a.src = "";
+      a.removeAttribute?.("src");
+      a.load?.();
+      a.removeEventListener("loadedmetadata", onLoaded);
+      a.removeEventListener("error", onError);
+    };
+  }, [mode, refMsg.audio?.src, refMsg.audio?.duration]);
+  const clickToJump = React11.useCallback(() => {
+    if (!jumpOnClick) {
+      return;
+    }
+    if (refMsg.id) {
+      scrollToMessageById(refMsg.id);
+    }
+  }, [jumpOnClick, refMsg.id]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: clickToJump,
+      className: clsx2(
+        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
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(ArrowBackUpIcon, { className: "h-[18px] w-[18px]" }),
+            /* @__PURE__ */ jsx("div", { className: "text-[13px] font-normal  text-[#2c2c2c]", children: "Reply" })
+          ] }),
+          onClose && /* @__PURE__ */ jsx(
+            "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",
+              children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-[18px] w-[18px]" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "pb-1", children: [
+          mode === "text" && /* @__PURE__ */ jsx("div", { className: "truncate text-[13px] text-[#636363]", children: refMsg.text.replace(/\s+/g, " ") }),
+          mode === "files" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 h-[21px]", children: [
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-sm border-[0.7px] border-[#e1e1e1] bg-white px-2.5 py-[2px]", children: [
+              /* @__PURE__ */ jsx(FileIcon, { className: "h-4 w-4 text-[#6B7280]" }),
+              /* @__PURE__ */ jsx("span", { className: "max-w-[110px] truncate text-[10px] text-[#2c2c2c]", children: refMsg.files[0].name })
+            ] }),
+            refMsg.files.length > 1 && /* @__PURE__ */ jsxs("span", { className: " text-xs text-[#636363]", children: [
+              "+",
+              refMsg.files.length - 1
+            ] })
+          ] }),
+          mode === "images" && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: refMsg.images.slice(0, 3).map((src, i) => {
+            const extra = refMsg.images.length - 3;
+            const isLast = i === 2 && extra > 0;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "relative h-[21px] w-[26px] overflow-hidden rounded-sm border border-[#E5E5E5] bg-[#F5F7FA]",
+                children: [
+                  /* @__PURE__ */ jsx("img", { src, alt: "", className: "h-full w-full object-cover" }),
+                  isLast && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid place-items-center bg-black/40", children: /* @__PURE__ */ jsxs("span", { className: " text-xs font-semibold text-white", children: [
+                    "+",
+                    extra
+                  ] }) })
+                ]
+              },
+              i
+            );
+          }) }),
+          mode === "audio" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 h-[21px] border border-[#D8D8D8] rounded-[3.5px] p-[1.75px] max-w-[151px]", children: [
+            /* @__PURE__ */ jsx("span", { className: "grid h-[17.5px] w-[18.08px] place-items-center rounded-[2.33px] bg-[#f1f1f1] text-[#00486F]", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className: "h-3 w-3", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M6 4.5v11l9-5.5-9-5.5Z" }) }) }),
+            /* @__PURE__ */ jsxs("div", { className: "relative h-[1.17px] w-[130px] rounded-full bg-[#BDBDBD]", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "absolute left-0 top-0 h-full rounded-full bg-[#747474]",
+                  style: { width: "0%" }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "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)" }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[#747474] me-1", children: durTxt })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var ReplyCard_default = ReplyCard;
+var Tooltip = ({ children, text }) => /* @__PURE__ */ jsx("span", { title: text, children });
+var fmtTime = (s) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+var mb = (bytes) => Math.max(0.1, bytes / (1024 * 1024));
+var extFromName = (name) => {
+  const dot = name.lastIndexOf(".");
+  return dot >= 0 ? name.slice(dot + 1).toLowerCase() : "";
+};
+var 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";
+var ChatFooter = ({
+  variant = "group",
+  onSend,
+  onAfterSend,
+  className,
+  maxRows = 4,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  actions: _actions,
+  replyTo,
+  clearReply
+}) => {
+  const actionData = [
+    { key: "attachment", title: "Attach file", icon: /* @__PURE__ */ jsx(AttachIcon, { className: "h-4 w-4" }) },
+    { key: "emoji", title: "Add emoji", icon: /* @__PURE__ */ jsx(SmileIcon, { className: "h-4 w-4" }) },
+    {
+      key: "businessCard",
+      title: "Share business card",
+      icon: /* @__PURE__ */ jsx(ProfileCardIcon, { className: "h-4 w-4" })
+    },
+    {
+      key: "translate",
+      title: "Translation settings",
+      icon: /* @__PURE__ */ jsx(NewLanguageIcon, { className: "h-4 w-4" })
+    }
+  ];
+  const textRef = useRef(null);
+  const emojiBtnRef = useRef(null);
+  const [text, setText] = useState("");
+  const [showEmoji, setShowEmoji] = useState(false);
+  const [recording, setRecording] = useState(false);
+  const [seconds, setSeconds] = useState(0);
+  const mediaRecRef = useRef(null);
+  const streamRef = useRef(null);
+  const chunksRef = useRef([]);
+  const [micError, setMicError] = useState("");
+  const [imgPreviews, setImgPreviews] = useState([]);
+  const [filePreviews, setFilePreviews] = useState([]);
+  const fileInputRef = useRef(null);
+  const [showTranslate, setShowTranslate] = useState(false);
+  const [translateSettings, setTranslateSettings] = useState({
+    incomingTarget: "",
+    autoIncoming: true,
+    enableOutgoing: false,
+    outgoingFrom: "English",
+    outgoingTo: "Bangla"
+  });
+  const bizBtnRef = useRef(null);
+  const [showBiz, setShowBiz] = useState(false);
+  const addrBtnRef = useRef(null);
+  const [, setShowAddress] = useState(false);
+  const insertEmoji = (emoji) => {
+    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);
+    });
+  };
+  const handleAutoGrow = React11.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]);
+  useEffect(() => {
+    if (!recording) {
+      return;
+    }
+    setSeconds(0);
+    const id = setInterval(() => setSeconds((s) => s + 1), 1e3);
+    return () => clearInterval(id);
+  }, [recording]);
+  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 {
+      }
+    };
+  }, []);
+  const isTyping = text.length > 0;
+  const hasAttachments = imgPreviews.length > 0 || filePreviews.length > 0;
+  const canSendArrow = useMemo(() => hasAttachments || isTyping, [hasAttachments, isTyping]);
+  const onFilesPicked = (e) => {
+    const files = Array.from(e.target.files ?? []);
+    if (!files.length) {
+      return;
+    }
+    const imgs = [];
+    const docs = [];
+    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 = "";
+  };
+  const previewFilesToPayload = (files) => 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([]);
+  };
+  const sendText = async () => {
+    const t = text.trim();
+    const hasAttachmentsNow = imgPreviews.length > 0 || filePreviews.length > 0;
+    if (!t && !hasAttachmentsNow) return;
+    if (hasAttachmentsNow) {
+      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?.();
+  };
+  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) {
+      let name;
+      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 {
+      }
+      streamRef.current = null;
+    }
+  };
+  const finalizeBlob = (rec) => 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 /* @__PURE__ */ jsxs("div", { className: clsx2("border-t border-[#ededed] bg-white p-3.5", className), children: [
+    replyTo && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(ReplyCard_default, { refMsg: replyTo, onClose: clearReply }) }),
+    /* @__PURE__ */ jsx(
+      AttachmentPreviewStrip_default,
+      {
+        imgPreviews,
+        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;
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-3", children: [
+      (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 /* @__PURE__ */ jsx("span", { className: "relative inline-flex", children: /* @__PURE__ */ jsx(Tooltip, { text: a.title, children: /* @__PURE__ */ jsx("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]", children: /* @__PURE__ */ jsx("span", { children: a.icon }) }) }) }, a.key);
+        }
+        if (isTranslate) {
+          return /* @__PURE__ */ jsx(Tooltip, { text: a.title, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setShowTranslate(true), className: "flex h-6 w-6 items-center justify-center rounded-full text-[#0F0F0F] hover:bg-[#F4F6F8]", children: /* @__PURE__ */ jsx("span", { children: a.icon }) }) }, a.key);
+        }
+        if (isBiz) {
+          return /* @__PURE__ */ jsx("span", { className: "relative inline-flex", children: /* @__PURE__ */ jsx(Tooltip, { text: a.title, children: /* @__PURE__ */ jsx("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]", children: /* @__PURE__ */ jsx("span", { children: a.icon }) }) }) }, a.key);
+        }
+        if (isAddress) {
+          return /* @__PURE__ */ jsx("span", { className: "relative inline-flex", children: /* @__PURE__ */ jsx(Tooltip, { text: a.title, children: /* @__PURE__ */ jsx("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]", children: /* @__PURE__ */ jsx("span", { children: a.icon }) }) }) }, a.key);
+        }
+        return /* @__PURE__ */ jsx(Tooltip, { text: a.title, children: /* @__PURE__ */ jsx("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]", children: /* @__PURE__ */ jsx("span", { children: a.icon }) }) }, a.key);
+      }),
+      /* @__PURE__ */ jsx("input", { ref: fileInputRef, type: "file", multiple: true, accept: ACCEPT, onChange: onFilesPicked, className: "hidden" }),
+      /* @__PURE__ */ jsx(EmojiDropup_default, { open: showEmoji, onClose: () => setShowEmoji(false), onSelect: insertEmoji, anchorRef: emojiBtnRef }),
+      /* @__PURE__ */ jsx(
+        BusinessCardDropup_default,
+        {
+          open: showBiz,
+          onClose: () => setShowBiz(false),
+          anchorRef: bizBtnRef,
+          onSend: async (card) => {
+            onSend({ type: "businessCard", card, replyTo });
+            clearReply?.();
+            onAfterSend?.();
+          }
+        }
+      )
+    ] }),
+    micError && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-start gap-2 rounded-sm bg-[#f8f8f8] px-2 py-1.5 text-xs text-[#ff5301]", children: [
+      /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(ChatInfoIcon, { className: "mt-0.5 h-3.5 w-3.5" }) }),
+      /* @__PURE__ */ jsx("span", { children: micError }),
+      /* @__PURE__ */ jsx("span", { className: "pointer flex cursor-pointer items-center justify-center rounded-full p-1 hover:bg-black/10", onClick: () => setMicError(""), children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-3.5 w-3.5" }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ChatComposerBar_default,
+      {
+        recording,
+        seconds,
+        isTyping,
+        textRef,
+        text,
+        onTextChange: setText,
+        onAutoGrow: handleAutoGrow,
+        hasAttachments,
+        canSendArrow,
+        startRecording,
+        stopRecording,
+        sendText,
+        sendAttachments,
+        fmtTime
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChatTranslateSettingsModal_default,
+      {
+        variant,
+        open: showTranslate,
+        onClose: () => setShowTranslate(false),
+        initial: translateSettings,
+        onSave: (s) => {
+          setTranslateSettings(s);
+          setShowTranslate(false);
+        }
+      }
+    )
+  ] });
+};
+var ChatFooter_default = ChatFooter;
+function ChatHeader({ left, right, below, className }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: clsx2("border-b border-[#e1e1e1] h-[64px]", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between px-4 pt-2.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-start gap-3", children: left }),
+      right
+    ] }) }),
+    below && /* @__PURE__ */ jsx(Fragment, { children: below })
+  ] });
+}
+var ChatIdentity = (props) => {
+  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 /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
+      props.variant === "avatar" ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: props.src,
+          alt: title,
+          className: "h-full w-full rounded-xs object-cover border border-[#f1f1f1]"
+        }
+      ) : null,
+      props.variant === "initial" ? /* @__PURE__ */ jsx(
+        "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" },
+          children: props.initial
+        }
+      ) : null,
+      props.variant === "logo" ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "grid h-full w-full place-items-center rounded-xs",
+          style: { boxShadow: `0 0 0 1px ${props.ringColor ?? "#EDEDED"} inset` },
+          children: /* @__PURE__ */ jsx("img", { src: props.src, alt: title, className: "h-full w-full rounded-xs object-cover" })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        "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
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1 text-[14px] font-medium text-black", children: [
+        /* @__PURE__ */ jsx("span", { className: "max-w-[300px] truncate", children: title }),
+        verified ? /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(BlueBadgeIcon, {}) }) : null
+      ] }),
+      subtitle ? title.toLowerCase() === "banbox.com" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: "/chat/globe.gif",
+            alt: "globe",
+            className: "h-[12px] w-auto shrink-0 object-contain",
+            style: { mixBlendMode: "multiply" }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: subtitleClass, children: subtitle })
+      ] }) : /* @__PURE__ */ jsx("div", { className: subtitleClass, children: subtitle }) : null
+    ] })
+  ] });
+};
+var ChatIdentity_default = ChatIdentity;
+var ChatInquiryBar = ({ id, onView, className, label, buttonLabel }) => {
+  if (!id) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx2(
+        "flex items-center justify-between border-b border-[#ededed] bg-[#f8f8f8] ps-[16px] pe-[30px] h-[30px]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-black", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "h-5 w-px bg-[#e1e1e1]" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[#636363]", children: id })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onView,
+            className: "group relative inline-flex w-fit items-center justify-end text-xs font-medium text-black",
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center transition-opacity duration-300 ease-in-out group-hover:opacity-0", children: [
+                /* @__PURE__ */ jsx("span", { children: buttonLabel }),
+                /* @__PURE__ */ jsx("span", { className: "ml-[4px] flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(RightArrow, {}) })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "pointer-events-none absolute inset-0 flex items-center opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100", children: [
+                /* @__PURE__ */ jsx("span", { children: buttonLabel }),
+                /* @__PURE__ */ jsx("span", { className: "ml-[2px] flex h-4 w-4 items-center justify-center animate-slide-right", children: /* @__PURE__ */ jsx(RightArrow, {}) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var ChatInquiryBar_default = ChatInquiryBar;
+var ChatListHeader = ({ className, onClose, onSearchChange }) => {
+  const [searching, setSearching] = useState(false);
+  const [q, setQ] = useState("");
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (searching) {
+      const timer = setTimeout(() => inputRef.current?.focus(), 200);
+      return () => clearTimeout(timer);
+    }
+  }, [searching]);
+  useEffect(() => {
+    if (!searching) {
+      return;
+    }
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        setSearching(false);
+        setQ("");
+        onSearchChange?.("");
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [searching, onSearchChange]);
+  const 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 /* @__PURE__ */ jsx("div", { className: cn("h-[64px] border-b border-[#ededed]", className), children: /* @__PURE__ */ jsx("div", { className: "flex h-full items-center px-[20px]", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !searching ? (
+    /* =======================
+       Normal header
+    ======================= */
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "flex w-full items-center justify-between",
+        initial: { opacity: 0, x: -24 },
+        animate: "inFromLeft",
+        exit: "outToLeft",
+        variants,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[#2c2c2c]", children: [
+            /* @__PURE__ */ jsx(MessageIcon, { className: "h-6 w-6" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[22px] font-semibold", children: "Messenger" })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                title: "Search",
+                onClick: () => setSearching(true),
+                className: "flex h-9 w-9 items-center justify-center rounded-full hover:bg-black/5",
+                children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "h-6 w-6" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                title: "Close",
+                onClick: onClose,
+                className: "flex h-9 w-9 items-center justify-center rounded-full hover:bg-black/5",
+                children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-6 w-6" })
+              }
+            )
+          ] })
+        ]
+      },
+      "normal"
+    )
+  ) : (
+    /* =======================
+       Search header
+    ======================= */
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "flex w-full items-center gap-3",
+        initial: { opacity: 0, x: 24 },
+        animate: "inFromRight",
+        exit: "outToRight",
+        variants,
+        children: /* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between h-10 w-full items-center gap-1.5 rounded-full border border-[#6A6A6A] bg-white px-[4px]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ms-[12px] flex items-center", children: [
+            /* @__PURE__ */ jsx("span", { className: "mr-2 grid h-6 w-6 shrink-0 place-items-center text-#929292]", children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "h-5 w-5" }) }),
+            /* @__PURE__ */ jsx("span", { className: "mr-2 h-6 w-px shrink-0 bg-[#e1e1e1]" }),
+            /* @__PURE__ */ jsx(
+              "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]"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "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",
+              children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-5 w-5" })
+            }
+          )
+        ] }) })
+      },
+      "search"
+    )
+  ) }) }) });
+};
+var ChatListHeader_default = ChatListHeader;
+var Row = ({ icon, label, value, highlight }) => {
+  if (value === null || value === void 0) {
+    return null;
+  }
+  const trimmed = String(value).trim();
+  if (!trimmed) {
+    return null;
+  }
+  const display = trimmed.length > 0 ? trimmed : "N/A";
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[18px_120px_1fr] items-start gap-1 text-xs", children: [
+    /* @__PURE__ */ jsx("span", { className: "pt-[2px] text-black", children: icon }),
+    /* @__PURE__ */ jsx("strong", { className: "truncate font-medium text-black", children: label }),
+    /* @__PURE__ */ jsx("span", { className: cn(highlight ? "text-black" : "text-[#747474]"), children: display })
+  ] });
+};
+var ChatAddressCard = ({ mine, card, className }) => {
+  const {
+    name,
+    label,
+    businessName,
+    mobileNumber,
+    country,
+    district,
+    policeStation,
+    postalCode,
+    addressLine,
+    landMark
+  } = card;
+  const addressParts = [];
+  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(", ")}.` : void 0;
+  const badge = label ? /* @__PURE__ */ jsxs("span", { className: "inline-flex h-[21px] items-center gap-1 rounded-xs bg-[#FFDBCF] px-2 py-[2px] text-[10px] text-[#ff5301]", children: [
+    label.toLowerCase() === "office" ? /* @__PURE__ */ jsx(BadgeOfficeIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(BadgeHomeIcon, { className: "h-3 w-3" }),
+    label
+  ] }) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx2(
+        "w-[340px] rounded-md bg-[#f8f8f8] p-2",
+        mine ? "ml-auto" : "mr-auto",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-black", children: name || "Recipient" }),
+          badge
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-[2px]", children: [
+          /* @__PURE__ */ jsx(
+            Row,
+            {
+              highlight: true,
+              icon: /* @__PURE__ */ jsx(BadgeOfficeIcon, { className: "h-[14px] w-[14px]" }),
+              label: "Business Name",
+              value: businessName ?? void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Row,
+            {
+              highlight: true,
+              icon: /* @__PURE__ */ jsx(ChatPhoneCallIcon, { className: "h-[14px] w-[14px]" }),
+              label: "Mobile Number",
+              value: mobileNumber ?? void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(Row, { icon: /* @__PURE__ */ jsx(MapPinIcon, { className: "h-4 w-4" }), label: "Address", value: combinedAddress })
+        ] })
+      ]
+    }
+  );
+};
+var ChatAddressCard_default = ChatAddressCard;
+var formatSec = (s) => {
+  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}`;
+};
+var PlayIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className, fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M6 4.5v11l9-5.5-9-5.5Z" }) });
+var PauseIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className, fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 4h4v12H5V4zm6 0h4v12h-4V4z" }) });
+var audioRegistry = /* @__PURE__ */ new Set();
+var ChatBubbleAudio = ({ mine, audio }) => {
+  const ref = React11.useRef(null);
+  const trackRef = React11.useRef(null);
+  const [playing, setPlaying] = React11.useState(false);
+  const [progress, setProgress] = React11.useState(0);
+  const [durSec, setDurSec] = React11.useState(0);
+  const [remain, setRemain] = React11.useState(audio.duration ?? "0:00");
+  React11.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) => {
+    audioRegistry.forEach((a) => {
+      if (a !== current && !a.paused) {
+        a.pause();
+      }
+    });
+  };
+  const applyProgressToAudio = (pct) => {
+    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(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));
+  };
+  const pctFromClientX = (clientX) => {
+    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) => {
+    applyProgressToAudio(pctFromClientX(e.clientX));
+  };
+  const handlePointerDown = (e) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    applyProgressToAudio(pctFromClientX(e.clientX));
+  };
+  const handlePointerMove = (e) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      applyProgressToAudio(pctFromClientX(e.clientX));
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "h-9 max-w-[260px] rounded-lg border border-[#E5E5E5] bg-white px-[3px] py-[3px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": playing ? "Pause" : "Play",
+          onClick: toggle,
+          className: clsx2(
+            "grid h-7 w-[34px] place-items-center rounded-md transition-colors",
+            mine ? "bg-[#F1F1F1] text-[#00486F]" : "bg-[#F1F1F1] text-[#00486F]"
+          ),
+          children: playing ? /* @__PURE__ */ jsx(PauseIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(PlayIcon, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "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),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute left-0 top-0 h-full rounded-full bg-[#747474]",
+                style: { width: `${progress}%` }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute top-1/2 -translate-y-1/2 h-3 w-3 rounded-full bg-[#747474]",
+                style: { left: `calc(${progress}% - 6px)` }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "pe-[4px] text-xs font-normal text-[#747474]", children: remain || (durSec ? formatSec(durSec) : "0:00") })
+    ] }),
+    audio.src ? /* @__PURE__ */ jsx(
+      "audio",
+      {
+        ref,
+        src: audio.src,
+        preload: "metadata",
+        onTimeUpdate: onTime,
+        onLoadedMetadata: onLoaded,
+        onEnded: () => setPlaying(false),
+        className: "hidden"
+      }
+    ) : null
+  ] });
+};
+var ChatBubbleAudio_default = ChatBubbleAudio;
+var extColor2 = (ext) => {
+  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]";
+};
+var FileChip = ({ file }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-sm border border-[#e1e1e1] bg-white px-3 py-2", children: [
+  /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(FileIcon, { className: clsx2("h-[18px] w-[18px]", extColor2(file.ext)) }),
+      " ",
+      /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-normal text-black", children: file.name })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[10px] text-[#636363] mt-2", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        file.sizeMB.toFixed(1),
+        " MB"
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "h-3 w-px bg-[#e1e1e1]" }),
+      /* @__PURE__ */ jsx("span", { className: "uppercase", children: file.ext })
+    ] })
+  ] }) }),
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "h-[41px] w-px bg-[#cacaca]" }),
+    file.href ? /* @__PURE__ */ jsx(
+      "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,
+        children: /* @__PURE__ */ jsx(FileDownloadIcon, { className: "h-5 w-5" })
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "flex h-7 w-[28px] items-center justify-center rounded-full text-[#9ca3af]", children: /* @__PURE__ */ jsx(FileDownloadIcon, { className: "h-5 w-5" }) })
+  ] })
+] });
+var ChatBubbleFiles = ({ files }) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex max-w-[260px] flex-col gap-1", children: files.map((f, i) => /* @__PURE__ */ jsx(FileChip, { file: f }, i)) });
+};
+var ChatBubbleFiles_default = ChatBubbleFiles;
+var ImgTile = ({ src, w, h, overlayText, onClick }) => {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "relative cursor-zoom-in overflow-hidden rounded-sm border border-[#EFEFEF] bg-[#F5F7FA]",
+      style: { width: w, height: h },
+      "aria-label": "Open image",
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: "",
+            width: w,
+            height: h,
+            className: "h-full w-full object-cover",
+            loading: "lazy"
+          }
+        ),
+        overlayText ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid place-items-center bg-black/35", children: /* @__PURE__ */ jsxs("span", { className: "text-4xl font-semibold text-white", children: [
+          "+",
+          overlayText
+        ] }) }) : null
+      ]
+    }
+  );
+};
+var ChatBubbleImages = ({ images }) => {
+  const { openGallery } = useGallery();
+  const openAt = (index) => {
+    openGallery(
+      images.map((url) => ({
+        type: "image",
+        url,
+        altText: "Chat image"
+      })),
+      index
+    );
+  };
+  const count = images.length;
+  if (count === 1) {
+    return /* @__PURE__ */ jsx(ImgTile, { src: images[0], w: 260, h: 174, onClick: () => openAt(0) });
+  }
+  if (count === 2) {
+    return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", children: images.map((src, i) => /* @__PURE__ */ jsx(ImgTile, { src, w: 125, h: 83, onClick: () => openAt(i) }, src + i)) });
+  }
+  if (count === 3) {
+    const [a, b, c] = images;
+    return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[125px_125px] gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("div", { style: { width: 125, height: 83 } }),
+        /* @__PURE__ */ jsx(ImgTile, { src: a, w: 125, h: 83, onClick: () => openAt(0) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(ImgTile, { src: b, w: 125, h: 83, onClick: () => openAt(1) }),
+        /* @__PURE__ */ jsx(ImgTile, { src: c, w: 125, h: 83, onClick: () => openAt(2) })
+      ] })
+    ] });
+  }
+  const visible = images.slice(0, 4);
+  const extraCount = count - 4;
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", children: visible.map((src, i) => /* @__PURE__ */ jsx(
+    ImgTile,
+    {
+      src,
+      w: 125,
+      h: 83,
+      overlayText: i === 3 && extraCount > 0 ? String(extraCount) : void 0,
+      onClick: () => openAt(i)
+    },
+    src + i
+  )) });
+};
+var ChatBubbleImages_default = ChatBubbleImages;
+var ChatBubbleText = ({ 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";
+  const textFormatting = "whitespace-pre-wrap break-words";
+  return /* @__PURE__ */ jsx("div", { className: clsx2(base, color, corner, textFormatting), children: text });
+};
+var ChatBubbleText_default = ChatBubbleText;
+var ChatBusinessCard = ({ mine, card }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx2(
+        "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)]",
+        mine ? "ml-auto" : "mr-auto"
+      ),
+      style: { backgroundImage: "url('/chat/img/card_bg_raw.svg')" },
+      children: /* @__PURE__ */ jsx("div", { className: "flex h-full items-stretch justify-between gap-4 px-6 py-6", children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-[#004F4F]", children: card.name }),
+          /* @__PURE__ */ jsx("div", { className: "h-px w-[105px] bg-black" }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-[6px] flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: "https://flagcdn.com/bd.svg",
+                alt: "Bangladesh flag",
+                width: 24,
+                height: 14,
+                className: "h-[14px] w-6 rounded-xs object-cover",
+                loading: "lazy"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[#636363]", children: card.country })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 mb-10 space-y-1.5 text-xs text-black", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-[#FFE9DB]", children: /* @__PURE__ */ jsx(BusinessInfoIcon, { className: "h-3 w-3 text-[#EA580C]" }) }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: card.company })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-[#FFE9DB]", children: /* @__PURE__ */ jsx(ChatMailIcon, { className: "h-3 w-3 text-[#EA580C]" }) }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: card.email })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-[#FFE9DB]", children: /* @__PURE__ */ jsx(ChatPhoneCallIcon, { className: "h-3 w-3 text-[#EA580C]" }) }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: card.phone })
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+};
+var ChatBusinessCard_default = ChatBusinessCard;
+var MessageHoverActions = ({
+  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) => Boolean(activeButtons?.includes(k));
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex group/message", className), children: [
+    children,
+    hasAny ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "pointer-events-auto absolute inset-y-0 w-2",
+          mine ? "right-full" : "left-full"
+        )
+      }
+    ) : null,
+    hasAny ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "pointer-events-auto absolute bottom-0 transition-opacity",
+          sidePos,
+          railNudge,
+          alwaysVisible ? "opacity-100" : "opacity-0 group-hover/message:opacity-100"
+        ),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pb-[2px]", children: [
+          showReplay ? /* @__PURE__ */ jsx(
+            "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",
+              children: /* @__PURE__ */ jsx(MessageReplayIcon, { className: "h-[14px] w-[14px]" })
+            }
+          ) : null,
+          showTranslate ? /* @__PURE__ */ jsx(
+            "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",
+              children: /* @__PURE__ */ jsx(NewLanguageIcon, { className: "h-[14px] w-[14px]" })
+            }
+          ) : null
+        ] })
+      }
+    ) : null
+  ] });
+};
+var MessageHoverActions_default = MessageHoverActions;
+var toBanglaDemo = (s) => {
+  const map = {
+    Hi: "\u09B9\u09BE\u0987",
+    "Do you have a freight forwarder in China?": "\u0986\u09AA\u09A8\u09BE\u09B0 \u0995\u09BF \u099A\u09C0\u09A8\u09C7 \u0995\u09CB\u09A8\u09CB \u09AB\u09CD\u09B0\u09C7\u0987\u099F \u09AB\u09B0\u0993\u09DF\u09BE\u09B0\u09CD\u09A1\u09BE\u09B0 \u0986\u099B\u09C7?",
+    "This conversation is empty. Say hi \u{1F44B}": "\u098F\u0987 \u0995\u09A5\u09CB\u09AA\u0995\u09A5\u09A8\u099F\u09BF \u0996\u09BE\u09B2\u09BF \u0964 \u09B9\u09BE\u0987 \u09B9\u09BE\u0987 \u09B9\u09BE\u0987 \u09AC\u09B2\u09C1\u09A8 \u{1F44B}",
+    "Can we schedule a call for tomorrow?": "\u0986\u09AE\u09B0\u09BE \u0995\u09BF \u0986\u0997\u09BE\u09AE\u09C0\u0995\u09BE\u09B2 \u098F\u0995\u099F\u09BF \u0995\u09B2 \u09A8\u09BF\u09B0\u09CD\u09A7\u09BE\u09B0\u09A3 \u0995\u09B0\u09A4\u09C7 \u09AA\u09BE\u09B0\u09BF?",
+    "Sure, what time suits you?": "\u0985\u09AC\u09B6\u09CD\u09AF\u0987, \u0986\u09AA\u09A8\u09BE\u09B0 \u099C\u09A8\u09CD\u09AF \u0995\u09CB\u09A8 \u09B8\u09AE\u09AF\u09BC\u099F\u09BF \u09B8\u09C1\u09AC\u09BF\u09A7\u09BE\u099C\u09A8\u0995?",
+    "Welcome to Global Marketplace": "\u0997\u09CD\u09B2\u09CB\u09AC\u09BE\u09B2 \u09AE\u09BE\u09B0\u09CD\u0995\u09C7\u099F\u09AA\u09CD\u09B2\u09C7\u09B8\u09C7 \u0986\u09AA\u09A8\u09BE\u0995\u09C7 \u09B8\u09CD\u09AC\u09BE\u0997\u09A4\u09AE \u{1F389}",
+    "Happy to be here!": "\u098F\u0996\u09BE\u09A8\u09C7 \u09A5\u09BE\u0995\u09A4\u09C7 \u09AA\u09C7\u09B0\u09C7 \u0986\u09A8\u09A8\u09CD\u09A6\u09BF\u09A4!"
+  };
+  if (map[s]) {
+    return map[s];
+  }
+  return `\u09AC\u09BE\u0982\u09B2\u09BE ${s}`;
+};
+var ChatMessageItem = ({
+  id,
+  mine = false,
+  time,
+  authorInitial = "U",
+  avatarBg = "#ffffff",
+  text,
+  businessCard,
+  addressCard,
+  images,
+  files,
+  audio,
+  replyTo,
+  showStatus = false,
+  status = "Seen",
+  className,
+  onReply,
+  onTranslate,
+  initialSrc
+}) => {
+  const originalText = useMemo(() => text ?? "", [text]);
+  const [translated, setTranslated] = useState(false);
+  const displayText = translated ? toBanglaDemo(originalText) : originalText;
+  const handleTranslateClick = () => {
+    setTranslated((v) => !v);
+    onTranslate?.();
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("mb-4", className), "data-msg-id": id, children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-end gap-3", mine && "justify-end"), children: [
+    !mine ? /* @__PURE__ */ jsx("div", { className: cn(showStatus ? "mb-5" : "mb-0"), children: initialSrc ? /* @__PURE__ */ jsxs("div", { className: "relative h-10 w-10 shrink-0 rounded-full border border-[#F1F1F1]", children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: initialSrc,
+          alt: "avatar image",
+          className: "h-full w-full rounded-full object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" }) 
+    ] }) : /* @__PURE__ */ jsxs(
+      "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 },
+        children: [
+          authorInitial,
+          /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" }) 
+        ]
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "text-xs font-light text-[#636363]",
+            mine ? "text-right" : "text-left"
+          ),
+          children: time
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-1", mine ? "items-end" : "items-start"), children: [
+        /* @__PURE__ */ jsx("div", { className: cn("flex w-full", mine ? "justify-end" : "justify-start"), children: replyTo ? /* @__PURE__ */ jsx(ReplyCard_default, { jumpOnClick: true, refMsg: replyTo, compact: true, className: "mb-1" }) : null }),
+        businessCard ? /* @__PURE__ */ jsx(ChatBusinessCard_default, { mine, card: businessCard }) : null,
+        addressCard ? /* @__PURE__ */ jsx(ChatAddressCard_default, { mine, card: addressCard }) : null,
+        files?.length ? /* @__PURE__ */ jsx(MessageHoverActions_default, { mine, onReply, isItemButton: ["replay"], children: /* @__PURE__ */ jsx(ChatBubbleFiles_default, { files }) }) : null,
+        images?.length ? /* @__PURE__ */ jsx(MessageHoverActions_default, { mine, onReply, isItemButton: ["replay"], children: /* @__PURE__ */ jsx(ChatBubbleImages_default, { images }) }) : null,
+        audio ? /* @__PURE__ */ jsx(
+          MessageHoverActions_default,
+          {
+            mine,
+            onReply,
+            onTranslate,
+            isItemButton: ["replay", "translate"],
+            children: /* @__PURE__ */ jsx(ChatBubbleAudio_default, { mine, audio })
+          }
+        ) : null,
+        typeof text === "string" && text.length > 0 ? /* @__PURE__ */ jsx(
+          MessageHoverActions_default,
+          {
+            mine,
+            onReply,
+            onTranslate: handleTranslateClick,
+            isItemButton: ["replay", "translate"],
+            activeButtons: translated ? ["translate"] : [],
+            children: /* @__PURE__ */ jsx(ChatBubbleText_default, { mine, text: displayText })
+          }
+        ) : null,
+        showStatus ? /* @__PURE__ */ jsx("div", { className: cn("text-xs text-[#9AA1A9]", mine ? "text-right" : "text-left"), children: status }) : null
+      ] })
+    ] })
+  ] }) });
+};
+var ChatMessageItem_default = ChatMessageItem;
+var ChatScroll = ({
+  top,
+  children,
+  className,
+  bottomAlignWhenShort = false,
+  scrollKey
+}) => {
+  const ref = React11.useRef(null);
+  const scrollToBottom = React11.useCallback(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    el.scrollTop = el.scrollHeight;
+  }, []);
+  React11.useEffect(() => {
+    scrollToBottom();
+    const id = window.setTimeout(scrollToBottom, 0);
+    return () => window.clearTimeout(id);
+  }, [scrollKey, scrollToBottom]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-chat-scroll": true,
+      className: clsx2(
+        "h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx2(
+            "min-h-full flex flex-col",
+            bottomAlignWhenShort ? "justify-end" : "justify-start"
+          ),
+          children: [
+            top,
+            children
+          ]
+        }
+      )
+    }
+  );
+};
+var ChatScroll_default = ChatScroll;
+var formatTwoDigits = (value) => {
+  return String(Math.max(0, value)).padStart(2, "0");
+};
+var ChatThreadItem = ({
+  active = false,
+  pinned = false,
+  online = false,
+  verified = false,
+  title,
+  preview,
+  time,
+  status,
+  avatarText,
+  avatarSrc,
+  avatarBg = "#FFE5DA",
+  className,
+  onClick
+}) => {
+  const statusEl = (() => {
+    switch (status.kind) {
+      case "seen":
+        return /* @__PURE__ */ jsx("span", { className: "text-[#005694]", children: "Seen" });
+      case "delivered":
+        return /* @__PURE__ */ jsx("span", { className: "text-[#929292]", children: "Delivered" });
+      case "new":
+        return /* @__PURE__ */ jsxs("span", { className: "text-[#EB2127]", children: [
+          "New ",
+          formatTwoDigits(status.count)
+        ] });
+    }
+  })();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      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
+      ),
+      children: [
+        pinned ? /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-0 w-0 border-l-16 border-t-16 border-l-transparent border-t-[#FFD2BD]" }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", style: { width: 36, height: 36 }, children: [
+            avatarSrc ? /* @__PURE__ */ jsx("div", { className: "h-9 w-9 overflow-hidden rounded-[2px] border border-[#f1f1f1]", children: /* @__PURE__ */ jsx("img", { src: avatarSrc, alt: title, className: "h-full w-full rounded-[2px] object-cover" }) }) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "grid h-9 w-9 place-items-center rounded-[2px] border border-[#f1f1f1] text-[15px] font-semibold text-[#2c2c2c]",
+                style: { backgroundColor: avatarBg },
+                children: avatarText
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "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" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[14px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-black", children: title }),
+              verified ? /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(BlueBadgeIcon, {}) }) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-normal text-[#2c2c2c]", children: preview }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center justify-between text-[12px]", children: [
+              /* @__PURE__ */ jsx("div", { children: statusEl }),
+              /* @__PURE__ */ jsx("span", { className: "font-light text-[#636363] tracking-[0.5px]", children: time })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var ChatThreadItem_default = ChatThreadItem;
+var TypingDots = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("style", { children: `
+      @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; }
+    ` }),
+  /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", gap: "4px", alignItems: "center", height: "28px", padding: "0 8px" }, children: [
+    /* @__PURE__ */ jsx("span", { className: "banbox-typing-dot" }),
+    /* @__PURE__ */ jsx("span", { className: "banbox-typing-dot" }),
+    /* @__PURE__ */ jsx("span", { className: "banbox-typing-dot" })
+  ] })
+] });
+var TypingIndicator = ({
+  className,
+  ariaLabel = "Typing\u2026",
+  avatarSize = 40
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative flex items-end gap-[6px]", className),
+      role: "status",
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative shrink-0 rounded-full border border-[#F1F1F1]",
+            style: { width: avatarSize, height: avatarSize },
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: "/chat/img/girl_support.png",
+                  alt: "avatar image",
+                  className: "h-full w-full rounded-full object-cover"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" }) 
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "absolute bottom-[-13px] left-[30px]", children: /* @__PURE__ */ jsx(TypingDots, {}) })
+      ]
+    }
+  );
+};
+var TypingIndicator_default = TypingIndicator;
+var ChatSpinner = ({ className, size = 32 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("style", { children: `
+      @keyframes banbox-chat-spin {
+        to { transform: rotate(360deg); }
+      }
+    ` }),
+  /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center", className), children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        width: size,
+        height: size,
+        animation: "banbox-chat-spin 1.4s linear infinite"
+      },
+      viewBox: "0 0 36 36",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "15", stroke: "#e5e7eb", strokeWidth: "3" }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "18",
+            cy: "18",
+            r: "15",
+            stroke: "#3d3d3d",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeDasharray: "22 72"
+          }
+        )
+      ]
+    }
+  ) })
+] });
+var ChatSpinner_default = ChatSpinner;
+function Portal({ children, containerId = "portal-root" }) {
+  const [container, setContainer] = useState(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);
+}
+var slideVariants = {
+  enter: (dir) => ({
+    x: dir > 0 ? 300 : -300,
+    opacity: 0
+  }),
+  center: { x: 0, opacity: 1 },
+  exit: (dir) => ({
+    x: dir > 0 ? -300 : 300,
+    opacity: 0
+  })
+};
+var ChatImagePreviewModal = ({
+  isOpen,
+  onClose
+}) => {
+  const { images, currentIndex, setCurrentIndex } = useGallery();
+  const current = currentIndex ?? 0;
+  const total = images?.length ?? 0;
+  const hasPrev = current > 0;
+  const hasNext = current < total - 1;
+  const [direction, setDirection] = useState(0);
+  const goPrev = useCallback(() => {
+    if (current > 0) {
+      setDirection(-1);
+      setCurrentIndex(current - 1);
+    }
+  }, [current, setCurrentIndex]);
+  const goNext = useCallback(() => {
+    if (images && current < images.length - 1) {
+      setDirection(1);
+      setCurrentIndex(current + 1);
+    }
+  }, [current, images, setCurrentIndex]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+      if (e.key === "ArrowLeft") goPrev();
+      if (e.key === "ArrowRight") goNext();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [isOpen, onClose, goPrev, goNext]);
+  const currentImage = images?.[current];
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && total > 0 && /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "fixed inset-0 z-999 flex items-center justify-center",
+      initial: { opacity: 0, backgroundColor: "rgba(0,0,0,0)" },
+      animate: { opacity: 1, backgroundColor: "rgba(0,0,0,0.55)" },
+      exit: { opacity: 0, backgroundColor: "rgba(0,0,0,0)" },
+      transition: { duration: 0.25, ease: "easeInOut" },
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          className: "relative flex items-center justify-center",
+          initial: { opacity: 0, scale: 0.92 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.92 },
+          transition: { duration: 0.25, ease: "easeInOut" },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "relative flex items-center justify-center overflow-hidden rounded-[6px] bg-white",
+                style: { width: 850, height: 850 },
+                children: [
+                  /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, custom: direction, children: /* @__PURE__ */ jsx(
+                    motion.img,
+                    {
+                      custom: direction,
+                      variants: slideVariants,
+                      initial: "enter",
+                      animate: "center",
+                      exit: "exit",
+                      transition: { duration: 0.3, ease: "easeInOut" },
+                      src: currentImage?.url,
+                      alt: currentImage?.altText ?? `Image ${current + 1}`,
+                      className: "w-full rounded-[6px] object-contain",
+                      draggable: false
+                    },
+                    current
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: goPrev,
+                      disabled: !hasPrev,
+                      className: `absolute left-0 top-1/2 -translate-y-1/2 flex h-[100px] items-center rounded-tr-[3px] rounded-br-[3px] p-[7px] backdrop-blur-[2px] shadow-[3px_0px_6px_0px_rgba(0,0,0,0.1)] transition-opacity ${hasPrev ? "cursor-pointer opacity-100" : "cursor-default opacity-30"}`,
+                      style: { backgroundColor: "rgba(255,255,255,0.7)" },
+                      "aria-label": "Previous image",
+                      children: /* @__PURE__ */ jsx("svg", { width: "42", height: "42", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M15 18L9 12L15 6",
+                          stroke: "#2C2C2C",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: goNext,
+                      disabled: !hasNext,
+                      className: `absolute right-0 top-1/2 -translate-y-1/2 flex h-[100px] items-center rounded-tl-[3px] rounded-bl-[3px] p-[7px] backdrop-blur-[2px] shadow-[-3px_0px_6px_0px_rgba(0,0,0,0.1)] transition-opacity ${hasNext ? "cursor-pointer opacity-100" : "cursor-default opacity-30"}`,
+                      style: { backgroundColor: "rgba(255,255,255,0.7)" },
+                      "aria-label": "Next image",
+                      children: /* @__PURE__ */ jsx("svg", { width: "42", height: "42", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M9 18L15 12L9 6",
+                          stroke: "#2C2C2C",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ) })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "absolute top-[-4px] right-[-63px] flex h-[36px] w-[36px] cursor-pointer items-center justify-center rounded-full bg-white shadow-[0_2px_8px_rgba(0,0,0,0.15)] transition-colors hover:bg-[#f1f1f1]",
+                "aria-label": "Close preview",
+                children: /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M18 6L6 18",
+                      stroke: "black",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M6 6L18 18",
+                      stroke: "black",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) }) });
+};
+var ChatImagePreviewModal_default = ChatImagePreviewModal;
+var avatarBgByInitial = {
+  K: "#FFE7DB",
+  A: "#FFE5DA",
+  F: "#E8F7FF",
+  B: "#F0EDEB",
+  b: "#F0EDEB"
+};
+var InboxPopup = ({ adapter, uiCallbacks }) => {
+  const { close, selectThread, selectedThreadId, reference } = useChatUI();
+  const { isOpen: isGalleryOpen, closeGallery } = useGallery();
+  const [threads, setThreads] = useState(() => adapter.threads.list(reference));
+  const refreshThreads = useCallback(
+    () => setThreads(adapter.threads.list(reference)),
+    [adapter, reference]
+  );
+  useEffect(() => {
+    let rafId = 0;
+    rafId = requestAnimationFrame(refreshThreads);
+    const unsub = adapter.threads.subscribe(refreshThreads);
+    return () => {
+      cancelAnimationFrame(rafId);
+      unsub();
+    };
+  }, [adapter, reference, refreshThreads]);
+  const [rev, setRev] = useState(0);
+  const [replyTo, setReplyTo] = useState(void 0);
+  const [searchQuery, setSearchQuery] = useState("");
+  const activeId = selectedThreadId ?? threads[0]?.id;
+  const activeThread = threads.find((t) => t.id === activeId);
+  const [messages, setMessages] = useState(
+    () => activeId ? adapter.messages.list(activeId) : []
+  );
+  useEffect(() => {
+    if (activeId) setMessages(adapter.messages.list(activeId));
+  }, [activeId, rev, adapter]);
+  useEffect(() => {
+    if (!activeId || !adapter.messages.subscribe) return;
+    const unsub = adapter.messages.subscribe(activeId, () => {
+      setMessages(adapter.messages.list(activeId));
+    });
+    return unsub;
+  }, [activeId, adapter]);
+  const initial = activeThread?.avatarText ?? "U";
+  const title = activeThread?.title ?? "Unknown";
+  const subtitle = activeThread?.subTitle ?? "";
+  const online = Boolean(activeThread?.online);
+  const isVerified = Boolean(activeThread?.badge);
+  const avatarBg = avatarBgByInitial[initial] ?? "#FFF1EC";
+  const idLabel = activeThread?.orderId ? "Order ID" : activeThread?.inquiryId ? "Inquiry ID" : void 0;
+  const idButtonLabel = activeThread?.orderId ? "View Order" : activeThread?.inquiryId ? "View Inquiry" : void 0;
+  const idValue = activeThread?.orderId ?? activeThread?.inquiryId ?? void 0;
+  const [showDelete, setShowDelete] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const scrollKey = `${activeId}-${messages.length}-${rev}`;
+  const prevActiveIdRef = React11.useRef(activeId);
+  useEffect(() => {
+    if (prevActiveIdRef.current !== activeId) {
+      prevActiveIdRef.current = activeId;
+      setIsLoading(true);
+      const t = setTimeout(() => setIsLoading(false), 300);
+      if (activeId) adapter.threads.markRead?.(activeId);
+      return () => clearTimeout(t);
+    }
+  }, [activeId, adapter]);
+  const toRef2 = (m) => ({
+    id: m.id,
+    author: typeof m.author === "string" ? m.author : "U",
+    time: m.time,
+    text: m.text ?? m.content,
+    images: m.images,
+    files: m.files,
+    audio: m.audio
+  });
+  const handleConfirmDelete = () => {
+    if (!activeId) {
+      setShowDelete(false);
+      return;
+    }
+    adapter.threads.delete(activeId);
+    const nextId = threads.filter((t) => t.id !== activeId)[0]?.id;
+    if (nextId) selectThread(nextId);
+    setReplyTo(void 0);
+    setShowDelete(false);
+    uiCallbacks?.showToast?.({
+      type: "success",
+      title: "Chat Deleted",
+      message: "The chat has been deleted successfully."
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-[40px] z-50", children: [
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        "aria-label": "Close chat",
+        onClick: close,
+        className: "fixed inset-0 bg-black/20",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.3 }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        className: "relative rounded-[16px]",
+        style: { width: 800, height: 650, boxShadow: "0px 2px 12px 0px rgba(59,51,51,0.1)" },
+        initial: { x: "100%", opacity: 0 },
+        animate: { x: 0, opacity: 1 },
+        exit: { x: "100%", opacity: 0 },
+        transition: { type: "tween", duration: 0.4, ease: "easeOut" },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative h-full w-full overflow-hidden rounded-[16px]",
+            style: {
+              border: "2px solid transparent",
+              background: "linear-gradient(white, white) padding-box, linear-gradient(236.83deg, rgba(51, 201, 212, 0.3) 0.4%, rgba(39, 83, 251, 0.3) 30.28%, rgba(39, 83, 251, 0.3) 50.2%, rgba(39, 83, 251, 0.3) 65.14%, rgba(235, 67, 255, 0.3) 100%) border-box"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid h-full min-h-0 grid-cols-[1fr_350px]", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col border-r border-[#9BBCCF]", children: [
+                  /* @__PURE__ */ jsx("div", { className: "h-[64px] shrink-0", children: /* @__PURE__ */ jsx(
+                    ChatHeader,
+                    {
+                      left: activeThread?.avatarSrc ? /* @__PURE__ */ jsx(ChatIdentity_default, { variant: "avatar", src: activeThread.avatarSrc, online, title, subtitle, verified: isVerified, subtitleVariant: "muted" }) : /* @__PURE__ */ jsx(ChatIdentity_default, { variant: "initial", initial, bg: avatarBg, online, title, subtitle, verified: isVerified, subtitleVariant: "muted" }),
+                      right: uiCallbacks?.renderKebabMenu?.({
+                        pinned: Boolean(activeThread?.pinned),
+                        onPinToggle: () => {
+                          if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
+                        },
+                        onDelete: () => setShowDelete(true)
+                      }) ?? null
+                    }
+                  ) }),
+                  idValue && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+                    ChatInquiryBar_default,
+                    {
+                      id: idValue,
+                      label: idLabel,
+                      buttonLabel: idButtonLabel,
+                      onView: () => {
+                        const type = activeThread?.orderId ? "order" : "inquiry";
+                        uiCallbacks?.onNavigate?.({ type, id: idValue });
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs("div", { className: "relative h-full min-h-0", children: [
+                    isLoading ? /* @__PURE__ */ jsx(ChatSpinner_default, { className: "h-full min-h-[200px]" }) : /* @__PURE__ */ jsx(ChatScroll_default, { className: "h-full pb-10", bottomAlignWhenShort: false, scrollKey, children: messages.map((m, idx) => {
+                      const mine = m.author === "you";
+                      const isLast = idx === messages.length - 1;
+                      return /* @__PURE__ */ jsx(
+                        ChatMessageItem_default,
+                        {
+                          id: m.id,
+                          mine,
+                          time: m.time ?? "",
+                          authorInitial: typeof m.author === "string" ? m.author : "U",
+                          avatarBg,
+                          text: m.text ?? m.content,
+                          businessCard: m.businessCard,
+                          addressCard: m.addressCard,
+                          images: m.images,
+                          files: m.files,
+                          audio: m.audio,
+                          replyTo: m.replyTo,
+                          showStatus: isLast,
+                          status: activeThread?.status?.kind === "seen" ? "Seen" : "Delivered",
+                          onReply: () => setReplyTo(toRef2(m)),
+                          initialSrc: m.avatarSrc
+                        },
+                        m.id
+                      );
+                    }) }),
+                    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-center px-4 pb-2 pt-1 bg-white", children: /* @__PURE__ */ jsx(TypingIndicator_default, { className: "pointer-events-auto" }) })
+                  ] }) }),
+                  /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+                    ChatFooter_default,
+                    {
+                      replyTo,
+                      clearReply: () => setReplyTo(void 0),
+                      onAfterSend: () => setRev((v) => v + 1),
+                      onSend: (payload) => {
+                        if (activeId) adapter.messages.send(activeId, payload);
+                      }
+                    },
+                    activeId
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "h-full min-h-0", children: [
+                  /* @__PURE__ */ jsx(ChatListHeader_default, { onClose: close, onSearchChange: (val) => setSearchQuery(val) }),
+                  /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto custom-scroll", children: threads.filter((t) => {
+                    if (!searchQuery.trim()) return true;
+                    const q = searchQuery.toLowerCase();
+                    return t.title.toLowerCase().includes(q) || t.last?.toLowerCase().includes(q) || t.orderId?.toLowerCase().includes(q) || t.inquiryId?.toLowerCase().includes(q);
+                  }).map((t) => {
+                    const status = t.status ?? (t.unread && t.unread > 0 ? { kind: "new", count: t.unread } : { kind: "seen" });
+                    return /* @__PURE__ */ jsx(
+                      ChatThreadItem_default,
+                      {
+                        onClick: () => {
+                          setReplyTo(void 0);
+                          selectThread(t.id);
+                        },
+                        active: t.id === activeId,
+                        pinned: Boolean(t.pinned),
+                        online: t.online,
+                        verified: Boolean(t.badge),
+                        title: t.title,
+                        preview: t.last ?? "",
+                        time: t.time ?? "",
+                        status,
+                        avatarText: t.avatarText ?? "",
+                        avatarSrc: t.avatarSrc
+                      },
+                      t.id
+                    );
+                  }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(ChatConfirmModal, { open: showDelete, onClose: () => setShowDelete(false), onConfirm: handleConfirmDelete }),
+              /* @__PURE__ */ jsx(ChatImagePreviewModal_default, { isOpen: isGalleryOpen, onClose: closeGallery })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+var InboxPopup_default = InboxPopup;
+function coalesceThreadId(reference, threads) {
+  const referenceId = reference?.id;
+  if (reference?.kind === "quotation") {
+    return threads.find((t) => t.id === "t4")?.id ?? (threads[0]?.id ?? "");
+  }
+  return referenceId && (threads.find((t) => t.id === referenceId)?.id || threads.find((t) => t.inquiryId === referenceId)?.id) || (threads.length ? threads[0].id : "");
+}
+function toRef(m) {
+  return {
+    id: m.id,
+    author: m.author,
+    time: m.time,
+    text: m.text ?? m.content,
+    images: m.images,
+    files: m.files,
+    audio: m.audio
+  };
+}
+var SinglePopup = ({ adapter, uiCallbacks }) => {
+  const { close, reference } = useChatUI();
+  const threads = adapter.threads.list(reference);
+  const initialThreadId = React11.useMemo(
+    () => coalesceThreadId(reference, threads),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [reference]
+  );
+  const [activeId] = React11.useState(initialThreadId);
+  const activeThread = threads.find((t) => t.id === activeId);
+  const isVerified = activeThread?.badge === true;
+  const meta = reference?.meta ?? {};
+  const initial = meta.initial ?? activeThread?.avatarText ?? "A";
+  const title = meta.title ?? activeThread?.title ?? "Unknown";
+  const online = meta.online ?? activeThread?.online ?? true;
+  const subtitle = meta.subtitle ?? "Customer";
+  const [messages, setMessages] = React11.useState(
+    () => activeId ? adapter.messages.list(activeId) : []
+  );
+  const [scrollKey, setScrollKey] = React11.useState(0);
+  const [replyTo, setReplyTo] = React11.useState(void 0);
+  const [isLoading, setIsLoading] = React11.useState(true);
+  React11.useEffect(() => {
+    const t = setTimeout(() => setIsLoading(false), 300);
+    return () => clearTimeout(t);
+  }, []);
+  React11.useEffect(() => {
+    if (!activeId || !adapter.messages.subscribe) return;
+    const unsub = adapter.messages.subscribe(activeId, () => {
+      setMessages(adapter.messages.list(activeId));
+      setScrollKey(Date.now());
+    });
+    return unsub;
+  }, [activeId, adapter]);
+  const handleAfterSend = React11.useCallback(() => {
+    setMessages(adapter.messages.list(activeId));
+    setScrollKey(Date.now());
+    setReplyTo(void 0);
+  }, [activeId, adapter]);
+  const statusText = activeThread?.status?.kind === "seen" ? "Seen" : "Delivered";
+  return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-[40px] z-50", children: [
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        "aria-label": "Close chat",
+        onClick: close,
+        className: "fixed inset-0 bg-black/20 cursor-auto!",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.3 }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        className: "relative h-[650px] w-[450px] rounded-[20px] p-[2px]",
+        style: {
+          boxShadow: "0px 2px 12px 0px #3B33331A",
+          background: "linear-gradient(236.83deg, rgba(51, 201, 212, 0.3) 0.4%, rgba(39, 83, 251, 0.3) 30.28%, rgba(39, 83, 251, 0.3) 50.2%, rgba(39, 83, 251, 0.3) 65.14%, rgba(235, 67, 255, 0.3) 100%)"
+        },
+        initial: { x: "100%", opacity: 0 },
+        animate: { x: 0, opacity: 1 },
+        exit: { x: "100%", opacity: 0 },
+        transition: { type: "tween", duration: 0.4, ease: "easeOut" },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col overflow-hidden rounded-[18px] bg-white", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-[64px] shrink-0", children: /* @__PURE__ */ jsx(
+            ChatHeader,
+            {
+              left: /* @__PURE__ */ jsx(
+                ChatIdentity_default,
+                {
+                  variant: "initial",
+                  initial,
+                  bg: "#FFE5DA",
+                  online,
+                  title,
+                  subtitle,
+                  verified: isVerified,
+                  subtitleVariant: "muted"
+                }
+              ),
+              right: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: close,
+                  className: "flex h-[34px] w-[34px] items-center justify-center rounded-full bg-white text-black shadow-[0px_2px_4px_0px_#A5A3AE4D] hover:bg-black/5 hover:text-[#ff5301] cursor-pointer",
+                  children: /* @__PURE__ */ jsx(ChatXIcon, { className: "h-6 w-6" })
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-h-0", children: [
+            isLoading ? /* @__PURE__ */ jsx(ChatSpinner_default, { className: "h-full" }) : /* @__PURE__ */ jsx(ChatScroll_default, { className: "h-full", bottomAlignWhenShort: false, scrollKey, children: messages.map((m, idx) => {
+              const mine = m.author === "you";
+              const isLast = idx === messages.length - 1;
+              return /* @__PURE__ */ jsx(
+                ChatMessageItem_default,
+                {
+                  id: m.id,
+                  mine,
+                  time: m.time ?? "",
+                  authorInitial: typeof m.author === "string" ? m.author : "U",
+                  text: m.text ?? m.content,
+                  businessCard: m.businessCard,
+                  addressCard: m.addressCard,
+                  images: m.images,
+                  files: m.files,
+                  audio: m.audio,
+                  replyTo: m.replyTo,
+                  initialSrc: m.avatarSrc,
+                  showStatus: isLast,
+                  status: statusText,
+                  onReply: () => setReplyTo(toRef(m))
+                },
+                m.id
+              );
+            }) }),
+            /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 w-full bg-white px-4 pb-2", children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto flex items-center justify-start", children: /* @__PURE__ */ jsx(TypingIndicator_default, {}) }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+            ChatFooter_default,
+            {
+              variant: "single",
+              replyTo,
+              clearReply: () => setReplyTo(void 0),
+              onAfterSend: handleAfterSend,
+              onSend: (payload) => {
+                if (activeId) adapter.messages.send(activeId, payload);
+              }
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+};
+var SinglePopup_default = SinglePopup;
+function ChatRoot({ adapter, uiCallbacks }) {
+  const { isOpen, variant } = useChatUI();
+  useDisableBodyScroll(isOpen);
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return createPortal(
+    // GalleryProvider is scoped to the chat only.
+    // It is completely separate from the host app's own gallery context.
+    /* @__PURE__ */ jsx(GalleryProvider, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isOpen && (variant === "inbox" ? /* @__PURE__ */ jsx(
+      InboxPopup_default,
+      {
+        adapter,
+        uiCallbacks
+      },
+      "inbox"
+    ) : /* @__PURE__ */ jsx(
+      SinglePopup_default,
+      {
+        adapter,
+        uiCallbacks
+      },
+      "single"
+    )) }) }),
+    document.body
+  );
+}
+function ChatUIProvider({ children }) {
+  const [isOpen, setOpen] = useState(false);
+  const [variant, setVariant] = useState("inbox");
+  const [reference, setReference] = useState();
+  const [selectedThreadId, setSelected] = useState(null);
+  const api = useMemo(
+    () => ({
+      isOpen,
+      variant,
+      reference,
+      selectedThreadId,
+      openInbox: (opts) => {
+        setReference(opts?.reference);
+        setSelected(opts?.threadId ?? null);
+        setVariant("inbox");
+        setOpen(true);
+      },
+      openSingle: (opts) => {
+        setReference(opts?.reference);
+        setVariant("single");
+        setSelected(null);
+        setOpen(true);
+      },
+      close: () => setOpen(false),
+      selectThread: (id) => setSelected(id)
+    }),
+    [isOpen, variant, reference, selectedThreadId]
+  );
+  return /* @__PURE__ */ jsx(ChatUIContext.Provider, { value: api, children });
+}
+
+export { ChatFooter_default as ChatFooter, ChatHeader, ChatIdentity_default as ChatIdentity, ChatInquiryBar_default as ChatInquiryBar, ChatListHeader_default as ChatListHeader, ChatMessageItem_default as ChatMessageItem, ChatRoot, ChatScroll_default as ChatScroll, ChatSpinner_default as ChatSpinner, ChatThreadItem_default as ChatThreadItem, ChatUIContext, ChatUIProvider, Portal, ReplyCard_default as ReplyCard, TypingIndicator_default as TypingIndicator, cn, useChatUI };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map