@lobehub/chat 1.12.4 → 1.12.5

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.12.5](https://github.com/lobehub/lobe-chat/compare/v1.12.4...v1.12.5)
+
+<sup>Released on **2024-08-22**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix clipboard copy issue and improve upload cors feedback.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix clipboard copy issue and improve upload cors feedback, closes [#3557](https://github.com/lobehub/lobe-chat/issues/3557) ([86c5a99](https://github.com/lobehub/lobe-chat/commit/86c5a99))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.12.4](https://github.com/lobehub/lobe-chat/compare/v1.12.3...v1.12.4)
 
 <sup>Released on **2024-08-22**</sup>

package/docs/self-hosting/advanced/auth.mdx

@@ -1,19 +1,16 @@
 ---
-title: LobeChat Authorization Service
-description: >-
-  Learn about LobeChat's support for configuring external identity verification
-  services for centralized user authorization within enterprises/organizations.
-  Explore supported services like Auth0, Microsoft Entra ID, Authentik, Github,
-  and ZITADEL.
+title: LobeChat Authentication Service Configuration
+description: Learn how to configure external authentication services using Clerk or Next Auth for centralized user authorization management. Supported authentication services include Auth0, Azure ID, etc.
 tags:
-  - SSO Providers
+  - Authentication Service
   - Next Auth
+  - SSO
   - Clerk
 ---
 
-# LobeChat Authorization
+# Authentication Service
 
-LobeChat supports the configuration of external identity verification services for internal use within enterprises/organizations to centrally manage user authorization.
+LobeChat supports the configuration of external authentication services using Clerk or Next Auth for internal use within enterprises/organizations to centrally manage user authorization.
 
 ## Clerk
 
@@ -21,7 +18,7 @@ Clerk is a comprehensive identity verification solution that has recently gained
 
 LobeChat has deeply integrated with Clerk to provide users with a more secure and convenient login and registration experience. It also relieves developers from the burden of managing authentication logic. Clerk's concise and modern design philosophy aligns perfectly with LobeChat's goals, making user management on the entire platform more efficient and reliable.
 
-By setting the environment variables NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY in LobeChat's environment, you can enable and use Clerk.
+By setting the environment variables `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` in LobeChat's environment, you can enable and use Clerk.
 
 ## Next Auth
 
@@ -45,6 +42,7 @@ Currently supported identity verification services include:
   <Card href={'/docs/self-hosting/advanced/sso-providers/github'} title={'Github'} />
   <Card href={'/docs/self-hosting/advanced/sso-providers/zitadel'} title={'ZITADEL'} />
 </Cards>
+
 Click on the links to view the corresponding platform's configuration documentation.
 
 ## Advanced Configuration

package/docs/self-hosting/advanced/s3.mdx

@@ -18,6 +18,45 @@ The best practice in this area is to use a file storage service (S3) to store im
 In this documentation, S3 refers to a compatible S3 storage solution, which supports the Amazon S3 API for object storage systems. Common examples include Cloudflare R2, Alibaba Cloud OSS, and self-deployable Minio, all of which support the S3 compatible API.
 </Callout>
 
+## Core Environment Variables
+
+<Steps>
+  ### `S3_ACCESS_KEY_ID` and `S3_SECRET_ACCESS_KEY`
+
+  These are the two keys required by all S3 compatible storage services to access the S3 storage service, not detailed here.
+
+  ### `S3_ENDPOINT`
+
+  The request endpoint of the storage bucket. Note that this link should not contain the name of the storage bucket.
+
+  <Callout type={'warning'}>`S3_ENDPOINT` must remove the suffix path, otherwise the uploaded files will not be accessible</Callout>
+
+  For example, for Cloudflare:
+
+  ```shell
+  S3_ENDPOINT=https://0b33a03b5c993fd2f453379dc36558e5.r2.cloudflarestorage.com
+  ```
+
+  ### `S3_BUCKET` and `S3_REGION`
+
+  The name and region of the storage bucket. `S3_BUCKET` is required to specify the name of the storage bucket. `S3_REGION` is optional and is used to specify the region of the storage bucket. Generally, it does not need to be added, but some service providers may require configuration.
+
+  ### `S3_SET_ACL`
+
+  Whether to set the ACL to `public-read` when uploading files. This option is enabled by default. If the service provider does not support setting individual ACLs for files (i.e., all files inherit the ACL of the storage bucket), enabling this option may cause request errors. Set `S3_SET_ACL` to `0` to disable it.
+
+  ### `NEXT_PUBLIC_S3_DOMAIN`
+
+  The public access domain of the storage bucket, used to access files in the storage bucket. This address needs to be **publicly readable**. The reason is that when OpenAI's gpt-4o and other vision models recognize images, OpenAI will try to download this image link on their servers. Therefore, this link must be publicly accessible. If it is a private link, OpenAI will not be able to access the image and thus will not be able to recognize the image content properly.
+
+  <Callout type={'warning'}>
+    Additionally, since this access domain is often a separate URL, it needs to be configured to allow cross-origin access to the site. Otherwise, cross-origin issues will occur in the browser.
+  </Callout>
+
+</Steps>
+
+## S3 Configuration Guide
+
 Currently, the S3 configuration tutorials included in the documentation are:
 
 <Cards>

package/docs/self-hosting/server-database/docker.mdx

@@ -32,26 +32,35 @@ Here is the process for deploying the LobeChat server database version on a Linu
 
 ### Create a Postgres Database Instance
 
-Create a Postgres database instance according to your needs, for example:
+Please create a Postgres database instance with the PGVector plugin according to your needs, for example:
 
 ```sh
-docker run --name my-postgres --network pg -e POSTGRES_PASSWORD=mysecretpassword -p 5432:5432 -d postgres
+docker network create pg
+
+docker run --name my-postgres --network pg -e POSTGRES_PASSWORD=mysecretpassword -p 5432:5432 -d pgvector/pgvector:pg16
 ```
 
-<Callout type="warning">
-The above command is only for testing/demonstration purposes because this pg instance does not include a persistent part.
+The above command will create a PG instance named `my-postgres` on the network `pg`, where `pgvector/pgvector:pg16` is a Postgres 16 image with the pgvector plugin installed by default.
+
+<Callout type="info">
+The pgvector plugin provides vector search capabilities for Postgres, which is an important component for LobeChat to implement RAG.
 </Callout>
 
-The above command will create a PG instance named `my-postgres` on the network `pg`.
+<Callout type="warning">
+The above command does not specify a persistent storage location for the pg instance, so it is only for testing/demonstration purposes. Please configure persistent storage for production environments.
+</Callout>
 
 ### Create a file named `lobe-chat.env` to store environment variables:
 
 ```shell
-# DB required
+# Website domain
+APP_URL=https://your-prod-domain.com
+
+# DB required environment variables
 KEY_VAULTS_SECRET=jgwsK28dspyVQoIf8/M3IIHl1h6LYYceSYNXeLpy6uk=
 DATABASE_URL=postgres://postgres:mysecretpassword@my-postgres:5432/postgres
 
-# NEXT_AUTH related
+# NEXT_AUTH related, can use auth0, Azure AD, GitHub, Authentik, zitadel, etc. If you have other access requirements, feel free to submit a PR
 NEXT_AUTH_SECRET=3904039cd41ea1bdf6c93db0db96e250
 NEXT_AUTH_SSO_PROVIDERS=auth0
 NEXTAUTH_URL=https://your-prod-domain.com/api/auth
@@ -103,20 +112,21 @@ The script command you need to execute is:
 
 ```shell
 $ docker run -it -d --name lobe-chat-database -p 3210:3210 \
--e DATABASE_URL=postgres://postgres:mysecretpassword@host.docker.internal:5432/postgres \
--e KEY_VAULTS_SECRET=jgwsK28dspyVQoIf8/M3IIHl1h6LYYceSYNXeLpy6uk= \
--e NEXT_AUTH_SECRET=3904039cd41ea1bdf6c93db0db96e250 \
--e NEXT_AUTH_SSO_PROVIDERS=auth0 \
--e AUTH0_CLIENT_ID=xxxxxx \
--e AUTH0_CLIENT_SECRET=cSX_xxxxx \
--e AUTH0_ISSUER=https://lobe-chat-demo.us.auth0.com \
--e NEXTAUTH_URL=http://localhost:3210/api/auth \
--e S3_ACCESS_KEY_ID=xxxxxxxxxx \
--e S3_SECRET_ACCESS_KEY=xxxxxxxxxx \
--e S3_ENDPOINT=https://xxxxxxxxxx.r2.cloudflarestorage.com \
--e S3_BUCKET=lobechat \
--e NEXT_PUBLIC_S3_DOMAIN=https://s3-for-lobechat.your-domain.com \
-lobehub/lobe-chat-database
+  -e DATABASE_URL=postgres://postgres:mysecretpassword@host.docker.internal:5432/postgres \
+  -e KEY_VAULTS_SECRET=jgwsK28dspyVQoIf8/M3IIHl1h6LYYceSYNXeLpy6uk= \
+  -e NEXT_AUTH_SECRET=3904039cd41ea1bdf6c93db0db96e250 \
+  -e NEXT_AUTH_SSO_PROVIDERS=auth0 \
+  -e AUTH0_CLIENT_ID=xxxxxx \
+  -e AUTH0_CLIENT_SECRET=cSX_xxxxx \
+  -e AUTH0_ISSUER=https://lobe-chat-demo.us.auth0.com \
+  -e APP_URL=http://localhost:3210 \
+  -e NEXTAUTH_URL=http://localhost:3210/api/auth \
+  -e S3_ACCESS_KEY_ID=xxxxxxxxxx \
+  -e S3_SECRET_ACCESS_KEY=xxxxxxxxxx \
+  -e S3_ENDPOINT=https://xxxxxxxxxx.r2.cloudflarestorage.com \
+  -e S3_BUCKET=lobechat \
+  -e NEXT_PUBLIC_S3_DOMAIN=https://s3-for-lobechat.your-domain.com \
+  lobehub/lobe-chat-database
 ```
 
 <Callout type="tip">

package/docs/self-hosting/server-database.mdx

@@ -36,7 +36,9 @@ Before deployment, make sure you have a Postgres database instance ready. You ca
 - `A.` Use Serverless Postgres instances like Vercel/Neon;
 - `B.` Use self-deployed Postgres instances like Docker/Railway/Zeabur, collectively referred to as Node Postgres instances;
 
-There is a slight difference in the way they are configured in terms of environment variables.
+<Callout>There is a slight difference in the way they are configured in terms of environment variables.</Callout>
+
+Since we support file-based conversations/knowledge base conversations, we need to install the `pgvector` plugin for Postgres. This plugin provides vector search capabilities and is a key component for LobeChat to implement RAG.
 
 <Steps>
 ### `NEXT_PUBLIC_SERVICE_MODE`
@@ -49,6 +51,12 @@ For server-side database deployment scenarios, you need to set `NEXT_PUBLIC_SERV
 In the official `lobe-chat-database` Docker image, this environment variable is already set to `server` by default. Therefore, if you deploy using the Docker image, you do not need to configure this environment variable again.
 </Callout>
 
+<Callout type={'tip'}>
+Since environment variables starting with `NEXT_PUBLIC` take effect in the front-end code, they cannot be modified through container runtime injection. (Refer to the `next.js` documentation [Configuring: Environment Variables | Next.js (nextjs.org)](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables)). This is why we chose to create a separate DB version image.
+
+If you need to modify variables with the `NEXT_PUBLIC` prefix in a Docker deployment, you must build the image yourself and inject your own `NEXT_PUBLIC` prefixed environment variables during the build.
+</Callout>
+
 ### `DATABASE_URL`
 
 The core of configuring the database is to add the `DATABASE_URL` environment variable and fill in the Postgres database connection URL you have prepared. The typical format of the database connection URL is `postgres://username:password@host:port/database`.
@@ -87,7 +95,7 @@ In the server-side database mode, we need an authentication service to distingui
 
 ### Clerk
 
-[Clerk](https://clerk.com?utm_source=lobehub\&utm_medium=docs) is an authentication SaaS service that provides out-of-the-box authentication capabilities with high productization, low integration costs, and a great user experience. For those who offer SaaS products, Clerk is a good choice. Our official [LobeChat Cloud](https://lobechat.com) uses Clerk as the authentication service.
+[Clerk](https://clerk.com?utm_source=lobehub&utm_medium=docs) is an authentication SaaS service that provides out-of-the-box authentication capabilities with high productization, low integration costs, and a great user experience. For those who offer SaaS products, Clerk is a good choice. Our official [LobeChat Cloud](https://lobechat.com) uses Clerk as the authentication service.
 
 The integration of Clerk is relatively simple, requiring only the configuration of the `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`, `CLERK_SECRET_KEY`, and `CLERK_WEBHOOK_SECRET` environment variables, which can be obtained from the Clerk console.
 
@@ -123,40 +131,6 @@ The best practice in this area is to use a file storage service (S3) to store im
 In this documentation, S3 refers to a compatible S3 storage solution, which supports the Amazon S3 API-compatible object storage system. Common examples include Cloudflare R2, Alibaba Cloud OSS, and self-deployable Minio, all of which support the S3-compatible API.
 </Callout>
 
-<Steps>
-### `S3_ACCESS_KEY_ID` and `S3_SECRET_ACCESS_KEY`
-
-These are the two keys required by all S3-compatible storage services to access the S3 storage service, without going into detail.
-
-### `S3_ENDPOINT`
-
-The request endpoint of the bucket, note that the link here should not include the bucket's name.
-
-<Callout type={'warning'}>`S3_ENDPOINT` must remove the suffix path, otherwise the uploaded files will not be accessible.</Callout>
-
-For example, for Cloudflare:
-
-```shell
-S3_ENDPOINT=https://0b33a03b5c993fd2f453379dc36558e5.r2.cloudflarestorage.com
-```
-
-### `S3_BUCKET` and `S3_REGION`
-
-The name and region of the bucket. `S3_BUCKET` is mandatory for specifying the bucket's name. `S3_REGION` is optional for specifying the bucket's region, generally not required to add, but some service providers may need to configure it.
-
-### `S3_SET_ACL`
-Whether to set the ACL to `public-read` when uploading files. This option is enabled by default. If the service provider does not support setting individual ACLs for files (i.e., all files inherit the bucket's ACL), enabling this option may result in a request error. You can disable it by setting `S3_SET_ACL` to `0`.
-
-### `NEXT_PUBLIC_S3_DOMAIN`
-
-The public access domain of the bucket, used to access files in the bucket. This address needs to be **internet-readable**. The reason is that when OpenAI's GPT-4o and other visual models recognize images, OpenAI will try to download the image link on their servers. Therefore, this link must be publicly accessible. If it is a private link, OpenAI will not be able to access the image and will not be able to recognize the image content properly.
-
-<Callout type={'warning'}>
-In addition, since this access domain is often an independent URL, it needs to be configured to allow cross-origin access to the site, otherwise cross-origin issues will occur in the browser.
-</Callout>
-
-</Steps>
-
 For detailed configuration guidelines on S3, please refer to [S3 Object Storage](/en/docs/self-hosting/advanced/s3) for more information.
 
 ## Getting Started with Deployment
@@ -164,4 +138,3 @@ For detailed configuration guidelines on S3, please refer to [S3 Object Storage]
 The above is a detailed explanation of configuring LobeChat with a server-side database. You can configure it according to your actual situation and then choose a deployment platform that suits you to start deployment:
 
 <PlatformCards urlPrefix={'server-database'} />
-

package/locales/ar/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "التفاصيل: {{detail}}",
     "fileOnlySupportInServerMode": "وضع النشر الحالي لا يدعم تحميل ملفات غير الصور. إذا كنت بحاجة إلى تحميل تنسيق {{ext}}، يرجى التبديل إلى نشر قاعدة بيانات الخادم أو استخدام خدمة LobeChat Cloud.",
-    "title": "فشل تحميل الملف، يرجى التحقق من الاتصال بالشبكة أو المحاولة لاحقًا"
+    "networkError": "يرجى التأكد من أن اتصال الشبكة لديك يعمل بشكل صحيح، والتحقق من إعدادات تكوين خدمة تخزين الملفات عبر النطاق.",
+    "title": "فشل تحميل الملف، يرجى التحقق من الاتصال بالشبكة أو المحاولة لاحقًا",
+    "unknownError": "سبب الخطأ: {{reason}}",
+    "uploadFailed": "فشل تحميل الملف"
   }
 }

package/locales/bg-BG/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "Подробности: {{detail}}",
     "fileOnlySupportInServerMode": "Текущият режим на разполагане не поддържа качване на файлове, различни от изображения. За да качите формат {{ext}}, моля, превключете на разполагане с база данни на сървъра или използвайте услугата LobeChat Cloud.",
-    "title": "Неуспешно качване на файл, моля проверете интернет връзката или опитайте по-късно"
+    "networkError": "Моля, уверете се, че вашата мрежа работи нормално и проверете дали конфигурацията за крос-домейн на услугата за съхранение на файлове е правилна.",
+    "title": "Неуспешно качване на файл, моля проверете интернет връзката или опитайте по-късно",
+    "unknownError": "Причина за грешка: {{reason}}",
+    "uploadFailed": "Неуспешно качване на файла."
   }
 }

package/locales/de-DE/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "Details: {{detail}}",
     "fileOnlySupportInServerMode": "Der aktuelle Bereitstellungsmodus unterstützt das Hochladen von Nicht-Bilddateien nicht. Um Dateien im {{ext}}-Format hochzuladen, wechseln Sie bitte zum Serverdatenbank-Bereitstellungsmodus oder verwenden Sie den LobeChat Cloud-Dienst.",
-    "title": "Dateiupload fehlgeschlagen. Bitte überprüfen Sie Ihre Netzwerkverbindung und versuchen Sie es später erneut."
+    "networkError": "Bitte überprüfen Sie, ob Ihre Internetverbindung stabil ist, und prüfen Sie die Cross-Origin-Konfiguration des Dateispeicherdienstes.",
+    "title": "Dateiupload fehlgeschlagen. Bitte überprüfen Sie Ihre Netzwerkverbindung und versuchen Sie es später erneut.",
+    "unknownError": "Fehlerursache: {{reason}}",
+    "uploadFailed": "Der Datei-Upload ist fehlgeschlagen."
   }
 }

package/locales/en-US/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "Details: {{detail}}",
     "fileOnlySupportInServerMode": "The current deployment mode does not support uploading non-image files. To upload files in {{ext}} format, please switch to server database deployment or use LobeChat Cloud service.",
-    "title": "File upload failed. Please check your network connection or try again later"
+    "networkError": "Please check your network connection and ensure that the file storage service's cross-origin configuration is correct.",
+    "title": "File upload failed. Please check your network connection or try again later",
+    "unknownError": "Error reason: {{reason}}",
+    "uploadFailed": "File upload failed."
   }
 }

package/locales/es-ES/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "Detalles: {{detail}}",
     "fileOnlySupportInServerMode": "El modo de implementación actual no admite la carga de archivos que no sean imágenes. Si desea cargar un archivo en formato {{ext}}, cambie a la implementación de base de datos en servidor o utilice el servicio LobeChat Cloud.",
-    "title": "Error al subir el archivo, por favor verifica la conexión a internet o inténtalo de nuevo más tarde"
+    "networkError": "Por favor, verifica que tu red esté funcionando correctamente y comprueba si la configuración de CORS del servicio de almacenamiento de archivos es correcta.",
+    "title": "Error al subir el archivo, por favor verifica la conexión a internet o inténtalo de nuevo más tarde",
+    "unknownError": "Razón del error: {{reason}}",
+    "uploadFailed": "La carga del archivo ha fallado."
   }
 }

package/locales/fr-FR/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "Détails : {{detail}}",
     "fileOnlySupportInServerMode": "Le mode de déploiement actuel ne prend pas en charge le téléchargement de fichiers non image. Pour télécharger un format {{ext}}, veuillez passer à un déploiement de base de données côté serveur ou utiliser le service LobeChat Cloud.",
-    "title": "Échec de l'envoi du fichier, veuillez vérifier votre connexion réseau ou réessayer plus tard"
+    "networkError": "Veuillez vérifier si votre réseau fonctionne correctement et assurez-vous que la configuration CORS du service de stockage de fichiers est correcte.",
+    "title": "Échec de l'envoi du fichier, veuillez vérifier votre connexion réseau ou réessayer plus tard",
+    "unknownError": "Raison de l'erreur : {{reason}}",
+    "uploadFailed": "Échec du téléchargement du fichier."
   }
 }

package/locales/it-IT/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "Dettagli: {{detail}}",
     "fileOnlySupportInServerMode": "L'attuale modalità di distribuzione non supporta il caricamento di file non immagine. Se desideri caricare un formato {{ext}}, ti preghiamo di passare alla distribuzione del database sul server o di utilizzare il servizio LobeChat Cloud.",
-    "title": "Caricamento del file fallito, controlla la connessione di rete o riprova più tardi"
+    "networkError": "Si prega di verificare che la connessione di rete sia stabile e controllare se la configurazione CORS del servizio di archiviazione file è corretta.",
+    "title": "Caricamento del file fallito, controlla la connessione di rete o riprova più tardi",
+    "unknownError": "Motivo dell'errore: {{reason}}",
+    "uploadFailed": "Caricamento del file non riuscito."
   }
 }

package/locales/ja-JP/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "詳細: {{detail}}",
     "fileOnlySupportInServerMode": "現在のデプロイモードでは、画像以外のファイルのアップロードはサポートされていません。{{ext}} 形式のファイルをアップロードするには、サーバーデータベースデプロイに切り替えるか、LobeChat Cloud サービスを使用してください。",
-    "title": "ファイルのアップロードに失敗しました。ネットワーク接続を確認するか、後でもう一度お試しください"
+    "networkError": "ネットワークが正常であることを確認し、ファイルストレージサービスのクロスオリジン設定が正しいかどうかを確認してください。",
+    "title": "ファイルのアップロードに失敗しました。ネットワーク接続を確認するか、後でもう一度お試しください",
+    "unknownError": "エラーの原因: {{reason}}",
+    "uploadFailed": "ファイルのアップロードに失敗しました。"
   }
 }

package/locales/ko-KR/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "상세 내용: {{detail}}",
     "fileOnlySupportInServerMode": "현재 배포 모드에서는 이미지 파일이 아닌 파일 업로드를 지원하지 않습니다. {{ext}} 형식을 업로드하려면 서버 데이터베이스 배포로 전환하거나 LobeChat Cloud 서비스를 사용하세요.",
-    "title": "파일 업로드 실패, 네트워크 연결을 확인하거나 나중에 다시 시도해주세요"
+    "networkError": "네트워크가 정상인지 확인하고 파일 저장 서비스의 교차 출처 구성도 올바른지 확인하세요.",
+    "title": "파일 업로드 실패, 네트워크 연결을 확인하거나 나중에 다시 시도해주세요",
+    "unknownError": "오류 원인: {{reason}}",
+    "uploadFailed": "파일 업로드에 실패했습니다."
   }
 }

package/locales/nl-NL/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "Details: {{detail}}",
     "fileOnlySupportInServerMode": "De huidige implementatiemodus ondersteunt het uploaden van niet-afbeeldingsbestanden niet. Als u bestanden in {{ext}}-formaat wilt uploaden, schakelt u over naar de serverdatabase-implementatie of gebruikt u de LobeChat Cloud-service.",
-    "title": "Bestand uploaden mislukt, controleer uw internetverbinding of probeer het later opnieuw"
+    "networkError": "Controleer of je netwerk goed werkt en of de cross-origin configuratie van de bestandsopslagservice correct is.",
+    "title": "Bestand uploaden mislukt, controleer uw internetverbinding of probeer het later opnieuw",
+    "unknownError": "Foutreden: {{reason}}",
+    "uploadFailed": "Bestand uploaden is mislukt."
   }
 }

package/locales/pl-PL/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "Szczegóły: {{detail}}",
     "fileOnlySupportInServerMode": "Aktualny tryb wdrożenia nie obsługuje przesyłania plików, które nie są obrazami. Aby przesłać pliki w formacie {{ext}}, przełącz się na wdrożenie bazy danych na serwerze lub skorzystaj z usługi LobeChat Cloud.",
-    "title": "Nie udało się przesłać pliku. Sprawdź połączenie sieciowe lub spróbuj ponownie później"
+    "networkError": "Proszę upewnić się, że Twoja sieć działa poprawnie oraz sprawdzić, czy konfiguracja CORS dla usługi przechowywania plików jest prawidłowa.",
+    "title": "Nie udało się przesłać pliku. Sprawdź połączenie sieciowe lub spróbuj ponownie później",
+    "unknownError": "Przyczyna błędu: {{reason}}",
+    "uploadFailed": "Wysyłanie pliku nie powiodło się."
   }
 }

package/locales/pt-BR/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "Detalhes: {{detail}}",
     "fileOnlySupportInServerMode": "O modo de implantação atual não suporta o upload de arquivos que não sejam imagens. Para fazer o upload de arquivos no formato {{ext}}, por favor, mude para a implantação do banco de dados no servidor ou utilize o serviço LobeChat Cloud.",
-    "title": "Falha ao enviar o arquivo, verifique a conexão de rede ou tente novamente mais tarde"
+    "networkError": "Por favor, verifique se sua rede está funcionando corretamente e se a configuração de CORS do serviço de armazenamento de arquivos está correta.",
+    "title": "Falha ao enviar o arquivo, verifique a conexão de rede ou tente novamente mais tarde",
+    "unknownError": "Erro: {{reason}}",
+    "uploadFailed": "Falha ao fazer o upload do arquivo."
   }
 }

package/locales/ru-RU/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "Подробности: {{detail}}",
     "fileOnlySupportInServerMode": "Текущий режим развертывания не поддерживает загрузку файлов, отличных от изображений. Если вы хотите загрузить файл формата {{ext}}, пожалуйста, переключитесь на развертывание с серверной базой данных или используйте LobeChat Cloud.",
-    "title": "Ошибка загрузки файла. Проверьте подключение к сети или попробуйте позже"
+    "networkError": "Пожалуйста, убедитесь, что ваше соединение с сетью работает нормально, и проверьте правильность конфигурации кросс-доменных запросов для службы хранения файлов.",
+    "title": "Ошибка загрузки файла. Проверьте подключение к сети или попробуйте позже",
+    "unknownError": "Причина ошибки: {{reason}}",
+    "uploadFailed": "Ошибка загрузки файла"
   }
 }

package/locales/tr-TR/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "Detay: {{detail}}",
     "fileOnlySupportInServerMode": "Mevcut dağıtım modu, yalnızca resim dosyalarının yüklenmesini desteklemektedir. {{ext}} formatında bir dosya yüklemek istiyorsanız, lütfen sunucu veritabanı dağıtımına geçin veya LobeChat Cloud hizmetini kullanın.",
-    "title": "Dosya yükleme başarısız, lütfen ağ bağlantınızı kontrol edin veya daha sonra tekrar deneyin"
+    "networkError": "Lütfen ağ bağlantınızın düzgün çalıştığından emin olun ve dosya depolama hizmetinin çapraz alan yapılandırmasının doğru olup olmadığını kontrol edin.",
+    "title": "Dosya yükleme başarısız, lütfen ağ bağlantınızı kontrol edin veya daha sonra tekrar deneyin",
+    "unknownError": "Hata nedeni: {{reason}}",
+    "uploadFailed": "Dosya yüklemesi başarısız oldu."
   }
 }

package/locales/vi-VN/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "Chi tiết: {{detail}}",
     "fileOnlySupportInServerMode": "Chế độ triển khai hiện tại không hỗ trợ tải lên các tệp không phải hình ảnh. Nếu bạn cần tải lên định dạng {{ext}}, vui lòng chuyển sang triển khai cơ sở dữ liệu trên máy chủ hoặc sử dụng dịch vụ LobeChat Cloud.",
-    "title": "Tải lên tệp thất bại, vui lòng kiểm tra kết nối mạng hoặc thử lại sau"
+    "networkError": "Vui lòng kiểm tra xem mạng của bạn có hoạt động bình thường không và kiểm tra cấu hình chia sẻ tệp giữa các miền có đúng không",
+    "title": "Tải lên tệp thất bại, vui lòng kiểm tra kết nối mạng hoặc thử lại sau",
+    "unknownError": "Lỗi: {{reason}}",
+    "uploadFailed": "Tải tệp lên không thành công"
   }
 }

package/locales/zh-CN/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "详情: {{detail}}",
     "fileOnlySupportInServerMode": "当前部署模式不支持上传非图片文件，如需上传 {{ext}} 格式，请切换到服务端数据库部署或使用 LobeChat Cloud 服务",
-    "title": "文件上传失败，请检查网络连接或稍后再试"
+    "networkError": "请确认你的网络是否正常，并检查文件存储服务跨域配置是否正确",
+    "title": "文件上传失败，请检查网络连接或稍后再试",
+    "unknownError": "错误原因: {{reason}}",
+    "uploadFailed": "文件上传失败"
   }
 }

package/locales/zh-TW/error.json

@@ -116,6 +116,9 @@
   "upload": {
     "desc": "詳情: {{detail}}",
     "fileOnlySupportInServerMode": "當前部署模式不支持上傳非圖片文件，如需上傳 {{ext}} 格式，請切換到伺服器端資料庫部署或使用 LobeChat Cloud 服務",
-    "title": "檔案上傳失敗，請檢查網路連線或稍後再試"
+    "networkError": "請確認你的網路是否正常，並檢查檔案儲存服務的跨域配置是否正確",
+    "title": "檔案上傳失敗，請檢查網路連線或稍後再試",
+    "unknownError": "錯誤原因: {{reason}}",
+    "uploadFailed": "檔案上傳失敗"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.12.4",
+  "version": "1.12.5",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -135,7 +135,7 @@
     "@vercel/speed-insights": "^1.0.12",
     "ahooks": "^3.8.0",
     "ai": "^3.2.16",
-    "antd": "5.20.0",
+    "antd": "^5.20.2",
     "antd-style": "^3.6.2",
     "brotli-wasm": "^3.0.1",
     "chroma-js": "^2.4.2",

package/src/components/DragUpload/useDragUpload.test.tsx

@@ -0,0 +1,130 @@
+import { act, renderHook } from '@testing-library/react';
+import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { getContainer, useDragUpload } from './useDragUpload';
+
+describe('useDragUpload', () => {
+  let mockOnUploadFiles: Mock;
+
+  beforeEach(() => {
+    mockOnUploadFiles = vi.fn();
+    vi.useFakeTimers();
+    document.body.innerHTML = '';
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  it('should initialize and cleanup correctly', () => {
+    const { result, unmount } = renderHook(() => useDragUpload(mockOnUploadFiles));
+
+    expect(result.current).toBe(false);
+    expect(document.getElementById('dragging-root')).not.toBeNull();
+
+    unmount();
+
+    expect(document.getElementById('dragging-root')).toBeNull();
+  });
+
+  it('should handle drag events correctly', () => {
+    const { result } = renderHook(() => useDragUpload(mockOnUploadFiles));
+
+    act(() => {
+      window.dispatchEvent(new Event('dragenter'));
+    });
+
+    expect(result.current).toBe(false);
+
+    act(() => {
+      const dragEnterEvent = new Event('dragenter') as DragEvent;
+      Object.defineProperty(dragEnterEvent, 'dataTransfer', {
+        value: {
+          items: [{}],
+          types: ['Files'],
+        },
+      });
+      window.dispatchEvent(dragEnterEvent);
+    });
+
+    expect(result.current).toBe(true);
+
+    act(() => {
+      const dragLeaveEvent = new Event('dragleave') as DragEvent;
+      Object.defineProperty(dragLeaveEvent, 'dataTransfer', {
+        value: {
+          items: [{}],
+          types: ['Files'],
+        },
+      });
+      window.dispatchEvent(dragLeaveEvent);
+    });
+
+    expect(result.current).toBe(false);
+  });
+
+  it('should handle file drop', async () => {
+    renderHook(() => useDragUpload(mockOnUploadFiles));
+
+    const mockFile = new File([''], 'test.txt', { type: 'text/plain' });
+    const dropEvent = new Event('drop') as DragEvent;
+    Object.defineProperty(dropEvent, 'dataTransfer', {
+      value: {
+        items: [
+          {
+            kind: 'file',
+            getAsFile: () => mockFile,
+            webkitGetAsEntry: () => ({
+              isFile: true,
+              file: (cb: (file: File) => void) => cb(mockFile),
+            }),
+          },
+        ],
+        types: ['Files'],
+      },
+    });
+
+    await act(async () => {
+      window.dispatchEvent(dropEvent);
+    });
+
+    expect(mockOnUploadFiles).toHaveBeenCalledWith([mockFile]);
+  });
+
+  it('should handle paste event', async () => {
+    renderHook(() => useDragUpload(mockOnUploadFiles));
+
+    const mockFile = new File([''], 'test.txt', { type: 'text/plain' });
+    const pasteEvent = new Event('paste') as ClipboardEvent;
+    Object.defineProperty(pasteEvent, 'clipboardData', {
+      value: {
+        items: [
+          {
+            kind: 'file',
+            getAsFile: () => mockFile,
+            webkitGetAsEntry: () => null,
+          },
+        ],
+      },
+    });
+
+    await act(async () => {
+      window.dispatchEvent(pasteEvent);
+    });
+
+    expect(mockOnUploadFiles).toHaveBeenCalledWith([mockFile]);
+  });
+});
+
+describe('getContainer', () => {
+  it('should return the dragging root element', () => {
+    const rootElement = document.createElement('div');
+    rootElement.id = 'dragging-root';
+    document.body.appendChild(rootElement);
+
+    const container = getContainer();
+    expect(container).not.toBeNull();
+    expect(container?.id).toBe('dragging-root');
+  });
+});

package/src/components/DragUpload/useDragUpload.tsx

@@ -40,6 +40,15 @@ const getFileListFromDataTransferItems = async (items: DataTransferItem[]) => {
       const entry = item.webkitGetAsEntry();
       if (entry) {
         filePromises.push(processEntry(entry));
+      } else {
+        const file = item.getAsFile();
+
+        if (file)
+          filePromises.push(
+            new Promise((resolve) => {
+              resolve([file]);
+            }),
+          );
       }
     }
   }

package/src/locales/default/error.ts

@@ -142,6 +142,9 @@ export default {
     desc: '详情: {{detail}}',
     fileOnlySupportInServerMode:
       '当前部署模式不支持上传非图片文件，如需上传 {{ext}} 格式，请切换到服务端数据库部署或使用 LobeChat Cloud 服务',
+    networkError: '请确认你的网络是否正常，并检查文件存储服务跨域配置是否正确',
     title: '文件上传失败，请检查网络连接或稍后再试',
+    unknownError: '错误原因: {{reason}}',
+    uploadFailed: '文件上传失败',
   },
 };

package/src/services/upload.ts

@@ -5,6 +5,8 @@ import { FileMetadata, UploadFileParams } from '@/types/files';
 import { FileUploadState, FileUploadStatus } from '@/types/files/upload';
 import { uuid } from '@/utils/uuid';
 
+export const UPLOAD_NETWORK_ERROR = 'NetWorkError';
+
 class UploadService {
   uploadWithProgress = async (
     file: File,
@@ -13,7 +15,6 @@ class UploadService {
     const xhr = new XMLHttpRequest();
 
     const { preSignUrl, ...result } = await this.getSignedUploadUrl(file);
-
     let startTime = Date.now();
     xhr.upload.addEventListener('progress', (event) => {
       if (event.lengthComputable) {
@@ -49,7 +50,10 @@ class UploadService {
           reject(xhr.statusText);
         }
       });
-      xhr.addEventListener('error', () => reject(xhr.statusText));
+      xhr.addEventListener('error', () => {
+        if (xhr.status === 0) reject(UPLOAD_NETWORK_ERROR);
+        else reject(xhr.statusText);
+      });
       xhr.send(data);
     });
 

package/src/store/file/slices/chat/action.ts

@@ -1,11 +1,14 @@
+import { t } from 'i18next';
 import { produce } from 'immer';
 import useSWR, { SWRResponse } from 'swr';
 import { StateCreator } from 'zustand/vanilla';
 
+import { notification } from '@/components/AntdStaticMethods';
 import { FILE_UPLOAD_BLACKLIST } from '@/const/file';
 import { fileService } from '@/services/file';
 import { ServerService } from '@/services/file/server';
 import { ragService } from '@/services/rag';
+import { UPLOAD_NETWORK_ERROR } from '@/services/upload';
 import { userService } from '@/services/user';
 import { useAgentStore } from '@/store/agent';
 import {
@@ -128,10 +131,30 @@ export const createFileSlice: StateCreator<
 
     // upload files and process it
     const pools = files.map(async (file) => {
-      const fileResult = await get().uploadWithProgress({
-        file,
-        onStatusUpdate: dispatchChatUploadFileList,
-      });
+      let fileResult: { id: string; url: string } | undefined;
+
+      try {
+        fileResult = await get().uploadWithProgress({
+          file,
+          onStatusUpdate: dispatchChatUploadFileList,
+        });
+      } catch (error) {
+        // skip `UNAUTHORIZED` error
+        if ((error as any)?.message !== 'UNAUTHORIZED')
+          notification.error({
+            description:
+              // it may be a network error or the cors error
+              error === UPLOAD_NETWORK_ERROR
+                ? t('upload.networkError', { ns: 'error' })
+                : // or the error from the server
+                  typeof error === 'string'
+                  ? error
+                  : t('upload.unknownError', { ns: 'error', reason: (error as Error).message }),
+            message: t('upload.uploadFailed', { ns: 'error' }),
+          });
+
+        dispatchChatUploadFileList({ id: file.name, type: 'removeFile' });
+      }
 
       if (!fileResult) return;