gloomberb 0.7.5 → 0.8.0

package/src/plugins/builtin/chat/content/scroll.ts

@@ -0,0 +1,278 @@
+import { useCallback, useEffect, useRef } from "react";
+import type { ScrollBoxRenderable } from "../../../../ui";
+import type { ChatMessage } from "../../../../api-client";
+import type { InlineTickerCatalogEntry } from "../../../../state/hooks/inline-tickers";
+import type { ChatContentController } from "./types";
+import {
+  estimateMessageHeight,
+  getMessageTopOffset,
+  getScrollHeight,
+  getScrollTop,
+  getSelectedMessageScrollTop,
+  hasPixelScrollMetrics,
+  isGroupedWithPrevious,
+  isScrolledToBottom,
+  runAfterLayout,
+  scrollElementIntoScrollBoxView,
+  scrollToBottom,
+  scrollToPosition,
+} from "../layout";
+
+interface MutableRef<T> {
+  current: T;
+}
+
+export interface ChatPrependAnchor {
+  oldestMessageId: string | null;
+  scrollHeight: number;
+  scrollTop: number;
+  selectedMessageId: string | null;
+}
+
+interface ChatScrollRuntimeArgs {
+  channelId: string;
+  catalog: Record<string, InlineTickerCatalogEntry>;
+  contentWidth: number;
+  controller: ChatContentController;
+  focused: boolean;
+  hasOlderMessages: boolean;
+  height: number;
+  latestMessageId: string | null;
+  loadingOlderMessages: boolean;
+  messageAreaHeight: number;
+  messageElementsRef: MutableRef<Map<string, unknown>>;
+  messages: ChatMessage[];
+  nativePaneChrome?: boolean;
+  prependAnchorRef: MutableRef<ChatPrependAnchor | null>;
+  scrollRef: MutableRef<ScrollBoxRenderable | null>;
+  selectedIdx: number;
+  selectionActive: boolean;
+  setFollowMessages: (followMessages: boolean) => void;
+  setSelectedIdx: (selectedIdx: number) => void;
+  stickyTranscript: boolean;
+  useDefaultControllerChannel: boolean;
+}
+
+export function useChatScrollRuntime({
+  channelId,
+  catalog,
+  contentWidth,
+  controller,
+  focused,
+  hasOlderMessages,
+  height,
+  latestMessageId,
+  loadingOlderMessages,
+  messageAreaHeight,
+  messageElementsRef,
+  messages,
+  nativePaneChrome,
+  prependAnchorRef,
+  scrollRef,
+  selectedIdx,
+  selectionActive,
+  setFollowMessages,
+  setSelectedIdx,
+  stickyTranscript,
+  useDefaultControllerChannel,
+}: ChatScrollRuntimeArgs) {
+  const pendingJumpMessageIdRef = useRef<string | null>(null);
+
+  const registerMessageElement = useCallback((messageId: string, node: unknown | null) => {
+    if (node) {
+      messageElementsRef.current.set(messageId, node);
+    } else {
+      messageElementsRef.current.delete(messageId);
+    }
+  }, [messageElementsRef]);
+
+  const requestOlderMessages = useCallback(() => {
+    const scrollBox = scrollRef.current;
+    if (!scrollBox || loadingOlderMessages || !hasOlderMessages || messages.length === 0) return;
+    const exactPixels = nativePaneChrome === true && hasPixelScrollMetrics(scrollBox);
+
+    prependAnchorRef.current = {
+      oldestMessageId: messages[0]?.id ?? null,
+      scrollHeight: getScrollHeight(scrollBox, exactPixels),
+      scrollTop: getScrollTop(scrollBox, exactPixels),
+      selectedMessageId: selectedIdx >= 0 ? messages[selectedIdx]?.id ?? null : messages[0]?.id ?? null,
+    };
+    setFollowMessages(false);
+    const request = useDefaultControllerChannel
+      ? controller.loadOlderMessages()
+      : controller.loadOlderChannelMessages(channelId);
+    void request.catch(() => {
+      prependAnchorRef.current = null;
+    });
+  }, [
+    channelId,
+    controller,
+    hasOlderMessages,
+    loadingOlderMessages,
+    messages,
+    nativePaneChrome,
+    prependAnchorRef,
+    scrollRef,
+    selectedIdx,
+    setFollowMessages,
+    useDefaultControllerChannel,
+  ]);
+
+  const requestOlderMessagesIfNeeded = useCallback(() => {
+    const scrollBox = scrollRef.current;
+    if (!scrollBox || scrollBox.scrollTop > 1) return;
+    requestOlderMessages();
+  }, [requestOlderMessages, scrollRef]);
+
+  const handleTranscriptScrollActivity = useCallback((event?: { scroll?: { direction?: "up" | "down" | "left" | "right" } }) => {
+    const direction = event?.scroll?.direction;
+    runAfterLayout(() => {
+      requestOlderMessagesIfNeeded();
+
+      const scrollBox = scrollRef.current;
+      if (!scrollBox) return;
+      const atBottom = isScrolledToBottom(scrollBox, nativePaneChrome);
+      if (direction === "up" && !atBottom) {
+        setFollowMessages(false);
+        return;
+      }
+
+      setFollowMessages(atBottom);
+    });
+  }, [nativePaneChrome, requestOlderMessagesIfNeeded, scrollRef, setFollowMessages]);
+
+  const scrollToLoadedMessage = useCallback((messageId: string) => {
+    const targetIndex = messages.findIndex((message) => message.id === messageId);
+    if (targetIndex < 0) return false;
+
+    setSelectedIdx(targetIndex);
+    setFollowMessages(false);
+    prependAnchorRef.current = null;
+    runAfterLayout(() => {
+      if (nativePaneChrome && scrollElementIntoScrollBoxView(scrollRef.current, messageElementsRef.current.get(messageId))) return;
+      const scrollBox = scrollRef.current;
+      if (!scrollBox) return;
+      scrollBox.scrollTo(getMessageTopOffset(messages, targetIndex, contentWidth, catalog));
+    });
+    return true;
+  }, [
+    catalog,
+    contentWidth,
+    messageElementsRef,
+    messages,
+    nativePaneChrome,
+    prependAnchorRef,
+    scrollRef,
+    setFollowMessages,
+    setSelectedIdx,
+  ]);
+
+  const jumpToMessage = useCallback((messageId: string) => {
+    if (scrollToLoadedMessage(messageId)) return;
+    pendingJumpMessageIdRef.current = messageId;
+    if (hasOlderMessages && !loadingOlderMessages) {
+      requestOlderMessages();
+    } else {
+      pendingJumpMessageIdRef.current = null;
+    }
+  }, [hasOlderMessages, loadingOlderMessages, requestOlderMessages, scrollToLoadedMessage]);
+
+  useEffect(() => {
+    const pendingId = pendingJumpMessageIdRef.current;
+    if (!pendingId) return;
+    if (scrollToLoadedMessage(pendingId)) {
+      pendingJumpMessageIdRef.current = null;
+      prependAnchorRef.current = null;
+      return;
+    }
+    if (hasOlderMessages && !loadingOlderMessages) {
+      requestOlderMessages();
+    } else {
+      pendingJumpMessageIdRef.current = null;
+    }
+  }, [hasOlderMessages, loadingOlderMessages, messages, prependAnchorRef, requestOlderMessages, scrollToLoadedMessage]);
+
+  useEffect(() => {
+    if (!stickyTranscript) return;
+    queueMicrotask(() => scrollToBottom(scrollRef.current, nativePaneChrome));
+  }, [channelId, contentWidth, height, latestMessageId, messageAreaHeight, nativePaneChrome, scrollRef, stickyTranscript]);
+
+  useEffect(() => {
+    const anchor = prependAnchorRef.current;
+    if (!anchor || loadingOlderMessages) return;
+
+    const currentAnchor = anchor;
+    const scrollBox = scrollRef.current;
+    if (!scrollBox) return;
+    if (pendingJumpMessageIdRef.current) {
+      prependAnchorRef.current = null;
+      return;
+    }
+
+    const previousOldestIndex = currentAnchor.oldestMessageId
+      ? messages.findIndex((message) => message.id === currentAnchor.oldestMessageId)
+      : -1;
+    const exactPixels = nativePaneChrome === true && hasPixelScrollMetrics(scrollBox);
+    const addedRows = !exactPixels && previousOldestIndex > 0
+      ? getMessageTopOffset(messages, previousOldestIndex, contentWidth, catalog)
+      : Math.max(0, getScrollHeight(scrollBox, exactPixels) - currentAnchor.scrollHeight);
+    scrollToPosition(scrollBox, currentAnchor.scrollTop + addedRows, exactPixels);
+    if (currentAnchor.selectedMessageId) {
+      const selectedMessageIndex = messages.findIndex((message) => message.id === currentAnchor.selectedMessageId);
+      if (selectedMessageIndex >= 0) {
+        setSelectedIdx(selectedMessageIndex);
+      }
+    }
+    queueMicrotask(() => {
+      if (prependAnchorRef.current === currentAnchor) {
+        prependAnchorRef.current = null;
+      }
+    });
+  }, [catalog, contentWidth, loadingOlderMessages, messages, nativePaneChrome, prependAnchorRef, scrollRef, setSelectedIdx]);
+
+  useEffect(() => {
+    if (!focused || !stickyTranscript) return;
+    queueMicrotask(() => scrollToBottom(scrollRef.current, nativePaneChrome));
+  }, [focused, nativePaneChrome, scrollRef, stickyTranscript]);
+
+  useEffect(() => {
+    const sb = scrollRef.current;
+    if (!sb) return;
+    if (!selectionActive) return;
+    if (prependAnchorRef.current) return;
+    if (nativePaneChrome) {
+      const selectedMessageId = messages[selectedIdx]?.id ?? "";
+      runAfterLayout(() => scrollElementIntoScrollBoxView(scrollRef.current, messageElementsRef.current.get(selectedMessageId)));
+      return;
+    }
+    const top = getMessageTopOffset(messages, selectedIdx, contentWidth, catalog);
+    const rowHeight = estimateMessageHeight(messages[selectedIdx]!, contentWidth, isGroupedWithPrevious(messages, selectedIdx), catalog);
+    const nextScrollTop = getSelectedMessageScrollTop({
+      scrollTop: sb.scrollTop,
+      viewportHeight: sb.viewport?.height ?? 0,
+      top,
+      rowHeight,
+    });
+    if (nextScrollTop !== sb.scrollTop) {
+      sb.scrollTo(nextScrollTop);
+    }
+  }, [
+    catalog,
+    contentWidth,
+    messageElementsRef,
+    messages,
+    nativePaneChrome,
+    prependAnchorRef,
+    scrollRef,
+    selectedIdx,
+    selectionActive,
+  ]);
+
+  return {
+    handleTranscriptScrollActivity,
+    jumpToMessage,
+    registerMessageElement,
+    requestOlderMessages,
+    requestOlderMessagesIfNeeded,
+  };
+}

package/src/plugins/builtin/chat/content/selection-runtime.ts

@@ -0,0 +1,66 @@
+import { useCallback, useEffect, type Dispatch, type SetStateAction } from "react";
+import type { TextareaRenderable } from "../../../../ui";
+
+interface MutableRef<T> {
+  current: T;
+}
+
+export function useChatMessageSelection({
+  inputRef,
+  messageCount,
+  selectedIdx,
+  setFollowMessages,
+  setSelectedIdx,
+}: {
+  inputRef: MutableRef<TextareaRenderable | null>;
+  messageCount: number;
+  selectedIdx: number;
+  setFollowMessages: Dispatch<SetStateAction<boolean>>;
+  setSelectedIdx: Dispatch<SetStateAction<number>>;
+}) {
+  const resetTranscriptSelection = useCallback(() => {
+    setSelectedIdx(-1);
+    setFollowMessages(true);
+  }, [setFollowMessages, setSelectedIdx]);
+
+  const moveMessageSelection = useCallback((direction: "up" | "down") => {
+    if (messageCount === 0) return false;
+
+    let next: number;
+    if (selectedIdx < 0) {
+      if (direction === "down") return false;
+      next = messageCount - 1;
+    } else if (direction === "down") {
+      next = Math.min(selectedIdx + 1, messageCount - 1);
+    } else {
+      next = Math.max(selectedIdx - 1, 0);
+    }
+
+    setSelectedIdx(next);
+    setFollowMessages(next === messageCount - 1);
+    return true;
+  }, [messageCount, selectedIdx, setFollowMessages, setSelectedIdx]);
+
+  const shouldLeaveComposerForSelection = useCallback((direction: "up" | "down") => {
+    const textarea = inputRef.current;
+    if (!textarea || textarea.hasSelection()) return false;
+
+    const visualLineCount = Math.max(textarea.virtualLineCount, 1);
+    if (direction === "up") {
+      return textarea.visualCursor.visualRow <= 0;
+    }
+
+    return textarea.visualCursor.visualRow >= visualLineCount - 1;
+  }, [inputRef]);
+
+  useEffect(() => {
+    if (selectedIdx < messageCount) return;
+    setSelectedIdx(messageCount - 1);
+  }, [messageCount, selectedIdx, setSelectedIdx]);
+
+  return {
+    moveMessageSelection,
+    resetTranscriptSelection,
+    shouldLeaveComposerForSelection,
+  };
+}

package/src/plugins/builtin/chat/content/shortcuts.ts

@@ -0,0 +1,212 @@
+import type { MutableRefObject } from "react";
+import { useShortcut } from "../../../../react/input";
+import type { ScrollBoxRenderable } from "../../../../ui";
+import type { ChatMessage } from "../../../../api-client";
+import { isPlainKey } from "../../../../utils/keyboard";
+import { scrollToBottom } from "../layout";
+
+export function useChatContentShortcuts({
+  beginReplyTo,
+  blurInput,
+  canSend,
+  clearReplyTarget,
+  cycleChannel,
+  focusChannelSidebar,
+  focusChatContent,
+  focusComposer,
+  focused,
+  hasOlderMessages,
+  inputFocused,
+  inputValueRef,
+  loadingOlderMessages,
+  messages,
+  moveMessageSelection,
+  moveSidebarChannelSelection,
+  nativePaneChrome,
+  replyTo,
+  requestOlderMessages,
+  requestOlderMessagesIfNeeded,
+  returnToComposer,
+  scrollRef,
+  selectedIdx,
+  setFollowMessages,
+  setSelectedIdx,
+  shouldLeaveComposerForSelection,
+  showChannelSidebar,
+  sidebarFocusedRef,
+}: {
+  beginReplyTo: (index: number, options?: { deferFocus?: boolean }) => void;
+  blurInput: () => void;
+  canSend: boolean;
+  clearReplyTarget: () => void;
+  cycleChannel: (direction: 1 | -1) => boolean;
+  focusChannelSidebar: () => boolean;
+  focusChatContent: () => boolean;
+  focusComposer: () => void;
+  focused: boolean;
+  hasOlderMessages: boolean;
+  inputFocused: boolean;
+  inputValueRef: MutableRefObject<string>;
+  loadingOlderMessages: boolean;
+  messages: ChatMessage[];
+  moveMessageSelection: (direction: "up" | "down") => boolean;
+  moveSidebarChannelSelection: (direction: "up" | "down") => boolean;
+  nativePaneChrome?: boolean;
+  replyTo: ChatMessage | null;
+  requestOlderMessages: () => void;
+  requestOlderMessagesIfNeeded: () => void;
+  returnToComposer: () => void;
+  scrollRef: MutableRefObject<ScrollBoxRenderable | null>;
+  selectedIdx: number;
+  setFollowMessages: (followMessages: boolean) => void;
+  setSelectedIdx: (selectedIdx: number) => void;
+  shouldLeaveComposerForSelection: (direction: "up" | "down") => boolean;
+  showChannelSidebar: boolean;
+  sidebarFocusedRef: MutableRefObject<boolean>;
+}) {
+  useShortcut((event) => {
+    if (!focused) return;
+    const isEnterKey = event.name === "return" || event.name === "enter";
+
+    if (sidebarFocusedRef.current && showChannelSidebar) {
+      if (isPlainKey(event, "left")) {
+        event.preventDefault?.();
+        event.stopPropagation?.();
+        return;
+      }
+
+      if (isPlainKey(event, "right")) {
+        event.preventDefault?.();
+        event.stopPropagation?.();
+        focusChatContent();
+        return;
+      }
+
+      if (isPlainKey(event, "up", "down")) {
+        event.preventDefault?.();
+        event.stopPropagation?.();
+        if (event.name === "up" || event.name === "down") {
+          moveSidebarChannelSelection(event.name);
+        }
+        return;
+      }
+    }
+
+    if (
+      isPlainKey(event, "left") &&
+      showChannelSidebar &&
+      (!inputFocused || inputValueRef.current.length === 0) &&
+      focusChannelSidebar()
+    ) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      return;
+    }
+
+    if (inputFocused) {
+      if (event.name === "escape") {
+        event.preventDefault?.();
+        event.stopPropagation?.();
+        if (replyTo) {
+          clearReplyTarget();
+        } else {
+          blurInput();
+        }
+        return;
+      }
+
+      const verticalDirection = event.name === "up" || event.name === "down" ? event.name : null;
+      if (verticalDirection && isPlainKey(event, "up", "down") && shouldLeaveComposerForSelection(verticalDirection)) {
+        const moved = moveMessageSelection(verticalDirection);
+        if (moved) {
+          event.preventDefault?.();
+          event.stopPropagation?.();
+          blurInput();
+          return;
+        }
+      }
+
+      return;
+    }
+
+    if (isPlainKey(event, "]") && cycleChannel(1)) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      return;
+    }
+    if (isPlainKey(event, "[") && cycleChannel(-1)) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      return;
+    }
+
+    if (canSend && isEnterKey && selectedIdx >= 0 && selectedIdx < messages.length) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      beginReplyTo(selectedIdx, { deferFocus: true });
+      return;
+    }
+
+    if ((isEnterKey || isPlainKey(event, "i")) && canSend) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      queueMicrotask(() => focusComposer());
+      return;
+    }
+
+    if (event.name === "escape") {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      if (selectedIdx >= 0) {
+        setSelectedIdx(-1);
+        setFollowMessages(true);
+      }
+      return;
+    }
+
+    if (isPlainKey(event, "j", "down")) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      if (selectedIdx === messages.length - 1) {
+        returnToComposer();
+        return;
+      }
+      moveMessageSelection("down");
+      return;
+    }
+    if (isPlainKey(event, "k", "up")) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      if (selectedIdx === 0 && hasOlderMessages && !loadingOlderMessages) {
+        requestOlderMessages();
+        return;
+      }
+      moveMessageSelection("up");
+      return;
+    }
+
+    if (canSend && isPlainKey(event, "r") && selectedIdx >= 0 && selectedIdx < messages.length) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      beginReplyTo(selectedIdx, { deferFocus: true });
+      return;
+    }
+
+    if (isPlainKey(event, "g")) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      setSelectedIdx(0);
+      setFollowMessages(false);
+      scrollRef.current?.scrollTo(0);
+      queueMicrotask(requestOlderMessagesIfNeeded);
+      return;
+    }
+    if (event.name === "g" && event.shift) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      setSelectedIdx(messages.length - 1);
+      setFollowMessages(true);
+      queueMicrotask(() => scrollToBottom(scrollRef.current, nativePaneChrome));
+    }
+  }, { allowEditable: true });
+}

package/src/plugins/builtin/chat/content/snapshot.ts

@@ -0,0 +1,154 @@
+import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
+import type { TextareaRenderable } from "../../../../ui";
+import type { ChatMessage } from "../../../../api-client";
+import type { ChatContentController } from "./types";
+import type { ChatPrependAnchor } from "./scroll";
+
+type ChatSnapshot = ReturnType<ChatContentController["getSnapshot"]>;
+
+interface MutableRef<T> {
+  current: T;
+}
+
+interface ChatSnapshotStateArgs {
+  applyingExternalDraftRef: MutableRef<boolean>;
+  channelId: string;
+  controller: ChatContentController;
+  initialSnapshot: ChatSnapshot;
+  inputRef: MutableRef<TextareaRenderable | null>;
+  inputValueRef: MutableRef<string>;
+  prependAnchorRef: MutableRef<ChatPrependAnchor | null>;
+  setFollowMessages: Dispatch<SetStateAction<boolean>>;
+  setSelectedIdx: Dispatch<SetStateAction<number>>;
+  updateComposerRows: (draft: string) => void;
+  useDefaultControllerChannel: boolean;
+}
+
+function syncDraftFromSnapshot({
+  applyingExternalDraftRef,
+  inputRef,
+  inputValueRef,
+  snapshot,
+  updateComposerRows,
+}: {
+  applyingExternalDraftRef: MutableRef<boolean>;
+  inputRef: MutableRef<TextareaRenderable | null>;
+  inputValueRef: MutableRef<string>;
+  snapshot: ChatSnapshot;
+  updateComposerRows: (draft: string) => void;
+}) {
+  if (inputValueRef.current !== snapshot.draft) {
+    inputValueRef.current = snapshot.draft;
+    updateComposerRows(snapshot.draft);
+  }
+  const textarea = inputRef.current;
+  if (textarea && textarea.editBuffer.getText() !== snapshot.draft) {
+    applyingExternalDraftRef.current = true;
+    textarea.setText(snapshot.draft);
+    applyingExternalDraftRef.current = false;
+  }
+}
+
+function resolveReplyTo(snapshot: ChatSnapshot): ChatMessage | null {
+  return snapshot.replyToId
+    ? snapshot.messages.find((message) => message.id === snapshot.replyToId) ?? null
+    : null;
+}
+
+export function useChatSnapshotState({
+  applyingExternalDraftRef,
+  channelId,
+  controller,
+  initialSnapshot,
+  inputRef,
+  inputValueRef,
+  prependAnchorRef,
+  setFollowMessages,
+  setSelectedIdx,
+  updateComposerRows,
+  useDefaultControllerChannel,
+}: ChatSnapshotStateArgs) {
+  const [channels, setChannels] = useState(initialSnapshot.channels);
+  const [channelsLoading, setChannelsLoading] = useState(initialSnapshot.channelsLoading);
+  const [messages, setMessages] = useState<ChatMessage[]>(initialSnapshot.messages);
+  const [channelStates, setChannelStates] = useState(initialSnapshot.channelStates);
+  const [onlineCount, setOnlineCount] = useState(initialSnapshot.onlineCount);
+  const [hasSavedSession, setHasSavedSession] = useState(initialSnapshot.hasSavedSession);
+  const [user, setUser] = useState<{ id: string; username: string; emailVerified: boolean } | null>(initialSnapshot.user);
+  const [loading, setLoading] = useState(initialSnapshot.loading);
+  const [loadingOlderMessages, setLoadingOlderMessages] = useState(initialSnapshot.loadingOlderMessages);
+  const [hasOlderMessages, setHasOlderMessages] = useState(initialSnapshot.hasOlderMessages);
+  const [replyTo, setReplyTo] = useState<ChatMessage | null>(() => resolveReplyTo(initialSnapshot));
+
+  useEffect(() => {
+    return useDefaultControllerChannel ? controller.attachView() : controller.attachChannelView(channelId);
+  }, [channelId, controller, useDefaultControllerChannel]);
+
+  useEffect(() => {
+    void controller.refreshChannels().catch(() => {});
+    void controller.refreshPresence().catch(() => {});
+    void controller.refreshSession().catch(() => {});
+  }, [controller]);
+
+  useEffect(() => {
+    setSelectedIdx(-1);
+    setFollowMessages(true);
+    prependAnchorRef.current = null;
+
+    const applySnapshot = (snapshot: ChatSnapshot) => {
+      setMessages(snapshot.messages);
+      setChannels(snapshot.channels);
+      setChannelStates(snapshot.channelStates);
+      setOnlineCount(snapshot.onlineCount);
+      setChannelsLoading(snapshot.channelsLoading);
+      setHasSavedSession(snapshot.hasSavedSession);
+      setUser(snapshot.user);
+      setLoading(snapshot.loading);
+      setLoadingOlderMessages(snapshot.loadingOlderMessages);
+      setHasOlderMessages(snapshot.hasOlderMessages);
+      syncDraftFromSnapshot({
+        applyingExternalDraftRef,
+        inputRef,
+        inputValueRef,
+        snapshot,
+        updateComposerRows,
+      });
+      setReplyTo(resolveReplyTo(snapshot));
+    };
+
+    applySnapshot(controller.getSnapshot(channelId));
+
+    const unsubscribe = useDefaultControllerChannel
+      ? controller.subscribe(applySnapshot)
+      : controller.subscribe(channelId, applySnapshot);
+
+    void (useDefaultControllerChannel ? controller.refreshMessages() : controller.refreshChannelMessages(channelId)).catch(() => {});
+    return unsubscribe;
+  }, [
+    applyingExternalDraftRef,
+    channelId,
+    controller,
+    inputRef,
+    inputValueRef,
+    prependAnchorRef,
+    setFollowMessages,
+    setSelectedIdx,
+    updateComposerRows,
+    useDefaultControllerChannel,
+  ]);
+
+  return {
+    channels,
+    channelsLoading,
+    channelStates,
+    hasOlderMessages,
+    hasSavedSession,
+    loading,
+    loadingOlderMessages,
+    messages,
+    onlineCount,
+    replyTo,
+    setReplyTo,
+    user,
+  };
+}