💄 style: Optimized file upload buttons and prompts (lobehub#2050)

locales/ar/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "تحديث معلومات المساعد",
   "upload": {
+    "actionFiletip": "تحميل المستند",
     "actionTooltip": "تحميل الصورة",
     "disabled": "النموذج الحالي لا يدعم التعرف على الرؤية، يرجى تغيير النموذج المستخدم",
     "dragDesc": "اسحب الملفات إلى هنا، يدعم تحميل عدة صور. اضغط على Shift لإرسال الصور مباشرة",
+    "dragFileDesc": "اسحب الصور والملفات هنا لدعم تحميل صور وملفات متعددة. اضغط باستمرار على Shift لإرسال صورة أو ملف مباشرة",
+    "dragFileTitle": "تحميل المستند",
     "dragTitle": "تحميل الصورة"
   }
 }

locales/bg-BG/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "Актуализирай информацията за агента",
   "upload": {
+    "actionFiletip": "Загрузите файл",
     "actionTooltip": "Качи изображение",
     "disabled": "Текущият модел не поддържа визуално разпознаване. Моля, превключи моделите, за да използваш тази функция.",
     "dragDesc": "Плъзни и пусни файлове тук, поддържа се качване на няколко изображения. Задръж Shift, за да изпратиш изображения директно.",
+    "dragFileDesc": "Перетащите сюда изображения и файлы, чтобы можно было загрузить несколько изображений и файлов. Удерживайте нажатой клавишу Shift, чтобы отправить изображение или файл напрямую.",
+    "dragFileTitle": "Загрузите файл",
     "dragTitle": "Качи изображение"
   }
 }

locales/de-DE/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "Assistenteninformationen aktualisieren",
   "upload": {
+    "actionFiletip": "Laden Sie die Datei hoch",
     "actionTooltip": "Bild hochladen",
     "disabled": "Das aktuelle Modell unterstützt keine visuelle Erkennung. Bitte wechseln Sie das Modell, um es zu verwenden.",
     "dragDesc": "Dateien hierher ziehen, um mehrere Bilder hochzuladen. Halte die Umschalttaste gedrückt, um Bilder direkt zu senden.",
+    "dragFileDesc": "Ziehen Sie Bilder und Dateien hierher, um das Hochladen mehrerer Bilder und Dateien zu unterstützen. Halten Sie die Umschalttaste gedrückt, um ein Bild oder eine Datei direkt zu senden.",
+    "dragFileTitle": "Laden Sie die Datei hoch",
     "dragTitle": "Bild hochladen"
   }
 }

locales/en-US/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "Update Agent Information",
   "upload": {
+    "actionFiletip": "Update File",
     "actionTooltip": "Upload Image",
     "disabled": "The current model does not support visual recognition. Please switch models to use this feature.",
     "dragDesc": "Drag and drop files here, support uploading multiple images. Hold down Shift to send images directly.",
+    "dragFileDesc": "Drag pictures and files here to support uploading multiple pictures and files. Hold down Shift to send an image or file directly.",
+    "dragFileTitle": "Update File",
     "dragTitle": "Upload Image"
   }
 }

locales/es-ES/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "Actualizar información del asistente",
   "upload": {
+    "actionFiletip": "Sube el archivo",
     "actionTooltip": "Subir imagen",
     "disabled": "El modelo actual no admite reconocimiento visual. Por favor, cambia de modelo para usar esta función",
     "dragDesc": "Arrastra y suelta archivos aquí, admite la carga de varias imágenes. Mantén presionada la tecla Shift para enviar las imágenes directamente.",
+    "dragFileDesc": "Arrastre imágenes y archivos aquí para admitir la carga de varias imágenes y archivos. Mantenga presionada la tecla Mayús para enviar una imagen o un archivo directamente.",
+    "dragFileTitle": "Sube el archivo",
     "dragTitle": "Subir imagen"
   }
 }

locales/fr-FR/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "Mettre à jour les informations de l'agent",
   "upload": {
+    "actionFiletip": "Télécharger le fichier",
     "actionTooltip": "Télécharger une image",
     "disabled": "Le modèle actuel ne prend pas en charge la reconnaissance visuelle. Veuillez changer de modèle pour utiliser cette fonctionnalité.",
     "dragDesc": "Faites glisser les fichiers ici pour télécharger plusieurs images. Maintenez la touche Maj enfoncée pour envoyer directement les images.",
+    "dragFileDesc": "Faites glisser les images et les fichiers ici pour prendre en charge le téléchargement de plusieurs images et fichiers. Maintenez la touche Shift enfoncée pour envoyer directement une image ou un fichier.",
+    "dragFileTitle": "Télécharger le fichier",
     "dragTitle": "Télécharger une image"
   }
 }

locales/it-IT/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "Aggiorna informazioni assistente",
   "upload": {
+    "actionFiletip": "Carica il file",
     "actionTooltip": "Carica immagine",
     "disabled": "Il modello attuale non supporta il riconoscimento visivo, si prega di cambiare modello prima di utilizzarlo",
     "dragDesc": "Trascina i file qui, supporta il caricamento di più immagini. Tieni premuto Shift per inviare direttamente le immagini",
+    "dragFileDesc": "Trascina qui immagini e file per supportare il caricamento di più immagini e file. Tieni premuto Maiusc per inviare direttamente un'immagine o un file",
+    "dragFileTitle": "Carica il file",
     "dragTitle": "Carica immagine"
   }
 }

locales/ja-JP/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "エージェント情報を更新",
   "upload": {
+    "actionFiletip": "ファイルをアップロードする",
     "actionTooltip": "画像をアップロード",
     "disabled": "現在のモデルはビジュアル認識をサポートしていません。モデルを切り替えて使用してください",
     "dragDesc": "ファイルをここにドラッグしてください。複数の画像をアップロードできます。Shift キーを押しながら画像を直接送信することもできます。",
+    "dragFileDesc": "複数の写真やファイルのアップロードをサポートするには、ここに写真やファイルをドラッグします。 Shift キーを押しながら画像またはファイルを直接送信します。",
+    "dragFileTitle": "ファイルをアップロードする",
     "dragTitle": "画像をアップロード"
   }
 }

locales/ko-KR/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "도우미 정보 업데이트",
   "upload": {
+    "actionFiletip": "파일 업로드",
     "actionTooltip": "이미지 업로드",
     "disabled": "현재 모델은 시각 인식을 지원하지 않습니다. 모델을 전환한 후 사용해주세요.",
     "dragDesc": "여기로 파일을 끌어다 놓거나 여러 이미지를 업로드할 수 있습니다. Shift를 누른 채로 이미지를 직접 보내기",
+    "dragFileDesc": "여러 사진과 파일 업로드를 지원하려면 여기로 사진과 파일을 드래그하세요. 이미지나 파일을 직접 보내려면 Shift 키를 누르세요",
+    "dragFileTitle": "파일 업로드",
     "dragTitle": "이미지 업로드"
   }
 }

locales/nl-NL/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "Assistentgegevens bijwerken",
   "upload": {
+    "actionFiletip": "Upload het bestand",
     "actionTooltip": "Upload afbeelding",
     "disabled": "Het huidige model ondersteunt geen visuele herkenning. Schakel over naar een ander model om dit te gebruiken.",
     "dragDesc": "Sleep bestanden hierheen om meerdere afbeeldingen te uploaden. Houd Shift ingedrukt om afbeeldingen direct te verzenden",
+    "dragFileDesc": "Sleep afbeeldingen en bestanden hierheen om het uploaden van meerdere afbeeldingen en bestanden te ondersteunen. Houd Shift ingedrukt om een ​​afbeelding of bestand rechtstreeks te verzenden",
+    "dragFileTitle": "Upload het bestand",
     "dragTitle": "Upload afbeelding"
   }
 }

locales/pl-PL/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "Aktualizuj informacje asystenta",
   "upload": {
+    "actionFiletip": "Prześlij plik",
     "actionTooltip": "Prześlij obraz",
     "disabled": "Obecny model nie obsługuje rozpoznawania wizyjnego. Proszę przełączyć model.",
     "dragDesc": "Przeciągnij pliki tutaj, obsługiwane jest przesyłanie wielu obrazów. Naciśnij klawisz Shift, aby wysłać obraz bezpośrednio",
+    "dragFileDesc": "Przeciągnij zdjęcia i pliki tutaj, aby umożliwić przesyłanie wielu zdjęć i plików. Przytrzymaj klawisz Shift, aby bezpośrednio wysłać obraz lub plik",
+    "dragFileTitle": "Prześlij plik",
     "dragTitle": "Prześlij obraz"
   }
 }

locales/pt-BR/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "Atualizar Informações do Assistente",
   "upload": {
+    "actionFiletip": "Enviar arquivo",
     "actionTooltip": "Enviar Imagem",
     "disabled": "O modelo atual não suporta reconhecimento visual. Por favor, altere o modelo antes de usar.",
     "dragDesc": "Arraste os arquivos aqui, suporta o envio de várias imagens. Pressione Shift para enviar as imagens diretamente.",
+    "dragFileDesc": "Arraste fotos e arquivos aqui para suportar o upload de várias fotos e arquivos. Mantenha pressionada a tecla Shift para enviar uma imagem ou arquivo diretamente.",
+    "dragFileTitle": "Enviar arquivo",
     "dragTitle": "Enviar Imagem"
   }
 }

locales/ru-RU/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "Обновить информацию помощника",
   "upload": {
+    "actionFiletip": "Загрузите файл",
     "actionTooltip": "Загрузить изображение",
     "disabled": "Текущая модель не поддерживает визуальное распознавание. Пожалуйста, выберите другую модель.",
     "dragDesc": "Перетащите файлы сюда, поддерживается загрузка нескольких изображений. Удерживайте Shift для отправки изображений",
+    "dragFileDesc": "Перетащите сюда изображения и файлы, чтобы можно было загрузить несколько изображений и файлов. Удерживайте нажатой клавишу Shift, чтобы отправить изображение или файл напрямую",
+    "dragFileTitle": "Загрузите файл",
     "dragTitle": "Загрузить изображение"
   }
 }

locales/tr-TR/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "Asistan Bilgilerini Güncelle",
   "upload": {
+    "actionFiletip": "Dosyayı Yükle",
     "actionTooltip": "Resim Yükle",
     "disabled": "Geçerli model görüntü tanıma desteğini desteklemiyor, lütfen modeli değiştirerek kullanın",
     "dragDesc": "Dosyaları buraya sürükleyip bırakın, birden fazla resim yüklemeyi destekler. Resimleri doğrudan göndermek için Shift tuşunu basılı tutun.",
+    "dragFileDesc": "Birden fazla resim ve dosya yüklemeyi desteklemek için resimleri ve dosyaları buraya sürükleyin. Bir görüntüyü veya dosyayı doğrudan göndermek için Shift tuşunu basılı tutun.",
+    "dragFileTitle": "Dosyayı Yükle",
     "dragTitle": "Resim Yükle"
   }
 }

locales/vi-VN/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "Cập nhật thông tin trợ lý",
   "upload": {
+    "actionFiletip": "Tải lên tập tin",
     "actionTooltip": "Tải lên hình ảnh",
     "disabled": "Mô hình hiện tại không hỗ trợ nhận diện hình ảnh, vui lòng chuyển đổi mô hình trước khi sử dụng",
     "dragDesc": "Kéo và thả tệp vào đây, hỗ trợ tải lên nhiều hình ảnh. Giữ phím Shift để gửi hình ảnh trực tiếp",
+    "dragFileDesc": "Kéo ảnh và tệp vào đây để hỗ trợ tải lên nhiều ảnh và tệp. Giữ phím Shift để gửi hình ảnh hoặc tập tin trực tiếp",
+    "dragFileTitle": "Tải lên tập tin",
     "dragTitle": "Tải lên hình ảnh"
   }
 }

locales/zh-CN/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "更新助理信息",
   "upload": {
+    "actionFiletip": "上传文件",
     "actionTooltip": "上传图片",
-    "disabled": "当前模型不支持视觉识别，请切换模型后使用",
+    "disabled": "当前模型不支持视觉识别和文件分析，请切换模型后使用",
     "dragDesc": "拖拽文件到这里，支持上传多个图片。按住 Shift 直接发送图片",
+    "dragFileDesc": "拖拽图片和文件到这里，支持上传多个图片和文件。按住 Shift 直接发送图片或文件",
+    "dragFileTitle": "上传文件",
     "dragTitle": "上传图片"
   }
 }

locales/zh-TW/chat.json

@@ -118,9 +118,12 @@
   },
   "updateAgent": "更新助理信息",
   "upload": {
+    "actionFiletip": "上傳文件",
     "actionTooltip": "上傳圖片",
     "disabled": "當前模型不支援視覺識別，請切換模型後使用",
     "dragDesc": "拖拽文件到這裡，支持上傳多個圖片。按住 Shift 直接發送圖片",
+    "dragFileDesc": "拖曳圖片和文件至此，支援上傳多張圖片和文件。按住 Shift 直接傳送圖片或文件",
+    "dragFileTitle": "上傳文件",
     "dragTitle": "上傳圖片"
   }
 }

src/app/chat/(desktop)/features/ChatInput/Footer/DragUpload.tsx

@@ -151,7 +151,7 @@ const DragUpload = memo(() => {
       window.removeEventListener('drop', handleDrop);
       window.removeEventListener('paste', handlePaste);
     };
-  }, [handleDrop, handlePaste]);
+  }, [handleDragEnter, handleDragOver, handleDragLeave, handleDrop, handlePaste]);
 
   return (
     isDragging && (
@@ -164,8 +164,8 @@ const DragUpload = memo(() => {
               <Icon icon={FileText} size={{ fontSize: 64, strokeWidth: 1 }} />
             </Flexbox>
             <Flexbox align={'center'} gap={8} style={{ textAlign: 'center' }}>
-              <Flexbox className={styles.title}>{t('upload.dragTitle')}</Flexbox>
-              <Flexbox className={styles.desc}>{t('upload.dragDesc')}</Flexbox>
+              <Flexbox className={styles.title}>{t(enabledFiles ? 'upload.dragFileTitle' : 'upload.dragTitle')}</Flexbox>
+              <Flexbox className={styles.desc}>{t(enabledFiles ? 'upload.dragFileDesc' : 'upload.dragDesc')}</Flexbox>
             </Flexbox>
           </Center>
         </div>

src/features/ChatInput/ActionBar/FileUpload.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Icon } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { useTheme } from 'antd-style';
-import { LucideImage, LucideLoader2 } from 'lucide-react';
+import { LucideImage, FileUp, LucideLoader2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
@@ -51,9 +51,9 @@ const FileUpload = memo(() => {
       ) : (
         <ActionIcon
           disable={!canUpload}
-          icon={LucideImage}
+          icon={enabledFiles ? FileUp : LucideImage}
           placement={'bottom'}
-          title={t(canUpload ? 'upload.actionTooltip' : 'upload.disabled')}
+          title={t(canUpload ? (enabledFiles ? 'upload.actionFiletip' : 'upload.actionTooltip') : 'upload.disabled')}
         />
       )}
     </Upload>

src/locales/default/chat.ts

@@ -120,9 +120,12 @@ export default {
   },
   updateAgent: '更新助理信息',
   upload: {
+    actionFiletip: '上传文件',
     actionTooltip: '上传图片',
-    disabled: '当前模型不支持视觉识别，请切换模型后使用',
+    disabled: '当前模型不支持视觉识别和文件分析，请切换模型后使用',
     dragDesc: '拖拽文件到这里，支持上传多个图片。按住 Shift 直接发送图片',
-    dragTitle: '上传图片',
+    dragFileDesc: '拖拽图片和文件到这里，支持上传多个图片和文件。按住 Shift 直接发送图片或文件',
+    dragFileTitle: '上传文件',
+    dragTitle: '上传图片'
   },
 };