@tribe-nest/forge 1.13.0

package/src/ui/headless/chat/useChatRoom.ts

@@ -0,0 +1,223 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { usePublicAuth } from "../../../contexts/PublicAuthContext";
+import {
+  useChatChannels,
+  useChatMessages,
+  useChatPinnedMessages,
+  useChatUnreadCounts,
+  useChatMemberDirectory,
+  useCreateMemberDm,
+  useMarkChatRead,
+  useChatSocket,
+  chatKeys,
+  type ChatAttachment,
+  type ChatChannel,
+  type ChatMessage,
+} from "../../../data/queries/useChat";
+
+/**
+ * Headless community chat room: channel list + unread counts, paginated messages
+ * and pinned messages for the selected channel, realtime message/typing/pin
+ * updates over the socket, send + typing emits, read receipts, one-level threads
+ * and same-tier member DMs.
+ *
+ * Composes the `useChat*` data hooks and `useChatSocket`. This is the single
+ * primitive a creator needs to rebuild the chat page — render however you like.
+ */
+export function useChatRoom() {
+  const { user } = usePublicAuth();
+  const queryClient = useQueryClient();
+
+  const { data: channels = [], isLoading: channelsLoading } = useChatChannels();
+  const { data: unreadCounts = [] } = useChatUnreadCounts();
+  const { data: memberDirectory = [] } = useChatMemberDirectory();
+  const createMemberDm = useCreateMemberDm();
+  const markRead = useMarkChatRead();
+
+  const [selectedChannel, setSelectedChannel] = useState<ChatChannel | null>(null);
+  const [activeThreadParent, setActiveThreadParent] = useState<ChatMessage | null>(null);
+  const [typingUsers, setTypingUsers] = useState<string[]>([]);
+  const typingTimeoutRef = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
+
+  const {
+    data: messagesPages,
+    isLoading: messagesLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useChatMessages(selectedChannel?.id);
+  // The API already returns only top-level messages; guard defensively anyway.
+  const messages = useMemo(
+    () => (messagesPages?.pages.flatMap((p) => p.data) ?? []).filter((m) => !m.parentMessageId),
+    [messagesPages],
+  );
+
+  const { data: pinnedMessages = [] } = useChatPinnedMessages(selectedChannel?.id);
+
+  // ── Realtime ───────────────────────────────────────────────────────────────
+  const socket = useChatSocket(!!user);
+
+  useEffect(() => {
+    if (!socket) return;
+    const onMessage = (data: {
+      event?: string;
+      data?: {
+        channelId?: string;
+        message?: ChatMessage;
+        parentMessageId?: string;
+        name?: string;
+        accountId?: string;
+      };
+    }) => {
+      if (data.event === "chatNewMessage" && data.data?.channelId && data.data?.message) {
+        const newMessage = data.data.message;
+        if (newMessage.parentMessageId) {
+          // Reply: append to the thread's replies cache (oldest→newest); do NOT
+          // inject into the main timeline. Count bump handled by chatThreadReply.
+          queryClient.setQueryData(chatKeys.replies(newMessage.parentMessageId), (old: any) => {
+            if (!old?.pages?.length) return old;
+            const pages = [...old.pages];
+            const lastIdx = pages.length - 1;
+            const last = pages[lastIdx];
+            if (last.data.some((m: ChatMessage) => m.id === newMessage.id)) return old;
+            pages[lastIdx] = { ...last, data: [...last.data, newMessage], total: last.total + 1 };
+            return { ...old, pages };
+          });
+          return;
+        }
+        queryClient.setQueryData(chatKeys.messages(data.data.channelId), (old: any) => {
+          if (!old?.pages?.length) return old;
+          const [first, ...rest] = old.pages;
+          if (first.data.some((m: ChatMessage) => m.id === newMessage.id)) return old;
+          return { ...old, pages: [{ ...first, data: [newMessage, ...first.data], total: first.total + 1 }, ...rest] };
+        });
+      }
+      if (data.event === "chatThreadReply" && data.data?.channelId && data.data?.parentMessageId) {
+        const { channelId, parentMessageId, message } = data.data;
+        // Bump the parent's reply count/lastReplyAt in the main timeline.
+        queryClient.setQueryData(chatKeys.messages(channelId), (old: any) => {
+          if (!old?.pages?.length) return old;
+          return {
+            ...old,
+            pages: old.pages.map((page: any) => ({
+              ...page,
+              data: page.data.map((m: ChatMessage) =>
+                m.id === parentMessageId
+                  ? {
+                      ...m,
+                      replyCount: (m.replyCount ?? 0) + 1,
+                      lastReplyAt: message?.createdAt ?? m.lastReplyAt,
+                    }
+                  : m,
+              ),
+            })),
+          };
+        });
+      }
+      if (data.event === "chatUserTyping" && data.data) {
+        const { name, accountId } = data.data;
+        if (!name || accountId === user?.id) return;
+        setTypingUsers((prev) => (prev.includes(name) ? prev : [...prev, name]));
+        if (accountId && typingTimeoutRef.current[accountId]) clearTimeout(typingTimeoutRef.current[accountId]);
+        if (accountId) {
+          typingTimeoutRef.current[accountId] = setTimeout(
+            () => setTypingUsers((prev) => prev.filter((n) => n !== name)),
+            3000,
+          );
+        }
+      }
+      if (data.event === "chatMessagePinned" && data.data?.channelId) {
+        queryClient.invalidateQueries({ queryKey: chatKeys.messages(data.data.channelId) });
+        queryClient.invalidateQueries({ queryKey: chatKeys.pinned(data.data.channelId) });
+      }
+    };
+    socket.on("message", onMessage);
+    return () => {
+      socket.off("message", onMessage);
+    };
+  }, [socket, queryClient, user?.id]);
+
+  // Join/leave the selected channel room.
+  useEffect(() => {
+    if (!selectedChannel?.id || !socket?.connected) return;
+    socket.emit("chatJoinChannel", { channelId: selectedChannel.id });
+    return () => {
+      socket.emit("chatLeaveChannel", { channelId: selectedChannel.id });
+    };
+  }, [selectedChannel?.id, socket]);
+
+  // ── Actions ──────────────────────────────────────────────────────────────
+  const selectChannel = useCallback((channel: ChatChannel) => {
+    setSelectedChannel(channel);
+    setActiveThreadParent(null);
+    setTypingUsers([]);
+  }, []);
+
+  const sendMessage = useCallback(
+    (content: string, attachments?: ChatAttachment[]) => {
+      if (!selectedChannel?.id || !socket) return;
+      const trimmed = content.trim();
+      if (!trimmed && !(attachments && attachments.length)) return;
+      socket.emit("chatSendMessage", {
+        channelId: selectedChannel.id,
+        content: trimmed || undefined,
+        attachments,
+      });
+    },
+    [selectedChannel?.id, socket],
+  );
+
+  const handleTyping = useCallback(() => {
+    if (!selectedChannel?.id || !socket) return;
+    socket.emit("chatTyping", { channelId: selectedChannel.id });
+  }, [selectedChannel?.id, socket]);
+
+  const markAsRead = useCallback(
+    (messageIds: string[]) => {
+      if (messageIds.length === 0) return;
+      markRead.mutate(messageIds);
+    },
+    [markRead],
+  );
+
+  const openThread = useCallback((message: ChatMessage) => setActiveThreadParent(message), []);
+  const closeThread = useCallback(() => setActiveThreadParent(null), []);
+
+  const startMemberDm = useCallback(
+    async (targetAccountId: string) => {
+      const channel = await createMemberDm.mutateAsync(targetAccountId);
+      setSelectedChannel(channel);
+      setActiveThreadParent(null);
+      return channel;
+    },
+    [createMemberDm],
+  );
+
+  return {
+    channels,
+    channelsLoading,
+    unreadCounts,
+    selectedChannel,
+    selectChannel,
+    messages,
+    messagesLoading,
+    pinnedMessages,
+    typingUsers,
+    currentAccountId: user?.id,
+    sendMessage,
+    handleTyping,
+    markAsRead,
+    fetchNextPage,
+    hasMore: !!hasNextPage && !isFetchingNextPage,
+    // Threads
+    socket,
+    activeThreadParent,
+    openThread,
+    closeThread,
+    // Member DMs
+    memberDirectory,
+    startMemberDm,
+    isStartingDm: createMemberDm.isPending,
+  };
+}

package/src/ui/headless/chat/useMessageThread.ts

@@ -0,0 +1,60 @@
+import { useCallback, useMemo } from "react";
+import type { Socket } from "socket.io-client";
+import { useChatMessageReplies, type ChatAttachment, type ChatMessage } from "../../../data/queries/useChat";
+
+export interface UseMessageThreadResult {
+  parentMessage: ChatMessage | null;
+  replies: ChatMessage[];
+  isLoading: boolean;
+  hasMore: boolean;
+  fetchNextPage: () => void;
+  sendReply: (content: string, attachments?: ChatAttachment[]) => void;
+  handleTyping: () => void;
+}
+
+/**
+ * Headless one-level thread: replies for a parent message plus a socket-backed
+ * reply composer. The socket `message` listener is owned by `useChatRoom` (single
+ * source of truth); this hook only reads the replies cache and emits sends.
+ */
+export function useMessageThread(args: {
+  parentMessage: ChatMessage | null;
+  socket: Socket | null;
+}): UseMessageThreadResult {
+  const { parentMessage, socket } = args;
+
+  const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useChatMessageReplies(
+    parentMessage?.id,
+  );
+  const replies = useMemo(() => data?.pages.flatMap((p) => p.data) ?? [], [data]);
+
+  const sendReply = useCallback(
+    (content: string, attachments?: ChatAttachment[]) => {
+      if (!parentMessage || !socket) return;
+      const trimmed = content.trim();
+      if (!trimmed && !(attachments && attachments.length)) return;
+      socket.emit("chatSendMessage", {
+        channelId: parentMessage.channelId,
+        content: trimmed || undefined,
+        attachments,
+        parentMessageId: parentMessage.id,
+      });
+    },
+    [parentMessage, socket],
+  );
+
+  const handleTyping = useCallback(() => {
+    if (!parentMessage || !socket) return;
+    socket.emit("chatTyping", { channelId: parentMessage.channelId });
+  }, [parentMessage, socket]);
+
+  return {
+    parentMessage,
+    replies,
+    isLoading,
+    hasMore: !!hasNextPage && !isFetchingNextPage,
+    fetchNextPage,
+    sendReply,
+    handleTyping,
+  };
+}