@banbox/chat 1.0.0

package/src/chat/InboxPopup.tsx

@@ -0,0 +1,312 @@
+// chat/InboxPopup.tsx
+"use client";
+
+import { motion } from "framer-motion";
+import React, { useCallback, useEffect, useState } from "react";
+
+import ChatConfirmModal from "../modals/chat/ChatConfirmModal";
+import { useChatUI } from "../contexts/ChatUIContext";
+import { useGallery } from "../contexts/GalleryContext";
+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 ChatSpinner from "../ui/chat/ChatSpinner";
+import ChatImagePreviewModal from "./ChatImagePreviewModal";
+
+import type { Thread, Message, MessageRef } from "../types";
+import type { ChatAdapter, ChatUICallbacks } from "../adapter/types";
+
+/* =======================
+   Props
+======================= */
+export type InboxPopupProps = {
+  /** The unified data adapter — provides threads, messages, and send */
+  adapter: ChatAdapter;
+  /** UI-level callbacks (toast, navigation, kebab menu) */
+  uiCallbacks?: ChatUICallbacks;
+};
+
+/* =======================
+   Constants
+======================= */
+const avatarBgByInitial: Record<string, string> = {
+  K: "#FFE7DB", A: "#FFE5DA", F: "#E8F7FF", B: "#F0EDEB", b: "#F0EDEB",
+};
+
+/* =======================
+   Component
+======================= */
+const InboxPopup: React.FC<InboxPopupProps> = ({ adapter, uiCallbacks }) => {
+  const { close, selectThread, selectedThreadId, reference } = useChatUI();
+  const { isOpen: isGalleryOpen, closeGallery } = useGallery();
+
+  /* ─── Thread list ─── */
+  const [threads, setThreads] = useState<Thread[]>(() => adapter.threads.list(reference));
+  const refreshThreads = useCallback(
+    () => setThreads(adapter.threads.list(reference)),
+    [adapter, reference],
+  );
+
+  useEffect(() => {
+    // Immediate sync on mount / reference change
+    let rafId = 0;
+    rafId = requestAnimationFrame(refreshThreads);
+    const unsub = adapter.threads.subscribe(refreshThreads);
+    return () => { cancelAnimationFrame(rafId); unsub(); };
+  }, [adapter, reference, refreshThreads]);
+
+  /* ─── Active thread & messages ─── */
+  const [rev, setRev] = useState(0);
+  const [replyTo, setReplyTo] = useState<MessageRef | undefined>(undefined);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const activeId = selectedThreadId ?? threads[0]?.id;
+  const activeThread = threads.find((t) => t.id === activeId);
+
+  const [messages, setMessages] = useState<Message[]>(() =>
+    activeId ? adapter.messages.list(activeId) : [],
+  );
+
+  // Refresh messages when active thread changes or rev bumps
+  useEffect(() => {
+    if (activeId) setMessages(adapter.messages.list(activeId));
+  }, [activeId, rev, adapter]);
+
+  // Subscribe to real-time message updates for the active thread
+  useEffect(() => {
+    if (!activeId || !adapter.messages.subscribe) return;
+    const unsub = adapter.messages.subscribe(activeId, () => {
+      setMessages(adapter.messages.list(activeId));
+    });
+    return unsub;
+  }, [activeId, adapter]);
+
+  /* ─── Derived UI values ─── */
+  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" : undefined;
+  const idButtonLabel = activeThread?.orderId ? "View Order" : activeThread?.inquiryId ? "View Inquiry" : undefined;
+  const idValue = activeThread?.orderId ?? activeThread?.inquiryId ?? undefined;
+
+  /* ─── Loading state ─── */
+  const [showDelete, setShowDelete] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const scrollKey = `${activeId}-${messages.length}-${rev}`;
+
+  const prevActiveIdRef = React.useRef(activeId);
+  useEffect(() => {
+    if (prevActiveIdRef.current !== activeId) {
+      prevActiveIdRef.current = activeId;
+      setIsLoading(true);
+      const t = setTimeout(() => setIsLoading(false), 300);
+      // Mark thread as read when switching to it
+      if (activeId) adapter.threads.markRead?.(activeId);
+      return () => clearTimeout(t);
+    }
+  }, [activeId, adapter]);
+
+  /* ─── Reply helper ─── */
+  const toRef = (m: Message): MessageRef => ({
+    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,
+  });
+
+  /* ─── Delete ─── */
+  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(undefined);
+    setShowDelete(false);
+    uiCallbacks?.showToast?.({
+      type: "success",
+      title: "Chat Deleted",
+      message: "The chat has been deleted successfully.",
+    });
+  };
+
+  return (
+    <div className="fixed bottom-4 right-[40px] z-50">
+      {/* Backdrop */}
+      <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 }}
+      />
+
+      {/* Popup wrapper */}
+      <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" }}
+      >
+        <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",
+          }}
+        >
+          <div className="grid h-full min-h-0 grid-cols-[1fr_350px]">
+            {/* LEFT — Message area */}
+            <div className="flex h-full min-h-0 flex-col border-r border-[#9BBCCF]">
+              <div className="h-[64px] shrink-0">
+                <ChatHeader
+                  left={
+                    activeThread?.avatarSrc ? (
+                      <ChatIdentity variant="avatar" src={activeThread.avatarSrc} online={online} title={title} subtitle={subtitle} verified={isVerified} subtitleVariant="muted" />
+                    ) : (
+                      <ChatIdentity variant="initial" initial={initial} bg={avatarBg} online={online} title={title} subtitle={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
+                  }
+                />
+              </div>
+
+              {idValue && (
+                <div className="shrink-0">
+                  <ChatInquiryBar
+                    id={idValue}
+                    label={idLabel}
+                    buttonLabel={idButtonLabel}
+                    onView={() => {
+                      const type = activeThread?.orderId ? "order" : "inquiry";
+                      uiCallbacks?.onNavigate?.({ type, id: idValue });
+                    }}
+                  />
+                </div>
+              )}
+
+              <div className="flex-1 min-h-0">
+                <div className="relative h-full min-h-0">
+                  {isLoading ? (
+                    <ChatSpinner className="h-full min-h-[200px]" />
+                  ) : (
+                    <ChatScroll className="h-full pb-10" bottomAlignWhenShort={false} scrollKey={scrollKey}>
+                      {messages.map((m, idx) => {
+                        const mine = m.author === "you";
+                        const isLast = idx === messages.length - 1;
+                        return (
+                          <ChatMessageItem
+                            key={m.id}
+                            id={m.id}
+                            mine={mine}
+                            time={m.time ?? ""}
+                            authorInitial={typeof m.author === "string" ? m.author : "U"}
+                            avatarBg={avatarBg}
+                            text={m.text ?? m.content}
+                            businessCard={m.businessCard as Parameters<typeof ChatMessageItem>[0]["businessCard"]}
+                            addressCard={m.addressCard as Parameters<typeof ChatMessageItem>[0]["addressCard"]}
+                            images={m.images}
+                            files={m.files}
+                            audio={m.audio}
+                            replyTo={m.replyTo}
+                            showStatus={isLast}
+                            status={activeThread?.status?.kind === "seen" ? "Seen" : "Delivered"}
+                            onReply={() => setReplyTo(toRef(m))}
+                            initialSrc={m.avatarSrc}
+                          />
+                        );
+                      })}
+                    </ChatScroll>
+                  )}
+
+                  <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-center px-4 pb-2 pt-1 bg-white">
+                    <TypingIndicator className="pointer-events-auto" />
+                  </div>
+                </div>
+              </div>
+
+              <div className="shrink-0">
+                <ChatFooter
+                  key={activeId}
+                  replyTo={replyTo}
+                  clearReply={() => setReplyTo(undefined)}
+                  onAfterSend={() => setRev((v) => v + 1)}
+                  onSend={(payload) => {
+                    if (activeId) adapter.messages.send(activeId, payload);
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* RIGHT — Thread list */}
+            <div className="h-full min-h-0">
+              <ChatListHeader onClose={close} onSearchChange={(val) => setSearchQuery(val)} />
+              <div className="h-full overflow-y-auto custom-scroll">
+                {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: ChatThreadStatus = t.status ?? (t.unread && t.unread > 0 ? { kind: "new", count: t.unread } : { kind: "seen" });
+                    return (
+                      <ChatThreadItem
+                        key={t.id}
+                        onClick={() => { setReplyTo(undefined); 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={status}
+                        avatarText={t.avatarText ?? ""}
+                        avatarSrc={t.avatarSrc}
+                      />
+                    );
+                  })}
+              </div>
+            </div>
+          </div>
+
+          <ChatConfirmModal open={showDelete} onClose={() => setShowDelete(false)} onConfirm={handleConfirmDelete} />
+          <ChatImagePreviewModal isOpen={isGalleryOpen} onClose={closeGallery} />
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default InboxPopup;

package/src/chat/SinglePopup.tsx

@@ -0,0 +1,240 @@
+// chat/SinglePopup.tsx
+"use client";
+
+import { motion } from "framer-motion";
+import React from "react";
+
+import { useChatUI } from "../contexts/ChatUIContext";
+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 ChatSpinner from "../ui/chat/ChatSpinner";
+import TypingIndicator from "../ui/chat/TypingIndicator";
+
+import type { Thread, Message, MessageRef, Reference } from "../types";
+import type { ChatAdapter, ChatUICallbacks } from "../adapter/types";
+
+/* ─────────────────────────────────────────────────────────────
+   Helpers
+────────────────────────────────────────────────────────────── */
+
+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 ?? "");
+  }
+  return (
+    (referenceId &&
+      (threads.find((t) => t.id === referenceId)?.id ||
+        threads.find((t) => t.inquiryId === referenceId)?.id)) ||
+    (threads.length ? threads[0].id : "")
+  );
+}
+
+function toRef(m: Message): MessageRef {
+  return {
+    id: m.id,
+    author: m.author,
+    time: m.time,
+    text: m.text ?? m.content,
+    images: m.images,
+    files: m.files,
+    audio: m.audio,
+  };
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Props
+────────────────────────────────────────────────────────────── */
+
+export type SinglePopupProps = {
+  /** The unified data adapter */
+  adapter: ChatAdapter;
+  /** UI-level callbacks (toast, navigation) */
+  uiCallbacks?: ChatUICallbacks;
+};
+
+/* ─────────────────────────────────────────────────────────────
+   Component
+────────────────────────────────────────────────────────────── */
+
+const SinglePopup: React.FC<SinglePopupProps> = ({ adapter, uiCallbacks }) => {
+  const { close, reference } = useChatUI();
+
+  const threads = adapter.threads.list(reference);
+  const initialThreadId = React.useMemo(
+    () => coalesceThreadId(reference, threads),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [reference],
+  );
+  const [activeId] = React.useState<string>(initialThreadId);
+
+  const activeThread: Thread | undefined = threads.find((t) => t.id === activeId);
+  const isVerified = activeThread?.badge === true;
+
+  const meta = (reference?.meta ?? {}) as {
+    initial?: string;
+    title?: string;
+    online?: boolean;
+    subtitle?: string;
+  };
+
+  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";
+
+  /* ─── Messages ─── */
+  const [messages, setMessages] = React.useState<Message[]>(() =>
+    activeId ? adapter.messages.list(activeId) : [],
+  );
+  const [scrollKey, setScrollKey] = React.useState<number>(0);
+  const [replyTo, setReplyTo] = React.useState<MessageRef | undefined>(undefined);
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  // Brief loading flash on initial open
+  React.useEffect(() => {
+    const t = setTimeout(() => setIsLoading(false), 300);
+    return () => clearTimeout(t);
+  }, []);
+
+  // Subscribe to real-time updates
+  React.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 = React.useCallback(() => {
+    setMessages(adapter.messages.list(activeId));
+    setScrollKey(Date.now());
+    setReplyTo(undefined);
+  }, [activeId, adapter]);
+
+  const statusText = activeThread?.status?.kind === "seen" ? "Seen" : "Delivered";
+
+  /* ─── Unused callbacks acknowledged ─── */
+  void uiCallbacks;
+
+  return (
+    <div className="fixed bottom-4 right-[40px] z-50">
+      {/* Backdrop */}
+      <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 }}
+      />
+
+      {/* Outer gradient wrapper */}
+      <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" }}
+      >
+        {/* Inner card */}
+        <div className="flex h-full w-full flex-col overflow-hidden rounded-[18px] bg-white">
+          {/* Header */}
+          <div className="h-[64px] shrink-0">
+            <ChatHeader
+              left={
+                <ChatIdentity
+                  variant="initial"
+                  initial={initial}
+                  bg="#FFE5DA"
+                  online={online}
+                  title={title}
+                  subtitle={subtitle}
+                  verified={isVerified}
+                  subtitleVariant="muted"
+                />
+              }
+              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-[#ff5301] cursor-pointer"
+                >
+                  <ChatXIcon className="h-6 w-6" />
+                </button>
+              }
+            />
+          </div>
+
+          {/* Messages */}
+          <div className="relative flex-1 min-h-0">
+            {isLoading ? (
+              <ChatSpinner className="h-full" />
+            ) : (
+              <ChatScroll className="h-full" bottomAlignWhenShort={false} scrollKey={scrollKey}>
+                {messages.map((m, idx) => {
+                  const mine = m.author === "you";
+                  const isLast = idx === messages.length - 1;
+                  return (
+                    <ChatMessageItem
+                      key={m.id}
+                      id={m.id}
+                      mine={mine}
+                      time={m.time ?? ""}
+                      authorInitial={typeof m.author === "string" ? m.author : "U"}
+                      text={m.text ?? m.content}
+                      businessCard={m.businessCard as Parameters<typeof ChatMessageItem>[0]["businessCard"]}
+                      addressCard={m.addressCard as Parameters<typeof ChatMessageItem>[0]["addressCard"]}
+                      images={m.images}
+                      files={m.files}
+                      audio={m.audio}
+                      replyTo={m.replyTo}
+                      initialSrc={m.avatarSrc}
+                      showStatus={isLast}
+                      status={statusText}
+                      onReply={() => setReplyTo(toRef(m))}
+                    />
+                  );
+                })}
+              </ChatScroll>
+            )}
+
+            {/* Typing indicator */}
+            <div className="pointer-events-none absolute bottom-0 left-0 w-full bg-white px-4 pb-2">
+              <div className="pointer-events-auto flex items-center justify-start">
+                <TypingIndicator />
+              </div>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="shrink-0">
+            <ChatFooter
+              variant="single"
+              replyTo={replyTo}
+              clearReply={() => setReplyTo(undefined)}
+              onAfterSend={handleAfterSend}
+              onSend={(payload) => {
+                if (activeId) adapter.messages.send(activeId, payload);
+              }}
+            />
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default SinglePopup;

package/src/contexts/ChatUIContext.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { createContext, useContext } from "react";
+import type { Reference } from "../types";
+
+// Re-export Reference so consumers who import from this context still work.
+export type { Reference };
+
+export type ChatVariant = "inbox" | "single";
+
+export type ChatUIState = {
+  isOpen: boolean;
+  variant: ChatVariant;
+  reference?: Reference;
+  selectedThreadId?: string | null;
+
+  openInbox: (opts?: { reference?: Reference; threadId?: string }) => void;
+  openSingle: (opts?: { reference?: Reference }) => void;
+  close: () => void;
+  selectThread: (id: string | null) => void;
+};
+
+export const ChatUIContext = createContext<ChatUIState | null>(null);
+
+export function useChatUI() {
+  const ctx = useContext(ChatUIContext);
+  if (!ctx) {
+    throw new Error("useChatUI must be used within ChatUIProvider");
+  }
+  return ctx;
+}

package/src/contexts/ChatUIProvider.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import type { ChatUIState, ChatVariant, Reference } from "./ChatUIContext";
+import { ChatUIContext } from "./ChatUIContext";
+
+export function ChatUIProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setOpen] = useState(false);
+  const [variant, setVariant] = useState<ChatVariant>("inbox");
+  const [reference, setReference] = useState<Reference | undefined>();
+  const [selectedThreadId, setSelected] = useState<string | null>(null);
+
+  const api = useMemo<ChatUIState>(
+    () => ({
+      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 <ChatUIContext.Provider value={api}>{children}</ChatUIContext.Provider>;
+}

package/src/contexts/GalleryContext.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+// New interface for media items
+export interface GalleryMedia {
+  type: "image" | "video" | "pdf";
+  url: string;
+  altText?: string;
+  /** Per-item upload date shown in the gallery preview */
+  uploadDate?: string | null;
+}
+
+// Updated context type
+export interface GalleryContextType {
+  images: GalleryMedia[];
+  currentIndex: number | null;
+  isOpen: boolean;
+  uploadDate?: string | null;
+  showDots?: boolean;
+  setImages: (imgs: GalleryMedia[]) => void;
+  setCurrentIndex: (index: number) => void;
+  setUploadDate: (date: string | null) => void;
+  openGallery: (imgs: GalleryMedia[], startIndex?: number, uploadDate?: string | null, showDots?: boolean) => void;
+  closeGallery: () => void;
+  next: () => void;
+  prev: () => void;
+}
+
+export const GalleryContext = createContext<GalleryContextType | undefined>(
+  undefined,
+);
+
+export const useGallery = (): GalleryContextType => {
+  const context = useContext(GalleryContext);
+  if (!context) {
+    throw new Error("useGallery must be used within a GalleryProvider");
+  }
+  return context;
+};