side chat: also support chat= fragment links

Author: williamstein

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

@@ -49,7 +49,7 @@ export default function SideChat({
   const search = desc?.get("data-search") ?? "";
   const selectedHashtags = desc?.get("data-selectedHashtags");
   const scrollToIndex = desc.get("data-scrollToIndex") ?? null;
-  const scrollToDate = desc.get("data-scrollToIDate") ?? null;
+  const scrollToDate = desc.get("data-scrollToDate") ?? null;
   const fragmentId = desc.get("data-fragmentId") ?? null;
   const addCollab: boolean = useRedux(["add_collab"], project_id, path);
   const is_uploading = useRedux(["is_uploading"], project_id, path);

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

@@ -22,6 +22,7 @@ import { handleSyncDBChange, initFromSyncDB } from "@cocalc/frontend/chat/sync";
 import { redux_name } from "@cocalc/frontend/app-framework";
 import { aux_file } from "@cocalc/util/misc";
 import type { FragmentId } from "@cocalc/frontend/misc/fragment-id";
+import { delay } from "awaiting";
 
 const FRAME_TYPE = "chatroom";
 
@@ -139,7 +140,7 @@ export class Actions extends CodeEditorActions<ChatEditorState> {
     this.getChatActions(frameId)?.scrollToIndex(0);
   };
 
-  gotoFragment = async (fragmentId: FragmentId) => {
+  async gotoFragment(fragmentId: FragmentId) {
     const { chat } = fragmentId as any;
     if (!chat) {
       return;
@@ -150,18 +151,10 @@ export class Actions extends CodeEditorActions<ChatEditorState> {
     if (!frameId) {
       return;
     }
-    const actions = this.getChatActions(frameId);
-    if (actions == null) {
-      return;
-    }
-    // if id is an iso string, just pass that in; otherwise, it could be a string
-    // repr of ms since epoch and in that case we have to convert it to a number
-    actions.scrollToDate(chat);
-    // do it again since above scrollTo will be wrong if frame just opened, since
-    // new chat frames typically scroll to bottom on initial render.
-    // TODO: we could obviously do better here!
-    for (const d of [5, 50, 500]) {
-      setTimeout(() => actions.scrollToDate(chat), d);
+    for (const d of [1, 10, 50, 500, 1000]) {
+      const actions = this.getChatActions(frameId);
+      actions?.scrollToDate(chat);
+      await delay(d);
     }
-  };
+  }
 }

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

@@ -105,6 +105,11 @@ import { SHELLS } from "./editor";
 import { test_line } from "./simulate_typing";
 import { misspelled_words } from "./spell-check";
 import { VideoChat } from "@cocalc/frontend/chat/video/video-chat";
+import type { FragmentId } from "@cocalc/frontend/misc/fragment-id";
+import {
+  chat,
+  getSideChatActions,
+} from "@cocalc/frontend/frame-editors/generic/chat";
 
 interface gutterMarkerParams {
   line: number;
@@ -2957,7 +2962,7 @@ export class Actions<
     type: string;
   }): Promise<string> {
     const state = (syncdoc ?? this._syncstring).get_state();
-    if (!(await this.wait_until_syncdoc_ready(syncdoc))) {
+    if (state != "ready" && !(await this.wait_until_syncdoc_ready(syncdoc))) {
       return "";
     }
     const frameId = this.show_focused_frame_of_type(type);
@@ -3061,4 +3066,31 @@ export class Actions<
   getVideoChat = () => {
     return this.videoChat;
   };
+
+  // NOTE: can't be an arrow function because gets called in derived classes
+  async gotoFragment(fragmentId: FragmentId) {
+    if (fragmentId == null) {
+      return;
+    }
+
+    if (fragmentId.line) {
+      this.programmatical_goto_line?.(fragmentId.line);
+    }
+
+    if (fragmentId.chat && !this.path.endsWith(".sage-chat")) {
+      // open side chat
+      this.redux
+        .getProjectActions(this.project_id)
+        .open_chat({ path: this.path });
+      this.show_focused_frame_of_type(chat.type);
+      for (const d of [1, 10, 50, 500, 1000]) {
+        const actions = getSideChatActions({
+          project_id: this.project_id,
+          path: this.path,
+        });
+        actions?.scrollToDate(fragmentId.chat);
+        await delay(d);
+      }
+    }
+  }
 }

src/packages/frontend/frame-editors/generic/chat.tsx

@@ -4,7 +4,6 @@
  */
 
 import { useEffect, useState } from "react";
-
 import { redux } from "@cocalc/frontend/app-framework";
 import type { ChatActions } from "@cocalc/frontend/chat/actions";
 import { initChat } from "@cocalc/frontend/chat/register";
@@ -17,7 +16,6 @@ import { EditorDescription } from "../frame-tree/types";
 export function chatFile(path: string): string {
   return hidden_meta_file(path, "sage-chat");
 }
-
 interface Props {
   font_size: number;
   desc;
@@ -72,13 +70,25 @@ export const chat: EditorDescription = {
   component: Chat,
 } as const;
 
+export function getSideChatActions({
+  project_id,
+  path,
+}: {
+  project_id: string;
+  path: string;
+}): ChatActions | null {
+  const actions = redux.getEditorActions(project_id, chatFile(path));
+  if (actions == null) {
+    return null;
+  }
+  return actions as ChatActions;
+}
+
 // TODO: this is an ugly special case for now to make the title bar buttons work.
 // TODO: but wait -- those buttons are gone now, so maybe this can be deleted?!
-export function undo(project_id, path0) {
-  const path = hidden_meta_file(path0, "sage-chat");
-  (redux.getEditorActions(project_id, path) as ChatActions)?.undo();
+export function undo(project_id, path) {
+  return getSideChatActions({ project_id, path })?.undo();
 }
-export function redo(project_id, path0) {
-  const path = hidden_meta_file(path0, "sage-chat");
-  (redux.getEditorActions(project_id, path) as ChatActions)?.redo();
+export function redo(project_id, path) {
+  return getSideChatActions({ project_id, path })?.redo();
 }

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

@@ -398,13 +398,17 @@ export class JupyterEditorActions extends BaseActions<JupyterEditorState> {
     this.close_recently_focused_frame_of_type("introspect");
   }
 
-  gotoFragment = async (fragmentId: FragmentId) => {
+  async gotoFragment(fragmentId: FragmentId) {
+    if (fragmentId.chat) {
+      // deal with side chat in base class
+      await super.gotoFragment(fragmentId);
+    }
     const frameId = await this.waitUntilFrameReady({
       type: "jupyter_cell_notebook",
       syncdoc: this.jupyter_actions.syncdb,
     });
     if (!frameId) return;
-    const { id, anchor } = fragmentId as any;
+    const { id, anchor } = fragmentId;
 
     const goto = (cellId: string) => {
       const actions = this.get_frame_actions(frameId);
@@ -463,7 +467,7 @@ export class JupyterEditorActions extends BaseActions<JupyterEditorState> {
       }
       return;
     }
-  };
+  }
 
   languageModelGetText(
     frameId: string,

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

@@ -1318,7 +1318,11 @@ export class Actions<T extends State = State> extends BaseActions<T | State> {
     this.zoom100(frameId);
   }
 
-  gotoFragment = async (fragmentId: FragmentId) => {
+  async gotoFragment(fragmentId: FragmentId) {
+    if (fragmentId.chat) {
+      // deal with side chat in base class
+      await super.gotoFragment(fragmentId);
+    }
     // console.log("gotoFragment ", fragmentId);
     const frameId = await this.waitUntilFrameReady({
       type: this.mainFrameType,
@@ -1341,7 +1345,7 @@ export class Actions<T extends State = State> extends BaseActions<T | State> {
       this.scrollElementIntoView(id, frameId);
       return;
     }
-  };
+  }
 
   public async show_table_of_contents(
     _id: string | undefined = undefined,

src/packages/frontend/misc/fragment-id.ts

@@ -7,36 +7,22 @@ The different types are inspired by https://en.wikipedia.org/wiki/URI_fragment
 import { debounce } from "lodash";
 import { IS_EMBEDDED } from "@cocalc/frontend/client/handle-target";
 
-interface Chat {
+export interface FragmentId {
   chat?: string; // fragment refers to ms since epoch of chat message
+  anchor?: string;
+  // a specific line in a document
+  line?: number;
+  // an id of an element or cell, e.g., in a whiteboard or Jupyter notebook.
+  // These ids are assumed globally unique, so no page is specified.
+  id?: string;
+  // a specific page in a document, but where no line or element in that page is specified.
+  page?: string;
 }
 
-interface Anchor extends Chat {
-  anchor: string;
+export function isPageFragment(x: any): x is FragmentId {
+  return !!x?.page;
 }
 
-// a specific line in a document
-interface Line extends Chat {
-  line: number;
-}
-
-// an id of an element or cell, e.g., in a whiteboard or Jupyter notebook.
-// These ids are assumed globally unique, so no page is specified.
-interface Id extends Chat {
-  id: string;
-}
-
-// a specific page in a document, but where no line or element in that page is specified.
-interface Page {
-  page: string;
-}
-
-export function isPageFragment(x: any): x is Page {
-  return typeof x?.page === "string";
-}
-
-export type FragmentId = Chat | Line | Id | Page | Anchor;
-
 namespace Fragment {
   // set is debounced so you can call it as frequently as you want...
   export const set = debounce((fragmentId: FragmentId | undefined) => {
@@ -60,8 +46,8 @@ namespace Fragment {
       console.warn("encode -- invalid fragmentId object: ", fragmentId);
       throw Error(`attempt to encode invalid fragmentId -- "${fragmentId}"`);
     }
-    if (fragmentId["anchor"] != null) {
-      return fragmentId["anchor"];
+    if (fragmentId.anchor != null) {
+      return fragmentId.anchor;
     }
     const v: string[] = [];
     for (const key in fragmentId) {

src/packages/frontend/notifications/fragment.ts

@@ -3,17 +3,21 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import Fragment, { isPageFragment } from "@cocalc/frontend/misc/fragment-id";
+import Fragment from "@cocalc/frontend/misc/fragment-id";
 import { NotificationFilter, isNotificationFilter } from "./mentions/types";
 
 export function getNotificationFilterFromFragment():
   | NotificationFilter
   | undefined {
-  const fragID = Fragment.get();
-  if (isPageFragment(fragID)) {
-    const { page } = fragID;
-    if (isNotificationFilter(page)) {
-      return page;
-    }
+  const fragmentId = Fragment.get();
+  if (fragmentId == null) {
+    return;
+  }
+  const { page } = fragmentId;
+  if (!page) {
+    return;
+  }
+  if (isNotificationFilter(page)) {
+    return page;
   }
 }

src/packages/frontend/notifications/mentions/mention-row.tsx

@@ -98,7 +98,7 @@ export function MentionRow(props: Props) {
     //    file.txt#chat=true,id=092ab039
     redux.getProjectActions(project_id).open_file({
       path: path,
-      chat: !fragmentId ? true : fragmentId["chat"],
+      chat: !!fragmentId?.chat,
       fragmentId,
     });
 

src/packages/frontend/project/open-file.ts

@@ -6,7 +6,6 @@
 // Implement the open_file actions for opening one single file in a project.
 
 import { callback } from "awaiting";
-
 import { alert_message } from "@cocalc/frontend/alerts";
 import { redux } from "@cocalc/frontend/app-framework";
 import { local_storage } from "@cocalc/frontend/editor-local-storage";