@lobehub/chat 1.123.3 → 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/libs/trpc/client/lambda.ts

@@ -1,81 +1,94 @@
 import { ModelProvider } from '@lobechat/model-runtime';
-import { createTRPCClient, httpBatchLink } from '@trpc/client';
+import { TRPCLink, createTRPCClient, httpBatchLink } from '@trpc/client';
 import { createTRPCReact } from '@trpc/react-query';
+import { observable } from '@trpc/server/observable';
 import debug from 'debug';
 import superjson from 'superjson';
 
 import { isDesktop } from '@/const/version';
 import type { LambdaRouter } from '@/server/routers/lambda';
 
-import { ErrorResponse } from './types';
-
 const log = debug('lobe-image:lambda-client');
 
-const links = [
-  httpBatchLink({
-    fetch: async (input, init) => {
-      if (isDesktop) {
-        const { desktopRemoteRPCFetch } = await import('@/utils/electron/desktopRemoteRPCFetch');
+// handle error
+const errorHandlingLink: TRPCLink<LambdaRouter> = () => {
+  return ({ op, next }) =>
+    observable((observer) =>
+      next(op).subscribe({
+        complete: () => observer.complete(),
+        error: async (err) => {
+          const showError = (op.context?.showNotification as boolean) ?? true;
+
+          if (showError) {
+            const status = err.data?.httpStatus as number;
+
+            const { loginRequired } = await import('@/components/Error/loginRequiredNotification');
+            const { fetchErrorNotification } = await import(
+              '@/components/Error/fetchErrorNotification'
+            );
+
+            switch (status) {
+              case 401: {
+                loginRequired.redirect();
+                break;
+              }
+
+              default: {
+                fetchErrorNotification.error({ errorMessage: err.message, status });
+              }
+            }
+          }
 
-        // eslint-disable-next-line no-undef
-        const res = await desktopRemoteRPCFetch(input as string, init as RequestInit);
+          observer.error(err);
+        },
+        next: (value) => observer.next(value),
+      }),
+    );
+};
 
-        if (res) return res;
-      }
+// 2. httpBatchLink
+const customHttpBatchLink = httpBatchLink({
+  fetch: async (input, init) => {
+    if (isDesktop) {
+      const { desktopRemoteRPCFetch } = await import('@/utils/electron/desktopRemoteRPCFetch');
 
       // eslint-disable-next-line no-undef
-      const response = await fetch(input, init as RequestInit);
-
-      if (response.ok) return response;
-
-      const errorRes: ErrorResponse = await response.clone().json();
-
-      const { loginRequired } = await import('@/components/Error/loginRequiredNotification');
-      const { fetchErrorNotification } = await import('@/components/Error/fetchErrorNotification');
-
-      errorRes.forEach((item) => {
-        const errorData = item.error.json;
-        const status = errorData.data.httpStatus;
+      const res = await desktopRemoteRPCFetch(input as string, init as RequestInit);
+
+      if (res) return res;
+    }
+
+    // eslint-disable-next-line no-undef
+    return await fetch(input, init as RequestInit);
+  },
+  headers: async () => {
+    // dynamic import to avoid circular dependency
+    const { createHeaderWithAuth } = await import('@/services/_auth');
+
+    let provider: ModelProvider = ModelProvider.OpenAI;
+    // for image page, we need to get the provider from the store
+    log('Getting provider from store for image page: %s', location.pathname);
+    if (location.pathname === '/image') {
+      const { getImageStoreState } = await import('@/store/image');
+      const { imageGenerationConfigSelectors } = await import(
+        '@/store/image/slices/generationConfig/selectors'
+      );
+      provider = imageGenerationConfigSelectors.provider(getImageStoreState()) as ModelProvider;
+      log('Getting provider from store for image page: %s', provider);
+    }
+
+    // TODO: we need to support provider select for chat page
+    const headers = await createHeaderWithAuth({ provider });
+    log('Headers: %O', headers);
+    return headers;
+  },
+  maxURLLength: 2083,
+  transformer: superjson,
+  url: '/trpc/lambda',
+});
 
-        switch (status) {
-          case 401: {
-            loginRequired.redirect();
-            break;
-          }
-          default: {
-            fetchErrorNotification.error({ errorMessage: errorData.message, status });
-          }
-        }
-      });
-
-      return response;
-    },
-    headers: async () => {
-      // dynamic import to avoid circular dependency
-      const { createHeaderWithAuth } = await import('@/services/_auth');
-
-      let provider: ModelProvider = ModelProvider.OpenAI;
-      // for image page, we need to get the provider from the store
-      log('Getting provider from store for image page: %s', location.pathname);
-      if (location.pathname === '/image') {
-        const { getImageStoreState } = await import('@/store/image');
-        const { imageGenerationConfigSelectors } = await import(
-          '@/store/image/slices/generationConfig/selectors'
-        );
-        provider = imageGenerationConfigSelectors.provider(getImageStoreState()) as ModelProvider;
-        log('Getting provider from store for image page: %s', provider);
-      }
-
-      // TODO: we need to support provider select for chat page
-      const headers = await createHeaderWithAuth({ provider });
-      log('Headers: %O', headers);
-      return headers;
-    },
-    maxURLLength: 2083,
-    transformer: superjson,
-    url: '/trpc/lambda',
-  }),
-];
+// 3. assembly links
+const links = [errorHandlingLink, customHttpBatchLink];
 
 export const lambdaClient = createTRPCClient<LambdaRouter>({
   links,

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,
+    });
   };
 }