fix chat and markdown input state bug

Author: williamstein

src/packages/frontend/chat/actions.ts

@@ -287,14 +287,21 @@ export class ChatActions extends Actions<ChatState> {
     this.syncdb.set(message);
     if (!reply_to) {
       this.delete_draft(0);
+      // NOTE: we also clear search, since it's confusing to send a message and not
+      // even see it (if it doesn't match search).  We do NOT clear the hashtags though,
+      // since by default the message you are sending has those tags.
+      // Also, only do this clearing when not replying.
+      // For replies search find full threads not individual messages.
+      this.setState({
+        input: "",
+        search: "",
+      });
+    } else {
+      // TODO: but until we fix search, do this:
+      this.setState({
+        search: "",
+      });
     }
-    // NOTE: we also clear search, since it's confusing to send a message and not
-    // even see it (if it doesn't match search).  We do NOT clear the hashtags though,
-    // since by default the message you are sending has those tags.
-    this.setState({
-      input: "",
-      search: "",
-    });
     this.ensureDraftStartsWithHashtags(false);
 
     if (this.store) {
@@ -558,7 +565,7 @@ export class ChatActions extends Actions<ChatState> {
   public scrollToBottom(index: number = -1) {
     if (this.syncdb == null) return;
     // this triggers scroll behavior in the chat-log component.
-    this.setState({ scrollToBottom: null }); // noop, but necessary to trigger a change
+    this.setState({ scrollToBottom: null }); // no-op, but necessary to trigger a change
     this.setState({ scrollToBottom: index });
   }
 

src/packages/frontend/chat/input.tsx

@@ -5,7 +5,6 @@
 
 import { CSSProperties, useEffect, useMemo, useRef, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
-
 import {
   CSS,
   redux,
@@ -61,6 +60,10 @@ export default function ChatInput({
   submitMentionsRef,
   syncdb,
 }: Props) {
+  const onSendRef = useRef<Function>(on_send);
+  useEffect(() => {
+    onSendRef.current = on_send;
+  }, [on_send]);
   const { project_id, path, actions } = useFrameContext();
   const fontSize = useRedux(["font_size"], project_id, path);
   if (font_size == null) {
@@ -213,16 +216,7 @@ export default function ChatInput({
         setInput(input);
         saveChat(input);
       }}
-      onShiftEnter={(input) => {
-        // no need to save on unmount, since we are saving
-        // the correct state below.
-        saveOnUnmountRef.current = false;
-        lastSavedRef.current = input;
-        setInput(input);
-        saveChat(input);
-        saveChat.cancel();
-        on_send(input);
-      }}
+      onShiftEnter={on_send}
       height={height}
       placeholder={getPlaceholder(project_id, placeholder)}
       extraHelp={

src/packages/frontend/chat/message.tsx

@@ -628,10 +628,12 @@ export default function Message(props: Readonly<Props>) {
     );
   }
 
-  function sendReply() {
+  function sendReply(reply?: string) {
     if (props.actions == null) return;
     setReplying(false);
-    const reply = replyMentionsRef.current?.() ?? replyMessageRef.current;
+    if (!reply) {
+      reply = replyMentionsRef.current?.() ?? replyMessageRef.current;
+    }
     props.actions.send_reply({ message: message.toJS(), reply });
     props.actions.scrollToBottom(props.index);
   }
@@ -680,7 +682,12 @@ export default function Message(props: Readonly<Props>) {
           >
             Cancel
           </Button>
-          <Button onClick={sendReply} type="primary">
+          <Button
+            onClick={() => {
+              sendReply();
+            }}
+            type="primary"
+          >
             <Icon name="paper-plane" /> Send
           </Button>
           <LLMCostEstimationChat

src/packages/frontend/editors/markdown-input/multimode.tsx

@@ -189,6 +189,19 @@ export default function MultiMarkdownInput(props: Props) {
     path,
   } = useFrameContext();
 
+  // We use refs for shiftEnter and onChange to be absolutely
+  // 100% certain that if either of these functions is changed,
+  // then the new function is used, even if the components
+  // implementing our markdown editor mess up somehow and hang on.
+  const onShiftEnterRef = useRef<any>(onShiftEnter);
+  useEffect(() => {
+    onShiftEnterRef.current = onShiftEnter;
+  }, [onShiftEnter]);
+  const onChangeRef = useRef<any>(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
   const editBar2 = useRef<JSX.Element | undefined>(undefined);
 
   function getCache() {
@@ -380,7 +393,9 @@ export default function MultiMarkdownInput(props: Props) {
           divRef={editorDivRef}
           selectionRef={selectionRef}
           value={value}
-          onChange={onChange}
+          onChange={(value) => {
+            onChangeRef.current?.(value);
+          }}
           saveDebounceMs={saveDebounceMs}
           getValueRef={getValueRef}
           project_id={project_id}
@@ -389,7 +404,9 @@ export default function MultiMarkdownInput(props: Props) {
           onUploadStart={onUploadStart}
           onUploadEnd={onUploadEnd}
           enableMentions={enableMentions}
-          onShiftEnter={onShiftEnter}
+          onShiftEnter={(value) => {
+            onShiftEnterRef.current?.(value);
+          }}
           placeholder={placeholder ?? "Type markdown..."}
           fontSize={fontSize}
           cmOptions={cmOptions}
@@ -400,7 +417,7 @@ export default function MultiMarkdownInput(props: Props) {
           extraHelp={extraHelp}
           hideHelp={hideHelp}
           onBlur={(value) => {
-            onChange?.(value);
+            onChangeRef.current?.(value);
             if (!ignoreBlur.current) {
               onBlur?.();
             }
@@ -463,14 +480,14 @@ export default function MultiMarkdownInput(props: Props) {
             getValueRef={getValueRef}
             actions={{
               set_value: (value) => {
-                onChange?.(value);
+                onChangeRef.current?.(value);
               },
               shiftEnter: (value) => {
-                onChange?.(value);
-                onShiftEnter?.(value);
+                onChangeRef.current?.(value);
+                onShiftEnterRef.current?.(value);
               },
               altEnter: (value) => {
-                onChange?.(value);
+                onChangeRef.current?.(value);
                 setMode("markdown");
               },
               set_cursor_locs: onCursors,