@hamzasaleemorg/convex-comments 1.0.0

package/dist/react/CommentsProvider.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Comments Context Provider
+ *
+ * Provides the Comments API instance to all child components.
+ */
+import { createContext, useContext, useMemo } from "react";
+// ============================================================================
+// Default Theme
+// ============================================================================
+const defaultStyles = {
+    accentColor: "#3b82f6",
+    backgroundColor: "#ffffff",
+    textColor: "#1f2937",
+    textColorMuted: "#6b7280",
+    borderColor: "#e5e7eb",
+    borderRadius: "8px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    fontSize: "14px",
+};
+// ============================================================================
+// Context
+// ============================================================================
+const CommentsContext = createContext(null);
+/**
+ * Provider component that supplies comments configuration to all child components.
+ *
+ * Usage:
+ * ```tsx
+ * <CommentsProvider
+ *   userId={currentUserId}
+ *   resolveUser={async (id) => ({ name: users[id].name, avatar: users[id].avatar })}
+ *   reactionChoices={["👍", "❤️", "😄", "🎉", "😮", "😢"]}
+ *   styles={{
+ *     accentColor: "#8b5cf6",
+ *     borderRadius: "12px",
+ *   }}
+ * >
+ *   <Comments threads={threads} />
+ * </CommentsProvider>
+ * ```
+ *
+ * CSS Variables (can be set in your CSS):
+ * - --comments-accent-color
+ * - --comments-bg-color
+ * - --comments-text-color
+ * - --comments-text-color-muted
+ * - --comments-border-color
+ * - --comments-border-radius
+ * - --comments-font-family
+ * - --comments-font-size
+ */
+export function CommentsProvider({ userId, resolveUser, reactionChoices = ["👍", "❤️", "😄", "🎉", "😮", "😢", "👀", "🚀"], canModerate = false, styles, className, children, }) {
+    const mergedStyles = useMemo(() => ({
+        ...defaultStyles,
+        ...styles,
+    }), [styles]);
+    const cssVars = useMemo(() => ({
+        "--comments-accent-color": mergedStyles.accentColor,
+        "--comments-bg-color": mergedStyles.backgroundColor,
+        "--comments-text-color": mergedStyles.textColor,
+        "--comments-text-color-muted": mergedStyles.textColorMuted,
+        "--comments-border-color": mergedStyles.borderColor,
+        "--comments-border-radius": mergedStyles.borderRadius,
+        "--comments-font-family": mergedStyles.fontFamily,
+        "--comments-font-size": mergedStyles.fontSize,
+    }), [mergedStyles]);
+    const value = useMemo(() => ({
+        userId,
+        resolveUser,
+        reactionChoices,
+        canModerate,
+        styles: mergedStyles,
+        cssVars,
+    }), [userId, resolveUser, reactionChoices, canModerate, mergedStyles, cssVars]);
+    const wrapperStyle = {
+        ...cssVars,
+        fontFamily: mergedStyles.fontFamily,
+        fontSize: mergedStyles.fontSize,
+        color: mergedStyles.textColor,
+    };
+    return (_jsx(CommentsContext.Provider, { value: value, children: _jsx("div", { className: `comments-provider ${className ?? ""}`, style: wrapperStyle, "data-comments-provider": "", children: children }) }));
+}
+// ============================================================================
+// Hook
+// ============================================================================
+/**
+ * Hook to access the comments context.
+ * Must be used within a CommentsProvider.
+ */
+export function useComments() {
+    const context = useContext(CommentsContext);
+    if (!context) {
+        throw new Error("useComments must be used within a CommentsProvider");
+    }
+    return context;
+}
+//# sourceMappingURL=CommentsProvider.js.map

package/dist/react/CommentsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentsProvider.js","sourceRoot":"","sources":["../../src/react/CommentsProvider.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAsC,MAAM,OAAO,CAAC;AAwC/F,+EAA+E;AAC/E,gBAAgB;AAChB,+EAA+E;AAE/E,MAAM,aAAa,GAA6B;IAC5C,WAAW,EAAE,SAAS;IACtB,eAAe,EAAE,SAAS;IAC1B,SAAS,EAAE,SAAS;IACpB,cAAc,EAAE,SAAS;IACzB,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,sCAAsC;IAClD,QAAQ,EAAE,MAAM;CACnB,CAAC;AAEF,+EAA+E;AAC/E,UAAU;AACV,+EAA+E;AAE/E,MAAM,eAAe,GAAG,aAAa,CAA8B,IAAI,CAAC,CAAC;AA0BzE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC7B,MAAM,EACN,WAAW,EACX,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAClE,WAAW,GAAG,KAAK,EACnB,MAAM,EACN,SAAS,EACT,QAAQ,GACY;IACpB,MAAM,YAAY,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,CAAC;QACH,GAAG,aAAa;QAChB,GAAG,MAAM;KACZ,CAAC,EACF,CAAC,MAAM,CAAC,CACX,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACH,yBAAyB,EAAE,YAAY,CAAC,WAAW;QACnD,qBAAqB,EAAE,YAAY,CAAC,eAAe;QACnD,uBAAuB,EAAE,YAAY,CAAC,SAAS;QAC/C,6BAA6B,EAAE,YAAY,CAAC,cAAc;QAC1D,yBAAyB,EAAE,YAAY,CAAC,WAAW;QACnD,0BAA0B,EAAE,YAAY,CAAC,YAAY;QACrD,wBAAwB,EAAE,YAAY,CAAC,UAAU;QACjD,sBAAsB,EAAE,YAAY,CAAC,QAAQ;KAChD,CAAC,EACF,CAAC,YAAY,CAAC,CACjB,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,CAAC;QACH,MAAM;QACN,WAAW;QACX,eAAe;QACf,WAAW;QACX,MAAM,EAAE,YAAY;QACpB,OAAO;KACV,CAAC,EACF,CAAC,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,CAAC,CAC7E,CAAC;IAEF,MAAM,YAAY,GAAkB;QAChC,GAAG,OAAwB;QAC3B,UAAU,EAAE,YAAY,CAAC,UAAU;QACnC,QAAQ,EAAE,YAAY,CAAC,QAAQ;QAC/B,KAAK,EAAE,YAAY,CAAC,SAAS;KAChC,CAAC;IAEF,OAAO,CACH,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAClC,cACI,SAAS,EAAE,qBAAqB,SAAS,IAAI,EAAE,EAAE,EACjD,KAAK,EAAE,YAAY,4BACI,EAAE,YAExB,QAAQ,GACP,GACiB,CAC9B,CAAC;AACN,CAAC;AAED,+EAA+E;AAC/E,OAAO;AACP,+EAA+E;AAE/E;;;GAGG;AACH,MAAM,UAAU,WAAW;IACvB,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAC5C,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;IAC1E,CAAC;IACD,OAAO,OAAO,CAAC;AACnB,CAAC"}

package/dist/react/ReactionPicker.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ReactionPicker Component
+ *
+ * A popup picker for selecting emoji reactions.
+ */
+export interface ReactionPickerProps {
+    /** Callback when an emoji is selected */
+    onSelect: (emoji: string) => void;
+    /** Callback when the picker is closed */
+    onClose?: () => void;
+    /** Custom reaction choices (overrides provider) */
+    reactionChoices?: string[];
+    /** CSS class name */
+    className?: string;
+}
+/**
+ * Emoji reaction picker popup.
+ *
+ * Usage:
+ * ```tsx
+ * <ReactionPicker
+ *   onSelect={(emoji) => toggleReaction({ messageId, emoji })}
+ *   onClose={() => setShowPicker(false)}
+ * />
+ * ```
+ */
+export declare function ReactionPicker({ onSelect, onClose, reactionChoices: customChoices, className, }: ReactionPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReactionPicker.d.ts.map

package/dist/react/ReactionPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionPicker.d.ts","sourceRoot":"","sources":["../../src/react/ReactionPicker.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAQH,MAAM,WAAW,mBAAmB;IAChC,yCAAyC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,eAAe,EAAE,aAAa,EAC9B,SAAc,GACjB,EAAE,mBAAmB,2CAmDrB"}

package/dist/react/ReactionPicker.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ReactionPicker Component
+ *
+ * A popup picker for selecting emoji reactions.
+ */
+import { useComments } from "./CommentsProvider";
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * Emoji reaction picker popup.
+ *
+ * Usage:
+ * ```tsx
+ * <ReactionPicker
+ *   onSelect={(emoji) => toggleReaction({ messageId, emoji })}
+ *   onClose={() => setShowPicker(false)}
+ * />
+ * ```
+ */
+export function ReactionPicker({ onSelect, onClose, reactionChoices: customChoices, className = "", }) {
+    const { reactionChoices: providerChoices, styles } = useComments();
+    const choices = customChoices ?? providerChoices;
+    return (_jsx("div", { className: `reaction-picker ${className}`, style: {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "4px",
+            padding: "8px",
+            backgroundColor: "white",
+            borderRadius: styles?.borderRadius ?? "8px",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+            border: "1px solid #e5e7eb",
+            maxWidth: "200px",
+        }, children: choices.map((emoji) => (_jsx("button", { onClick: () => {
+                onSelect(emoji);
+                onClose?.();
+            }, style: {
+                width: "32px",
+                height: "32px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: "none",
+                background: "transparent",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "18px",
+                transition: "background-color 0.15s",
+            }, onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "#f3f4f6";
+            }, onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+            }, children: emoji }, emoji))) }));
+}
+//# sourceMappingURL=ReactionPicker.js.map

package/dist/react/ReactionPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactionPicker.js","sourceRoot":"","sources":["../../src/react/ReactionPicker.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAiBjD,+EAA+E;AAC/E,YAAY;AACZ,+EAA+E;AAE/E;;;;;;;;;;GAUG;AACH,MAAM,UAAU,cAAc,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,eAAe,EAAE,aAAa,EAC9B,SAAS,GAAG,EAAE,GACI;IAClB,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACnE,MAAM,OAAO,GAAG,aAAa,IAAI,eAAe,CAAC;IAEjD,OAAO,CACH,cACI,SAAS,EAAE,mBAAmB,SAAS,EAAE,EACzC,KAAK,EAAE;YACH,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,MAAM;YAChB,GAAG,EAAE,KAAK;YACV,OAAO,EAAE,KAAK;YACd,eAAe,EAAE,OAAO;YACxB,YAAY,EAAE,MAAM,EAAE,YAAY,IAAI,KAAK;YAC3C,SAAS,EAAE,6BAA6B;YACxC,MAAM,EAAE,mBAAmB;YAC3B,QAAQ,EAAE,OAAO;SACpB,YAEA,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACpB,iBAEI,OAAO,EAAE,GAAG,EAAE;gBACV,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAChB,OAAO,EAAE,EAAE,CAAC;YAChB,CAAC,EACD,KAAK,EAAE;gBACH,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,MAAM,EAAE,MAAM;gBACd,UAAU,EAAE,aAAa;gBACzB,YAAY,EAAE,KAAK;gBACnB,MAAM,EAAE,SAAS;gBACjB,QAAQ,EAAE,MAAM;gBAChB,UAAU,EAAE,wBAAwB;aACvC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;YACtD,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChB,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,eAAe,GAAG,aAAa,CAAC;YAC1D,CAAC,YAEA,KAAK,IAzBD,KAAK,CA0BL,CACZ,CAAC,GACA,CACT,CAAC;AACN,CAAC"}

package/dist/react/Thread.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Thread Component
+ *
+ * Displays a single thread with all its messages.
+ */
+import { type ReactNode } from "react";
+import { type MessageData } from "./Comment";
+export interface ThreadInfo {
+    _id: string;
+    zoneId: string;
+    resolved: boolean;
+    resolvedBy?: string;
+    resolvedAt?: number;
+    createdAt: number;
+    lastActivityAt: number;
+    position?: {
+        x: number;
+        y: number;
+        anchor?: string;
+    };
+    metadata?: unknown;
+}
+export interface ThreadProps {
+    /** Thread data */
+    thread: ThreadInfo;
+    /** Messages in this thread */
+    messages: MessageData[];
+    /** Typing users in this thread */
+    typingUsers?: Array<{
+        userId: string;
+        updatedAt: number;
+    }>;
+    /** Whether there are more messages to load */
+    hasMore?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Callback when load more is triggered */
+    onLoadMore?: () => void;
+    /** Callback when a new message is submitted */
+    onSubmit?: (body: string, attachments?: Array<{
+        type: "url" | "file" | "image";
+        url: string;
+        name?: string;
+    }>) => void;
+    /** Callback when typing state changes */
+    onTypingChange?: (isTyping: boolean) => void;
+    /** Callback when a reaction is toggled */
+    onToggleReaction?: (messageId: string, emoji: string) => void;
+    /** Callback when a message is edited */
+    onEditMessage?: (messageId: string, newBody: string) => void;
+    /** Callback when a message is deleted */
+    onDeleteMessage?: (messageId: string) => void;
+    /** Callback to resolve the thread */
+    onResolve?: () => void;
+    /** Callback to unresolve the thread */
+    onUnresolve?: () => void;
+    /** Callback to close/go back */
+    onClose?: () => void;
+    /** Whether editing is allowed */
+    allowEditing?: boolean;
+    /** Whether to auto-scroll to bottom on new messages */
+    autoScroll?: boolean;
+    /** Custom message renderer */
+    renderMessage?: (message: MessageData, mine: boolean) => ReactNode;
+    /** CSS class name */
+    className?: string;
+}
+/**
+ * Component to display a single thread with its messages.
+ *
+ * Usage:
+ * ```tsx
+ * <Thread
+ *   thread={thread}
+ *   messages={messages}
+ *   typingUsers={typingUsers}
+ *   onSubmit={(body) => addComment({ threadId: thread._id, body })}
+ *   onTypingChange={(isTyping) => setIsTyping({ threadId: thread._id, isTyping })}
+ *   onToggleReaction={(messageId, emoji) => toggleReaction({ messageId, emoji })}
+ * />
+ * ```
+ */
+export declare function Thread({ thread, messages, typingUsers, hasMore, isLoading, onLoadMore, onSubmit, onTypingChange, onToggleReaction, onEditMessage, onDeleteMessage, onResolve, onUnresolve, onClose, allowEditing, autoScroll, renderMessage, className, }: ThreadProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Thread.d.ts.map

package/dist/react/Thread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../src/react/Thread.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAW,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAQtD,MAAM,WAAW,UAAU;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IACxB,kBAAkB;IAClB,MAAM,EAAE,UAAU,CAAC;IACnB,8BAA8B;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,kCAAkC;IAClC,WAAW,CAAC,EAAE,KAAK,CAAC;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IACvH,yCAAyC;IACzC,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,wCAAwC;IACxC,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,yCAAyC;IACzC,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iCAAiC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,KAAK,SAAS,CAAC;IACnE,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,EACnB,MAAM,EACN,QAAQ,EACR,WAAgB,EAChB,OAAe,EACf,SAAiB,EACjB,UAAU,EACV,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,SAAS,EACT,WAAW,EACX,OAAO,EACP,YAAmB,EACnB,UAAiB,EACjB,aAAa,EACb,SAAc,GACjB,EAAE,WAAW,2CAsOb"}

package/dist/react/Thread.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Thread Component
+ *
+ * Displays a single thread with all its messages.
+ */
+import { useEffect, useRef } from "react";
+import { useComments } from "./CommentsProvider";
+import { Comment } from "./Comment";
+import { AddComment } from "./AddComment";
+import { TypingIndicator } from "./TypingIndicator";
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * Component to display a single thread with its messages.
+ *
+ * Usage:
+ * ```tsx
+ * <Thread
+ *   thread={thread}
+ *   messages={messages}
+ *   typingUsers={typingUsers}
+ *   onSubmit={(body) => addComment({ threadId: thread._id, body })}
+ *   onTypingChange={(isTyping) => setIsTyping({ threadId: thread._id, isTyping })}
+ *   onToggleReaction={(messageId, emoji) => toggleReaction({ messageId, emoji })}
+ * />
+ * ```
+ */
+export function Thread({ thread, messages, typingUsers = [], hasMore = false, isLoading = false, onLoadMore, onSubmit, onTypingChange, onToggleReaction, onEditMessage, onDeleteMessage, onResolve, onUnresolve, onClose, allowEditing = true, autoScroll = true, renderMessage, className = "", }) {
+    const { userId, styles } = useComments();
+    const messagesEndRef = useRef(null);
+    const prevMessageCount = useRef(messages.length);
+    // Auto-scroll to bottom on new messages
+    useEffect(() => {
+        if (autoScroll && messages.length > prevMessageCount.current) {
+            messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+        }
+        prevMessageCount.current = messages.length;
+    }, [messages.length, autoScroll]);
+    const handleSubmit = (body, attachments) => {
+        onSubmit?.(body, attachments);
+    };
+    return (_jsxs("div", { className: `thread-container ${className}`, style: {
+            fontFamily: styles?.fontFamily ?? "system-ui, -apple-system, sans-serif",
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+            border: "1px solid #e5e7eb",
+            borderRadius: styles?.borderRadius ?? "8px",
+            overflow: "hidden",
+        }, children: [_jsxs("div", { style: {
+                    padding: "12px 16px",
+                    borderBottom: "1px solid #e5e7eb",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    backgroundColor: thread.resolved ? "#f0fdf4" : "#f9fafb",
+                }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [onClose && (_jsx("button", { onClick: onClose, style: {
+                                    padding: "4px 8px",
+                                    border: "none",
+                                    background: "transparent",
+                                    cursor: "pointer",
+                                    fontSize: "16px",
+                                }, children: "\u2190" })), _jsxs("span", { style: { fontWeight: 600, fontSize: "14px" }, children: ["Thread", thread.resolved && (_jsx("span", { style: { color: "#16a34a", marginLeft: "8px", fontWeight: 400 }, children: "\u2713 Resolved" }))] })] }), _jsxs("div", { style: { display: "flex", gap: "8px" }, children: [thread.resolved && onUnresolve && (_jsx("button", { onClick: onUnresolve, style: {
+                                    padding: "6px 12px",
+                                    fontSize: "13px",
+                                    border: "1px solid #d1d5db",
+                                    borderRadius: "6px",
+                                    background: "white",
+                                    cursor: "pointer",
+                                }, children: "Reopen" })), !thread.resolved && onResolve && userId && (_jsx("button", { onClick: onResolve, style: {
+                                    padding: "6px 12px",
+                                    fontSize: "13px",
+                                    fontWeight: 500,
+                                    border: "none",
+                                    borderRadius: "6px",
+                                    backgroundColor: "#16a34a",
+                                    color: "white",
+                                    cursor: "pointer",
+                                }, children: "Resolve" }))] })] }), _jsxs("div", { style: {
+                    flex: 1,
+                    overflowY: "auto",
+                    padding: "16px",
+                }, children: [hasMore && (_jsx("div", { style: { textAlign: "center", marginBottom: "16px" }, children: _jsx("button", { onClick: onLoadMore, disabled: isLoading, style: {
+                                padding: "8px 16px",
+                                fontSize: "13px",
+                                border: "1px solid #d1d5db",
+                                borderRadius: "6px",
+                                background: "white",
+                                cursor: isLoading ? "not-allowed" : "pointer",
+                                opacity: isLoading ? 0.6 : 1,
+                            }, children: isLoading ? "Loading..." : "Load Earlier Messages" }) })), messages.length === 0 ? (_jsx("div", { style: {
+                            textAlign: "center",
+                            color: "#6b7280",
+                            fontSize: "14px",
+                            padding: "40px 0",
+                        }, children: "No messages yet. Start the conversation!" })) : (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: messages.map((message) => {
+                            const isMine = userId === message.message.authorId;
+                            return renderMessage ? (renderMessage(message, isMine)) : (_jsx(Comment, { comment: message, mine: isMine, onToggleReaction: onToggleReaction
+                                    ? (emoji) => onToggleReaction(message.message._id, emoji)
+                                    : undefined, onEdit: onEditMessage && isMine
+                                    ? (newBody) => onEditMessage(message.message._id, newBody)
+                                    : undefined, onDelete: onDeleteMessage && isMine
+                                    ? () => onDeleteMessage(message.message._id)
+                                    : undefined }, message.message._id));
+                        }) })), typingUsers.length > 0 && (_jsx("div", { style: { marginTop: "12px" }, children: _jsx(TypingIndicator, { users: typingUsers.map((u) => u.userId) }) })), _jsx("div", { ref: messagesEndRef })] }), userId && !thread.resolved && (_jsx("div", { style: { borderTop: "1px solid #e5e7eb" }, children: _jsx(AddComment, { onSubmit: handleSubmit, onTypingChange: onTypingChange, allowEditing: allowEditing, placeholder: "Write a reply..." }) })), thread.resolved && (_jsxs("div", { style: {
+                    padding: "12px 16px",
+                    borderTop: "1px solid #e5e7eb",
+                    textAlign: "center",
+                    color: "#6b7280",
+                    fontSize: "13px",
+                    backgroundColor: "#f9fafb",
+                }, children: ["This thread has been resolved.", onUnresolve && (_jsx("button", { onClick: onUnresolve, style: {
+                            marginLeft: "8px",
+                            padding: "0",
+                            border: "none",
+                            background: "transparent",
+                            color: styles?.accentColor ?? "#3b82f6",
+                            cursor: "pointer",
+                            textDecoration: "underline",
+                        }, children: "Reopen" }))] }))] }));
+}
+//# sourceMappingURL=Thread.js.map

package/dist/react/Thread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thread.js","sourceRoot":"","sources":["../../src/react/Thread.tsx"],"names":[],"mappings":"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"}

package/dist/react/TypingIndicator.d.ts

@@ -0,0 +1,25 @@
+/**
+ * TypingIndicator Component
+ *
+ * Shows who is currently typing in a thread.
+ */
+export interface TypingIndicatorProps {
+    /** User IDs currently typing */
+    users: string[];
+    /** Max number of names to show before "and X others" */
+    maxNamesToShow?: number;
+    /** CSS class name */
+    className?: string;
+}
+/**
+ * Animated typing indicator showing who is typing.
+ *
+ * Usage:
+ * ```tsx
+ * const typingUsers = useQuery(api.comments.getTypingUsers, { threadId });
+ *
+ * <TypingIndicator users={typingUsers.map(u => u.userId)} />
+ * ```
+ */
+export declare function TypingIndicator({ users, maxNamesToShow, className, }: TypingIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=TypingIndicator.d.ts.map

package/dist/react/TypingIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicator.d.ts","sourceRoot":"","sources":["../../src/react/TypingIndicator.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,MAAM,WAAW,oBAAoB;IACjC,gCAAgC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC5B,KAAK,EACL,cAAkB,EAClB,SAAc,GACjB,EAAE,oBAAoB,kDAuGtB"}

package/dist/react/TypingIndicator.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TypingIndicator Component
+ *
+ * Shows who is currently typing in a thread.
+ */
+import { useState, useEffect } from "react";
+import { useComments } from "./CommentsProvider";
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * Animated typing indicator showing who is typing.
+ *
+ * Usage:
+ * ```tsx
+ * const typingUsers = useQuery(api.comments.getTypingUsers, { threadId });
+ *
+ * <TypingIndicator users={typingUsers.map(u => u.userId)} />
+ * ```
+ */
+export function TypingIndicator({ users, maxNamesToShow = 3, className = "", }) {
+    const { resolveUser } = useComments();
+    const [userNames, setUserNames] = useState({});
+    // Resolve user names
+    useEffect(() => {
+        if (resolveUser) {
+            users.forEach(async (userId) => {
+                if (!userNames[userId]) {
+                    const info = await resolveUser(userId);
+                    setUserNames((prev) => ({ ...prev, [userId]: info.name }));
+                }
+            });
+        }
+    }, [users, resolveUser, userNames]);
+    if (users.length === 0) {
+        return null;
+    }
+    // Format the typing message
+    const names = users.map((id) => userNames[id] ?? id);
+    let message;
+    if (names.length === 1) {
+        message = `${names[0]} is typing`;
+    }
+    else if (names.length <= maxNamesToShow) {
+        const lastN = names[names.length - 1];
+        const restNames = names.slice(0, -1).join(", ");
+        message = `${restNames} and ${lastN} are typing`;
+    }
+    else {
+        const shown = names.slice(0, maxNamesToShow).join(", ");
+        const remaining = names.length - maxNamesToShow;
+        message = `${shown} and ${remaining} others are typing`;
+    }
+    return (_jsxs("div", { className: `typing-indicator ${className}`, style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            fontSize: "13px",
+            color: "#6b7280",
+            fontStyle: "italic",
+        }, children: [_jsxs("span", { style: {
+                    display: "inline-flex",
+                    gap: "2px",
+                }, children: [_jsx("span", { style: {
+                            width: "4px",
+                            height: "4px",
+                            borderRadius: "50%",
+                            backgroundColor: "#9ca3af",
+                            animation: "typingDot 1.4s infinite ease-in-out",
+                            animationDelay: "0s",
+                        } }), _jsx("span", { style: {
+                            width: "4px",
+                            height: "4px",
+                            borderRadius: "50%",
+                            backgroundColor: "#9ca3af",
+                            animation: "typingDot 1.4s infinite ease-in-out",
+                            animationDelay: "0.2s",
+                        } }), _jsx("span", { style: {
+                            width: "4px",
+                            height: "4px",
+                            borderRadius: "50%",
+                            backgroundColor: "#9ca3af",
+                            animation: "typingDot 1.4s infinite ease-in-out",
+                            animationDelay: "0.4s",
+                        } })] }), _jsx("span", { children: message }), _jsx("style", { children: `
+        @keyframes typingDot {
+          0%, 80%, 100% {
+            transform: scale(1);
+            opacity: 0.5;
+          }
+          40% {
+            transform: scale(1.2);
+            opacity: 1;
+          }
+        }
+      ` })] }));
+}
+//# sourceMappingURL=TypingIndicator.js.map

package/dist/react/TypingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicator.js","sourceRoot":"","sources":["../../src/react/TypingIndicator.tsx"],"names":[],"mappings":"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"}

package/dist/react/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Comments Component - React UI
+ *
+ * Drop-in React components for the comments system.
+ * These components provide a fully managed UI for comments,
+ * threads, reactions, and typing indicators.
+ */
+export { CommentsProvider, useComments, type CommentsContextValue, type CommentsStyles, type CommentsProviderProps, } from "./CommentsProvider";
+export { Comments, type CommentsProps, } from "./Comments";
+export { Thread, type ThreadProps, } from "./Thread";
+export { Comment, type CommentProps, } from "./Comment";
+export { AddComment, type AddCommentProps, } from "./AddComment";
+export { ReactionPicker, type ReactionPickerProps, } from "./ReactionPicker";
+export { TypingIndicator, type TypingIndicatorProps, } from "./TypingIndicator";
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,QAAQ,EACR,KAAK,aAAa,GACnB,MAAM,YAAY,CAAC;AAEpB,OAAO,EACL,MAAM,EACN,KAAK,WAAW,GACjB,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,OAAO,EACP,KAAK,YAAY,GAClB,MAAM,WAAW,CAAC;AAEnB,OAAO,EACL,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,mBAAmB,CAAC"}

package/dist/react/index.js

@@ -0,0 +1,15 @@
+/**
+ * Comments Component - React UI
+ *
+ * Drop-in React components for the comments system.
+ * These components provide a fully managed UI for comments,
+ * threads, reactions, and typing indicators.
+ */
+export { CommentsProvider, useComments, } from "./CommentsProvider";
+export { Comments, } from "./Comments";
+export { Thread, } from "./Thread";
+export { Comment, } from "./Comment";
+export { AddComment, } from "./AddComment";
+export { ReactionPicker, } from "./ReactionPicker";
+export { TypingIndicator, } from "./TypingIndicator";
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,gBAAgB,EAChB,WAAW,GAIZ,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,QAAQ,GAET,MAAM,YAAY,CAAC;AAEpB,OAAO,EACL,MAAM,GAEP,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,OAAO,GAER,MAAM,WAAW,CAAC;AAEnB,OAAO,EACL,UAAU,GAEX,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,cAAc,GAEf,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,eAAe,GAEhB,MAAM,mBAAmB,CAAC"}