@lobehub/ui 1.4.0 → 1.5.0

package/es/EditableMessage/index.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+export interface EditableMessageProps {
+    /**
+     * @title 当前文本值
+     */
+    value: string;
+    /**
+     * @title 值改变时的回调函数
+     * @param value - 改变后的值
+     */
+    onChange?: (value: string) => void;
+    /**
+     * @title 是否打开模态框
+     * @default false
+     */
+    openModal?: boolean;
+    /**
+     * @title 模态框打开状态变化的回调函数
+     * @param open - 模态框是否打开
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * @title 是否处于编辑状态
+     * @default false
+     */
+    editing?: boolean;
+    /**
+     * @title 编辑状态变化的回调函数
+     * @param editing - 是否处于编辑状态
+     */
+    onEditingChange?: (editing: boolean) => void;
+    /**
+     * @title 当文本值为空时是否显示编辑按钮
+     * @default false
+     */
+    showEditWhenEmpty?: boolean;
+    classNames?: {
+        markdown?: string;
+        input?: string;
+    };
+}
+declare const EditableMessage: import("react").NamedExoticComponent<EditableMessageProps>;
+export default EditableMessage;

package/es/EditableMessage/index.js

@@ -0,0 +1,67 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import Markdown from "../Markdown";
+import MessageInput from "../MessageInput";
+import MessageModal from "../MessageModal";
+import { memo } from 'react';
+import useControlledState from 'use-merge-value';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var EditableMessage = /*#__PURE__*/memo(function (_ref) {
+  var value = _ref.value,
+    _onChange = _ref.onChange,
+    _ref$classNames = _ref.classNames,
+    classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
+    onEditingChange = _ref.onEditingChange,
+    editing = _ref.editing,
+    openModal = _ref.openModal,
+    onOpenChange = _ref.onOpenChange,
+    _ref$showEditWhenEmpt = _ref.showEditWhenEmpty,
+    showEditWhenEmpty = _ref$showEditWhenEmpt === void 0 ? false : _ref$showEditWhenEmpt;
+  var _useControlledState = useControlledState(false, {
+      value: editing,
+      onChange: onEditingChange
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    isEdit = _useControlledState2[0],
+    setTyping = _useControlledState2[1];
+  var _useControlledState3 = useControlledState(false, {
+      value: openModal,
+      onChange: onOpenChange
+    }),
+    _useControlledState4 = _slicedToArray(_useControlledState3, 2),
+    expand = _useControlledState4[0],
+    setExpand = _useControlledState4[1];
+  return !value && showEditWhenEmpty ? /*#__PURE__*/_jsx(MessageInput, {
+    onConfirm: function onConfirm(text) {
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(text);
+      setTyping(false);
+    },
+    className: classNames.input
+  }) : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(MessageModal, {
+      open: expand,
+      onOpenChange: setExpand,
+      value: value,
+      editing: isEdit,
+      onEditingChange: setTyping,
+      onChange: function onChange(text) {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(text);
+      }
+    }), !expand && isEdit ? /*#__PURE__*/_jsx(MessageInput, {
+      onConfirm: function onConfirm(text) {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(text);
+        setTyping(false);
+      },
+      onCancel: function onCancel() {
+        return setTyping(false);
+      },
+      defaultValue: value,
+      className: classNames.input
+    }) : /*#__PURE__*/_jsx(Markdown, {
+      className: classNames.markdown,
+      children: value
+    })]
+  });
+});
+export default EditableMessage;

package/es/Markdown/CodeBlock.js

@@ -6,7 +6,7 @@ import { memo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    :not(:last-child) {\n      margin-bottom: 14px;\n    }\n  "])));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    :not(:last-child) {\n      margin-block-start: 1em;\n      margin-block-end: 1em;\n      margin-inline-start: 0px;\n      margin-inline-end: 0px;\n    }\n  "])));
 });
 var Code = /*#__PURE__*/memo(function (props) {
   var _useStyles = useStyles(),
@@ -18,6 +18,7 @@ var Code = /*#__PURE__*/memo(function (props) {
     className = _props$children$0$pro.className;
   if (!children) return null;
   return /*#__PURE__*/_jsx(Highlighter, {
+    type: "block",
     theme: theme.appearance,
     language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
     className: styles,

package/es/Markdown/index.js

@@ -1,6 +1,7 @@
 import { Divider, Typography } from 'antd';
 import { memo } from 'react';
 import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import { useStyles } from "./style";
 import Code from "./Code";
 import CodeBlock from "./CodeBlock";
@@ -21,6 +22,7 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
     children: /*#__PURE__*/_jsx(ReactMarkdown, {
       className: cx(styles.container, className),
       components: components,
+      remarkPlugins: [remarkGfm],
       children: children
     })
   });

package/es/Markdown/style.js

@@ -6,7 +6,7 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token,
     isDarkMode = _ref.isDarkMode;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      p {\n        margin: 20px auto;\n        line-height: 2;\n        word-wrap: break-word;\n        font-size: 14px;\n        color: ", ";\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      blockquote p {\n        color: ", ";\n      }\n\n      ol,\n      ul {\n        li {\n          line-height: 2;\n          display: list-item;\n        }\n      }\n    "])), token.colorText, token.colorTextDescription),
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n       color: ", ";\n\n\n\n      p {\n        margin: 20px auto;\n        line-height: 2;\n        word-wrap: break-word;\n        font-size: 14px;\n        color: ", ";\n\n        &:not(:last-child) {\n          margin-bottom: 1em;\n        }\n      }\n\n      // hyperlink\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      // inline code\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n        color: ", ";\n        background: ", ";\n        border-radius: 4px;\n      }\n\n\n      // table\n      table {\n        width: 100%;\n        border-spacing: 0;\n        border: 1px solid ", ";\n        border-radius: ", "px;\n        padding: 8px;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n      }\n\n      th {\n\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      // blockquote\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      // list\n      ul li {\n        line-height: 1.8;\n      }\n    }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorLink, token.colorLinkHover, token.colorLinkActive, isDarkMode ? token['cyan-7'] : token.colorPrimaryText, isDarkMode ? token['cyan-1'] : token.colorPrimaryBg, token.colorBorder, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.colorTextDescription),
     code: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding: 2px 4px;\n      font-family: ", " !important;\n      color: ", ";\n      border-radius: 4px;\n    "])), token.fontFamilyCode, isDarkMode ? token.cyan8 : token.pink7)
   };
 });

package/es/MessageModal/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface MessageModalProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    editing?: boolean;
+    onEditingChange?: (editing: boolean) => void;
+    onChange?: (text: string) => void;
+    value: string;
+}
+declare const MessageModal: import("react").NamedExoticComponent<MessageModalProps>;
+export default MessageModal;

package/es/MessageModal/index.js

@@ -0,0 +1,80 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { AimOutlined } from '@ant-design/icons';
+import { Modal } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import useControlledState from 'use-merge-value';
+import Markdown from "../Markdown";
+import MessageInput from "../MessageInput";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    prefixCls = _ref.prefixCls;
+  return {
+    modal: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: 70%;\n    .", "-modal-header {\n      margin-bottom: 24px;\n    }\n  "])), prefixCls),
+    body: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    overflow-y: scroll;\n    max-height: 70vh;\n  "])))
+  };
+});
+var MessageModal = /*#__PURE__*/memo(function (_ref2) {
+  var editing = _ref2.editing,
+    open = _ref2.open,
+    onOpenChange = _ref2.onOpenChange,
+    onEditingChange = _ref2.onEditingChange,
+    value = _ref2.value,
+    onChange = _ref2.onChange;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var _useControlledState = useControlledState(false, {
+      value: editing,
+      onChange: onEditingChange
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    isEdit = _useControlledState2[0],
+    setTyping = _useControlledState2[1];
+  var _useControlledState3 = useControlledState(false, {
+      value: open,
+      onChange: onOpenChange
+    }),
+    _useControlledState4 = _slicedToArray(_useControlledState3, 2),
+    expand = _useControlledState4[0],
+    setExpand = _useControlledState4[1];
+  return /*#__PURE__*/_jsx(Modal, {
+    open: expand,
+    width: 800,
+    onCancel: function onCancel() {
+      return setExpand(false);
+    },
+    okText: '编辑',
+    onOk: function onOk() {
+      setTyping(true);
+    },
+    footer: isEdit ? null : undefined,
+    cancelText: '关闭',
+    title: /*#__PURE__*/_jsxs(Flexbox, {
+      horizontal: true,
+      align: 'center',
+      gap: 4,
+      children: [/*#__PURE__*/_jsx(AimOutlined, {}), "\u63D0\u793A\u8BCD"]
+    }),
+    className: styles.modal,
+    children: isEdit ? /*#__PURE__*/_jsx(MessageInput, {
+      onConfirm: function onConfirm(text) {
+        setTyping(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(text);
+      },
+      onCancel: function onCancel() {
+        return setTyping(false);
+      },
+      defaultValue: value,
+      height: 400
+    }) : /*#__PURE__*/_jsx(Markdown, {
+      className: styles.body,
+      children: value
+    })
+  });
+});
+export default MessageModal;

package/es/ThemeProvider/GlobalStyle.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { createGlobalStyle } from 'antd-style';
-var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  body {\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: 1;\n    color: ", ";\n\n    margin: 0;\n    padding: 0;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  @font-face {\n    font-family: AliPuHui;\n    font-weight: normal;\n    src: url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),\n    url('//at.alicdn.com/t/webfont_exesdog9toj.woff') format('woff'),\n    url('//at.alicdn.com/t/webfont_exesdog9toj.ttf') format('truetype');\n    font-display: swap;\n  }\n\n  @font-face {\n    font-family: AliPuHui;\n    font-weight: bold;\n    src: url('https://at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2') format('woff2'),\n    url('https://at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff') format('woff');\n    font-display: swap;\n  }\n\n  /* \u5B9A\u4E49\u6EDA\u52A8\u69FD\u7684\u6837\u5F0F */\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 4px;\n    margin-right: 4px;\n    background-color: transparent; // \u5B9A\u4E49\u6EDA\u52A8\u69FD\u7684\u80CC\u666F\u8272\n\n    &-thumb {\n      background-color: ", "; // \u5B9A\u4E49\u6EDA\u52A8\u5757\u7684\u80CC\u666F\u8272\n      border-radius: 4px; // \u5B9A\u4E49\u6EDA\u52A8\u5757\u7684\u5706\u89D2\u534A\u5F84\n    }\n\n    &-corner {\n      display: none;\n    }\n  }\n"])), function (_ref) {
+var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  body {\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: 1;\n    color: ", ";\n\n    margin: 0;\n    padding: 0;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n  /* \u5B9A\u4E49\u6EDA\u52A8\u69FD\u7684\u6837\u5F0F */\n  ::-webkit-scrollbar {\n    width: 0;\n    height: 4px;\n    margin-right: 4px;\n    background-color: transparent; // \u5B9A\u4E49\u6EDA\u52A8\u69FD\u7684\u80CC\u666F\u8272\n\n    &-thumb {\n      background-color: ", "; // \u5B9A\u4E49\u6EDA\u52A8\u5757\u7684\u80CC\u666F\u8272\n      border-radius: 4px; // \u5B9A\u4E49\u6EDA\u52A8\u5757\u7684\u5706\u89D2\u534A\u5F84\n    }\n\n    &-corner {\n      display: none;\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
 }, function (_ref2) {

package/es/index.d.ts

@@ -3,6 +3,7 @@ export { default as Avatar, type AvatarProps } from './Avatar';
 export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
 export { default as CopyButton, type CopyButtonProps } from './CopyButton';
 export { default as DraggablePanel, type DraggablePanelProps } from './DraggablePanel';
+export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { default as Highlighter, SyntaxHighlighter, type HighlighterProps, type SyntaxHighlighterProps, } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
@@ -10,6 +11,7 @@ export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Markdown, type MarkdownProps } from './Markdown';
 export { default as MessageInput, type MessageInputProps } from './MessageInput';
+export { default as MessageModal, type MessageModalProps } from './MessageModal';
 export { default as SearchBar, type SearchBarProps } from './SearchBar';
 export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as Snippet, type SnippetProps } from './Snippet';

package/es/index.js

@@ -3,6 +3,7 @@ export { default as Avatar } from "./Avatar";
 export { default as ContextMenu } from "./ContextMenu";
 export { default as CopyButton } from "./CopyButton";
 export { default as DraggablePanel } from "./DraggablePanel";
+export { default as EditableMessage } from "./EditableMessage";
 export { default as EditableText } from "./EditableText";
 export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";
 export { default as Icon } from "./Icon";
@@ -10,6 +11,7 @@ export { default as List } from "./List";
 export { default as Logo } from "./Logo";
 export { default as Markdown } from "./Markdown";
 export { default as MessageInput } from "./MessageInput";
+export { default as MessageModal } from "./MessageModal";
 export { default as SearchBar } from "./SearchBar";
 export { default as SideNav } from "./SideNav";
 export { default as Snippet } from "./Snippet";

package/es/styles/theme/base.js

@@ -9,7 +9,7 @@ export var baseTheme = {
     borderRadiusSM: 3,
     borderRadiusLG: 8,
     controlHeight: 36,
-    fontFamily: "'Segoe UI', SegoeUI, AliPuHui, -apple-system ,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'",
+    fontFamily: "'Segoe UI', SegoeUI, -apple-system ,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'",
     fontFamilyCode: "'Hack Nerd Font Mono', 'Hack', 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
   }
 };

package/lib/EditableMessage/index.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+export interface EditableMessageProps {
+    /**
+     * @title 当前文本值
+     */
+    value: string;
+    /**
+     * @title 值改变时的回调函数
+     * @param value - 改变后的值
+     */
+    onChange?: (value: string) => void;
+    /**
+     * @title 是否打开模态框
+     * @default false
+     */
+    openModal?: boolean;
+    /**
+     * @title 模态框打开状态变化的回调函数
+     * @param open - 模态框是否打开
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * @title 是否处于编辑状态
+     * @default false
+     */
+    editing?: boolean;
+    /**
+     * @title 编辑状态变化的回调函数
+     * @param editing - 是否处于编辑状态
+     */
+    onEditingChange?: (editing: boolean) => void;
+    /**
+     * @title 当文本值为空时是否显示编辑按钮
+     * @default false
+     */
+    showEditWhenEmpty?: boolean;
+    classNames?: {
+        markdown?: string;
+        input?: string;
+    };
+}
+declare const EditableMessage: import("react").NamedExoticComponent<EditableMessageProps>;
+export default EditableMessage;

package/lib/EditableMessage/index.js

@@ -0,0 +1,96 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/EditableMessage/index.tsx
+var EditableMessage_exports = {};
+__export(EditableMessage_exports, {
+  default: () => EditableMessage_default
+});
+module.exports = __toCommonJS(EditableMessage_exports);
+var import_Markdown = __toESM(require("../Markdown"));
+var import_MessageInput = __toESM(require("../MessageInput"));
+var import_MessageModal = __toESM(require("../MessageModal"));
+var import_react = require("react");
+var import_use_merge_value = __toESM(require("use-merge-value"));
+var EditableMessage = (0, import_react.memo)(
+  ({
+    value,
+    onChange,
+    classNames = {},
+    onEditingChange,
+    editing,
+    openModal,
+    onOpenChange,
+    showEditWhenEmpty = false
+  }) => {
+    const [isEdit, setTyping] = (0, import_use_merge_value.default)(false, {
+      value: editing,
+      onChange: onEditingChange
+    });
+    const [expand, setExpand] = (0, import_use_merge_value.default)(false, {
+      value: openModal,
+      onChange: onOpenChange
+    });
+    return !value && showEditWhenEmpty ? /* @__PURE__ */ React.createElement(
+      import_MessageInput.default,
+      {
+        onConfirm: (text) => {
+          onChange == null ? void 0 : onChange(text);
+          setTyping(false);
+        },
+        className: classNames.input
+      }
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      import_MessageModal.default,
+      {
+        open: expand,
+        onOpenChange: setExpand,
+        value,
+        editing: isEdit,
+        onEditingChange: setTyping,
+        onChange: (text) => {
+          onChange == null ? void 0 : onChange(text);
+        }
+      }
+    ), !expand && isEdit ? /* @__PURE__ */ React.createElement(
+      import_MessageInput.default,
+      {
+        onConfirm: (text) => {
+          onChange == null ? void 0 : onChange(text);
+          setTyping(false);
+        },
+        onCancel: () => setTyping(false),
+        defaultValue: value,
+        className: classNames.input
+      }
+    ) : /* @__PURE__ */ React.createElement(import_Markdown.default, { className: classNames.markdown }, value));
+  }
+);
+var EditableMessage_default = EditableMessage;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Markdown/CodeBlock.js

@@ -38,7 +38,10 @@ var import_react = require("react");
 var useStyles = (0, import_antd_style.createStyles)(
   ({ css }) => css`
     :not(:last-child) {
-      margin-bottom: 14px;
+      margin-block-start: 1em;
+      margin-block-end: 1em;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
     }
   `
 );
@@ -52,6 +55,7 @@ var Code = (0, import_react.memo)((props) => {
   return /* @__PURE__ */ React.createElement(
     import_Highlighter.default,
     {
+      type: "block",
       theme: theme.appearance,
       language: (className == null ? void 0 : className.replace("language-", "")) || "markdown",
       className: styles

package/lib/Markdown/index.js

@@ -35,13 +35,22 @@ module.exports = __toCommonJS(Markdown_exports);
 var import_antd = require("antd");
 var import_react = require("react");
 var import_react_markdown = __toESM(require("react-markdown"));
+var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_style = require("./style");
 var import_Code = __toESM(require("./Code"));
 var import_CodeBlock = __toESM(require("./CodeBlock"));
 var Markdown = (0, import_react.memo)(({ children, className }) => {
   const { styles, cx } = (0, import_style.useStyles)();
   const components = { pre: import_CodeBlock.default, code: import_Code.default, hr: import_antd.Divider, a: import_antd.Typography.Link };
-  return /* @__PURE__ */ React.createElement(import_antd.Typography, null, /* @__PURE__ */ React.createElement(import_react_markdown.default, { className: cx(styles.container, className), components }, children));
+  return /* @__PURE__ */ React.createElement(import_antd.Typography, null, /* @__PURE__ */ React.createElement(
+    import_react_markdown.default,
+    {
+      className: cx(styles.container, className),
+      components,
+      remarkPlugins: [import_remark_gfm.default]
+    },
+    children
+  ));
 });
 var Markdown_default = Markdown;
 // Annotate the CommonJS export names for ESM import in node:

package/lib/Markdown/style.js

@@ -26,29 +26,104 @@ var import_antd_style = require("antd-style");
 var useStyles = (0, import_antd_style.createStyles)(({ css, token, isDarkMode }) => {
   return {
     container: css`
+       color: ${isDarkMode ? token.colorTextSecondary : token.colorText};
+
+
+
       p {
         margin: 20px auto;
         line-height: 2;
         word-wrap: break-word;
         font-size: 14px;
         color: ${token.colorText};
+
+        &:not(:last-child) {
+          margin-bottom: 1em;
+        }
+      }
+
+      // hyperlink
+      a {
+        color: ${token.colorLink};
+
+        &:hover {
+          color: ${token.colorLinkHover};
+        }
+
+        &:active {
+          color: ${token.colorLinkActive};
+        }
+      }
+
+      img {
+        max-width: 100%;
+      }
+
+      // inline code
+      > :not([data-code-type='highlighter']) code {
+        padding: 2px 6px;
+        color: ${isDarkMode ? token["cyan-7"] : token.colorPrimaryText};
+        background: ${isDarkMode ? token["cyan-1"] : token.colorPrimaryBg};
+        border-radius: 4px;
+      }
+
+
+      // table
+      table {
+        width: 100%;
+        border-spacing: 0;
+        border: 1px solid ${token.colorBorder};
+        border-radius: ${token.borderRadius}px;
+        padding: 8px;
+        margin-block-start: 1em;
+        margin-block-end: 1em;
+        margin-inline-start: 0px;
+        margin-inline-end: 0px;
       }
 
-      p:not(:last-child) {
-        margin-bottom: 1em;
+      th {
+
+      }
+
+      thead {
+        tr {
+          th {
+            background: ${token.colorFillTertiary};
+            &:first-child {
+              border-top-left-radius: ${token.borderRadius}px;
+              border-bottom-left-radius: ${token.borderRadius}px;
+            }
+            &:last-child {
+              border-top-right-radius: ${token.borderRadius}px;
+              border-bottom-right-radius: ${token.borderRadius}px;
+            }
+          }
+        }
       }
 
-      blockquote p {
-        color: ${token.colorTextDescription};
+      th,
+      td {
+        padding-block-start: 10px;
+        padding-block-end: 10px;
+        padding-inline-start: 16px;
+        padding-inline-end: 16px;
       }
 
-      ol,
-      ul {
-        li {
-          line-height: 2;
-          display: list-item;
+      // blockquote
+      blockquote {
+        margin: 16px 0;
+        padding: 0 12px;
+        p {
+          font-style: italic;
+          color: ${token.colorTextDescription};
         }
       }
+
+      // list
+      ul li {
+        line-height: 1.8;
+      }
+    }
     `,
     code: css`
       padding: 2px 4px;

package/lib/MessageModal/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface MessageModalProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    editing?: boolean;
+    onEditingChange?: (editing: boolean) => void;
+    onChange?: (text: string) => void;
+    value: string;
+}
+declare const MessageModal: import("react").NamedExoticComponent<MessageModalProps>;
+export default MessageModal;

package/lib/MessageModal/index.js

@@ -0,0 +1,98 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/MessageModal/index.tsx
+var MessageModal_exports = {};
+__export(MessageModal_exports, {
+  default: () => MessageModal_default
+});
+module.exports = __toCommonJS(MessageModal_exports);
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var import_antd_style = require("antd-style");
+var import_react = require("react");
+var import_react_layout_kit = require("react-layout-kit");
+var import_use_merge_value = __toESM(require("use-merge-value"));
+var import_Markdown = __toESM(require("../Markdown"));
+var import_MessageInput = __toESM(require("../MessageInput"));
+var useStyles = (0, import_antd_style.createStyles)(({ css, prefixCls }) => ({
+  modal: css`
+    height: 70%;
+    .${prefixCls}-modal-header {
+      margin-bottom: 24px;
+    }
+  `,
+  body: css`
+    overflow-y: scroll;
+    max-height: 70vh;
+  `
+}));
+var MessageModal = (0, import_react.memo)(
+  ({ editing, open, onOpenChange, onEditingChange, value, onChange }) => {
+    const { styles } = useStyles();
+    const [isEdit, setTyping] = (0, import_use_merge_value.default)(false, {
+      value: editing,
+      onChange: onEditingChange
+    });
+    const [expand, setExpand] = (0, import_use_merge_value.default)(false, {
+      value: open,
+      onChange: onOpenChange
+    });
+    return /* @__PURE__ */ React.createElement(
+      import_antd.Modal,
+      {
+        open: expand,
+        width: 800,
+        onCancel: () => setExpand(false),
+        okText: "编辑",
+        onOk: () => {
+          setTyping(true);
+        },
+        footer: isEdit ? null : void 0,
+        cancelText: "关闭",
+        title: /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { horizontal: true, align: "center", gap: 4 }, /* @__PURE__ */ React.createElement(import_icons.AimOutlined, null), "提示词"),
+        className: styles.modal
+      },
+      isEdit ? /* @__PURE__ */ React.createElement(
+        import_MessageInput.default,
+        {
+          onConfirm: (text) => {
+            setTyping(false);
+            onChange == null ? void 0 : onChange(text);
+          },
+          onCancel: () => setTyping(false),
+          defaultValue: value,
+          height: 400
+        }
+      ) : /* @__PURE__ */ React.createElement(import_Markdown.default, { className: styles.body }, value)
+    );
+  }
+);
+var MessageModal_default = MessageModal;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/ThemeProvider/GlobalStyle.js

@@ -46,24 +46,6 @@ var GlobalStyle = import_antd_style.createGlobalStyle`
   #root {
 	  min-height: 100vh;
   }
-
-  @font-face {
-    font-family: AliPuHui;
-    font-weight: normal;
-    src: url('//at.alicdn.com/t/webfont_exesdog9toj.woff2') format('woff2'),
-    url('//at.alicdn.com/t/webfont_exesdog9toj.woff') format('woff'),
-    url('//at.alicdn.com/t/webfont_exesdog9toj.ttf') format('truetype');
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: AliPuHui;
-    font-weight: bold;
-    src: url('https://at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2') format('woff2'),
-    url('https://at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff') format('woff');
-    font-display: swap;
-  }
-
   /* 定义滚动槽的样式 */
   ::-webkit-scrollbar {
     width: 0;

package/lib/index.d.ts

@@ -3,6 +3,7 @@ export { default as Avatar, type AvatarProps } from './Avatar';
 export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
 export { default as CopyButton, type CopyButtonProps } from './CopyButton';
 export { default as DraggablePanel, type DraggablePanelProps } from './DraggablePanel';
+export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { default as Highlighter, SyntaxHighlighter, type HighlighterProps, type SyntaxHighlighterProps, } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
@@ -10,6 +11,7 @@ export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Markdown, type MarkdownProps } from './Markdown';
 export { default as MessageInput, type MessageInputProps } from './MessageInput';
+export { default as MessageModal, type MessageModalProps } from './MessageModal';
 export { default as SearchBar, type SearchBarProps } from './SearchBar';
 export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as Snippet, type SnippetProps } from './Snippet';

package/lib/index.js

@@ -34,6 +34,7 @@ __export(src_exports, {
   ContextMenu: () => import_ContextMenu.default,
   CopyButton: () => import_CopyButton.default,
   DraggablePanel: () => import_DraggablePanel.default,
+  EditableMessage: () => import_EditableMessage.default,
   EditableText: () => import_EditableText.default,
   Highlighter: () => import_Highlighter.default,
   Icon: () => import_Icon.default,
@@ -41,6 +42,7 @@ __export(src_exports, {
   Logo: () => import_Logo.default,
   Markdown: () => import_Markdown.default,
   MessageInput: () => import_MessageInput.default,
+  MessageModal: () => import_MessageModal.default,
   SearchBar: () => import_SearchBar.default,
   SideNav: () => import_SideNav.default,
   Snippet: () => import_Snippet.default,
@@ -60,6 +62,7 @@ var import_Avatar = __toESM(require("./Avatar"));
 var import_ContextMenu = __toESM(require("./ContextMenu"));
 var import_CopyButton = __toESM(require("./CopyButton"));
 var import_DraggablePanel = __toESM(require("./DraggablePanel"));
+var import_EditableMessage = __toESM(require("./EditableMessage"));
 var import_EditableText = __toESM(require("./EditableText"));
 var import_Highlighter = __toESM(require("./Highlighter"));
 var import_Icon = __toESM(require("./Icon"));
@@ -67,6 +70,7 @@ var import_List = __toESM(require("./List"));
 var import_Logo = __toESM(require("./Logo"));
 var import_Markdown = __toESM(require("./Markdown"));
 var import_MessageInput = __toESM(require("./MessageInput"));
+var import_MessageModal = __toESM(require("./MessageModal"));
 var import_SearchBar = __toESM(require("./SearchBar"));
 var import_SideNav = __toESM(require("./SideNav"));
 var import_Snippet = __toESM(require("./Snippet"));
@@ -83,6 +87,7 @@ var import_Tooltip = __toESM(require("./Tooltip"));
   ContextMenu,
   CopyButton,
   DraggablePanel,
+  EditableMessage,
   EditableText,
   Highlighter,
   Icon,
@@ -90,6 +95,7 @@ var import_Tooltip = __toESM(require("./Tooltip"));
   Logo,
   Markdown,
   MessageInput,
+  MessageModal,
   SearchBar,
   SideNav,
   Snippet,

package/lib/styles/theme/base.js

@@ -33,7 +33,7 @@ var baseTheme = {
     borderRadiusSM: 3,
     borderRadiusLG: 8,
     controlHeight: 36,
-    fontFamily: `'Segoe UI', SegoeUI, AliPuHui, -apple-system ,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'`,
+    fontFamily: `'Segoe UI', SegoeUI, -apple-system ,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'`,
     fontFamilyCode: `'Hack Nerd Font Mono', 'Hack', 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace`
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -80,6 +80,7 @@
     "react-layout-kit": "^1",
     "react-markdown": "^8",
     "react-rnd": "^10",
+    "remark-gfm": "^3.0.1",
     "shiki-es": "^0.2",
     "styled-components": "^6.0.0-rc.1",
     "use-merge-value": "^1",