@lobehub/ui 1.25.3 → 1.25.5

package/es/DraggablePanel/style.js

@@ -7,8 +7,8 @@ var toggleShort = 16;
 export var useStyles = createStyles(function (_ref, prefix) {
   var token = _ref.token;
   var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    &::before {\n      content: '';\n      position: absolute;\n      z-index: 50;\n      transition: all 0.2s ", ";\n    }\n\n    &:hover,\n    &:active {\n      &::before {\n        background: ", " !important;\n      }\n    }\n  "])), token.motionEaseOut, token.colorPrimary);
-  var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 1001;\n    opacity: 0;\n    transition: all 0.2s ", ";\n\n    &:hover {\n      opacity: 1 !important;\n    }\n\n    &:active {\n      opacity: 1 !important;\n    }\n\n    > div {\n      cursor: pointer;\n\n      position: absolute;\n\n      color: ", ";\n\n      background: ", ";\n      border-color: ", ";\n      border-style: solid;\n      border-width: 1px;\n      border-radius: 4px;\n\n      transition: all 0.2s ", ";\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n    }\n  "])), token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
-  var float = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 2000;\n  "])));
+  var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 101;\n    opacity: 0;\n    transition: all 0.2s ", ";\n\n    &:hover {\n      opacity: 1 !important;\n    }\n\n    &:active {\n      opacity: 1 !important;\n    }\n\n    > div {\n      cursor: pointer;\n\n      position: absolute;\n\n      color: ", ";\n\n      background: ", ";\n      border-color: ", ";\n      border-style: solid;\n      border-width: 1px;\n      border-radius: 4px;\n\n      transition: all 0.2s ", ";\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n    }\n  "])), token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
+  var float = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 200;\n  "])));
   return {
     container: cx(prefix, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        flex-shrink: 0;\n        border: 0 solid ", ";\n\n        &:hover {\n          .", "-toggle {\n            opacity: 1;\n          }\n        }\n      "])), token.colorBorderSecondary, prefix)),
     fixed: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: relative;\n    "]))),

package/es/EditableMessageList/index.js

@@ -1,13 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { PlusOutlined } from '@ant-design/icons';
 import { Button, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { TrashIcon } from 'lucide-react';
+import { Plus, Trash } from 'lucide-react';
 import { memo, useEffect, useReducer } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import IconAction from "../ActionIcon";
 import { messagesReducer } from "../Chat";
 import { ControlInput } from "../components/ControlInput";
+import { ActionIcon, Icon } from "./..";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
@@ -45,13 +44,13 @@ export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
           },
           options: [{
             value: 'system',
-            label: '系统'
+            label: 'System'
           }, {
             value: 'user',
-            label: '输入'
+            label: 'Input'
           }, {
             value: 'assistant',
-            label: '输出'
+            label: 'Output'
           }],
           style: {
             width: 120
@@ -68,8 +67,8 @@ export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
           },
           placeholder: item.role === 'user' ? '请填入输入的样例内容' : '请填入输出的样例',
           value: item.content
-        }), /*#__PURE__*/_jsx(IconAction, {
-          icon: TrashIcon,
+        }), /*#__PURE__*/_jsx(ActionIcon, {
+          icon: Trash,
           onClick: function onClick() {
             dispatch({
               type: 'deleteMessage',
@@ -77,13 +76,18 @@ export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
             });
           },
           placement: "right",
+          size: {
+            fontSize: 16
+          },
           title: "Delete"
         })]
       }, "".concat(index, "-").concat(item.content));
     }), /*#__PURE__*/_jsx(Button, {
       block: true,
       disabled: disabled,
-      icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: Plus
+      }),
       onClick: function onClick() {
         var lastMeg = chatMessages.at(-1);
         dispatch({
@@ -94,7 +98,7 @@ export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
           }
         });
       },
-      children: "\u6DFB\u52A0\u4E00\u9879"
+      children: "Add Props"
     })]
   });
 }, isEqual);

package/es/Features/Item.js

@@ -4,7 +4,6 @@ var _excluded = ["style", "className", "row", "column", "description", "image",
 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 { Icon } from "./..";
-import { Link, history } from 'dumi';
 import * as LucideIcon from 'lucide-react';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
@@ -49,18 +48,9 @@ var Item = /*#__PURE__*/memo(function (_ref2) {
   var FeatureIcon = icon && LucideIcon[icon];
   return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className),
-    onClick: function onClick() {
-      if (!link) return;
-      if (openExternal) {
-        window.open(link);
-      } else {
-        history.push(link);
-      }
-    },
     style: _objectSpread({
       gridRow: "span ".concat(rowNum),
-      gridColumn: "span ".concat(column || 1),
-      cursor: link ? 'pointer' : 'default'
+      gridColumn: "span ".concat(column || 1)
     }, style)
   }, props), {}, {
     children: /*#__PURE__*/_jsxs("div", {
@@ -90,8 +80,10 @@ var Item = /*#__PURE__*/memo(function (_ref2) {
         }
       }), link && /*#__PURE__*/_jsx("div", {
         className: styles.link,
-        children: /*#__PURE__*/_jsx(Link, {
-          to: link,
+        children: /*#__PURE__*/_jsx("a", {
+          href: link,
+          rel: "noreferrer",
+          target: openExternal ? '_blank' : undefined,
           children: "Read More"
         })
       })]

package/es/Hero/index.js

@@ -1,7 +1,6 @@
 import { GradientButton, Icon } from "./..";
 import { Button, ConfigProvider, Space } from 'antd';
 import { useResponsive } from 'antd-style';
-import { Link } from 'dumi';
 import * as LucideIcon from 'lucide-react';
 import { memo, useCallback } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
@@ -29,26 +28,23 @@ var Hero = /*#__PURE__*/memo(function (_ref) {
           type = _ref2.type;
         // @ts-ignore
         var ButtonIcon = icon && LucideIcon[icon];
-        return /*#__PURE__*/_jsx(Link, {
+        return /*#__PURE__*/_jsx("a", {
+          href: link,
           rel: "noreferrer",
           target: openExternal ? '_blank' : undefined,
-          to: link,
           children: type === 'primary' ? /*#__PURE__*/_jsx(GradientButton, {
+            icon: ButtonIcon && /*#__PURE__*/_jsx(Icon, {
+              icon: ButtonIcon
+            }),
             size: "large",
             children: text
           }, index) : /*#__PURE__*/_jsx(Button, {
+            icon: ButtonIcon && /*#__PURE__*/_jsx(Icon, {
+              icon: ButtonIcon
+            }),
             size: "large",
             type: "primary",
-            children: /*#__PURE__*/_jsxs(Space, {
-              align: "center",
-              children: [ButtonIcon && /*#__PURE__*/_jsx(Icon, {
-                icon: ButtonIcon,
-                size: {
-                  fontSize: 18,
-                  strokeWidth: 2
-                }
-              }), text]
-            })
+            children: text
           }, index)
         }, text);
       })

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -1,10 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Loading3QuartersOutlined as Loading } from '@ant-design/icons';
 import { useThemeMode } from 'antd-style';
+import { Loader2 } from 'lucide-react';
 import { memo, useEffect } from 'react';
 import { Center } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 import { useHighlight } from "../../hooks/useHighlight";
+import { Icon } from "../..";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -13,8 +14,7 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     language = _ref.language;
   var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    theme = _useStyles.theme;
+    styles = _useStyles.styles;
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
   var _useHighlight = useHighlight(function (s) {
@@ -43,11 +43,9 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
       className: styles.loading,
       gap: 8,
       horizontal: true,
-      children: [/*#__PURE__*/_jsx(Loading, {
-        spin: true,
-        style: {
-          color: theme.colorTextTertiary
-        }
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: Loader2,
+        spin: true
       }), "Highlighting..."]
     })]
   });

package/es/Icon/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["icon", "size", "style", "className", "spin"];
+var _excluded = ["icon", "size", "className", "spin"];
 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, useMemo } from 'react';
@@ -40,7 +40,6 @@ var calcSize = function calcSize(size) {
 var Icon = /*#__PURE__*/memo(function (_ref) {
   var icon = _ref.icon,
     size = _ref.size,
-    style = _ref.style,
     className = _ref.className,
     spin = _ref.spin,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -53,16 +52,16 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
     }, [size]),
     fontSize = _useMemo.fontSize,
     strokeWidth = _useMemo.strokeWidth;
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    className: cx(styles.icon, spin && styles.spin, className),
-    style: _objectSpread({
-      width: fontSize,
-      height: fontSize
-    }, style)
+  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+    className: cx('anticon', spin && styles.spin, className),
+    role: "img"
   }, props), {}, {
     children: /*#__PURE__*/_jsx(SvgIcon, {
+      focusable: false,
+      height: fontSize,
       size: fontSize,
-      strokeWidth: strokeWidth
+      strokeWidth: strokeWidth,
+      width: fontSize
     })
   }));
 });

package/es/Icon/style.d.ts

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

package/es/Icon/style.js

@@ -1,11 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 import { createStyles, keyframes } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   var spin = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n  "])));
   return {
-    icon: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "]))),
-    spin: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      animation: ", " 1s linear infinite;\n    "])), spin)
+    spin: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      animation: ", " 1s linear infinite;\n    "])), spin)
   };
 });

package/es/MessageModal/index.js

@@ -1,14 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { AimOutlined } from '@ant-design/icons';
 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 Markdown from "../Markdown";
-import MessageInput from "../MessageInput";
+import { Icon, Markdown, MessageInput } from "./..";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var MessageModal = /*#__PURE__*/memo(function (_ref) {
   var editing = _ref.editing,
     open = _ref.open,
@@ -33,10 +31,13 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
     expand = _useControlledState4[0],
     setExpand = _useControlledState4[1];
   return /*#__PURE__*/_jsx(Modal, {
-    cancelText: '关闭',
+    cancelText: 'Cancel',
     className: styles.modal,
+    closeIcon: /*#__PURE__*/_jsx(Icon, {
+      icon: X
+    }),
     footer: isEdit ? null : undefined,
-    okText: '编辑',
+    okText: 'Edit',
     onCancel: function onCancel() {
       return setExpand(false);
     },
@@ -44,11 +45,11 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
       setTyping(true);
     },
     open: expand,
-    title: /*#__PURE__*/_jsxs(Flexbox, {
+    title: /*#__PURE__*/_jsx(Flexbox, {
       align: 'center',
       gap: 4,
       horizontal: true,
-      children: [/*#__PURE__*/_jsx(AimOutlined, {}), "\u63D0\u793A\u8BCD"]
+      children: "Prompt"
     }),
     width: 800,
     children: isEdit ? /*#__PURE__*/_jsx(MessageInput, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.25.3",
+  "version": "1.25.5",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -82,7 +82,6 @@
     "chroma-js": "^2",
     "copy-to-clipboard": "^3",
     "dayjs": "^1",
-    "dumi": "^2",
     "fast-deep-equal": "^3",
     "immer": "^10",
     "leva": "^0",
@@ -99,7 +98,7 @@
     "react-rnd": "^10",
     "remark-gfm": "^3",
     "shiki-es": "^0",
-    "styled-components": "beta",
+    "styled-components": "latest",
     "ts-md5": "^1",
     "use-merge-value": "^1",
     "zustand": "^4",
@@ -118,6 +117,7 @@
     "commitlint": "^17",
     "concurrently": "^8",
     "cross-env": "^7",
+    "dumi": "^2",
     "dumi-assets-types": "^1",
     "dumi-theme-lobehub": "workspace:latest",
     "eslint": "^8",
@@ -138,7 +138,6 @@
   "peerDependencies": {
     "antd": ">=5",
     "antd-style": ">=3",
-    "dumi": ">=2",
     "react": ">=18",
     "react-dom": ">=18"
   },