@lobehub/chat 0.149.0 → 0.149.2

package/locales/pt-BR/modelProvider.json

@@ -147,15 +147,13 @@
         "windows": "No Windows, acesse o 'Painel de Controle' e edite as variáveis de ambiente do sistema. Crie uma nova variável de ambiente chamada 'OLLAMA_ORIGINS' para sua conta de usuário, com o valor '*', e clique em 'OK/Aplicar' para salvar."
       },
       "install": {
-        "description": "Certifique-se de que o Ollama esteja em execução. Se ainda não o fez, baixe o Ollama no site oficial.",
+        "description": "Certifique-se de que você ativou o Ollama. Se ainda não o fez, baixe o Ollama no site oficial <1>aqui</1>.",
         "docker": "Se preferir usar o Docker, o Ollama também oferece uma imagem oficial. Você pode puxá-la com o comando:",
         "linux": {
           "command": "Instale com o comando a seguir:",
           "manual": "Ou, se preferir, consulte o <1>Guia de Instalação Manual do Linux</1> para instalar manualmente."
         },
-        "macos": "Baixe o Ollama para macOS, descompacte e instale:",
         "title": "Instale e inicie o aplicativo Ollama localmente",
-        "windows": "Baixe o Ollama para Windows, descompacte e instale:",
         "windowsTab": "Windows (Versão de Visualização)"
       }
     },

package/locales/ru-RU/chat.json

@@ -25,8 +25,9 @@
     "title": "Просто поболтаем"
   },
   "input": {
+    "addAi": "Добавить сообщение AI",
+    "addUser": "Добавить сообщение пользователя",
     "more": "больше",
-    "onlyAdd": "Только добавить сообщение",
     "send": "Отправить",
     "sendWithCmdEnter": "Отправить с помощью {{meta}} + Enter",
     "sendWithEnter": "Отправить с помощью Enter",
@@ -101,6 +102,8 @@
     "confirmRemoveTopic": "Вы уверены, что хотите удалить эту тему? После этого ее нельзя будет восстановить.",
     "confirmRemoveUnstarred": "Вы уверены, что хотите удалить неотмеченные темы? После этого их нельзя будет восстановить.",
     "defaultTitle": "Стандартная тема",
+    "duplicateLoading": "Копирование темы...",
+    "duplicateSuccess": "Тема успешно скопирована",
     "guide": {
       "desc": "Нажмите на кнопку слева, чтобы сохранить текущий разговор в качестве исторической темы и начать новый разговор",
       "title": "Список тем"

package/locales/ru-RU/modelProvider.json

@@ -147,15 +147,13 @@
         "windows": "На Windows откройте \"Панель управления\", зайдите в настройки системных переменных. Создайте новую переменную среды для вашей учетной записи с именем \"OLLAMA_ORIGINS\" и значением * , затем нажмите \"OK/Применить\" для сохранения."
       },
       "install": {
-        "description": "Убедитесь, что Ollama запущен. Если у вас нет Ollama, пожалуйста, загрузите его с официального сайта.",
+        "description": "Пожалуйста, убедитесь, что вы установили Ollama. Если вы еще не скачали Ollama, перейдите на официальный сайт <1> для загрузки</1>",
         "docker": "Если вы предпочитаете использовать Docker, Ollama также предоставляет официальное образ Docker. Вы можете загрузить его с помощью следующей команды:",
         "linux": {
           "command": "Установите с помощью следующей команды:",
           "manual": "Или вы можете установить его вручную, следуя <1>руководству по установке на Linux</1>."
         },
-        "macos": "Скачайте и установите версию Ollama для macOS, распакуйте архив.",
         "title": "Установка и запуск приложения Ollama локально",
-        "windows": "Скачайте и установите версию Ollama для Windows, распакуйте архив.",
         "windowsTab": "Windows (превью)"
       }
     },

package/locales/tr-TR/chat.json

@@ -25,8 +25,9 @@
     "title": "Sohbet Et"
   },
   "input": {
+    "addAi": "Bir AI mesajı ekleyin",
+    "addUser": "Bir kullanıcı mesajı ekleyin",
     "more": "Daha fazla",
-    "onlyAdd": "Sadece mesaj ekle",
     "send": "Gönder",
     "sendWithCmdEnter": "{{meta}} + Enter tuşuna basarak gönder",
     "sendWithEnter": "Enter tuşuna basarak gönder",
@@ -101,6 +102,8 @@
     "confirmRemoveTopic": "Bu konuyu silmek üzeresiniz. Bir kere silindiğinde, geri alınamaz. Lütfen dikkatli bir şekilde devam edin.",
     "confirmRemoveUnstarred": "Yıldızlanmamış konuları silmek üzeresiniz. Bir kere silindiğinde, geri alınamazlar. Lütfen dikkatli bir şekilde devam edin.",
     "defaultTitle": "Konu",
+    "duplicateLoading": "Konu kopyalanıyor...",
+    "duplicateSuccess": "Konu başarıyla kopyalandı",
     "guide": {
       "desc": "Mevcut oturumu geçmiş konu olarak kaydetmek ve yeni bir oturum başlatmak için sol taraftaki düğmeye tıklayın",
       "title": "Konu Listesi"

package/locales/tr-TR/modelProvider.json

@@ -147,15 +147,13 @@
         "windows": "Windows'ta, 'Control Panel'ı tıklayarak sistem ortam değişkenlerini düzenleyin. Kullanıcı hesabınıza * değerinde 'OLLAMA_ORIGINS' adında bir ortam değişkeni oluşturun ve 'OK/Apply' düğmesine tıklayarak kaydedin"
       },
       "install": {
-        "description": "Ollama'yı açtığınızdan emin olun. Eğer Ollama'yı indirmediyseniz, resmi web sitesine giderek indirin",
+        "description": "Ollama'nın açık olduğundan emin olun. Ollama'yı indirmediyseniz, lütfen resmi web sitesine giderek <1>indirin</1>.",
         "docker": "Docker kullanmayı tercih ediyorsanız, Ollama resmi Docker görüntüsünü aşağıdaki komutla çekebilirsiniz:",
         "linux": {
           "command": "Aşağıdaki komutları kullanarak yükleyin:",
           "manual": "Ya da, <1>Linux için el ile kurulum kılavuzuna</1> bakarak kendiniz kurabilirsiniz"
         },
-        "macos": "<0>macOS sürümü Ollama'yı indirin</0>, açın ve kurun",
         "title": "Yerel olarak Ollama uygulamasını kurun ve başlatın",
-        "windows": "<0>Windows sürümü Ollama'yı indirin</0>, açın ve kurun",
         "windowsTab": "Windows (Önizleme)"
       }
     },

package/locales/vi-VN/chat.json

@@ -25,8 +25,9 @@
     "title": "Chuyện phiếm"
   },
   "input": {
+    "addAi": "Thêm một tin nhắn AI",
+    "addUser": "Thêm một tin nhắn người dùng",
     "more": "Thêm",
-    "onlyAdd": "Chỉ thêm tin nhắn",
     "send": "Gửi",
     "sendWithCmdEnter": "Nhấn {{meta}} + Enter để gửi",
     "sendWithEnter": "Nhấn Enter để gửi",
@@ -101,6 +102,8 @@
     "confirmRemoveTopic": "Bạn sắp xóa chủ đề này. Hành động này không thể hoàn tác, vui lòng xác nhận.",
     "confirmRemoveUnstarred": "Bạn sắp xóa các chủ đề chưa được đánh dấu. Hành động này không thể hoàn tác, vui lòng xác nhận.",
     "defaultTitle": "Chủ đề mặc định",
+    "duplicateLoading": "Đang sao chép chủ đề...",
+    "duplicateSuccess": "Chủ đề đã được sao chép thành công",
     "guide": {
       "desc": "Nhấn vào nút bên trái để lưu cuộc trò chuyện hiện tại như một chủ đề lịch sử và bắt đầu một cuộc trò chuyện mới",
       "title": "Danh sách chủ đề"

package/locales/vi-VN/modelProvider.json

@@ -147,15 +147,13 @@
         "windows": "Trên Windows, nhấp vào «Control Panel», vào chỉnh sửa biến môi trường hệ thống. Tạo biến môi trường tên là «OLLAMA_ORIGINS» cho tài khoản người dùng của bạn, giá trị là * , nhấp vào «OK/Áp dụng» để lưu lại"
       },
       "install": {
-        "description": "Vui lòng xác nhận rằng bạn đã mở Ollama, nếu chưa tải Ollama, vui lòng truy cập trang web chính thức để tải xuống",
+        "description": "Vui lòng xác nhận rằng bạn đã bật Ollama. Nếu chưa tải Ollama, vui lòng truy cập trang web chính thức để <1>tải xuống</1>",
         "docker": "Nếu bạn muốn sử dụng Docker, Ollama cũng cung cấp hình ảnh Docker chính thức, bạn có thể kéo theo lệnh sau:",
         "linux": {
           "command": "Cài đặt bằng lệnh sau:",
           "manual": "Hoặc bạn cũng có thể tham khảo <1>Hướng dẫn cài đặt thủ công trên Linux</1> để tự cài đặt"
         },
-        "macos": "<0>Tải xuống phiên bản Ollama cho macOS</0>, giải nén và cài đặt",
         "title": "Cài đặt và mở Ollama ứng dụng trên máy cục bộ",
-        "windows": "<0>Tải xuống phiên bản Ollama cho Windows</0>, giải nén và cài đặt",
         "windowsTab": "Windows (Bản xem trước)"
       }
     },

package/locales/zh-CN/chat.json

@@ -25,8 +25,9 @@
     "title": "随便聊聊"
   },
   "input": {
+    "addAi": "添加一条 AI 消息",
+    "addUser": "添加一条用户消息",
     "more": "更多",
-    "onlyAdd": "仅添加消息",
     "send": "发送",
     "sendWithCmdEnter": "按 {{meta}} + Enter 键发送",
     "sendWithEnter": "按 Enter 键发送",
@@ -101,6 +102,8 @@
     "confirmRemoveTopic": "即将删除该话题，删除后将不可恢复，请谨慎操作。",
     "confirmRemoveUnstarred": "即将删除未收藏话题，删除后将不可恢复，请谨慎操作。",
     "defaultTitle": "默认话题",
+    "duplicateLoading": "话题复制中...",
+    "duplicateSuccess": "话题复制成功",
     "guide": {
       "desc": "点击发送左侧按钮可将当前会话保存为历史话题，并开启新一轮会话",
       "title": "话题列表"

package/locales/zh-CN/modelProvider.json

@@ -147,15 +147,13 @@
         "windows": "在 Windows 上，点击「控制面板」，进入编辑系统环境变量。为您的用户账户新建名为 「OLLAMA_ORIGINS」 的环境变量，值为 * ，点击 「OK/应用」 保存"
       },
       "install": {
-        "description": "请确认你已经开启 Ollama ，如果没有下载 Ollama ，请前往官网下载",
+        "description": "请确认你已经开启 Ollama ，如果没有下载 Ollama ，请前往官网<1>下载</1>",
         "docker": "如果你更倾向于使用 Docker，Ollama 也提供了官方 Docker 镜像，你可以通过以下命令拉取：",
         "linux": {
           "command": "通过以下命令安装：",
           "manual": "或者，你也可以参考 <1>Linux 手动安装指南</1> 自行安装"
         },
-        "macos": "<0>下载 macOS 版 Ollama</0>，解压并安装",
         "title": "在本地安装并开启 Ollama 应用",
-        "windows": "<0>下载 Windows 版 Ollama</0>，解压并安装",
         "windowsTab": "Windows (预览版)"
       }
     },

package/locales/zh-TW/chat.json

@@ -25,8 +25,9 @@
     "title": "隨便聊聊"
   },
   "input": {
+    "addAi": "新增一條 AI 訊息",
+    "addUser": "新增一條使用者訊息",
     "more": "更多",
-    "onlyAdd": "僅新增訊息",
     "send": "發送",
     "sendWithCmdEnter": "按 {{meta}} + Enter 鍵發送",
     "sendWithEnter": "按 Enter 鍵發送",
@@ -101,6 +102,8 @@
     "confirmRemoveTopic": "即將刪除該話題，刪除後將不可恢復，請謹慎操作。",
     "confirmRemoveUnstarred": "即將刪除未收藏話題，刪除後將不可恢復，請謹慎操作。",
     "defaultTitle": "默認話題",
+    "duplicateLoading": "話題複製中...",
+    "duplicateSuccess": "話題複製成功",
     "guide": {
       "desc": "點擊發送左側按鈕可將當前對話保存為歷史話題，並開啟新一輪對話",
       "title": "話題列表"

package/locales/zh-TW/modelProvider.json

@@ -147,15 +147,13 @@
         "windows": "在 Windows 上，點擊「控制面板」，進入編輯系統環境變數。為您的使用者帳戶新增名為「OLLAMA_ORIGINS」的環境變數，值為 *，點擊「確定/應用」保存"
       },
       "install": {
-        "description": "請確認您已經啟動 Ollama，如果尚未下載 Ollama，請前往官網下載",
+        "description": "請確認您已經啟用 Ollama，如果尚未下載 Ollama，請前往官網<1>下載</1>",
         "docker": "如果您更傾向於使用 Docker，Ollama 也提供了官方 Docker 映像，您可以透過以下命令拉取：",
         "linux": {
           "command": "透過以下命令安裝：",
           "manual": "或者，您也可以參考 <1>Linux 手動安裝指南</1> 自行安裝"
         },
-        "macos": "<0>下載 macOS 版 Ollama</0>，解壓並安裝",
         "title": "在本地安裝並啟動 Ollama 應用",
-        "windows": "<0>下載 Windows 版 Ollama</0>，解壓並安裝",
         "windowsTab": "Windows (預覽版)"
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.149.0",
+  "version": "0.149.2",
   "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",

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

@@ -0,0 +1,117 @@
+import { Icon } from '@lobehub/ui';
+import { Button, Dropdown } from 'antd';
+import { createStyles } from 'antd-style';
+import { BotMessageSquare, LucideCheck, LucideChevronDown, MessageSquarePlus } from 'lucide-react';
+import { memo } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import HotKeys from '@/components/HotKeys';
+import { ALT_KEY } from '@/const/hotkeys';
+import { useSendMessage } from '@/features/ChatInput/useSend';
+import { useChatStore } from '@/store/chat';
+import { useGlobalStore } from '@/store/global';
+import { preferenceSelectors } from '@/store/global/selectors';
+import { isMacOS } from '@/utils/platform';
+
+const useStyles = createStyles(({ css, prefixCls }) => {
+  return {
+    arrow: css`
+      &.${prefixCls}-btn.${prefixCls}-btn-icon-only {
+        width: 28px;
+      }
+    `,
+  };
+});
+
+const isMac = isMacOS();
+
+const SendMore = memo(() => {
+  const { t } = useTranslation('chat');
+
+  const { styles } = useStyles();
+
+  const [useCmdEnterToSend, updatePreference] = useGlobalStore((s) => [
+    preferenceSelectors.useCmdEnterToSend(s),
+    s.updatePreference,
+  ]);
+  const addAIMessage = useChatStore((s) => s.addAIMessage);
+
+  const sendMessage = useSendMessage();
+
+  const hotKey = [ALT_KEY, 'enter'].join('+');
+  useHotkeys(
+    hotKey,
+    (keyboardEvent, hotkeysEvent) => {
+      console.log(keyboardEvent, hotkeysEvent);
+      sendMessage(true);
+    },
+    {
+      enableOnFormTags: true,
+      preventDefault: true,
+    },
+  );
+
+  return (
+    <Dropdown
+      menu={{
+        items: [
+          {
+            icon: !useCmdEnterToSend ? <Icon icon={LucideCheck} /> : <div />,
+            key: 'sendWithEnter',
+            label: t('input.sendWithEnter'),
+            onClick: () => {
+              updatePreference({ useCmdEnterToSend: false });
+            },
+          },
+          {
+            icon: useCmdEnterToSend ? <Icon icon={LucideCheck} /> : <div />,
+            key: 'sendWithCmdEnter',
+            label: t('input.sendWithCmdEnter', {
+              meta: isMac ? 'Cmd' : 'Ctrl',
+            }),
+            onClick: () => {
+              updatePreference({ useCmdEnterToSend: true });
+            },
+          },
+          { type: 'divider' },
+          {
+            icon: <Icon icon={BotMessageSquare} />,
+            key: 'addAi',
+            label: t('input.addAi'),
+            onClick: () => {
+              addAIMessage();
+            },
+          },
+          {
+            icon: <Icon icon={MessageSquarePlus} />,
+            key: 'addUser',
+            label: (
+              <Flexbox gap={24} horizontal>
+                {t('input.addUser')}
+                <HotKeys keys={hotKey} />
+              </Flexbox>
+            ),
+            onClick: () => {
+              sendMessage(true);
+            },
+          },
+        ],
+      }}
+      placement={'topRight'}
+      trigger={['hover']}
+    >
+      <Button
+        aria-label={t('input.more')}
+        className={styles.arrow}
+        icon={<Icon icon={LucideChevronDown} />}
+        type={'primary'}
+      />
+    </Dropdown>
+  );
+});
+
+SendMore.displayName = 'SendMore';
+
+export default SendMore;

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

@@ -1,14 +1,7 @@
 import { Icon } from '@lobehub/ui';
-import { Button, Dropdown, Space } from 'antd';
+import { Button, Space } from 'antd';
 import { createStyles } from 'antd-style';
-import {
-  ChevronUp,
-  CornerDownLeft,
-  LucideCheck,
-  LucideChevronDown,
-  LucideCommand,
-  LucidePlus,
-} from 'lucide-react';
+import { ChevronUp, CornerDownLeft, LucideCommand } from 'lucide-react';
 import { rgba } from 'polished';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -26,6 +19,7 @@ import { isMacOS } from '@/utils/platform';
 
 import DragUpload from './DragUpload';
 import { LocalFiles } from './LocalFiles';
+import SendMore from './SendMore';
 
 const useStyles = createStyles(({ css, prefixCls, token }) => {
   return {
@@ -69,13 +63,13 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
     !!s.chatLoadingId,
     s.stopGenerateMessage,
   ]);
-  const [useCmdEnterToSend, updatePreference] = useGlobalStore((s) => [
-    preferenceSelectors.useCmdEnterToSend(s),
-    s.updatePreference,
-  ]);
 
   const model = useSessionStore(agentSelectors.currentAgentModel);
-  const canUpload = useGlobalStore(modelProviderSelectors.isModelEnabledUpload(model));
+
+  const [useCmdEnterToSend, canUpload] = useGlobalStore((s) => [
+    preferenceSelectors.useCmdEnterToSend(s),
+    modelProviderSelectors.isModelEnabledUpload(model)(s),
+  ]);
 
   const sendMessage = useSendMessage();
 
@@ -147,48 +141,7 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
               >
                 {t('input.send')}
               </Button>
-              <Dropdown
-                menu={{
-                  items: [
-                    {
-                      icon: !useCmdEnterToSend ? <Icon icon={LucideCheck} /> : <div />,
-                      key: 'sendWithEnter',
-                      label: t('input.sendWithEnter'),
-                      onClick: () => {
-                        updatePreference({ useCmdEnterToSend: false });
-                      },
-                    },
-                    {
-                      icon: useCmdEnterToSend ? <Icon icon={LucideCheck} /> : <div />,
-                      key: 'sendWithCmdEnter',
-                      label: t('input.sendWithCmdEnter', {
-                        meta: isMac ? 'Cmd' : 'Ctrl',
-                      }),
-                      onClick: () => {
-                        updatePreference({ useCmdEnterToSend: true });
-                      },
-                    },
-                    { type: 'divider' },
-                    {
-                      icon: <Icon icon={LucidePlus} />,
-                      key: 'onlyAdd',
-                      label: t('input.onlyAdd'),
-                      onClick: () => {
-                        sendMessage(true);
-                      },
-                    },
-                  ],
-                }}
-                placement={'topRight'}
-                trigger={['hover']}
-              >
-                <Button
-                  aria-label={t('input.more')}
-                  className={styles.arrow}
-                  icon={<Icon icon={LucideChevronDown} />}
-                  type={'primary'}
-                />
-              </Dropdown>
+              <SendMore />
             </Space.Compact>
           )}
         </Flexbox>

package/src/app/chat/(desktop)/features/ChatInput/TextArea.tsx

@@ -88,7 +88,7 @@ const InputArea = memo<InputAreaProps>(({ setExpand }) => {
           isChineseInput.current = true;
         }}
         onPressEnter={(e) => {
-          if (loading || e.shiftKey || isChineseInput.current) return;
+          if (loading || e.altKey || e.shiftKey || isChineseInput.current) return;
 
           // eslint-disable-next-line unicorn/consistent-function-scoping
           const send = () => {

package/src/app/chat/(desktop)/features/HotKeys.tsx

@@ -2,13 +2,13 @@ import isEqual from 'fast-deep-equal';
 import { useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { CLEAN_MESSAGE_KEY, META_KEY, PREFIX_KEY, REGENERATE_KEY } from '@/const/hotkeys';
+import { ALT_KEY, CLEAN_MESSAGE_KEY, META_KEY, REGENERATE_KEY } from '@/const/hotkeys';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 import { useFileStore } from '@/store/file';
 
 const HotKeys = () => {
-  const resendHotkeys = [PREFIX_KEY, REGENERATE_KEY].join('+');
+  const resendHotkeys = [ALT_KEY, REGENERATE_KEY].join('+');
 
   const [regenerateMessage, clearMessage] = useChatStore((s) => [
     s.regenerateMessage,
@@ -17,7 +17,7 @@ const HotKeys = () => {
   const lastMessage = useChatStore(chatSelectors.latestMessage, isEqual);
 
   const [clearImageList] = useFileStore((s) => [s.clearImageList]);
-  const clearHotkeys = [META_KEY, PREFIX_KEY, CLEAN_MESSAGE_KEY].join('+');
+  const clearHotkeys = [META_KEY, ALT_KEY, CLEAN_MESSAGE_KEY].join('+');
 
   const resetConversation = useCallback(() => {
     clearMessage();

package/src/app/chat/features/TopicListContent/Topic/TopicContent.tsx

@@ -1,7 +1,15 @@
 import { ActionIcon, EditableText, Icon } from '@lobehub/ui';
 import { App, Dropdown, type MenuProps, Typography } from 'antd';
 import { createStyles } from 'antd-style';
-import { LucideCopy, MoreVertical, PencilLine, Star, Trash, Wand2 } from 'lucide-react';
+import {
+  LucideCopy,
+  LucideLoader2,
+  MoreVertical,
+  PencilLine,
+  Star,
+  Trash,
+  Wand2,
+} from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -40,7 +48,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
     removeTopic,
     autoRenameTopicTitle,
     duplicateTopic,
-    // sessionId,
+    isLoading,
   ] = useChatStore((s) => [
     s.topicRenamingId === id,
     s.favoriteTopic,
@@ -48,7 +56,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
     s.removeTopic,
     s.autoRenameTopicTitle,
     s.duplicateTopic,
-    s.activeId,
+    s.topicLoadingIds.includes(id),
   ]);
   const { styles, theme } = useStyles();
 
@@ -137,15 +145,16 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
       }}
     >
       <ActionIcon
-        color={fav ? theme.colorWarning : undefined}
-        fill={fav ? theme.colorWarning : 'transparent'}
-        icon={Star}
+        color={fav && !isLoading ? theme.colorWarning : undefined}
+        fill={fav && !isLoading ? theme.colorWarning : 'transparent'}
+        icon={isLoading ? LucideLoader2 : Star}
         onClick={(e) => {
           e.stopPropagation();
           if (!id) return;
           favoriteTopic(id, !fav);
         }}
         size={'small'}
+        spin={isLoading}
       />
       {!editing ? (
         <Paragraph

package/src/components/HotKeys/index.tsx

@@ -4,53 +4,49 @@ import { Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { isString } from 'lodash-es';
 import { Command, Delete, Option } from 'lucide-react';
+import { rgba } from 'polished';
 import { memo, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { CLEAN_MESSAGE_KEY, META_KEY, PREFIX_KEY } from '@/const/hotkeys';
+import { ALT_KEY, CLEAN_MESSAGE_KEY, META_KEY } from '@/const/hotkeys';
 import { usePlatform } from '@/hooks/usePlatform';
 
 const useStyles = createStyles(
-  ({ css, token }) => css`
+  ({ css, token }, inverseTheme: boolean) => css`
     font-size: 12px;
 
-    span {
-      font-weight: 600;
-    }
-
     kbd {
       min-width: 16px;
-      padding: 3px 6px;
+      height: 22px;
+      padding-inline: 8px;
 
-      line-height: 1;
-      color: ${token.colorTextDescription};
+      line-height: 22px;
+      color: ${inverseTheme ? token.colorTextTertiary : token.colorTextSecondary};
       text-align: center;
 
-      background: ${token.colorBgContainer};
-      border: 1px solid ${token.colorBorderSecondary};
-      border-bottom-color: ${token.colorBorder};
+      background: ${inverseTheme ? rgba(token.colorTextTertiary, 0.15) : token.colorFillTertiary};
       border-radius: ${token.borderRadius}px;
-      box-shadow: inset 0 -1px 0 ${token.colorBorder};
     }
   `,
 );
 
 export interface HotKeysProps {
   desc?: string;
+  inverseTheme?: boolean;
   keys: string;
 }
 
-const HotKeys = memo<HotKeysProps>(({ keys, desc }) => {
-  const { styles } = useStyles();
+const HotKeys = memo<HotKeysProps>(({ keys, desc, inverseTheme }) => {
+  const { styles } = useStyles(inverseTheme);
   const [keysGroup, setKeysGroup] = useState(keys.split('+'));
   const visibility = typeof window === 'undefined' ? 'hidden' : 'visible';
   const { isApple } = usePlatform();
 
   useEffect(() => {
     const mapping: Record<string, any> = {
+      [ALT_KEY]: isApple ? <Icon icon={Option} /> : 'alt',
       [CLEAN_MESSAGE_KEY]: isApple ? <Icon icon={Delete} /> : 'backspace',
       [META_KEY]: isApple ? <Icon icon={Command} /> : 'ctrl',
-      [PREFIX_KEY]: isApple ? <Icon icon={Option} /> : 'alt',
     };
     const newValue = keys
       .split('+')
@@ -60,7 +56,7 @@ const HotKeys = memo<HotKeysProps>(({ keys, desc }) => {
   }, [keys]);
 
   const content = (
-    <Flexbox align={'center'} className={styles} gap={2} horizontal>
+    <Flexbox align={'center'} className={styles} gap={4} horizontal>
       {keysGroup.map((key, index) => (
         <kbd key={index}>
           <span style={{ visibility }}>{isString(key) ? key.toUpperCase() : key}</span>
@@ -71,7 +67,7 @@ const HotKeys = memo<HotKeysProps>(({ keys, desc }) => {
 
   if (!desc) return content;
   return (
-    <Flexbox align={'center'} style={{ textAlign: 'center' }}>
+    <Flexbox gap={16} horizontal>
       {desc}
       {content}
     </Flexbox>

package/src/const/hotkeys.ts

@@ -1,4 +1,4 @@
-export const PREFIX_KEY = 'alt';
+export const ALT_KEY = 'alt';
 export const META_KEY = 'mod';
 export const SAVE_TOPIC_KEY = 'n';
 export const CLEAN_MESSAGE_KEY = 'backspace';

package/src/features/ChatInput/ActionBar/Clear.tsx

@@ -5,7 +5,7 @@ import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import HotKeys from '@/components/HotKeys';
-import { CLEAN_MESSAGE_KEY, META_KEY, PREFIX_KEY } from '@/const/hotkeys';
+import { ALT_KEY, CLEAN_MESSAGE_KEY, META_KEY } from '@/const/hotkeys';
 import { useChatStore } from '@/store/chat';
 import { useFileStore } from '@/store/file';
 
@@ -13,7 +13,7 @@ const Clear = memo(() => {
   const { t } = useTranslation('setting');
   const [clearMessage] = useChatStore((s) => [s.clearMessage]);
   const [clearImageList] = useFileStore((s) => [s.clearImageList]);
-  const hotkeys = [META_KEY, PREFIX_KEY, CLEAN_MESSAGE_KEY].join('+');
+  const hotkeys = [META_KEY, ALT_KEY, CLEAN_MESSAGE_KEY].join('+');
   const [confirmOpened, updateConfirmOpened] = useState(false);
 
   const resetConversation = useCallback(async () => {
@@ -24,7 +24,7 @@ const Clear = memo(() => {
   const actionTitle: any = confirmOpened ? (
     void 0
   ) : (
-    <HotKeys desc={t('clearCurrentMessages', { ns: 'chat' })} keys={hotkeys} />
+    <HotKeys desc={t('clearCurrentMessages', { ns: 'chat' })} inverseTheme keys={hotkeys} />
   );
 
   return (