@banbox/chat 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banbox/chat",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Banbox Chat UI components — reusable across all Banbox React/Next.js projects",
   "type": "module",
   "license": "UNLICENSED",

package/src/chat/InboxPopup.tsx

@@ -6,19 +6,21 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import { useChatUI } from "../contexts/ChatUIContext";
 import { useGallery } from "../contexts/GalleryContext";
-import ChatConfirmModal from "../modals/chat/ChatConfirmModal";
-import ChatFooter from "../ui/chat/ChatFooter";
-import ChatHeader from "../ui/chat/ChatHeader";
-import ChatIdentity from "../ui/chat/ChatIdentity";
-import ChatInquiryBar from "../ui/chat/ChatInquiryBar";
-import ChatListHeader from "../ui/chat/ChatListHeader";
-import ChatMessageItem from "../ui/chat/ChatMessageItem";
-import ChatScroll from "../ui/chat/ChatScroll";
-import type { ChatThreadStatus } from "../ui/chat/ChatThreadItem";
-import ChatThreadItem from "../ui/chat/ChatThreadItem";
-import TypingIndicator from "../ui/chat/TypingIndicator";
+import ChatConfirmModal from "../modals/ChatConfirmModal";
+import ChatFooter from "../ui/ChatFooter";
+import ChatHeader from "../ui/ChatHeader";
+import ChatIdentity from "../ui/ChatIdentity";
+import ChatInquiryBar from "../ui/ChatInquiryBar";
+import ChatListHeader from "../ui/ChatListHeader";
+import ChatMessageItem from "../ui/ChatMessageItem";
+import ChatScroll from "../ui/ChatScroll";
+import type { ChatThreadStatus } from "../ui/ChatThreadItem";
+import ChatThreadItem from "../ui/ChatThreadItem";
+import TypingIndicator from "../ui/TypingIndicator";
 import ChatImagePreviewModal from "./ChatImagePreviewModal";
+import { GRADIENT_BORDER, getThemeAttr, getThemeVars } from "../utils/theme";
 
+import ChatKebabMenu from "../ui/ChatKebabMenu";
 import type { ChatAdapter, ChatUICallbacks } from "../adapter/types";
 import type { Message, MessageRef, Thread } from "../types";
 
@@ -43,23 +45,7 @@ const avatarBgByInitial: Record<string, string> = {
   b: "#F0EDEB",
 };
 
-const GRADIENT_BORDER =
-  "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%)";
 
-function getThemeAttr(theme?: ChatTheme): string {
-  if (!theme || theme === "marketplace") return "marketplace";
-  if (theme === "admin") return "admin";
-  return "custom";
-}
-
-function getThemeVars(theme?: ChatTheme): React.CSSProperties {
-  if (!theme || theme === "marketplace" || theme === "admin") return {};
-  const vars: Record<string, string> = {};
-  if (theme.primary) vars["--color-banbox-primary"] = theme.primary;
-  if (theme.primaryActive) vars["--color-banbox-primary-active"] = theme.primaryActive;
-  if (theme.surfaceLow) vars["--color-banbox-surface-container-low"] = theme.surfaceLow;
-  return vars as React.CSSProperties;
-}
 
 /* ══════════════════════════════════════════════════
    Component
@@ -135,12 +121,19 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
 
   const prevActiveIdRef = useRef(activeId);
   useEffect(() => {
+    // Mark read on thread SWITCH
     if (prevActiveIdRef.current !== activeId) {
       prevActiveIdRef.current = activeId;
       if (activeId) adapter.threads.markRead?.(activeId);
     }
   }, [activeId, adapter]);
 
+  // Mark read on initial open (prevActiveIdRef starts equal to activeId so the above won't fire)
+  useEffect(() => {
+    if (activeId) adapter.threads.markRead?.(activeId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const toRef = (m: Message): MessageRef => ({
     id: m.id,
     author: typeof m.author === "string" ? m.author : "U",
@@ -183,7 +176,7 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
      RENDER
   ══════════════════════════════════════════════════ */
   return (
-    <div className="fixed bottom-4 right-4 z-[10002]">
+    <div className="fixed bottom-4 right-4 z-10002">
       {/* Backdrop */}
       <motion.button
         aria-label="Close chat"
@@ -255,13 +248,23 @@ const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks, theme })
                     )
                   }
                   right={
-                    uiCallbacks?.renderKebabMenu?.({
-                      pinned: Boolean(activeThread?.pinned),
-                      onPinToggle: () => {
-                        if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
-                      },
-                      onDelete: () => setShowDelete(true),
-                    }) ?? null
+                    uiCallbacks?.renderKebabMenu
+                      ? uiCallbacks.renderKebabMenu({
+                          pinned: Boolean(activeThread?.pinned),
+                          onPinToggle: () => {
+                            if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
+                          },
+                          onDelete: () => setShowDelete(true),
+                        })
+                      : (
+                        <ChatKebabMenu
+                          pinned={Boolean(activeThread?.pinned)}
+                          onPinToggle={() => {
+                            if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
+                          }}
+                          onDelete={() => setShowDelete(true)}
+                        />
+                      )
                   }
                 />
               </div>

package/src/chat/SinglePopup.tsx

@@ -5,32 +5,35 @@ import { motion } from "framer-motion";
 import React from "react";
 
 import { useChatUI } from "../contexts/ChatUIContext";
+import { useGallery } from "../contexts/GalleryContext";
 import { ChatXIcon } from "../icons";
-import ChatFooter from "../ui/chat/ChatFooter";
-import ChatHeader from "../ui/chat/ChatHeader";
-import ChatIdentity from "../ui/chat/ChatIdentity";
-import ChatMessageItem from "../ui/chat/ChatMessageItem";
-import ChatScroll from "../ui/chat/ChatScroll";
-import TypingIndicator from "../ui/chat/TypingIndicator";
+import ChatKebabMenu from "../ui/ChatKebabMenu";
+import ChatConfirmModal from "../modals/ChatConfirmModal";
+import ChatFooter from "../ui/ChatFooter";
+import ChatHeader from "../ui/ChatHeader";
+import ChatIdentity from "../ui/ChatIdentity";
+import ChatMessageItem from "../ui/ChatMessageItem";
+import ChatScroll from "../ui/ChatScroll";
+import TypingIndicator from "../ui/TypingIndicator";
+import ChatImagePreviewModal from "./ChatImagePreviewModal";
+import { GRADIENT_BORDER, getThemeAttr, getThemeVars } from "../utils/theme";
 
 import type { ChatAdapter, ChatUICallbacks } from "../adapter/types";
 import type { Message, MessageRef, Reference, Thread } from "../types";
 import type { ChatTheme } from "./InboxPopup";
 
-/* ─── Helpers ─── */
-const GRADIENT_BORDER =
-  "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%)";
+
 
 function coalesceThreadId(reference: Reference | undefined, threads: Thread[]): string {
-  const referenceId = reference?.id;
-  if (reference?.kind === "quotation") {
-    return threads.find((t) => t.id === "t4")?.id ?? (threads[0]?.id ?? "");
-  }
+  if (!reference?.id) return threads[0]?.id ?? "";
+  const refId = reference.id;
+  // Priority: exact thread.id match → orderId match → inquiryId match → first thread
   return (
-    (referenceId &&
-      (threads.find((t) => t.id === referenceId)?.id ||
-        threads.find((t) => t.inquiryId === referenceId)?.id)) ||
-    (threads.length ? threads[0].id : "")
+    threads.find((t) => t.id === refId)?.id ??
+    threads.find((t) => t.orderId === refId)?.id ??
+    threads.find((t) => t.inquiryId === refId)?.id ??
+    threads[0]?.id ??
+    ""
   );
 }
 
@@ -46,20 +49,7 @@ function toRef(m: Message): MessageRef {
   };
 }
 
-function getThemeAttr(theme?: ChatTheme): string {
-  if (!theme || theme === "marketplace") return "marketplace";
-  if (theme === "admin") return "admin";
-  return "custom";
-}
 
-function getThemeVars(theme?: ChatTheme): React.CSSProperties {
-  if (!theme || theme === "marketplace" || theme === "admin") return {};
-  const vars: Record<string, string> = {};
-  if (theme.primary) vars["--color-banbox-primary"] = theme.primary;
-  if (theme.primaryActive) vars["--color-banbox-primary-active"] = theme.primaryActive;
-  if (theme.surfaceLow) vars["--color-banbox-surface-container-low"] = theme.surfaceLow;
-  return vars as React.CSSProperties;
-}
 
 export type SinglePopupProps = {
   adapter: ChatAdapter;
@@ -72,10 +62,21 @@ export type SinglePopupProps = {
 ══════════════════════════════════════════════════ */
 const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme }) => {
   const { close, reference } = useChatUI();
+  const { isOpen: isGalleryOpen, closeGallery } = useGallery();
+
+  // ── Threads — subscribed so real-API updates (new msg, pin, delete) are reflected
+  const [threads, setThreads] = React.useState<Thread[]>(() => adapter.threads.list(reference));
+  React.useEffect(() => {
+    // Refresh once on mount (covers any gap between render and subscribe)
+    setThreads(adapter.threads.list(reference));
+    const unsub = adapter.threads.subscribe(() => {
+      setThreads(adapter.threads.list(reference));
+    });
+    return unsub;
+  }, [adapter, reference]);
 
-  const threads = adapter.threads.list(reference);
   const initialThreadId = React.useMemo(
-    () => coalesceThreadId(reference, threads),
+    () => coalesceThreadId(reference, adapter.threads.list(reference)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [reference],
   );
@@ -101,6 +102,7 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme }
   );
   const [scrollKey, setScrollKey] = React.useState<number>(Date.now());
   const [replyTo, setReplyTo] = React.useState<MessageRef | undefined>(undefined);
+  const [showDelete, setShowDelete] = React.useState(false);
 
   React.useEffect(() => {
     if (!activeId || !adapter.messages.subscribe) return;
@@ -117,7 +119,17 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme }
     setReplyTo(undefined);
   }, [activeId, adapter]);
 
-  void uiCallbacks;
+  const handleConfirmDelete = React.useCallback(() => {
+    if (!activeId) { setShowDelete(false); return; }
+    adapter.threads.delete(activeId);
+    uiCallbacks?.showToast?.({
+      type: "success",
+      title: "Chat Deleted",
+      message: "The chat has been deleted successfully.",
+    });
+    setShowDelete(false);
+    close();
+  }, [activeId, adapter, uiCallbacks, close]);
 
   return (
     <div className="fixed bottom-4 right-4 z-[10002]">
@@ -169,13 +181,33 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme }
                 />
               }
               right={
-                <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-[var(--color-banbox-warning)] cursor-pointer border-none"
-                >
-                  <ChatXIcon className="h-6 w-6" />
-                </button>
+                <div className="flex items-center gap-1">
+                  {uiCallbacks?.renderKebabMenu
+                    ? uiCallbacks.renderKebabMenu({
+                        pinned: Boolean(activeThread?.pinned),
+                        onPinToggle: () => {
+                          if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
+                        },
+                        onDelete: () => setShowDelete(true),
+                      })
+                    : (
+                      <ChatKebabMenu
+                        pinned={Boolean(activeThread?.pinned)}
+                        onPinToggle={() => {
+                          if (activeId) adapter.threads.pin(activeId, !activeThread?.pinned);
+                        }}
+                        onDelete={() => setShowDelete(true)}
+                      />
+                    )
+                  }
+                  <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-[var(--color-banbox-warning)] cursor-pointer border-none"
+                  >
+                    <ChatXIcon className="h-6 w-6" />
+                  </button>
+                </div>
               }
             />
           </div>
@@ -233,6 +265,15 @@ const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks, theme }
           </div>
         </div>
       </motion.div>
+
+      {/* Delete confirm modal */}
+      <ChatConfirmModal
+        open={showDelete}
+        onClose={() => setShowDelete(false)}
+        onConfirm={handleConfirmDelete}
+      />
+      {/* Image gallery preview */}
+      <ChatImagePreviewModal isOpen={isGalleryOpen} onClose={closeGallery} />
     </div>
   );
 };

package/src/icons/index.tsx

@@ -212,6 +212,20 @@ export const MapPinIcon = ({ className = "" }: IconProps) => (
   </svg>
 );
 
+export const MapIcon2 = ({ 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="M7.9987 1.33203C5.41203 1.33203 3.33203 3.41203 3.33203 5.9987C3.33203 9.4987 7.9987 14.6654 7.9987 14.6654C7.9987 14.6654 12.6654 9.4987 12.6654 5.9987C12.6654 3.41203 10.5854 1.33203 7.9987 1.33203Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    <circle cx="8" cy="6" r="1.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const FlyIcon = ({ 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="M16.5 1.5L8.25 9.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M16.5 1.5L11.25 16.5L8.25 9.75L1.5 6.75L16.5 1.5Z" stroke="currentColor" strokeWidth="1.5" 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" />
@@ -246,3 +260,44 @@ export const ChatTrashIcon = ({ className }: IconProps) => (
     <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>
 );
+
+export const EditIcon = ({ 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="M9 7H6C4.89543 7 4 7.89543 4 9V18C4 19.1046 4.89543 20 6 20H15C16.1046 20 17 19.1046 17 18V15" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M9 15H12L20.5 6.49998C21.3284 5.67156 21.3284 4.32841 20.5 3.49998C19.6716 2.67156 18.3284 2.67156 17.5 3.49998L9 12V15" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M16 5L19 8" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const TrashIcon = ({ 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="M3.3335 5.83464H16.6668" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M8.33317 9.16797V14.168" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M11.6667 9.16797V14.168" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M4.1665 5.83203L4.99984 15.832C4.99984 16.7525 5.74603 17.4987 6.6665 17.4987H13.3332C14.2536 17.4987 14.9998 16.7525 14.9998 15.832L15.8332 5.83203" stroke="currentColor" strokeWidth="1.5" 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.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const EmailIcon = ({ 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="M3 3H15C15.825 3 16.5 3.675 16.5 4.5V13.5C16.5 14.325 15.825 15 15 15H3C2.175 15 1.5 14.325 1.5 13.5V4.5C1.5 3.675 2.175 3 3 3Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M16.5 4.5L9 9.75L1.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const BadgeHomeAddrIcon = ({ 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 CheckboxFilledIcon = ({ className = "" }: IconProps) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <rect width="16" height="16" rx="4" fill="currentColor" />
+    <path d="M14.8161 1C13.1423 2.42824 11.7356 4.37456 10.6806 6.51692C9.68193 8.56126 8.99268 10.8016 8.69729 13H4.81498V12.972L3.12701 8.56126L2.4659 6.83897L2.18457 6.09685L3.83033 6.05484C4.26639 6.05484 4.66025 6.30688 4.75871 6.68495L5.72929 8.63127L6.517 10.1995L6.728 10.6196C6.91086 10.2415 7.09372 9.87748 7.29065 9.51342C8.34563 7.49708 9.49907 5.67678 10.8635 4.13652C11.6512 3.25438 12.5093 2.45624 13.4658 1.77013C13.8456 1.50408 14.2254 1.25204 14.6333 1.014H14.8161V1Z" fill="white" />
+  </svg>
+);
+

package/src/index.ts

@@ -39,18 +39,20 @@ 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";
+export { default as ChatFooter } from "./ui/ChatFooter";
+export { default as ChatHeader } from "./ui/ChatHeader";
+export { default as ChatIdentity } from "./ui/ChatIdentity";
+export { default as ChatMessageItem } from "./ui/ChatMessageItem";
+export { default as ChatScroll } from "./ui/ChatScroll";
+export { default as ChatThreadItem } from "./ui/ChatThreadItem";
+export type { ChatThreadStatus } from "./ui/ChatThreadItem";
+export { default as ChatListHeader } from "./ui/ChatListHeader";
+export { default as ChatInquiryBar } from "./ui/ChatInquiryBar";
+export { default as TypingIndicator } from "./ui/TypingIndicator";
+export { default as ReplyCard } from "./ui/ReplyCard";
+export { default as ChatSpinner } from "./ui/ChatSpinner";
+export { default as ChatKebabMenu } from "./ui/ChatKebabMenu";
+export type { ChatKebabMenuProps } from "./ui/ChatKebabMenu";
 
 // ── Utilities ─────────────────────────────────────────────────────────────────
 export { cn } from "./utils/cn";