@lobehub/chat 1.123.4 → 1.124.0

package/src/features/Portal/Thread/Chat/ChatInput/index.tsx

@@ -4,63 +4,70 @@ import { Alert } from '@lobehub/ui';
 import Link from 'next/link';
 import { memo } from 'react';
 import { Trans } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
-import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
-import DesktopChatInput, { FooterRender } from '@/features/ChatInput/Desktop';
+import { type ActionKeys, ChatInputProvider, DesktopChatInput } from '@/features/ChatInput';
+import WideScreenContainer from '@/features/Conversation/components/WideScreenContainer';
+import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
-import Footer from './Footer';
-import TextArea from './TextArea';
+import { useSendThreadMessage } from './useSend';
 
-const leftActions = ['stt', 'portalToken'] as ActionKeys[];
-
-const rightActions = [] as ActionKeys[];
-
-const renderTextArea = (onSend: () => void) => <TextArea onSend={onSend} />;
-const renderFooter: FooterRender = (props) => <Footer {...props} />;
+const threadActions: ActionKeys[] = ['typo', 'stt', 'portalToken'];
 
 const Desktop = memo(() => {
-  const [inputHeight, hideThreadLimitAlert, updateSystemStatus] = useGlobalStore((s) => [
-    systemStatusSelectors.threadInputHeight(s),
+  const [hideThreadLimitAlert, updateSystemStatus] = useGlobalStore((s) => [
     systemStatusSelectors.systemStatus(s).hideThreadLimitAlert,
     s.updateSystemStatus,
   ]);
 
+  const { send, disabled, generating, stop } = useSendThreadMessage();
+
   return (
-    <>
+    <WideScreenContainer>
       {!hideThreadLimitAlert && (
-        <Alert
-          banner
-          closable
-          message={
-            <Trans i18nKey={'notSupportMultiModals'} ns={'thread'}>
-              子话题暂不支持文件/图片上传，如有需求，欢迎留言：
-              <Link
-                href={'https://github.com/lobehub/lobe-chat/discussions/4717'}
-                style={{ textDecoration: 'underline' }}
-              >
-                💬 讨论
-              </Link>
-            </Trans>
-          }
-          onClose={() => {
-            updateSystemStatus({ hideThreadLimitAlert: true });
-          }}
-          type={'info'}
-        />
+        <Flexbox paddingBlock={'0 6px'} paddingInline={12}>
+          <Alert
+            closable
+            message={
+              <Trans i18nKey={'notSupportMultiModals'} ns={'thread'}>
+                子话题暂不支持文件/图片上传，如有需求，欢迎留言：
+                <Link
+                  href={'https://github.com/lobehub/lobe-chat/discussions/4717'}
+                  style={{ textDecoration: 'underline' }}
+                >
+                  💬 讨论
+                </Link>
+              </Trans>
+            }
+            onClose={() => {
+              updateSystemStatus({ hideThreadLimitAlert: true });
+            }}
+            type={'info'}
+          />
+        </Flexbox>
       )}
-      <DesktopChatInput
-        inputHeight={inputHeight}
-        leftActions={leftActions}
-        onInputHeightChange={(height) => {
-          updateSystemStatus({ threadInputHeight: height });
+
+      <ChatInputProvider
+        chatInputEditorRef={(instance) => {
+          if (!instance) return;
+          useChatStore.setState({ threadInputEditor: instance });
+        }}
+        leftActions={threadActions}
+        onSend={() => {
+          send();
+        }}
+        sendButtonProps={{
+          disabled,
+          generating,
+          onStop: stop,
+          shape: 'round',
         }}
-        renderFooter={renderFooter}
-        renderTextArea={renderTextArea}
-        rightActions={rightActions}
-      />
-    </>
+      >
+        <DesktopChatInput />
+      </ChatInputProvider>
+    </WideScreenContainer>
   );
 });
 

package/src/features/Portal/Thread/Chat/ChatInput/useSend.ts

@@ -1,5 +1,8 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
+import { useGeminiChineseWarning } from '@/hooks/useGeminiChineseWarning';
+import { getAgentStoreState } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/slices/chat';
 import { useChatStore } from '@/store/chat';
 import { threadSelectors } from '@/store/chat/selectors';
 import { SendMessageParams } from '@/types/message';
@@ -10,41 +13,64 @@ export type UseSendMessageParams = Pick<
 >;
 
 export const useSendThreadMessage = () => {
+  const [loading, setLoading] = useState(false);
+  const canNotSend = useChatStore(threadSelectors.isSendButtonDisabledByMessage);
+  const generating = useChatStore((s) => threadSelectors.isThreadAIGenerating(s));
+  const stop = useChatStore((s) => s.stopGenerateMessage);
   const [sendMessage, updateInputMessage] = useChatStore((s) => [
     s.sendThreadMessage,
     s.updateThreadInputMessage,
   ]);
+  const checkGeminiChineseWarning = useGeminiChineseWarning();
 
-  const isSendButtonDisabledByMessage = useChatStore(threadSelectors.isSendButtonDisabledByMessage);
-
-  const canSend = !isSendButtonDisabledByMessage;
-
-  const send = useCallback((params: UseSendMessageParams = {}) => {
+  const handleSend = async (params: UseSendMessageParams = {}) => {
     const store = useChatStore.getState();
+
     if (threadSelectors.isThreadAIGenerating(store)) return;
+    const canNotSend = threadSelectors.isSendButtonDisabledByMessage(store);
+
+    if (canNotSend) return;
+
+    const threadInputEditor = store.threadInputEditor;
 
-    const isSendButtonDisabledByMessage = threadSelectors.isSendButtonDisabledByMessage(
-      useChatStore.getState(),
-    );
+    if (!threadInputEditor) {
+      console.warn('not found threadInputEditor instance');
+      return;
+    }
 
-    const canSend = !isSendButtonDisabledByMessage;
-    if (!canSend) return;
+    const inputMessage = threadInputEditor.getMarkdownContent();
 
     // if there is no message and no image, then we should not send the message
-    if (!store.threadInputMessage) return;
+    if (!inputMessage) return;
 
-    sendMessage({ message: store.threadInputMessage, ...params });
+    // Check for Chinese text warning with Gemini model
+    const agentStore = getAgentStoreState();
+    const currentModel = agentSelectors.currentAgentModel(agentStore);
+    const shouldContinue = await checkGeminiChineseWarning({
+      model: currentModel,
+      prompt: inputMessage,
+      scenario: 'chat',
+    });
 
-    updateInputMessage('');
+    if (!shouldContinue) return;
+
+    updateInputMessage(inputMessage);
 
-    // const hasSystemRole = agentSelectors.hasSystemRole(useAgentStore.getState());
-    // const agentSetting = useAgentStore.getState().agentSettingInstance;
+    sendMessage({ message: inputMessage, ...params });
+
+    updateInputMessage('');
+    threadInputEditor.clearContent();
+    threadInputEditor.focus();
+  };
 
-    // // if there is a system role, then we need to use agent setting instance to autocomplete agent meta
-    // if (hasSystemRole && !!agentSetting) {
-    //   agentSetting.autocompleteAllMeta();
-    // }
-  }, []);
+  const send = async (params: UseSendMessageParams = {}) => {
+    setLoading(true);
+    await handleSend(params);
+    setLoading(false);
+  };
 
-  return useMemo(() => ({ canSend, send }), [canSend]);
+  return useMemo(
+    () => ({ disabled: canNotSend, generating, loading, send, stop }),
+    [canNotSend, send, generating, stop, loading],
+  );
 };

package/src/features/Portal/Thread/Chat/index.tsx

@@ -11,7 +11,7 @@ interface ConversationProps {
 }
 
 const Conversation = memo<ConversationProps>(({ mobile }) => (
-  <Flexbox height={'100%'}>
+  <>
     <Suspense
       fallback={
         <Flexbox flex={1} height={'100%'}>
@@ -22,7 +22,7 @@ const Conversation = memo<ConversationProps>(({ mobile }) => (
       <ChatList mobile={mobile} />
     </Suspense>
     <ChatInput />
-  </Flexbox>
+  </>
 ));
 
 export default Conversation;

package/src/features/Portal/Thread/Header/index.tsx

@@ -40,7 +40,7 @@ const Header = memo(() => {
       paddingBlock={6}
       paddingInline={8}
       style={{
-        background: `linear-gradient(to bottom, ${theme.colorBgContainerSecondary}, ${theme.colorFillQuaternary})`,
+        borderBottom: `1px solid ${theme.colorBorderSecondary}`,
       }}
       title={<Title />}
     />

package/src/hooks/useHotkeys/chatScope.ts

@@ -2,8 +2,8 @@ import isEqual from 'fast-deep-equal';
 import { useEffect } from 'react';
 import { useHotkeysContext } from 'react-hotkeys-hook';
 
+import { useSend } from '@/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/useSend';
 import { useClearCurrentMessages } from '@/features/ChatInput/ActionBar/Clear';
-import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useActionSWR } from '@/libs/swr';
 import { useChatStore } from '@/store/chat';
@@ -75,8 +75,10 @@ export const useToggleRightPanelHotkey = () => {
 };
 
 export const useAddUserMessageHotkey = () => {
-  const { send } = useSendMessage();
-  return useHotkeyById(HotkeyEnum.AddUserMessage, () => send({ onlyAddUserMessage: true }));
+  const { send } = useSend();
+  return useHotkeyById(HotkeyEnum.AddUserMessage, () => {
+    send({ onlyAddUserMessage: true });
+  });
 };
 
 export const useClearCurrentMessagesHotkey = () => {

package/src/layout/GlobalProvider/Editor.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { EditorProvider } from '@lobehub/editor/react';
+import { PropsWithChildren, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Editor = memo<PropsWithChildren>(({ children }) => {
+  const {
+    i18n: { language, getResourceBundle },
+  } = useTranslation('editor');
+
+  const localization = useMemo(() => getResourceBundle(language, 'editor'), [language]);
+
+  return (
+    <EditorProvider
+      config={{
+        locale: localization,
+      }}
+    >
+      {children}
+    </EditorProvider>
+  );
+});
+
+Editor.displayName = 'Editor';
+
+export default Editor;

package/src/layout/GlobalProvider/Locale.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { ConfigProvider } from 'antd';
-import { useTheme } from 'antd-style';
 import dayjs from 'dayjs';
 import { PropsWithChildren, memo, useEffect, useState } from 'react';
 import { isRtlLang } from 'rtl-detect';
@@ -10,6 +9,8 @@ import { createI18nNext } from '@/locales/create';
 import { isOnServerSide } from '@/utils/env';
 import { getAntdLocale } from '@/utils/locale';
 
+import Editor from './Editor';
+
 const updateDayjs = async (lang: string) => {
   // load default lang
   let dayJSLocale;
@@ -36,7 +37,6 @@ const Locale = memo<LocaleLayoutProps>(({ children, defaultLang, antdLocale }) =
   const [i18n] = useState(createI18nNext(defaultLang));
   const [lang, setLang] = useState(defaultLang);
   const [locale, setLocale] = useState(antdLocale);
-  const theme = useTheme();
 
   // if run on server side, init i18n instance everytime
   if (isOnServerSide) {
@@ -91,30 +91,10 @@ const Locale = memo<LocaleLayoutProps>(({ children, defaultLang, antdLocale }) =
           Button: {
             contentFontSizeSM: 12,
           },
-          DatePicker: {
-            activeBorderColor: theme.colorBorder,
-            hoverBorderColor: theme.colorBorder,
-          },
-          Input: {
-            activeBorderColor: theme.colorBorder,
-            hoverBorderColor: theme.colorBorder,
-          },
-          InputNumber: {
-            activeBorderColor: theme.colorBorder,
-            hoverBorderColor: theme.colorBorder,
-          },
-          Mentions: {
-            activeBorderColor: theme.colorBorder,
-            hoverBorderColor: theme.colorBorder,
-          },
-          Select: {
-            activeBorderColor: theme.colorBorder,
-            hoverBorderColor: theme.colorBorder,
-          },
         },
       }}
     >
-      {children}
+      <Editor>{children}</Editor>
     </ConfigProvider>
   );
 });

package/src/locales/default/chat.ts

@@ -71,10 +71,11 @@ export default {
   input: {
     addAi: '添加一条 AI 消息',
     addUser: '添加一条用户消息',
+    errorMsg: '消息发送失败，请检查网络后重试: {{errorMsg}}',
     more: '更多',
     send: '发送',
-    sendWithCmdEnter: '按 {{meta}} + Enter 键发送',
-    sendWithEnter: '按 Enter 键发送',
+    sendWithCmdEnter: '按 <key/> 键发送',
+    sendWithEnter: '按 <key/> 键发送',
     stop: '停止',
     warp: '换行',
   },
@@ -236,6 +237,10 @@ export default {
     threadMessageCount: '{{messageCount}} 条消息',
     title: '子话题',
   },
+  toggleWideScreen: {
+    off: '关闭宽屏模式',
+    on: '开启宽屏模式',
+  },
   tokenDetails: {
     chats: '会话消息',
     historySummary: '历史总结',

package/src/locales/default/editor.ts

@@ -0,0 +1,47 @@
+export default {
+  actions: {
+    expand: {
+      off: '收起',
+      on: '展开',
+    },
+    typobar: {
+      off: '隐藏格式工具栏',
+      on: '显示格式工具栏',
+    },
+  },
+  file: {
+    error: '错误：{{message}}',
+    uploading: '正在上传文件...',
+  },
+  image: {
+    broken: '图片损坏',
+  },
+  link: {
+    edit: '编辑链接',
+    open: '打开链接',
+    placeholder: '输入链接 URL',
+    unlink: '取消链接',
+  },
+  table: {
+    delete: '删除表格',
+    deleteColumn: '删除列',
+    deleteRow: '删除行',
+    insertColumnLeft: '在左侧插入 {{count}} 列',
+    insertColumnRight: '在右侧插入 {{count}} 列',
+    insertRowAbove: '在上方插入 {{count}} 行',
+    insertRowBelow: '在下方插入 {{count}} 行',
+  },
+  typobar: {
+    blockquote: '引用',
+    bold: '加粗',
+    bulletList: '无序列表',
+    code: '行内代码',
+    codeblock: '代码块',
+    italic: '斜体',
+    link: '链接',
+    numberList: '有序列表',
+    strikethrough: '删除线',
+    table: '插入表格',
+    underline: '下划线',
+  },
+};

package/src/locales/default/index.ts

@@ -6,6 +6,7 @@ import color from './color';
 import common from './common';
 import components from './components';
 import discover from './discover';
+import editor from './editor';
 import electron from './electron';
 import error from './error';
 import file from './file';
@@ -37,6 +38,7 @@ const resources = {
   common,
   components,
   discover,
+  editor,
   electron,
   error,
   file,

package/src/services/aiChat.ts

@@ -4,8 +4,14 @@ import { cleanObject } from '@lobechat/utils';
 import { lambdaClient } from '@/libs/trpc/client';
 
 class AiChatService {
-  sendMessageInServer = async (params: SendMessageServerParams) => {
-    return lambdaClient.aiChat.sendMessageInServer.mutate(cleanObject(params));
+  sendMessageInServer = async (
+    params: SendMessageServerParams,
+    abortController: AbortController,
+  ) => {
+    return lambdaClient.aiChat.sendMessageInServer.mutate(cleanObject(params), {
+      context: { showNotification: false },
+      signal: abortController?.signal,
+    });
   };
 }
 

package/src/store/chat/slices/aiChat/actions/__tests__/generateAIChatV2.test.ts

@@ -187,18 +187,21 @@ describe('generateAIChatV2 actions', () => {
         await result.current.sendMessage({ message, files });
       });
 
-      expect(aiChatService.sendMessageInServer).toHaveBeenCalledWith({
-        newAssistantMessage: {
-          model: DEFAULT_MODEL,
-          provider: DEFAULT_PROVIDER,
+      expect(aiChatService.sendMessageInServer).toHaveBeenCalledWith(
+        {
+          newAssistantMessage: {
+            model: DEFAULT_MODEL,
+            provider: DEFAULT_PROVIDER,
+          },
+          newUserMessage: {
+            content: message,
+            files: files.map((f) => f.id),
+          },
+          sessionId: mockState.activeId,
+          topicId: mockState.activeTopicId,
         },
-        newUserMessage: {
-          content: message,
-          files: files.map((f) => f.id),
-        },
-        sessionId: mockState.activeId,
-        topicId: mockState.activeTopicId,
-      });
+        expect.anything(),
+      );
       expect(result.current.internal_execAgentRuntime).toHaveBeenCalled();
     });
 
@@ -270,18 +273,21 @@ describe('generateAIChatV2 actions', () => {
         await result.current.sendMessage({ message: '', files: [{ id: 'file-1' }] as any });
       });
 
-      expect(aiChatService.sendMessageInServer).toHaveBeenCalledWith({
-        newAssistantMessage: {
-          model: DEFAULT_MODEL,
-          provider: DEFAULT_PROVIDER,
-        },
-        newUserMessage: {
-          content: '',
-          files: ['file-1'],
+      expect(aiChatService.sendMessageInServer).toHaveBeenCalledWith(
+        {
+          newAssistantMessage: {
+            model: DEFAULT_MODEL,
+            provider: DEFAULT_PROVIDER,
+          },
+          newUserMessage: {
+            content: '',
+            files: ['file-1'],
+          },
+          sessionId: 'session-id',
+          topicId: 'topic-id',
         },
-        sessionId: 'session-id',
-        topicId: 'topic-id',
-      });
+        expect.anything(),
+      );
     });
 
     it('当同时有文件和消息内容时,正确发送消息并关联文件', async () => {
@@ -291,18 +297,21 @@ describe('generateAIChatV2 actions', () => {
         await result.current.sendMessage({ message: 'test', files: [{ id: 'file-1' }] as any });
       });
 
-      expect(aiChatService.sendMessageInServer).toHaveBeenCalledWith({
-        newAssistantMessage: {
-          model: DEFAULT_MODEL,
-          provider: DEFAULT_PROVIDER,
-        },
-        newUserMessage: {
-          content: 'test',
-          files: ['file-1'],
+      expect(aiChatService.sendMessageInServer).toHaveBeenCalledWith(
+        {
+          newAssistantMessage: {
+            model: DEFAULT_MODEL,
+            provider: DEFAULT_PROVIDER,
+          },
+          newUserMessage: {
+            content: 'test',
+            files: ['file-1'],
+          },
+          sessionId: 'session-id',
+          topicId: 'topic-id',
         },
-        sessionId: 'session-id',
-        topicId: 'topic-id',
-      });
+        expect.anything(),
+      );
     });
 
     it('当 createMessage 抛出错误时,正确处理错误而不影响整个应用', async () => {