fix: clicking on enter button not working after streaming (#8255)

Author: uinstinct

gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx

@@ -57,7 +57,7 @@ function TipTapEditorInner(props: TipTapEditorProps) {
   const historyLength = useAppSelector((store) => store.session.history.length);
   const isInEdit = useAppSelector((store) => store.session.isInEdit);
 
-  const { editor, onEnterRef } = createEditorConfig({
+  const { editor, onEnter } = createEditorConfig({
     props,
     ideMessenger,
     dispatch,
@@ -68,9 +68,16 @@ function TipTapEditorInner(props: TipTapEditorProps) {
     if (props.isMainInput && editor) {
       mainEditorContext.setMainEditor(editor);
       mainEditorContext.setInputId(props.inputId);
-      mainEditorContext.onEnterRef.current = onEnterRef.current;
+      mainEditorContext.onEnterRef.current = onEnter;
     }
-  }, [editor, props.isMainInput, props.inputId, mainEditorContext, onEnterRef]);
+  }, [
+    editor,
+    props.isMainInput,
+    props.inputId,
+    mainEditorContext,
+    onEnter,
+    isStreaming,
+  ]);
 
   const [shouldHideToolbar, setShouldHideToolbar] = useState(true);
 
@@ -272,7 +279,7 @@ function TipTapEditorInner(props: TipTapEditorProps) {
           activeKey={activeKey}
           hidden={shouldHideToolbar && !props.isMainInput}
           onAddContextItem={() => insertCharacterWithWhitespace("@")}
-          onEnter={onEnterRef.current}
+          onEnter={onEnter}
           onImageFileSelected={(file) => {
             void handleImageFile(ideMessenger, file).then((result) => {
               if (!editor) {

gui/src/components/mainInput/TipTapEditor/utils/editorConfig.ts

@@ -200,7 +200,7 @@ export function createEditorConfig(options: {
                 return false;
               }
 
-              onEnterRef.current({
+              onEnter({
                 useCodebase: false,
                 noContext: !useActiveFile,
               });
@@ -210,7 +210,7 @@ export function createEditorConfig(options: {
             "Mod-Enter": () => {
               posthog.capture("gui_use_active_file_enter");
 
-              onEnterRef.current({
+              onEnter({
                 useCodebase: false,
                 noContext: !!useActiveFile,
               });
@@ -220,7 +220,7 @@ export function createEditorConfig(options: {
             "Alt-Enter": () => {
               posthog.capture("gui_use_active_file_enter");
 
-              onEnterRef.current({
+              onEnter({
                 useCodebase: false,
                 noContext: !!useActiveFile,
               });
@@ -346,30 +346,27 @@ export function createEditorConfig(options: {
     editable: !isStreaming || props.isMainInput,
   });
 
-  const onEnterRef = useUpdatingRef(
-    (modifiers: InputModifiers) => {
-      if (!editor) {
-        return;
-      }
-      if (isStreaming || (codeToEdit.length === 0 && isInEdit)) {
-        return;
-      }
+  const onEnter = (modifiers: InputModifiers) => {
+    if (!editor) {
+      return;
+    }
+    if (isStreaming || (codeToEdit.length === 0 && isInEdit)) {
+      return;
+    }
 
-      const json = editor.getJSON();
+    const json = editor.getJSON();
 
-      // Don't do anything if input box doesn't have valid content
-      if (!hasValidEditorContent(json)) {
-        return;
-      }
+    // Don't do anything if input box doesn't have valid content
+    if (!hasValidEditorContent(json)) {
+      return;
+    }
 
-      if (props.isMainInput) {
-        addRef.current(json);
-      }
+    if (props.isMainInput) {
+      addRef.current(json);
+    }
 
-      props.onEnter(json, modifiers, editor);
-    },
-    [props.onEnter, editor, props.isMainInput, codeToEdit, isInEdit],
-  );
+    props.onEnter(json, modifiers, editor);
+  };
 
-  return { editor, onEnterRef };
+  return { editor, onEnter };
 }