chat: implement action to jump to message with given date, clearing seach or unfolding threads, as needed

Author: williamstein

src/packages/frontend/chat/actions.ts

@@ -104,8 +104,10 @@ export class ChatActions extends Actions<ChatState> {
     handleSyncDBChange({ changes, store: this.store, syncdb: this.syncdb });
   };
 
-  foldThread = (reply_to: Date, messageIndex?: number) => {
-    if (this.syncdb == null) return;
+  toggleFoldThread = (reply_to: Date, messageIndex?: number) => {
+    if (this.syncdb == null) {
+      return;
+    }
     const account_id = this.redux.getStore("account").get_account_id();
     const cur = this.syncdb.get_one({ event: "chat", date: reply_to });
     const folding = cur?.get("folding") ?? List([]);
@@ -122,7 +124,7 @@ export class ChatActions extends Actions<ChatState> {
     this.syncdb.commit();
 
     if (folded && messageIndex != null) {
-      this.scrollToBottom(messageIndex);
+      this.scrollToIndex(messageIndex);
     }
   };
 
@@ -216,7 +218,7 @@ export class ChatActions extends Actions<ChatState> {
           ?.getIn([`${reply_to.valueOf()}`, "folding"])
           ?.includes(sender_id)
       ) {
-        this.foldThread(reply_to);
+        this.toggleFoldThread(reply_to);
       }
     }
 
@@ -483,18 +485,42 @@ export class ChatActions extends Actions<ChatState> {
   // if date is given, scrolls to the bottom of the chat *thread*
   // that starts with that date.
   // safe to call after closing actions.
-  scrollToBottom = (index: number = -1) => {
-    if (this.syncdb == null) return;
-    // this triggers scroll behavior in the chat-log component.
-    // no-op, but necessary to trigger a change
+  clearScrollRequest = () => {
     this.frameTreeActions.set_frame_data({
       id: this.frameId,
-      scrollToBottom: null,
+      scrollToIndex: null,
+      scrollToDate: null,
     });
+  };
+  scrollToIndex = (index: number = -1) => {
+    if (this.syncdb == null) return;
+    // we first clear, then set it, since scroll to needs to
+    // work even if it is the same as last time.
+    // TODO: alternatively, we could get a reference
+    // to virtuoso and directly control things from here.
+    this.clearScrollRequest();
+    setTimeout(() => {
+      this.frameTreeActions.set_frame_data({
+        id: this.frameId,
+        scrollToIndex: index,
+        scrollToDate: null,
+      });
+    }, 1);
+  };
+
+  scrollToBottom = () => {
+    this.scrollToIndex(Number.MAX_SAFE_INTEGER);
+  };
+
+  scrollToDate = (date: number | Date | string) => {
+    this.clearScrollRequest();
     setTimeout(() => {
       this.frameTreeActions.set_frame_data({
         id: this.frameId,
-        scrollToBottom: index,
+        // string version of ms since epoch, which is the key
+        // in the messages immutable Map
+        scrollToDate: `${new Date(date).valueOf()}`,
+        scrollToIndex: null,
       });
     }, 1);
   };
@@ -516,7 +542,12 @@ export class ChatActions extends Actions<ChatState> {
     const path = this.store.get("path") + ".md";
     const project_id = this.store.get("project_id");
     if (project_id == null) return;
-    const { dates } = getSortedDates(messages, this.store.get("search"));
+    const account_id = this.redux.getStore("account").get_account_id();
+    const { dates } = getSortedDates(
+      messages,
+      this.store.get("search"),
+      account_id,
+    );
     const v: string[] = [];
     for (const date of dates) {
       const message = messages.get(date);
@@ -996,7 +1027,7 @@ export class ChatActions extends Actions<ChatState> {
         tag: `chat:summarize`,
         noNotification: true,
       });
-      this.scrollToBottom();
+      this.scrollToIndex();
     }
   };
 

src/packages/frontend/chat/chat-log.tsx

@@ -27,7 +27,7 @@ import Composing from "./composing";
 import Message from "./message";
 import type { ChatMessageTyped, ChatMessages, Mode } from "./types";
 import { getSelectedHashtagsSearch, newest_content } from "./utils";
-import { getRootMessage } from "./utils";
+import { getRootMessage, getThreadRootDate } from "./utils";
 import { DivTempHeight } from "@cocalc/frontend/jupyter/cell-list";
 import { filterMessages } from "./filter-messages";
 
@@ -43,7 +43,9 @@ interface Props {
   filterRecentH?;
   selectedHashtags;
   disableFilters?: boolean;
-  scrollToBottom?: null | number | undefined;
+  scrollToIndex?: null | number | undefined;
+  // scrollToDate = string ms from epoch
+  scrollToDate?: null | undefined | string;
 }
 
 export function ChatLog({
@@ -58,7 +60,8 @@ export function ChatLog({
   filterRecentH,
   selectedHashtags: selectedHashtags0,
   disableFilters,
-  scrollToBottom,
+  scrollToIndex,
+  scrollToDate,
 }: Props) {
   const messages = useRedux(["messages"], project_id, path) as ChatMessages;
   const llm_cost_reply: [number, number] = useRedux(
@@ -71,22 +74,7 @@ export function ChatLog({
   const { selectedHashtags, selectedHashtagsSearch } = useMemo(() => {
     return getSelectedHashtagsSearch(selectedHashtags0);
   }, [selectedHashtags0]);
-  const search = search0 + " " + selectedHashtagsSearch;
-
-  useEffect(() => {
-    scrollToBottomRef?.current?.(true);
-  }, [search]);
-
-  useEffect(() => {
-    if (scrollToBottom == null) return;
-    if (scrollToBottom == -1) {
-      scrollToBottomRef?.current?.(true);
-    } else {
-      // console.log({ scrollToBottom }, " -- not implemented");
-      virtuosoRef.current?.scrollToIndex({ index: scrollToBottom });
-    }
-    actions.setState({ scrollToBottom: undefined });
-  }, [scrollToBottom]);
+  const search = (search0 + " " + selectedHashtagsSearch).trim();
 
   const user_map = useTypedRedux("users", "user_map");
   const account_id = useTypedRedux("account", "account_id");
@@ -97,7 +85,7 @@ export function ChatLog({
     const { dates, numFolded } = getSortedDates(
       messages,
       search,
-      account_id,
+      account_id!,
       filterRecentH,
     );
     // TODO: This is an ugly hack because I'm tired and need to finish this.
@@ -113,6 +101,68 @@ export function ChatLog({
     return { dates, numFolded };
   }, [messages, search, project_id, path, filterRecentH]);
 
+  useEffect(() => {
+    scrollToBottomRef?.current?.(true);
+  }, [search]);
+
+  useEffect(() => {
+    if (scrollToIndex == null) {
+      return;
+    }
+    if (scrollToIndex == -1) {
+      scrollToBottomRef?.current?.(true);
+    } else {
+      virtuosoRef.current?.scrollToIndex({ index: scrollToIndex });
+    }
+    actions.clearScrollRequest();
+  }, [scrollToIndex]);
+
+  useEffect(() => {
+    if (scrollToDate == null) {
+      return;
+    }
+    // linear search, which should be fine given that this is not a tight inner loop
+    const index = sortedDates.indexOf(scrollToDate);
+    if (index == -1) {
+      // didn't find it?
+      const message = messages.get(scrollToDate);
+      if (message == null) {
+        // the message really doesn't exist.  Weird.  Give up.
+        actions.clearScrollRequest();
+        return;
+      }
+      let tryAgain = false;
+      // we clear all filters and ALSO make sure
+      // if message is in a folded thread, then that thread is not folded.
+      if (account_id && isFolded(messages, message, account_id)) {
+        // this actually unfolds it, since it was folded.
+        const date = new Date(
+          getThreadRootDate({ date: parseFloat(scrollToDate), messages }),
+        );
+        actions.toggleFoldThread(date);
+        tryAgain = true;
+      }
+      if (messages.size > sortedDates.length && (search || filterRecentH)) {
+        // there was a search, so clear it just to be sure -- it could still hide
+        // the folded threaded
+        actions.clearAllFilters();
+        tryAgain = true;
+      }
+      if (tryAgain) {
+        // we have to wait a while for full re-render to happen
+        setTimeout(() => {
+          actions.scrollToDate(parseFloat(scrollToDate));
+        }, 10);
+      } else {
+        // totally give up
+        actions.clearScrollRequest();
+      }
+      return;
+    }
+    virtuosoRef.current?.scrollToIndex({ index });
+    actions.clearScrollRequest();
+  }, [scrollToDate]);
+
   const visibleHashtags = useMemo(() => {
     let X = immutableSet<string>([]);
     if (disableFilters) {
@@ -137,17 +187,14 @@ export function ChatLog({
     scrollToBottomRef.current = (force?: boolean) => {
       if (manualScrollRef.current && !force) return;
       manualScrollRef.current = false;
-      virtuosoRef.current?.scrollToIndex({ index: Number.MAX_SAFE_INTEGER });
+      const doScroll = () =>
+        virtuosoRef.current?.scrollToIndex({ index: Number.MAX_SAFE_INTEGER });
+
+      doScroll();
       // sometimes scrolling to bottom is requested before last entry added,
       // so we do it again in the next render loop.  This seems needed mainly
       // for side chat when there is little vertical space.
-      setTimeout(
-        () =>
-          virtuosoRef.current?.scrollToIndex({
-            index: Number.MAX_SAFE_INTEGER,
-          }),
-        0,
-      );
+      setTimeout(doScroll, 1);
     };
   }, [scrollToBottomRef != null]);
 
@@ -256,9 +303,11 @@ function isThread(messages: ChatMessages, message: ChatMessageTyped) {
 function isFolded(
   messages: ChatMessages,
   message: ChatMessageTyped,
-  account_id?: string,
+  account_id: string,
 ) {
-  if (account_id == null) return false;
+  if (account_id == null) {
+    return false;
+  }
   const rootMsg = getRootMessage({ message: message.toJS(), messages });
   return rootMsg?.get("folding")?.includes(account_id) ?? false;
 }
@@ -271,8 +320,8 @@ function isFolded(
 // It was very easy to sort these before reply_to, which complicates things.
 export function getSortedDates(
   messages: ChatMessages,
-  search?: string,
-  account_id?: string,
+  search: string | undefined,
+  account_id: string,
   filterRecentH?: number,
 ): { dates: string[]; numFolded: number } {
   let numFolded = 0;

src/packages/frontend/chat/chatroom.tsx

@@ -90,7 +90,8 @@ export function ChatRoom({
   const search = desc.get("data-search") ?? "";
   const filterRecentH: number = desc.get("data-filterRecentH") ?? 0;
   const selectedHashtags = desc.get("data-selectedHashtags");
-  const scrollToBottom = desc.get("data-scrollToBottom") ?? null;
+  const scrollToIndex = desc.get("data-scrollToIndex") ?? null;
+  const scrollToDate = desc.get("data-scrollToDate") ?? null;
 
   const messages = useEditor("messages");
   const [filterRecentHCustom, setFilterRecentHCustom] = useState<string>("");
@@ -288,7 +289,8 @@ export function ChatRoom({
             search={search}
             filterRecentH={filterRecentH}
             selectedHashtags={selectedHashtags}
-            scrollToBottom={scrollToBottom}
+            scrollToIndex={scrollToIndex}
+            scrollToDate={scrollToDate}
           />
           {render_preview_message()}
         </div>

src/packages/frontend/chat/message.tsx

@@ -693,7 +693,7 @@ export default function Message(props: Readonly<Props>) {
       reply = replyMentionsRef.current?.() ?? replyMessageRef.current;
     }
     props.actions.sendReply({ message: message.toJS(), reply });
-    props.actions.scrollToBottom(props.index);
+    props.actions.scrollToIndex(props.index);
   }
 
   function renderComposeReply() {
@@ -852,7 +852,7 @@ export default function Message(props: Readonly<Props>) {
             type="text"
             icon={<Icon name="down-circle-o" />}
             onClick={() =>
-              props.actions?.foldThread(message.get("date"), props.index)
+              props.actions?.toggleFoldThread(message.get("date"), props.index)
             }
           >
             <Text type="secondary">Unfold</Text>
@@ -887,7 +887,7 @@ export default function Message(props: Readonly<Props>) {
           type="text"
           style={style}
           onClick={() =>
-            props.actions?.foldThread(message.get("date"), props.index)
+            props.actions?.toggleFoldThread(message.get("date"), props.index)
           }
           icon={
             <Icon

src/packages/frontend/chat/side-chat.tsx

@@ -48,7 +48,8 @@ export default function SideChat({
   const input: string = useRedux(["input"], project_id, path);
   const search = desc?.get("data-search") ?? "";
   const selectedHashtags = desc?.get("data-selectedHashtags");
-  const scrollToBottom = desc.get("data-scrollToBottom") ?? null;
+  const scrollToIndex = desc.get("data-scrollToIndex") ?? null;
+  const scrollToDate = desc.get("data-scrollToIDate") ?? null;
   const addCollab: boolean = useRedux(["add_collab"], project_id, path);
   const is_uploading = useRedux(["is_uploading"], project_id, path);
   const project_map = useTypedRedux("projects", "project_map");
@@ -179,7 +180,8 @@ export default function SideChat({
           search={search}
           selectedHashtags={selectedHashtags}
           disableFilters={disableFilters}
-          scrollToBottom={scrollToBottom}
+          scrollToIndex={scrollToIndex}
+          scrollToDate={scrollToDate}
         />
       </div>
 

src/packages/frontend/chat/store.ts

@@ -29,10 +29,6 @@ export interface ChatState {
   has_unsaved_changes: boolean;
   unsent_user_mentions: MentionList;
   is_uploading: boolean;
-  // whenever this changes and is defined, do a scroll.
-  //  scrollToBottom = 0 -- scroll to the bottom
-  //  scrollToBottom = ms since epoch -- scroll to the bottom of that thread
-  scrollToBottom?: number | null;
   filterRecentH: number;
   llm_cost_room?: [number, number] | null;
   llm_cost_reply?: [number, number] | null;

src/packages/frontend/frame-editors/chat-editor/actions.ts

@@ -131,10 +131,10 @@ export class Actions extends CodeEditorActions<ChatEditorState> {
   }
 
   scrollToBottom = (frameId) => {
-    this.getChatActions(frameId)?.scrollToBottom();
+    this.getChatActions(frameId)?.scrollToIndex(-1);
   };
 
   scrollToTop = (frameId) => {
-    this.getChatActions(frameId)?.scrollToBottom(0);
+    this.getChatActions(frameId)?.scrollToIndex(0);
   };
 }