From 899f01d5c44e4bd7e23b4d97659914a0b8bd8016 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Mon, 3 Feb 2025 20:36:19 +0700
Subject: [PATCH] enhancement: update ui uploading files and images (#4562)

---
 web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx   | 4 ++--
 .../Thread/ThreadCenterPanel/FileUploadPreview/index.tsx   | 6 +++---
 .../Thread/ThreadCenterPanel/ImageUploadPreview/index.tsx  | 7 ++-----
 .../Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx    | 2 +-
 .../Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx | 2 +-
 5 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
index 457758749..e582450a9 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatInput/index.tsx
@@ -138,14 +138,14 @@ const ChatInput = () => {
 
   return (
     <div className="relative p-4 pb-2">
+      {renderPreview(fileUpload)}
       <div className="relative flex w-full flex-col">
-        {renderPreview(fileUpload)}
         <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'
           )}
diff --git a/web/screens/Thread/ThreadCenterPanel/FileUploadPreview/index.tsx b/web/screens/Thread/ThreadCenterPanel/FileUploadPreview/index.tsx
index 0e4872e10..b3a49abb3 100644
--- a/web/screens/Thread/ThreadCenterPanel/FileUploadPreview/index.tsx
+++ b/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>
       )}
diff --git a/web/screens/Thread/ThreadCenterPanel/ImageUploadPreview/index.tsx b/web/screens/Thread/ThreadCenterPanel/ImageUploadPreview/index.tsx
index 7fa9e417a..63103f1ec 100644
--- a/web/screens/Thread/ThreadCenterPanel/ImageUploadPreview/index.tsx
+++ b/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" />
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx
index 9e00d2b83..a010c230d 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/DocMessage.tsx
+++ b/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`)}
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx
index bfd13b0ef..65e43e6c4 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/RelativeImage.tsx
+++ b/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}
       />