From f28ea8cee22e79481b716f93fe9e18a892a6cd51 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Sat, 18 Oct 2025 18:48:42 +0530
Subject: [PATCH] feat(attach): update size & icons

---
 src/components/MessageInputActions/Attach.tsx | 48 ++++---------------
 .../MessageInputActions/AttachSmall.tsx       | 17 +++++--
 2 files changed, 22 insertions(+), 43 deletions(-)

diff --git a/src/components/MessageInputActions/Attach.tsx b/src/components/MessageInputActions/Attach.tsx
index 48f14d9..fbc2e7e 100644
--- a/src/components/MessageInputActions/Attach.tsx
+++ b/src/components/MessageInputActions/Attach.tsx
@@ -17,7 +17,7 @@ import {
 import { Fragment, useRef, useState } from 'react';
 import { useChat } from '@/lib/hooks/useChat';
 
-const Attach = ({ showText }: { showText?: boolean }) => {
+const Attach = () => {
   const { files, setFiles, setFileIds, fileIds } = useChat();
 
   const [loading, setLoading] = useState(false);
@@ -52,42 +52,16 @@ const Attach = ({ showText }: { showText?: boolean }) => {
   };
 
   return loading ? (
-    <div className="flex flex-row items-center justify-between space-x-1">
-      <LoaderCircle size={18} className="text-sky-400 animate-spin" />
-      <p className="text-sky-400 inline whitespace-nowrap text-xs font-medium">
-        Uploading..
-      </p>
+    <div className="active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none text-black/50 dark:text-white/50 transition duration-200">
+      <LoaderCircle size={16} className="text-sky-400 animate-spin" />
     </div>
   ) : files.length > 0 ? (
     <Popover className="relative w-full max-w-[15rem] md:max-w-md lg:max-w-lg">
       <PopoverButton
         type="button"
-        className={cn(
-          'flex flex-row items-center justify-between space-x-1 p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white',
-          files.length > 0 ? '-ml-2 lg:-ml-3' : '',
-        )}
+        className="active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white"
       >
-        {files.length > 1 && (
-          <>
-            <File size={19} className="text-sky-400" />
-            <p className="text-sky-400 inline whitespace-nowrap text-xs font-medium">
-              {files.length} files
-            </p>
-          </>
-        )}
-
-        {files.length === 1 && (
-          <>
-            <File size={18} className="text-sky-400" />
-            <p className="text-sky-400 text-xs font-medium">
-              {files[0].fileName.length > 10
-                ? files[0].fileName.replace(/\.\w+$/, '').substring(0, 3) +
-                  '...' +
-                  files[0].fileExtension
-                : files[0].fileName}
-            </p>
-          </>
-        )}
+        <File size={16} className="text-sky-400" />
       </PopoverButton>
       <Transition
         as={Fragment}
@@ -108,7 +82,7 @@ const Attach = ({ showText }: { showText?: boolean }) => {
                 <button
                   type="button"
                   onClick={() => fileInputRef.current.click()}
-                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
+                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200 focus:outline-none"
                 >
                   <input
                     type="file"
@@ -118,7 +92,7 @@ const Attach = ({ showText }: { showText?: boolean }) => {
                     multiple
                     hidden
                   />
-                  <Plus size={18} />
+                  <Plus size={16} />
                   <p className="text-xs">Add</p>
                 </button>
                 <button
@@ -126,7 +100,7 @@ const Attach = ({ showText }: { showText?: boolean }) => {
                     setFiles([]);
                     setFileIds([]);
                   }}
-                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200"
+                  className="flex flex-row items-center space-x-1 text-black/70 dark:text-white/70 hover:text-black hover:dark:text-white transition duration-200 focus:outline-none"
                 >
                   <Trash size={14} />
                   <p className="text-xs">Clear</p>
@@ -165,8 +139,7 @@ const Attach = ({ showText }: { showText?: boolean }) => {
       type="button"
       onClick={() => fileInputRef.current.click()}
       className={cn(
-        'flex flex-row items-center space-x-1 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white',
-        showText ? '' : 'p-2',
+        'flex items-center justify-center active:border-none hover:bg-light-200 hover:dark:bg-dark-200 p-2 rounded-lg focus:outline-none headless-open:text-black dark:headless-open:text-white text-black/50 dark:text-white/50 active:scale-95 transition duration-200 hover:text-black dark:hover:text-white',
       )}
     >
       <input
@@ -177,8 +150,7 @@ const Attach = ({ showText }: { showText?: boolean }) => {
         multiple
         hidden
       />
-      <Paperclip size={showText ? 18 : undefined} />
-      {showText && <p className="text-xs font-medium pl-[1px]">Attach</p>}
+      <Paperclip size={16} />
     </button>
   );
 };
diff --git a/src/components/MessageInputActions/AttachSmall.tsx b/src/components/MessageInputActions/AttachSmall.tsx
index 20aa141..ca18f4e 100644
--- a/src/components/MessageInputActions/AttachSmall.tsx
+++ b/src/components/MessageInputActions/AttachSmall.tsx
@@ -5,7 +5,14 @@ import {
   PopoverPanel,
   Transition,
 } from '@headlessui/react';
-import { CopyPlus, File, LoaderCircle, Paperclip, Plus, Trash } from 'lucide-react';
+import {
+  CopyPlus,
+  File,
+  LoaderCircle,
+  Paperclip,
+  Plus,
+  Trash,
+} from 'lucide-react';
 import { Fragment, useRef, useState } from 'react';
 import { File as FileType } from '../ChatWindow';
 import { useChat } from '@/lib/hooks/useChat';
@@ -45,7 +52,7 @@ const AttachSmall = () => {
   };
 
   return loading ? (
-    <div className="flex flex-row items-center justify-between space-x-1 p-1">
+    <div className="flex flex-row items-center justify-between space-x-1 p-1 ">
       <LoaderCircle size={20} className="text-sky-400 animate-spin" />
     </div>
   ) : files.length > 0 ? (
@@ -116,8 +123,8 @@ const AttachSmall = () => {
                   <p className="text-black/70 dark:text-white/70 text-sm">
                     {file.fileName.length > 25
                       ? file.fileName.replace(/\.\w+$/, '').substring(0, 25) +
-                      '...' +
-                      file.fileExtension
+                        '...' +
+                        file.fileExtension
                       : file.fileName}
                   </p>
                 </div>
@@ -141,7 +148,7 @@ const AttachSmall = () => {
         multiple
         hidden
       />
-      <Paperclip size={20} />
+      <Paperclip size={16} />
     </button>
   );
 };