@lobehub/ui 1.147.1 → 1.148.1

package/es/ChatItem/components/MessageContent.d.ts

@@ -1,8 +1,10 @@
 import { type ReactNode } from 'react';
 import { ChatItemProps } from "..";
+import type { MarkdownProps } from "../../Markdown";
 export interface MessageContentProps {
     editing?: ChatItemProps['editing'];
     fontSize?: number;
+    markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;
     message?: ReactNode;
     messageExtra?: ChatItemProps['messageExtra'];
     onChange?: ChatItemProps['onChange'];

package/es/ChatItem/components/MessageContent.js

@@ -17,7 +17,8 @@ var MessageContent = /*#__PURE__*/memo(function (_ref) {
     type = _ref.type,
     primary = _ref.primary,
     onDoubleClick = _ref.onDoubleClick,
-    fontSize = _ref.fontSize;
+    fontSize = _ref.fontSize,
+    markdownProps = _ref.markdownProps;
   var _useStyles = useStyles({
       editing: editing,
       placement: placement,
@@ -36,6 +37,7 @@ var MessageContent = /*#__PURE__*/memo(function (_ref) {
     editing: editing,
     fontSize: fontSize,
     fullFeaturedCodeBlock: true,
+    markdownProps: markdownProps,
     onChange: onChange,
     onEditingChange: onEditingChange,
     openModal: mobile ? editing : undefined,

package/es/ChatItem/index.js

@@ -2,7 +2,7 @@
 
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["avatarAddon", "onAvatarClick", "avatarProps", "actions", "className", "primary", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "renderMessage", "text", "errorMessage", "onDoubleClick", "fontSize", "aboveMessage", "belowMessage"];
+var _excluded = ["avatarAddon", "onAvatarClick", "avatarProps", "actions", "className", "primary", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "renderMessage", "text", "errorMessage", "onDoubleClick", "fontSize", "aboveMessage", "belowMessage", "markdownProps"];
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -44,6 +44,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     fontSize = _ref.fontSize,
     aboveMessage = _ref.aboveMessage,
     belowMessage = _ref.belowMessage,
+    markdownProps = _ref.markdownProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
@@ -90,6 +91,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
         }) : /*#__PURE__*/_jsx(MessageContent, {
           editing: editing,
           fontSize: fontSize,
+          markdownProps: markdownProps,
           message: message,
           messageExtra: messageExtra,
           onChange: onChange,

package/es/ChatItem/type.d.ts

@@ -3,6 +3,7 @@ import { FlexboxProps } from 'react-layout-kit';
 import { AlertProps } from "../Alert";
 import { AvatarProps } from "../Avatar";
 import { EditableMessageProps } from "../EditableMessage";
+import type { MarkdownProps } from "../Markdown";
 import { DivProps, MetaData } from "../types";
 export interface ChatItemProps extends Omit<FlexboxProps, 'children' | 'onChange'> {
     aboveMessage?: ReactNode;
@@ -31,6 +32,7 @@ export interface ChatItemProps extends Omit<FlexboxProps, 'children' | 'onChange
      * @description Whether the chat item is in loading state
      */
     loading?: boolean;
+    markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;
     /**
      * @description The message content of the chat item
      */

package/es/EditableMessage/index.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+import { type MarkdownProps } from "../Markdown";
 import { type MessageInputProps } from "../MessageInput";
 import { type MessageModalProps } from "../MessageModal";
 export interface EditableMessageProps {
@@ -26,6 +27,7 @@ export interface EditableMessageProps {
     fullFeaturedCodeBlock?: boolean;
     height?: MessageInputProps['height'];
     inputType?: MessageInputProps['type'];
+    markdownProps?: Omit<MarkdownProps, 'className' | 'style' | 'children'>;
     model?: {
         extra?: MessageModalProps['extra'];
         footer?: MessageModalProps['footer'];

package/es/EditableMessage/index.js

@@ -29,7 +29,8 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     text = _ref.text,
     fullFeaturedCodeBlock = _ref.fullFeaturedCodeBlock,
     model = _ref.model,
-    fontSize = _ref.fontSize;
+    fontSize = _ref.fontSize,
+    markdownProps = _ref.markdownProps;
   var _useControlledState = useControlledState(false, {
       onChange: onEditingChange,
       value: editing
@@ -68,16 +69,17 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
   });
   if (!value && showEditWhenEmpty) return input;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [!expand && isEdit ? input : /*#__PURE__*/_jsx(Markdown, {
+    children: [!expand && isEdit ? input : /*#__PURE__*/_jsx(Markdown, _objectSpread(_objectSpread({
       className: classNames === null || classNames === void 0 ? void 0 : classNames.markdown,
       fontSize: fontSize,
       fullFeaturedCodeBlock: fullFeaturedCodeBlock,
       style: _objectSpread({
         height: isAutoSize ? 'unset' : height
       }, stylesProps === null || stylesProps === void 0 ? void 0 : stylesProps.markdown),
-      variant: 'chat',
+      variant: 'chat'
+    }, markdownProps), {}, {
       children: value || placeholder || ''
-    }), expand && /*#__PURE__*/_jsx(MessageModal, {
+    })), expand && /*#__PURE__*/_jsx(MessageModal, {
       editing: isEdit,
       extra: model === null || model === void 0 ? void 0 : model.extra,
       footer: model === null || model === void 0 ? void 0 : model.footer,

package/es/Highlighter/FullFeatured.d.ts

@@ -1,18 +1,5 @@
-import { ReactNode } from 'react';
-import { DivProps } from "../types";
-export interface HighlighterProps extends DivProps {
-    allowChangeLanguage?: boolean;
-    /**
-     * @description The code content to be highlighted
-     */
-    children: string;
-    fileName?: string;
-    icon?: ReactNode;
-    /**
-     * @description The language of the code content
-     */
-    language: string;
-}
-export declare const Highlighter: import("react").NamedExoticComponent<HighlighterProps>;
-export default Highlighter;
+/// <reference types="react" />
+import { HighlighterProps } from './type';
+export declare const HighlighterFullFeatured: import("react").NamedExoticComponent<HighlighterProps>;
+export default HighlighterFullFeatured;
 export { default as SyntaxHighlighter, type SyntaxHighlighterProps } from './SyntaxHighlighter';

package/es/Highlighter/FullFeatured.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "language", "className", "style", "allowChangeLanguage", "fileName", "icon"];
+var _excluded = ["children", "language", "showLanguage", "className", "style", "allowChangeLanguage", "fileName", "icon", "bodyRender", "actionsRender", "copyable", "type"];
 import { Select } from 'antd';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -19,16 +19,20 @@ var options = languageMap.map(function (item) {
     value: item.toLowerCase()
   };
 });
-export var Highlighter = /*#__PURE__*/memo(function (_ref) {
+export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
-    _ref$language = _ref.language,
-    language = _ref$language === void 0 ? 'markdown' : _ref$language,
+    language = _ref.language,
+    showLanguage = _ref.showLanguage,
     className = _ref.className,
     style = _ref.style,
     _ref$allowChangeLangu = _ref.allowChangeLanguage,
     allowChangeLanguage = _ref$allowChangeLangu === void 0 ? true : _ref$allowChangeLangu,
     fileName = _ref.fileName,
     icon = _ref.icon,
+    bodyRender = _ref.bodyRender,
+    actionsRender = _ref.actionsRender,
+    copyable = _ref.copyable,
+    type = _ref.type,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -38,12 +42,40 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     lang = _useState4[0],
     setLang = _useState4[1];
-  var _useStyles = useStyles('block'),
+  var _useStyles = useStyles(type),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  var container = cx(styles.container, className);
+  var size = {
+    blockSize: 24,
+    fontSize: 14,
+    strokeWidth: 2
+  };
+  var origianlActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
+    content: children,
+    placement: "left",
+    size: size
+  });
+  var actions = actionsRender ? actionsRender({
+    actionIconSize: size,
+    content: children,
+    language: language,
+    originalNode: origianlActions
+  }) : origianlActions;
+  var originalBody = /*#__PURE__*/_jsx(SyntaxHighlighter, {
+    language: lang === null || lang === void 0 ? void 0 : lang.toLowerCase(),
+    style: expand ? {} : {
+      height: 0,
+      overflow: 'hidden'
+    },
+    children: children
+  });
+  var body = bodyRender ? bodyRender({
+    content: children,
+    language: language,
+    originalNode: originalBody
+  }) : originalBody;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: container,
+    className: cx(styles.container, className),
     "data-code-type": "highlighter",
     style: style
   }, rest), {}, {
@@ -62,7 +94,7 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
           fontSize: 14,
           strokeWidth: 3
         }
-      }), allowChangeLanguage && !fileName ? /*#__PURE__*/_jsx(Select, {
+      }), allowChangeLanguage && !fileName ? showLanguage && /*#__PURE__*/_jsx(Select, {
         className: styles.select,
         onSelect: setLang,
         options: options,
@@ -75,27 +107,19 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
         className: styles.select,
         gap: 2,
         horizontal: true,
+        justify: 'center',
         children: [icon, /*#__PURE__*/_jsx("span", {
           children: fileName || lang
         })]
-      }), /*#__PURE__*/_jsx(CopyButton, {
-        content: children,
-        placement: "left",
-        size: {
-          blockSize: 24,
-          fontSize: 14,
-          strokeWidth: 2
-        }
+      }), /*#__PURE__*/_jsx(Flexbox, {
+        align: 'center',
+        flex: 'none',
+        gap: 4,
+        horizontal: true,
+        children: actions
       })]
-    }), /*#__PURE__*/_jsx(SyntaxHighlighter, {
-      language: lang === null || lang === void 0 ? void 0 : lang.toLowerCase(),
-      style: expand ? {} : {
-        height: 0,
-        overflow: 'hidden'
-      },
-      children: children
-    })]
+    }), body]
   }));
 });
-export default Highlighter;
+export default HighlighterFullFeatured;
 export { default as SyntaxHighlighter } from "./SyntaxHighlighter";

package/es/Highlighter/index.d.ts

@@ -1,42 +1,6 @@
-import { ReactNode } from 'react';
-import { type CopyButtonProps } from "../CopyButton";
-import { DivProps } from "../types";
-export interface HighlighterProps extends DivProps {
-    allowChangeLanguage?: boolean;
-    /**
-     * @description The code content to be highlighted
-     */
-    children: string;
-    copyButtonSize?: CopyButtonProps['size'];
-    /**
-     * @description Whether to show the copy button
-     * @default true
-     */
-    copyable?: boolean;
-    fileName?: string;
-    fullFeatured?: boolean;
-    icon?: ReactNode;
-    /**
-     * @description The language of the code content
-     */
-    language: string;
-    /**
-     * @description Whether to show language tag
-     * @default true
-     */
-    showLanguage?: boolean;
-    /**
-     * @description Whether add spotlight background
-     * @default false
-     */
-    spotlight?: boolean;
-    /**
-     * @description The type of the code block
-     * @default 'block'
-     */
-    type?: 'ghost' | 'block' | 'pure';
-    wrap?: boolean;
-}
+/// <reference types="react" />
+import { HighlighterProps } from './type';
 export declare const Highlighter: import("react").NamedExoticComponent<HighlighterProps>;
 export default Highlighter;
 export { default as SyntaxHighlighter, type SyntaxHighlighterProps } from './SyntaxHighlighter';
+export { type HighlighterProps } from './type';

package/es/Highlighter/index.js

@@ -2,10 +2,10 @@
 
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["fullFeatured", "copyButtonSize", "children", "language", "className", "style", "copyable", "showLanguage", "type", "spotlight", "allowChangeLanguage", "fileName", "icon", "wrap"];
+var _excluded = ["fullFeatured", "copyButtonSize", "children", "language", "className", "style", "copyable", "showLanguage", "type", "wrap", "bodyRender", "actionsRender"];
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import CopyButton from "../CopyButton";
-import Spotlight from "../Spotlight";
 import Tag from "../Tag";
 import FullFeatured from "./FullFeatured";
 import SyntaxHighlighter from "./SyntaxHighlighter";
@@ -17,7 +17,8 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     _ref$copyButtonSize = _ref.copyButtonSize,
     copyButtonSize = _ref$copyButtonSize === void 0 ? 'site' : _ref$copyButtonSize,
     children = _ref.children,
-    language = _ref.language,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? 'markdown' : _ref$language,
     className = _ref.className,
     style = _ref.style,
     _ref$copyable = _ref.copyable,
@@ -26,48 +27,62 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     showLanguage = _ref$showLanguage === void 0 ? true : _ref$showLanguage,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'block' : _ref$type,
-    spotlight = _ref.spotlight,
-    _ref$allowChangeLangu = _ref.allowChangeLanguage,
-    allowChangeLanguage = _ref$allowChangeLangu === void 0 ? true : _ref$allowChangeLangu,
-    fileName = _ref.fileName,
-    icon = _ref.icon,
     wrap = _ref.wrap,
+    bodyRender = _ref.bodyRender,
+    actionsRender = _ref.actionsRender,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(type),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  var container = cx(styles.container, !wrap && styles.nowrap, className);
+  var originalActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
+    content: children,
+    placement: "left",
+    size: copyButtonSize
+  });
+  var actions = actionsRender ? actionsRender({
+    actionIconSize: copyButtonSize,
+    content: children,
+    language: language,
+    originalNode: originalActions
+  }) : originalActions;
+  var originalBody = /*#__PURE__*/_jsx(SyntaxHighlighter, {
+    language: language === null || language === void 0 ? void 0 : language.toLowerCase(),
+    children: children
+  });
+  var body = bodyRender ? bodyRender({
+    content: children,
+    language: language,
+    originalNode: originalBody
+  }) : originalBody;
   if (fullFeatured) return /*#__PURE__*/_jsx(FullFeatured, _objectSpread(_objectSpread({
-    allowChangeLanguage: allowChangeLanguage,
-    className: className,
-    fileName: fileName,
-    icon: icon,
+    actionsRender: actionsRender,
+    bodyRender: bodyRender,
+    copyable: copyable,
     language: language,
-    style: style
+    showLanguage: showLanguage,
+    type: type,
+    wrap: wrap
   }, rest), {}, {
     children: children
   }));
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: container,
+    className: cx(styles.container, !wrap && styles.nowrap, className),
     "data-code-type": "highlighter",
     style: style
   }, rest), {}, {
-    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {
-      size: 240
-    }), copyable && /*#__PURE__*/_jsx(CopyButton, {
+    children: [/*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
       className: styles.button,
-      content: children,
-      placement: "left",
-      size: copyButtonSize
+      flex: 'none',
+      gap: 4,
+      horizontal: true,
+      children: actions
     }), showLanguage && language && /*#__PURE__*/_jsx(Tag, {
       className: styles.lang,
       children: language.toLowerCase()
     }), /*#__PURE__*/_jsx("div", {
       className: styles.scroller,
-      children: /*#__PURE__*/_jsx(SyntaxHighlighter, {
-        language: language === null || language === void 0 ? void 0 : language.toLowerCase(),
-        children: children
-      })
+      children: body
     })]
   }));
 });

package/es/Highlighter/style.js

@@ -14,10 +14,10 @@ export var useStyles = createStyles(function (_ref, type) {
   return {
     button: cx(buttonHoverCls, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          inset-block-start: ", ";\n          inset-inline-end: ", ";\n\n          opacity: 0;\n        "])), type === 'pure' ? 0 : '8px', type === 'pure' ? 0 : '8px')),
     container: cx(prefix, type !== 'pure' && typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          border-radius: ", "px;\n          transition: background-color 100ms ", ";\n\n          &:hover {\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            overflow: auto hidden;\n\n            margin: 0 !important;\n            padding: ", " !important;\n\n            white-space: break-spaces;\n\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n        "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px")),
-    header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        padding-block: 4px;\n        padding-inline: 8px;\n        background: ", ";\n      "])), token.colorFillQuaternary),
+    header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        position: relative;\n        padding-block: 4px;\n        padding-inline: 8px;\n        background: ", ";\n      "])), token.colorFillQuaternary),
     lang: cx(langHoverCls, stylish.blur, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          inset-block-end: 8px;\n          inset-inline-end: 0;\n\n          font-family: ", ";\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.fontFamilyCode, token.colorTextSecondary)),
     nowrap: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        code {\n          text-wrap: nowrap !important;\n        }\n      "]))),
     scroller: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        overflow: auto;\n        width: 100%;\n        height: 100%;\n      "]))),
-    select: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        user-select: none;\n        font-size: 14px;\n        color: ", ";\n        .", "-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n      "])), token.colorTextDescription, prefixCls, token.colorTextDescription)
+    select: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        user-select: none;\n\n        position: absolute;\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n\n        min-width: 100px;\n\n        font-size: 14px;\n        color: ", ";\n        text-align: center;\n        .", "-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n      "])), token.colorTextDescription, prefixCls, token.colorTextDescription)
   };
 });

package/es/Highlighter/type.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import type { ActionIconProps } from "../ActionIcon";
+import type { CopyButtonProps } from "../CopyButton";
+import type { DivProps } from "../types";
+export interface HighlighterProps extends DivProps {
+    actionsRender?: (props: {
+        actionIconSize: ActionIconProps['size'];
+        content: string;
+        language: string;
+        originalNode: ReactNode;
+    }) => ReactNode;
+    allowChangeLanguage?: boolean;
+    bodyRender?: (props: {
+        content: string;
+        language: string;
+        originalNode: ReactNode;
+    }) => ReactNode;
+    /**
+     * @description The code content to be highlighted
+     */
+    children: string;
+    copyButtonSize?: CopyButtonProps['size'];
+    /**
+     * @description Whether to show the copy button
+     * @default true
+     */
+    copyable?: boolean;
+    fileName?: string;
+    fullFeatured?: boolean;
+    icon?: ReactNode;
+    /**
+     * @description The language of the code content
+     */
+    language: string;
+    /**
+     * @description Whether to show language tag
+     * @default true
+     */
+    showLanguage?: boolean;
+    /**
+     * @description Whether add spotlight background
+     * @default false
+     */
+    spotlight?: boolean;
+    /**
+     * @description The type of the code block
+     * @default 'block'
+     */
+    type?: 'ghost' | 'block' | 'pure';
+    wrap?: boolean;
+}

package/es/Highlighter/type.js

@@ -0,0 +1 @@
+export {};

package/es/Markdown/CodeBlock.d.ts

@@ -1,4 +1,18 @@
 import { FC } from 'react';
-import { type PreProps } from '../mdx/Pre';
-export declare const CodeLite: FC<Partial<PreProps>>;
-export declare const CodeFullFeatured: FC<Partial<PreProps>>;
+import { type HighlighterProps } from "../Highlighter";
+import { type MermaidProps } from "../Mermaid";
+export declare const useCode: (raw: any) => {
+    content: any;
+    isSingleLine: boolean;
+    lang: any;
+} | undefined;
+interface CodeBlockProps {
+    children: any;
+    enableMermaid?: boolean;
+    fullFeatured?: boolean;
+    highlight?: HighlighterProps;
+    mermaid?: MermaidProps;
+}
+export declare const CodeLite: FC<CodeBlockProps>;
+export declare const CodeFullFeatured: FC<CodeBlockProps>;
+export {};

package/es/Markdown/CodeBlock.js

@@ -1,15 +1,15 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["fullFeatured"];
+var _excluded = ["fullFeatured", "enableMermaid", "highlight", "mermaid"];
 import { FALLBACK_LANG } from "../hooks/useHighlight";
-import Pre, { PreSingleLine } from "../mdx/Pre";
+import Pre, { PreMermaid, PreSingleLine } from "../mdx/Pre";
 import { jsx as _jsx } from "react/jsx-runtime";
 var countLines = function countLines(str) {
   var regex = /\n/g;
   var matches = str.match(regex);
   return matches ? matches.length : 1;
 };
-var useCode = function useCode(raw) {
+export var useCode = function useCode(raw) {
   if (!raw) return;
   var _raw$props = raw.props,
     children = _raw$props.children,
@@ -27,17 +27,25 @@ var useCode = function useCode(raw) {
 var CodeBlock = function CodeBlock(_ref) {
   var _rest$children;
   var fullFeatured = _ref.fullFeatured,
+    enableMermaid = _ref.enableMermaid,
+    highlight = _ref.highlight,
+    mermaid = _ref.mermaid,
     rest = _objectWithoutProperties(_ref, _excluded);
   var code = useCode(rest === null || rest === void 0 || (_rest$children = rest.children) === null || _rest$children === void 0 ? void 0 : _rest$children[0]);
   if (!code) return;
-  if (code.isSingleLine) return /*#__PURE__*/_jsx(PreSingleLine, {
+  if (enableMermaid && code.lang === 'mermaid') return /*#__PURE__*/_jsx(PreMermaid, _objectSpread(_objectSpread({
+    fullFeatured: fullFeatured
+  }, mermaid), {}, {
+    children: code.content
+  }));
+  if (!highlight && code.isSingleLine) return /*#__PURE__*/_jsx(PreSingleLine, {
     language: code.lang,
     children: code.content
   });
-  return /*#__PURE__*/_jsx(Pre, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(Pre, _objectSpread(_objectSpread(_objectSpread({
     fullFeatured: fullFeatured,
     language: code.lang
-  }, rest), {}, {
+  }, highlight), rest), {}, {
     children: code.content
   }));
 };

package/es/Markdown/index.d.ts

@@ -1,7 +1,9 @@
 import type { AnchorProps } from 'antd';
 import { CSSProperties } from 'react';
+import { type HighlighterProps } from "../Highlighter";
+import { type MermaidProps } from "../Mermaid";
 import { type ImageProps } from "../mdx/Image";
-import type { PreProps } from "../mdx/Pre";
+import { type PreProps } from "../mdx/Pre";
 import { type VideoProps } from "../mdx/Video";
 import type { AProps } from "../types";
 import type { TypographyProps } from './Typography';
@@ -11,12 +13,15 @@ export interface MarkdownProps extends TypographyProps {
     className?: string;
     componentProps?: {
         a?: Partial<AProps & AnchorProps>;
+        highlight?: Partial<HighlighterProps>;
         img?: Partial<ImageProps>;
+        mermaid?: Partial<MermaidProps>;
         pre?: Partial<PreProps>;
         video?: Partial<VideoProps>;
     };
     enableImageGallery?: boolean;
     enableLatex?: boolean;
+    enableMermaid?: boolean;
     fullFeaturedCodeBlock?: boolean;
     onDoubleClick?: () => void;
     style?: CSSProperties;

package/es/Markdown/index.js

@@ -2,7 +2,7 @@
 
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "style", "fullFeaturedCodeBlock", "onDoubleClick", "enableLatex", "enableImageGallery", "componentProps", "allowHtml", "fontSize", "headerMultiple", "marginMultiple", "variant", "lineHeight"];
+var _excluded = ["children", "className", "style", "fullFeaturedCodeBlock", "onDoubleClick", "enableLatex", "enableMermaid", "enableImageGallery", "componentProps", "allowHtml", "fontSize", "headerMultiple", "marginMultiple", "variant", "lineHeight"];
 import { memo, useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
@@ -27,6 +27,8 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
     onDoubleClick = _ref.onDoubleClick,
     _ref$enableLatex = _ref.enableLatex,
     enableLatex = _ref$enableLatex === void 0 ? true : _ref$enableLatex,
+    _ref$enableMermaid = _ref.enableMermaid,
+    enableMermaid = _ref$enableMermaid === void 0 ? true : _ref$enableMermaid,
     _ref$enableImageGalle = _ref.enableImageGallery,
     enableImageGallery = _ref$enableImageGalle === void 0 ? true : _ref$enableImageGalle,
     componentProps = _ref.componentProps,
@@ -72,13 +74,21 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
         }));
       } : undefined,
       pre: function pre(props) {
-        return fullFeaturedCodeBlock ? /*#__PURE__*/_jsx(CodeFullFeatured, _objectSpread(_objectSpread({}, props), componentProps === null || componentProps === void 0 ? void 0 : componentProps.pre)) : /*#__PURE__*/_jsx(CodeLite, _objectSpread(_objectSpread({}, props), componentProps === null || componentProps === void 0 ? void 0 : componentProps.pre));
+        return fullFeaturedCodeBlock ? /*#__PURE__*/_jsx(CodeFullFeatured, _objectSpread(_objectSpread({
+          enableMermaid: enableMermaid,
+          highlight: componentProps === null || componentProps === void 0 ? void 0 : componentProps.highlight,
+          mermaid: componentProps === null || componentProps === void 0 ? void 0 : componentProps.mermaid
+        }, props), componentProps === null || componentProps === void 0 ? void 0 : componentProps.pre)) : /*#__PURE__*/_jsx(CodeLite, _objectSpread(_objectSpread({
+          enableMermaid: enableMermaid,
+          highlight: componentProps === null || componentProps === void 0 ? void 0 : componentProps.highlight,
+          mermaid: componentProps === null || componentProps === void 0 ? void 0 : componentProps.mermaid
+        }, props), componentProps === null || componentProps === void 0 ? void 0 : componentProps.pre));
       },
       video: function video(props) {
         return /*#__PURE__*/_jsx(Video, _objectSpread(_objectSpread({}, props), componentProps === null || componentProps === void 0 ? void 0 : componentProps.video));
       }
     };
-  }, [componentProps, enableImageGallery, fullFeaturedCodeBlock]);
+  }, [componentProps, enableImageGallery, enableMermaid, fullFeaturedCodeBlock]);
   var rehypePlugins = useMemo(function () {
     return [allowHtml && rehypeRaw, enableLatex && rehypeKatex].filter(Boolean);
   }, [allowHtml]);

package/es/Markdown/markdown.style.js

@@ -15,7 +15,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     _ref2$lineHeight = _ref2.lineHeight,
     lineHeight = _ref2$lineHeight === void 0 ? 1.8 : _ref2$lineHeight;
   return {
-    __root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        --lobe-markdown-font-size: ", "px;\n        --lobe-markdown-header-multiple: ", ";\n        --lobe-markdown-margin-multiple: ", ";\n        --lobe-markdown-line-height: ", ";\n        --lobe-markdown-border-radius: ", ";\n        --lobe-markdown-border-color: ", ";\n\n        position: relative;\n\n        width: 100%;\n        max-width: 100%;\n        padding-inline: 1px;\n\n        font-size: var(--lobe-markdown-font-size);\n        line-height: var(--lobe-markdown-line-height);\n        word-break: break-word;\n      "])), fontSize, headerMultiple, marginMultiple, lineHeight, token.borderRadiusLG, isDarkMode ? token.colorBorderSecondary : rgba(token.colorBorderSecondary, 0.5)),
+    __root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        --lobe-markdown-font-size: ", "px;\n        --lobe-markdown-header-multiple: ", ";\n        --lobe-markdown-margin-multiple: ", ";\n        --lobe-markdown-line-height: ", ";\n        --lobe-markdown-border-radius: ", ";\n        --lobe-markdown-border-color: ", ";\n\n        position: relative;\n\n        width: 100%;\n        max-width: 100%;\n        padding-inline: 1px;\n\n        font-size: var(--lobe-markdown-font-size);\n        line-height: var(--lobe-markdown-line-height);\n        word-break: break-word;\n\n        svg {\n          line-height: 1;\n        }\n      "])), fontSize, headerMultiple, marginMultiple, lineHeight, token.borderRadiusLG, isDarkMode ? token.colorBorderSecondary : rgba(token.colorBorderSecondary, 0.5)),
     a: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        a {\n          color: ", ";\n\n          &:hover {\n            color: ", ";\n          }\n        }\n      "])), token.colorInfoText, token.colorInfoHover),
     blockquote: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        blockquote {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          margin-inline: 0;\n          padding-block: 0;\n          padding-inline: 1em;\n\n          color: ", ";\n\n          border-inline-start: solid 4px ", ";\n        }\n      "])), token.colorTextSecondary, token.colorBorder),
     code: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        code:not(:has(span)) {\n          display: inline;\n\n          margin-inline: 0.25em;\n          padding-block: 0.2em;\n          padding-inline: 0.4em;\n\n          font-family: ", ";\n          font-size: 0.875em;\n          line-height: 1;\n          word-break: break-word;\n          white-space: break-spaces;\n\n          background: ", ";\n          border: 1px solid var(--lobe-markdown-border-color);\n          border-radius: 0.25em;\n        }\n      "])), token.fontFamilyCode, token.colorFillSecondary),

package/es/Mermaid/FullFeatured.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { MermaidProps } from './type';
+export declare const MermaidFullFeatured: import("react").NamedExoticComponent<Omit<MermaidProps, "children"> & {
+    children: ReactNode;
+    content: string;
+}>;
+export default MermaidFullFeatured;

package/es/Mermaid/FullFeatured.js

@@ -0,0 +1,90 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["showLanguage", "content", "children", "className", "copyable", "actionsRender", "style"];
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import ActionIcon from "../ActionIcon";
+import CopyButton from "../CopyButton";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
+  var showLanguage = _ref.showLanguage,
+    content = _ref.content,
+    children = _ref.children,
+    className = _ref.className,
+    copyable = _ref.copyable,
+    actionsRender = _ref.actionsRender,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    expand = _useState2[0],
+    setExpand = _useState2[1];
+  var _useStyles = useStyles('block'),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var container = cx(styles.container, className);
+  var size = {
+    blockSize: 24,
+    fontSize: 14,
+    strokeWidth: 2
+  };
+  var originalActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
+    content: content,
+    placement: "left",
+    size: size
+  });
+  var actions = actionsRender ? actionsRender({
+    actionIconSize: size,
+    content: content,
+    originalNode: originalActions
+  }) : originalActions;
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: container,
+    "data-code-type": "mermaid",
+    style: style
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      className: styles.header,
+      horizontal: true,
+      justify: 'space-between',
+      children: [/*#__PURE__*/_jsx(ActionIcon, {
+        icon: expand ? ChevronDown : ChevronRight,
+        onClick: function onClick() {
+          return setExpand(!expand);
+        },
+        size: {
+          blockSize: 24,
+          fontSize: 14,
+          strokeWidth: 3
+        }
+      }), showLanguage && /*#__PURE__*/_jsx(Flexbox, {
+        align: 'center',
+        className: styles.select,
+        gap: 2,
+        horizontal: true,
+        justify: 'center',
+        children: /*#__PURE__*/_jsx("span", {
+          children: "mermaid"
+        })
+      }), /*#__PURE__*/_jsx(Flexbox, {
+        align: 'center',
+        flex: 'none',
+        gap: 4,
+        horizontal: true,
+        children: actions
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      style: expand ? {} : {
+        height: 0,
+        overflow: 'hidden'
+      },
+      children: children
+    })]
+  }));
+});
+export default MermaidFullFeatured;

package/es/Mermaid/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { MermaidProps } from './type';
+declare const Mermaid: import("react").NamedExoticComponent<MermaidProps>;
+export default Mermaid;
+export { type MermaidProps } from './type';

package/es/Mermaid/index.js

@@ -0,0 +1,81 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "copyButtonSize", "fullFeatured", "copyable", "showLanguage", "style", "type", "className", "bodyRender", "actionsRender"];
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import CopyButton from "../CopyButton";
+import Tag from "../Tag";
+import FullFeatured from "./FullFeatured";
+import { useStyles } from "./style";
+import { useMermaid } from "./useMermaid";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Mermaid = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    _ref$copyButtonSize = _ref.copyButtonSize,
+    copyButtonSize = _ref$copyButtonSize === void 0 ? 'site' : _ref$copyButtonSize,
+    fullFeatured = _ref.fullFeatured,
+    _ref$copyable = _ref.copyable,
+    copyable = _ref$copyable === void 0 ? true : _ref$copyable,
+    _ref$showLanguage = _ref.showLanguage,
+    showLanguage = _ref$showLanguage === void 0 ? true : _ref$showLanguage,
+    style = _ref.style,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'block' : _ref$type,
+    className = _ref.className,
+    bodyRender = _ref.bodyRender,
+    actionsRender = _ref.actionsRender,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(type),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var MermaidRender = useMermaid(children);
+  var originalActions = copyable && /*#__PURE__*/_jsx(CopyButton, {
+    content: children,
+    placement: "left",
+    size: copyButtonSize
+  });
+  var actions = actionsRender ? actionsRender({
+    actionIconSize: copyButtonSize,
+    content: children,
+    originalNode: originalActions
+  }) : originalActions;
+  var defaultBody = /*#__PURE__*/_jsx(MermaidRender, {});
+  var body = bodyRender ? bodyRender({
+    content: children,
+    originalNode: defaultBody
+  }) : defaultBody;
+  if (fullFeatured) return /*#__PURE__*/_jsx(FullFeatured, _objectSpread(_objectSpread({
+    actionsRender: actionsRender,
+    bodyRender: bodyRender,
+    className: className,
+    content: children,
+    copyable: copyable,
+    showLanguage: showLanguage,
+    style: style,
+    type: type
+  }, rest), {}, {
+    children: body
+  }));
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    "data-code-type": "mermaid",
+    style: style
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      className: styles.button,
+      flex: 'none',
+      gap: 4,
+      horizontal: true,
+      children: actions
+    }), showLanguage && /*#__PURE__*/_jsx(Tag, {
+      className: styles.lang,
+      children: "mermaid"
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.scroller,
+      children: body
+    })]
+  }));
+});
+export default Mermaid;

package/es/Mermaid/style.d.ts

@@ -0,0 +1,8 @@
+export declare const useStyles: (props?: "block" | "ghost" | "pure" | undefined) => import("antd-style").ReturnStyles<{
+    button: string;
+    container: string;
+    header: import("antd-style").SerializedStyles;
+    lang: string;
+    scroller: import("antd-style").SerializedStyles;
+    select: import("antd-style").SerializedStyles;
+}>;

package/es/Mermaid/style.js

@@ -0,0 +1,22 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, type) {
+  var token = _ref.token,
+    css = _ref.css,
+    cx = _ref.cx,
+    prefixCls = _ref.prefixCls,
+    stylish = _ref.stylish;
+  var prefix = "".concat(prefixCls, "-highlighter");
+  var buttonHoverCls = "".concat(prefix, "-hover-btn");
+  var langHoverCls = "".concat(prefix, "-hover-lang");
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, type === 'block' ? token.colorFillTertiary : token.colorFillQuaternary);
+  return {
+    button: cx(buttonHoverCls, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          inset-block-start: ", ";\n          inset-inline-end: ", ";\n\n          opacity: 0;\n        "])), type === 'pure' ? 0 : '8px', type === 'pure' ? 0 : '8px')),
+    container: cx(prefix, type !== 'pure' && typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\n          border-radius: ", "px;\n          transition: background-color 100ms ", ";\n\n          &:hover {\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            overflow: auto hidden;\n\n            margin: 0 !important;\n            padding: ", " !important;\n\n            white-space: break-spaces;\n\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n\n          svg {\n            height: fit-content;\n            line-height: 1.2;\n          }\n        "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px")),
+    header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        position: relative;\n        padding-block: 4px;\n        padding-inline: 8px;\n        background: ", ";\n      "])), token.colorFillQuaternary),
+    lang: cx(langHoverCls, stylish.blur, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          inset-block-end: 8px;\n          inset-inline-end: 0;\n\n          font-family: ", ";\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.fontFamilyCode, token.colorTextSecondary)),
+    scroller: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        overflow: auto;\n        width: 100%;\n        height: 100%;\n      "]))),
+    select: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        user-select: none;\n\n        position: absolute;\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n\n        min-width: 100px;\n\n        font-size: 14px;\n        color: ", ";\n        text-align: center;\n        .", "-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n      "])), token.colorTextDescription, prefixCls, token.colorTextDescription)
+  };
+});

package/es/Mermaid/type.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import type { ActionIconProps } from "../ActionIcon";
+import type { CopyButtonProps } from "../CopyButton";
+import { DivProps } from "../types";
+export interface MermaidProps extends DivProps {
+    actionsRender?: (props: {
+        actionIconSize: ActionIconProps['size'];
+        content: string;
+        originalNode: ReactNode;
+    }) => ReactNode;
+    bodyRender?: (props: {
+        content: string;
+        originalNode: ReactNode;
+    }) => ReactNode;
+    children: string;
+    copyButtonSize?: CopyButtonProps['size'];
+    copyable?: boolean;
+    fullFeatured?: boolean;
+    showLanguage?: boolean;
+    type?: 'ghost' | 'block' | 'pure';
+}

package/es/Mermaid/type.js

@@ -0,0 +1 @@
+export {};

package/es/Mermaid/useMermaid.d.ts

@@ -0,0 +1 @@
+export declare const useMermaid: (content: string) => () => import("react/jsx-runtime").JSX.Element;

package/es/Mermaid/useMermaid.js

@@ -0,0 +1,38 @@
+import { useTheme } from 'antd-style';
+import mermaid from 'mermaid';
+import { useCallback, useEffect } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var useMermaid = function useMermaid(content) {
+  var theme = useTheme();
+  useEffect(function () {
+    mermaid.initialize({
+      fontFamily: theme.fontFamilyCode,
+      securityLevel: 'loose',
+      startOnLoad: true,
+      theme: 'base',
+      themeVariables: {
+        fontSize: 14,
+        lineColor: theme.colorBorderSecondary,
+        primaryBorderColor: theme.colorPrimaryBorder,
+        primaryColor: theme.colorPrimaryBg,
+        primaryTextColor: theme.colorText,
+        secondaryColor: theme.colorInfo,
+        tertiaryColor: theme.colorSuccess
+      }
+    });
+    mermaid.contentLoaded();
+  }, [content, theme.isDarkMode]);
+  return useCallback(function () {
+    return /*#__PURE__*/_jsx("pre", {
+      className: 'mermaid',
+      style: {
+        alignItems: 'center',
+        display: 'flex',
+        fontSize: 14,
+        justifyContent: 'center',
+        overflow: 'auto'
+      },
+      children: content
+    });
+  }, [content, theme.isDarkMode]);
+};

package/es/index.d.ts

@@ -61,6 +61,7 @@ export { default as LogoSpline, type LogoSplineProps } from './LogoThree/LogoSpl
 export { default as Markdown, type MarkdownProps } from './Markdown';
 export { Typography, type TypographyProps } from './Markdown/Typography';
 export { default as MaterialFileTypeIcon, type MaterialFileTypeIconProps, } from './MaterialFileTypeIcon';
+export { default as Mermaid, type MermaidProps } from './Mermaid';
 export { default as MessageInput, type MessageInputProps } from './MessageInput';
 export { default as MessageModal, type MessageModalProps } from './MessageModal';
 export { default as MobileNavBar, type MobileNavBarProps } from './MobileNavBar';

package/es/index.js

@@ -60,6 +60,7 @@ export { default as LogoSpline } from "./LogoThree/LogoSpline";
 export { default as Markdown } from "./Markdown";
 export { Typography } from "./Markdown/Typography";
 export { default as MaterialFileTypeIcon } from "./MaterialFileTypeIcon";
+export { default as Mermaid } from "./Mermaid";
 export { default as MessageInput } from "./MessageInput";
 export { default as MessageModal } from "./MessageModal";
 export { default as MobileNavBar } from "./MobileNavBar";

package/es/mdx/Pre.d.ts

@@ -1,7 +1,9 @@
 import { FC } from 'react';
 import { type HighlighterProps } from "../Highlighter";
+import { type MermaidProps } from "../Mermaid";
 import { type SnippetProps } from "../Snippet";
 export type PreProps = HighlighterProps;
 export declare const Pre: FC<PreProps>;
 export declare const PreSingleLine: FC<SnippetProps>;
+export declare const PreMermaid: FC<MermaidProps>;
 export default Pre;

package/es/mdx/Pre.js

@@ -4,10 +4,12 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["fullFeatured", "fileName", "allowChangeLanguage", "language", "children", "className", "style", "icon"],
-  _excluded2 = ["language", "children", "className", "style"];
+  _excluded2 = ["language", "children", "className", "style"],
+  _excluded3 = ["fullFeatured", "children", "className", "style"];
 var _templateObject;
 import { createStyles } from 'antd-style';
 import Highlighter from "../Highlighter";
+import Mermaid from "../Mermaid";
 import Snippet from "../Snippet";
 import { FALLBACK_LANG } from "../hooks/useHighlight";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -68,4 +70,26 @@ export var PreSingleLine = function PreSingleLine(_ref3) {
     children: children
   }));
 };
+export var PreMermaid = function PreMermaid(_ref4) {
+  var fullFeatured = _ref4.fullFeatured,
+    children = _ref4.children,
+    className = _ref4.className,
+    style = _ref4.style,
+    rest = _objectWithoutProperties(_ref4, _excluded3);
+  var _useStyles3 = useStyles(),
+    styles = _useStyles3.styles,
+    cx = _useStyles3.cx;
+  return /*#__PURE__*/_jsx(Mermaid, _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    copyButtonSize: {
+      blockSize: 28,
+      fontSize: 16
+    },
+    fullFeatured: fullFeatured,
+    style: style,
+    type: "block"
+  }, rest), {}, {
+    children: children
+  }));
+};
 export default Pre;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.147.1",
+  "version": "1.148.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -96,6 +96,7 @@
     "immer": "^10.1.1",
     "leva": "^0.9.35",
     "lodash-es": "^4.17.21",
+    "mermaid": "^10.9.1",
     "numeral": "^2.0.6",
     "polished": "^4.3.1",
     "prism-react-renderer": "^2.3.1",