fix #7662, hopefully -- chat replies reappear

- I was using two different conflicting definitions of the date field
  for drafts, which caused predictable problems. Now we only use the
  negative of the root of the thread in all cases.  I deleted *all* the
  hacky code (set timeouts, deleting negatives, etc.), and wrote things
  to use this clearer definition, hopefully

Author: williamstein

src/packages/frontend/chat/actions.ts

@@ -58,7 +58,7 @@ const MAX_CHATSTREAM = 10;
 
 export class ChatActions extends Actions<ChatState> {
   public syncdb?: SyncDB;
-  private store?: ChatStore;
+  public store?: ChatStore;
   // We use this to ensure at most once chatgpt output is streaming
   // at a time in a given chatroom.  I saw a bug where hundreds started
   // at once and it really did send them all to openai at once, and
@@ -424,56 +424,40 @@ export class ChatActions extends Actions<ChatState> {
     noNotification?: boolean;
     reply_to?: Date;
   }): string {
+    const store = this.store;
+    if (store == null) {
+      return "";
+    }
     // the reply_to field of the message is *always* the root.
     // the order of the replies is by timestamp.  This is meant
     // to make sure chat is just 1 layer deep, rather than a
     // full tree structure, which is powerful but too confusing.
-    reply_to ??= getReplyToRoot(
-      message,
-      this.store?.get("messages") ?? (fromJS({}) as ChatMessages),
-    );
-    const time = reply_to?.valueOf() ?? 0;
+    const reply_to_value =
+      reply_to != null
+        ? reply_to.valueOf()
+        : store.getThreadRootDate(new Date(message.date).valueOf());
     const time_stamp_str = this.send_chat({
       input: reply,
       sender_id: from ?? this.redux.getStore("account").get_account_id(),
-      reply_to,
+      reply_to: new Date(reply_to_value),
       noNotification,
     });
-    this.delete_draft(-time);
-    // it's conceivable that for some clients they recreate the draft
-    // message right as the editor for that message is being removed.
-    // Thus we do an extra delete a moment after send (after successfully
-    // sending the message) to be sure the draft is really gone.
-    // See https://github.com/sagemathinc/cocalc/issues/7662
-    // and note that I'm not able to reproduce this, so it might not
-    // be the right solution.
-    setTimeout(() => {
-      this.delete_draft(-time);
-    }, 500);
+    // negative date of reply_to root is used for replies.
+    this.delete_draft(-reply_to_value);
     return time_stamp_str;
   }
 
-  // negative date is used for replies.
   public delete_draft(
     date: number,
     commit: boolean = true,
     sender_id: string | undefined = undefined,
   ) {
     if (!this.syncdb) return;
     sender_id = sender_id ?? this.redux.getStore("account").get_account_id();
-    // date should always be negative for drafts (stupid, but that's the code),
-    // so I'm just deleting both for now.
-    if (date) {
-      this.syncdb.delete({
-        event: "draft",
-        sender_id,
-        date,
-      });
-    }
     this.syncdb.delete({
       event: "draft",
       sender_id,
-      date: -date,
+      date,
     });
     if (commit) {
       this.syncdb.commit();
@@ -1147,7 +1131,7 @@ export function getRootMessage(
   }
 }
 
-function getReplyToRoot(
+export function getReplyToRoot(
   message: ChatMessage,
   messages: ChatMessages,
 ): Date | undefined {

src/packages/frontend/chat/input.tsx

@@ -23,7 +23,11 @@ interface Props {
   on_send: (value: string) => void;
   onChange: (string) => void;
   syncdb: SyncDB | undefined;
-  date: number; // ms since epoch of when this message was first sent; set to 0 for editing new message. set to -time (negative time) to respond to message at time!
+  // date:
+  //   - ms since epoch of when this message was first sent
+  //   - set to 0 for editing new message
+  //   - set to -time (negative time) to respond to thread, where time is the time of ROOT message of the the thread.
+  date: number;
   input?: string;
   on_paste?: (e) => void;
   height?: string;
@@ -93,6 +97,7 @@ export default function ChatInput({
       // but definitely don't save (thus updating active) if
       // the input didn't really change, since we use active for
       // showing that a user is writing to other users.
+      console.log("saveChat", { date });
       const input0 = syncdb
         .get_one({
           event: "draft",

src/packages/frontend/chat/message.tsx

@@ -5,8 +5,7 @@
 
 import { Button, Col, Popconfirm, Row, Space, Tooltip } from "antd";
 import { Map } from "immutable";
-import { CSSProperties, useLayoutEffect } from "react";
-
+import { CSSProperties, useEffect, useLayoutEffect } from "react";
 import { Avatar } from "@cocalc/frontend/account/avatar/avatar";
 import {
   CSS,
@@ -187,10 +186,14 @@ export default function Message(props: Readonly<Props>) {
   const submitMentionsRef = useRef<SubmitMentionsFn>();
 
   const [replying, setReplying] = useState<boolean>(() => {
+    if (!props.allowReply) {
+      return false;
+    }
+    const replyDate = -(props.actions?.store?.getThreadRootDate(date) ?? 0);
     const draft = props.actions?.syncdb?.get_one({
       event: "draft",
       sender_id: props.account_id,
-      date: -date,
+      date: replyDate,
     });
     if (draft == null) {
       return false;
@@ -202,6 +205,12 @@ export default function Message(props: Readonly<Props>) {
     }
     return true;
   });
+  useEffect(() => {
+    if (!props.allowReply) {
+      setReplying(false);
+    }
+  }, [props.allowReply]);
+
   const [autoFocusReply, setAutoFocusReply] = useState<boolean>(false);
   const [autoFocusEdit, setAutoFocusEdit] = useState<boolean>(false);
 
@@ -640,6 +649,7 @@ export default function Message(props: Readonly<Props>) {
       // when null.
       return;
     }
+    const replyDate = -(props.actions.store?.getThreadRootDate(date) ?? 0);
     return (
       <div style={{ marginLeft: mode === "standalone" ? "30px" : "0" }}>
         <ChatInput
@@ -654,7 +664,7 @@ export default function Message(props: Readonly<Props>) {
           on_send={sendReply}
           height={"auto"}
           syncdb={props.actions.syncdb}
-          date={-date}
+          date={replyDate}
           onChange={(value) => {
             replyMessageRef.current = value;
             // replyMentionsRef does not submit mentions, only gives us the value
@@ -668,7 +678,7 @@ export default function Message(props: Readonly<Props>) {
             style={{ marginRight: "5px" }}
             onClick={() => {
               setReplying(false);
-              props.actions?.delete_draft(date);
+              props.actions?.delete_draft(replyDate);
             }}
           >
             Cancel

src/packages/frontend/chat/store.ts

@@ -8,6 +8,7 @@ import { List, fromJS, Map as immutableMap } from "immutable";
 import { Store, redux } from "@cocalc/frontend/app-framework";
 import type { HashtagState } from "@cocalc/frontend/editors/task-editor/types";
 import { ChatMessages, MentionList } from "./types";
+import { getReplyToRoot } from "./actions";
 
 export interface ChatState {
   project_id?: string;
@@ -65,4 +66,14 @@ export class ChatStore extends Store<ChatState> {
       filterRecentH: 0,
     };
   };
+
+  getThreadRootDate = (date: number): number => {
+    const messages = this.get("messages") ?? (fromJS({}) as ChatMessages);
+    const message = messages.get(`${date}`)?.toJS();
+    if (message == null) {
+      return 0;
+    }
+    const d = getReplyToRoot(message, messages);
+    return d?.valueOf() ?? 0;
+  };
 }