fix(ui): implement UI/UX improvements for file attachments

Author: MuriloFP

src/integrations/misc/process-files.ts

@@ -73,7 +73,6 @@ export async function selectFiles(): Promise<ProcessedFiles> {
 		openLabel: "Select",
 		filters: {
 			"All Files": ["*"],
-			Images: ["png", "jpg", "jpeg", "webp", "gif", "bmp", "svg", "ico"],
 		},
 	}
 

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -858,6 +858,9 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								/>
 							</div>
 						)}
+						{selectedFiles && selectedFiles.length > 0 && setSelectedFiles && (
+							<FileAttachment files={selectedFiles} setFiles={setSelectedFiles} className="mb-2" />
+						)}
 						<div
 							className={cn(
 								"relative",
@@ -1043,16 +1046,6 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					/>
 				)}
 
-				{selectedFiles && selectedFiles.length > 0 && setSelectedFiles && (
-					<FileAttachment
-						files={selectedFiles}
-						setFiles={setSelectedFiles}
-						style={{
-							marginBottom: "8px",
-						}}
-					/>
-				)}
-
 				<div className={cn("flex", "justify-between", "items-center", "mt-auto")}>
 					<div className={cn("flex", "items-center", "gap-1", "min-w-0")}>
 						<div className="shrink-0">

webview-ui/src/components/chat/FileAttachment.tsx

@@ -45,7 +45,9 @@ const FileAttachment: React.FC<FileAttachmentProps> = ({ files, setFiles, style,
 					onMouseEnter={() => setHoveredIndex(index)}
 					onMouseLeave={() => setHoveredIndex(null)}>
 					<i className={cn("codicon", `codicon-file-${getFileIcon(file.type)}`)} />
-					<span className="text-sm">{file.path}</span>
+					<span className="text-sm" title={file.path}>
+						{file.path.length > 30 ? `${file.path.substring(0, 27)}...` : file.path}
+					</span>
 					{isDeletable && hoveredIndex === index && (
 						<div
 							onClick={() => handleDelete(index)}