feat: Add Enter key support for sending messages in chat

  - Implement Enter key handler in TextEditor component to submit messages
  - Allow Shift+Enter for creating new lines in messages
  - Clear editor content automatically after message submission
  - Pass onSubmit callback from HelpPanel to TextEditor
  - Dynamically build ProseMirror plugins to support keyboard shortcuts

  This improves the chat UX by enabling quick message submission without
  needing to click the send button, matching standard chat application behavior.

Author: jeffdyer

src/components/HelpPanel.tsx

@@ -1408,6 +1408,7 @@ export const HelpPanel = ({
               state={state}
               disabled={isLoading}
               placeholder={help.length > 0 ? "Reply to make changes..." : "What do you want to make today?"}
+              onSubmit={sendCombinedMessage}
             />
           </div>
         </div>
@@ -2204,7 +2205,7 @@ export const HelpPanel = ({
                                   });
                                 }
                               }}
-                              title={message.taskId && onLoadTaskFromHelp ? `Click to ${isCollapsed ? 'expand and load' : 'collapse'} task ${message.taskId.slice(0, 8)}` : 'Click to expand/collapse'}
+                              title={message.taskId && onLoadTaskFromHelp ? `Click to ${isCollapsed ? 'expand and load' : 'collapse'} task` : 'Click to expand/collapse'}
                             >
                               <div className="flex items-center space-x-2 flex-1 min-w-0">
                                 <svg
@@ -2236,16 +2237,6 @@ export const HelpPanel = ({
                                   )}
                                 </div>
                               </div>
-                              {isPending && (
-                                <div className="flex items-center text-xs text-blue-600">
-                                  <span>Processing</span>
-                                  <div className="flex items-center ml-1">
-                                    <div className="w-1 h-1 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '0ms', animationDuration: '1s' }}></div>
-                                    <div className="w-1 h-1 bg-blue-600 rounded-full mx-0.5 animate-bounce" style={{ animationDelay: '200ms', animationDuration: '1s' }}></div>
-                                    <div className="w-1 h-1 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '400ms', animationDuration: '1s' }}></div>
-                                  </div>
-                                </div>
-                              )}
                             </div>
 
                             {/* Collapsible content */}

src/components/TextEditor.tsx

@@ -108,7 +108,7 @@ const createPlaceholderPlugin = (placeholder) => {
   });
 };
 
-export const TextEditor = ({ state, placeholder = "", disabled = false }) => {
+export const TextEditor = ({ state, placeholder = "", disabled = false, onSubmit = null }) => {
   const [ editorView, setEditorView ] = useState(null);
   const [ hasFocus, setHasFocus ] = useState(false);
   const [ hasContent, setHasContent ] = useState(false);
@@ -153,32 +153,62 @@ export const TextEditor = ({ state, placeholder = "", disabled = false }) => {
     return false;
   };
 
-  const plugins = [
-    history(),
-    keymap({"Mod-z": undo, "Mod-y": redo, "Mod-`": toggleCodeBlock}),
-    keymap(baseKeymap),
-    new Plugin({
-      props: {
-        handleTextInput: handleBacktickInput
-      }
-    })
-  ];
-
-  // Add placeholder plugin if placeholder is provided
-  if (placeholder) {
-    plugins.push(createPlaceholderPlugin(placeholder));
-  }
-
   useEffect(() => {
     if (!editorRef.current) {
       return;
     }
+
+    // Handle Enter key to submit (Shift+Enter for new line)
+    const handleEnterKey = (state, dispatch, view) => {
+      // Only submit on plain Enter, not Shift+Enter
+      if (onSubmit && !disabled) {
+        const content = getEditorContent({ state });
+        if (content && content.trim()) {
+          onSubmit(content);
+          // Clear the editor after submission
+          if (dispatch) {
+            const tr = state.tr.replaceWith(0, state.doc.content.size, schema.nodes.paragraph.create());
+            dispatch(tr);
+          }
+          return true;
+        }
+      }
+      return false;
+    };
+
+    const customKeymap = {
+      "Mod-z": undo,
+      "Mod-y": redo,
+      "Mod-`": toggleCodeBlock
+    };
+
+    // Only add Enter handler if onSubmit is provided
+    if (onSubmit) {
+      customKeymap["Enter"] = handleEnterKey;
+      // Allow Shift+Enter for new lines
+      customKeymap["Shift-Enter"] = () => false; // Let default behavior handle it
+    }
+
+    // Build plugins dynamically based on props
+    const dynamicPlugins = [
+      history(),
+      keymap(customKeymap),
+      keymap(baseKeymap),
+      new Plugin({
+        props: {
+          handleTextInput: handleBacktickInput
+        }
+      })
+    ];
+
+    if (placeholder) {
+      dynamicPlugins.push(createPlaceholderPlugin(placeholder));
+    }
+
     const editorView = new EditorView(editorRef.current, {
       state: EditorState.create({
         schema,
-        plugins: [
-          ...plugins,
-        ],
+        plugins: dynamicPlugins,
       }),
       dispatchTransaction(transaction) {
         if (disabled) return;
@@ -216,7 +246,7 @@ export const TextEditor = ({ state, placeholder = "", disabled = false }) => {
         editorView.destroy();
       }
     };
-  }, [disabled]);
+  }, [disabled, onSubmit, placeholder]);
 
   // Update editor when disabled prop changes
   useEffect(() => {
@@ -233,6 +263,48 @@ export const TextEditor = ({ state, placeholder = "", disabled = false }) => {
   const { editorState } = state.data;
   useEffect(() => {
     if (editorState && editorView) {
+      // Rebuild plugins for state update
+      const handleEnterKey = (state, dispatch, view) => {
+        if (onSubmit && !disabled) {
+          const content = getEditorContent({ state });
+          if (content && content.trim()) {
+            onSubmit(content);
+            if (dispatch) {
+              const tr = state.tr.replaceWith(0, state.doc.content.size, schema.nodes.paragraph.create());
+              dispatch(tr);
+            }
+            return true;
+          }
+        }
+        return false;
+      };
+
+      const customKeymap = {
+        "Mod-z": undo,
+        "Mod-y": redo,
+        "Mod-`": toggleCodeBlock
+      };
+
+      if (onSubmit) {
+        customKeymap["Enter"] = handleEnterKey;
+        customKeymap["Shift-Enter"] = () => false;
+      }
+
+      const plugins = [
+        history(),
+        keymap(customKeymap),
+        keymap(baseKeymap),
+        new Plugin({
+          props: {
+            handleTextInput: handleBacktickInput
+          }
+        })
+      ];
+
+      if (placeholder) {
+        plugins.push(createPlaceholderPlugin(placeholder));
+      }
+
       const newEditorState = EditorState.fromJSON({
         schema,
         plugins,
@@ -241,7 +313,7 @@ export const TextEditor = ({ state, placeholder = "", disabled = false }) => {
       // Update hasContent when editor state changes from props
       setHasContent(newEditorState.doc.textContent.length > 0);
     }
-  }, [editorState]);
+  }, [editorState, editorView, onSubmit, disabled, placeholder]);
 
   return (
     <div className="relative">