@lobehub/chat 1.120.7 → 1.121.0

package/packages/utils/src/detectChinese.ts

@@ -0,0 +1,12 @@
+/**
+ * Detect if text contains Chinese characters
+ * @param text - The text to check
+ * @returns true if text contains Chinese characters, false otherwise
+ */
+export const containsChinese = (text: string): boolean => {
+  // Enhanced regex to cover more Chinese character ranges:
+  // \u4e00-\u9fa5: CJK Unified Ideographs (basic)
+  // \u3400-\u4dbf: CJK Unified Ideographs Extension A
+  // \uf900-\ufaff: CJK Compatibility Ideographs
+  return /[\u3400-\u4DBF\u4E00-\u9FA5\uF900-\uFAFF]/.test(text);
+};

package/packages/utils/src/index.ts

@@ -1,4 +1,5 @@
 export * from './client/cookie';
+export * from './detectChinese';
 export * from './format';
 export * from './imageToBase64';
 export * from './parseModels';

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

@@ -7,10 +7,27 @@ import { useUserStore } from '@/store/user';
 
 import InputArea from './TextArea';
 
+let sendMessageMock: () => Promise<void>;
+
+// Mock the useSendMessage hook to return our mock function
+vi.mock('@/features/ChatInput/useSend', () => ({
+  useSendMessage: () => ({
+    send: sendMessageMock,
+    canSend: true,
+  }),
+}));
+
+// Mock the Chinese warning hook to always allow sending
+vi.mock('@/hooks/useGeminiChineseWarning', () => ({
+  useGeminiChineseWarning: () => () => Promise.resolve(true),
+}));
+
 let onSendMock: () => void;
 
 beforeEach(() => {
   onSendMock = vi.fn();
+  sendMessageMock = vi.fn().mockResolvedValue(undefined);
+  vi.clearAllMocks();
 });
 
 describe('<InputArea />', () => {
@@ -194,9 +211,8 @@ describe('<InputArea />', () => {
 
   describe('message sending behavior', () => {
     it('does not send message when loading or shift key is pressed', () => {
-      const sendMessageMock = vi.fn();
       act(() => {
-        useChatStore.setState({ chatLoadingIds: ['123'], sendMessage: sendMessageMock });
+        useChatStore.setState({ chatLoadingIds: ['123'] });
       });
 
       render(<InputArea onSend={onSendMock} />);
@@ -206,13 +222,11 @@ describe('<InputArea />', () => {
       expect(sendMessageMock).not.toHaveBeenCalled();
     });
 
-    it('sends message on Enter press when not loading and no shift key', () => {
-      const sendMessageMock = vi.fn();
+    it('sends message on Enter press when not loading and no shift key', async () => {
       act(() => {
         useChatStore.setState({
           chatLoadingIds: [],
           inputMessage: 'abc',
-          sendMessage: sendMessageMock,
         });
       });
 
@@ -221,17 +235,18 @@ describe('<InputArea />', () => {
       fireEvent.change(textArea, { target: { value: 'Test message' } });
 
       fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter' });
-      expect(sendMessageMock).toHaveBeenCalled();
+
+      await vi.waitFor(() => {
+        expect(sendMessageMock).toHaveBeenCalled();
+      });
     });
 
     describe('metaKey behavior for sending messages', () => {
-      it('windows: sends message on ctrl + enter when useCmdEnterToSend is true', () => {
-        const sendMessageMock = vi.fn();
+      it('windows: sends message on ctrl + enter when useCmdEnterToSend is true', async () => {
         act(() => {
           useChatStore.setState({
             chatLoadingIds: [],
             inputMessage: '123',
-            sendMessage: sendMessageMock,
           });
           useUserStore.getState().updatePreference({ useCmdEnterToSend: true });
         });
@@ -240,17 +255,18 @@ describe('<InputArea />', () => {
         const textArea = screen.getByRole('textbox');
 
         fireEvent.keyDown(textArea, { code: 'Enter', ctrlKey: true, key: 'Enter' });
-        expect(sendMessageMock).toHaveBeenCalled();
+
+        await vi.waitFor(() => {
+          expect(sendMessageMock).toHaveBeenCalled();
+        });
       });
 
       it('windows: inserts a new line on ctrl + enter when useCmdEnterToSend is false', () => {
-        const sendMessageMock = vi.fn();
         const updateInputMessageMock = vi.fn();
         act(() => {
           useChatStore.setState({
             chatLoadingIds: [],
             inputMessage: 'Test',
-            sendMessage: sendMessageMock,
             updateInputMessage: updateInputMessageMock,
           });
           useUserStore.getState().updatePreference({ useCmdEnterToSend: false });
@@ -264,17 +280,15 @@ describe('<InputArea />', () => {
         expect(sendMessageMock).not.toHaveBeenCalled(); // sendMessage should not be called
       });
 
-      it('macOS: sends message on cmd + enter when useCmdEnterToSend is true', () => {
+      it('macOS: sends message on cmd + enter when useCmdEnterToSend is true', async () => {
         vi.stubGlobal('navigator', {
           userAgent:
             'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
         });
-        const sendMessageMock = vi.fn();
         act(() => {
           useChatStore.setState({
             chatLoadingIds: [],
             inputMessage: '123',
-            sendMessage: sendMessageMock,
           });
           useUserStore.getState().updatePreference({ useCmdEnterToSend: true });
         });
@@ -283,7 +297,10 @@ describe('<InputArea />', () => {
         const textArea = screen.getByRole('textbox');
 
         fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter', metaKey: true });
-        expect(sendMessageMock).toHaveBeenCalled();
+
+        await vi.waitFor(() => {
+          expect(sendMessageMock).toHaveBeenCalled();
+        });
         vi.restoreAllMocks();
       });
 
@@ -292,13 +309,11 @@ describe('<InputArea />', () => {
           userAgent:
             'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
         });
-        const sendMessageMock = vi.fn();
         const updateInputMessageMock = vi.fn();
         act(() => {
           useChatStore.setState({
             chatLoadingIds: [],
             inputMessage: 'Test',
-            sendMessage: sendMessageMock,
             updateInputMessage: updateInputMessageMock,
           });
           useUserStore.getState().updatePreference({ useCmdEnterToSend: false });

package/src/app/[variants]/(main)/image/features/PromptInput/index.tsx

@@ -8,9 +8,11 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { loginRequired } from '@/components/Error/loginRequiredNotification';
+import { useGeminiChineseWarning } from '@/hooks/useGeminiChineseWarning';
 import { useImageStore } from '@/store/image';
 import { createImageSelectors } from '@/store/image/selectors';
 import { useGenerationConfigParam } from '@/store/image/slices/generationConfig/hooks';
+import { imageGenerationConfigSelectors } from '@/store/image/slices/generationConfig/selectors';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/slices/auth/selectors';
 
@@ -49,13 +51,23 @@ const PromptInput = ({ showTitle = false }: PromptInputProps) => {
   const { value, setValue } = useGenerationConfigParam('prompt');
   const isCreating = useImageStore(createImageSelectors.isCreating);
   const createImage = useImageStore((s) => s.createImage);
+  const currentModel = useImageStore(imageGenerationConfigSelectors.model);
   const isLogin = useUserStore(authSelectors.isLogin);
+  const checkGeminiChineseWarning = useGeminiChineseWarning();
 
   const handleGenerate = async () => {
     if (!isLogin) {
       loginRequired.redirect({ timeout: 2000 });
       return;
     }
+    // Check for Chinese text warning with Gemini model
+    const shouldContinue = await checkGeminiChineseWarning({
+      model: currentModel,
+      prompt: value,
+      scenario: 'image',
+    });
+
+    if (!shouldContinue) return;
 
     await createImage();
   };

package/src/features/ChatInput/useSend.ts

@@ -1,6 +1,7 @@
 import { useAnalytics } from '@lobehub/analytics/react';
 import { useCallback, useMemo } from 'react';
 
+import { useGeminiChineseWarning } from '@/hooks/useGeminiChineseWarning';
 import { getAgentStoreState } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
@@ -20,6 +21,7 @@ export const useSendMessage = () => {
     s.updateInputMessage,
   ]);
   const { analytics } = useAnalytics();
+  const checkGeminiChineseWarning = useGeminiChineseWarning();
 
   const clearChatUploadFileList = useFileStore((s) => s.clearChatUploadFileList);
 
@@ -28,7 +30,7 @@ export const useSendMessage = () => {
 
   const canSend = !isUploadingFiles && !isSendButtonDisabledByMessage;
 
-  const send = useCallback((params: UseSendMessageParams = {}) => {
+  const send = useCallback(async (params: UseSendMessageParams = {}) => {
     const store = useChatStore.getState();
     if (chatSelectors.isAIGenerating(store)) return;
 
@@ -45,6 +47,17 @@ export const useSendMessage = () => {
     // if there is no message and no image, then we should not send the message
     if (!store.inputMessage && fileList.length === 0) return;
 
+    // Check for Chinese text warning with Gemini model
+    const agentStore = getAgentStoreState();
+    const currentModel = agentSelectors.currentAgentModel(agentStore);
+    const shouldContinue = await checkGeminiChineseWarning({
+      model: currentModel,
+      prompt: store.inputMessage,
+      scenario: 'chat',
+    });
+
+    if (!shouldContinue) return;
+
     sendMessage({
       files: fileList,
       message: store.inputMessage,
@@ -56,7 +69,6 @@ export const useSendMessage = () => {
 
     // 获取分析数据
     const userStore = getUserStoreState();
-    const agentStore = getAgentStoreState();
 
     // 直接使用现有数据结构判断消息类型
     const hasImages = fileList.some((file) => file.file?.type?.startsWith('image'));

package/src/hooks/useGeminiChineseWarning.tsx

@@ -0,0 +1,91 @@
+import { containsChinese } from '@lobechat/utils';
+import { App, Checkbox } from 'antd';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+const shouldShowChineseWarning = (
+  model: string,
+  prompt: string,
+  hasWarningBeenDismissed: boolean,
+): boolean => {
+  return (
+    model.includes('gemini-2.5-flash-image-preview') &&
+    !hasWarningBeenDismissed &&
+    Boolean(prompt) &&
+    containsChinese(prompt)
+  );
+};
+
+interface UseGeminiChineseWarningOptions {
+  model: string;
+  prompt: string;
+  scenario?: 'chat' | 'image';
+}
+
+export const useGeminiChineseWarning = () => {
+  const { t } = useTranslation('common');
+  const { modal } = App.useApp();
+
+  const [hideGeminiChineseWarning, updateSystemStatus] = useGlobalStore((s) => [
+    systemStatusSelectors.systemStatus(s).hideGemini2_5FlashImagePreviewChineseWarning ?? false,
+    s.updateSystemStatus,
+  ]);
+
+  const checkWarning = useCallback(
+    async ({
+      model,
+      prompt,
+      scenario = 'chat',
+    }: UseGeminiChineseWarningOptions): Promise<boolean> => {
+      if (!shouldShowChineseWarning(model, prompt, hideGeminiChineseWarning)) {
+        return true;
+      }
+
+      return new Promise<boolean>((resolve) => {
+        let doNotShowAgain = false;
+
+        // 根据场景选择不同的按钮文案
+        const continueText =
+          scenario === 'image'
+            ? t('geminiImageChineseWarning.continueGenerate')
+            : t('geminiImageChineseWarning.continueSend');
+
+        modal.confirm({
+          cancelText: t('cancel', { ns: 'common' }),
+          centered: true,
+          content: (
+            <div>
+              <p>{t('geminiImageChineseWarning.content')}</p>
+              <div style={{ marginTop: 16 }}>
+                <Checkbox
+                  onChange={(e) => {
+                    doNotShowAgain = e.target.checked;
+                  }}
+                >
+                  {t('geminiImageChineseWarning.doNotShowAgain')}
+                </Checkbox>
+              </div>
+            </div>
+          ),
+          okText: continueText,
+          onCancel: () => {
+            resolve(false);
+          },
+          onOk: () => {
+            if (doNotShowAgain) {
+              updateSystemStatus({ hideGemini2_5FlashImagePreviewChineseWarning: true });
+            }
+            resolve(true);
+          },
+          title: t('geminiImageChineseWarning.title'),
+        });
+      });
+    },
+    [modal, t, hideGeminiChineseWarning, updateSystemStatus],
+  );
+
+  return checkWarning;
+};

package/src/locales/default/common.ts

@@ -185,6 +185,13 @@ export default {
     title: '喜欢我们的产品？',
   },
   fullscreen: '全屏模式',
+  geminiImageChineseWarning: {
+    content: 'Nano Banana 使用中文有概率性生成图片失败。建议使用英文以获得更好的效果。',
+    continueGenerate: '继续生成',
+    continueSend: '继续发送',
+    doNotShowAgain: '不再提示',
+    title: '中文输入提示',
+  },
   historyRange: '历史范围',
   import: '导入',
   importData: '导入数据',

package/src/store/global/initialState.ts

@@ -50,6 +50,7 @@ export interface SystemStatus {
   // which sessionGroup should expand
   expandSessionGroupKeys: string[];
   filePanelWidth: number;
+  hideGemini2_5FlashImagePreviewChineseWarning?: boolean;
   hidePWAInstaller?: boolean;
   hideThreadLimitAlert?: boolean;
   imagePanelWidth: number;
@@ -108,6 +109,7 @@ export interface GlobalState {
 export const INITIAL_STATUS = {
   expandSessionGroupKeys: [SessionDefaultGroup.Pinned, SessionDefaultGroup.Default],
   filePanelWidth: 320,
+  hideGemini2_5FlashImagePreviewChineseWarning: false,
   hidePWAInstaller: false,
   hideThreadLimitAlert: false,
   imagePanelWidth: 320,