@lobehub/ui 1.22.0 → 1.23.0

package/es/ActionIconGroup/index.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import { ActionIconProps } from "..";
+import { type MenuProps } from 'antd';
 import { DivProps } from "../types";
 export interface ActionIconGroupProps extends DivProps {
     direction?: 'row' | 'column';
-    items: ActionIconProps[];
+    dropdownMenu?: MenuProps['items'];
+    items?: ActionIconProps[];
     /**
      * @description The position of the tooltip relative to the target
      * @enum ["top","left","right","bottom","topLeft","topRight","bottomLeft","bottomRight","leftTop","leftBottom","rightTop","rightBottom"]

package/es/ActionIconGroup/index.js

@@ -1,9 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["type", "items", "placement", "spotlight", "direction"];
+var _excluded = ["type", "items", "placement", "spotlight", "direction", "dropdownMenu"];
 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 { ActionIcon, Spotlight } from "./..";
+import { Dropdown } from 'antd';
+import { MoreHorizontal } from 'lucide-react';
 import { memo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,26 +13,40 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var ActionIconGroup = /*#__PURE__*/memo(function (_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'block' : _ref$type,
-    items = _ref.items,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
     placement = _ref.placement,
     _ref$spotlight = _ref.spotlight,
     spotlight = _ref$spotlight === void 0 ? true : _ref$spotlight,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    _ref$dropdownMenu = _ref.dropdownMenu,
+    dropdownMenu = _ref$dropdownMenu === void 0 ? [] : _ref$dropdownMenu,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       direction: direction,
       type: type
     }),
     styles = _useStyles.styles;
+  var tooltipsPlacement = placement || (direction === 'column' ? 'right' : 'top');
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: styles.container
   }, props), {}, {
     children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), items.map(function (item, index) {
       return /*#__PURE__*/_jsx(ActionIcon, _objectSpread({
-        placement: placement || (direction === 'column' ? 'right' : 'top'),
+        placement: tooltipsPlacement,
         size: "small"
       }, item), index);
+    }), dropdownMenu && /*#__PURE__*/_jsx(Dropdown, {
+      menu: {
+        items: dropdownMenu
+      },
+      trigger: ['click'],
+      children: /*#__PURE__*/_jsx(ActionIcon, {
+        icon: MoreHorizontal,
+        placement: tooltipsPlacement,
+        size: "small"
+      }, "more")
     })]
   }));
 });

package/es/ActionIconGroup/style.js

@@ -8,7 +8,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     cx = _ref.cx;
   var direction = _ref2.direction,
     type = _ref2.type;
-  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder);
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), type === 'block' ? token.colorFillTertiary : token.colorFillQuaternary, type === 'block' ? 'transparent' : token.colorBorder);
   return {
     container: cx(type !== 'pure' && typeStylish, stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n\n          padding: 2px;\n\n          border-radius: ", "px;\n        "])), direction, token.borderRadius))
   };

package/es/Avatar/index.js

@@ -17,10 +17,10 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
     background = _ref.background,
     props = _objectWithoutProperties(_ref, _excluded);
-  var isImage = avatar && ['/', 'http', 'data:'].some(function (i) {
+  var isImage = Boolean(avatar && ['/', 'http', 'data:'].some(function (i) {
     return avatar.startsWith(i);
-  });
-  var isEmoji = avatar && !isImage && /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g.test(avatar);
+  }));
+  var isEmoji = Boolean(avatar && !isImage && /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g.test(avatar));
   var _useStyles = useStyles({
       background: background,
       size: size,

package/es/Avatar/style.d.ts

@@ -1,6 +1,6 @@
 export declare const useStyles: (props?: {
     background?: string | undefined;
-    isEmoji: boolean;
+    isEmoji?: boolean | undefined;
     size: number;
 } | undefined) => import("antd-style").ReturnStyles<{
     avatar: import("antd-style").SerializedStyles;

package/es/ChatItem/index.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
 import { type AlertProps } from 'antd';
+import { ReactNode } from 'react';
 import type { DivProps } from "../types";
 import { MetaData } from "../types/meta";
 export interface ChatItemProps extends DivProps {
+    actions?: ReactNode;
     /**
      * @description Whether to show alert and alert config
      */

package/es/ChatItem/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "title", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time"];
+var _excluded = ["actions", "className", "title", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time"];
 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 { Alert } from 'antd';
@@ -13,7 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var AVATAR_SIZE = 40;
 var ChatItem = /*#__PURE__*/memo(function (_ref) {
-  var className = _ref.className,
+  var actions = _ref.actions,
+    className = _ref.className,
     title = _ref.title,
     primary = _ref.primary,
     _ref$borderSpacing = _ref.borderSpacing,
@@ -35,7 +36,8 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
       title: title,
       primary: primary,
       avatarSize: AVATAR_SIZE,
-      showTitle: showTitle
+      showTitle: showTitle,
+      borderSpacing: borderSpacing
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
@@ -65,7 +67,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
       children: [/*#__PURE__*/_jsxs("div", {
         className: cx(styles.name, 'chat-item-name'),
         children: [showTitle ? avatar.title || 'untitled' : null, time && /*#__PURE__*/_jsx("span", {
-          className: cx(type === 'pure' && !showTitle && styles.time, 'chat-item-time'),
+          className: "chat-item-time",
           children: formatTime(time)
         })]
       }), alert ? /*#__PURE__*/_jsx(Alert, _objectSpread({
@@ -75,6 +77,9 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
         children: /*#__PURE__*/_jsx(Markdown, {
           children: String(message || '...')
         })
+      }), /*#__PURE__*/_jsx("div", {
+        className: cx(styles.actions, 'chat-item-actions'),
+        children: actions
       })]
     }), borderSpacing && /*#__PURE__*/_jsx("div", {
       style: {

package/es/ChatItem/style.d.ts

@@ -1,5 +1,6 @@
 export declare const useStyles: (props?: {
     avatarSize: number;
+    borderSpacing: boolean;
     placement?: "left" | "right" | undefined;
     primary?: boolean | undefined;
     showTitle?: boolean | undefined;
@@ -11,6 +12,6 @@ export declare const useStyles: (props?: {
     avatarContainer: import("antd-style").SerializedStyles;
     messageContainer: import("antd-style").SerializedStyles;
     name: import("antd-style").SerializedStyles;
-    time: string;
     message: string;
+    actions: string;
 }>;

package/es/ChatItem/style.js

@@ -1,28 +1,28 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var cx = _ref.cx,
     css = _ref.css,
-    token = _ref.token,
-    stylish = _ref.stylish;
+    token = _ref.token;
   var placement = _ref2.placement,
     type = _ref2.type,
     title = _ref2.title,
     primary = _ref2.primary,
     avatarSize = _ref2.avatarSize,
-    showTitle = _ref2.showTitle;
-  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n\n      &:active {\n        background-color: ", ";\n      }\n    "])), primary ? token.colorFillSecondary : token.colorFillTertiary, token.borderRadiusLG, token.motionEaseOut, primary ? token.colorFill : token.colorFillSecondary);
+    showTitle = _ref2.showTitle,
+    borderSpacing = _ref2.borderSpacing;
+  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? token.colorFillSecondary : token.colorFillTertiary, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), title ? 0 : '6px');
-  var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n    "])), token.borderRadiusLG, token.motionEaseOut, token.colorFillTertiary, token.colorFillSecondary);
+  var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
   return {
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n\n          .chat-item-time {\n            display: none;\n          }\n\n          &:hover {\n            .chat-item-time {\n              display: inline-block;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse')),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n\n          .chat-item-time,\n          .chat-item-actions {\n            display: none;\n          }\n\n          &:hover {\n            .chat-item-time {\n              display: inline-block;\n            }\n\n            .chat-item-actions {\n              display: flex;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse')),
     loading: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
     avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     messageContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n\n        .ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n        }\n      "]))),
     name: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 4px;\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right'),
-    time: cx(stylish.blur, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          padding: 4px 6px;\n\n          line-height: 1;\n\n          background: ", ";\n          border-radius: ", "px;\n        "])), token.colorFillQuaternary, token.borderRadius)),
-    message: cx(typeStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n        "]))))
+    message: cx(typeStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
+    actions: cx(css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: absolute;\n          display: flex;\n          align-items: flex-start;\n          justify-content: ", ";\n        "])), placement === 'left' ? 'flex-end' : 'flex-start'), type === 'block' && borderSpacing ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n              right: ", ";\n              bottom: 0;\n              left: ", ";\n              transform: translateX(", ");\n            "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', placement === 'left' ? '100%' : '-100%') : css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n              right: ", ";\n              bottom: ", ";\n              left: ", ";\n            "])), placement === 'left' ? '0' : 'unset', type === 'block' ? '-40px' : '-32px', placement === 'right' ? '0' : 'unset'))
   };
 });

package/es/ChatList/ActionsBar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type ActionIconGroupProps } from "../index";
+export interface ActionsBarProps extends ActionIconGroupProps {
+    primary?: boolean;
+}
+declare const ActionsBar: import("react").NamedExoticComponent<ActionsBarProps>;
+export default ActionsBar;

package/es/ChatList/ActionsBar.js

@@ -0,0 +1,72 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["primary", "items", "dropdownMenu"];
+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 { Copy, Edit, RotateCw, Trash } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { ActionIconGroup, Icon } from "./..";
+import { jsx as _jsx } from "react/jsx-runtime";
+var ActionsBar = /*#__PURE__*/memo(function (_ref) {
+  var primary = _ref.primary,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$dropdownMenu = _ref.dropdownMenu,
+    dropdownMenu = _ref$dropdownMenu === void 0 ? [] : _ref$dropdownMenu,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var groupItems = useMemo(function () {
+    return [primary ? {
+      icon: Edit,
+      title: 'Edit',
+      onClick: function onClick() {
+        return console.log('click Edit');
+      }
+    } : {
+      icon: RotateCw,
+      title: 'Regenerate',
+      onClick: function onClick() {
+        return console.log('click Regenerate');
+      }
+    }].concat(_toConsumableArray(items)).filter(Boolean);
+  }, [primary, items]);
+  var groupDropdownMenu = useMemo(function () {
+    return dropdownMenu.concat([{
+      key: 'Edit',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: Edit,
+        size: "small"
+      }),
+      label: 'Edit'
+    }, {
+      key: 'Copy',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: Copy,
+        size: "small"
+      }),
+      label: 'Copy'
+    }, {
+      key: 'Regenerate',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: RotateCw,
+        size: "small"
+      }),
+      label: 'Regenerate'
+    }, {
+      type: 'divider'
+    }, {
+      key: 'Delete',
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: Trash,
+        size: "small"
+      }),
+      label: 'Delete'
+    }]).filter(Boolean);
+  }, [primary, dropdownMenu]);
+  return /*#__PURE__*/_jsx(ActionIconGroup, _objectSpread({
+    dropdownMenu: groupDropdownMenu,
+    items: groupItems,
+    type: "ghost"
+  }, props));
+});
+export default ActionsBar;

package/es/ChatList/index.js

@@ -5,6 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 { ChatItem } from "./..";
+import ActionsBar from "./ActionsBar";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChatList = /*#__PURE__*/memo(function (_ref) {
@@ -22,6 +23,9 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
   }, props), {}, {
     children: data.map(function (item) {
       return /*#__PURE__*/_jsx(ChatItem, {
+        actions: /*#__PURE__*/_jsx(ActionsBar, {
+          primary: item.role === 'user'
+        }),
         avatar: item.meta,
         borderSpacing: type === 'chat',
         message: item.content,

package/es/Highlighter/index.d.ts

@@ -21,6 +21,11 @@ export interface HighlighterProps extends DivProps {
      * @default true
      */
     showLanguage?: boolean;
+    /**
+     * @description Whether add spotlight background
+     * @default false
+     */
+    spotlight?: boolean;
     /**
      * @description The theme of the code block
      * @default 'light'

package/es/Highlighter/index.js

@@ -1,5 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "language", "className", "style", "theme", "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 { CopyButton, Spotlight } from "./..";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,16 +21,21 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     _ref$showLanguage = _ref.showLanguage,
     showLanguage = _ref$showLanguage === void 0 ? true : _ref$showLanguage,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'block' : _ref$type;
+    type = _ref$type === void 0 ? 'block' : _ref$type,
+    spotlight = _ref.spotlight,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(type),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var container = cx(styles.container, className);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: container,
     "data-code-type": "highlighter",
-    style: style,
-    children: [copyable && /*#__PURE__*/_jsx(CopyButton, {
+    style: style
+  }, props), {}, {
+    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {
+      size: 240
+    }), copyable && /*#__PURE__*/_jsx(CopyButton, {
       className: styles.button,
       content: children,
       placement: "left"
@@ -37,6 +47,6 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
       theme: theme,
       children: children.trim()
     })]
-  });
+  }));
 });
 export default Highlighter;

package/es/Highlighter/style.js

@@ -9,10 +9,10 @@ export var useStyles = createStyles(function (_ref, type) {
   var prefix = "".concat(prefixCls, "-highlighter");
   var buttonHoverCls = "".concat(prefix, "-hover-btn");
   var langHoverCls = "".concat(prefix, "-hover-lang");
-  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, type === 'pure' ? 'transparent' : token.colorFillTertiary);
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, type === 'block' ? token.colorFillTertiary : token.colorFillQuaternary);
   return {
-    container: cx(prefix, typeStylish, css(_templateObject2 || (_templateObject2 = _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")),
-    button: cx(buttonHoverCls, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 51;\n          top: 8px;\n          right: 8px;\n\n          opacity: 0;\n        "])))),
+    container: cx(prefix, type !== 'pure' && typeStylish, css(_templateObject2 || (_templateObject2 = _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")),
+    button: cx(buttonHoverCls, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 51;\n          top: ", ";\n          right: ", ";\n\n          opacity: 0;\n        "])), type === 'pure' ? 0 : '8px', type === 'pure' ? 0 : '8px')),
     lang: cx(langHoverCls, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 50;\n          right: 8px;\n          bottom: 8px;\n\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.colorTextPlaceholder))
   };
 });

package/es/Markdown/CodeBlock.js

@@ -20,6 +20,7 @@ var Code = /*#__PURE__*/memo(function (props) {
   return /*#__PURE__*/_jsx(Highlighter, {
     className: styles,
     language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
+    spotlight: true,
     theme: theme.appearance,
     type: "block",
     children: children instanceof Array ? children[0] : children

package/es/Spotlight/style.js

@@ -11,7 +11,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     size = _ref2.size;
   var spotlightX = ((_offset$x = offset === null || offset === void 0 ? void 0 : offset.x) !== null && _offset$x !== void 0 ? _offset$x : 0) + 'px';
   var spotlightY = ((_offset$y = offset === null || offset === void 0 ? void 0 : offset.y) !== null && _offset$y !== void 0 ? _offset$y : 0) + 'px';
-  var spotlightOpacity = outside ? '0' : isDarkMode ? '.1' : '0.07';
+  var spotlightOpacity = outside ? '0' : '.1';
   var spotlightSize = size + 'px';
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 1;\n      inset: 0;\n\n      opacity: ", ";\n      background: radial-gradient(\n        ", " circle at ", " ", ",\n        ", ",\n        transparent\n      );\n      border-radius: inherit;\n\n      transition: all 0.2s;\n    "])), spotlightOpacity, spotlightSize, spotlightX, spotlightY, token.colorText);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 1;\n      inset: 0;\n\n      opacity: ", ";\n      background: radial-gradient(\n        ", " circle at ", " ", ",\n        ", ",\n        ", "\n      );\n      border-radius: inherit;\n\n      transition: all 0.2s;\n    "])), spotlightOpacity, spotlightSize, spotlightX, spotlightY, isDarkMode ? token.colorText : '#fff', !isDarkMode ? token.colorTextQuaternary : 'transparent');
 });

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  html,body {\n    --font-settings: \"cv01\", \"tnum\", \"kern\";\n    --font-variations: \"opsz\" auto, tabular-nums;\n\n    overflow-x: hidden;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-tap-highlight-color: transparent;\n  }\n  \n\n  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  ::-webkit-scrollbar {\n\t  width: 0;\n\t  height: 4px;\n\t  background-color: transparent;\n\n\t  &-thumb {\n\t\t  background-color: transparent;\n\t\t  border-radius: 4px;\n\t\t  transition: background-color 500ms ", ";\n\t  }\n\n\t  &-corner {\n\t\t  display: none;\n\t  }\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n  \n  code {\n\t  font-family: ", " !important;\n\n\t  * {\n\t\t  font-family: inherit !important;\n\t  }\n  }\n\n  *:hover, *:focus {\n\t  ::-webkit-scrollbar {\n\t\t  &-thumb {\n\t\t\t  background-color: ", ";\n\t\t  }\n\t  }\n  }\n"])), function (_ref) {
+var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\", \"tnum\", \"kern\";\n    --font-variations: \"opsz\" auto, tabular-nums;\n\n    overflow-x: hidden;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n\n  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar {\n\t  width: 0;\n\t  height: 4px;\n\t  background-color: transparent;\n\n\t  &-thumb {\n\t\t  background-color: transparent;\n\t\t  border-radius: 4px;\n\t\t  transition: background-color 500ms ", ";\n\t  }\n\n\t  &-corner {\n\t\t  display: none;\n\t  }\n  }\n\n  #root {\n\t  min-height: 100vh;\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  code {\n\t  font-family: ", " !important;\n\n\t  * {\n\t\t  font-family: inherit !important;\n\t  }\n  }\n\n  *:hover, *:focus {\n\t  ::-webkit-scrollbar {\n\t\t  &-thumb {\n\t\t\t  background-color: ", ";\n\t\t  }\n\t  }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
 }, function (_ref2) {
@@ -15,12 +15,15 @@ var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _tagge
   return theme.colorBgLayout;
 }, function (_ref5) {
   var theme = _ref5.theme;
-  return theme.motionEaseOut;
+  return theme.yellow9;
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme.fontFamilyCode;
+  return theme.motionEaseOut;
 }, function (_ref7) {
   var theme = _ref7.theme;
+  return theme.fontFamilyCode;
+}, function (_ref8) {
+  var theme = _ref8.theme;
   return theme.colorFill;
 });
 export default GlobalStyle;

package/es/styles/algorithms/generateCustomStylish.js

@@ -6,6 +6,6 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
     isDarkMode = _ref.isDarkMode;
   return {
     blur: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
-    markdown: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\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      pre {\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\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      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius)
+    markdown: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\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      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\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      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius)
   };
 };

package/package.json

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