Address PR review comments

- Add type="button" and focus-visible ring styles to dialog buttons
- Prevent submit while attachment type dialog is open
- Clear pendingFiles in clearAttachments to avoid orphaned state
- Deduplicate confirmPendingFiles by reusing addAttachments
- Add i18n translations for FileAttachmentTypeDialog (en, pt-BR, zh-CN)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: azizmejri1

src/components/chat/ChatInput.tsx

@@ -245,7 +245,8 @@ export function ChatInput({ chatId }: { chatId?: number }) {
     if (
       (!inputValue.trim() && attachments.length === 0) ||
       isStreaming ||
-      !chatId
+      !chatId ||
+      pendingFiles
     ) {
       return;
     }

src/components/chat/FileAttachmentTypeDialog.tsx

@@ -6,6 +6,7 @@ import {
   DialogTitle,
   DialogDescription,
 } from "@/components/ui/dialog";
+import { useTranslation } from "react-i18next";
 
 interface FileAttachmentTypeDialogProps {
   pendingFiles: File[] | null;
@@ -18,6 +19,7 @@ export function FileAttachmentTypeDialog({
   onConfirm,
   onCancel,
 }: FileAttachmentTypeDialogProps) {
+  const { t } = useTranslation("chat");
   const isOpen = !!pendingFiles && pendingFiles.length > 0;
   const fileCount = pendingFiles?.length ?? 0;
 
@@ -31,38 +33,47 @@ export function FileAttachmentTypeDialog({
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
           <DialogTitle>
-            How would you like to attach{" "}
-            {fileCount === 1 ? "this file" : `these ${fileCount} files`}?
+            {fileCount === 1
+              ? t("attachmentTypeDialog.titleSingular")
+              : t("attachmentTypeDialog.titlePlural", { count: fileCount })}
           </DialogTitle>
           <DialogDescription>
-            Choose how the {fileCount === 1 ? "file" : "files"} should be used.
+            {fileCount === 1
+              ? t("attachmentTypeDialog.descriptionSingular")
+              : t("attachmentTypeDialog.descriptionPlural")}
           </DialogDescription>
         </DialogHeader>
         <div className="flex flex-col gap-2">
           <button
-            className="flex items-start gap-3 rounded-lg border border-border p-4 text-left hover:bg-muted/50 transition-colors"
+            type="button"
+            className="flex items-start gap-3 rounded-lg border border-border p-4 text-left hover:bg-muted/50 transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
             onClick={() => onConfirm("chat-context")}
           >
             <MessageSquare
               size={20}
               className="mt-0.5 text-green-500 flex-shrink-0"
             />
             <div>
-              <div className="font-medium text-sm">Attach as chat context</div>
+              <div className="font-medium text-sm">
+                {t("attachFileContext")}
+              </div>
               <div className="text-xs text-muted-foreground mt-0.5">
-                Provide context for the AI (e.g. screenshots, references)
+                {t("attachFileContextExample")}
               </div>
             </div>
           </button>
           <button
-            className="flex items-start gap-3 rounded-lg border border-border p-4 text-left hover:bg-muted/50 transition-colors"
+            type="button"
+            className="flex items-start gap-3 rounded-lg border border-border p-4 text-left hover:bg-muted/50 transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
             onClick={() => onConfirm("upload-to-codebase")}
           >
             <Upload size={20} className="mt-0.5 text-blue-500 flex-shrink-0" />
             <div>
-              <div className="font-medium text-sm">Upload to codebase</div>
+              <div className="font-medium text-sm">
+                {t("uploadFileCodebase")}
+              </div>
               <div className="text-xs text-muted-foreground mt-0.5">
-                Add files to your project (e.g. images, assets)
+                {t("uploadFileCodebaseExample")}
               </div>
             </div>
           </button>

src/components/chat/HomeChatInput.tsx

@@ -59,7 +59,11 @@ export function HomeChatInput({
 
   // Custom submit function that wraps the provided onSubmit
   const handleCustomSubmit = () => {
-    if ((!inputValue.trim() && attachments.length === 0) || isStreaming) {
+    if (
+      (!inputValue.trim() && attachments.length === 0) ||
+      isStreaming ||
+      pendingFiles
+    ) {
       return;
     }
 

src/hooks/useAttachments.ts

@@ -68,18 +68,25 @@ export function useAttachments() {
     }
   };
 
+  const addAttachments = (
+    files: File[],
+    type: "chat-context" | "upload-to-codebase" = "chat-context",
+  ) => {
+    const fileAttachments: FileAttachment[] = files.map((file) => ({
+      file,
+      type,
+    }));
+    setAttachments((attachments) => [...attachments, ...fileAttachments]);
+  };
+
   const confirmPendingFiles = useCallback(
     (type: "chat-context" | "upload-to-codebase") => {
       if (pendingFiles) {
-        const fileAttachments: FileAttachment[] = pendingFiles.map((file) => ({
-          file,
-          type,
-        }));
-        setAttachments((prev) => [...prev, ...fileAttachments]);
+        addAttachments(pendingFiles, type);
         setPendingFiles(null);
       }
     },
-    [pendingFiles, setAttachments],
+    [pendingFiles, addAttachments],
   );
 
   const cancelPendingFiles = useCallback(() => {
@@ -88,17 +95,7 @@ export function useAttachments() {
 
   const clearAttachments = () => {
     setAttachments([]);
-  };
-
-  const addAttachments = (
-    files: File[],
-    type: "chat-context" | "upload-to-codebase" = "chat-context",
-  ) => {
-    const fileAttachments: FileAttachment[] = files.map((file) => ({
-      file,
-      type,
-    }));
-    setAttachments((attachments) => [...attachments, ...fileAttachments]);
+    setPendingFiles(null);
   };
 
   const handlePaste = async (e: React.ClipboardEvent) => {

src/i18n/locales/en/chat.json

@@ -126,6 +126,12 @@
   "uploadFileCodebase": "Upload file to codebase",
   "uploadFileCodebaseExample": "Example use case: add an image to use for your app",
   "dropFilesToAttach": "Drop files to attach",
+  "attachmentTypeDialog": {
+    "titleSingular": "How would you like to attach this file?",
+    "titlePlural": "How would you like to attach these {{count}} files?",
+    "descriptionSingular": "Choose how the file should be used.",
+    "descriptionPlural": "Choose how the files should be used."
+  },
   "selectedComponents": "Selected Components ({{count}})",
   "clearAllComponents": "Clear all selected components",
   "deselectComponent": "Deselect component",

src/i18n/locales/pt-BR/chat.json

@@ -126,6 +126,12 @@
   "uploadFileCodebase": "Enviar arquivo para a base de código",
   "uploadFileCodebaseExample": "Exemplo de uso: adicionar uma imagem para usar no seu app",
   "dropFilesToAttach": "Solte os arquivos para anexar",
+  "attachmentTypeDialog": {
+    "titleSingular": "Como você gostaria de anexar este arquivo?",
+    "titlePlural": "Como você gostaria de anexar estes {{count}} arquivos?",
+    "descriptionSingular": "Escolha como o arquivo deve ser usado.",
+    "descriptionPlural": "Escolha como os arquivos devem ser usados."
+  },
   "selectedComponents": "Componentes Selecionados ({{count}})",
   "clearAllComponents": "Limpar todos os componentes selecionados",
   "deselectComponent": "Desmarcar componente",

src/i18n/locales/zh-CN/chat.json

@@ -126,6 +126,12 @@
   "uploadFileCodebase": "上传文件到代码库",
   "uploadFileCodebaseExample": "示例用途：添加图片供应用使用",
   "dropFilesToAttach": "拖放文件以附加",
+  "attachmentTypeDialog": {
+    "titleSingular": "您想如何附加此文件？",
+    "titlePlural": "您想如何附加这 {{count}} 个文件？",
+    "descriptionSingular": "选择文件的使用方式。",
+    "descriptionPlural": "选择文件的使用方式。"
+  },
   "selectedComponents": "已选择的组件 ({{count}})",
   "clearAllComponents": "清除所有已选择的组件",
   "deselectComponent": "取消选择组件",