🤖 feat: add send button to chat input (#675)

Adds a clickable send button to the ChatInput component that mirrors the
existing Enter key behavior.\n\n- Button is shown for both workspace and
creation variants\n- Uses shared canSend guard so behavior matches
keyboard send\n- Tooltip documents the send keybind\n\n_Generated with _

Author: ibetitsmike

src/browser/components/ChatInput/index.tsx

@@ -47,6 +47,7 @@ import {
 } from "@/browser/utils/ui/keybinds";
 import { ModelSelector, type ModelSelectorRef } from "../ModelSelector";
 import { useModelLRU } from "@/browser/hooks/useModelLRU";
+import { SendHorizontal } from "lucide-react";
 import { VimTextArea } from "../VimTextArea";
 import { ImageAttachments, type ImageAttachment } from "../ImageAttachments";
 import {
@@ -61,6 +62,7 @@ import { useTelemetry } from "@/browser/hooks/useTelemetry";
 import { setTelemetryEnabled } from "@/common/telemetry";
 import { getTokenCountPromise } from "@/browser/utils/tokenizer/rendererClient";
 import { CreationCenterContent } from "./CreationCenterContent";
+import { cn } from "@/common/lib/utils";
 import { CreationControls } from "./CreationControls";
 import { useCreationWorkspace } from "./useCreationWorkspace";
 
@@ -163,6 +165,8 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
     [tokenCountPromise]
   );
   const hasTypedText = input.trim().length > 0;
+  const hasImages = imageAttachments.length > 0;
+  const canSend = (hasTypedText || hasImages) && !disabled && !isSending;
   // Setter for model - updates localStorage directly so useSendMessageOptions picks it up
   const setPreferredModel = useCallback(
     (model: string) => {
@@ -449,8 +453,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
   );
 
   const handleSend = async () => {
-    // Allow sending if there's text or images
-    if ((!input.trim() && imageAttachments.length === 0) || disabled || isSending) {
+    if (!canSend) {
       return;
     }
 
@@ -912,7 +915,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
             />
           )}
 
-          <div className="flex items-end gap-2.5" data-component="ChatInputControls">
+          <div className="flex items-end" data-component="ChatInputControls">
             <VimTextArea
               ref={inputRef}
               value={input}
@@ -1011,6 +1014,25 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
 
               <div className="ml-auto flex items-center gap-2" data-component="ModelControls">
                 <ModeSelector mode={mode} onChange={setMode} />
+                <TooltipWrapper inline>
+                  <button
+                    type="button"
+                    onClick={() => void handleSend()}
+                    disabled={!canSend}
+                    aria-label="Send message"
+                    className={cn(
+                      "inline-flex items-center gap-1 rounded-sm border border-border-light px-2 py-1 text-[11px] font-medium text-white transition-colors duration-200 disabled:opacity-50",
+                      mode === "plan"
+                        ? "bg-plan-mode hover:bg-plan-mode-hover disabled:hover:bg-plan-mode"
+                        : "bg-exec-mode hover:bg-exec-mode-hover disabled:hover:bg-exec-mode"
+                    )}
+                  >
+                    <SendHorizontal className="h-3.5 w-3.5" strokeWidth={2.5} />
+                  </button>
+                  <Tooltip className="tooltip" align="center">
+                    Send message ({formatKeybind(KEYBINDS.SEND_MESSAGE)})
+                  </Tooltip>
+                </TooltipWrapper>
               </div>
             </div>
 

src/browser/components/VimTextArea.tsx

@@ -31,12 +31,13 @@ export interface VimTextAreaProps
   mode: UIMode; // for styling (plan/exec focus color)
   isEditing?: boolean;
   suppressKeys?: string[]; // keys for which Vim should not interfere (e.g. ["Tab","ArrowUp","ArrowDown","Escape"]) when popovers are open
+  trailingAction?: React.ReactNode;
 }
 
 type VimMode = vim.VimMode;
 
 export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProps>(
-  ({ value, onChange, mode, isEditing, suppressKeys, onKeyDown, ...rest }, ref) => {
+  ({ value, onChange, mode, isEditing, suppressKeys, onKeyDown, trailingAction, ...rest }, ref) => {
     const textareaRef = useRef<HTMLTextAreaElement | null>(null);
     // Expose DOM ref to parent
     useEffect(() => {
@@ -219,10 +220,15 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
             autoCapitalize="none"
             autoComplete="off"
             {...rest}
+            style={{
+              ...(rest.style ?? {}),
+              ...(trailingAction ? { scrollbarGutter: "stable both-edges" } : {}),
+            }}
             className={cn(
               "w-full border text-light py-1.5 px-2 rounded font-mono text-[13px] resize-none min-h-8 max-h-[50vh] overflow-y-auto",
               "placeholder:text-placeholder",
               "focus:outline-none",
+              trailingAction && "pr-10",
               isEditing
                 ? "bg-editing-mode-alpha border-editing-mode focus:border-editing-mode"
                 : "bg-dark border-border-light",
@@ -232,6 +238,11 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
                 : "caret-white selection:bg-selection"
             )}
           />
+          {trailingAction && (
+            <div className="pointer-events-none absolute right-3.5 bottom-2.5 flex items-center">
+              <div className="pointer-events-auto">{trailingAction}</div>
+            </div>
+          )}
           {vimEnabled && vimMode === "normal" && value.length === 0 && (
             <div className="pointer-events-none absolute top-1.5 left-2 h-4 w-2 bg-white/50" />
           )}