@lobehub/lobehub 2.0.0-next.221 → 2.0.0-next.223

package/src/app/[variants]/(main)/settings/profile/features/AvatarRow.tsx

@@ -7,7 +7,7 @@ import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { fetchErrorNotification } from '@/components/Error/fetchErrorNotification';
-import { enableAuth } from '@/const/auth';
+import { enableAuth } from '@/envs/auth';
 import UserAvatar from '@/features/User/UserAvatar';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';

package/src/app/[variants]/(main)/settings/security/index.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Navigate } from 'react-router-dom';
 
 import SettingHeader from '@/app/[variants]/(main)/settings/features/SettingHeader';
-import { enableClerk } from '@/const/auth';
+import { enableClerk } from '@/envs/auth';
 
 const ClerkProfile = dynamic(() => import('./features/ClerkProfile'), {
   loading: () => (

package/src/app/[variants]/(mobile)/me/(home)/__tests__/UserBanner.test.tsx

@@ -37,7 +37,7 @@ const { enableAuth, enableClerk } = vi.hoisted(() => ({
   enableClerk: { value: false },
 }));
 
-vi.mock('@/const/auth', () => ({
+vi.mock('@/envs/auth', () => ({
   get enableAuth() {
     return enableAuth.value;
   },

package/src/app/[variants]/(mobile)/me/(home)/__tests__/useCategory.test.tsx

@@ -28,7 +28,7 @@ const { enableAuth, enableClerk } = vi.hoisted(() => ({
   enableClerk: { value: true },
 }));
 
-vi.mock('@/const/auth', () => ({
+vi.mock('@/envs/auth', () => ({
   get enableAuth() {
     return enableAuth.value;
   },

package/src/app/[variants]/(mobile)/me/(home)/features/UserBanner.tsx

@@ -4,7 +4,7 @@ import { Flexbox } from '@lobehub/ui';
 import { memo } from 'react';
 import { Link } from 'react-router-dom';
 
-import { enableAuth } from '@/const/auth';
+import { enableAuth } from '@/envs/auth';
 import DataStatistics from '@/features/User/DataStatistics';
 import UserInfo from '@/features/User/UserInfo';
 import UserLoginOrSignup from '@/features/User/UserLoginOrSignup/Community';

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

@@ -6,7 +6,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-import { enableAuth } from '@/const/auth';
+import { enableAuth } from '@/envs/auth';
 import { useQueryState } from '@/hooks/useQueryParam';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { type SettingsTabs } from '@/store/global/initialState';

package/src/components/ModelSelect/index.tsx

@@ -1,6 +1,6 @@
 import { type ChatModelCard } from '@lobechat/types';
-import { type IconAvatarProps, ModelIcon, ProviderIcon } from '@lobehub/icons';
-import { Avatar, Flexbox, Icon, Tag, Text, Tooltip } from '@lobehub/ui';
+import { type IconAvatarProps, LobeHub, ModelIcon, ProviderIcon } from '@lobehub/icons';
+import { Avatar, Flexbox, FlexboxProps, Icon, Tag, Text, Tooltip } from '@lobehub/ui';
 import { createStaticStyles, useResponsive } from 'antd-style';
 import {
   Infinity,
@@ -14,7 +14,7 @@ import {
 } from 'lucide-react';
 import { type ModelAbilities } from 'model-bank';
 import numeral from 'numeral';
-import { type ComponentProps, type FC, memo, useState } from 'react';
+import { CSSProperties, type ComponentProps, type FC, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { type AiProviderSourceType } from '@/types/aiProvider';
@@ -64,6 +64,7 @@ interface ModelInfoTagsProps extends ModelAbilities {
   directionReverse?: boolean;
   isCustom?: boolean;
   placement?: 'top' | 'right';
+  style?: CSSProperties;
   /**
    * Whether to render tooltip overlays for each tag.
    * Disable this when rendering a large list (e.g. dropdown menus) to avoid mounting hundreds of Tooltip instances.
@@ -237,13 +238,13 @@ const Context = memo(
 );
 
 export const ModelInfoTags = memo<ModelInfoTagsProps>(
-  ({ directionReverse, placement = 'top', withTooltip = true, ...model }) => {
+  ({ directionReverse, placement = 'top', withTooltip = true, style, ...model }) => {
     return (
       <Flexbox
         className={TAG_CLASSNAME}
         direction={directionReverse ? 'horizontal-reverse' : 'horizontal'}
-        gap={4}
-        style={{ marginLeft: 'auto' }}
+        gap={2}
+        style={{ marginLeft: 'auto', ...style }}
         width={'fit-content'}
       >
         <FeatureTags
@@ -271,7 +272,7 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
   },
 );
 
-interface ModelItemRenderProps extends ChatModelCard {
+interface ModelItemRenderProps extends ChatModelCard, Partial<Omit<FlexboxProps, 'id' | 'title'>> {
   abilities?: ModelAbilities;
   infoTagTooltip?: boolean;
   /**
@@ -286,10 +287,9 @@ interface ModelItemRenderProps extends ChatModelCard {
   showInfoTag?: boolean;
 }
 
-export const ModelItemRender = memo<ModelItemRenderProps>(({ showInfoTag = true, ...model }) => {
-  const { mobile } = useResponsive();
-  const [hovered, setHovered] = useState(false);
-  const {
+export const ModelItemRender = memo<ModelItemRenderProps>(
+  ({
+    showInfoTag = true,
     abilities,
     infoTagTooltip = true,
     infoTagTooltipOnHover = false,
@@ -302,88 +302,119 @@ export const ModelItemRender = memo<ModelItemRenderProps>(({ showInfoTag = true,
     search,
     video,
     vision,
-  } = model;
+    id,
+    displayName,
+    releasedAt,
+    ...rest
+  }) => {
+    const { mobile } = useResponsive();
+    const [hovered, setHovered] = useState(false);
 
-  const shouldLazyMountTooltip = infoTagTooltipOnHover && !mobile;
-  /**
-   * When `infoTagTooltipOnHover` is enabled, we don't mount Tooltip components until the row is hovered.
-   * This avoids creating many overlays on dropdown open, while keeping the tooltip UX on demand.
-   */
-  const withTooltip = infoTagTooltip && (!shouldLazyMountTooltip || hovered);
-  const displayName = model.displayName || model.id;
-
-  return (
-    <Flexbox
-      align={'center'}
-      gap={32}
-      horizontal
-      justify={'space-between'}
-      onMouseEnter={shouldLazyMountTooltip && !hovered ? () => setHovered(true) : undefined}
-      style={{
-        overflow: 'hidden',
-        position: 'relative',
-        width: '100%',
-      }}
-    >
+    const shouldLazyMountTooltip = infoTagTooltipOnHover && !mobile;
+    /**
+     * When `infoTagTooltipOnHover` is enabled, we don't mount Tooltip components until the row is hovered.
+     * This avoids creating many overlays on dropdown open, while keeping the tooltip UX on demand.
+     */
+    const withTooltip = infoTagTooltip && (!shouldLazyMountTooltip || hovered);
+    const displayNameOrId = displayName || id;
+
+    return (
       <Flexbox
         align={'center'}
-        gap={8}
+        gap={32}
         horizontal
-        style={{ flexShrink: 1, minWidth: 0, overflow: 'hidden' }}
+        justify={'space-between'}
+        onMouseEnter={shouldLazyMountTooltip && !hovered ? () => setHovered(true) : undefined}
+        {...rest}
+        style={{
+          overflow: 'hidden',
+          position: 'relative',
+          width: '100%',
+          ...rest.style,
+        }}
       >
-        <ModelIcon model={model.id} size={20} />
-        <Text
-          ellipsis={
-            withTooltip
-              ? {
-                  tooltip: displayName,
-                }
-              : true
-          }
-          style={mobile ? { maxWidth: '60vw' } : { minWidth: 0, overflow: 'hidden' }}
+        <Flexbox
+          align={'center'}
+          gap={8}
+          horizontal
+          style={{ flexShrink: 1, minWidth: 0, overflow: 'hidden' }}
         >
-          {displayName}
-        </Text>
-        {newBadgeLabel ? (
-          <NewModelBadgeCore label={newBadgeLabel} releasedAt={model.releasedAt} />
-        ) : (
-          <NewModelBadgeI18n releasedAt={model.releasedAt} />
+          <ModelIcon model={id} size={20} />
+          <Text
+            ellipsis={
+              withTooltip
+                ? {
+                    tooltip: displayNameOrId,
+                  }
+                : true
+            }
+            style={mobile ? { maxWidth: '60vw' } : { minWidth: 0, overflow: 'hidden' }}
+          >
+            {displayNameOrId}
+          </Text>
+          {newBadgeLabel ? (
+            <NewModelBadgeCore label={newBadgeLabel} releasedAt={releasedAt} />
+          ) : (
+            <NewModelBadgeI18n releasedAt={releasedAt} />
+          )}
+        </Flexbox>
+        {showInfoTag && (
+          <ModelInfoTags
+            contextWindowTokens={contextWindowTokens}
+            files={files ?? abilities?.files}
+            functionCall={functionCall ?? abilities?.functionCall}
+            imageOutput={imageOutput ?? abilities?.imageOutput}
+            reasoning={reasoning ?? abilities?.reasoning}
+            search={search ?? abilities?.search}
+            style={{ zoom: 0.9 }}
+            video={video ?? abilities?.video}
+            vision={vision ?? abilities?.vision}
+            withTooltip={withTooltip}
+          />
         )}
       </Flexbox>
-      {showInfoTag && (
-        <ModelInfoTags
-          contextWindowTokens={contextWindowTokens}
-          files={files ?? abilities?.files}
-          functionCall={functionCall ?? abilities?.functionCall}
-          imageOutput={imageOutput ?? abilities?.imageOutput}
-          reasoning={reasoning ?? abilities?.reasoning}
-          search={search ?? abilities?.search}
-          video={video ?? abilities?.video}
-          vision={vision ?? abilities?.vision}
-          withTooltip={withTooltip}
-        />
-      )}
-    </Flexbox>
-  );
-});
+    );
+  },
+);
 
 interface ProviderItemRenderProps {
   logo?: string;
   name: string;
   provider: string;
+  size?: number;
   source?: AiProviderSourceType;
+  type?: 'mono' | 'color' | 'avatar';
 }
 
 export const ProviderItemRender = memo<ProviderItemRenderProps>(
-  ({ provider, name, source, logo }) => {
+  ({ provider, name, source, logo, type = 'mono', size = 16 }) => {
+    const isMono = type === 'mono';
     return (
-      <Flexbox align={'center'} gap={4} horizontal>
+      <Flexbox
+        align={'center'}
+        gap={6}
+        horizontal
+        style={{
+          overflow: 'hidden',
+        }}
+        width={'100%'}
+      >
         {source === 'custom' && !!logo ? (
-          <Avatar avatar={logo} size={20} style={{ filter: 'grayscale(1)' }} title={name} />
+          <Avatar
+            avatar={logo}
+            shape={'circle'}
+            size={size}
+            style={isMono ? { filter: 'grayscale(1)' } : {}}
+            title={name}
+          />
+        ) : provider === 'lobehub' ? (
+          <LobeHub.Morden size={size} />
         ) : (
-          <ProviderIcon provider={provider} size={20} type={'mono'} />
+          <ProviderIcon provider={provider} size={size} type={type} />
         )}
-        {name}
+        <Text color={'inherit'} ellipsis>
+          {name}
+        </Text>
       </Flexbox>
     );
   },

package/src/envs/auth.ts

@@ -1,5 +1,4 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix , typescript-sort-keys/interface */
-import { enableBetterAuth, enableClerk, enableNextAuth } from '@lobechat/const';
 import { createEnv } from '@t3-oss/env-nextjs';
 import { z } from 'zod';
 
@@ -52,7 +51,8 @@ declare global {
       // ===== Auth (shared by Better Auth / Next Auth) ===== //
       AUTH_SECRET?: string;
       NEXT_PUBLIC_AUTH_URL?: string;
-      NEXT_PUBLIC_AUTH_EMAIL_VERIFICATION?: string;
+      AUTH_EMAIL_VERIFICATION?: string;
+      ENABLE_MAGIC_LINK?: string;
       AUTH_SSO_PROVIDERS?: string;
       AUTH_TRUSTED_ORIGINS?: string;
 
@@ -172,8 +172,6 @@ export const getAuthConfig = () => {
       // ---------------------------------- better auth ----------------------------------
       NEXT_PUBLIC_ENABLE_BETTER_AUTH: z.boolean().optional(),
       NEXT_PUBLIC_AUTH_URL: z.string().optional(),
-      NEXT_PUBLIC_AUTH_EMAIL_VERIFICATION: z.boolean().optional().default(false),
-      NEXT_PUBLIC_ENABLE_MAGIC_LINK: z.boolean().optional().default(false),
 
       // ---------------------------------- next auth ----------------------------------
       NEXT_PUBLIC_ENABLE_NEXT_AUTH: z.boolean().optional(),
@@ -187,6 +185,8 @@ export const getAuthConfig = () => {
       AUTH_SECRET: z.string().optional(),
       AUTH_SSO_PROVIDERS: z.string().optional().default(''),
       AUTH_TRUSTED_ORIGINS: z.string().optional(),
+      AUTH_EMAIL_VERIFICATION: z.boolean().optional().default(false),
+      ENABLE_MAGIC_LINK: z.boolean().optional().default(false),
 
       // ---------------------------------- next auth ----------------------------------
       NEXT_AUTH_SECRET: z.string().optional(),
@@ -289,17 +289,23 @@ export const getAuthConfig = () => {
 
     runtimeEnv: {
       // Clerk
-      NEXT_PUBLIC_ENABLE_CLERK_AUTH: enableClerk,
+      NEXT_PUBLIC_ENABLE_CLERK_AUTH:
+        process.env.NEXT_PUBLIC_ENABLE_CLERK_AUTH === '1' ||
+        !!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
       NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
       CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
       CLERK_WEBHOOK_SECRET: process.env.CLERK_WEBHOOK_SECRET,
 
       // ---------------------------------- better auth ----------------------------------
-      NEXT_PUBLIC_ENABLE_BETTER_AUTH: enableBetterAuth,
+      NEXT_PUBLIC_ENABLE_BETTER_AUTH: process.env.NEXT_PUBLIC_ENABLE_BETTER_AUTH === '1',
       // Fallback to NEXTAUTH_URL origin or Vercel deployment domain for seamless migration from next-auth
       NEXT_PUBLIC_AUTH_URL: resolvePublicAuthUrl(),
-      NEXT_PUBLIC_AUTH_EMAIL_VERIFICATION: process.env.NEXT_PUBLIC_AUTH_EMAIL_VERIFICATION === '1',
-      NEXT_PUBLIC_ENABLE_MAGIC_LINK: process.env.NEXT_PUBLIC_ENABLE_MAGIC_LINK === '1',
+      // Fallback to NEXT_PUBLIC_* for seamless migration
+      AUTH_EMAIL_VERIFICATION:
+        process.env.AUTH_EMAIL_VERIFICATION === '1' ||
+        process.env.NEXT_PUBLIC_AUTH_EMAIL_VERIFICATION === '1',
+      ENABLE_MAGIC_LINK:
+        process.env.ENABLE_MAGIC_LINK === '1' || process.env.NEXT_PUBLIC_ENABLE_MAGIC_LINK === '1',
       // Fallback to NEXT_AUTH_SECRET for seamless migration from next-auth
       AUTH_SECRET: process.env.AUTH_SECRET || process.env.NEXT_AUTH_SECRET,
       // Fallback to NEXT_AUTH_SSO_PROVIDERS for seamless migration from next-auth
@@ -312,7 +318,7 @@ export const getAuthConfig = () => {
       AUTH_COGNITO_USERPOOL_ID: process.env.AUTH_COGNITO_USERPOOL_ID,
 
       // ---------------------------------- next auth ----------------------------------
-      NEXT_PUBLIC_ENABLE_NEXT_AUTH: enableNextAuth,
+      NEXT_PUBLIC_ENABLE_NEXT_AUTH: process.env.NEXT_PUBLIC_ENABLE_NEXT_AUTH === '1',
       NEXT_AUTH_SSO_PROVIDERS: process.env.NEXT_AUTH_SSO_PROVIDERS,
       NEXT_AUTH_SECRET: process.env.NEXT_AUTH_SECRET,
       NEXT_AUTH_DEBUG: !!process.env.NEXT_AUTH_DEBUG,
@@ -414,3 +420,18 @@ export const getAuthConfig = () => {
 };
 
 export const authEnv = getAuthConfig();
+
+// Auth flags - use process.env directly for build-time dead code elimination
+export const enableClerk =
+  process.env.NEXT_PUBLIC_ENABLE_CLERK_AUTH === '1'
+    ? true
+    : !!process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
+export const enableBetterAuth = process.env.NEXT_PUBLIC_ENABLE_BETTER_AUTH === '1';
+export const enableNextAuth = process.env.NEXT_PUBLIC_ENABLE_NEXT_AUTH === '1';
+export const enableAuth = enableClerk || enableBetterAuth || enableNextAuth || false;
+
+// Auth headers and constants
+export const LOBE_CHAT_AUTH_HEADER = 'X-lobe-chat-auth';
+export const LOBE_CHAT_OIDC_AUTH_HEADER = 'Oidc-Auth';
+export const OAUTH_AUTHORIZED = 'X-oauth-authorized';
+export const SECRET_XOR_KEY = 'LobeHub · LobeHub';

package/src/features/Conversation/Messages/AssistantGroup/components/EditState.tsx

@@ -1,7 +1,6 @@
-import { Flexbox } from '@lobehub/ui';
-import { MessageInput } from '@lobehub/ui/chat';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
+
+import { EditorModal } from '@/features/EditorModal';
 
 import { useConversationStore } from '../../../store';
 
@@ -11,40 +10,24 @@ export interface EditStateProps {
 }
 
 const EditState = memo<EditStateProps>(({ id, content }) => {
-  const { t } = useTranslation('common');
-
-  const text = useMemo(
-    () => ({
-      cancel: t('cancel'),
-      confirm: t('ok'),
-      edit: t('edit'),
-    }),
-    [],
-  );
-
   const [toggleMessageEditing, updateMessageContent] = useConversationStore((s) => [
     s.toggleMessageEditing,
     s.modifyMessageContent,
   ]);
 
-  const onEditingChange = (value: string) => {
-    updateMessageContent(id, value);
-    toggleMessageEditing(id, false);
-  };
-
   return (
-    <Flexbox paddingBlock={'0 8px'}>
-      <MessageInput
-        defaultValue={content ? String(content) : ''}
-        editButtonSize={'small'}
-        onCancel={() => {
-          toggleMessageEditing(id, false);
-        }}
-        onConfirm={onEditingChange}
-        text={text}
-        variant={'outlined'}
-      />
-    </Flexbox>
+    <EditorModal
+      onCancel={() => {
+        toggleMessageEditing(id, false);
+      }}
+      onConfirm={async (value) => {
+        if (!id) return;
+        await updateMessageContent(id, value);
+        toggleMessageEditing(id, false);
+      }}
+      open={!!id}
+      value={content ? String(content) : ''}
+    />
   );
 });
 

package/src/features/Conversation/Messages/AssistantGroup/index.tsx

@@ -2,7 +2,8 @@
 
 import type { AssistantContentBlock } from '@lobechat/types';
 import isEqual from 'fast-deep-equal';
-import { type MouseEventHandler, memo, useCallback, useMemo } from 'react';
+import dynamic from 'next/dynamic';
+import { type MouseEventHandler, Suspense, memo, useCallback, useMemo } from 'react';
 
 import { MESSAGE_ACTION_BAR_PORTAL_ATTRIBUTES } from '@/const/messageActionPortal';
 import { ChatItem } from '@/features/Conversation/ChatItem';
@@ -21,9 +22,12 @@ import {
 import FileListViewer from '../User/components/FileListViewer';
 import Usage from '../components/Extras/Usage';
 import MessageBranch from '../components/MessageBranch';
-import EditState from './components/EditState';
 import Group from './components/Group';
 
+const EditState = dynamic(() => import('./components/EditState'), {
+  ssr: false,
+});
+
 const actionBarHolder = (
   <div
     {...{ [MESSAGE_ACTION_BAR_PORTAL_ATTRIBUTES.assistantGroup]: '' }}
@@ -92,11 +96,6 @@ const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing, isLat
     }
   }, [isInbox]);
 
-  // If editing, show edit state
-  if (editing && contentId) {
-    return <EditState content={lastAssistantMsg?.content} id={contentId} />;
-  }
-
   return (
     <ChatItem
       actions={
@@ -139,6 +138,9 @@ const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing, isLat
       {model && (
         <Usage model={model} performance={performance} provider={provider!} usage={usage} />
       )}
+      <Suspense fallback={null}>
+        {editing && contentId && <EditState content={lastAssistantMsg?.content} id={contentId} />}
+      </Suspense>
     </ChatItem>
   );
 }, isEqual);

package/src/features/EditorModal/EditorCanvas.tsx

@@ -1,4 +1,5 @@
 import {
+  IEditor,
   ReactCodePlugin,
   ReactCodemirrorPlugin,
   ReactHRPlugin,
@@ -7,72 +8,52 @@ import {
   ReactMathPlugin,
   ReactTablePlugin,
 } from '@lobehub/editor';
-import { Editor, useEditor } from '@lobehub/editor/react';
+import { Editor } from '@lobehub/editor/react';
 import { Flexbox } from '@lobehub/ui';
 import { FC } from 'react';
 
 import TypoBar from './Typobar';
 
 interface EditorCanvasProps {
-  onChange?: (value: string) => void;
-  value?: string;
+  defaultValue?: string;
+  editor?: IEditor;
 }
 
-const EditorCanvas: FC<EditorCanvasProps> = ({ value, onChange }) => {
-  const editor = useEditor();
+const EditorCanvas: FC<EditorCanvasProps> = ({ defaultValue, editor }) => {
   return (
     <>
       <TypoBar editor={editor} />
       <Flexbox
-        onClick={() => {
-          editor?.focus();
-        }}
         padding={16}
         style={{ cursor: 'text', maxHeight: '80vh', minHeight: '50vh', overflowY: 'auto' }}
       >
-        <div
-          onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
+        <Editor
+          autoFocus
+          content={''}
+          editor={editor}
+          onInit={(editor) => {
+            if (!editor || !defaultValue) return;
+            try {
+              editor?.setDocument('markdown', defaultValue);
+            } catch (e) {
+              console.error('setDocument error:', e);
+            }
           }}
-        >
-          <Editor
-            autoFocus
-            content={''}
-            editor={editor}
-            onInit={(editor) => {
-              if (!editor || !value) return;
-              try {
-                editor?.setDocument('markdown', value);
-              } catch (e) {
-                console.error('setDocument error:', e);
-              }
-            }}
-            onTextChange={(editor) => {
-              try {
-                const newValue = editor.getDocument('markdown') as unknown as string;
-                onChange?.(newValue);
-              } catch (e) {
-                console.error('getDocument error:', e);
-                onChange?.('');
-              }
-            }}
-            plugins={[
-              ReactListPlugin,
-              ReactCodePlugin,
-              ReactCodemirrorPlugin,
-              ReactHRPlugin,
-              ReactLinkPlugin,
-              ReactTablePlugin,
-              ReactMathPlugin,
-            ]}
-            style={{
-              paddingBottom: 120,
-            }}
-            type={'text'}
-            variant={'chat'}
-          />
-        </div>
+          plugins={[
+            ReactListPlugin,
+            ReactCodePlugin,
+            ReactCodemirrorPlugin,
+            ReactHRPlugin,
+            ReactLinkPlugin,
+            ReactTablePlugin,
+            ReactMathPlugin,
+          ]}
+          style={{
+            paddingBottom: 120,
+          }}
+          type={'text'}
+          variant={'chat'}
+        />
       </Flexbox>
     </>
   );

package/src/features/EditorModal/TextareCanvas.tsx

@@ -2,13 +2,15 @@ import { TextArea } from '@lobehub/ui';
 import { FC } from 'react';
 
 interface EditorCanvasProps {
+  defaultValue?: string;
   onChange?: (value: string) => void;
   value?: string;
 }
 
-const EditorCanvas: FC<EditorCanvasProps> = ({ value, onChange }) => {
+const EditorCanvas: FC<EditorCanvasProps> = ({ defaultValue, value, onChange }) => {
   return (
     <TextArea
+      defaultValue={defaultValue}
       onChange={(e) => {
         onChange?.(e.target.value);
       }}

package/src/features/EditorModal/index.tsx

@@ -1,3 +1,4 @@
+import { useEditor } from '@lobehub/editor/react';
 import { Modal, ModalProps, createRawModal } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,8 +19,7 @@ export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }
   const { t } = useTranslation('common');
   const [v, setV] = useState(value);
   const enableRichRender = useUserStore(labPreferSelectors.enableInputMarkdown);
-
-  const Canvas = enableRichRender ? EditorCanvas : TextareCanvas;
+  const editor = useEditor();
 
   return (
     <Modal
@@ -30,7 +30,13 @@ export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }
       okText={t('ok')}
       onOk={async () => {
         setConfirmLoading(true);
-        await onConfirm?.(v || '');
+        let finalValue;
+        if (enableRichRender) {
+          finalValue = editor?.getDocument('markdown') as unknown as string;
+        } else {
+          finalValue = v;
+        }
+        await onConfirm?.(finalValue || '');
         setConfirmLoading(false);
       }}
       styles={{
@@ -43,7 +49,11 @@ export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }
       width={'min(90vw, 920px)'}
       {...rest}
     >
-      <Canvas onChange={(v) => setV(v)} value={v} />
+      {enableRichRender ? (
+        <EditorCanvas defaultValue={value} editor={editor} />
+      ) : (
+        <TextareCanvas defaultValue={value} onChange={(v) => setV(v)} value={v} />
+      )}
     </Modal>
   );
 });