@lobehub/ui 1.86.4 → 1.87.1

package/es/ChatItem/components/MessageContent.js

@@ -28,6 +28,7 @@ var Loading = /*#__PURE__*/memo(function (_ref) {
     },
     editButtonSize: 'small',
     editing: editing,
+    fullFeaturedCodeBlock: true,
     onChange: onChange,
     onEditingChange: onEditingChange,
     text: text,

package/es/EditableMessage/index.d.ts

@@ -22,6 +22,7 @@ export interface EditableMessageProps {
      * @default false
      */
     editing?: boolean;
+    fullFeaturedCodeBlock?: boolean;
     height?: MessageInputProps['height'];
     inputType?: MessageInputProps['type'];
     /**

package/es/EditableMessage/index.js

@@ -27,7 +27,8 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     height = _ref.height,
     inputType = _ref.inputType,
     editButtonSize = _ref.editButtonSize,
-    text = _ref.text;
+    text = _ref.text,
+    fullFeaturedCodeBlock = _ref.fullFeaturedCodeBlock;
   var _useControlledState = useControlledState(false, {
       onChange: onEditingChange,
       value: editing
@@ -68,6 +69,7 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [!expand && isEdit ? input : /*#__PURE__*/_jsx(Markdown, {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.markdown,
+      fullFeaturedCodeBlock: fullFeaturedCodeBlock,
       style: _objectSpread({
         height: isAutoSize ? 'unset' : height,
         overflowX: 'hidden',

package/es/Form/components/style.js

@@ -13,7 +13,7 @@ export var useStyles = createStyles(function (_ref, itemMinWidth) {
     formTitle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n\n      text-align: left;\n\n      > div {\n        font-weight: 500;\n        line-height: 1;\n      }\n\n      > small {\n        display: block;\n\n        line-height: 1;\n        color: ", ";\n        word-wrap: break-word;\n        white-space: pre-wrap;\n      }\n\n      .ant-tag {\n        font-family: ", ";\n      }\n    "])), token.colorTextDescription, token.fontFamilyCode),
     group: cx(isDarkMode && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          .ant-collapse-content {\n            background: transparent;\n          }\n\n          .ant-collapse-header {\n            background: ", ";\n          }\n        "])), token.colorFillTertiary), css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        .ant-collapse-header {\n          align-items: center !important;\n          border-radius: 0 !important;\n        }\n\n        .ant-collapse-content-box {\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n\n        .ant-form-item-label {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n        }\n      "])))),
     icon: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      transition: all 100ms ", ";\n    "])), token.motionEaseOut),
-    item: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      padding: 8px 0;\n\n      .ant-row {\n        justify-content: space-between;\n\n        > div {\n          flex: unset !important;\n          flex-grow: unset !important;\n        }\n      }\n\n      ", "\n\n      ", " {\n        padding: 16px 0;\n\n        .ant-row {\n          flex-direction: column;\n          gap: 4px;\n        }\n\n        .ant-form-item-control {\n          flex: 1;\n          width: 100%;\n        }\n      }\n    "])), itemMinWidth && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        .ant-form-item-control {\n          width: ", ";\n        }\n      "])), isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth), responsive.mobile),
+    item: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      padding: 8px 0;\n\n      .ant-row {\n        justify-content: space-between;\n\n        > div {\n          flex: unset !important;\n          flex-grow: unset !important;\n        }\n      }\n\n      .ant-form-item-required::before {\n        align-self: flex-start;\n      }\n\n      ", "\n\n      ", " {\n        padding: 16px 0;\n\n        .ant-row {\n          flex-direction: column;\n          gap: 4px;\n        }\n\n        .ant-form-item-control {\n          flex: 1;\n          width: 100%;\n        }\n      }\n    "])), itemMinWidth && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        .ant-form-item-control {\n          width: ", ";\n        }\n      "])), isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth), responsive.mobile),
     title: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      font-size: 16px;\n      font-weight: 600;\n\n      .anticon {\n        color: ", ";\n      }\n    "])), token.colorPrimary)
   };
 });

package/es/Highlighter/FullFeatured.d.ts

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

package/es/Highlighter/FullFeatured.js

@@ -0,0 +1,99 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "language", "className", "style"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { Select } from 'antd';
+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 { languageMap } from "../hooks/useHighlight";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var options = languageMap.map(function (item) {
+  return {
+    label: item,
+    value: item.toLowerCase()
+  };
+});
+export var Highlighter = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? 'markdown' : _ref$language,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    expand = _useState2[0],
+    setExpand = _useState2[1];
+  var _useState3 = useState(language),
+    _useState4 = _slicedToArray(_useState3, 2),
+    lang = _useState4[0],
+    setLang = _useState4[1];
+  var _useStyles = useStyles('block'),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var container = cx(styles.container, className);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: container,
+    "data-code-type": "highlighter",
+    style: style
+  }, props), {}, {
+    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
+        }
+      }), /*#__PURE__*/_jsx(ActionIcon, {
+        size: {
+          blockSize: 24
+        },
+        style: {
+          width: 'unset'
+        },
+        children: /*#__PURE__*/_jsx(Select, {
+          bordered: false,
+          className: styles.select,
+          onSelect: setLang,
+          options: options,
+          size: 'small',
+          suffixIcon: false,
+          value: lang.toLowerCase()
+        })
+      }), /*#__PURE__*/_jsx(CopyButton, {
+        content: children,
+        placement: "left",
+        size: {
+          blockSize: 24,
+          fontSize: 14,
+          strokeWidth: 2
+        }
+      })]
+    }), /*#__PURE__*/_jsx(SyntaxHighlighter, {
+      language: lang === null || lang === void 0 ? void 0 : lang.toLowerCase(),
+      style: expand ? {} : {
+        height: 0,
+        overflow: 'hidden'
+      },
+      children: children === null || children === void 0 ? void 0 : children.trim()
+    })]
+  }));
+});
+export default Highlighter;
+export { default as SyntaxHighlighter } from "./SyntaxHighlighter";

package/es/Highlighter/SyntaxHighlighter/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { type HighlighterCoreOptions } from 'shikiji';
-export interface SyntaxHighlighterProps {
+import { DivProps } from "../../types";
+export interface SyntaxHighlighterProps extends DivProps {
     children: string;
     language: string;
     options?: HighlighterCoreOptions;

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -12,9 +12,12 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     language = _ref.language,
-    options = _ref.options;
+    options = _ref.options,
+    className = _ref.className,
+    style = _ref.style;
   var _useStyles = useStyles(),
-    styles = _useStyles.styles;
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
   var _useHighlight = useHighlight(function (s) {
@@ -28,12 +31,15 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   }, [options]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [isLoading ? /*#__PURE__*/_jsx("code", {
+      className: className,
+      style: style,
       children: children
     }) : /*#__PURE__*/_jsx("div", {
-      className: styles.shiki,
+      className: cx(styles.shiki, className),
       dangerouslySetInnerHTML: {
         __html: codeToHtml(children, language, isDarkMode) || ''
-      }
+      },
+      style: style
     }), isLoading && /*#__PURE__*/_jsxs(Center, {
       className: styles.loading,
       gap: 8,

package/es/Highlighter/index.d.ts

@@ -12,6 +12,7 @@ export interface HighlighterProps extends DivProps {
      * @default true
      */
     copyable?: boolean;
+    fullFeatured?: boolean;
     /**
      * @description The language of the code content
      */

package/es/Highlighter/index.js

@@ -1,18 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["copyButtonSize", "children", "language", "className", "style", "copyable", "showLanguage", "type", "spotlight"];
+var _excluded = ["fullFeatured", "copyButtonSize", "children", "language", "className", "style", "copyable", "showLanguage", "type", "spotlight"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { memo } from 'react';
 import CopyButton from "../CopyButton";
 import Spotlight from "../Spotlight";
 import Tag from "../Tag";
+import FullFeatured from "./FullFeatured";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var Highlighter = /*#__PURE__*/memo(function (_ref) {
-  var _ref$copyButtonSize = _ref.copyButtonSize,
+  var fullFeatured = _ref.fullFeatured,
+    _ref$copyButtonSize = _ref.copyButtonSize,
     copyButtonSize = _ref$copyButtonSize === void 0 ? 'site' : _ref$copyButtonSize,
     children = _ref.children,
     language = _ref.language,
@@ -30,6 +32,13 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var container = cx(styles.container, className);
+  if (fullFeatured) return /*#__PURE__*/_jsx(FullFeatured, _objectSpread(_objectSpread({
+    className: className,
+    language: language,
+    style: style
+  }, props), {}, {
+    children: children
+  }));
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: container,
     "data-code-type": "highlighter",

package/es/Highlighter/style.d.ts

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

package/es/Highlighter/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, type) {
   var token = _ref.token,
@@ -14,6 +14,8 @@ export var useStyles = createStyles(function (_ref, type) {
   return {
     button: cx(buttonHoverCls, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          top: ", ";\n          right: ", ";\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: auto;\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            margin: 0 !important;\n            padding: ", " !important;\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n        "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px 24px")),
-    lang: cx(langHoverCls, stylish.blur, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          right: 0;\n          bottom: 8px;\n\n          font-family: ", ";\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.fontFamilyCode, token.colorTextSecondary))
+    header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        padding: 4px 8px;\n        background: ", ";\n      "])), token.colorFillQuaternary),
+    lang: cx(langHoverCls, stylish.blur, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          right: 0;\n          bottom: 8px;\n\n          font-family: ", ";\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.fontFamilyCode, token.colorTextSecondary)),
+    select: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        .ant-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n      "])), token.colorTextDescription)
   };
 });

package/es/Markdown/CodeBlock.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const Code: import("react").NamedExoticComponent<any>;
-export default Code;
+export declare const CodeLite: import("react").MemoExoticComponent<(properties: any) => import("react/jsx-runtime").JSX.Element>;
+export declare const CodeFullFeatured: import("react").MemoExoticComponent<(properties: any) => import("react/jsx-runtime").JSX.Element>;

package/es/Markdown/CodeBlock.js

@@ -1,30 +1,65 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject;
+var _excluded = ["fullFeatured"];
+var _templateObject, _templateObject2;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import Highlighter from "../Highlighter";
+import Snippet from "../Snippet";
 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-block-start: 1em;\n      margin-block-end: 1em;\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n    }\n  "])));
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    :not(:last-child) {\n      margin-block-start: 1em;\n      margin-block-end: 1em;\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n    }\n  "]))),
+    highlight: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    pre {\n      padding: 12px !important;\n    }\n  "])))
+  };
 });
-var Code = /*#__PURE__*/memo(function (properties) {
+var countLines = function countLines(str) {
+  var regex = /\n/g;
+  var matches = str.match(regex);
+  return matches ? matches.length : 1;
+};
+var Code = /*#__PURE__*/memo(function (_ref2) {
+  var fullFeatured = _ref2.fullFeatured,
+    properties = _objectWithoutProperties(_ref2, _excluded);
   var _useStyles = useStyles(),
-    styles = _useStyles.styles;
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
   if (!properties.children[0]) return;
   var _properties$children$ = properties.children[0].props,
     children = _properties$children$.children,
     className = _properties$children$.className;
   if (!children) return;
+  var content = Array.isArray(children) ? children[0] : children;
+  if (countLines(content) === 1 && content.length <= 60) {
+    return /*#__PURE__*/_jsx(Snippet, {
+      className: styles.container,
+      "data-code-type": "highlighter",
+      language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
+      type: 'block',
+      children: content
+    });
+  }
   return /*#__PURE__*/_jsx(Highlighter, {
-    className: styles,
+    className: cx(styles.container, styles.highlight),
     copyButtonSize: {
       blockSize: 28,
       fontSize: 16
     },
+    fullFeatured: fullFeatured,
     language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
     type: "block",
-    children: Array.isArray(children) ? children[0] : children
+    children: content
   });
 });
-export default Code;
+export var CodeLite = /*#__PURE__*/memo(function (properties) {
+  return /*#__PURE__*/_jsx(Code, _objectSpread({}, properties));
+});
+export var CodeFullFeatured = /*#__PURE__*/memo(function (properties) {
+  return /*#__PURE__*/_jsx(Code, _objectSpread({
+    fullFeatured: true
+  }, properties));
+});

package/es/Markdown/index.d.ts

@@ -9,6 +9,7 @@ export interface MarkdownProps {
      * @description The class name for the Markdown component
      */
     className?: string;
+    fullFeaturedCodeBlock?: boolean;
     style?: CSSProperties;
 }
 declare const Markdown: import("react").NamedExoticComponent<MarkdownProps>;

package/es/Markdown/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "style"];
+var _excluded = ["children", "className", "style", "fullFeaturedCodeBlock"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Collapse, Divider, Image, Typography } from 'antd';
@@ -12,13 +12,14 @@ import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
-import CodeBlock from "./CodeBlock";
+import { CodeFullFeatured, CodeLite } from "./CodeBlock";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Markdown = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     className = _ref.className,
     style = _ref.style,
+    fullFeaturedCodeBlock = _ref.fullFeaturedCodeBlock,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
@@ -34,7 +35,7 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
       });
     },
     img: Image,
-    pre: CodeBlock
+    pre: fullFeaturedCodeBlock ? CodeFullFeatured : CodeLite
   };
   return /*#__PURE__*/_jsx(Typography, {
     className: className,

package/es/MessageModal/index.js

@@ -67,6 +67,7 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
       children: (text === null || text === void 0 ? void 0 : text.title) || 'Prompt'
     }),
     width: 800,
+    wrapClassName: styles.root,
     children: isEdit ? /*#__PURE__*/_jsx(MessageInput, {
       defaultValue: value,
       height: height,

package/es/MessageModal/style.d.ts

@@ -1,4 +1,5 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     body: import("antd-style").SerializedStyles;
     modal: import("antd-style").SerializedStyles;
+    root: import("antd-style").SerializedStyles;
 }>;

package/es/MessageModal/style.js

@@ -1,11 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     prefixCls = _ref.prefixCls;
   return {
     body: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow-x: hidden;\n    overflow-y: auto;\n    max-height: 70vh;\n  "]))),
-    modal: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .", "-modal-content {\n      padding: 16px;\n    }\n    .", "-modal-header {\n      margin-bottom: 16px;\n    }\n  "])), prefixCls, prefixCls)
+    modal: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .", "-modal-content {\n      padding: 16px;\n    }\n    .", "-modal-header {\n      margin-bottom: 16px;\n    }\n  "])), prefixCls, prefixCls),
+    root: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    backdrop-filter: blur(2px);\n  "])))
   };
 });

package/es/SearchBar/index.js

@@ -5,12 +5,12 @@ var _excluded = ["spotlight", "className", "value", "onChange", "placeholder", "
 var _navigator;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { Tag } from 'antd';
 import { Search } from 'lucide-react';
 import { memo, useEffect, useRef, useState } from 'react';
 import Icon from "../Icon";
 import { Input } from "../Input";
 import Spotlight from "../Spotlight";
+import Tag from "../Tag";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/es/SearchBar/style.js

@@ -8,6 +8,6 @@ export var useStyles = createStyles(function (_ref) {
     icon: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextPlaceholder),
     input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 8px 0 12px;\n  "]))),
     search: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n  "]))),
-    tag: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n\n    background: ", ";\n  "])), token.colorBgContainer)
+    tag: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n\n    color: ", ";\n  "])), token.colorTextDescription)
   };
 });

package/es/Snippet/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["symbol", "language", "children", "copyable", "type", "spotlight"];
+var _excluded = ["symbol", "language", "children", "copyable", "type", "spotlight", "className"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { memo } from 'react';
@@ -20,11 +20,13 @@ var Snippet = /*#__PURE__*/memo(function (_ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'ghost' : _ref$type,
     spotlight = _ref.spotlight,
+    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(type),
-    styles = _useStyles.styles;
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: styles.container
+    className: cx(styles.container, className)
   }, props), {}, {
     children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(SyntaxHighlighter, {
       language: language,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.86.4",
+  "version": "1.87.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",