@lobehub/chat 1.124.3 → 1.125.0

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

@@ -0,0 +1,156 @@
+import { ActionIcon, TextArea } from '@lobehub/ui';
+import { SafeArea } from '@lobehub/ui/mobile';
+import { useSize } from 'ahooks';
+import { createStyles } from 'antd-style';
+import { TextAreaRef } from 'antd/es/input/TextArea';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { rgba } from 'polished';
+import { CSSProperties, ReactNode, forwardRef, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import InnerContainer from './Container';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    container: css`
+      flex: none;
+      padding-block: 12px 12px;
+      border-block-start: 1px solid ${rgba(token.colorBorder, 0.25)};
+      background: ${token.colorFillQuaternary};
+    `,
+    expand: css`
+      position: absolute;
+      height: 100%;
+    `,
+    expandButton: css`
+      position: absolute;
+      inset-inline-start: 14px;
+    `,
+    textarea: css`
+      flex: 1;
+      transition: none !important;
+    `,
+  };
+});
+
+export interface MobileChatInputAreaProps {
+  bottomAddons?: ReactNode;
+  className?: string;
+  expand?: boolean;
+  loading?: boolean;
+  onInput?: (value: string) => void;
+  onSend?: () => void;
+  safeArea?: boolean;
+  setExpand?: (expand: boolean) => void;
+  style?: CSSProperties;
+  textAreaLeftAddons?: ReactNode;
+  textAreaRightAddons?: ReactNode;
+  topAddons?: ReactNode;
+  value: string;
+}
+
+const MobileChatInputArea = forwardRef<TextAreaRef, MobileChatInputAreaProps>(
+  (
+    {
+      className,
+      style,
+      topAddons,
+      textAreaLeftAddons,
+      textAreaRightAddons,
+      bottomAddons,
+      expand = false,
+      setExpand,
+      onSend,
+      onInput,
+      loading,
+      value,
+      safeArea,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation('chat');
+    const isChineseInput = useRef(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const { cx, styles } = useStyles();
+    const size = useSize(containerRef);
+    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);
+    const [isFocused, setIsFocused] = useState<boolean>(false);
+
+    useEffect(() => {
+      if (!size?.height) return;
+      setShowFullscreen(size.height > 72);
+    }, [size]);
+
+    const showAddons = !expand && !isFocused;
+
+    return (
+      <Flexbox
+        className={cx(styles.container, expand && styles.expand, className)}
+        gap={12}
+        style={style}
+      >
+        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}
+        <Flexbox
+          className={cx(expand && styles.expand)}
+          ref={containerRef}
+          style={{ position: 'relative' }}
+        >
+          {showFullscreen && (
+            <ActionIcon
+              active
+              className={styles.expandButton}
+              icon={expand ? ChevronDown : ChevronUp}
+              onClick={() => setExpand?.(!expand)}
+              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}
+              style={expand ? { top: 6 } : {}}
+            />
+          )}
+          <InnerContainer
+            bottomAddons={bottomAddons}
+            expand={expand}
+            textAreaLeftAddons={textAreaLeftAddons}
+            textAreaRightAddons={textAreaRightAddons}
+            topAddons={topAddons}
+          >
+            <TextArea
+              autoSize={expand ? false : { maxRows: 6, minRows: 0 }}
+              className={styles.textarea}
+              onBlur={(e) => {
+                onInput?.(e.target.value);
+                setIsFocused(false);
+              }}
+              onChange={(e) => {
+                onInput?.(e.target.value);
+              }}
+              onCompositionEnd={() => {
+                isChineseInput.current = false;
+              }}
+              onCompositionStart={() => {
+                isChineseInput.current = true;
+              }}
+              onFocus={() => setIsFocused(true)}
+              onPressEnter={(e) => {
+                if (!loading && !isChineseInput.current && e.shiftKey) {
+                  e.preventDefault();
+                  onSend?.();
+                }
+              }}
+              placeholder={t('sendPlaceholder')}
+              ref={ref}
+              style={{ height: 36, paddingBlock: 6 }}
+              value={value}
+              variant={expand ? 'borderless' : 'filled'}
+            />
+          </InnerContainer>
+        </Flexbox>
+        {bottomAddons && (
+          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>
+        )}
+        {safeArea && !isFocused && <SafeArea position={'bottom'} />}
+      </Flexbox>
+    );
+  },
+);
+
+export default MobileChatInputArea;

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

@@ -0,0 +1,33 @@
+import { ActionIcon, type ActionIconSize, Button } from '@lobehub/ui';
+import { Loader2, SendHorizontal } from 'lucide-react';
+import { memo } from 'react';
+
+export interface MobileChatSendButtonProps {
+  disabled?: boolean;
+  loading?: boolean;
+  onSend?: () => void;
+  onStop?: () => void;
+}
+
+const MobileChatSendButton = memo<MobileChatSendButtonProps>(
+  ({ loading, onStop, onSend, disabled }) => {
+    const size: ActionIconSize = {
+      blockSize: 36,
+      size: 16,
+    };
+
+    return loading ? (
+      <ActionIcon active icon={Loader2} onClick={onStop} size={size} spin />
+    ) : (
+      <Button
+        disabled={disabled}
+        icon={SendHorizontal}
+        onClick={onSend}
+        style={{ flex: 'none' }}
+        type={'primary'}
+      />
+    );
+  },
+);
+
+export default MobileChatSendButton;

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

@@ -0,0 +1,89 @@
+'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 { Flexbox } from 'react-layout-kit';
+
+import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
+import { useInitAgentConfig } from '@/hooks/useInitAgentConfig';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+
+import ActionBar from './ActionBar';
+import Files from './Files';
+import InputArea from './InputArea';
+import SendButton from './Send';
+import { useSendMessage } from './useSend';
+
+const defaultLeftActions: ActionKeys[] = [
+  'model',
+  'search',
+  'fileUpload',
+  'knowledgeBase',
+  'tools',
+  'params',
+  'mainToken',
+];
+
+const defaultRightActions: ActionKeys[] = ['saveTopic', 'clear'];
+
+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 [loading, value, onInput, onStop] = useChatStore((s) => [
+    chatSelectors.isAIGenerating(s),
+    s.inputMessage,
+    s.updateInputMessage,
+    s.stopGenerateMessage,
+  ]);
+
+  return (
+    <InputArea
+      expand={expand}
+      onInput={onInput}
+      onSend={() => {
+        setExpand(false);
+
+        sendMessage();
+      }}
+      ref={ref}
+      setExpand={setExpand}
+      style={{
+        background: theme.colorBgLayout,
+        top: expand ? 0 : undefined,
+        width: '100%',
+        zIndex: 101,
+      }}
+      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}
+            />
+          </>
+        )
+      }
+      value={value}
+    />
+  );
+});
+
+MobileChatInput.displayName = 'MobileChatInput';
+
+export default MobileChatInput;

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

@@ -0,0 +1,102 @@
+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';
+import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
+import { fileChatSelectors, useFileStore } from '@/store/file';
+import { getUserStoreState } from '@/store/user';
+import { SendMessageParams } from '@/types/message';
+
+export type UseSendMessageParams = Pick<
+  SendMessageParams,
+  'onlyAddUserMessage' | 'isWelcomeQuestion'
+>;
+
+export const useSendMessage = () => {
+  const [sendMessage, updateInputMessage] = useChatStore((s) => [
+    s.sendMessage,
+    s.updateInputMessage,
+  ]);
+  const { analytics } = useAnalytics();
+  const checkGeminiChineseWarning = useGeminiChineseWarning();
+
+  const clearChatUploadFileList = useFileStore((s) => s.clearChatUploadFileList);
+
+  const isUploadingFiles = useFileStore(fileChatSelectors.isUploadingFiles);
+  const isSendButtonDisabledByMessage = useChatStore(chatSelectors.isSendButtonDisabledByMessage);
+
+  const canSend = !isUploadingFiles && !isSendButtonDisabledByMessage;
+
+  const send = useCallback(async (params: UseSendMessageParams = {}) => {
+    const store = useChatStore.getState();
+    if (chatSelectors.isAIGenerating(store)) return;
+
+    // if uploading file or send button is disabled by message, then we should not send the message
+    const isUploadingFiles = fileChatSelectors.isUploadingFiles(useFileStore.getState());
+    const isSendButtonDisabledByMessage = chatSelectors.isSendButtonDisabledByMessage(
+      useChatStore.getState(),
+    );
+
+    const canSend = !isUploadingFiles && !isSendButtonDisabledByMessage;
+    if (!canSend) return;
+
+    const fileList = fileChatSelectors.chatUploadFileList(useFileStore.getState());
+    // 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,
+      ...params,
+    });
+
+    updateInputMessage('');
+    clearChatUploadFileList();
+
+    // 获取分析数据
+    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: store.inputMessage,
+        message_length: store.inputMessage.length,
+        message_type: messageType,
+        selected_model: agentSelectors.currentAgentModel(agentStore),
+        session_id: store.activeId || 'inbox', // 当前活跃的会话ID
+        user_id: userStore.user?.id || 'anonymous',
+      },
+    });
+    // const hasSystemRole = agentSelectors.hasSystemRole(useAgentStore.getState());
+    // const agentSetting = useAgentStore.getState().agentSettingInstance;
+
+    // // if there is a system role, then we need to use agent setting instance to autocomplete agent meta
+    // if (hasSystemRole && !!agentSetting) {
+    //   agentSetting.autocompleteAllMeta();
+    // }
+  }, []);
+
+  return useMemo(() => ({ canSend, send }), [canSend]);
+};

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

@@ -1,5 +1,5 @@
 import DesktopChatInput from './Desktop';
-import MobileChatInput from './Mobile';
+import MobileChatInput from './V1Mobile';
 
 const ChatInput = ({ mobile }: { mobile: boolean }) => {
   const Input = mobile ? MobileChatInput : DesktopChatInput;

package/src/app/[variants]/(main)/settings/_layout/Mobile/Header.tsx

@@ -26,10 +26,14 @@ const Header = memo(() => {
   const pathname = usePathname();
   const isProvider = pathname.includes('/settings/provider/');
   const providerName = useProviderName(activeSettingsKey);
+  const isProviderList = pathname === '/settings/provider';
+  const isProviderDetail = isProvider && !isProviderList;
 
   const handleBackClick = () => {
     if (isSessionActive && showMobileWorkspace) {
       router.push('/chat');
+    } else if (isProviderDetail) {
+      router.push('/settings/provider');
     } else {
       router.push(enableAuth ? '/me/settings' : '/me');
     }

package/src/features/ChatInput/ActionBar/SaveTopic/index.tsx

@@ -5,13 +5,14 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useIsMobile } from '@/hooks/useIsMobile';
 import { useActionSWR } from '@/libs/swr';
 import { useChatStore } from '@/store/chat';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 import { HotkeyEnum } from '@/types/hotkey';
 
-const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
+const SaveTopic = memo(() => {
   const { t } = useTranslation('chat');
   const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.SaveTopic));
   const [hasTopic, openNewTopicOrSaveTopic] = useChatStore((s) => [
@@ -19,6 +20,8 @@ const SaveTopic = memo<{ mobile?: boolean }>(({ mobile }) => {
     s.openNewTopicOrSaveTopic,
   ]);
 
+  const mobile = useIsMobile();
+
   const { mutate, isValidating } = useActionSWR('openNewTopicOrSaveTopic', openNewTopicOrSaveTopic);
 
   const [confirmOpened, setConfirmOpened] = useState(false);

package/src/features/ChatInput/InputEditor/index.tsx

@@ -3,13 +3,15 @@ import { HotkeyEnum } from '@lobechat/types';
 import { isCommandPressed } from '@lobechat/utils';
 import {
   INSERT_TABLE_COMMAND,
+  ReactCodePlugin,
   ReactCodeblockPlugin,
   ReactHRPlugin,
   ReactLinkPlugin,
   ReactListPlugin,
+  ReactMathPlugin,
   ReactTablePlugin,
 } from '@lobehub/editor';
-import { Editor, SlashMenu, useEditorState } from '@lobehub/editor/react';
+import { Editor, FloatMenu, SlashMenu, useEditorState } from '@lobehub/editor/react';
 import { Table2Icon } from 'lucide-react';
 import { memo, useEffect, useRef } from 'react';
 import { useHotkeysContext } from 'react-hotkeys-hook';
@@ -21,11 +23,12 @@ import { preferenceSelectors } from '@/store/user/selectors';
 import { useChatInputStore, useStoreApi } from '../store';
 
 const InputEditor = memo<{ defaultRows?: number }>(({ defaultRows = 2 }) => {
-  const [editor, slashMenuRef, send, updateMarkdownContent] = useChatInputStore((s) => [
+  const [editor, slashMenuRef, send, updateMarkdownContent, expand] = useChatInputStore((s) => [
     s.editor,
     s.slashMenuRef,
     s.handleSendButton,
     s.updateMarkdownContent,
+    s.expand,
   ]);
 
   const storeApi = useStoreApi();
@@ -101,9 +104,17 @@ const InputEditor = memo<{ defaultRows?: number }>(({ defaultRows = 2 }) => {
       plugins={[
         ReactListPlugin,
         ReactLinkPlugin,
+        ReactCodePlugin,
         ReactCodeblockPlugin,
         ReactHRPlugin,
         ReactTablePlugin,
+        Editor.withProps(ReactMathPlugin, {
+          renderComp: expand
+            ? undefined
+            : (props) => (
+                <FloatMenu {...props} getPopupContainer={() => (slashMenuRef as any)?.current} />
+              ),
+        }),
       ]}
       slashOption={{
         items: [
@@ -116,9 +127,13 @@ const InputEditor = memo<{ defaultRows?: number }>(({ defaultRows = 2 }) => {
             },
           },
         ],
-        renderComp: (props) => {
-          return <SlashMenu {...props} getPopupContainer={() => (slashMenuRef as any)?.current} />;
-        },
+        renderComp: expand
+          ? undefined
+          : (props) => {
+              return (
+                <SlashMenu {...props} getPopupContainer={() => (slashMenuRef as any)?.current} />
+              );
+            },
       }}
       style={{
         minHeight: defaultRows > 1 ? defaultRows * 23 : undefined,

package/src/features/ChatInput/TypoBar/index.tsx

@@ -13,7 +13,9 @@ import {
   LinkIcon,
   ListIcon,
   ListOrderedIcon,
+  ListTodoIcon,
   MessageSquareQuote,
+  SigmaIcon,
   SquareDashedBottomCodeIcon,
   StrikethroughIcon,
 } from 'lucide-react';
@@ -79,6 +81,15 @@ const TypoBar = memo(() => {
                 label: t('typobar.numberList'),
                 onClick: editorState.numberList,
               },
+              {
+                icon: ListTodoIcon,
+                key: 'tasklist',
+                label: t('typobar.taskList'),
+                onClick: editorState.checkList,
+              },
+              {
+                type: 'divider',
+              },
               {
                 active: editorState.isBlockquote,
                 icon: MessageSquareQuote,
@@ -95,6 +106,12 @@ const TypoBar = memo(() => {
               {
                 type: 'divider',
               },
+              {
+                icon: SigmaIcon,
+                key: 'math',
+                label: t('typobar.tex'),
+                onClick: editorState.insertMath,
+              },
               {
                 active: editorState.isCode,
                 icon: CodeXmlIcon,

package/src/locales/default/editor.ts

@@ -9,6 +9,8 @@ export default {
       on: '显示格式工具栏',
     },
   },
+  cancel: '取消',
+  confirm: '确认',
   file: {
     error: '错误：{{message}}',
     uploading: '正在上传文件...',
@@ -22,6 +24,9 @@ export default {
     placeholder: '输入链接 URL',
     unlink: '取消链接',
   },
+  math: {
+    placeholder: '请输入 TeX 公式',
+  },
   table: {
     delete: '删除表格',
     deleteColumn: '删除列',
@@ -42,6 +47,8 @@ export default {
     numberList: '有序列表',
     strikethrough: '删除线',
     table: '插入表格',
+    taskList: '任务列表',
+    tex: 'TeX 公式',
     underline: '下划线',
   },
 };