fix #7662 -- this might fix this chat issue; it makes sense, but I wasn't able to reproduce it, so I'm not sure. Reopen if still broken.

Author: williamstein

src/packages/frontend/chat/actions.ts

@@ -355,8 +355,9 @@ export class ChatActions extends Actions<ChatState> {
   }
 
   // Used to edit sent messages.
-  // TODO: this is **Extremely** shockingly inefficient; it assumes
-  //       the number of edits is small.
+  // NOTE: this is inefficient; it assumes
+  //       the number of edits is small, which is reasonable -- nobody makes hundreds of distinct
+  //       edits of a single message.
   public send_edit(message: ChatMessageTyped, content: string): void {
     if (this.syncdb == null) {
       // WARNING: give an error or try again later?
@@ -432,13 +433,24 @@ export class ChatActions extends Actions<ChatState> {
       this.store?.get("messages") ?? (fromJS({}) as ChatMessages),
     );
     const time = reply_to?.valueOf() ?? 0;
-    this.delete_draft(-time);
-    return this.send_chat({
+    const time_stamp_str = this.send_chat({
       input: reply,
       sender_id: from ?? this.redux.getStore("account").get_account_id(),
       reply_to,
       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);
+    return time_stamp_str;
   }
 
   // negative date is used for replies.
@@ -451,11 +463,13 @@ export class ChatActions extends Actions<ChatState> {
     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.
-    this.syncdb.delete({
-      event: "draft",
-      sender_id,
-      date,
-    });
+    if (date) {
+      this.syncdb.delete({
+        event: "draft",
+        sender_id,
+        date,
+      });
+    }
     this.syncdb.delete({
       event: "draft",
       sender_id,

src/packages/frontend/chat/message.tsx

@@ -624,11 +624,10 @@ export default function Message(props: Readonly<Props>) {
 
   function sendReply() {
     if (props.actions == null) return;
+    setReplying(false);
     const reply = replyMentionsRef.current?.() ?? replyMessageRef.current;
     props.actions.send_reply({ message: message.toJS(), reply });
-    props.actions.delete_draft(date);
     props.actions.scrollToBottom(props.index);
-    setReplying(false);
   }
 
   function renderComposeReply() {
@@ -664,7 +663,7 @@ export default function Message(props: Readonly<Props>) {
           }}
           placeholder={"Reply to the above message..."}
         />
-        <div style={{ margin: "5px 0" }}>
+        <div style={{ margin: "5px 0", display: "flex" }}>
           <Button
             style={{ marginRight: "5px" }}
             onClick={() => {

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

@@ -162,18 +162,6 @@ export default function SideChat({ project_id, path, style }: Props) {
                 Send
               </Button>
             </Tooltip>
-            {/*
-            This seems hard to implement with our current  model and
-            below doesn't work
-            <Button
-              style={{ marginLeft: "5px" }}
-              onClick={() => {
-                actions.delete_draft(0);
-                actions.set_input('');
-              }}
-            >
-              Cancel
-            </Button> */}
             <LLMCostEstimationChat
               compact
               llm_cost={llm_cost_room}