@lobehub/chat 1.123.4 → 1.124.1

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

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

@@ -11,9 +11,10 @@ import { Flexbox } from 'react-layout-kit';
 
 import { BRANDING_NAME } from '@/const/branding';
 import { USAGE_DOCUMENTS } from '@/const/url';
-import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useChatStore } from '@/store/chat';
 
+import { useSend } from '../../../ChatInput/useSend';
+
 const useStyles = createStyles(({ css, token, responsive }) => ({
   card: css`
     padding-block: 12px;
@@ -60,7 +61,7 @@ const QuestionSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
 
   const { t } = useTranslation('welcome');
   const { styles } = useStyles();
-  const { send: sendMessage } = useSendMessage();
+  const { send: sendMessage } = useSend();
 
   return (
     <Flexbox gap={8} width={'100%'}>

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

@@ -6,9 +6,10 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useChatStore } from '@/store/chat';
 
+import { useSend } from '../../ChatInput/useSend';
+
 const useStyles = createStyles(({ css, token, responsive }) => ({
   card: css`
     padding-block: 8px;
@@ -42,7 +43,7 @@ const OpeningQuestions = memo<OpeningQuestionsProps>(({ mobile, questions }) =>
   const [updateInputMessage] = useChatStore((s) => [s.updateInputMessage]);
 
   const { styles } = useStyles();
-  const { send: sendMessage } = useSendMessage();
+  const { send: sendMessage } = useSend();
 
   return (
     <div className={styles.container}>

package/src/app/[variants]/(main)/chat/(workspace)/_layout/Desktop/ChatHeader/HeaderAction.tsx

@@ -1,7 +1,12 @@
 'use client';
 
 import { ActionIcon } from '@lobehub/ui';
-import { PanelRightClose, PanelRightOpen } from 'lucide-react';
+import {
+  PanelLeftRightDashedIcon,
+  PanelRightClose,
+  PanelRightOpen,
+  SquareChartGanttIcon,
+} from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -20,15 +25,26 @@ import ShareButton from '../../../features/ShareButton';
 const HeaderAction = memo<{ className?: string }>(({ className }) => {
   const { t } = useTranslation('chat');
   const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ToggleRightPanel));
-  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
+  const [showAgentSettings, wideScreen, toggleConfig, toggleWideScreen] = useGlobalStore((s) => [
     systemStatusSelectors.showChatSideBar(s),
+    systemStatusSelectors.wideScreen(s),
     s.toggleChatSideBar,
+    s.toggleWideScreen,
   ]);
 
   const { isAgentEditable } = useServerConfigStore(featureFlagsSelectors);
 
   return (
     <Flexbox className={className} gap={4} horizontal>
+      <ActionIcon
+        icon={wideScreen ? SquareChartGanttIcon : PanelLeftRightDashedIcon}
+        onClick={() => toggleWideScreen()}
+        size={DESKTOP_HEADER_ICON_SIZE}
+        title={t(wideScreen ? 'toggleWideScreen.off' : 'toggleWideScreen.on')}
+        tooltipProps={{
+          placement: 'bottom',
+        }}
+      />
       <ShareButton />
       <ActionIcon
         icon={showAgentSettings ? PanelRightClose : PanelRightOpen}

package/src/app/[variants]/(main)/settings/provider/(detail)/newapi/page.tsx

@@ -16,7 +16,7 @@ const Page = () => {
         ...NewAPIProviderCard.settings,
         proxyUrl: {
           desc: t('newapi.apiUrl.desc'),
-          placeholder: 'https://any-newapi-provider.com/v1',
+          placeholder: 'https://any-newapi-provider.com/',
           title: t('newapi.apiUrl.title'),
         },
       }}

package/src/config/llm.ts

@@ -186,6 +186,10 @@ export const getLLMConfig = () => {
 
       ENABLED_AIHUBMIX: z.boolean(),
       AIHUBMIX_API_KEY: z.string().optional(),
+
+      ENABLED_NEWAPI: z.boolean(),
+      NEWAPI_API_KEY: z.string().optional(),
+      NEWAPI_PROXY_URL: z.string().optional(),
     },
     runtimeEnv: {
       API_KEY_SELECT_MODE: process.env.API_KEY_SELECT_MODE,
@@ -368,6 +372,10 @@ export const getLLMConfig = () => {
       ENABLED_AIHUBMIX: !!process.env.AIHUBMIX_API_KEY,
       AIHUBMIX_API_KEY: process.env.AIHUBMIX_API_KEY,
 
+      ENABLED_NEWAPI: !!process.env.NEWAPI_API_KEY,
+      NEWAPI_API_KEY: process.env.NEWAPI_API_KEY,
+      NEWAPI_PROXY_URL: process.env.NEWAPI_PROXY_URL,
+
       ENABLED_NEBIUS: !!process.env.NEBIUS_API_KEY,
       NEBIUS_API_KEY: process.env.NEBIUS_API_KEY,
     },