markdown支持插件

package.json

@@ -78,6 +78,7 @@
     "rc-util": "^5.38.2",
     "react-intersection-observer": "^9.8.1",
     "react-layout-kit": "^1.7.4",
+    "react-markdown": "^8.0.7",
     "zustand": "^4.5.1",
     "zustand-utils": "^1.3.2"
   },

src/ChatItem/components/MessageContent.tsx

@@ -6,6 +6,7 @@ import { ChatItemProps } from '@/ChatItem';
 import EditableMessage from '@/EditableMessage';
 import { ConfigProvider } from 'antd';
 
+import { MarkdownProps } from '@ant-design/pro-editor';
 import { useStyles } from '../style';
 
 export interface MessageContentProps {
@@ -21,6 +22,7 @@ export interface MessageContentProps {
   text?: ChatItemProps['text'];
   type?: ChatItemProps['type'];
   className?: string;
+  markdownProps?: MarkdownProps;
 }
 
 const MessageContent = memo<MessageContentProps>(
@@ -34,6 +36,7 @@ const MessageContent = memo<MessageContentProps>(
     placement,
     messageExtra,
     renderMessage,
+    markdownProps,
     type,
     primary,
     onDoubleClick,
@@ -55,6 +58,7 @@ const MessageContent = memo<MessageContentProps>(
         openModal={mobile ? editing : undefined}
         text={text}
         value={String(message || '...')}
+        markdownProps={markdownProps}
       />
     );
     const messageContent = renderMessage ? renderMessage(content) : content;

src/ChatItem/index.tsx

@@ -37,6 +37,7 @@ const ChatItem = memo<ChatItemProps>((props) => {
     text,
     errorMessage,
     chatItemRenderConfig,
+    markdownProps,
     onDoubleClick,
     originData,
     ...restProps
@@ -87,6 +88,7 @@ const ChatItem = memo<ChatItemProps>((props) => {
         renderMessage={renderMessage}
         text={text}
         type={type}
+        markdownProps={markdownProps}
       />
     );
     return chatItemRenderConfig?.contentRender?.(props, dom) || dom;

src/ChatItem/type.ts

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 
 import { EditableMessageProps } from '@/EditableMessage';
 import { DivProps, MetaData } from '@/types';
+import { MarkdownProps } from '@ant-design/pro-editor';
 
 export type WithFalse<T> = T | false;
 
@@ -75,6 +76,12 @@ export interface ChatItemProps<T = Record<string, any>> {
    */
   type?: 'block' | 'pure';
 
+  /**
+   * @description The configuration for the markdown component
+   * @default {}
+   */
+  markdownProps?: MarkdownProps;
+
   /**
    * @description 聊天项渲染函数,为了保证性能他是惰性的，只有在列表项内容修改的时候才会重新执行
    * @default (props, defaultDom) => defaultDom

src/ChatList/ChatListItem.tsx

@@ -8,6 +8,7 @@ import { LLMRoleType } from '@/types/llm';
 import { ChatMessage } from '@/types/message';
 
 import { useRefFunction } from '@/ProChat/hooks/useRefFunction';
+import { MarkdownProps } from '@ant-design/pro-editor';
 import ActionsBar, { type ActionsBarProps } from './ActionsBar';
 
 export type OnMessageChange = (id: string, content: string) => void;
@@ -99,6 +100,10 @@ export interface ListItemProps<T = Record<string, any>> {
    * 聊天项的渲染函数。
    */
   chatItemRenderConfig?: ChatItemProps['chatItemRenderConfig'];
+  /**
+   * markdown组件的配置。
+   */
+  markdownProps?: MarkdownProps;
   /**
    * 原始数据。
    */
@@ -133,6 +138,7 @@ const ChatListItem = (props: ChatListItemProps) => {
     renderItems,
     chatItemRenderConfig,
     chatItemClassName,
+    markdownProps,
     ...item
   } = props;
 
@@ -285,6 +291,7 @@ const ChatListItem = (props: ChatListItemProps) => {
         time={item.updateAt || item.createAt}
         type={type === 'chat' ? 'block' : 'pure'}
         chatItemRenderConfig={chatItemRenderConfig}
+        markdownProps={markdownProps}
       />
     );
     return dom;

src/ChatList/index.tsx

@@ -71,6 +71,7 @@ const ChatList = memo<ChatListProps>(
     renderActions,
     historyCount = 0,
     chatItemRenderConfig,
+    markdownProps,
     ...props
   }) => {
     const { cx, styles } = useStyles();
@@ -114,6 +115,7 @@ const ChatList = memo<ChatListProps>(
                   {...item}
                   originData={item}
                   chatItemRenderConfig={chatItemRenderConfig}
+                  markdownProps={markdownProps}
                 />
               </Fragment>
             </ShouldUpdateItem>

src/EditableMessage/index.tsx

@@ -3,7 +3,7 @@
 
 import MessageInput, { type MessageInputProps } from '@/MessageInput';
 import MessageModal, { type MessageModalProps } from '@/MessageModal';
-import { Markdown } from '@ant-design/pro-editor';
+import { Markdown, MarkdownProps } from '@ant-design/pro-editor';
 
 export interface EditableMessageProps {
   /**
@@ -14,10 +14,6 @@
      * @title The class name for the MessageInput component
      */
     input?: string;
-    /**
-     * @title The class name for the Markdown component
-     */
-    markdown?: string;
     textarea?: string;
   };
   editButtonSize?: MessageInputProps['editButtonSize'];
@@ -64,16 +60,16 @@
      * @title The style for the MessageInput component
      */
     input?: CSSProperties;
-    /**
-     * @title The style for the Markdown component
-     */
-    markdown?: CSSProperties;
   };
   text?: MessageModalProps['text'];
   /**
    * @title The current text value
    */
   value: string;
+  /**
+   * @title The props for the Markdown component
+   */
+  markdownProps?: MarkdownProps;
 }
 
 const EditableMessage = memo<EditableMessageProps>(
@@ -93,6 +89,7 @@
     editButtonSize,
     text,
     model,
+    markdownProps,
   }) => {
     const [isEdit, setTyping] = useMergedState(false, {
       onChange: onEditingChange,
@@ -134,12 +131,12 @@
           input
         ) : (
           <Markdown
-            className={classNames?.markdown}
+            {...markdownProps}
             style={{
               height: isAutoSize ? 'unset' : height,
               overflowX: 'hidden',
               overflowY: 'auto',
-              ...styles?.markdown,
+              ...markdownProps.style,
             }}
           >
             {value || placeholder}
@@ -156,6 +153,7 @@
             setExpand(e);
             setTyping(false);
           }}
+          markdownProps={markdownProps}
           open={expand}
           placeholder={placeholder}
           text={text}

src/MessageModal/index.tsx

@@ -3,7 +3,7 @@ import { useMergedState } from 'rc-util';
 import { CSSProperties, ReactNode, memo } from 'react';
 
 import MessageInput, { type MessageInputProps } from '@/MessageInput';
-import { Markdown } from '@ant-design/pro-editor';
+import { Markdown, MarkdownProps } from '@ant-design/pro-editor';
 import { Modal, type ModalProps } from 'antd';
 
 export interface MessageModalProps extends Pick<ModalProps, 'open' | 'footer'> {
@@ -41,6 +41,10 @@ export interface MessageModalProps extends Pick<ModalProps, 'open' | 'footer'> {
    * @description The value of the message content
    */
   value: string;
+  /**
+   * @description The props for the Markdown component
+   */
+  markdownProps?: MarkdownProps;
 }
 
 const MessageModal = memo<MessageModalProps>(
@@ -56,6 +60,7 @@ const MessageModal = memo<MessageModalProps>(
     text,
     footer,
     extra,
+    markdownProps,
   }) => {
     const { mobile } = useResponsive();
 
@@ -106,7 +111,18 @@ const MessageModal = memo<MessageModalProps>(
         ) : (
           <>
             {extra}
-            <Markdown style={value ? markdownStyle : { ...markdownStyle, opacity: 0.5 }}>
+            <Markdown
+              {...markdownProps}
+              style={
+                value
+                  ? { ...markdownStyle, ...markdownProps.style }
+                  : {
+                      ...markdownStyle,
+                      ...markdownProps.style,
+                      opacity: 0.5,
+                    }
+              }
+            >
               {String(value || placeholder)}
             </Markdown>
           </>