@lobehub/ui 1.55.1 → 1.56.0

package/es/Avatar/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { type AvatarProps as AntAvatarProps } from 'antd';
 export interface AvatarProps extends AntAvatarProps {
+    animation?: boolean;
     /**
      * @description The URL or base64 data of the avatar image
      */

package/es/Avatar/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", "avatar", "title", "size", "shape", "background"];
+var _excluded = ["className", "avatar", "title", "animation", "size", "shape", "background"];
 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 { Avatar as AntAvatar } from 'antd';
@@ -13,6 +13,7 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
     avatar = _ref.avatar,
     title = _ref.title,
+    animation = _ref.animation,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 40 : _ref$size,
     _ref$shape = _ref.shape,
@@ -44,7 +45,8 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
   }, props), {}, {
     children: emoji ? /*#__PURE__*/_jsx(FluentEmoji, {
       emoji: emoji,
-      size: size * 0.8
+      size: size * 0.8,
+      type: animation ? 'anim' : '3d'
     }) : text === null || text === void 0 ? void 0 : text.toUpperCase().slice(0, 2)
   }));
 });

package/es/ChatItem/index.d.ts

@@ -1,5 +1,6 @@
 import { type AlertProps } from 'antd';
 import { ReactNode } from 'react';
+import { type EditableMessageProps } from "../EditableMessage";
 import { MetaData } from "../types/meta";
 export interface ChatItemProps {
     /**
@@ -59,6 +60,7 @@ export interface ChatItemProps {
      * @description Whether to show the title of the chat item
      */
     showTitle?: boolean;
+    text?: EditableMessageProps['text'];
     /**
      * @description The timestamp of the chat item
      */

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 = ["actions", "className", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "renderMessage"];
+var _excluded = ["actions", "className", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "alert", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "renderMessage", "text"];
 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';
@@ -35,6 +35,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     onEditingChange = _ref.onEditingChange,
     messageExtra = _ref.messageExtra,
     renderMessage = _ref.renderMessage,
+    text = _ref.text,
     properties = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       avatarSize: AVATAR_SIZE,
@@ -54,6 +55,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     editing: editing,
     onChange: onChange,
     onEditingChange: onEditingChange,
+    text: text,
     value: String(message || '...')
   });
   var messageContent = renderMessage ? renderMessage(content) : content;
@@ -63,6 +65,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     children: [/*#__PURE__*/_jsxs("div", {
       className: styles.avatarContainer,
       children: [/*#__PURE__*/_jsx(Avatar, {
+        animation: loading,
         avatar: avatar.avatar,
         background: avatar.backgroundColor,
         size: AVATAR_SIZE,

package/es/ChatItem/style.js

@@ -13,7 +13,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     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    "])), primary ? isDarkMode ? token.colorFillSecondary : rgba(token.colorPrimary, 0.08) : isDarkMode ? token.colorFillTertiary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
+  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFill : rgba(token.colorPrimary, 0.08) : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), title ? 0 : '6px');
   var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
@@ -22,7 +22,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     alert: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        span[role='img'] {\n          align-self: flex-start;\n          width: 16px;\n          height: 16px;\n          margin-top: 3px;\n        }\n\n        .ant-alert-description {\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n        }\n\n        &.ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n\n          .ant-alert-message {\n            font-size: 14px;\n            font-weight: 600;\n            text-align: justify;\n            word-break: break-all;\n            word-wrap: break-word;\n          }\n        }\n      "]))),
     avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     container: cx(type === 'pure' && pureContainerStylish, css(_templateObject7 || (_templateObject7 = _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          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut)),
-    editingContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        padding-block: 8px;\n        border: 1px solid ", ";\n\n        &:active,\n        &:hover {\n          border-color: ", ";\n        }\n      "])), token.colorPrimaryBorder, token.colorPrimary),
+    editingContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        padding: 8px 12px 12px;\n        border: 1px solid ", ";\n\n        &:active,\n        &:hover {\n          border-color: ", ";\n        }\n      "])), token.colorBorderSecondary, token.colorBorder),
     editingInput: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        min-height: 80px;\n      "]))),
     loading: css(_templateObject10 || (_templateObject10 = _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),
     message: cx(typeStylish, css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),

package/es/ChatList/ActionsBar.d.ts

@@ -2,6 +2,12 @@
 import { type ActionIconGroupProps } from "../ActionIconGroup";
 export interface ActionsBarProps extends ActionIconGroupProps {
     primary?: boolean;
+    text?: {
+        copy?: string;
+        delete?: string;
+        edit?: string;
+        regenerate?: string;
+    };
 }
 declare const ActionsBar: import("react").NamedExoticComponent<ActionsBarProps>;
 export default ActionsBar;

package/es/ChatList/ActionsBar.js

@@ -1,7 +1,7 @@
 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"];
+var _excluded = ["primary", "text", "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';
@@ -10,6 +10,7 @@ import ActionIconGroup from "../ActionIconGroup";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ActionsBar = /*#__PURE__*/memo(function (_ref) {
   var primary = _ref.primary,
+    text = _ref.text,
     _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
     _ref$dropdownMenu = _ref.dropdownMenu,
@@ -19,36 +20,36 @@ var ActionsBar = /*#__PURE__*/memo(function (_ref) {
     return [{
       icon: RotateCw,
       key: 'regenerate',
-      label: 'Regenerate'
-    }, {
-      icon: Copy,
-      key: 'copy',
-      label: 'Copy'
-    }, {
+      label: (text === null || text === void 0 ? void 0 : text.regenerate) || 'Regenerate'
+    }, primary ? {
       icon: Edit,
       key: 'edit',
-      label: 'Edit'
+      label: (text === null || text === void 0 ? void 0 : text.edit) || 'Edit'
+    } : {
+      icon: Copy,
+      key: 'copy',
+      label: (text === null || text === void 0 ? void 0 : text.copy) || 'Copy'
     }].concat(_toConsumableArray(items)).filter(Boolean);
   }, [primary, items]);
   var groupDropdownMenu = useMemo(function () {
     return [].concat(_toConsumableArray(dropdownMenu), [{
       icon: Edit,
       key: 'edit',
-      label: 'Edit'
+      label: (text === null || text === void 0 ? void 0 : text.edit) || 'Edit'
     }, {
       icon: Copy,
       key: 'copy',
-      label: 'Copy'
+      label: (text === null || text === void 0 ? void 0 : text.copy) || 'Copy'
     }, {
       icon: RotateCw,
       key: 'regenerate',
-      label: 'Regenerate'
+      label: (text === null || text === void 0 ? void 0 : text.regenerate) || 'Regenerate'
     }, {
       type: 'divider'
     }, {
       icon: Trash,
       key: 'delete',
-      label: 'Delete'
+      label: (text === null || text === void 0 ? void 0 : text.delete) || 'Delete'
     }]);
   }, [primary, dropdownMenu]);
   return /*#__PURE__*/_jsx(ActionIconGroup, _objectSpread({

package/es/ChatList/index.d.ts

@@ -1,9 +1,21 @@
 import { ReactNode } from 'react';
-import { ChatItemProps } from "../ChatItem";
+import { type ChatItemProps } from "../ChatItem";
 import type { DivProps } from "../types";
 import { ChatMessage } from "../types/chatMessage";
+import { type ActionsBarProps } from './ActionsBar';
 export type MessageExtra = (props: ChatMessage) => ReactNode;
 export type RenderMessage = (content: ReactNode, message: ChatMessage) => ReactNode;
+export interface ItemProps extends ChatMessage {
+    MessageExtra?: MessageExtra;
+    onActionClick?: (actionKey: string, messageId: string) => void;
+    onMessageChange?: (id: string, content: string) => void;
+    renderMessage?: RenderMessage;
+    showTitle?: boolean;
+    text?: ChatItemProps['text'] & ActionsBarProps['text'] & {
+        copySuccess?: string;
+    };
+    type: 'docs' | 'chat';
+}
 export interface ChatListProps extends DivProps {
     /**
      * @description Data of chat messages to be displayed
@@ -23,19 +35,12 @@ export interface ChatListProps extends DivProps {
      * @default false
      */
     showTitle?: ChatItemProps['showTitle'];
+    text?: ItemProps['text'];
     /**
      * @description Type of chat list
      * @default 'chat'
      */
     type?: 'docs' | 'chat';
 }
-export interface ItemProps extends ChatMessage {
-    MessageExtra?: MessageExtra;
-    onActionClick?: (actionKey: string, messageId: string) => void;
-    onMessageChange?: (id: string, content: string) => void;
-    renderMessage?: RenderMessage;
-    showTitle?: boolean;
-    type: 'docs' | 'chat';
-}
 declare const ChatList: import("react").NamedExoticComponent<ChatListProps>;
 export default ChatList;

package/es/ChatList/index.js

@@ -1,8 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["MessageExtra", "showTitle", "onActionClick", "onMessageChange", "type", "renderMessage"],
-  _excluded2 = ["onActionClick", "renderMessageExtra", "className", "data", "type", "showTitle", "onMessageChange", "renderMessage"];
+var _excluded = ["MessageExtra", "showTitle", "onActionClick", "onMessageChange", "type", "text", "renderMessage"],
+  _excluded2 = ["onActionClick", "renderMessageExtra", "className", "data", "type", "text", "showTitle", "onMessageChange", "renderMessage"];
 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 { App } from 'antd';
@@ -18,6 +18,7 @@ var Item = function Item(_ref) {
     _onActionClick = _ref.onActionClick,
     onMessageChange = _ref.onMessageChange,
     type = _ref.type,
+    text = _ref.text,
     renderMessage = _ref.renderMessage,
     item = _objectWithoutProperties(_ref, _excluded);
   var renderMessageExtra = MessageExtra ? /*#__PURE__*/_jsx(MessageExtra, _objectSpread({}, item)) : undefined;
@@ -37,18 +38,19 @@ var Item = function Item(_ref) {
           case 'copy':
             {
               copy(item.content);
-              message.success('复制成功');
+              message.success((text === null || text === void 0 ? void 0 : text.copySuccess) || 'Copy Success');
               break;
             }
           case 'edit':
             {
-              console.log('editing');
               setEditing(true);
+              break;
             }
         }
         _onActionClick === null || _onActionClick === void 0 ? void 0 : _onActionClick(actionKey, item.id);
       },
-      primary: item.role === 'user'
+      primary: item.role === 'user',
+      text: text
     }),
     avatar: item.meta,
     editing: editing,
@@ -62,6 +64,7 @@ var Item = function Item(_ref) {
     primary: item.role === 'user',
     renderMessage: renderMessage ? innerRenderMessage : undefined,
     showTitle: showTitle,
+    text: text,
     time: item.updateAt || item.createAt,
     type: type === 'chat' ? 'block' : 'pure'
   });
@@ -73,6 +76,7 @@ var ChatList = /*#__PURE__*/memo(function (_ref2) {
     data = _ref2.data,
     _ref2$type = _ref2.type,
     type = _ref2$type === void 0 ? 'chat' : _ref2$type,
+    text = _ref2.text,
     showTitle = _ref2.showTitle,
     onMessageChange = _ref2.onMessageChange,
     renderMessage = _ref2.renderMessage,
@@ -90,6 +94,7 @@ var ChatList = /*#__PURE__*/memo(function (_ref2) {
         onMessageChange: onMessageChange,
         renderMessage: renderMessage,
         showTitle: showTitle,
+        text: text,
         type: type
       }, item), item.id);
     })

package/es/CodeEditor/style.js

@@ -10,7 +10,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n\n      transition:\n        background-color 100ms ", ",\n        border-color 200ms ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorderSecondary, token.borderRadius, token.motionEaseOut, token.motionEaseOut, type === 'block' ? token.colorFillSecondary : token.colorFillQuaternary, token.colorBorder);
   return {
     container: cx(type !== 'pure' && typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          overflow-x: hidden;\n          overflow-y: auto;\n          width: 100%;\n          height: fit-content;\n        "])))),
-    editor: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        resize: ", ";\n        height: fit-content;\n        min-height: 100%;\n        font-family: ", " !important;\n\n        textarea {\n          min-height: 36px !important;\n        }\n\n        pre {\n          min-height: 36px !important;\n          word-wrap: break-word;\n          white-space: pre-wrap;\n\n          &.shiki {\n            margin: 0;\n          }\n        }\n      "])), resize ? 'vertical' : 'none', token.fontFamilyCode),
-    textarea: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow-x: hidden;\n        overflow-y: auto;\n\n        height: 100% !important;\n\n        color: transparent !important;\n\n        caret-color: ", ";\n\n        -webkit-text-fill-color: unset !important;\n\n        &::placeholder {\n          color: ", ";\n        }\n\n        &:focus {\n          border: none !important;\n          outline: none !important;\n          box-shadow: none !important;\n        }\n      "])), token.colorText, token.colorTextQuaternary)
+    editor: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        resize: ", ";\n        height: fit-content;\n        min-height: 100%;\n        font-family: ", " !important;\n\n        textarea {\n          min-height: 36px !important;\n        }\n\n        pre {\n          min-height: 36px !important;\n\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n          white-space: pre-wrap;\n\n          &.shiki {\n            margin: 0;\n          }\n        }\n      "])), resize ? 'vertical' : 'none', token.fontFamilyCode),
+    textarea: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow-x: hidden;\n        overflow-y: auto;\n\n        height: 100% !important;\n\n        color: transparent !important;\n        text-align: justify !important;\n        word-break: break-all !important;\n        word-wrap: break-word !important;\n\n        caret-color: ", ";\n\n        -webkit-text-fill-color: unset !important;\n\n        &::placeholder {\n          color: ", ";\n        }\n\n        &:focus {\n          border: none !important;\n          outline: none !important;\n          box-shadow: none !important;\n        }\n      "])), token.colorText, token.colorTextQuaternary)
   };
 });

package/es/FluentEmoji/genEmojiUrl.d.ts

@@ -0,0 +1,7 @@
+interface EmojiApi {
+    path: string;
+    pkg: string;
+    version?: string;
+}
+export declare const genEmojiUrl: (type: 'elem' | 'aliyun', config: EmojiApi) => string;
+export {};

package/es/FluentEmoji/genEmojiUrl.js

@@ -0,0 +1,17 @@
+var ELEM_API = 'https://npm.elemecdn.com';
+var ALIYUN_API = 'https://registry.npmmirror.com';
+var genElemUrl = function genElemUrl(_ref) {
+  var pkg = _ref.pkg,
+    version = _ref.version,
+    path = _ref.path;
+  return "".concat(ELEM_API, "/").concat(pkg).concat(version ? "@".concat(version) : '', "/").concat(path);
+};
+var genAliyunUrl = function genAliyunUrl(_ref2) {
+  var pkg = _ref2.pkg,
+    version = _ref2.version,
+    path = _ref2.path;
+  return "".concat(ALIYUN_API, "/").concat(pkg).concat(version ? "/".concat(version) : '', "/files/").concat(path);
+};
+export var genEmojiUrl = function genEmojiUrl(type, config) {
+  return type === 'elem' ? genElemUrl(config) : genAliyunUrl(config);
+};

package/es/FluentEmoji/index.d.ts

@@ -12,9 +12,9 @@ export interface FluentEmojiProps extends DivProps {
     size?: number;
     /**
      * @description The type of the FluentUI emoji set to be used
-     * @default 'modern'
+     * @default '3d'
      */
-    type?: 'modern' | 'flat' | 'high-contrast';
+    type?: 'modern' | 'flat' | 'high-contrast' | 'anim' | '3d' | 'pure';
 }
 declare const FluentEmoji: import("react").NamedExoticComponent<FluentEmojiProps>;
 export default FluentEmoji;

package/es/FluentEmoji/index.js

@@ -3,7 +3,8 @@ 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 { kebabCase } from 'lodash-es';
-import { memo, useEffect, useState } from 'react';
+import { memo, useMemo, useState } from 'react';
+import { genEmojiUrl } from "./genEmojiUrl";
 import { getEmojiNameByCharacter } from "../utils/getEmojiByCharacter";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -12,33 +13,52 @@ var FluentEmoji = /*#__PURE__*/memo(function (_ref) {
     className = _ref.className,
     style = _ref.style,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'modern' : _ref$type,
+    type = _ref$type === void 0 ? '3d' : _ref$type,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 40 : _ref$size;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     loadingFail = _useState2[0],
     setLoadingFail = _useState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    emojiUrl = _useState4[0],
-    setEmojiUrl = _useState4[1];
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  useEffect(function () {
-    if (emojiUrl !== null && emojiUrl !== void 0 && emojiUrl[emoji] || (emojiUrl === null || emojiUrl === void 0 ? void 0 : emojiUrl[emoji]) === 'none') return;
+  var emojiUrl = useMemo(function () {
+    if (type === 'pure') return;
     var emojiName = getEmojiNameByCharacter(emoji);
-    if (emojiName) {
-      setEmojiUrl(_objectSpread(_objectSpread({}, emojiUrl), {}, _defineProperty({}, emoji, "https://npm.elemecdn.com/fluentui-emoji/icons/".concat(type, "/").concat(kebabCase(emojiName), ".svg"))));
-    } else {
-      setEmojiUrl(_objectSpread(_objectSpread({}, emojiUrl), {}, _defineProperty({}, emoji, 'none')));
+    if (!emojiName) return;
+    switch (type) {
+      case 'modern':
+      case 'flat':
+      case 'high-contrast':
+        {
+          return genEmojiUrl('elem', {
+            path: "icons/".concat(type, "/").concat(kebabCase(emojiName), ".svg"),
+            pkg: 'fluentui-emoji'
+          });
+        }
+      case 'anim':
+        {
+          return genEmojiUrl('aliyun', {
+            path: "assets/".concat(emojiName, ".webp"),
+            pkg: '@lobehub/assets-emoji-anim',
+            version: '1.0.0'
+          });
+        }
+      case '3d':
+        {
+          return genEmojiUrl('aliyun', {
+            path: "assets/".concat(emojiName, ".webp"),
+            pkg: '@lobehub/assets-emoji',
+            version: '1.3.0'
+          });
+        }
     }
-  }, [emoji, emojiUrl]);
-  if ((emojiUrl === null || emojiUrl === void 0 ? void 0 : emojiUrl[emoji]) === 'none' || loadingFail) return /*#__PURE__*/_jsx("div", {
+  }, [type]);
+  if (type === 'pure' || !emojiUrl || loadingFail) return /*#__PURE__*/_jsx("div", {
     className: cx(styles.container, className),
     style: _objectSpread({
-      fontSize: size,
+      fontSize: size * 0.9,
       height: size,
       width: size
     }, style),
@@ -57,7 +77,7 @@ var FluentEmoji = /*#__PURE__*/memo(function (_ref) {
       onError: function onError() {
         return setLoadingFail(true);
       },
-      src: emojiUrl === null || emojiUrl === void 0 ? void 0 : emojiUrl[emoji],
+      src: emojiUrl,
       width: "100%"
     })
   });

package/es/FluentEmoji/style.js

@@ -5,7 +5,7 @@ export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n      line-height: 1;\n      text-align: center;\n    "]))),
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      line-height: 1;\n      text-align: center;\n    "]))),
     loading: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: absolute;\n      inset: 0;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: 100%;\n      height: 100%;\n\n      color: ", ";\n    "])), token.colorText)
   };
 });

package/es/MessageInput/index.js

@@ -8,6 +8,7 @@ import { Button } from 'antd';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import CodeEditor from "../CodeEditor";
+import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,7 +33,11 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     temporarySystemRole = _useState2[0],
     setRole = _useState2[1];
-  return /*#__PURE__*/_jsxs(_Fragment, {
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    gap: 8,
     children: [/*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
       gap: 8,
       style: {
@@ -41,7 +46,7 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
       }
     }, props), {}, {
       children: /*#__PURE__*/_jsx(CodeEditor, {
-        className: textareaClassname,
+        className: cx(styles, textareaClassname),
         language: "md",
         onValueChange: function onValueChange(value) {
           setRole(value);
@@ -52,6 +57,7 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
           height: height,
           minHeight: '100%'
         }, textareaStyle),
+        textareaClassName: cx(styles, textareaClassname),
         type: type,
         value: temporarySystemRole
       })

package/es/MessageInput/style.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;

package/es/MessageInput/style.js

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 1.8;\n  "])));
+});

package/es/Snippet/style.js

@@ -7,6 +7,6 @@ export var useStyles = createStyles(function (_ref, type) {
     token = _ref.token;
   var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border: 1px solid ", ";\n  "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder);
   return {
-    container: cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n\n        overflow: hidden;\n        display: flex;\n        gap: 8px;\n        align-items: center;\n\n        max-width: 100%;\n        padding: 0 8px 0 12px;\n\n        border-radius: ", "px;\n\n        transition: background-color 100ms ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n\n        .ant-highlighter-shiki {\n          position: relative;\n          overflow: hidden;\n          flex: 1;\n        }\n\n        .prism-code {\n          background: none !important;\n        }\n\n        pre {\n          overflow-x: auto !important;\n          overflow-y: hidden !important;\n          display: flex;\n          align-items: center;\n\n          width: 100%;\n          height: 36px !important;\n          margin: 0 !important;\n\n          line-height: 1;\n\n          background: none !important;\n        }\n\n        code[class*='language-'] {\n          background: none !important;\n        }\n      "])), token.borderRadius, token.motionEaseOut, token.colorFillTertiary))
+    container: cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n\n        overflow: hidden;\n        display: flex;\n        gap: 8px;\n        align-items: center;\n\n        max-width: 100%;\n        height: 38px;\n        padding: 0 8px 0 12px;\n\n        border-radius: ", "px;\n\n        transition: background-color 100ms ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n\n        .ant-highlighter-shiki {\n          position: relative;\n          overflow: hidden;\n          flex: 1;\n        }\n\n        .prism-code {\n          background: none !important;\n        }\n\n        pre {\n          overflow-x: auto !important;\n          overflow-y: hidden !important;\n          display: flex;\n          align-items: center;\n\n          width: 100%;\n          height: 36px !important;\n          margin: 0 !important;\n\n          line-height: 1;\n\n          background: none !important;\n        }\n\n        code[class*='language-'] {\n          background: none !important;\n        }\n      "])), token.borderRadius, token.motionEaseOut, token.colorFillTertiary))
   };
 });

package/es/StroyBook/style.js

@@ -7,7 +7,7 @@ export var useStyles = createStyles(function (_ref, noPadding) {
     responsive = _ref.responsive;
   return {
     editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: stretch;\n      justify-content: stretch;\n\n      width: inherit;\n      min-height: inherit;\n\n      ", " {\n        flex-direction: column;\n      }\n    "])), responsive.mobile),
-    left: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      overflow: auto;\n      display: flex;\n      flex: 1;\n      align-items: center;\n      justify-content: center;\n\n      ", "\n    "])), !noPadding && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        padding: 40px 24px;\n      "])))),
+    left: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      overflow: auto;\n      display: flex;\n      flex: 1;\n      align-items: center;\n      justify-content: center;\n\n      position: relative;\n\n      ", "\n    "])), !noPadding && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        padding: 40px 24px;\n      "])))),
     leva: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      --leva-sizes-controlWidth: 66%;\n      --leva-colors-elevation1: ", ";\n      --leva-colors-elevation2: transparent;\n      --leva-colors-elevation3: ", ";\n      --leva-colors-accent1: ", ";\n      --leva-colors-accent2: ", ";\n      --leva-colors-accent3: ", ";\n      --leva-colors-highlight1: ", ";\n      --leva-colors-highlight2: ", ";\n      --leva-colors-highlight3: ", ";\n      --leva-colors-vivid1: ", ";\n      --leva-shadows-level1: unset;\n      --leva-shadows-level2: unset;\n      --leva-fonts-mono: ", ";\n\n      overflow: auto;\n      width: 100%;\n      height: 100%;\n      padding: 6px 0;\n\n      > div {\n        background: transparent;\n\n        > div {\n          background: transparent;\n        }\n      }\n\n      input:checked + label > svg {\n        stroke: ", ";\n      }\n\n      button {\n        --leva-colors-accent2: ", ";\n      }\n    "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.fontFamilyCode, token.colorBgLayout, token.colorFillSecondary),
     right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background: ", ";\n\n      ", " {\n        .draggable-panel-fixed {\n          width: 100% !important;\n        }\n      }\n    "])), token.colorBgLayout, responsive.mobile)
   };

package/es/TokenTag/index.d.ts

@@ -5,6 +5,10 @@ export interface TokenTagProps extends DivProps {
      * @description Maximum value for the token
      */
     maxValue: number;
+    text?: {
+        overload?: string;
+        tokens?: string;
+    };
     /**
      * @description Current value of the token
      */

package/es/TokenTag/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", "maxValue", "value"];
+var _excluded = ["className", "maxValue", "value", "text"];
 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 { forwardRef } from 'react';
@@ -12,6 +12,7 @@ var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     maxValue = _ref.maxValue,
     value = _ref.value,
+    text = _ref.text,
     props = _objectWithoutProperties(_ref, _excluded);
   var valueLeft = maxValue - value;
   var percent = valueLeft / maxValue;
@@ -37,7 +38,7 @@ var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     children: [/*#__PURE__*/_jsx(FluentEmoji, {
       emoji: emoji,
       size: ICON_SIZE
-    }), valueLeft > 0 ? "Tokens ".concat(valueLeft) : "Overload"]
+    }), valueLeft > 0 ? (text === null || text === void 0 ? void 0 : text.tokens) || "Tokens ".concat(valueLeft) : (text === null || text === void 0 ? void 0 : text.overload) || 'Overload']
   }));
 });
 export default TokenTag;

package/es/index.d.ts

@@ -56,4 +56,4 @@ export { default as Toc, type TocProps } from './Toc';
 export { default as TokenTag, type TokenTagProps } from './TokenTag';
 export { default as Tooltip, type TooltipProps } from './Tooltip';
 export type * from './types';
-export { getEmoji } from './utils/getEmojiByCharacter';
+export { getEmoji, getEmojiNameByCharacter } from './utils/getEmojiByCharacter';

package/es/index.js

@@ -54,4 +54,4 @@ export { default as ThemeSwitch } from "./ThemeSwitch";
 export { default as Toc } from "./Toc";
 export { default as TokenTag } from "./TokenTag";
 export { default as Tooltip } from "./Tooltip";
-export { getEmoji } from "./utils/getEmojiByCharacter";
+export { getEmoji, getEmojiNameByCharacter } from "./utils/getEmojiByCharacter";

package/es/utils/getEmojiByCharacter.js

@@ -1,5 +1,5 @@
+import emojilib from '@lobehub/emojilib';
 import emojiRegex from 'emoji-regex';
-import emojilib from 'emojilib';
 export var getEmoji = function getEmoji(emoji) {
   var _emoji$match;
   var regex = emojiRegex();
@@ -7,9 +7,8 @@ export var getEmoji = function getEmoji(emoji) {
   return pureEmoji;
 };
 export var getEmojiNameByCharacter = function getEmojiNameByCharacter(emoji) {
-  var _EmojiLab$pureEmoji;
   var pureEmoji = getEmoji(emoji);
   if (!pureEmoji) return;
   var EmojiLab = emojilib;
-  return EmojiLab === null || EmojiLab === void 0 ? void 0 : (_EmojiLab$pureEmoji = EmojiLab[pureEmoji]) === null || _EmojiLab$pureEmoji === void 0 ? void 0 : _EmojiLab$pureEmoji[0];
+  return EmojiLab === null || EmojiLab === void 0 ? void 0 : EmojiLab[pureEmoji];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.55.1",
+  "version": "1.56.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -73,6 +73,7 @@
     "@babel/runtime": "^7",
     "@floating-ui/react": "^0",
     "@giscus/react": "^2",
+    "@lobehub/emojilib": "latest",
     "@react-spring/web": "^9",
     "ahooks": "^3",
     "antd": "^5",
@@ -80,7 +81,6 @@
     "copy-to-clipboard": "^3",
     "dayjs": "^1",
     "emoji-regex": "^10",
-    "emojilib": "^3",
     "fast-deep-equal": "^3",
     "immer": "^10",
     "leva": "^0",