fix chat bugs -- fix #6606, fix #6668

Author: williamstein

src/packages/frontend/chat/message.tsx

@@ -186,7 +186,15 @@ export default function Message(props: Readonly<Props>) {
 
   const submitMentionsRef = useRef<SubmitMentionsFn>();
 
-  const [replying, setReplying] = useState<boolean>(false);
+  const [replying, setReplying] = useState<boolean>(() => {
+    return (
+      props.actions?.syncdb?.get_one({
+        event: "draft",
+        sender_id: props.account_id,
+        date: -date,
+      }) != null
+    );
+  });
 
   const replyMessageRef = useRef<string>("");
   const replyMentionsRef = useRef<SubmitMentionsFn>();
@@ -484,19 +492,6 @@ export default function Message(props: Readonly<Props>) {
                     </Popconfirm>
                   </Tooltip>
                 ) : undefined}
-                {/* {!is_thread_body && props.allowReply && !replying ? (
-                  <Button
-                    type="text"
-                    disabled={replying}
-                    style={{
-                      color: is_viewers_message ? "white" : "#555",
-                    }}
-                    size="small"
-                    onClick={() => setReplying(true)}
-                  >
-                    <Icon name="reply" /> Reply
-                  </Button>
-                ) : undefined} */}
                 {message.get("history").size > 1 ||
                 message.get("editing").size > 0
                   ? editing_status(isEditing)
@@ -659,20 +654,25 @@ export default function Message(props: Readonly<Props>) {
           placeholder={"Reply to the above message..."}
         />
         <div style={{ margin: "5px 0" }}>
-          <Button
-            onClick={sendReply}
-            type="primary"
-            style={{ marginRight: "5px" }}
-          >
-            <Icon name="paper-plane" /> Send Reply
-          </Button>
           <Button
             onClick={() => {
               setReplying(false);
+              props.actions?.syncdb?.delete({
+                event: "draft",
+                sender_id: props.account_id,
+                date: -date,
+              });
             }}
           >
             Cancel
           </Button>
+          <Button
+            onClick={sendReply}
+            type="primary"
+            style={{ marginRight: "5px" }}
+          >
+            <Icon name="paper-plane" /> Send Reply
+          </Button>
           <LLMCostEstimationChat
             llm_cost={llm_cost_reply}
             compact={false}

src/packages/frontend/chat/types.ts

@@ -30,8 +30,8 @@ export interface MessageHistory {
 }
 
 export interface ChatMessage {
-  sender_id: string;
   event: "chat";
+  sender_id: string;
   history: MessageHistory[];
   date: Date | string; // string is used to create it
   reply_to?: string;
@@ -40,6 +40,22 @@ export interface ChatMessage {
   folding?: string[];
 }
 
+// this type isn't explicitly used anywhere yet, but the actual structure is and I just
+// wanted to document it.
+export interface Draft {
+  event: "draft";
+  // account_id of the user writing this draft
+  sender_id: string;
+  // ms since epoch when this draft was last edited.  This is used to show a message to
+  // other users that one user is writing a message.
+  active: number;
+  // date = 0 when composing an entirely new message
+  // data = -[timestamp in ms] of the message being replied to
+  date: number;
+  // input = string contents of current version of the message
+  input: "string";
+}
+
 export type ChatMessageTyped = TypedMap<{
   sender_id: string;
   event: "chat";