chatrooms: fragment urls working

- side chat not implemented yet

Author: williamstein

src/packages/frontend/chat/actions.ts

@@ -52,7 +52,8 @@ import type {
 } from "./types";
 import { history_path } from "@cocalc/util/misc";
 import { initFromSyncDB, handleSyncDBChange, processSyncDBObj } from "./sync";
-import { getReplyToRoot, getThreadRootDate } from "./utils";
+import { getReplyToRoot, getThreadRootDate, toMsString } from "./utils";
+import Fragment from "@cocalc/frontend/misc/fragment-id";
 
 const MAX_CHATSTREAM = 10;
 
@@ -512,14 +513,18 @@ export class ChatActions extends Actions<ChatState> {
     this.scrollToIndex(Number.MAX_SAFE_INTEGER);
   };
 
-  scrollToDate = (date: number | Date | string) => {
+  scrollToDate = (date) => {
     this.clearScrollRequest();
+    this.frameTreeActions.set_frame_data({
+      id: this.frameId,
+      fragmentId: toMsString(date),
+    });
     setTimeout(() => {
       this.frameTreeActions.set_frame_data({
         id: this.frameId,
         // string version of ms since epoch, which is the key
         // in the messages immutable Map
-        scrollToDate: `${new Date(date).valueOf()}`,
+        scrollToDate: toMsString(date),
         scrollToIndex: null,
       });
     }, 1);
@@ -1091,6 +1096,16 @@ export class ChatActions extends Actions<ChatState> {
       selectedHashtags,
     });
   };
+
+  setFragment = (date?) => {
+    if (!date) {
+      Fragment.clear();
+    } else {
+      const fragmentId = toMsString(date);
+      Fragment.set({ chat: fragmentId });
+      this.frameTreeActions.set_frame_data({ id: this.frameId, fragmentId });
+    }
+  };
 }
 
 // We strip out any cased version of the string @chatgpt and also all mentions.

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

@@ -46,6 +46,7 @@ interface Props {
   scrollToIndex?: null | number | undefined;
   // scrollToDate = string ms from epoch
   scrollToDate?: null | undefined | string;
+  selectedDate?: string;
 }
 
 export function ChatLog({
@@ -62,6 +63,7 @@ export function ChatLog({
   disableFilters,
   scrollToIndex,
   scrollToDate,
+  selectedDate,
 }: Props) {
   const messages = useRedux(["messages"], project_id, path) as ChatMessages;
   const llm_cost_reply: [number, number] = useRedux(
@@ -237,6 +239,7 @@ export function ChatLog({
           llm_cost_reply,
           manualScrollRef,
           mode,
+          selectedDate,
         }}
       />
       <Composing
@@ -464,6 +467,7 @@ export function MessageList({
   llm_cost_reply,
   manualScrollRef,
   mode,
+  selectedDate,
 }: {
   messages;
   account_id;
@@ -479,6 +483,7 @@ export function MessageList({
   actions?;
   llm_cost_reply?;
   manualScrollRef?;
+  selectedDate?: string;
 }) {
   const virtuosoHeightsRef = useRef<{ [index: number]: number }>({});
   const virtuosoScroll = useVirtuosoScrollHook({
@@ -528,6 +533,7 @@ export function MessageList({
                 account_id={account_id}
                 user_map={user_map}
                 message={message}
+                selected={date == selectedDate}
                 project_id={project_id}
                 path={path}
                 font_size={fontSize}

src/packages/frontend/chat/chatroom.tsx

@@ -92,6 +92,7 @@ export function ChatRoom({
   const selectedHashtags = desc.get("data-selectedHashtags");
   const scrollToIndex = desc.get("data-scrollToIndex") ?? null;
   const scrollToDate = desc.get("data-scrollToDate") ?? null;
+  const fragmentId = desc.get("data-fragmentId") ?? null;
 
   const messages = useEditor("messages");
   const [filterRecentHCustom, setFilterRecentHCustom] = useState<string>("");
@@ -291,6 +292,7 @@ export function ChatRoom({
             selectedHashtags={selectedHashtags}
             scrollToIndex={scrollToIndex}
             scrollToDate={scrollToDate}
+            selectedDate={fragmentId}
           />
           {render_preview_message()}
         </div>

src/packages/frontend/chat/message.tsx

@@ -100,7 +100,6 @@ const AVATAR_MARGIN_LEFTRIGHT = "15px";
 interface Props {
   index: number;
   actions?: ChatActions;
-
   get_user_name: (account_id?: string) => string;
   messages;
   message: ChatMessageTyped;
@@ -126,6 +125,8 @@ interface Props {
   is_thread_body: boolean;
 
   llm_cost_reply?: [number, number] | null;
+
+  selected?: boolean;
 }
 
 export default function Message(props: Readonly<Props>) {
@@ -139,6 +140,7 @@ export default function Message(props: Readonly<Props>) {
     mode,
     project_id,
     font_size,
+    selected,
   } = props;
 
   const showAISummarize = redux
@@ -410,8 +412,11 @@ export default function Message(props: Readonly<Props>) {
       marginTop,
       borderRadius,
       fontSize: font_size,
-      padding: "9px",
-      ...(mode === "sidechat" ? { marginLeft: "5px", marginRight: "5px" } : {}),
+      padding: selected ? "6px" : "9px",
+      ...(mode === "sidechat"
+        ? { marginLeft: "5px", marginRight: "5px" }
+        : undefined),
+      ...(selected ? { border: "3px solid #66bb6a" } : undefined),
     } as const;
 
     const mainXS = mode === "standalone" ? 20 : 22;
@@ -422,7 +427,12 @@ export default function Message(props: Readonly<Props>) {
 
     return (
       <Col key={1} xs={mainXS}>
-        <div style={{ display: "flex" }}>
+        <div
+          style={{ display: "flex" }}
+          onClick={() => {
+            props.actions?.setFragment(message.get("date"));
+          }}
+        >
           {!props.is_prev_sender &&
           !is_viewers_message &&
           message.get("sender_id") ? (
@@ -468,6 +478,24 @@ export default function Message(props: Readonly<Props>) {
                   <Icon name="thumbs-up" />
                 </Button>
               )}{" "}
+              <Tooltip title="Select this message. Copy the browser URL to link to this message.">
+                <Button
+                  onClick={() => {
+                    props.actions?.setFragment(message.get("date"));
+                  }}
+                  size="small"
+                  type={"text"}
+                  style={{
+                    marginRight: "5px",
+                    float: "right",
+                    marginTop: "-4px",
+                    color: is_viewers_message ? "white" : "#888",
+                    fontSize: "12px",
+                  }}
+                >
+                  <Icon name="link" />
+                </Button>
+              </Tooltip>
             </span>
           )}
           {!isEditing && (

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

@@ -50,6 +50,7 @@ export default function SideChat({
   const selectedHashtags = desc?.get("data-selectedHashtags");
   const scrollToIndex = desc.get("data-scrollToIndex") ?? null;
   const scrollToDate = desc.get("data-scrollToIDate") ?? 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);
   const project_map = useTypedRedux("projects", "project_map");
@@ -182,6 +183,7 @@ export default function SideChat({
           disableFilters={disableFilters}
           scrollToIndex={scrollToIndex}
           scrollToDate={scrollToDate}
+          selectedDate={fragmentId}
         />
       </div>
 

src/packages/frontend/chat/utils.ts

@@ -12,6 +12,7 @@ import type {
   ChatMessages,
   ChatMessage,
 } from "./types";
+import { is_date as isDate } from "@cocalc/util/misc";
 
 export const INPUT_HEIGHT = "125px";
 
@@ -201,3 +202,24 @@ export function getThreadRootDate({
   const d = getReplyToRoot({ message, messages });
   return d?.valueOf() ?? 0;
 }
+
+// Use heuristics to try to turn "date", whatever it might be,
+// into a string representation of the number of ms since the
+// epoch.
+const floatRegex = /^[+-]?(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?$/;
+export function toMsString(date): string {
+  if (isDate(date)) {
+    return `${date.valueOf()}`;
+  }
+
+  switch (typeof date) {
+    case "number":
+      return `${date}`;
+    case "string":
+      if (floatRegex.test(date)) {
+        return `${parseInt(date)}`;
+      }
+    default:
+      return `${new Date(date).valueOf()}`;
+  }
+}

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

@@ -21,6 +21,7 @@ import {
 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";
 
 const FRAME_TYPE = "chatroom";
 
@@ -137,4 +138,30 @@ export class Actions extends CodeEditorActions<ChatEditorState> {
   scrollToTop = (frameId) => {
     this.getChatActions(frameId)?.scrollToIndex(0);
   };
+
+  gotoFragment = async (fragmentId: FragmentId) => {
+    const { chat } = fragmentId as any;
+    if (!chat) {
+      return;
+    }
+    const frameId = await this.waitUntilFrameReady({
+      type: FRAME_TYPE,
+    });
+    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);
+    }
+  };
 }

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

@@ -398,7 +398,7 @@ export class JupyterEditorActions extends BaseActions<JupyterEditorState> {
     this.close_recently_focused_frame_of_type("introspect");
   }
 
-  async gotoFragment(fragmentId: FragmentId) {
+  gotoFragment = async (fragmentId: FragmentId) => {
     const frameId = await this.waitUntilFrameReady({
       type: "jupyter_cell_notebook",
       syncdoc: this.jupyter_actions.syncdb,
@@ -463,7 +463,7 @@ export class JupyterEditorActions extends BaseActions<JupyterEditorState> {
       }
       return;
     }
-  }
+  };
 
   languageModelGetText(
     frameId: string,

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

@@ -455,8 +455,8 @@ export class Actions<T extends State = State> extends BaseActions<T | State> {
       obj.page =
         frameId == null
           ? this.defaultPageId()
-          : pages.get((this._get_frame_node(frameId)?.get("page") ?? 1) - 1) ??
-            this.defaultPageId();
+          : (pages.get((this._get_frame_node(frameId)?.get("page") ?? 1) - 1) ??
+            this.defaultPageId());
     }
 
     // Remove certain fields that never ever make no sense for a new element
@@ -1318,7 +1318,7 @@ export class Actions<T extends State = State> extends BaseActions<T | State> {
     this.zoom100(frameId);
   }
 
-  async gotoFragment(fragmentId: FragmentId) {
+  gotoFragment = async (fragmentId: FragmentId) => {
     // console.log("gotoFragment ", fragmentId);
     const frameId = await this.waitUntilFrameReady({
       type: this.mainFrameType,
@@ -1341,7 +1341,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

@@ -8,7 +8,7 @@ import { debounce } from "lodash";
 import { IS_EMBEDDED } from "@cocalc/frontend/client/handle-target";
 
 interface Chat {
-  chat?: boolean; // if true, fragment refers to message in side chat for the named path.
+  chat?: string; // fragment refers to ms since epoch of chat message
 }
 
 interface Anchor extends Chat {
@@ -35,7 +35,7 @@ export function isPageFragment(x: any): x is Page {
   return typeof x?.page === "string";
 }
 
-export type FragmentId = Line | Id | Page | Anchor;
+export type FragmentId = Chat | Line | Id | Page | Anchor;
 
 namespace Fragment {
   // set is debounced so you can call it as frequently as you want...