@lobehub/ui 1.97.1 → 1.98.1

package/es/Highlighter/FullFeatured.js

@@ -92,7 +92,7 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
         height: 0,
         overflow: 'hidden'
       },
-      children: children === null || children === void 0 ? void 0 : children.trim()
+      children: children
     })]
   }));
 });

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -18,7 +18,7 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
     cx = _useStyles.cx;
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
-  var _useHighlight = useHighlight(children.trim(), language, isDarkMode),
+  var _useHighlight = useHighlight(children, language, isDarkMode),
     data = _useHighlight.data,
     isLoading = _useHighlight.isLoading;
   return /*#__PURE__*/_jsxs(_Fragment, {

package/es/Highlighter/index.js

@@ -56,7 +56,7 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
       children: language.toLowerCase()
     }), /*#__PURE__*/_jsx(SyntaxHighlighter, {
       language: language === null || language === void 0 ? void 0 : language.toLowerCase(),
-      children: children === null || children === void 0 ? void 0 : children.trim()
+      children: children
     })]
   }));
 });

package/es/MessageInput/index.js

@@ -1,13 +1,13 @@
 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 = ["text", "type", "onCancel", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "placeholder", "height", "style", "editButtonSize", "classNames"];
+var _excluded = ["text", "type", "onCancel", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "placeholder", "height", "style", "editButtonSize"];
 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 { Button } from 'antd';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { TextArea } from "../Input";
+import CodeEditor from "../CodeEditor";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -29,7 +29,6 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
     style = _ref.style,
     _ref$editButtonSize = _ref.editButtonSize,
     editButtonSize = _ref$editButtonSize === void 0 ? 'middle' : _ref$editButtonSize,
-    classNames = _ref.classNames,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(defaultValue || ''),
     _useState2 = _slicedToArray(_useState, 2),
@@ -46,15 +45,14 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
       width: '100%'
     }, style)
   }, props), {}, {
-    children: [/*#__PURE__*/_jsx(TextArea, {
-      autoSize: isAutoSize,
+    children: [/*#__PURE__*/_jsx(CodeEditor, {
       className: cx(styles, textareaClassname),
-      classNames: classNames,
+      language: 'md',
       onBlur: function onBlur(e) {
         return setRole(e.target.value);
       },
-      onChange: function onChange(e) {
-        return setRole(e.target.value);
+      onValueChange: function onValueChange(e) {
+        return setRole(e);
       },
       placeholder: placeholder,
       resize: false,

package/es/MessageModal/index.js

@@ -2,15 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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 { Modal } from 'antd';
-import { X } from 'lucide-react';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
-import Icon from "../Icon";
 import Markdown from "../Markdown";
 import MessageInput from "../MessageInput";
-import { useStyles } from "./style";
+import Modal from "../Modal";
 import { jsx as _jsx } from "react/jsx-runtime";
 var MessageModal = /*#__PURE__*/memo(function (_ref) {
   var editing = _ref.editing,
@@ -23,8 +19,6 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
     value = _ref.value,
     onChange = _ref.onChange,
     text = _ref.text;
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   var _useControlledState = useControlledState(false, {
       onChange: onEditingChange,
       value: editing
@@ -47,27 +41,16 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
   };
   return /*#__PURE__*/_jsx(Modal, {
     cancelText: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel',
-    className: styles.modal,
-    closeIcon: /*#__PURE__*/_jsx(Icon, {
-      icon: X
-    }),
     footer: isEdit ? null : undefined,
     okText: (text === null || text === void 0 ? void 0 : text.edit) || 'Edit',
     onCancel: function onCancel() {
       return setExpand(false);
     },
     onOk: function onOk() {
-      setTyping(true);
+      return setTyping(true);
     },
     open: expand,
-    title: /*#__PURE__*/_jsx(Flexbox, {
-      align: 'center',
-      gap: 4,
-      horizontal: true,
-      children: (text === null || text === void 0 ? void 0 : text.title) || 'Prompt'
-    }),
-    width: 800,
-    wrapClassName: styles.root,
+    title: (text === null || text === void 0 ? void 0 : text.title) || 'Prompt',
     children: isEdit ? /*#__PURE__*/_jsx(MessageInput, {
       defaultValue: value,
       height: height,
@@ -85,7 +68,6 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
       },
       type: 'block'
     }) : /*#__PURE__*/_jsx(Markdown, {
-      className: styles.body,
       style: value ? markdownStyle : _objectSpread(_objectSpread({}, markdownStyle), {}, {
         opacity: 0.5
       }),

package/es/Modal/index.d.ts

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

package/es/Modal/index.js

@@ -0,0 +1,62 @@
+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 _excluded = ["children", "title", "className", "wrapClassName", "width"];
+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 { Modal as AntModal, ConfigProvider } from 'antd';
+import { createStyles } from 'antd-style';
+import { X } from 'lucide-react';
+import { lighten } from 'polished';
+import { memo } from 'react';
+import Icon from "../Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    prefixCls = _ref.prefixCls;
+  return {
+    content: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .", "-modal-body {\n      overflow: hidden;\n      padding: 0 16px 16px;\n    }\n    .", "-modal-footer {\n      padding: 0 16px 16px;\n    }\n    .", "-modal-header {\n      display: flex;\n      gap: 4px;\n      align-items: center;\n      justify-content: center;\n\n      margin-bottom: 0;\n      padding: 16px;\n    }\n    .", "-modal-content {\n      overflow: hidden;\n      padding: 0;\n      border: 1px solid ", ";\n      border-radius: ", "px;\n    }\n  "])), prefixCls, prefixCls, prefixCls, prefixCls, token.colorSplit, token.borderRadiusLG),
+    wrap: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    overflow-x: hidden;\n    overflow-y: auto;\n    backdrop-filter: blur(2px);\n  "])))
+  };
+});
+var Modal = /*#__PURE__*/memo(function (_ref2) {
+  var children = _ref2.children,
+    title = _ref2.title,
+    className = _ref2.className,
+    wrapClassName = _ref2.wrapClassName,
+    _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? 700 : _ref2$width,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx,
+    theme = _useStyles.theme;
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: {
+      token: {
+        colorBgElevated: lighten(0.005, theme.colorBgContainer)
+      }
+    },
+    children: /*#__PURE__*/_jsx(AntModal, _objectSpread(_objectSpread({
+      centered: true,
+      className: cx(styles.content, className),
+      closable: true,
+      closeIcon: /*#__PURE__*/_jsx(Icon, {
+        icon: X,
+        size: {
+          fontSize: 20
+        }
+      }),
+      maskClosable: true,
+      title: title,
+      width: width,
+      wrapClassName: cx(styles.wrap, wrapClassName)
+    }, props), {}, {
+      children: children
+    }))
+  });
+});
+export default Modal;
+export { ModalProps } from 'antd';

package/es/index.d.ts

@@ -54,6 +54,7 @@ export { default as MobileNavBar, type MobileNavBarProps } from './MobileNavBar'
 export { default as MobileNavBarTitle, type MobileNavBarTitleProps, } from './MobileNavBar/MobileNavBarTitle';
 export { default as MobileSafeArea, type MobileSafeAreaProps } from './MobileSafeArea';
 export { default as MobileTabBar, type MobileTabBarItemProps, type MobileTabBarProps, } from './MobileTabBar';
+export { default as Modal, type ModalProps } from './Modal';
 export { default as SearchBar, type SearchBarProps } from './SearchBar';
 export { default as SelectWithImg, type SelectWithImgOptionItem, type SelectWithImgProps, } from './SelectWithImg';
 export { default as SideNav, type SideNavProps } from './SideNav';

package/es/index.js

@@ -53,6 +53,7 @@ export { default as MobileNavBar } from "./MobileNavBar";
 export { default as MobileNavBarTitle } from "./MobileNavBar/MobileNavBarTitle";
 export { default as MobileSafeArea } from "./MobileSafeArea";
 export { default as MobileTabBar } from "./MobileTabBar";
+export { default as Modal } from "./Modal";
 export { default as SearchBar } from "./SearchBar";
 export { default as SelectWithImg } from "./SelectWithImg";
 export { default as SideNav } from "./SideNav";

package/package.json

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

package/es/MessageModal/style.d.ts

@@ -1,5 +0,0 @@
-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,12 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-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),
-    root: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    backdrop-filter: blur(2px);\n  "])))
-  };
-});