@ttt-productions/chat-react 0.2.0

package/dist/ui/Composer.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button, Textarea } from "@ttt-productions/ui-core/react";
+import { cn } from "@ttt-productions/ui-core";
+import { ensureFileWithContentType } from "@ttt-productions/file-input";
+import { MediaInput } from "@ttt-productions/file-input/react";
+import { useGuardedUpload } from "@ttt-productions/upload-ui/react/upload";
+import { Loader2, X, FileText, ImageIcon, VideoIcon, MicIcon } from "lucide-react";
+import { useMentionAutocomplete } from "../mentions/use-mention-autocomplete.js";
+import { MentionAutocomplete } from "../mentions/MentionAutocomplete.js";
+function genId() {
+    return `${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
+}
+function getAttachmentType(file) {
+    if (file.type.startsWith("image/"))
+        return "image";
+    if (file.type.startsWith("video/"))
+        return "video";
+    if (file.type.startsWith("audio/"))
+        return "audio";
+    return "text";
+}
+function AttachmentTypeIcon({ type }) {
+    switch (type) {
+        case "image": return _jsx(ImageIcon, { className: "h-4 w-4 shrink-0" });
+        case "video": return _jsx(VideoIcon, { className: "h-4 w-4 shrink-0" });
+        case "audio": return _jsx(MicIcon, { className: "h-4 w-4 shrink-0" });
+        default: return _jsx(FileText, { className: "h-4 w-4 shrink-0" });
+    }
+}
+export function Composer(props) {
+    const { onSend, attachmentConfig, sendAttachment, disabled, autoFocus = false, placeholder = "Type a message...", } = props;
+    const [text, setText] = React.useState("");
+    const [pendingFile, setPendingFile] = React.useState(null);
+    const [isSending, setIsSending] = React.useState(false);
+    const [uploadState, setUploadState] = React.useState(null);
+    const ref = React.useRef(null);
+    const abortControllerRef = React.useRef(null);
+    const guardedUpload = useGuardedUpload();
+    const mentionApi = useMentionAutocomplete({
+        textareaRef: ref,
+        value: text,
+        onChange: setText,
+        providers: props.mentionConfig?.providers ?? [],
+        context: props.mentionConfig?.context,
+        recent: props.mentionConfig?.recent,
+        trigger: props.mentionConfig?.trigger,
+        minQueryLength: props.mentionConfig?.minQueryLength,
+        searchDebounceMs: props.mentionConfig?.searchDebounceMs,
+    });
+    const attachEnabled = Boolean(attachmentConfig && sendAttachment);
+    // focus stability: never steal focus unless explicitly enabled
+    React.useEffect(() => {
+        if (!autoFocus)
+            return;
+        ref.current?.focus();
+    }, [autoFocus]);
+    const handleFileSelected = React.useCallback((payload) => {
+        if (payload.error || !payload.file) {
+            setPendingFile(null);
+            return;
+        }
+        setPendingFile(payload.file);
+    }, []);
+    const handleCancelUpload = React.useCallback(() => {
+        abortControllerRef.current?.abort();
+    }, []);
+    const send = async () => {
+        const v = text.trim();
+        if (!v && !pendingFile)
+            return;
+        setIsSending(true);
+        try {
+            if (pendingFile && attachmentConfig && sendAttachment) {
+                // Attachment path: upload first via canonical guarded upload, then register.
+                const uuid = genId();
+                const { uploadAdapter, userId, storage } = attachmentConfig;
+                const storagePath = uploadAdapter.buildUploadPath({ userId, attachmentId: uuid });
+                const extraMetadata = uploadAdapter.buildUploadMetadata?.({ userId, attachmentId: uuid }) ?? {};
+                const fileToUpload = ensureFileWithContentType(pendingFile);
+                const attType = getAttachmentType(fileToUpload);
+                const controller = new AbortController();
+                abortControllerRef.current = controller;
+                await guardedUpload({
+                    storage,
+                    path: storagePath,
+                    file: fileToUpload,
+                    metadata: { contentType: fileToUpload.type, ...extraMetadata },
+                    uploadId: uuid,
+                    onProgress: (state) => setUploadState(state),
+                    signal: controller.signal,
+                });
+                await sendAttachment({
+                    text: mentionApi.getValueWithTokens(),
+                    attachment: {
+                        attachmentId: uuid,
+                        storagePath,
+                        originalFileName: fileToUpload.name,
+                        type: attType,
+                        size: fileToUpload.size,
+                    },
+                });
+            }
+            else {
+                // Text-only path.
+                await onSend(mentionApi.getValueWithTokens());
+            }
+            setText("");
+            setPendingFile(null);
+            mentionApi.close();
+        }
+        catch (err) {
+            // AbortError = user-initiated cancel via the MediaInput cancel button.
+            // Clear local state and swallow — not a real failure.
+            if (err instanceof Error && err.name === 'AbortError') {
+                setPendingFile(null);
+                return;
+            }
+            console.error("[Composer] Send failed:", err);
+            setPendingFile(null);
+            throw err;
+        }
+        finally {
+            abortControllerRef.current = null;
+            setIsSending(false);
+            setUploadState(null);
+        }
+    };
+    const isDisabled = disabled || isSending;
+    return (_jsxs("div", { className: "chat-composer", children: [pendingFile && !isSending && (_jsxs("div", { className: "chat-composer-file-preview", children: [_jsx(AttachmentTypeIcon, { type: getAttachmentType(pendingFile) }), _jsx("span", { className: "chat-composer-file-name", children: pendingFile.name }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0", onClick: () => setPendingFile(null), children: _jsx(X, { className: "h-3 w-3" }) })] })), props.mentionConfig && mentionApi.state.open && (_jsx("div", { className: "relative", children: _jsx("div", { className: "absolute bottom-full left-0 mb-1 z-10", children: _jsx(MentionAutocomplete, { state: mentionApi.state, onSelect: (ref) => mentionApi.insertMention(ref) }) }) })), _jsxs("div", { className: "flex items-end gap-2", children: [_jsx(Textarea, { ref: ref, value: text, onChange: (e) => setText(e.target.value), placeholder: placeholder, disabled: isDisabled, rows: 1, className: cn("min-h-[40px] resize-none"), onKeyDown: (e) => {
+                            if (mentionApi.handleKeyDown(e))
+                                return;
+                            if (e.key === "Enter" && !e.shiftKey) {
+                                e.preventDefault();
+                                send();
+                            }
+                        } }), _jsx(Button, { type: "button", variant: "default", disabled: isDisabled || (!text.trim() && !pendingFile), onClick: send, children: isSending ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : "Send" })] }), attachEnabled && attachmentConfig && (_jsx("div", { className: "mt-2", children: _jsx(MediaInput, { spec: attachmentConfig.attachmentSpec, onChange: handleFileSelected, selectedFile: pendingFile, isLoading: isSending, uploadState: uploadState, disabled: isDisabled, buttonLabel: "Attach file", onClear: () => setPendingFile(null), onCancel: handleCancelUpload, className: "w-full" }) }))] }));
+}
+//# sourceMappingURL=Composer.js.map

package/dist/ui/Composer.js.map

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

package/dist/ui/MessageItemDefault.d.ts

@@ -0,0 +1,11 @@
+import type { ChatMessageV1, ModerationHandlers } from "@ttt-productions/chat-core";
+export type MessageItemDefaultProps = {
+    m: ChatMessageV1;
+    currentUserId: string;
+    isAdmin: boolean;
+    handlers?: ModerationHandlers;
+    isContinuation?: boolean;
+    onSenderClick?: (senderId: string, displayName: string) => void;
+};
+export declare function MessageItemDefault(props: MessageItemDefaultProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MessageItemDefault.d.ts.map

package/dist/ui/MessageItemDefault.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageItemDefault.d.ts","sourceRoot":"","sources":["../../src/ui/MessageItemDefault.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAkB,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAkEpG,MAAM,MAAM,uBAAuB,GAAG;IACpC,CAAC,EAAE,aAAa,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAG9B,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAEjE,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAiEhE"}

package/dist/ui/MessageItemDefault.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageText } from "../mentions/MessageText.js";
+import { cn } from "@ttt-productions/ui-core";
+import { MediaViewer } from "@ttt-productions/media-viewer/react";
+import { FileText } from "lucide-react";
+import { MessageActions } from "./menus.js";
+import { useResolvedSenderName } from "../context/ChatNameResolverContext.js";
+// ============================================
+// Attachment rendering
+// ============================================
+function AttachmentView({ att }) {
+    if (att.type === "image") {
+        return _jsx(MediaViewer, { type: "image", url: att.url, alt: att.name, className: "chat-attachment-media" });
+    }
+    if (att.type === "video") {
+        return _jsx(MediaViewer, { type: "video", url: att.url, controls: true, className: "chat-attachment-media" });
+    }
+    if (att.type === "audio") {
+        return _jsx(MediaViewer, { type: "audio", url: att.url, controls: true, className: "chat-attachment-media" });
+    }
+    // text/markdown — download link
+    return (_jsxs("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", className: "chat-attachment-text-link", children: [_jsx(FileText, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: att.name })] }));
+}
+// ============================================
+// Reply-to quote
+// ============================================
+function ReplyQuote({ replyTo }) {
+    const replyName = useResolvedSenderName(replyTo.senderId);
+    return (_jsxs("div", { className: "chat-reply-quote", children: [_jsx("span", { className: "chat-reply-quote-sender", children: replyName }), _jsx("span", { className: "chat-reply-quote-preview", children: _jsx(MessageText, { text: replyTo.messagePreview }) })] }));
+}
+// ============================================
+// System message
+// ============================================
+function SystemMessage({ m }) {
+    return (_jsx("div", { className: "chat-system-message", children: m.text && _jsx("span", { children: m.text }) }));
+}
+export function MessageItemDefault(props) {
+    const { m, currentUserId, isAdmin, handlers, isContinuation, onSenderClick } = props;
+    const senderName = useResolvedSenderName(m.senderId);
+    // System messages render differently
+    if (m.isSystemMessage) {
+        return _jsx(SystemMessage, { m: m });
+    }
+    const mine = m.senderId === currentUserId;
+    return (_jsxs("div", { className: cn("flex flex-col w-fit max-w-[85%]", mine ? "ml-auto items-end" : "mr-auto items-start", isContinuation ? "chat-continuation-gap" : "chat-group-gap"), children: [_jsxs("div", { className: cn("chat-bubble", mine ? "chat-bubble--mine" : "chat-bubble--theirs"), children: [!isContinuation && (_jsxs("div", { className: "flex items-center gap-2 text-xs opacity-80 mb-1", children: [_jsx("span", { className: cn("font-medium", onSenderClick && "cursor-pointer hover:underline"), onClick: onSenderClick ? () => onSenderClick(m.senderId, senderName) : undefined, role: onSenderClick ? "button" : undefined, tabIndex: onSenderClick ? 0 : undefined, onKeyDown: onSenderClick ? (e) => {
+                                    if (e.key === "Enter" || e.key === " ")
+                                        onSenderClick(m.senderId, senderName);
+                                } : undefined, children: senderName }), _jsx("span", { children: "\u00B7" }), _jsx("span", { children: new Date(m.createdAt).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }) })] })), m.replyTo && _jsx(ReplyQuote, { replyTo: m.replyTo }), m.text && (_jsx("p", { className: "text-sm whitespace-pre-wrap", children: _jsx(MessageText, { text: m.text }) })), m.attachment && (_jsx("div", { className: "mt-2", children: _jsx(AttachmentView, { att: m.attachment }) }))] }), !isContinuation && (_jsx("div", { className: "mt-1", children: _jsx(MessageActions, { messageId: m.messageId, isAdmin: isAdmin, handlers: handlers }) }))] }));
+}
+//# sourceMappingURL=MessageItemDefault.js.map

package/dist/ui/MessageItemDefault.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageItemDefault.js","sourceRoot":"","sources":["../../src/ui/MessageItemDefault.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,EAAE,EAAE,MAAM,0BAA0B,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAE9E,+CAA+C;AAC/C,uBAAuB;AACvB,+CAA+C;AAE/C,SAAS,cAAc,CAAC,EAAE,GAAG,EAA2B;IACtD,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QACzB,OAAO,KAAC,WAAW,IAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,EAAE,SAAS,EAAC,uBAAuB,GAAG,CAAC;IACrG,CAAC;IACD,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QACzB,OAAO,KAAC,WAAW,IAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,QAAQ,QAAC,SAAS,EAAC,uBAAuB,GAAG,CAAC;IAC/F,CAAC;IACD,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QACzB,OAAO,KAAC,WAAW,IAAC,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,QAAQ,QAAC,SAAS,EAAC,uBAAuB,GAAG,CAAC;IAC/F,CAAC;IACD,gCAAgC;IAChC,OAAO,CACL,aACE,IAAI,EAAE,GAAG,CAAC,GAAG,EACb,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,SAAS,EAAC,2BAA2B,aAErC,KAAC,QAAQ,IAAC,SAAS,EAAC,kBAAkB,GAAG,EACzC,eAAM,SAAS,EAAC,UAAU,YAAE,GAAG,CAAC,IAAI,GAAQ,IAC1C,CACL,CAAC;AACJ,CAAC;AAED,+CAA+C;AAC/C,iBAAiB;AACjB,+CAA+C;AAE/C,SAAS,UAAU,CAAC,EAAE,OAAO,EAAsD;IACjF,MAAM,SAAS,GAAG,qBAAqB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC1D,OAAO,CACL,eAAK,SAAS,EAAC,kBAAkB,aAC/B,eAAM,SAAS,EAAC,yBAAyB,YAAE,SAAS,GAAQ,EAC5D,eAAM,SAAS,EAAC,0BAA0B,YAAC,KAAC,WAAW,IAAC,IAAI,EAAE,OAAO,CAAC,cAAc,GAAI,GAAO,IAC3F,CACP,CAAC;AACJ,CAAC;AAED,+CAA+C;AAC/C,iBAAiB;AACjB,+CAA+C;AAE/C,SAAS,aAAa,CAAC,EAAE,CAAC,EAAwB;IAChD,OAAO,CACL,cAAK,SAAS,EAAC,qBAAqB,YACjC,CAAC,CAAC,IAAI,IAAI,yBAAO,CAAC,CAAC,IAAI,GAAQ,GAC5B,CACP,CAAC;AACJ,CAAC;AAoBD,MAAM,UAAU,kBAAkB,CAAC,KAA8B;IAC/D,MAAM,EAAE,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IACrF,MAAM,UAAU,GAAG,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAErD,qCAAqC;IACrC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,OAAO,KAAC,aAAa,IAAC,CAAC,EAAE,CAAC,GAAI,CAAC;IACjC,CAAC;IAED,MAAM,IAAI,GAAG,CAAC,CAAC,QAAQ,KAAK,aAAa,CAAC;IAE1C,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,iCAAiC,EACjC,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,EAClD,cAAc,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,gBAAgB,CAC5D,aAED,eAAK,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,CAAC,aAElF,CAAC,cAAc,IAAI,CAClB,eAAK,SAAS,EAAC,iDAAiD,aAC9D,eACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,aAAa,IAAI,gCAAgC,CAAC,EAC/E,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,EAChF,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC1C,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACvC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;oCAC/B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;wCAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;gCAChF,CAAC,CAAC,CAAC,CAAC,SAAS,YAEZ,UAAU,GACN,EACP,oCAAc,EACd,yBAAO,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,GAAQ,IAC/F,CACP,EAGA,CAAC,CAAC,OAAO,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,CAAC,CAAC,OAAO,GAAI,EAG/C,CAAC,CAAC,IAAI,IAAI,CACT,YAAG,SAAS,EAAC,6BAA6B,YACxC,KAAC,WAAW,IAAC,IAAI,EAAE,CAAC,CAAC,IAAI,GAAI,GAC3B,CACL,EAGA,CAAC,CAAC,UAAU,IAAI,CACf,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,cAAc,IAAC,GAAG,EAAE,CAAC,CAAC,UAAU,GAAI,GACjC,CACP,IACG,EAGL,CAAC,cAAc,IAAI,CAClB,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,cAAc,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC5E,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/ui/MessageList.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { ChatMessageV1, ModerationHandlers } from "@ttt-productions/chat-core";
+import type { MessageRendererRegistry } from "../types.js";
+export declare function MessageList(props: {
+    messages: ChatMessageV1[];
+    currentUserId: string;
+    isAdmin: boolean;
+    isFetchingOlder?: boolean;
+    hasOlder?: boolean;
+    onLoadOlder?: () => void;
+    renderMessage?: (m: ChatMessageV1) => React.ReactNode;
+    messageRenderers?: MessageRendererRegistry;
+    showScrollToBottom?: boolean;
+    onScrollToBottom?: () => void;
+    handlers?: ModerationHandlers;
+    onSenderClick?: (senderId: string, displayName: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MessageList.d.ts.map

package/dist/ui/MessageList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../src/ui/MessageList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEpF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAI3D,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IAEjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,KAAK,CAAC,SAAS,CAAC;IACtD,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAE3C,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACjE,2CA+JA"}

package/dist/ui/MessageList.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { isContinuation } from "@ttt-productions/chat-core";
+import { Button } from "@ttt-productions/ui-core/react";
+import { MessageItemDefault } from "./MessageItemDefault.js";
+export function MessageList(props) {
+    const { messages, currentUserId, isAdmin, isFetchingOlder, hasOlder, onLoadOlder, renderMessage, messageRenderers, showScrollToBottom, onScrollToBottom, handlers, onSenderClick, } = props;
+    const scrollRef = React.useRef(null);
+    const topSentinelRef = React.useRef(null);
+    const isAtBottomRef = React.useRef(true);
+    const prevScrollHeightRef = React.useRef(null);
+    const prevCountRef = React.useRef(0);
+    // IntersectionObserver for infinite scroll (older messages)
+    React.useEffect(() => {
+        const root = scrollRef.current;
+        const target = topSentinelRef.current;
+        if (!root || !target)
+            return;
+        if (typeof IntersectionObserver === "undefined")
+            return;
+        const io = new IntersectionObserver((entries) => {
+            const e = entries[0];
+            if (!e?.isIntersecting)
+                return;
+            if (!hasOlder || isFetchingOlder)
+                return;
+            prevScrollHeightRef.current = root.scrollHeight;
+            onLoadOlder?.();
+        }, { root, threshold: 0 });
+        io.observe(target);
+        return () => io.disconnect();
+    }, [hasOlder, isFetchingOlder, onLoadOlder]);
+    // Scroll management — FIXES accordion scroll jump
+    React.useLayoutEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const count = messages.length;
+        const prev = prevCountRef.current;
+        if (prev === 0 && count > 0) {
+            // Initial load — scroll to bottom WITHOUT triggering parent scroll
+            requestAnimationFrame(() => {
+                const savedScrollY = window.scrollY;
+                el.scrollTop = el.scrollHeight;
+                // Restore page scroll if the browser moved it
+                if (window.scrollY !== savedScrollY) {
+                    window.scrollTo({ top: savedScrollY, behavior: "instant" });
+                }
+            });
+            isAtBottomRef.current = true;
+        }
+        else if (count > prev && prevScrollHeightRef.current != null) {
+            // Older messages prepended — maintain scroll position
+            const diff = el.scrollHeight - prevScrollHeightRef.current;
+            el.scrollTop += diff;
+            prevScrollHeightRef.current = null;
+        }
+        else if (count > prev && isAtBottomRef.current) {
+            // New message at bottom, user is at bottom — scroll down
+            // Use scrollTop assignment, NOT scrollTo with behavior:"smooth" (causes parent scroll jump)
+            requestAnimationFrame(() => {
+                const savedScrollY = window.scrollY;
+                el.scrollTop = el.scrollHeight;
+                if (window.scrollY !== savedScrollY) {
+                    window.scrollTo({ top: savedScrollY, behavior: "instant" });
+                }
+            });
+        }
+        prevCountRef.current = count;
+    }, [messages]);
+    const onScroll = (e) => {
+        const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+        isAtBottomRef.current = scrollHeight - (scrollTop + clientHeight) < 50;
+    };
+    let lastDay = null;
+    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { ref: scrollRef, className: "h-[400px] overflow-y-auto p-4", onScroll: onScroll, children: [isFetchingOlder && _jsx("div", { className: "text-center text-xs opacity-70 mb-2", children: "Loading\u2026" }), _jsx("div", { ref: topSentinelRef }), messages.length === 0 ? (_jsx("div", { className: "h-full flex items-center justify-center text-sm opacity-70", children: "No messages yet" })) : (_jsx("div", { className: "flex flex-col", children: messages.map((m, idx) => {
+                            const day = new Date(m.createdAt).toDateString();
+                            const showDay = day !== lastDay;
+                            lastDay = day;
+                            const prevMsg = idx > 0 ? messages[idx - 1] : undefined;
+                            // Date separators always break grouping
+                            const continuation = showDay ? false : isContinuation(prevMsg, m);
+                            const byType = m.type && messageRenderers?.[m.type] ? messageRenderers[m.type](m) : null;
+                            const body = renderMessage?.(m) ??
+                                byType ?? (_jsx(MessageItemDefault, { m: m, currentUserId: currentUserId, isAdmin: isAdmin, handlers: handlers, isContinuation: continuation, onSenderClick: onSenderClick }));
+                            return (_jsxs(React.Fragment, { children: [showDay && (_jsx("div", { className: "my-2 flex justify-center", children: _jsx("div", { className: "chat-date-separator", children: new Date(m.createdAt).toLocaleDateString() }) })), body] }, m.messageId));
+                        }) }))] }), showScrollToBottom && (_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full shadow-sm", onClick: onScrollToBottom, children: "\u2193" }))] }));
+}
+//# sourceMappingURL=MessageList.js.map

package/dist/ui/MessageList.js.map

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

package/dist/ui/menus.d.ts

@@ -0,0 +1,12 @@
+import type { ModerationHandlers } from "@ttt-productions/chat-core";
+export declare function MessageActions(props: {
+    messageId: string;
+    isAdmin: boolean;
+    handlers?: ModerationHandlers;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ThreadActions(props: {
+    threadId: string;
+    isAdmin: boolean;
+    handlers?: ModerationHandlers;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=menus.d.ts.map

package/dist/ui/menus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menus.d.ts","sourceRoot":"","sources":["../../src/ui/menus.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGrE,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B,2CA6BA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B,2CA6BA"}

package/dist/ui/menus.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@ttt-productions/ui-core/react";
+export function MessageActions(props) {
+    const { messageId, isAdmin, handlers } = props;
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [handlers?.onReportMessage && (_jsx(Button, { type: "button", variant: "link", size: "sm", className: "h-auto p-0 text-xs opacity-70 hover:opacity-100", onClick: () => handlers.onReportMessage?.(messageId), children: "Report" })), isAdmin && handlers?.onDeleteMessage && (_jsx(Button, { type: "button", variant: "link", size: "sm", className: "h-auto p-0 text-xs opacity-70 hover:opacity-100", onClick: () => handlers.onDeleteMessage?.(messageId), children: "Delete" }))] }));
+}
+export function ThreadActions(props) {
+    const { threadId, isAdmin, handlers } = props;
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [handlers?.onReportThread && (_jsx(Button, { type: "button", variant: "link", size: "sm", className: "h-auto p-0 text-xs opacity-70 hover:opacity-100", onClick: () => handlers.onReportThread?.(threadId), children: "Report thread" })), isAdmin && handlers?.onDeleteThread && (_jsx(Button, { type: "button", variant: "link", size: "sm", className: "h-auto p-0 text-xs opacity-70 hover:opacity-100", onClick: () => handlers.onDeleteThread?.(threadId), children: "Delete thread" }))] }));
+}
+//# sourceMappingURL=menus.js.map

package/dist/ui/menus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menus.js","sourceRoot":"","sources":["../../src/ui/menus.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAExD,MAAM,UAAU,cAAc,CAAC,KAI9B;IACC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE/C,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACrC,QAAQ,EAAE,eAAe,IAAI,CAC5B,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,iDAAiD,EAC3D,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,SAAS,CAAC,uBAG7C,CACV,EACA,OAAO,IAAI,QAAQ,EAAE,eAAe,IAAI,CACvC,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,iDAAiD,EAC3D,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,SAAS,CAAC,uBAG7C,CACV,IACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAI7B;IACC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE9C,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACrC,QAAQ,EAAE,cAAc,IAAI,CAC3B,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,iDAAiD,EAC3D,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,QAAQ,CAAC,8BAG3C,CACV,EACA,OAAO,IAAI,QAAQ,EAAE,cAAc,IAAI,CACtC,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,iDAAiD,EAC3D,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,QAAQ,CAAC,8BAG3C,CACV,IACG,CACP,CAAC;AACJ,CAAC"}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@ttt-productions/chat-react",
+  "version": "0.2.0",
+  "description": "Chat React UI, hooks, and Firebase-client adapter for TTT Productions apps (realtime newest window + infinite older pagination)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ttt-productions/ttt-packages.git",
+    "directory": "packages/chat-react"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "src/styles/*.css"
+  ],
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles": "./src/styles/chat.css"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist *.tsbuildinfo",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">=5.0.0",
+    "firebase": ">=10.0.0",
+    "lucide-react": ">=0.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "firebase": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@ttt-productions/chat-core": "0.6.2",
+    "@ttt-productions/chat-schemas": "0.4.0",
+    "@ttt-productions/media-schemas": "0.6.0",
+    "@ttt-productions/ui-core": "0.6.1",
+    "@ttt-productions/file-input": "0.5.1",
+    "@ttt-productions/upload-ui": "0.3.1",
+    "@ttt-productions/media-viewer": "0.4.1",
+    "@ttt-productions/mobile-core": "0.4.1",
+    "@ttt-productions/firebase-helpers": "0.6.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.8.3"
+  },
+  "author": "DJ (TTT Productions)",
+  "license": "MIT"
+}

package/src/styles/chat.css

@@ -0,0 +1,153 @@
+/* ============================================
+   chat-react — default styles
+   Uses theme-core CSS custom property tokens.
+   Apps import: @ttt-productions/chat-react/styles
+   ============================================ */
+
+/* --- Message bubbles --- */
+.chat-bubble {
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+}
+
+.chat-bubble--mine {
+  background-color: hsl(var(--primary) / 0.1);
+}
+
+.chat-bubble--theirs {
+  background-color: hsl(var(--muted));
+}
+
+/* --- Message grouping --- */
+.chat-group-gap {
+  margin-top: 0.75rem;
+}
+
+.chat-continuation-gap {
+  margin-top: 0.125rem;
+}
+
+/* --- System messages --- */
+.chat-system-message {
+  text-align: center;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  padding: 0.5rem 0;
+}
+
+/* --- Reply-to quote --- */
+.chat-reply-quote {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.375rem 0.5rem;
+  margin-bottom: 0.375rem;
+  border-left: 2px solid hsl(var(--border));
+  border-radius: 0.125rem;
+  background-color: hsl(var(--muted) / 0.5);
+  font-size: 0.75rem;
+}
+
+.chat-reply-quote-sender {
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.chat-reply-quote-preview {
+  color: hsl(var(--muted-foreground));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 280px;
+}
+
+/* --- Attachment states --- */
+.chat-attachment-pending {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  background-color: hsl(var(--muted));
+  font-size: 0.75rem;
+}
+
+.chat-attachment-media {
+  max-width: 320px;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.chat-attachment-text-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.625rem;
+  border-radius: 0.375rem;
+  background-color: hsl(var(--muted));
+  color: hsl(var(--primary));
+  font-size: 0.8125rem;
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+
+.chat-attachment-text-link:hover {
+  opacity: 0.8;
+}
+
+.chat-attachment-rejected {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  background-color: hsl(var(--warning, var(--muted)) / 0.15);
+  color: hsl(var(--warning-foreground, var(--muted-foreground)));
+  font-size: 0.75rem;
+}
+
+/* --- Composer --- */
+.chat-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.chat-composer-file-preview {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  background-color: hsl(var(--muted));
+  font-size: 0.8125rem;
+}
+
+.chat-composer-file-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-composer-upload-status {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* Mention system — default chip styling. Consumers override via custom
+   renderMention or by targeting .chat-mention-chip directly. */
+.chat-mention-chip {
+  color: hsl(var(--primary));
+  font-weight: 500;
+  cursor: pointer;
+}
+.chat-mention-chip:hover {
+  text-decoration: underline;
+}
+.chat-mention-autocomplete {
+  /* container styles applied by ui-core via Tailwind classes in the component */
+}