@lobehub/chat 0.149.1 → 0.149.2

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.149.2](https://github.com/lobehub/lobe-chat/compare/v0.149.1...v0.149.2)
+
+<sup>Released on **2024-04-24**</sup>
+
+#### 💄 Styles
+
+- **misc**: Support to create ai message.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Support to create ai message, closes [#2185](https://github.com/lobehub/lobe-chat/issues/2185) ([ba3ba6a](https://github.com/lobehub/lobe-chat/commit/ba3ba6a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.149.1](https://github.com/lobehub/lobe-chat/compare/v0.149.0...v0.149.1)
 
 <sup>Released on **2024-04-24**</sup>

package/locales/ar/chat.json

@@ -25,8 +25,9 @@
     "title": "دردشة عشوائية"
   },
   "input": {
+    "addAi": "إضافة رسالة AI",
+    "addUser": "إضافة رسالة مستخدم",
     "more": "المزيد",
-    "onlyAdd": "إضافة الرسالة فقط",
     "send": "إرسال",
     "sendWithCmdEnter": "اضغط {{meta}} + Enter للإرسال",
     "sendWithEnter": "اضغط Enter للإرسال",

package/locales/bg-BG/chat.json

@@ -25,8 +25,9 @@
     "title": "Просто чати"
   },
   "input": {
+    "addAi": "Добави AI съобщение",
+    "addUser": "Добави потребителско съобщение",
     "more": "още",
-    "onlyAdd": "Само добави съобщение",
     "send": "Изпрати",
     "sendWithCmdEnter": "Натисни {{meta}} + Enter за да изпратиш",
     "sendWithEnter": "Натисни Enter за да изпратиш",

package/locales/de-DE/chat.json

@@ -25,8 +25,9 @@
     "title": "Lass uns plaudern"
   },
   "input": {
+    "addAi": "Fügen Sie eine AI-Nachricht hinzu",
+    "addUser": "Fügen Sie eine Benutzer-Nachricht hinzu",
     "more": "Mehr",
-    "onlyAdd": "Nur Nachricht hinzufügen",
     "send": "Senden",
     "sendWithCmdEnter": "Mit {{meta}} + Eingabetaste senden",
     "sendWithEnter": "Mit Eingabetaste senden",

package/locales/en-US/chat.json

@@ -8,7 +8,7 @@
   "clearCurrentMessages": "Clear current session messages",
   "confirmClearCurrentMessages": "You are about to clear the current session messages. Once cleared, they cannot be retrieved. Please confirm your action.",
   "confirmRemoveSessionItemAlert": "You are about to delete this agent. Once deleted, it cannot be retrieved. Please confirm your action.",
-  "confirmRemoveSessionSuccess": "Assistant removed successfully",
+  "confirmRemoveSessionSuccess": "Agent removed successfully",
   "defaultAgent": "Default Agent",
   "defaultList": "Default List",
   "defaultSession": "Default Agent",
@@ -25,8 +25,9 @@
     "title": "Just Chat"
   },
   "input": {
+    "addAi": "Add an AI message",
+    "addUser": "Add a user message",
     "more": "more",
-    "onlyAdd": "Only add message",
     "send": "Send",
     "sendWithCmdEnter": "Press {{meta}} + Enter to send",
     "sendWithEnter": "Press Enter to send",
@@ -48,10 +49,10 @@
   "sessionGroup": {
     "config": "Group Management",
     "confirmRemoveGroupAlert": "This group is about to be deleted. After deletion, the agents in this group will be moved to the default list. Please confirm your operation.",
-    "createAgentSuccess": "Assistant created successfully",
+    "createAgentSuccess": "Agent created successfully",
     "createGroup": "Add New Group",
     "createSuccess": "Created successfully",
-    "creatingAgent": "Creating assistant...",
+    "creatingAgent": "Creating agent...",
     "inputPlaceholder": "Please enter group name...",
     "moveGroup": "Move to Group",
     "newGroup": "New Group",

package/locales/es-ES/chat.json

@@ -25,8 +25,9 @@
     "title": "Charla casual"
   },
   "input": {
+    "addAi": "Agregar un mensaje de IA",
+    "addUser": "Agregar un mensaje de usuario",
     "more": "más",
-    "onlyAdd": "Añadir solo",
     "send": "Enviar",
     "sendWithCmdEnter": "Enviar con {{meta}} + Enter",
     "sendWithEnter": "Enviar con Enter",

package/locales/fr-FR/chat.json

@@ -8,7 +8,7 @@
   "clearCurrentMessages": "Effacer les messages actuels",
   "confirmClearCurrentMessages": "Vous êtes sur le point d'effacer les messages de cette session. Cette action est irréversible. Veuillez confirmer.",
   "confirmRemoveSessionItemAlert": "Vous êtes sur le point de supprimer cet agent. Cette action est irréversible. Veuillez confirmer.",
-  "confirmRemoveSessionSuccess": "Assistant supprimé avec succès",
+  "confirmRemoveSessionSuccess": "Agent supprimé avec succès",
   "defaultAgent": "Agent par défaut",
   "defaultList": "Liste par défaut",
   "defaultSession": "Session par défaut",
@@ -25,8 +25,9 @@
     "title": "Discutons un peu"
   },
   "input": {
+    "addAi": "Ajouter un message AI",
+    "addUser": "Ajouter un message utilisateur",
     "more": "Plus",
-    "onlyAdd": "Ajouter uniquement",
     "send": "Envoyer",
     "sendWithCmdEnter": "Envoyer avec {{meta}} + Entrée",
     "sendWithEnter": "Envoyer avec Entrée",
@@ -48,10 +49,10 @@
   "sessionGroup": {
     "config": "Gestion des groupes",
     "confirmRemoveGroupAlert": "Vous êtes sur le point de supprimer ce groupe. Une fois supprimé, les agents de ce groupe seront déplacés vers la liste par défaut. Veuillez confirmer votre action.",
-    "createAgentSuccess": "Création de l'assistant réussie",
+    "createAgentSuccess": "Création de l'agent réussie",
     "createGroup": "Créer un nouveau groupe",
     "createSuccess": "Création réussie",
-    "creatingAgent": "Création de l'assistant en cours...",
+    "creatingAgent": "Création de l'agent en cours...",
     "inputPlaceholder": "Veuillez saisir le nom du groupe...",
     "moveGroup": "Déplacer vers un groupe",
     "newGroup": "Nouveau groupe",

package/locales/it-IT/chat.json

@@ -25,8 +25,9 @@
     "title": "Chiacchierata casuale"
   },
   "input": {
+    "addAi": "Aggiungi un messaggio AI",
+    "addUser": "Aggiungi un messaggio utente",
     "more": "Ulteriori",
-    "onlyAdd": "Solo aggiungi messaggio",
     "send": "Invia",
     "sendWithCmdEnter": "Invia premendo {{meta}} + Invio",
     "sendWithEnter": "Invia premendo Invio",

package/locales/ja-JP/chat.json

@@ -25,8 +25,9 @@
     "title": "気軽におしゃべり"
   },
   "input": {
+    "addAi": "AIメッセージを追加",
+    "addUser": "ユーザーメッセージを追加",
     "more": "もっと",
-    "onlyAdd": "メッセージのみ追加",
     "send": "送信",
     "sendWithCmdEnter": "{{meta}} + Enter キーで送信",
     "sendWithEnter": "Enter キーで送信",

package/locales/ko-KR/chat.json

@@ -25,8 +25,9 @@
     "title": "무작위 대화"
   },
   "input": {
+    "addAi": "AI 메시지 추가",
+    "addUser": "사용자 메시지 추가",
     "more": "더 많은",
-    "onlyAdd": "메시지만 추가",
     "send": "전송",
     "sendWithCmdEnter": "{{meta}} + Enter 키로 전송",
     "sendWithEnter": "Enter 키로 전송",

package/locales/nl-NL/chat.json

@@ -25,8 +25,9 @@
     "title": "Praat maar raak"
   },
   "input": {
+    "addAi": "Voeg een AI-bericht toe",
+    "addUser": "Voeg een gebruikersbericht toe",
     "more": "Meer",
-    "onlyAdd": "Alleen bericht toevoegen",
     "send": "Verzenden",
     "sendWithCmdEnter": "Verzenden met {{meta}} + Enter",
     "sendWithEnter": "Verzenden met Enter",

package/locales/pl-PL/chat.json

@@ -25,8 +25,9 @@
     "title": "Pogadajmy sobie"
   },
   "input": {
+    "addAi": "Dodaj wiadomość AI",
+    "addUser": "Dodaj wiadomość użytkownika",
     "more": "więcej",
-    "onlyAdd": "Tylko dodaj wiadomość",
     "send": "Wyślij",
     "sendWithCmdEnter": "Wyślij za pomocą klawisza {{meta}} + Enter",
     "sendWithEnter": "Wyślij za pomocą klawisza Enter",

package/locales/pt-BR/chat.json

@@ -25,8 +25,9 @@
     "title": "Conversa Aleatória"
   },
   "input": {
+    "addAi": "Adicionar uma mensagem de IA",
+    "addUser": "Adicionar uma mensagem de usuário",
     "more": "mais",
-    "onlyAdd": "Apenas adicionar mensagem",
     "send": "Enviar",
     "sendWithCmdEnter": "Pressione {{meta}} + Enter para enviar",
     "sendWithEnter": "Pressione Enter para enviar",

package/locales/ru-RU/chat.json

@@ -25,8 +25,9 @@
     "title": "Просто поболтаем"
   },
   "input": {
+    "addAi": "Добавить сообщение AI",
+    "addUser": "Добавить сообщение пользователя",
     "more": "больше",
-    "onlyAdd": "Только добавить сообщение",
     "send": "Отправить",
     "sendWithCmdEnter": "Отправить с помощью {{meta}} + Enter",
     "sendWithEnter": "Отправить с помощью Enter",

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",

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",

package/locales/zh-CN/chat.json

@@ -25,8 +25,9 @@
     "title": "随便聊聊"
   },
   "input": {
+    "addAi": "添加一条 AI 消息",
+    "addUser": "添加一条用户消息",
     "more": "更多",
-    "onlyAdd": "仅添加消息",
     "send": "发送",
     "sendWithCmdEnter": "按 {{meta}} + Enter 键发送",
     "sendWithEnter": "按 Enter 键发送",

package/locales/zh-TW/chat.json

@@ -25,8 +25,9 @@
     "title": "隨便聊聊"
   },
   "input": {
+    "addAi": "新增一條 AI 訊息",
+    "addUser": "新增一條使用者訊息",
     "more": "更多",
-    "onlyAdd": "僅新增訊息",
     "send": "發送",
     "sendWithCmdEnter": "按 {{meta}} + Enter 鍵發送",
     "sendWithEnter": "按 Enter 鍵發送",

package/package.json

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

package/src/features/ChatInput/Topic/index.tsx

@@ -6,7 +6,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
 import HotKeys from '@/components/HotKeys';
-import { PREFIX_KEY, SAVE_TOPIC_KEY } from '@/const/hotkeys';
+import { ALT_KEY, SAVE_TOPIC_KEY } from '@/const/hotkeys';
 import { useActionSWR } from '@/libs/swr';
 import { useChatStore } from '@/store/chat';
 
@@ -24,7 +24,7 @@ const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
   const iconRender: any = mobile ? icon : <Icon icon={icon} />;
   const desc = t(hasTopic ? 'topic.openNewTopic' : 'topic.saveCurrentMessages');
 
-  const hotkeys = [PREFIX_KEY, SAVE_TOPIC_KEY].join('+');
+  const hotkeys = [ALT_KEY, SAVE_TOPIC_KEY].join('+');
 
   useHotkeys(hotkeys, () => mutate(), {
     enableOnFormTags: true,
@@ -32,7 +32,7 @@ const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
   });
 
   return (
-    <Tooltip title={<HotKeys desc={desc} keys={hotkeys} />}>
+    <Tooltip title={<HotKeys desc={desc} inverseTheme keys={hotkeys} />}>
       <Render aria-label={desc} icon={iconRender} loading={isValidating} onClick={() => mutate()} />
     </Tooltip>
   );

package/src/features/Conversation/Actions/Assistant.tsx

@@ -27,7 +27,7 @@ export const AssistantActionsBar: RenderAction = memo(({ id, onActionClick, erro
         delAndRegenerate,
         del,
       ]}
-      items={[regenerate, copy]}
+      items={[edit, copy]}
       onActionClick={onActionClick}
       type="ghost"
     />

package/src/locales/default/chat.ts

@@ -27,8 +27,9 @@ export default {
     title: '随便聊聊',
   },
   input: {
+    addAi: '添加一条 AI 消息',
+    addUser: '添加一条用户消息',
     more: '更多',
-    onlyAdd: '仅添加消息',
     send: '发送',
     sendWithCmdEnter: '按 {{meta}} + Enter 键发送',
     sendWithEnter: '按 Enter 键发送',

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

@@ -38,6 +38,7 @@ interface SendMessageParams {
 export interface ChatMessageAction {
   // create
   sendMessage: (params: SendMessageParams) => Promise<void>;
+  addAIMessage: () => Promise<void>;
   /**
    * regenerate message
    * trace enabled
@@ -214,7 +215,21 @@ export const chatMessage: StateCreator<
       if (id) switchTopic(id);
     }
   },
+  addAIMessage: async () => {
+    const { internalCreateMessage, updateInputMessage, activeTopicId, activeId, inputMessage } =
+      get();
+    if (!activeId) return;
+
+    await internalCreateMessage({
+      content: inputMessage,
+      role: 'assistant',
+      sessionId: activeId,
+      // if there is activeTopicId，then add topicId to message
+      topicId: activeTopicId,
+    });
 
+    updateInputMessage('');
+  },
   copyMessage: async (id, content) => {
     await copyToClipboard(content);