@lobehub/chat 1.123.3 → 1.124.0

package/locales/zh-CN/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/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.3",
+  "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/(backend)/webapi/chat/[provider]/route.ts

@@ -11,7 +11,7 @@ import { ChatStreamPayload } from '@/types/openai/chat';
 import { createErrorResponse } from '@/utils/errorResponse';
 import { getTracePayload } from '@/utils/trace';
 
-export const runtime = 'edge';
+export const maxDuration = 300;
 
 export const POST = checkAuth(async (req: Request, { params, jwtPayload, createRuntime }) => {
   const { provider } = await params;

package/src/app/(backend)/webapi/chat/vertexai/route.ts

@@ -6,6 +6,7 @@ import { safeParseJSON } from '@/utils/safeParseJSON';
 
 import { POST as UniverseRoute } from '../[provider]/route';
 
+export const maxDuration = 300;
 // due to the Chinese region does not support accessing Google
 // we need to use proxy to access it
 // refs: https://github.com/google/generative-ai-js/issues/29#issuecomment-1866246513

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