Fixing regression and adding plus button to HomeChatInput (#2135)

e2e-tests/attach_image.spec.ts

@@ -15,10 +15,23 @@ const SNAPSHOT_NAME = "attach-image";
 test("attach image - home chat", async ({ po }) => {
   await po.setUp();
 
+  // Open auxiliary actions menu
   await po
     .getHomeChatInputContainer()
+    .getByTestId("auxiliary-actions-menu")
+    .click();
+
+  // Hover over "Attach files" to open submenu
+  await po.page.getByRole("menuitem", { name: "Attach files" }).hover();
+
+  // attach via file input (click-to-upload)
+  await po.page
     .getByTestId("chat-context-file-input")
     .setInputFiles("e2e-tests/fixtures/images/logo.png");
+
+  // Close the menu by pressing Escape
+  await po.page.keyboard.press("Escape");
+
   await po.sendPrompt("[dump]");
   await po.snapshotServerDump("last-message", { name: SNAPSHOT_NAME });
   await po.snapshotMessages({ replaceDumpPath: true });

src/components/chat/AuxiliaryActionsMenu.tsx

@@ -19,14 +19,16 @@ interface AuxiliaryActionsMenuProps {
     files: FileList,
     type: "chat-context" | "upload-to-codebase",
   ) => void;
-  showTokenBar: boolean;
-  toggleShowTokenBar: () => void;
+  showTokenBar?: boolean;
+  toggleShowTokenBar?: () => void;
+  hideContextFilesPicker?: boolean;
 }
 
 export function AuxiliaryActionsMenu({
   onFileSelect,
   showTokenBar,
   toggleShowTokenBar,
+  hideContextFilesPicker,
 }: AuxiliaryActionsMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -47,7 +49,7 @@ export function AuxiliaryActionsMenu({
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         {/* Codebase Context */}
-        <ContextFilesPicker />
+        {!hideContextFilesPicker && <ContextFilesPicker />}
 
         {/* Attach Files Submenu */}
         <DropdownMenuSub>
@@ -58,31 +60,34 @@ export function AuxiliaryActionsMenu({
           <DropdownMenuSubContent>
             <FileAttachmentDropdown
               onFileSelect={onFileSelect}
-              renderAsMenuItems={true}
+              closeMenu={() => setIsOpen(false)}
             />
           </DropdownMenuSubContent>
         </DropdownMenuSub>
 
-        <DropdownMenuSeparator />
-
         {/* Toggle Token Usage */}
-        <DropdownMenuItem
-          onClick={toggleShowTokenBar}
-          className={`py-2 px-3 group ${showTokenBar ? "bg-primary/10 text-primary" : ""}`}
-          data-testid="token-bar-toggle"
-        >
-          <ChartColumnIncreasing
-            size={16}
-            className={
-              showTokenBar
-                ? "text-primary group-hover:text-accent-foreground"
-                : ""
-            }
-          />
-          <span className="flex-1">
-            {showTokenBar ? "Hide" : "Show"} token usage
-          </span>
-        </DropdownMenuItem>
+        {toggleShowTokenBar && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={toggleShowTokenBar}
+              className={`py-2 px-3 group ${showTokenBar ? "bg-primary/10 text-primary" : ""}`}
+              data-testid="token-bar-toggle"
+            >
+              <ChartColumnIncreasing
+                size={16}
+                className={
+                  showTokenBar
+                    ? "text-primary group-hover:text-accent-foreground"
+                    : ""
+                }
+              />
+              <span className="flex-1">
+                {showTokenBar ? "Hide" : "Show"} token usage
+              </span>
+            </DropdownMenuItem>
+          </>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );

src/components/chat/FileAttachmentDropdown.tsx

-import { Paperclip, MessageSquare, Upload } from "lucide-react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+import { MessageSquare, Upload } from "lucide-react";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
 import { useRef } from "react";
 
 interface FileAttachmentDropdownProps {
@@ -19,16 +13,12 @@ interface FileAttachmentDropdownProps {
     files: FileList,
     type: "chat-context" | "upload-to-codebase",
   ) => void;
-  disabled?: boolean;
-  className?: string;
-  renderAsMenuItems?: boolean;
+  closeMenu?: () => void;
 }
 
 export function FileAttachmentDropdown({
   onFileSelect,
-  disabled,
-  className,
-  renderAsMenuItems = false,
+  closeMenu,
 }: FileAttachmentDropdownProps) {
   const chatContextFileInputRef = useRef<HTMLInputElement>(null);
   const uploadToCodebaseFileInputRef = useRef<HTMLInputElement>(null);
@@ -49,6 +39,8 @@ export function FileAttachmentDropdown({
       onFileSelect(e.target.files, type);
       // Clear the input value so the same file can be selected again
       e.target.value = "";
+      // Close the parent menu after file selection
+      closeMenu?.();
     }
   };
 
@@ -58,7 +50,12 @@ export function FileAttachmentDropdown({
         <Tooltip>
           <TooltipTrigger asChild>
             <DropdownMenuItem
-              onClick={handleChatContextClick}
+              onSelect={(e) => {
+                // Prevent default so menu doesn't close in order to keep the hidden inputs in the DOM
+                // Manually close menu after file selection
+                e.preventDefault();
+                handleChatContextClick();
+              }}
               className="py-3 px-4"
             >
               <MessageSquare size={16} className="mr-2" />
@@ -75,7 +72,12 @@ export function FileAttachmentDropdown({
         <Tooltip>
           <TooltipTrigger asChild>
             <DropdownMenuItem
-              onClick={handleUploadToCodebaseClick}
+              onSelect={(e) => {
+                // Prevent default so menu doesn't close in order to keep the hidden inputs in the DOM
+                // Manually close menu after file selection
+                e.preventDefault();
+                handleUploadToCodebaseClick();
+              }}
               className="py-3 px-4"
             >
               <Upload size={16} className="mr-2" />
@@ -113,41 +115,9 @@ export function FileAttachmentDropdown({
     </>
   );
 
-  // If rendering as menu items only, return just the items and hidden inputs
-  if (renderAsMenuItems) {
-    return (
-      <>
-        {menuItems}
-        {hiddenInputs}
-      </>
-    );
-  }
-
-  // Otherwise, render the full dropdown with button trigger
   return (
     <>
-      <TooltipProvider>
-        <Tooltip>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  disabled={disabled}
-                  title="Attach files"
-                  className={className}
-                >
-                  <Paperclip size={20} />
-                </Button>
-              </TooltipTrigger>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">{menuItems}</DropdownMenuContent>
-          </DropdownMenu>
-          <TooltipContent>Attach files</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-
+      {menuItems}
       {hiddenInputs}
     </>
   );

src/components/chat/HomeChatInput.tsx

@@ -7,13 +7,14 @@ import { useStreamChat } from "@/hooks/useStreamChat";
 import { useAttachments } from "@/hooks/useAttachments";
 import { AttachmentsList } from "./AttachmentsList";
 import { DragDropOverlay } from "./DragDropOverlay";
-import { FileAttachmentDropdown } from "./FileAttachmentDropdown";
 import { usePostHog } from "posthog-js/react";
 import { HomeSubmitOptions } from "@/pages/home";
 import { ChatInputControls } from "../ChatInputControls";
 import { LexicalChatInput } from "./LexicalChatInput";
 import { useChatModeToggle } from "@/hooks/useChatModeToggle";
 import { useTypingPlaceholder } from "@/hooks/useTypingPlaceholder";
+import { AuxiliaryActionsMenu } from "./AuxiliaryActionsMenu";
+
 export function HomeChatInput({
   onSubmit,
 }: {
@@ -97,16 +98,9 @@ export function HomeChatInput({
               disableSendButton={false}
             />
 
-            {/* File attachment dropdown */}
-            <FileAttachmentDropdown
-              className="mt-1 mr-1"
-              onFileSelect={handleFileSelect}
-              disabled={isStreaming}
-            />
-
             {isStreaming ? (
               <button
-                className="px-2 py-2 mt-1 mr-2 text-(--sidebar-accent-fg) rounded-lg opacity-50 cursor-not-allowed" // Indicate disabled state
+                className="px-2 py-2 mt-1 mr-1 text-(--sidebar-accent-fg) rounded-lg opacity-50 cursor-not-allowed" // Indicate disabled state
                 title="Cancel generation (unavailable here)"
               >
                 <StopCircleIcon size={20} />
@@ -115,15 +109,22 @@ export function HomeChatInput({
               <button
                 onClick={handleCustomSubmit}
                 disabled={!inputValue.trim() && attachments.length === 0}
-                className="px-2 py-2 mt-1 mr-2 hover:bg-(--background-darkest) text-(--sidebar-accent-fg) rounded-lg disabled:opacity-50"
+                className="px-2 py-2 mt-1 mr-1 hover:bg-(--background-darkest) text-(--sidebar-accent-fg) rounded-lg disabled:opacity-50"
                 title="Send message"
               >
                 <SendIcon size={20} />
               </button>
             )}
           </div>
-          <div className="px-2 pb-2">
-            <ChatInputControls />
+          <div className="pl-2 pr-1 flex items-center justify-between pb-2">
+            <div className="flex items-center">
+              <ChatInputControls showContextFilesPicker={false} />
+            </div>
+
+            <AuxiliaryActionsMenu
+              onFileSelect={handleFileSelect}
+              hideContextFilesPicker
+            />
           </div>
         </div>
       </div>