@lobehub/chat 1.11.9 → 1.12.0

package/locales/pt-BR/components.json

@@ -50,6 +50,8 @@
     "chunks": {
       "embeddingStatus": {
         "empty": "Os blocos de texto ainda não foram completamente vetorizados, o que resultará na funcionalidade de busca semântica indisponível. Para melhorar a qualidade da busca, por favor, vetorize os blocos de texto.",
+        "error": "Falha na vetorização",
+        "errorResult": "Falha na vetorização, por favor verifique e tente novamente. Motivo da falha:",
         "processing": "Os blocos de texto estão sendo vetorizados, por favor, aguarde.",
         "success": "Atualmente, todos os blocos de texto foram vetorizados."
       },

package/locales/ru-RU/chat.json

@@ -62,6 +62,7 @@
   "pin": "Закрепить",
   "pinOff": "Открепить",
   "rag": {
+    "referenceChunks": "Цитируемые источники",
     "userQuery": {
       "actions": {
         "delete": "Удалить переписанный запрос",
@@ -155,9 +156,18 @@
   },
   "updateAgent": "Обновить информацию помощника",
   "upload": {
-    "actionFiletip": "Загрузите файл",
-    "actionTooltip": "Загрузить изображение",
-    "disabled": "Текущая модель не поддерживает визуальное распознавание. Пожалуйста, выберите другую модель.",
+    "action": {
+      "fileUpload": "Загрузить файл",
+      "folderUpload": "Загрузить папку",
+      "imageDisabled": "Текущая модель не поддерживает визуальное распознавание, пожалуйста, переключитесь на другую модель",
+      "imageUpload": "Загрузить изображение",
+      "tooltip": "Загрузить"
+    },
+    "clientMode": {
+      "actionFiletip": "Загрузить файл",
+      "actionTooltip": "Загрузить",
+      "disabled": "Текущая модель не поддерживает визуальное распознавание и анализ файлов, пожалуйста, переключитесь на другую модель"
+    },
     "preview": {
       "prepareTasks": "Подготовка блоков...",
       "status": {

package/locales/ru-RU/components.json

@@ -50,6 +50,8 @@
     "chunks": {
       "embeddingStatus": {
         "empty": "Текстовые блоки еще не полностью векторизованы, что приведет к недоступности функции семантического поиска. Для повышения качества поиска, пожалуйста, векторизуйте текстовые блоки.",
+        "error": "Ошибка векторизации",
+        "errorResult": "Ошибка векторизации, пожалуйста, проверьте и повторите попытку. Причина сбоя:",
         "processing": "Текстовые блоки векторизуются, пожалуйста, подождите.",
         "success": "Все текущие текстовые блоки успешно векторизованы."
       },

package/locales/tr-TR/chat.json

@@ -62,6 +62,7 @@
   "pin": "Pin",
   "pinOff": "Unpin",
   "rag": {
+    "referenceChunks": "Referans Parçaları",
     "userQuery": {
       "actions": {
         "delete": "Sorguyu Sil",
@@ -155,9 +156,18 @@
   },
   "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",
+    "action": {
+      "fileUpload": "Dosya Yükle",
+      "folderUpload": "Klasör Yükle",
+      "imageDisabled": "Mevcut model görsel tanımayı desteklemiyor, lütfen modeli değiştirin ve tekrar deneyin",
+      "imageUpload": "Görüntü Yükle",
+      "tooltip": "Yükle"
+    },
+    "clientMode": {
+      "actionFiletip": "Dosya Yükle",
+      "actionTooltip": "Yükle",
+      "disabled": "Mevcut model görsel tanımayı ve dosya analizini desteklemiyor, lütfen modeli değiştirin ve tekrar deneyin"
+    },
     "preview": {
       "prepareTasks": "Parçaları Hazırlıyor...",
       "status": {

package/locales/tr-TR/components.json

@@ -50,6 +50,8 @@
     "chunks": {
       "embeddingStatus": {
         "empty": "Metin parçaları henüz tamamen vektörleştirilmedi, bu durum anlamsal arama işlevinin kullanılamamasına neden olabilir, arama kalitesini artırmak için lütfen metin parçalarını vektörleştirin",
+        "error": "Vektörleştirme başarısız oldu",
+        "errorResult": "Vektörleştirme başarısız oldu, lütfen kontrol edip tekrar deneyin. Başarısız olma nedeni:",
         "processing": "Metin parçaları vektörleştiriliyor, lütfen bekleyin",
         "success": "Mevcut metin parçaları tamamen vektörleştirildi"
       },

package/locales/vi-VN/chat.json

@@ -62,6 +62,7 @@
   "pin": "Ghim",
   "pinOff": "Bỏ ghim",
   "rag": {
+    "referenceChunks": "Trích dẫn nguồn",
     "userQuery": {
       "actions": {
         "delete": "Xóa truy vấn",
@@ -155,9 +156,18 @@
   },
   "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",
+    "action": {
+      "fileUpload": "Tải lên tệp",
+      "folderUpload": "Tải lên thư mục",
+      "imageDisabled": "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 để sử dụng",
+      "imageUpload": "Tải lên hình ảnh",
+      "tooltip": "Tải lên"
+    },
+    "clientMode": {
+      "actionFiletip": "Tải lên tệp",
+      "actionTooltip": "Tải lên",
+      "disabled": "Mô hình hiện tại không hỗ trợ nhận diện hình ảnh và phân tích tệp, vui lòng chuyển đổi mô hình để sử dụng"
+    },
     "preview": {
       "prepareTasks": "Chuẩn bị phân đoạn...",
       "status": {

package/locales/vi-VN/components.json

@@ -50,6 +50,8 @@
     "chunks": {
       "embeddingStatus": {
         "empty": "Các khối văn bản chưa được vector hóa hoàn toàn, sẽ dẫn đến chức năng tìm kiếm ngữ nghĩa không khả dụng, để nâng cao chất lượng tìm kiếm, vui lòng vector hóa các khối văn bản",
+        "error": "Lỗi vector hóa",
+        "errorResult": "Lỗi vector hóa, vui lòng kiểm tra và thử lại. Nguyên nhân thất bại:",
         "processing": "Các khối văn bản đang được vector hóa, vui lòng chờ",
         "success": "Hiện tại tất cả các khối văn bản đã được vector hóa"
       },

package/locales/zh-CN/chat.json

@@ -62,6 +62,7 @@
   "pin": "置顶",
   "pinOff": "取消置顶",
   "rag": {
+    "referenceChunks": "引用源",
     "userQuery": {
       "actions": {
         "delete": "删除 Query 重写",
@@ -155,9 +156,18 @@
   },
   "updateAgent": "更新助理信息",
   "upload": {
-    "actionFiletip": "上传文件",
-    "actionTooltip": "上传图片",
-    "disabled": "当前模型不支持视觉识别和文件分析，请切换模型后使用",
+    "action": {
+      "fileUpload": "上传文件",
+      "folderUpload": "上传文件夹",
+      "imageDisabled": "当前模型不支持视觉识别，请切换模型后使用",
+      "imageUpload": "上传图片",
+      "tooltip": "上传"
+    },
+    "clientMode": {
+      "actionFiletip": "上传文件",
+      "actionTooltip": "上传",
+      "disabled": "当前模型不支持视觉识别和文件分析，请切换模型后使用"
+    },
     "preview": {
       "prepareTasks": "准备分块...",
       "status": {

package/locales/zh-CN/components.json

@@ -50,6 +50,8 @@
     "chunks": {
       "embeddingStatus": {
         "empty": "文本块尚未完全向量化，将导致语义检索功能不可用，为提升检索质量，请对文本块向量化",
+        "error": "向量化失败",
+        "errorResult": "向量化失败，请检查后重试。失败原因：",
         "processing": "文本块正在向量化，请耐心等待",
         "success": "当前文本块均已向量化"
       },

package/locales/zh-TW/chat.json

@@ -62,6 +62,7 @@
   "pin": "置頂",
   "pinOff": "取消置頂",
   "rag": {
+    "referenceChunks": "引用來源",
     "userQuery": {
       "actions": {
         "delete": "刪除 Query 重寫",
@@ -155,9 +156,18 @@
   },
   "updateAgent": "更新助理信息",
   "upload": {
-    "actionFiletip": "上傳文件",
-    "actionTooltip": "上傳圖片",
-    "disabled": "當前模型不支援視覺識別，請切換模型後使用",
+    "action": {
+      "fileUpload": "上傳檔案",
+      "folderUpload": "上傳資料夾",
+      "imageDisabled": "當前模型不支援視覺識別，請切換模型後使用",
+      "imageUpload": "上傳圖片",
+      "tooltip": "上傳"
+    },
+    "clientMode": {
+      "actionFiletip": "上傳檔案",
+      "actionTooltip": "上傳",
+      "disabled": "當前模型不支援視覺識別和檔案分析，請切換模型後使用"
+    },
     "preview": {
       "prepareTasks": "準備分塊...",
       "status": {

package/locales/zh-TW/components.json

@@ -50,6 +50,8 @@
     "chunks": {
       "embeddingStatus": {
         "empty": "文本塊尚未完全向量化，將導致語義檢索功能不可用，為提升檢索質量，請對文本塊向量化",
+        "error": "向量化失敗",
+        "errorResult": "向量化失敗，請檢查後重試。失敗原因：",
         "processing": "文本塊正在向量化，請耐心等待",
         "success": "當前文本塊均已向量化"
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.11.9",
+  "version": "1.12.0",
   "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",
@@ -53,7 +53,8 @@
     "pull": "git pull",
     "release": "semantic-release",
     "self-hosting:docker": "docker build -t lobe-chat:local .",
-    "self-hosting:docker-cn": "docker build -t lobe-chat:local --build-arg USE_CN_MIRROR=true .",
+    "self-hosting:docker-cn": "docker build -t lobe-chat-local --build-arg USE_CN_MIRROR=true .",
+    "self-hosting:docker-cn@database": "docker build -t lobe-chat-database-local -f Dockerfile.database --build-arg USE_CN_MIRROR=true .",
     "start": "next start -p 3210",
     "stylelint": "stylelint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
     "test": "npm run test-app && npm run test-server",

package/scripts/migrateServerDB/docker.cjs

@@ -2,6 +2,7 @@ const { join } = require('node:path');
 const { Pool } = require('pg');
 const { drizzle } = require('drizzle-orm/node-postgres');
 const migrator = require('drizzle-orm/node-postgres/migrator');
+const { PGVECTOR_HINT } = require('./errorHint');
 
 if (!process.env.DATABASE_URL) {
   throw new Error('DATABASE_URL is not set, please set it in your environment variables.');
@@ -29,6 +30,11 @@ runMigrations().catch((err) => {
     '❌ Database migrate failed. Please check your database is valid and DATABASE_URL is set correctly. The error detail is below:',
   );
   console.error(err);
+
+  if (err.message.includes('extension "vector" is not available')) {
+    console.info(PGVECTOR_HINT);
+  }
+
   // eslint-disable-next-line unicorn/no-process-exit
   process.exit(1);
 });

package/scripts/migrateServerDB/errorHint.js

@@ -0,0 +1,17 @@
+const PGVECTOR_HINT = `⚠️ Database migrate failed due to \`pgvector\` extension not found. Please install the \`pgvector\` extension on your postgres instance.
+
+1) if you are using docker postgres image:
+you can just use \`pgvector/pgvector:pg16\` image instead of \`postgres\`, e.g:
+
+\`\`\`
+docker run -p 5432:5432 -d --name pg -e POSTGRES_PASSWORD=mysecretpassword pgvector/pgvector:pg16
+\`\`\`
+
+2) if you are using cloud postgres instance, please contact your cloud provider for help.
+
+if you have any other question, please open issue here: https://github.com/lobehub/lobe-chat/issues
+`;
+
+module.exports = {
+  PGVECTOR_HINT,
+};

package/scripts/migrateServerDB/index.ts

@@ -3,6 +3,7 @@ import * as migrator from 'drizzle-orm/neon-serverless/migrator';
 import { join } from 'node:path';
 
 import { serverDB } from '../../src/database/server/core/db';
+import { PGVECTOR_HINT } from './errorHint';
 
 // Read the `.env` file if it exists, or a file specified by the
 // dotenv_config_path parameter that's passed to Node.js
@@ -24,6 +25,11 @@ if (connectionString) {
   // eslint-disable-next-line unicorn/prefer-top-level-await
   runMigrations().catch((err) => {
     console.error('❌ Database migrate failed:', err);
+
+    if ((err.message as string).includes('extension "vector" is not available')) {
+      console.info(PGVECTOR_HINT);
+    }
+
     // eslint-disable-next-line unicorn/no-process-exit
     process.exit(1);
   });

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/FilePreview/FileItem/Content.tsx

@@ -0,0 +1,37 @@
+import { Image } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+
+import FileIcon from '@/components/FileIcon';
+import { UploadFileItem } from '@/types/files/upload';
+
+const useStyles = createStyles(({ css }) => ({
+  image: css`
+    margin-block: 0 !important;
+    box-shadow: none;
+
+    img {
+      object-fit: contain;
+    }
+  `,
+  video: css`
+    overflow: hidden;
+    border-radius: 8px;
+  `,
+}));
+
+const Content = memo<UploadFileItem>(({ file, previewUrl }) => {
+  const { styles } = useStyles();
+
+  if (file.type.startsWith('image')) {
+    return <Image alt={file.name} src={previewUrl} wrapperClassName={styles.image} />;
+  }
+
+  if (file.type.startsWith('video')) {
+    return <video className={styles.video} src={previewUrl} width={'100%'} />;
+  }
+
+  return <FileIcon fileName={file.name} fileType={file.type} size={100} />;
+});
+
+export default Content;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/FilePreview/FileItem/index.tsx

@@ -0,0 +1,87 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { Trash2Icon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useFileStore } from '@/store/file';
+import { UploadFileItem } from '@/types/files/upload';
+
+import UploadDetail from '../../../components/UploadDetail';
+import Content from './Content';
+import { FILE_ITEM_SIZE } from './style';
+
+const useStyles = createStyles(({ css, token }) => ({
+  actions: css`
+    position: absolute;
+    z-index: 10;
+    inset-block-start: -4px;
+    inset-inline-end: -4px;
+
+    background: ${token.colorBgElevated};
+    border-radius: 5px;
+    box-shadow:
+      0 0 0 0.5px ${token.colorFillSecondary} inset,
+      ${token.boxShadowTertiary};
+  `,
+  container: css`
+    position: relative;
+
+    width: ${FILE_ITEM_SIZE}px;
+    min-width: ${FILE_ITEM_SIZE}px;
+    height: ${FILE_ITEM_SIZE}px;
+
+    background: ${token.colorBgContainer};
+    border-radius: 8px;
+  `,
+  image: css`
+    margin-block: 0 !important;
+  `,
+  status: css`
+    &.ant-tag {
+      padding-inline: 0;
+      background: none;
+    }
+  `,
+}));
+
+type FileItemProps = UploadFileItem;
+
+const spacing = 8;
+
+const FileItem = memo<FileItemProps>((props) => {
+  const { file, uploadState, status, id, tasks } = props;
+  const { t } = useTranslation(['chat', 'common']);
+  const { styles } = useStyles();
+  const [removeChatUploadFile] = useFileStore((s) => [s.removeChatUploadFile]);
+
+  return (
+    <Flexbox className={styles.container} distribution={'space-between'}>
+      <Center flex={1} height={FILE_ITEM_SIZE - 46} padding={spacing}>
+        <Content {...props} />
+      </Center>
+      <Flexbox gap={4} style={{ paddingBottom: 4, paddingInline: spacing }}>
+        <Typography.Text ellipsis={{ tooltip: true }} style={{ fontSize: 12 }}>
+          {file.name}
+        </Typography.Text>
+
+        <UploadDetail size={file.size} status={status} tasks={tasks} uploadState={uploadState} />
+      </Flexbox>
+      <Flexbox className={styles.actions}>
+        <ActionIcon
+          color={'red'}
+          icon={Trash2Icon}
+          onClick={() => {
+            removeChatUploadFile(id);
+          }}
+          size={'small'}
+          title={t('delete', { ns: 'common' })}
+        />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default FileItem;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/FilePreview/FileItem/style.ts

@@ -0,0 +1,4 @@
+export const FILE_ITEM_SIZE = 200;
+
+// 8px on each side
+export const IMAGE_FILE_SIZE = 200 - 2 * 8;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/FilePreview/FileItem/utils.ts

@@ -0,0 +1,28 @@
+export const getHarmoniousSize = (
+  inputWidth: number,
+  inputHeight: number,
+  {
+    spacing = 24,
+    containerWidth,
+    containerHeight,
+  }: { containerHeight: number; containerWidth: number; spacing: number },
+) => {
+  let width = String(inputWidth);
+  let height = String(inputHeight);
+
+  const maxWidth = containerWidth - spacing;
+  const maxHeight = containerHeight - spacing;
+
+  if (inputHeight >= inputWidth && inputHeight >= maxHeight) {
+    height = maxHeight + 'px';
+    width = 'auto';
+  } else if (inputWidth >= inputHeight && inputWidth >= maxWidth) {
+    height = 'auto';
+    width = maxWidth + 'px';
+  } else {
+    width = width + 'px';
+    height = height + 'px';
+  }
+
+  return { height, width };
+};

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/FilePreview/FileList.tsx

@@ -0,0 +1,41 @@
+import { createStyles } from 'antd-style';
+import { lighten } from 'polished';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { fileChatSelectors, useFileStore } from '@/store/file';
+
+import FileItem from './FileItem';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    overflow-x: scroll;
+
+    width: 100%;
+
+    background: ${lighten(0.01, token.colorBgLayout)};
+    border-start-start-radius: 8px;
+    border-start-end-radius: 8px;
+  `,
+}));
+
+const FileList = memo(() => {
+  const inputFilesList = useFileStore(fileChatSelectors.chatUploadFileList);
+  const showFileList = useFileStore(fileChatSelectors.chatUploadFileListHasItem);
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox
+      className={styles.container}
+      gap={6}
+      horizontal
+      padding={showFileList ? '16px 16px 12px' : 0}
+    >
+      {inputFilesList.map((item) => (
+        <FileItem key={item.id} {...item} />
+      ))}
+    </Flexbox>
+  );
+});
+
+export default FileList;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/FilePreview/index.tsx

@@ -0,0 +1,40 @@
+import { memo } from 'react';
+
+import DragUpload from '@/components/DragUpload';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/slices/chat';
+import { useFileStore } from '@/store/file';
+import { useUserStore } from '@/store/user';
+import { modelProviderSelectors } from '@/store/user/selectors';
+
+import FileItemList from './FileList';
+
+const FilePreview = memo(() => {
+  const model = useAgentStore(agentSelectors.currentAgentModel);
+
+  const canUploadImage = useUserStore(modelProviderSelectors.isModelEnabledUpload(model));
+
+  const [uploadFiles] = useFileStore((s) => [s.uploadChatFiles]);
+
+  const upload = async (fileList: FileList | File[] | undefined) => {
+    if (!fileList || fileList.length === 0) return;
+
+    // Filter out files that are not images if the model does not support image uploads
+    const files = Array.from(fileList).filter((file) => {
+      if (canUploadImage) return true;
+
+      return !file.type.startsWith('image');
+    });
+
+    uploadFiles(files);
+  };
+
+  return (
+    <>
+      <DragUpload onUploadFiles={upload} />
+      <FileItemList />
+    </>
+  );
+});
+
+export default FilePreview;

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/SendMore.tsx

@@ -40,7 +40,7 @@ const SendMore = memo<SendMoreProps>(({ disabled, isMac }) => {
   ]);
   const addAIMessage = useChatStore((s) => s.addAIMessage);
 
-  const sendMessage = useSendMessage();
+  const { send: sendMessage } = useSendMessage();
 
   const hotKey = [ALT_KEY, 'enter'].join('+');
   useHotkeys(

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/index.tsx

@@ -11,13 +11,12 @@ import StopLoadingIcon from '@/components/StopLoading';
 import SaveTopic from '@/features/ChatInput/Topic';
 import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
-import { filesSelectors, useFileStore } from '@/store/file';
+import { chatSelectors } from '@/store/chat/selectors';
 import { useUserStore } from '@/store/user';
 import { preferenceSelectors } from '@/store/user/selectors';
 import { isMacOS } from '@/utils/platform';
 
-import LocalFiles from '../LocalFiles';
+import LocalFiles from '../FilePreview';
 import SendMore from './SendMore';
 
 const useStyles = createStyles(({ css, prefixCls, token }) => {
@@ -57,25 +56,14 @@ const Footer = memo<FooterProps>(({ setExpand, expand }) => {
 
   const { theme, styles } = useStyles();
 
-  const [
-    isAIGenerating,
-    isHasMessageLoading,
-    isCreatingMessage,
-    isCreatingTopic,
-    stopGenerateMessage,
-  ] = useChatStore((s) => [
+  const [isAIGenerating, stopGenerateMessage] = useChatStore((s) => [
     chatSelectors.isAIGenerating(s),
-    chatSelectors.isHasMessageLoading(s),
-    chatSelectors.isCreatingMessage(s),
-    topicSelectors.isCreatingTopic(s),
     s.stopGenerateMessage,
   ]);
 
-  const isImageUploading = useFileStore(filesSelectors.isImageUploading);
-
   const [useCmdEnterToSend] = useUserStore((s) => [preferenceSelectors.useCmdEnterToSend(s)]);
 
-  const sendMessage = useSendMessage();
+  const { send: sendMessage, canSend } = useSendMessage();
 
   const [isMac, setIsMac] = useState<boolean>();
   useEffect(() => {
@@ -105,9 +93,6 @@ const Footer = memo<FooterProps>(({ setExpand, expand }) => {
 
   const wrapperShortcut = useCmdEnterToSend ? enter : cmdEnter;
 
-  const buttonDisabled =
-    isImageUploading || isHasMessageLoading || isCreatingTopic || isCreatingMessage;
-
   return (
     <Flexbox
       align={'end'}
@@ -146,8 +131,8 @@ const Footer = memo<FooterProps>(({ setExpand, expand }) => {
           ) : (
             <Space.Compact>
               <Button
-                disabled={buttonDisabled}
-                loading={buttonDisabled}
+                disabled={!canSend}
+                loading={!canSend}
                 onClick={() => {
                   sendMessage();
                   setExpand?.(false);
@@ -156,7 +141,7 @@ const Footer = memo<FooterProps>(({ setExpand, expand }) => {
               >
                 {t('input.send')}
               </Button>
-              <SendMore disabled={buttonDisabled} isMac={isMac} />
+              <SendMore disabled={!canSend} isMac={isMac} />
             </Space.Compact>
           )}
         </Flexbox>

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/TextArea.tsx

@@ -51,7 +51,7 @@ const InputArea = memo<InputAreaProps>(({ setExpand }) => {
 
   const useCmdEnterToSend = useUserStore(preferenceSelectors.useCmdEnterToSend);
 
-  const sendMessage = useSendMessage();
+  const { send: sendMessage } = useSendMessage();
 
   useAutoFocus(ref);
 

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/index.tsx

@@ -9,13 +9,12 @@ import {
   CHAT_TEXTAREA_MAX_HEIGHT,
   HEADER_HEIGHT,
 } from '@/const/layoutTokens';
-import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
+import LocalFiles from './FilePreview';
 import Footer from './Footer';
 import Head from './Header';
-import LocalFiles from './LocalFiles';
 import TextArea from './TextArea';
 
 const DesktopChatInput = memo(() => {
@@ -25,11 +24,10 @@ const DesktopChatInput = memo(() => {
     systemStatusSelectors.inputHeight(s),
     s.updateSystemStatus,
   ]);
-  const showFileList = useFileStore((s) => s.inputFilesList.length > 0);
 
   return (
     <>
-      {!expand && <LocalFiles padding={showFileList ? '8px 16px' : 0} />}
+      {!expand && <LocalFiles />}
       <DraggablePanel
         fullscreen={expand}
         headerHeight={HEADER_HEIGHT}