enhancement: update ui uploading files and images (#4562)

web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx

@@ -138,14 +138,14 @@ const ChatInput = () => {
 
   return (
     <div className="relative p-4 pb-2">
-      <div className="relative flex w-full flex-col">
       {renderPreview(fileUpload)}
+      <div className="relative flex w-full flex-col">
         <RichTextEditor
           className={twMerge(
             'relative mb-1 max-h-[400px] resize-none rounded-lg border border-[hsla(var(--app-border))] p-3 pr-20',
             'focus-within:outline-none focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-[hsla(var(--primary-bg))] focus-visible:ring-offset-0',
             'overflow-y-auto',
-            fileUpload && 'rounded-t-none',
+            fileUpload && 'rounded-t-none border-t-0',
             experimentalFeature && 'pl-10',
             activeSettingInputBox && 'pb-14 pr-16'
           )}

web/screens/Thread/ThreadCenterPanel/FileUploadPreview/index.tsx

@@ -22,7 +22,7 @@ const FileUploadPreview = () => {
   return (
     <div className="flex flex-col rounded-t-lg border border-b-0 border-[hsla(var(--app-border))] p-4">
       {!!fileUpload && (
-        <div className="bg-secondary relative inline-flex w-60 space-x-3 rounded-lg p-4">
+        <div className="relative inline-flex w-60 space-x-3 rounded-lg bg-[hsla(var(--secondary-bg))] p-4">
           <Icon type={fileUpload?.type} />
 
           <div className="w-full">
@@ -35,10 +35,10 @@ const FileUploadPreview = () => {
           </div>
 
           <div
-            className="absolute -right-2 -top-2 cursor-pointer rounded-full p-0.5"
+            className="absolute -right-2 -top-2 cursor-pointer rounded-full bg-[hsla(var(--destructive-bg))] p-0.5 text-[hsla(var(--destructive-fg))]"
             onClick={onDeleteClick}
           >
-            <XIcon size={14} className="text-background" />
+            <XIcon size={14} className="text-white" />
           </div>
         </div>
       )}

web/screens/Thread/ThreadCenterPanel/ImageUploadPreview/index.tsx

@@ -35,13 +35,10 @@ const ImageUploadPreview: React.FC<Props> = ({ file }) => {
 
   return (
     <div className="flex flex-col rounded-t-lg border border-b-0 border-[hsla(var(--app-border))] p-4">
-      <div className="bg-secondary relative w-60 rounded-lg p-4">
+      <div className="relative w-40 overflow-hidden rounded-lg border border-[hsla(var(--app-border))]">
         <img src={base64} alt={file.name} className="object-cover" />
-        <h6 className="mt-2 line-clamp-1 font-medium">
-          {file.name.replaceAll(/[-._]/g, ' ')}
-        </h6>
         <div
-          className="absolute -right-2 -top-2 cursor-pointer rounded-full p-0.5"
+          className="absolute right-2 top-2 cursor-pointer rounded-full bg-[hsla(var(--destructive-bg))] p-0.5 text-[hsla(var(--destructive-fg))]"
           onClick={onDeleteClick}
         >
           <XIcon size={14} className="text-background" />

web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx

@@ -16,7 +16,7 @@ const DocMessage = ({
   const { onViewFile } = usePath()
 
   return (
-    <div className="group/file bg-secondary relative mb-2 inline-flex w-60 cursor-pointer gap-x-3 overflow-hidden rounded-lg p-4">
+    <div className="group/file relative mb-2 inline-flex w-60 cursor-pointer gap-x-3 overflow-hidden rounded-lg bg-[hsla(var(--secondary-bg))] p-4">
       <div
         className="absolute left-0 top-0 z-20 hidden h-full w-full bg-black/20 opacity-50 group-hover/file:inline-block"
         onClick={() => onViewFile(`${id}.pdf`)}

web/screens/Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx

@@ -22,7 +22,7 @@ export const RelativeImage = ({
       className={onClick ? 'cursor-pointer' : 'cursor-default'}
     >
       <img
-        className="aspect-auto h-[300px]"
+        className="aspect-auto"
         alt={src}
         src={src.includes('files/') ? `file://${path}/${src}` : src}
       />