@lobehub/chat 1.123.4 → 1.124.0

package/locales/zh-TW/chat.json

@@ -72,8 +72,8 @@
     "addUser": "新增一條使用者訊息",
     "more": "更多",
     "send": "發送",
-    "sendWithCmdEnter": "按 {{meta}} + Enter 鍵發送",
-    "sendWithEnter": "按 Enter 鍵發送",
+    "sendWithCmdEnter": "按 <key/> 鍵發送",
+    "sendWithEnter": "按 <key/> 鍵發送",
     "stop": "停止",
     "warp": "換行"
   },
@@ -232,6 +232,10 @@
     "threadMessageCount": "{{messageCount}} 條消息",
     "title": "子話題"
   },
+  "toggleWideScreen": {
+    "off": "關閉寬螢幕模式",
+    "on": "開啟寬螢幕模式"
+  },
   "tokenDetails": {
     "chats": "聊天訊息",
     "historySummary": "歷史總結",

package/locales/zh-TW/editor.json

@@ -0,0 +1,47 @@
+{
+  "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/locales/zh-TW/models.json

@@ -1505,7 +1505,9 @@
   "gpt-4.1-nano": {
     "description": "GPT-4.1 mini 提供了智能、速度和成本之間的平衡，使其成為許多用例中具吸引力的模型。"
   },
-  "gpt-4.5-preview": "GPT-4.5-preview 是最新的通用模型，具備深厚的世界知識並能更好地理解使用者意圖，擅長創意任務與代理規劃。此模型的知識截至 2023 年 10 月。",
+  "gpt-4.5-preview": {
+    "description": "GPT-4.5-preview 是最新的通用模型，擁有深厚的世界知識和對使用者意圖的更佳理解，擅長創意任務與代理規劃。該模型的知識截止至2023年10月。"
+  },
   "gpt-4o": {
     "description": "ChatGPT-4o是一款動態模型，實時更新以保持當前最新版本。它結合了強大的語言理解與生成能力，適合於大規模應用場景，包括客戶服務、教育和技術支持。"
   },

package/next.config.ts

@@ -22,6 +22,9 @@ const standaloneConfig: NextConfig = {
 
 const nextConfig: NextConfig = {
   ...(isStandaloneMode ? standaloneConfig : {}),
+  compiler: {
+    emotion: true,
+  },
   compress: isProd,
   experimental: {
     optimizePackageImports: [
@@ -30,6 +33,7 @@ const nextConfig: NextConfig = {
       '@emoji-mart/data',
       '@icons-pack/react-simple-icons',
       '@lobehub/ui',
+      '@lobehub/icons',
       'gpt-tokenizer',
     ],
     // oidc provider depend on constructor.name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.123.4",
+  "version": "1.124.0",
   "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",
@@ -134,6 +134,7 @@
     "@codesandbox/sandpack-react": "^2.20.0",
     "@cyntler/react-doc-viewer": "^1.17.0",
     "@electric-sql/pglite": "0.2.17",
+    "@emotion/react": "^11.14.0",
     "@fal-ai/client": "^1.6.1",
     "@formkit/auto-animate": "^0.8.2",
     "@google/genai": "^1.13.0",
@@ -154,10 +155,11 @@
     "@lobehub/charts": "^2.0.0",
     "@lobehub/chat-plugin-sdk": "^1.32.4",
     "@lobehub/chat-plugins-gateway": "^1.9.0",
+    "@lobehub/editor": "^1.4.4",
     "@lobehub/icons": "^2.31.0",
     "@lobehub/market-sdk": "^0.22.7",
     "@lobehub/tts": "^2.0.1",
-    "@lobehub/ui": "^2.8.3",
+    "@lobehub/ui": "^2.11.9",
     "@modelcontextprotocol/sdk": "^1.17.1",
     "@neondatabase/serverless": "^1.0.1",
     "@next/third-parties": "^15.4.6",

package/packages/const/src/layoutTokens.ts

@@ -7,6 +7,7 @@ export const CHAT_TEXTAREA_MAX_HEIGHT = 800;
 export const CHAT_TEXTAREA_HEIGHT = 160;
 export const CHAT_TEXTAREA_HEIGHT_MOBILE = 108;
 export const CHAT_SIDEBAR_WIDTH = 280;
+export const CONVERSATION_MIN_WIDTH = 850;
 
 export const CHAT_PORTAL_WIDTH = 400;
 export const CHAT_PORTAL_MAX_WIDTH = 1280;

package/packages/types/src/index.ts

@@ -8,6 +8,7 @@ export * from './chunk';
 export * from './clientDB';
 export * from './eval';
 export * from './fetch';
+export * from './hotkey';
 export * from './knowledgeBase';
 export * from './llm';
 export * from './message';

package/packages/utils/src/index.ts

@@ -2,6 +2,7 @@ export * from './client/cookie';
 export * from './detectChinese';
 export * from './format';
 export * from './imageToBase64';
+export * from './keyboard';
 export * from './object';
 export * from './parseModels';
 export * from './pricing';

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/{Footer/MessageFromUrl.tsx → MessageFromUrl.tsx}

@@ -3,12 +3,13 @@
 import { useSearchParams } from 'next/navigation';
 import { useEffect } from 'react';
 
-import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useChatStore } from '@/store/chat';
 
+import { useSend } from '../useSend';
+
 const MessageFromUrl = () => {
   const updateInputMessage = useChatStore((s) => s.updateInputMessage);
-  const { send: sendMessage } = useSendMessage();
+  const { send: sendMessage } = useSend();
   const searchParams = useSearchParams();
 
   useEffect(() => {

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

@@ -1,51 +1,152 @@
 'use client';
 
-import { memo } from 'react';
+import { Alert, Hotkey, Icon } from '@lobehub/ui';
+import { BotMessageSquare, LucideCheck, MessageSquarePlus } from 'lucide-react';
+import { Suspense, memo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
-import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
-import DesktopChatInput, { FooterRender } from '@/features/ChatInput/Desktop';
-import { useGlobalStore } from '@/store/global';
-import { systemStatusSelectors } from '@/store/global/selectors';
+import { type ActionKeys, ChatInputProvider, DesktopChatInput } from '@/features/ChatInput';
+import WideScreenContainer from '@/features/Conversation/components/WideScreenContainer';
+import { useChatStore } from '@/store/chat';
+import { aiChatSelectors } from '@/store/chat/selectors';
+import { useUserStore } from '@/store/user';
+import { preferenceSelectors, settingsSelectors } from '@/store/user/selectors';
+import { HotkeyEnum, KeyEnum } from '@/types/hotkey';
 
-import Footer from './Footer';
-import TextArea from './TextArea';
+import { useSend } from '../useSend';
+import MessageFromUrl from './MessageFromUrl';
 
-const leftActions = [
+const leftActions: ActionKeys[] = [
   'model',
   'search',
+  'typo',
   'fileUpload',
   'knowledgeBase',
-  'params',
-  'history',
-  'stt',
   'tools',
+  '---',
+  ['params', 'history', 'stt', 'clear'],
   'mainToken',
-] as ActionKeys[];
+];
 
-const rightActions = ['clear'] as ActionKeys[];
-
-const renderTextArea = (onSend: () => void) => <TextArea onSend={onSend} />;
-const renderFooter: FooterRender = ({ expand, onExpandChange }) => (
-  <Footer expand={expand} onExpandChange={onExpandChange} />
-);
+const rightActions: ActionKeys[] = ['saveTopic'];
 
 const Desktop = memo(() => {
-  const [inputHeight, updatePreference] = useGlobalStore((s) => [
-    systemStatusSelectors.inputHeight(s),
-    s.updateSystemStatus,
+  const { t } = useTranslation('chat');
+  const { send, generating, disabled, stop } = useSend();
+  const [useCmdEnterToSend, updatePreference] = useUserStore((s) => [
+    preferenceSelectors.useCmdEnterToSend(s),
+    s.updatePreference,
+  ]);
+
+  const [mainInputSendErrorMsg, clearSendMessageError] = useChatStore((s) => [
+    aiChatSelectors.isCurrentSendMessageError(s),
+    s.clearSendMessageError,
   ]);
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.AddUserMessage));
 
   return (
-    <DesktopChatInput
-      inputHeight={inputHeight}
+    <ChatInputProvider
+      chatInputEditorRef={(instance) => {
+        if (!instance) return;
+        useChatStore.setState({ mainInputEditor: instance });
+      }}
       leftActions={leftActions}
-      onInputHeightChange={(height) => {
-        updatePreference({ inputHeight: height });
+      onMarkdownContentChange={(content) => {
+        useChatStore.setState({ inputMessage: content });
+      }}
+      onSend={() => {
+        send();
       }}
-      renderFooter={renderFooter}
-      renderTextArea={renderTextArea}
       rightActions={rightActions}
-    />
+      sendButtonProps={{ disabled, generating, onStop: stop }}
+      sendMenu={{
+        items: [
+          {
+            icon: !useCmdEnterToSend ? <Icon icon={LucideCheck} /> : <div />,
+            key: 'sendWithEnter',
+            label: (
+              <Flexbox align={'center'} gap={4} horizontal>
+                <Trans
+                  components={{
+                    key: <Hotkey keys={KeyEnum.Enter} variant={'borderless'} />,
+                  }}
+                  i18nKey={'input.sendWithEnter'}
+                  ns={'chat'}
+                />
+              </Flexbox>
+            ),
+            onClick: () => {
+              updatePreference({ useCmdEnterToSend: false });
+            },
+          },
+          {
+            icon: useCmdEnterToSend ? <Icon icon={LucideCheck} /> : <div />,
+            key: 'sendWithCmdEnter',
+            label: (
+              <Flexbox align={'center'} gap={4} horizontal>
+                <Trans
+                  components={{
+                    key: (
+                      <Hotkey
+                        keys={[KeyEnum.Mod, KeyEnum.Enter].join('+')}
+                        variant={'borderless'}
+                      />
+                    ),
+                  }}
+                  i18nKey={'input.sendWithCmdEnter'}
+                  ns={'chat'}
+                />
+              </Flexbox>
+            ),
+            onClick: () => {
+              updatePreference({ useCmdEnterToSend: true });
+            },
+          },
+          { type: 'divider' },
+          {
+            // disabled,
+            icon: <Icon icon={BotMessageSquare} />,
+            key: 'addAi',
+            label: t('input.addAi'),
+            onClick: () => {
+              send({ onlyAddAIMessage: true });
+            },
+          },
+          {
+            // disabled,
+            icon: <Icon icon={MessageSquarePlus} />,
+            key: 'addUser',
+            label: (
+              <Flexbox align={'center'} gap={24} horizontal>
+                {t('input.addUser')}
+                <Hotkey keys={hotkey} />
+              </Flexbox>
+            ),
+            onClick: () => {
+              send({ onlyAddUserMessage: true });
+            },
+          },
+        ],
+      }}
+    >
+      <WideScreenContainer>
+        {mainInputSendErrorMsg && (
+          <Flexbox paddingBlock={'0 6px'} paddingInline={12}>
+            <Alert
+              closable
+              message={t('input.errorMsg', { errorMsg: mainInputSendErrorMsg })}
+              onClose={clearSendMessageError}
+              type={'warning'}
+            />
+          </Flexbox>
+        )}
+        <DesktopChatInput />
+      </WideScreenContainer>
+      <Suspense>
+        <MessageFromUrl />
+      </Suspense>
+    </ChatInputProvider>
   );
 });
 

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/index.tsx

@@ -1,91 +1,69 @@
 'use client';
 
-import { Skeleton } from 'antd';
-import { useTheme } from 'antd-style';
-import { TextAreaRef } from 'antd/es/input/TextArea';
-import { memo, useRef, useState } from 'react';
+import { Alert } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import ActionBar from '@/features/ChatInput/ActionBar';
-import STT from '@/features/ChatInput/ActionBar/STT';
-import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
-import SaveTopic from '@/features/ChatInput/Topic';
-import { useSendMessage } from '@/features/ChatInput/useSend';
-import { useInitAgentConfig } from '@/hooks/useInitAgentConfig';
+import {
+  type ActionKey,
+  type ActionKeys,
+  MobileChatInput as ChatInput,
+  ChatInputProvider,
+} from '@/features/ChatInput';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
+import { aiChatSelectors } from '@/store/chat/slices/aiChat/selectors';
 
-import Files from './Files';
-import InputArea from './InputArea';
-import SendButton from './Send';
+import { useSend } from '../useSend';
 
-const defaultLeftActions: ActionKeys[] = [
+const leftActions: ActionKeys[] = [
   'model',
   'search',
   'fileUpload',
   'knowledgeBase',
-  'history',
   'tools',
-  'params',
+  '---',
+  ['params', 'history', 'stt', 'clear'],
   'mainToken',
 ];
 
-const defaultRightActions: ActionKeys[] = ['clear'];
+const rightActions: ActionKey[] = ['saveTopic'];
 
 const MobileChatInput = memo(() => {
-  const theme = useTheme();
-  const ref = useRef<TextAreaRef>(null);
-  const [expand, setExpand] = useState<boolean>(false);
-  const { send: sendMessage, canSend } = useSendMessage();
-  const { isLoading } = useInitAgentConfig();
+  const { t } = useTranslation('chat');
+  const { send, disabled, generating, stop } = useSend();
 
-  const [loading, value, onInput, onStop] = useChatStore((s) => [
-    chatSelectors.isAIGenerating(s),
-    s.inputMessage,
-    s.updateInputMessage,
-    s.stopGenerateMessage,
+  const [mainInputSendErrorMsg, clearSendMessageError] = useChatStore((s) => [
+    aiChatSelectors.isCurrentSendMessageError(s),
+    s.clearSendMessageError,
   ]);
-
   return (
-    <InputArea
-      expand={expand}
-      onInput={onInput}
-      onSend={() => {
-        setExpand(false);
-
-        sendMessage();
+    <ChatInputProvider
+      chatInputEditorRef={(instance) => {
+        if (!instance) return;
+        useChatStore.setState({ mainInputEditor: instance });
       }}
-      ref={ref}
-      setExpand={setExpand}
-      style={{
-        background: theme.colorBgLayout,
-        top: expand ? 0 : undefined,
-        width: '100%',
-        zIndex: 101,
+      leftActions={leftActions}
+      mobile
+      onMarkdownContentChange={(content) => {
+        useChatStore.setState({ inputMessage: content });
       }}
-      textAreaLeftAddons={<STT mobile />}
-      textAreaRightAddons={
-        <SendButton disabled={!canSend} loading={loading} onSend={sendMessage} onStop={onStop} />
-      }
-      topAddons={
-        isLoading ? (
-          <Flexbox paddingInline={8}>
-            <Skeleton.Button active block size={'small'} />
-          </Flexbox>
-        ) : (
-          <>
-            <Files />
-            <ActionBar
-              leftActions={defaultLeftActions}
-              padding={'0 8px'}
-              rightActions={defaultRightActions}
-              rightAreaStartRender={<SaveTopic mobile />}
-            />
-          </>
-        )
-      }
-      value={value}
-    />
+      onSend={() => send()}
+      rightActions={rightActions}
+      sendButtonProps={{ disabled, generating, onStop: stop }}
+    >
+      {mainInputSendErrorMsg && (
+        <Flexbox paddingBlock={'0 6px'} paddingInline={12}>
+          <Alert
+            closable
+            message={t('input.errorMsg', { errorMsg: mainInputSendErrorMsg })}
+            onClose={clearSendMessageError}
+            type={'warning'}
+          />
+        </Flexbox>
+      )}
+      <ChatInput />
+    </ChatInputProvider>
   );
 });
 

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatInput/useSend.ts

@@ -0,0 +1,141 @@
+import { useAnalytics } from '@lobehub/analytics/react';
+import { useMemo } from 'react';
+
+import { useGeminiChineseWarning } from '@/hooks/useGeminiChineseWarning';
+import { getAgentStoreState } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { getChatStoreState, useChatStore } from '@/store/chat';
+import { aiChatSelectors, chatSelectors, topicSelectors } from '@/store/chat/selectors';
+import { fileChatSelectors, useFileStore } from '@/store/file';
+import { getUserStoreState } from '@/store/user';
+
+export interface UseSendMessageParams {
+  isWelcomeQuestion?: boolean;
+  onlyAddAIMessage?: boolean;
+  onlyAddUserMessage?: boolean;
+}
+
+export const useSend = () => {
+  const [
+    isContentEmpty,
+    sendMessage,
+    addAIMessage,
+    stopGenerateMessage,
+    cancelSendMessageInServer,
+    generating,
+    isSendButtonDisabledByMessage,
+    isSendingMessage,
+  ] = useChatStore((s) => [
+    !s.inputMessage,
+    s.sendMessage,
+    s.addAIMessage,
+    s.stopGenerateMessage,
+    s.cancelSendMessageInServer,
+    chatSelectors.isAIGenerating(s),
+    chatSelectors.isSendButtonDisabledByMessage(s),
+    aiChatSelectors.isCurrentSendMessageLoading(s),
+  ]);
+  const { analytics } = useAnalytics();
+  const checkGeminiChineseWarning = useGeminiChineseWarning();
+
+  const fileList = fileChatSelectors.chatUploadFileList(useFileStore.getState());
+  const [isUploadingFiles, clearChatUploadFileList] = useFileStore((s) => [
+    fileChatSelectors.isUploadingFiles(s),
+    s.clearChatUploadFileList,
+  ]);
+
+  const isInputEmpty = isContentEmpty && fileList.length === 0;
+
+  const canNotSend =
+    isInputEmpty || isUploadingFiles || isSendButtonDisabledByMessage || isSendingMessage;
+
+  const handleSend = async (params: UseSendMessageParams = {}) => {
+    if (canNotSend) return;
+
+    const store = useChatStore.getState();
+    const mainInputEditor = store.mainInputEditor;
+
+    if (!mainInputEditor) {
+      console.warn('not found mainInputEditor instance');
+      return;
+    }
+
+    if (chatSelectors.isAIGenerating(store)) return;
+
+    const inputMessage = store.inputMessage;
+
+    // if there is no message and no image, then we should not send the message
+    if (!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: inputMessage,
+      scenario: 'chat',
+    });
+
+    if (!shouldContinue) return;
+
+    if (params.onlyAddAIMessage) {
+      addAIMessage();
+    } else {
+      sendMessage({ files: fileList, message: inputMessage, ...params });
+    }
+
+    clearChatUploadFileList();
+    mainInputEditor.setExpand(false);
+    mainInputEditor.clearContent();
+    mainInputEditor.focus();
+
+    // 获取分析数据
+    const userStore = getUserStoreState();
+
+    // 直接使用现有数据结构判断消息类型
+    const hasImages = fileList.some((file) => file.file?.type?.startsWith('image'));
+    const messageType = fileList.length === 0 ? 'text' : hasImages ? 'image' : 'file';
+
+    analytics?.track({
+      name: 'send_message',
+      properties: {
+        chat_id: store.activeId || 'unknown',
+        current_topic: topicSelectors.currentActiveTopic(store)?.title || null,
+        has_attachments: fileList.length > 0,
+        history_message_count: chatSelectors.activeBaseChats(store).length,
+        message: inputMessage,
+        message_length: inputMessage.length,
+        message_type: messageType,
+        selected_model: agentSelectors.currentAgentModel(agentStore),
+        session_id: store.activeId || 'inbox', // 当前活跃的会话ID
+        user_id: userStore.user?.id || 'anonymous',
+      },
+    });
+  };
+
+  const stop = () => {
+    const store = getChatStoreState();
+    const generating = chatSelectors.isAIGenerating(store);
+
+    if (generating) {
+      stopGenerateMessage();
+      return;
+    }
+
+    const isCreatingMessage = aiChatSelectors.isCurrentSendMessageLoading(store);
+
+    if (isCreatingMessage) {
+      cancelSendMessageInServer();
+    }
+  };
+
+  return useMemo(
+    () => ({
+      disabled: canNotSend,
+      generating: generating || isSendingMessage,
+      send: handleSend,
+      stop,
+    }),
+    [canNotSend, generating, isSendingMessage, stop, handleSend],
+  );
+};

package/src/app/[variants]/(main)/chat/(workspace)/@conversation/features/ChatList/Content.tsx

@@ -3,6 +3,7 @@
 import React, { memo, useCallback } from 'react';
 
 import { SkeletonList, VirtualizedList } from '@/features/Conversation';
+import WideScreenContainer from '@/features/Conversation/components/WideScreenContainer';
 import { useFetchMessages } from '@/hooks/useFetchMessages';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
@@ -27,7 +28,12 @@ const Content = memo<ListProps>(({ mobile }) => {
 
   if (!isCurrentChatLoaded) return <SkeletonList mobile={mobile} />;
 
-  if (data.length === 0) return <Welcome />;
+  if (data.length === 0)
+    return (
+      <WideScreenContainer flex={1} height={'100%'}>
+        <Welcome />
+      </WideScreenContainer>
+    );
 
   return <VirtualizedList dataSource={data} itemContent={itemContent} mobile={mobile} />;
 });