fix #773 -- implement chat TimeTravel output rendering properly

- I just did this mainly as an excuse to slightly improve the code
  quality

Author: williamstein

src/packages/frontend/chat/actions.ts

@@ -6,7 +6,6 @@
 import { List, Map, Seq, fromJS, Map as immutableMap } from "immutable";
 import { debounce } from "lodash";
 import { Optional } from "utility-types";
-
 import { setDefaultLLM } from "@cocalc/frontend/account/useLanguageModelSetting";
 import { Actions, redux } from "@cocalc/frontend/app-framework";
 import { History as LanguageModelHistory } from "@cocalc/frontend/client/types";
@@ -53,6 +52,7 @@ import {
   MessageHistory,
 } from "./types";
 import { getSelectedHashtagsSearch } from "./utils";
+import { history_path } from "@cocalc/util/misc";
 
 const MAX_CHATSTREAM = 10;
 
@@ -1122,6 +1122,16 @@ export class ChatActions extends Actions<ChatState> {
       setDefaultLLM(llm);
     }
   }
+
+  showTimeTravelInNewTab = () => {
+    const store = this.store;
+    if (store == null) return;
+    redux.getProjectActions(store.get("project_id")!).open_file({
+      path: history_path(store.get("path")!),
+      foreground: true,
+      foreground_project: true,
+    });
+  };
 }
 
 export function getRootMessage(

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

@@ -11,7 +11,6 @@ import { Alert } from "antd";
 import { List, Set as immutableSet } from "immutable";
 import { MutableRefObject, useEffect, useMemo, useRef } from "react";
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
-
 import { chatBotName, isChatBot } from "@cocalc/frontend/account/chatbot";
 import {
   TypedMap,
@@ -55,7 +54,6 @@ export function ChatLog(props: Readonly<Props>) {
     project_id,
     path,
   );
-  const virtuosoHeightsRef = useRef<{ [index: number]: number }>({});
 
   // see similar code in task list:
   const selectedHashtags0 = useRedux(["selectedHashtags"], project_id, path);
@@ -132,11 +130,6 @@ export function ChatLog(props: Readonly<Props>) {
     };
   }, [scrollToBottomRef != null]);
 
-  const virtuosoScroll = useVirtuosoScrollHook({
-    cacheId: `${project_id}${path}`,
-    initialState: { index: messages.size - 1, offset: 0 }, // starts scrolled to the newest message.
-  });
-
   return (
     <>
       {visibleHashtags.size > 0 && (
@@ -159,90 +152,23 @@ export function ChatLog(props: Readonly<Props>) {
           filterRecentH={filterRecentH}
         />
       )}
-      <Virtuoso
-        ref={virtuosoRef}
-        totalCount={sortedDates.length}
-        itemSize={(el) => {
-          // see comment in jupyter/cell-list.tsx
-          const h = el.getBoundingClientRect().height;
-          const data = el.getAttribute("data-item-index");
-          if (data != null) {
-            const index = parseInt(data);
-            virtuosoHeightsRef.current[index] = h;
-          }
-          return h;
-        }}
-        itemContent={(index) => {
-          const date = sortedDates[index];
-          const message: ChatMessageTyped | undefined = messages.get(date);
-          if (message == null) {
-            // shouldn't happen.  But we should be robust to such a possibility.
-            return <div style={{ height: "1px" }} />;
-          }
-
-          const is_thread = isThread(messages, message);
-          // if we search for a message, we treat all threads as unfolded
-          const force_unfold = !!search;
-          const is_folded =
-            !force_unfold && isFolded(messages, message, account_id);
-          const is_thread_body = message.get("reply_to") != null;
-          const h = virtuosoHeightsRef.current[index];
-
-          return (
-            <div style={{ overflow: "hidden" }}>
-              <DivTempHeight height={h ? `${h}px` : undefined}>
-                <Message
-                  key={date}
-                  index={index}
-                  account_id={account_id}
-                  user_map={user_map}
-                  message={message}
-                  project_id={project_id}
-                  path={path}
-                  font_size={fontSize}
-                  selectedHashtags={selectedHashtags}
-                  actions={actions}
-                  is_thread={is_thread}
-                  is_folded={is_folded}
-                  force_unfold={force_unfold}
-                  is_thread_body={is_thread_body}
-                  is_prev_sender={isPrevMessageSender(
-                    index,
-                    sortedDates,
-                    messages,
-                  )}
-                  is_next_sender={isNextMessageSender(
-                    index,
-                    sortedDates,
-                    messages,
-                  )}
-                  show_avatar={
-                    !isNextMessageSender(index, sortedDates, messages)
-                  }
-                  mode={mode}
-                  get_user_name={(account_id: string | undefined) =>
-                    // ATTN: this also works for LLM chat bot IDs, not just account UUIDs
-                    typeof account_id === "string"
-                      ? getUserName(user_map, account_id)
-                      : "Unknown name"
-                  }
-                  scroll_into_view={() =>
-                    virtuosoRef.current?.scrollIntoView({ index })
-                  }
-                  allowReply={
-                    messages.getIn([sortedDates[index + 1], "reply_to"]) == null
-                  }
-                  llm_cost_reply={llm_cost_reply}
-                />
-              </DivTempHeight>
-            </div>
-          );
-        }}
-        rangeChanged={({ endIndex }) => {
-          // manually scrolling if NOT at the bottom.
-          manualScrollRef.current = endIndex < sortedDates.length - 1;
+      <MessageList
+        {...{
+          virtuosoRef,
+          sortedDates,
+          messages,
+          search,
+          account_id,
+          user_map,
+          project_id,
+          path,
+          fontSize,
+          selectedHashtags,
+          actions,
+          llm_cost_reply,
+          manualScrollRef,
+          mode,
         }}
-        {...virtuosoScroll}
       />
       <Composing
         projectId={project_id}
@@ -455,3 +381,133 @@ function NotShowing({ num, search, filterRecentH }: NotShowingProps) {
     />
   );
 }
+
+export function MessageList({
+  messages,
+  account_id,
+  virtuosoRef,
+  sortedDates,
+  search,
+  user_map,
+  project_id,
+  path,
+  fontSize,
+  selectedHashtags,
+  actions,
+  llm_cost_reply,
+  manualScrollRef,
+  mode,
+}: {
+  messages;
+  account_id;
+  user_map;
+  mode;
+  sortedDates;
+  virtuosoRef?;
+  search?;
+  project_id?;
+  path?;
+  fontSize?;
+  selectedHashtags?;
+  actions?;
+  llm_cost_reply?;
+  manualScrollRef?;
+}) {
+  const virtuosoHeightsRef = useRef<{ [index: number]: number }>({});
+  const virtuosoScroll = useVirtuosoScrollHook({
+    cacheId: `${project_id}${path}`,
+    initialState: { index: messages.size - 1, offset: 0 }, // starts scrolled to the newest message.
+  });
+
+  return (
+    <Virtuoso
+      ref={virtuosoRef}
+      totalCount={sortedDates.length}
+      itemSize={(el) => {
+        // see comment in jupyter/cell-list.tsx
+        const h = el.getBoundingClientRect().height;
+        const data = el.getAttribute("data-item-index");
+        if (data != null) {
+          const index = parseInt(data);
+          virtuosoHeightsRef.current[index] = h;
+        }
+        return h;
+      }}
+      itemContent={(index) => {
+        const date = sortedDates[index];
+        const message: ChatMessageTyped | undefined = messages.get(date);
+        if (message == null) {
+          // shouldn't happen.  But we should be robust to such a possibility.
+          return <div style={{ height: "1px" }} />;
+        }
+
+        const is_thread = isThread(messages, message);
+        // if we search for a message, we treat all threads as unfolded
+        const force_unfold = !!search;
+        const is_folded =
+          !force_unfold && isFolded(messages, message, account_id);
+        const is_thread_body = message.get("reply_to") != null;
+        const h = virtuosoHeightsRef.current[index];
+
+        return (
+          <div style={{ overflow: "hidden" }}>
+            <DivTempHeight height={h ? `${h}px` : undefined}>
+              <Message
+                key={date}
+                index={index}
+                account_id={account_id}
+                user_map={user_map}
+                message={message}
+                project_id={project_id}
+                path={path}
+                font_size={fontSize}
+                selectedHashtags={selectedHashtags}
+                actions={actions}
+                is_thread={is_thread}
+                is_folded={is_folded}
+                force_unfold={force_unfold}
+                is_thread_body={is_thread_body}
+                is_prev_sender={isPrevMessageSender(
+                  index,
+                  sortedDates,
+                  messages,
+                )}
+                is_next_sender={isNextMessageSender(
+                  index,
+                  sortedDates,
+                  messages,
+                )}
+                show_avatar={!isNextMessageSender(index, sortedDates, messages)}
+                mode={mode}
+                get_user_name={(account_id: string | undefined) =>
+                  // ATTN: this also works for LLM chat bot IDs, not just account UUIDs
+                  typeof account_id === "string"
+                    ? getUserName(user_map, account_id)
+                    : "Unknown name"
+                }
+                scroll_into_view={
+                  virtuosoRef
+                    ? () => virtuosoRef.current?.scrollIntoView({ index })
+                    : undefined
+                }
+                allowReply={
+                  messages.getIn([sortedDates[index + 1], "reply_to"]) == null
+                }
+                llm_cost_reply={llm_cost_reply}
+              />
+            </DivTempHeight>
+          </div>
+        );
+      }}
+      rangeChanged={
+        manualScrollRef
+          ? ({ endIndex }) => {
+              // manually scrolling if NOT at the bottom.
+              manualScrollRef.current = endIndex < sortedDates.length - 1;
+            }
+          : undefined
+      }
+      {...virtuosoScroll}
+    />
+  );
+}

src/packages/frontend/chat/chatroom.tsx

@@ -35,7 +35,7 @@ import SelectComputeServerForFile from "@cocalc/frontend/compute/select-server-f
 import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
 import { SaveButton } from "@cocalc/frontend/frame-editors/frame-tree/save-button";
 import { sanitize_html_safe } from "@cocalc/frontend/misc";
-import { history_path, hoursToTimeIntervalHuman } from "@cocalc/util/misc";
+import { hoursToTimeIntervalHuman } from "@cocalc/util/misc";
 import { ChatActions } from "./actions";
 import { ChatLog } from "./chat-log";
 import ChatInput from "./input";
@@ -131,11 +131,7 @@ export const ChatRoom: React.FC<Props> = ({ project_id, path, is_visible }) => {
   }
 
   function show_timetravel(): void {
-    redux.getProjectActions(project_id).open_file({
-      path: history_path(path),
-      foreground: true,
-      foreground_project: true,
-    });
+    actions.showTimeTravelInNewTab();
   }
 
   function render_preview_message(): JSX.Element | undefined {
@@ -558,12 +554,14 @@ export const ChatRoom: React.FC<Props> = ({ project_id, path, is_visible }) => {
   //  https://github.com/sagemathinc/cocalc/issues/7554
   return (
     <FrameContext.Provider
-      value={{
-        project_id,
-        path,
-        isVisible: !!is_visible,
-        redux,
-      } as any}
+      value={
+        {
+          project_id,
+          path,
+          isVisible: !!is_visible,
+          redux,
+        } as any
+      }
     >
       <div
         onMouseMove={mark_as_read}

src/packages/frontend/chat/message.tsx

@@ -112,7 +112,7 @@ interface Props {
   mode: Mode;
   selectedHashtags?: Set<string>;
 
-  scroll_into_view: () => void; // call to scroll this message into view
+  scroll_into_view?: () => void; // call to scroll this message into view
 
   // if true, include a reply button - this should only be for messages
   // that don't have an existing reply to them already.
@@ -232,7 +232,7 @@ export default function Message(props: Readonly<Props>) {
 
   useLayoutEffect(() => {
     if (replying) {
-      props.scroll_into_view();
+      props.scroll_into_view?.();
     }
   }, [replying]);
 
@@ -337,7 +337,7 @@ export default function Message(props: Readonly<Props>) {
     }
     props.actions.set_editing(message, true);
     setAutoFocusEdit(true);
-    props.scroll_into_view();
+    props.scroll_into_view?.();
   }
 
   function avatar_column() {
@@ -736,7 +736,14 @@ export default function Message(props: Readonly<Props>) {
   }
 
   function renderReplyRow() {
-    if (replying || generating || !props.allowReply || is_folded) return;
+    if (
+      replying ||
+      generating ||
+      !props.allowReply ||
+      is_folded ||
+      props.actions == null
+    )
+      return;
 
     return (
       <div style={{ textAlign: "center", marginBottom: "5px", width: "100%" }}>