@banbox/chat 1.0.0

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@banbox/chat",
+  "version": "1.0.0",
+  "description": "Banbox Chat UI components — reusable across all Banbox React/Next.js projects",
+  "type": "module",
+  "license": "UNLICENSED",
+  "private": false,
+
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+
+  "sideEffects": false,
+
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run typecheck && npm run build"
+  },
+
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OCEANGET/banbox-chat.git"
+  },
+
+  "bugs": {
+    "url": "https://github.com/OCEANGET/banbox-chat/issues"
+  },
+
+  "homepage": "https://github.com/OCEANGET/banbox-chat#readme",
+
+  "keywords": ["react", "nextjs", "chat", "ui", "banbox", "typescript"],
+
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "framer-motion": ">=10"
+  },
+
+  "peerDependenciesMeta": {
+    "framer-motion": {
+      "optional": false
+    }
+  },
+
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  },
+
+  "devDependencies": {
+    "@types/react": "^19.2.16",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.0",
+    "typescript": "~6.0.3"
+  }
+}

package/src/adapter/types.ts

@@ -0,0 +1,146 @@
+// @banbox/chat — Adapter Interfaces
+// ─────────────────────────────────────────────────────────────────────────────
+// This file defines the contract between the chat package and the host app.
+//
+// The host app implements ChatAdapter with its own data source
+// (demo data, REST API, WebSocket, etc.) and passes it to <ChatRoot />.
+//
+// To switch from demo → real API:
+//   const adapter = createApiAdapter({ baseUrl: "/api", token });
+//   <ChatRoot adapter={adapter} ... />
+// ─────────────────────────────────────────────────────────────────────────────
+
+import type React from "react";
+import type { Thread, Message, SendPayload, Reference } from "../types";
+
+/** Options for the kebab menu (⋮) rendered by the host app */
+export type KebabMenuOpts = {
+  pinned: boolean;
+  onPinToggle: () => void;
+  onDelete: () => void;
+};
+
+/** Options for a toast notification triggered by the package */
+export type ToastOpts = {
+  type?: "success" | "error" | "info" | "warning";
+  title: string;
+  message?: string;
+};
+
+/**
+ * The unified data adapter.
+ *
+ * Implement this interface in your host app and pass it to <ChatRoot adapter={...} />.
+ *
+ * ### Demo implementation (local state):
+ * ```ts
+ * const adapter: ChatAdapter = {
+ *   threads: { list: getThreads, subscribe: subscribeThreads, pin, delete: deleteThread },
+ *   messages: { list: getMessages, send: handleSend },
+ * };
+ * ```
+ *
+ * ### Real API implementation:
+ * ```ts
+ * const adapter: ChatAdapter = {
+ *   threads: {
+ *     list: (ref) => cachedThreads,           // from polling/socket
+ *     subscribe: (cb) => socket.on("threads", cb),
+ *     pin: (id, p) => api.patch(`/threads/${id}`, { pinned: p }),
+ *     delete: (id) => api.delete(`/threads/${id}`),
+ *   },
+ *   messages: {
+ *     list: (tid) => cachedMessages[tid] ?? [],
+ *     subscribe: (tid, cb) => socket.on(`messages:${tid}`, cb),
+ *     send: (tid, payload) => api.post(`/threads/${tid}/messages`, payload),
+ *   },
+ * };
+ * ```
+ */
+export interface ChatAdapter {
+  threads: {
+    /**
+     * Returns the current list of threads.
+     * Called synchronously; keep a local cache if using async data.
+     */
+    list: (reference?: Reference) => Thread[];
+
+    /**
+     * Subscribe to thread list changes.
+     * Call the callback whenever threads change (new msg, pin, delete, etc.)
+     * Returns an unsubscribe function.
+     *
+     * For WebSocket: `(cb) => socket.on("threads:update", cb)`
+     */
+    subscribe: (cb: () => void) => () => void;
+
+    /**
+     * Pin or unpin a thread.
+     * @param id Thread ID
+     * @param pinned True to pin, false to unpin
+     */
+    pin: (id: string, pinned: boolean) => Promise<void> | void;
+
+    /**
+     * Delete a thread permanently.
+     */
+    delete: (id: string) => Promise<void> | void;
+
+    /**
+     * Mark a thread as read (optional).
+     * Called when the user opens a thread.
+     */
+    markRead?: (id: string) => Promise<void> | void;
+  };
+
+  messages: {
+    /**
+     * Returns the current messages for a thread.
+     * Called synchronously; keep a local cache if using async data.
+     */
+    list: (threadId: string) => Message[];
+
+    /**
+     * Subscribe to message changes for a specific thread.
+     * Returns an unsubscribe function.
+     *
+     * For WebSocket: `(tid, cb) => socket.on(`messages:${tid}`, cb)`
+     * For demo: optional (UI re-renders via onAfterSend)
+     */
+    subscribe?: (threadId: string, cb: () => void) => () => void;
+
+    /**
+     * Send a message.
+     * The payload is a discriminated union covering all message types.
+     * Mutate your local cache + emit to server here.
+     */
+    send: (threadId: string, payload: SendPayload) => Promise<void> | void;
+  };
+}
+
+/**
+ * UI-level callbacks — side-effects that the host app controls.
+ *
+ * These are NOT data operations; they are UI actions that the package
+ * delegates back to the host app (so the package stays decoupled from
+ * the host app's routing, notification, and menu systems).
+ */
+export interface ChatUICallbacks {
+  /**
+   * Show a toast notification.
+   * Use your app's existing toast system (react-toastify, sonner, etc.)
+   */
+  showToast?: (opts: ToastOpts) => void;
+
+  /**
+   * Navigate to an order or inquiry page.
+   * Called when the user clicks "View Order" / "View Inquiry" in the chat.
+   */
+  onNavigate?: (route: { type: "order" | "inquiry"; id: string }) => void;
+
+  /**
+   * Render the kebab (⋮) menu in the chat header.
+   * Return your app's custom dropdown component here.
+   */
+  renderKebabMenu?: (opts: KebabMenuOpts) => React.ReactNode;
+}

package/src/chat/ChatImagePreviewModal.tsx

@@ -0,0 +1,194 @@
+// components/modals/ChatImagePreviewModal.tsx
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import type { FC, JSX } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useGallery } from "../contexts/GalleryContext";
+import Portal from "../ui/Portal";
+
+/* =======================
+   Types
+======================= */
+interface ChatImagePreviewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+/* =======================
+   Slide direction variants
+======================= */
+const slideVariants = {
+  enter: (dir: number) => ({
+    x: dir > 0 ? 300 : -300,
+    opacity: 0,
+  }),
+  center: { x: 0, opacity: 1 },
+  exit: (dir: number) => ({
+    x: dir > 0 ? -300 : 300,
+    opacity: 0,
+  }),
+};
+
+/* =======================
+   Component
+======================= */
+const ChatImagePreviewModal: FC<ChatImagePreviewModalProps> = ({
+  isOpen,
+  onClose,
+}): JSX.Element => {
+  const { images, currentIndex, setCurrentIndex } = useGallery();
+
+  const current = currentIndex ?? 0;
+  const total = images?.length ?? 0;
+  const hasPrev = current > 0;
+  const hasNext = current < total - 1;
+
+  /* Track slide direction for animation */
+  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]);
+
+  /* Keyboard navigation */
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e: KeyboardEvent) => {
+      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 (
+    <Portal>
+      <AnimatePresence>
+        {isOpen && total > 0 && (
+          <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}
+          >
+            {/* Content wrapper — prevents overlay click-through */}
+            <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()}
+            >
+              {/* Fixed 850×850 frame */}
+              <div
+                className="relative flex items-center justify-center overflow-hidden rounded-[6px] bg-white"
+                style={{ width: 850, height: 850 }}
+              >
+                {/* Sliding image */}
+                <AnimatePresence mode="wait" initial={false} custom={direction}>
+                  <motion.img
+                    key={current}
+                    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}
+                  />
+                </AnimatePresence>
+
+                {/* Left arrow — always visible, disabled when no prev */}
+                <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"
+                >
+                  <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
+                    <path
+                      d="M15 18L9 12L15 6"
+                      stroke="#2C2C2C"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </button>
+
+                {/* Right arrow — always visible, disabled when no next */}
+                <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"
+                >
+                  <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
+                    <path
+                      d="M9 18L15 12L9 6"
+                      stroke="#2C2C2C"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              {/* Close button — top-right outside the image */}
+              <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"
+              >
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                  <path
+                    d="M18 6L6 18"
+                    stroke="black"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M6 6L18 18"
+                    stroke="black"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </Portal>
+  );
+};
+
+export default ChatImagePreviewModal;

package/src/chat/ChatRoot.tsx

@@ -0,0 +1,67 @@
+// chat/ChatRoot.tsx
+"use client";
+import { AnimatePresence } from "framer-motion";
+import { createPortal } from "react-dom";
+import { useChatUI } from "../contexts/ChatUIContext";
+import { useDisableBodyScroll } from "../hooks/useDisableBodyScroll";
+import { GalleryProvider } from "../contexts/GalleryProvider";
+import type { ChatAdapter, ChatUICallbacks } from "../adapter/types";
+import InboxPopup from "./InboxPopup";
+import SinglePopup from "./SinglePopup";
+
+export type ChatRootProps = {
+  /**
+   * The unified data adapter — provides all threads, messages, and send logic.
+   *
+   * Implement this in your host app:
+   * ```ts
+   * const adapter = createDemoChatAdapter();  // or createApiChatAdapter(...)
+   * ```
+   */
+  adapter: ChatAdapter;
+
+  /**
+   * Optional UI callbacks — controls toast notifications, navigation,
+   * and the kebab (⋮) menu renderer.
+   *
+   * These delegate UI side-effects back to the host app so the package
+   * stays decoupled from the host's routing and notification systems.
+   */
+  uiCallbacks?: ChatUICallbacks;
+};
+
+export default function ChatRoot({ adapter, uiCallbacks }: ChatRootProps) {
+  const { isOpen, variant } = useChatUI();
+
+  // Lock page scroll whenever the chat is open
+  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.
+    <GalleryProvider>
+      <AnimatePresence mode="wait">
+        {isOpen && (
+          variant === "inbox" ? (
+            <InboxPopup
+              key="inbox"
+              adapter={adapter}
+              uiCallbacks={uiCallbacks}
+            />
+          ) : (
+            <SinglePopup
+              key="single"
+              adapter={adapter}
+              uiCallbacks={uiCallbacks}
+            />
+          )
+        )}
+      </AnimatePresence>
+    </GalleryProvider>,
+    document.body,
+  );
+}