enhancement: update UI uploading files and images

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

@@ -76,24 +76,24 @@
   )
 
   const refAttachmentMenus = useClickOutside(() =>
     setShowAttachmentMenus(false)
   )
   const [showRightPanel, setShowRightPanel] = useAtom(showRightPanelAtom)
 
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.focus()
     }
   }, [activeThreadId])
 
   useEffect(() => {
     if (!selectedModel && !activeSettingInputBox) {
       setActiveSettingInputBox(true)
     }
   }, [activeSettingInputBox, selectedModel, setActiveSettingInputBox])
 
   const onStopInferenceClick = async () => {
     stopInference()
   }
 
   const isModelSupportRagAndTools = isLocalEngine(
@@ -107,11 +107,11 @@
    * @param event - The change event object.
    */
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
     if (!file) return
     upload.addFile(file)
     upload.upload().then((data) => {
       setFileUpload({
         file: file,
         type: 'pdf',
         id: data?.successful?.[0]?.response?.body?.id,
@@ -121,31 +121,31 @@
   }
 
   const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
     if (!file) return
     setFileUpload({ file: file, type: 'image' })
   }
 
   const renderPreview = (fileUpload: any) => {
     if (fileUpload) {
       if (fileUpload.type === 'image') {
         return <ImageUploadPreview file={fileUpload.file} />
       } else {
         return <FileUploadPreview />
       }
     }
   }
 
   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'
           )}
@@ -157,7 +157,7 @@
         <TextArea
           className="sr-only"
           data-testid="txt-input-chat"
           onChange={(e) => setCurrentPrompt(e.target.value)}
         />
         {experimentalFeature && (
           <Tooltip
@@ -166,7 +166,7 @@
                 theme="icon"
                 className="absolute left-3 top-2.5"
                 onClick={(e) => {
                   if (
                     !!fileUpload ||
                     (activeAssistant?.tools &&
                       !activeAssistant?.tools[0]?.enabled &&

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}
       />