fix (UI): Resolve the issue of overly long file names and path names not being displayed correctly (#5054)

* feat(Messages): enhance file upload display with styled component for better UI

* feat(Inputbar): add file name truncation for better display in attachment preview

* feat(DataSettings): replace Typography.Text with PathText for improved path display and add text truncation styling

* feat(DataSettings): refactor path display with PathRow component for better layout and styling

src/renderer/src/pages/home/Inputbar/AttachmentPreview.tsx

@@ -26,12 +26,21 @@ interface Props {
   setFiles: (files: FileType[]) => void
 }
 
+const MAX_FILENAME_DISPLAY_LENGTH = 20
+function truncateFileName(name: string, maxLength: number = MAX_FILENAME_DISPLAY_LENGTH) {
+  if (name.length <= maxLength) return name
+  return name.slice(0, maxLength - 3) + '...'
+}
+
 const FileNameRender: FC<{ file: FileType }> = ({ file }) => {
   const [visible, setVisible] = useState<boolean>(false)
   const isImage = (ext: string) => {
     return ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp'].includes(ext)
   }
 
+  const fullName = FileManager.formatFileName(file)
+  const displayName = truncateFileName(fullName)
+
   return (
     <Tooltip
       styles={{
@@ -53,6 +62,7 @@ const FileNameRender: FC<{ file: FileType }> = ({ file }) => {
               }}
             />
           )}
+          <span style={{ wordBreak: 'break-all' }}>{fullName}</span>
           {formatFileSize(file.size)}
         </Flex>
       }>
@@ -66,8 +76,9 @@ const FileNameRender: FC<{ file: FileType }> = ({ file }) => {
           if (path) {
             window.api.file.openPath(path)
           }
-        }}>
+        }}
-        {FileManager.formatFileName(file)}
+        title={fullName}>
+        {displayName}
       </FileName>
     </Tooltip>
   )

src/renderer/src/pages/home/Messages/MessageAttachments.tsx

@@ -66,15 +66,26 @@ const MessageAttachments: FC<Props> = ({ message }) => {
     )
   }
 
+  const StyledUpload = styled(Upload)`
+    .ant-upload-list-item-name {
+      max-width: 220px;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      vertical-align: bottom;
+    }
+  `
+
   return (
     <Container style={{ marginTop: 2, marginBottom: 8 }} className="message-attachments">
-      <Upload
+      <StyledUpload
         listType="text"
         disabled
         fileList={message.files?.map((file) => ({
           uid: file.id,
           url: 'file://' + FileManager.getSafePath(file),
-          status: 'done',
+          status: 'done' as const,
           name: FileManager.formatFileName(file)
         }))}
       />

src/renderer/src/pages/settings/DataSettings/DataSettings.tsx

@@ -204,18 +204,18 @@ const DataSettings: FC = () => {
               <SettingDivider />
               <SettingRow>
                 <SettingRowTitle>{t('settings.data.app_data')}</SettingRowTitle>
-                <HStack alignItems="center" gap="5px">
+                <PathRow>
-                  <Typography.Text style={{ color: 'var(--color-text-3)' }}>{appInfo?.appDataPath}</Typography.Text>
+                  <PathText style={{ color: 'var(--color-text-3)' }}>{appInfo?.appDataPath}</PathText>
-                  <StyledIcon onClick={() => handleOpenPath(appInfo?.appDataPath)} />
+                  <StyledIcon onClick={() => handleOpenPath(appInfo?.appDataPath)} style={{ flexShrink: 0 }} />
-                </HStack>
+                </PathRow>
               </SettingRow>
               <SettingDivider />
               <SettingRow>
                 <SettingRowTitle>{t('settings.data.app_logs')}</SettingRowTitle>
-                <HStack alignItems="center" gap="5px">
+                <PathRow>
-                  <Typography.Text style={{ color: 'var(--color-text-3)' }}>{appInfo?.logsPath}</Typography.Text>
+                  <PathText style={{ color: 'var(--color-text-3)' }}>{appInfo?.logsPath}</PathText>
-                  <StyledIcon onClick={() => handleOpenPath(appInfo?.logsPath)} />
+                  <StyledIcon onClick={() => handleOpenPath(appInfo?.logsPath)} style={{ flexShrink: 0 }} />
-                </HStack>
+                </PathRow>
               </SettingRow>
               <SettingDivider />
               <SettingRow>
@@ -280,4 +280,24 @@ const MenuList = styled.div`
   }
 `
 
+const PathText = styled(Typography.Text)`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: right;
+  margin-left: 5px;
+`
+
+const PathRow = styled(HStack)`
+  min-width: 0;
+  flex: 1;
+  width: 0;
+  align-items: center;
+  gap: 5px;
+`
+
 export default DataSettings