@banbox/chat 1.0.0

package/src/contexts/GalleryProvider.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useCallback, useState } from "react";
+
+import { GalleryContext } from "./GalleryContext";
+import type { GalleryMedia, GalleryContextType } from "./GalleryContext";
+
+interface GalleryState {
+  images: GalleryMedia[];
+  currentIndex: number | null;
+  isOpen: boolean;
+  uploadDate: string | null;
+  showDots: boolean;
+}
+
+const INITIAL_STATE: GalleryState = {
+  images: [],
+  currentIndex: null,
+  isOpen: false,
+  uploadDate: null,
+  showDots: false,
+};
+
+export const GalleryProvider = ({ children }: { children: ReactNode }) => {
+  const [state, setState] = useState<GalleryState>(INITIAL_STATE);
+
+  const setImages = useCallback((images: GalleryMedia[]) => {
+    setState((prev) => ({ ...prev, images }));
+  }, []);
+
+  const setCurrentIndex = useCallback((currentIndex: number) => {
+    setState((prev) => ({ ...prev, currentIndex }));
+  }, []);
+
+  const setUploadDate = useCallback((uploadDate: string | null) => {
+    setState((prev) => ({ ...prev, uploadDate }));
+  }, []);
+
+  const openGallery = useCallback(
+    (imgs: GalleryMedia[], startIndex = 0, date: string | null = null, dots = false) => {
+      setState({
+        images: imgs,
+        currentIndex: startIndex,
+        uploadDate: imgs[startIndex]?.uploadDate ?? date,
+        isOpen: true,
+        showDots: dots,
+      });
+    },
+    [],
+  );
+
+  const closeGallery = useCallback(() => {
+    setState((prev) => ({ ...prev, isOpen: false, currentIndex: null }));
+  }, []);
+
+  const next = useCallback(() => {
+    setState((prev) => {
+      if (prev.currentIndex === null || prev.images.length === 0) return prev;
+      const newIndex = prev.currentIndex < prev.images.length - 1 ? prev.currentIndex + 1 : 0;
+      return { ...prev, currentIndex: newIndex, uploadDate: prev.images[newIndex]?.uploadDate ?? null };
+    });
+  }, []);
+
+  const prev = useCallback(() => {
+    setState((prev) => {
+      if (prev.currentIndex === null || prev.images.length === 0) return prev;
+      const newIndex = prev.currentIndex > 0 ? prev.currentIndex - 1 : prev.images.length - 1;
+      return { ...prev, currentIndex: newIndex, uploadDate: prev.images[newIndex]?.uploadDate ?? null };
+    });
+  }, []);
+
+  const value: GalleryContextType = {
+    images: state.images,
+    currentIndex: state.currentIndex,
+    isOpen: state.isOpen,
+    uploadDate: state.uploadDate,
+    showDots: state.showDots,
+    setImages,
+    setCurrentIndex,
+    setUploadDate,
+    openGallery,
+    closeGallery,
+    next,
+    prev,
+  };
+
+  return <GalleryContext.Provider value={value}>{children}</GalleryContext.Provider>;
+};

package/src/hooks/useDisableBodyScroll.ts

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+
+/**
+ * Locks document body scroll while `active` is true.
+ * Restores overflow on cleanup / when `active` becomes false.
+ */
+export function useDisableBodyScroll(active: boolean) {
+  useEffect(() => {
+    if (!active) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [active]);
+}

package/src/icons/index.tsx

@@ -0,0 +1,248 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// Banbox Chat Icons — all SVGs inlined so @banbox/chat has zero icon dependency
+// ─────────────────────────────────────────────────────────────────────────────
+
+type IconProps = { className?: string };
+
+export const ChatXIcon = ({ className = "" }: IconProps) => (
+  <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M18.5 6L6.5 18" stroke="CurrentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M6.5 6L18.5 18" stroke="CurrentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const ChatSearchIcon = ({ className = "" }: IconProps) => (
+  <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={className}>
+    <path d="m21 21-4.34-4.34" />
+    <circle cx="11" cy="11" r="8" />
+  </svg>
+);
+
+export const MessageIcon = ({ className = "" }: IconProps) => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <rect x="2.5" y="4.16666" width="15" height="11.6667" rx="2" stroke="CurrentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M2.5 5.83334L10 10.8333L17.5 5.83334" stroke="CurrentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const BlueBadgeIcon = ({ className = "" }: IconProps) => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <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)" />
+    <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" />
+    <defs>
+      <linearGradient id="badge_grad" x1="6.9983" y1="12.2464" x2="6.9983" y2="1.75015" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#0064E1" />
+        <stop offset="0.994" stopColor="#26B7FF" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export const ArrowSendAngleIcon = ({ className = "" }: IconProps) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <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)" />
+    <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)" />
+    <defs>
+      <linearGradient id="send_angle_g1" x1="16.4999" y1="1" x2="16.4999" y2="13.9998" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#33C9D4" />
+        <stop offset="0.65" stopColor="#2753FB" />
+      </linearGradient>
+      <linearGradient id="send_angle_g2" x1="12.0001" y1="1" x2="12.0001" y2="23.0001" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#33C9D4" />
+        <stop offset="0.65" stopColor="#2753FB" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export const ArrowSendIcon = ({ className = "" }: IconProps) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <g clipPath="url(#send_clip)">
+      <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" />
+    </g>
+    <defs>
+      <clipPath id="send_clip"><rect width="24" height="24" fill="white" /></clipPath>
+    </defs>
+  </svg>
+);
+
+export const RecordMicIcon = ({ className = "" }: IconProps) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <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" />
+    <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" />
+  </svg>
+);
+
+export const AttachIcon = ({ className = "" }: IconProps) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <g clipPath="url(#attach_clip)">
+      <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" />
+    </g>
+    <defs>
+      <clipPath id="attach_clip"><rect width="16" height="16" fill="white" /></clipPath>
+    </defs>
+  </svg>
+);
+
+export const SmileIcon = ({ className = "" }: IconProps) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <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" />
+    <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" />
+    <path d="M6 6H6.00667" stroke="black" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M10 6H10.0067" stroke="black" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const ProfileCardIcon = ({ className }: IconProps) => (
+  <svg className={className} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="2" y="2.66406" width="12" height="10.6667" rx="3" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <circle cx="5.99935" cy="6.66927" r="1.33333" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M10 5.33333H11.3333" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M10 7.9974H11.3333" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M4.66602 10.6693H11.3327" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const NewLanguageIcon = ({ className }: IconProps) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <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" />
+    <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" />
+  </svg>
+);
+
+export const ChatInfoIcon = ({ className = "" }: IconProps) => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <circle cx="9" cy="9" r="6.75" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M9.00016 6H9.00766" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M8.25 9H9V12H9.75" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const ArrowBackUpIcon = ({ className = "" }: IconProps) => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <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" />
+  </svg>
+);
+
+export const FileIcon = ({ className = "" }: IconProps) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M14 3V7C14 7.55228 14.4477 8 15 8H19" stroke="CurrentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <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" />
+    <path d="M9 9H10" stroke="CurrentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M9 13H15" stroke="CurrentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M9 17H15" stroke="CurrentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const MessageReplayIcon = ({ className = "" }: IconProps) => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <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" />
+  </svg>
+);
+
+export const RightArrow = ({ className }: IconProps) => (
+  <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M7.5 18H28.5" stroke="CurrentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M19.5 27L28.5 18" stroke="CurrentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M19.5 9L28.5 18" stroke="CurrentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const FileDownloadIcon = ({ className = "" }: IconProps) => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <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" />
+    <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" />
+    <path d="M10.0026 9.16602V14.166" stroke="CurrentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M7.5 11.666L10 14.166L12.5 11.666" stroke="CurrentColor" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const BusinessInfoIcon = ({ className = "" }: IconProps) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M2 13.9993H14" stroke="CurrentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M3.33594 14V4.66667L8.66927 2V14" stroke="CurrentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M12.6641 13.9993V7.33268L8.66406 4.66602" stroke="CurrentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5.9974 5.99992V6.00659" stroke="CurrentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5.9974 7.99992V8.00659" stroke="CurrentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5.9974 9.99992V10.0066" stroke="CurrentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5.9974 11.9999V12.0066" stroke="CurrentColor" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const ChatMailIcon = ({ className = "" }: IconProps) => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <rect x="1.75" y="2.91797" width="10.5" height="8.16667" rx="2" stroke="black" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M1.75 4.08203L7 7.58203L12.25 4.08203" stroke="black" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const ChatPhoneCallIcon = ({ className = "" }: IconProps) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <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" />
+  </svg>
+);
+
+export const BadgeHomeIcon = ({ className = "" }: IconProps) => (
+  <svg width="12" height="12" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M2.91667 7H1.75L7 1.75L12.25 7H11.0833" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <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" />
+    <rect x="5.83594" y="7" width="2.33333" height="2.33333" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const BadgeOfficeIcon = ({ className = "" }: IconProps) => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M1.75 12.2507H12.25" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M2.91406 12.25V4.08333L7.58073 1.75V12.25" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M11.0859 12.2507V6.41732L7.58594 4.08398" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5.2526 5.24969V5.25552" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5.2526 6.99969V7.00552" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5.2526 8.74969V8.75552" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5.2526 10.4997V10.5055" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const MapPinIcon = ({ className = "" }: IconProps) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M11.9974 4.00188V4.00854" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <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" />
+    <path d="M7 3.16797L6 2.66797L2 4.66797V13.3346L6 11.3346L10 13.3346L14 11.3346V10.0013" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5.9974 2.66797V11.3346" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M9.9974 10V13.3333" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const MenuIcon = ({ className }: IconProps) => (
+  <svg width="24" height="24" className={className} viewBox="0 0 24 24" fill="currentColor">
+    <circle cx="12" cy="5" r="2" />
+    <circle cx="12" cy="12" r="2" />
+    <circle cx="12" cy="19" r="2" />
+  </svg>
+);
+
+export const PinIcon = ({ className }: IconProps) => (
+  <svg className={className} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.5007 3.75L9.16732 7.08333L5.83398 8.33333L4.58398 9.58333L10.4173 15.4167L11.6673 14.1667L12.9173 10.8333L16.2507 7.5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M7.5 12.5L3.75 16.25" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M12.084 3.33594L16.6673 7.91927" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const PinOffIcon = ({ className }: IconProps) => (
+  <svg className={className} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.5007 3.75L9.16732 7.08333L5.83398 8.33333L4.58398 9.58333L10.4173 15.4167L11.6673 14.1667L12.9173 10.8333L16.2507 7.5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M7.5 12.5L3.75 16.25" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M12.084 3.33594L16.6673 7.91927" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M3 3L17 17" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const ChatTrashIcon = ({ className }: IconProps) => (
+  <svg className={className} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.33398 5.83073H16.6673" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M8.33268 9.16406V14.1641" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M11.6667 9.16406V14.1641" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M4.16602 5.83594L4.99935 15.8359C4.99935 16.7564 5.74554 17.5026 6.66602 17.5026H13.3327C14.2532 17.5026 14.9993 16.7564 14.9993 15.8359L15.8327 5.83594" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M7.5 5.83333V3.33333C7.5 2.8731 7.8731 2.5 8.33333 2.5H11.6667C12.1269 2.5 12.5 2.8731 12.5 3.33333V5.83333" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);

package/src/index.ts

@@ -0,0 +1,56 @@
+// @banbox/chat — Public API
+// ─────────────────────────────────────────────────────────────────────────────
+// This is the only file host apps should import from.
+// Everything else is internal implementation detail.
+// ─────────────────────────────────────────────────────────────────────────────
+
+// ── Main entry point ──────────────────────────────────────────────────────────
+export { default as ChatRoot } from "./chat/ChatRoot";
+export type { ChatRootProps } from "./chat/ChatRoot";
+
+// ── Adapter interfaces (implement these in your host app) ─────────────────────
+export type { ChatAdapter, ChatUICallbacks, KebabMenuOpts, ToastOpts } from "./adapter/types";
+
+// ── Domain types (use in your data layer) ─────────────────────────────────────
+export type {
+  Thread,
+  Message,
+  SendPayload,
+  MessageFile,
+  MessageAudio,
+  MessageRef,
+  BusinessCard,
+  AddressCard,
+  ThreadStatus,
+  Reference,
+} from "./types";
+
+// ── Chat UI context (for opening/closing the chat from anywhere in host app) ──
+export { ChatUIProvider } from "./contexts/ChatUIProvider";
+export { useChatUI } from "./contexts/ChatUIContext";
+export { ChatUIContext } from "./contexts/ChatUIContext";
+export type { ChatUIState, ChatVariant } from "./contexts/ChatUIContext";
+
+// ── Individual UI components (advanced usage / custom layouts) ────────────────
+export { default as ChatFooter } from "./ui/chat/ChatFooter";
+export { default as ChatHeader } from "./ui/chat/ChatHeader";
+export { default as ChatIdentity } from "./ui/chat/ChatIdentity";
+export { default as ChatMessageItem } from "./ui/chat/ChatMessageItem";
+export { default as ChatScroll } from "./ui/chat/ChatScroll";
+export { default as ChatThreadItem } from "./ui/chat/ChatThreadItem";
+export type { ChatThreadStatus } from "./ui/chat/ChatThreadItem";
+export { default as ChatListHeader } from "./ui/chat/ChatListHeader";
+export { default as ChatInquiryBar } from "./ui/chat/ChatInquiryBar";
+export { default as TypingIndicator } from "./ui/chat/TypingIndicator";
+export { default as ReplyCard } from "./ui/chat/ReplyCard";
+export { default as ChatSpinner } from "./ui/chat/ChatSpinner";
+
+// ── Utilities ─────────────────────────────────────────────────────────────────
+export { cn } from "./utils/cn";
+export { default as Portal } from "./ui/Portal";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// NOTE: GalleryContext / GalleryProvider / useGallery are intentionally NOT
+// exported. They are internal to the chat package and applied automatically
+// inside <ChatRoot />. The host app should use its own gallery context.
+// ─────────────────────────────────────────────────────────────────────────────

package/src/lottie/typingdotanimation2.json

@@ -0,0 +1 @@
+{"v":"5.12.1","fr":25,"ip":0,"op":59,"w":400,"h":100,"nm":"Composizione 1","ddd":0,"assets":[{"id":"comp_0","nm":"barra","fr":25,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"barra contorni","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.541,"y":1},"o":{"x":0.158,"y":0},"t":0,"s":[47,189.5,0],"to":[48.333,0,0],"ti":[-48.333,0,0]},{"t":60,"s":[337,189.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[57.25,4.75,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[2.485,0],[0,0],[0,2.485],[-2.485,0],[0,0],[0,-2.485]],"o":[[0,0],[-2.485,0],[0,-2.485],[0,0],[2.485,0],[0,2.485]],"v":[[52.5,4.5],[-52.5,4.5],[-57,0],[-52.5,-4.5],[52.5,-4.5],[57,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":0,"s":[0.058823529631,0.800000011921,0.807843148708,1]},{"i":{"x":[0.833],"y":[0.999]},"o":{"x":[0.167],"y":[0.001]},"t":23,"s":[0,0.419607847929,0.470588237047,1]},{"t":49,"s":[0.376470595598,0.435294121504,0.482352942228,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Riempimento 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[57.25,4.75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Gruppo 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":250,"st":0,"ct":1,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"barra","refId":"comp_0","sr":0.89999997615814,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[201,50,0],"ix":2,"l":2},"a":{"a":0,"k":[190,190,0],"ix":1,"l":2},"s":{"a":0,"k":[120,120,100],"ix":6,"l":2}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":0,"k":{"i":[[2.347,0],[0,0],[0,-2.347],[-2.347,0],[0,0],[0,2.347]],"o":[[0,0],[-2.347,0],[0,2.347],[0,0],[2.347,0],[0,-2.347]],"v":[[270.25,185],[108.75,185],[104.5,189.25],[108.75,193.5],[270.25,193.5],[274.5,189.25]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"w":380,"h":380,"ip":0,"op":59,"st":0,"bm":0}],"markers":[],"props":{}}

package/src/modals/chat/ChatConfirmModal.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { cn } from "../../utils/cn";
+import Button from "../../ui/Button";
+
+type Props = {
+  open: boolean;
+  title?: string;
+  description?: React.ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+  onClose: () => void;
+  className?: string;
+};
+
+export default function ChatConfirmModal({
+  open,
+  title = "DELETE CHAT",
+  confirmLabel = "Yes, Delete",
+  cancelLabel = "Not Now",
+  onConfirm,
+  onClose,
+  className,
+}: Props) {
+  React.useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="absolute inset-0 z-70 flex items-center justify-center overflow-hidden"
+      onClick={(e) => {
+        e.stopPropagation();
+        onClose();
+      }}
+    >
+      <div className="absolute inset-0 bg-black/30" />
+
+      <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()}
+      >
+        <div className="flex h-[44px] items-center bg-[#ff5200] px-4 text-xl font-semibold uppercase tracking-wide text-white">
+          {title}
+        </div>
+
+        <div className="p-4">
+          <h3 className="mb-2 text-[14px] font-semibold text-black">
+            Are you Sure you want to delete the chat
+          </h3>
+
+          <div className="mt-4 mb-[24px] flex items-start gap-1.5 text-xs font-normal text-[#636363]">
+            <span>
+              <svg className="h-4 w-4" viewBox="0 0 16 16" fill="none">
+                <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.5" />
+                <path d="M8 4.5v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                <circle cx="8" cy="11" r="0.75" fill="currentColor" />
+              </svg>
+            </span>
+            <p>
+              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.
+            </p>
+          </div>
+
+          <div className="flex w-full items-center gap-4 border-t border-[#e1e1e1] pt-[24px]">
+            <Button
+              variant="outlined"
+              color="white"
+              size="34"
+              className="flex-1"
+              onClick={onClose}
+            >
+              {cancelLabel}
+            </Button>
+            <Button
+              variant="filled"
+              color="orange"
+              size="34"
+              className="flex-1"
+              onClick={() => {
+                onConfirm();
+                onClose();
+              }}
+            >
+              {confirmLabel}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}