@lobehub/ui 1.28.0 → 1.29.1

package/es/Logo/index.js

@@ -6,10 +6,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import Divider from "./Divider";
-import LogoFlat from "./LogoFlat";
 import LogoHighContrast from "./LogoHighContrast";
 import LogoText from "./LogoText";
-import { useStyles } from "./style";
+import { LOGO_3D, LOGO_FLAT, 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 +31,7 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
       {
         return /*#__PURE__*/_jsx("img", _objectSpread({
           alt: "lobehub",
-          src: "https://npm.elemecdn.com/@lobehub/assets/logo/logo-3d.webp",
+          src: LOGO_3D,
           style: _objectSpread({
             height: size,
             width: size
@@ -41,12 +40,14 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
       }
     case 'flat':
       {
-        return /*#__PURE__*/_jsx(LogoFlat, _objectSpread({
+        return /*#__PURE__*/_jsx("img", {
+          alt: "lobehub",
+          src: LOGO_FLAT,
           style: _objectSpread({
             height: size,
             width: size
           }, style)
-        }, props));
+        });
       }
     case 'high-contrast':
       {
@@ -71,11 +72,11 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
         logoComponent = /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("img", {
             alt: "lobehub",
-            src: "https://npm.elemecdn.com/@lobehub/assets/logo/logo-3d.webp",
-            style: _objectSpread({
+            src: LOGO_3D,
+            style: {
               height: size,
               width: size
-            }, style)
+            }
           }), /*#__PURE__*/_jsx(LogoText, {
             style: {
               height: size,

package/es/Logo/style.d.ts

@@ -1,3 +1,5 @@
+export declare const LOGO_3D = "https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp";
+export declare const LOGO_FLAT = "https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-flat.svg";
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     extraTitle: import("antd-style").SerializedStyles;
     flexCenter: import("antd-style").SerializedStyles;

package/es/Logo/style.js

@@ -1,6 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import { createStyles } from 'antd-style';
+export var LOGO_3D = 'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp';
+export var LOGO_FLAT = 'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-flat.svg';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   return {

package/es/MessageInput/index.d.ts

@@ -1,36 +1,36 @@
 /// <reference types="react" />
 import { ButtonProps } from 'antd';
 import { type TextAreaProps } from "../Input";
-/**
- * @title MessageInputProps
- * @category Props
- * @description MessageInput 组件的 Props
- */
 export interface MessageInputProps {
+    /**
+     * @description Additional className to apply to the component.
+     */
     className?: string;
     /**
-     * @title 默认值
-     * @description 输入框的默认值
+     * @description The default value of the input box.
      */
     defaultValue?: string;
+    /**
+     * @description The height of the input box.
+     */
     height?: number;
     /**
-     * @title 取消回调函数
-     * @description 用户点击取消按钮后的回调函数
+     * @description Callback function triggered when user clicks on the cancel button.
      */
     onCancel?: () => void;
     /**
-     * @title 确认回调函数
-     * @description 用户点击确认按钮后的回调函数
-     * @param text - 用户输入的文本
+     * @description Callback function triggered when user clicks on the confirm button.
+     * @param text - The text input by the user.
      */
     onConfirm?: (text: string) => void;
     /**
-     * @title 渲染按钮
-     * @description 自定义渲染底部按钮
-     * @param text - 用户输入的文本
+     * @description Custom rendering of the bottom buttons.
+     * @param text - The text input by the user.
      */
     renderButtons?: (text: string) => ButtonProps[];
+    /**
+     * @description The type of the input box.
+     */
     type?: TextAreaProps['type'];
 }
 declare const MessageInput: import("react").NamedExoticComponent<MessageInputProps>;

package/es/MessageInput/index.js

@@ -7,12 +7,6 @@ import { cx } from 'antd-style';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { TextArea } from "../Input";
-
-/**
- * @title MessageInputProps
- * @category Props
- * @description MessageInput 组件的 Props
- */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

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    overflow-y: auto;\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-overflow-scrolling:touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  body {\n    overflow-x: hidden;\n    height: 100vh;\n  }\n\n  #root {\n    min-height: 100vh;\n  }\n\n  code {\n    font-family: ", " !important;\n\n    span {\n      font-family: ", " !important;\n    }\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n  }\n\n  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  @media only screen and (min-width: 574px) {\n    * {\n      ::-webkit-scrollbar {\n        cursor: pointer;\n        width: 4px;\n        height: 4px;\n        background-color: transparent;\n      }\n\n      ::-webkit-scrollbar-thumb {\n        cursor: pointer;\n        background-color: transparent;\n        border-radius: 2px;\n        transition: background-color 500ms ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ::-webkit-scrollbar-corner {\n        display: none;\n        width: 0;\n        height: 0;\n      }\n\n      &:hover {\n        ::-webkit-scrollbar-thumb {\n          background-color: ", ";\n        }\n      }\n    }\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    overflow-y: auto;\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-overflow-scrolling:touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  body {\n    overflow-x: hidden;\n    height: 100vh;\n  }\n\n  #root {\n    min-height: 100vh;\n  }\n\n  code {\n    font-family: ", " !important;\n\n    span {\n      font-family: ", " !important;\n    }\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n\n\t  -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  @media only screen and (min-width: 574px) {\n    * {\n      ::-webkit-scrollbar {\n        cursor: pointer;\n        width: 4px;\n        height: 4px;\n        background-color: transparent;\n      }\n\n      ::-webkit-scrollbar-thumb {\n        cursor: pointer;\n        background-color: transparent;\n        border-radius: 2px;\n        transition: background-color 500ms ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ::-webkit-scrollbar-corner {\n        display: none;\n        width: 0;\n        height: 0;\n      }\n\n      &:hover {\n        ::-webkit-scrollbar-thumb {\n          background-color: ", ";\n        }\n      }\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
 }, function (_ref2) {

package/es/ThemeProvider/index.d.ts

@@ -30,6 +30,10 @@ export interface ThemeProviderProps {
      * @description The mode of the theme (light or dark)
      */
     themeMode?: ThemeMode;
+    /**
+     * @description Webfont loader css strings
+     */
+    webfonts?: string[];
 }
 declare const ThemeProvider: import("react").NamedExoticComponent<ThemeProviderProps>;
 export default ThemeProvider;

package/es/ThemeProvider/index.js

@@ -10,6 +10,7 @@ import { lobeCustomStylish, lobeCustomToken, lobeTheme } from "../styles";
 import GlobalStyle from "./GlobalStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     themeMode = _ref.themeMode,
@@ -20,35 +21,37 @@ var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
     _ref$customToken = _ref.customToken,
     _customToken = _ref$customToken === void 0 ? function () {
       return {};
-    } : _ref$customToken;
+    } : _ref$customToken,
+    _ref$webfonts = _ref.webfonts,
+    webfonts = _ref$webfonts === void 0 ? ['https://npm.elemecdn.com/@lobehub/webfont-mono/css/index.css', 'https://npm.elemecdn.com/@lobehub/webfont-harmony-sans/css/index.css', 'https://npm.elemecdn.com/@lobehub/webfont-harmony-sans-sc/css/index.css'] : _ref$webfonts;
   setupStyled({
     ThemeContext: ThemeContext
   });
-  return /*#__PURE__*/_jsx(StyleProvider, {
-    speedy: process.env.NODE_ENV === 'production',
-    children: /*#__PURE__*/_jsxs(AntdThemeProvider, {
-      customStylish: function customStylish(theme) {
-        return _objectSpread(_objectSpread({}, lobeCustomStylish(theme)), _customStylish(theme));
-      },
-      customToken: function customToken(theme) {
-        return _objectSpread(_objectSpread({}, lobeCustomToken(theme)), _customToken(theme));
-      },
-      theme: lobeTheme,
-      themeMode: themeMode,
-      children: [/*#__PURE__*/_jsx(FontLoader, {
-        url: "https://npm.elemecdn.com/@lobehub/assets@1.2.0/webfonts/css/hack-nerd-font-mono.css"
-      }), /*#__PURE__*/_jsx(FontLoader, {
-        url: "https://npm.elemecdn.com/@lobehub/assets@1.2.0/webfonts/css/harmonyos-sans.css"
-      }), /*#__PURE__*/_jsx(FontLoader, {
-        url: "https://npm.elemecdn.com/@lobehub/assets@1.2.0/webfonts/css/harmonyos-sans-sc.css"
-      }), /*#__PURE__*/_jsx(GlobalStyle, {}), /*#__PURE__*/_jsx(App, {
-        style: {
-          minHeight: 'inherit',
-          width: 'inherit'
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [webfonts && webfonts.map(function (webfont, index) {
+      return /*#__PURE__*/_jsx(FontLoader, {
+        url: webfont
+      }, index);
+    }), /*#__PURE__*/_jsx(StyleProvider, {
+      speedy: process.env.NODE_ENV === 'production',
+      children: /*#__PURE__*/_jsxs(AntdThemeProvider, {
+        customStylish: function customStylish(theme) {
+          return _objectSpread(_objectSpread({}, lobeCustomStylish(theme)), _customStylish(theme));
         },
-        children: children
-      })]
-    })
+        customToken: function customToken(theme) {
+          return _objectSpread(_objectSpread({}, lobeCustomToken(theme)), _customToken(theme));
+        },
+        theme: lobeTheme,
+        themeMode: themeMode,
+        children: [/*#__PURE__*/_jsx(GlobalStyle, {}), /*#__PURE__*/_jsx(App, {
+          style: {
+            minHeight: 'inherit',
+            width: 'inherit'
+          },
+          children: children
+        })]
+      })
+    })]
   });
 });
 export default ThemeProvider;

package/es/Toc/TocMobile.d.ts

@@ -1,16 +1,46 @@
 /// <reference types="react" />
 import { AnchorProps } from 'antd';
 export interface AnchorItem {
+    /**
+     * @description The children of the anchor item
+     */
     children?: AnchorItem[];
+    /**
+     * @description The ID of the anchor item
+     */
     id: string;
+    /**
+     * @description The title of the anchor item
+     */
     title: string;
 }
 export interface TocMobileProps {
+    /**
+     * @description The active key of the TocMobile component
+     * @default undefined
+     */
     activeKey?: string;
+    /**
+     * @description The function to get the container of the anchor
+     */
     getContainer?: AnchorProps['getContainer'];
+    /**
+     * @description The height of the header
+     * @default 64
+     */
     headerHeight?: number;
+    /**
+     * @description The array of anchor items to be displayed
+     */
     items: AnchorItem[];
+    /**
+     * @description The function to be called when the active key changes
+     */
     onChange?: (activeKey: string) => void;
+    /**
+     * @description The width of the toc
+     * @default 176
+     */
     tocWidth?: number;
 }
 export declare const mapItems: (items: AnchorItem[]) => {

package/es/Toc/index.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
 import { type TocMobileProps } from './TocMobile';
 export interface TocProps extends TocMobileProps {
+    /**
+     * @description Whether the component is being rendered on a mobile device or not
+     * @default false
+     */
     isMobile?: boolean;
 }
 declare const Toc: import("react").NamedExoticComponent<TocProps>;

package/es/TokenTag/index.d.ts

@@ -1,7 +1,13 @@
 /// <reference types="react" />
 import { DivProps } from "../types";
 export interface TokenTagProps extends DivProps {
+    /**
+     * @description Maximum value for the token
+     */
     maxValue: number;
+    /**
+     * @description Current value of the token
+     */
     value: number;
 }
 declare const TokenTag: import("react").NamedExoticComponent<TokenTagProps>;

package/es/TokenTag/index.js

@@ -4,7 +4,8 @@ var _excluded = ["className", "maxValue", "value"];
 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 { useStyles } from "./style";
+import FluentEmoji from "../FluentEmoji";
+import { ICON_SIZE, useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var TokenTag = /*#__PURE__*/memo(function (_ref) {
@@ -32,9 +33,9 @@ var TokenTag = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className)
   }, props), {}, {
-    children: [/*#__PURE__*/_jsx("span", {
-      className: styles.emoji,
-      children: emoji
+    children: [/*#__PURE__*/_jsx(FluentEmoji, {
+      emoji: emoji,
+      size: ICON_SIZE
     }), valueLeft > 0 ? "Tokens ".concat(valueLeft) : "Overload"]
   }));
 });

package/es/TokenTag/style.d.ts

@@ -1,4 +1,4 @@
+export declare const ICON_SIZE = 20;
 export declare const useStyles: (props?: "normal" | "low" | "overload" | undefined) => import("antd-style").ReturnStyles<{
     container: string;
-    emoji: import("antd-style").SerializedStyles;
 }>;

package/es/TokenTag/style.js

@@ -1,8 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { createStyles } from 'antd-style';
 var HEIGHT = 28;
-var ICON_SIZE = 20;
+export var ICON_SIZE = 20;
 export var useStyles = createStyles(function (_ref, type) {
   var cx = _ref.cx,
     css = _ref.css,
@@ -26,7 +26,6 @@ export var useStyles = createStyles(function (_ref, type) {
       }
   }
   return {
-    container: cx(percentStyle, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        display: flex;\n        gap: 4px;\n        align-items: center;\n\n        height: ", "px;\n        padding: 0 ", "px 0 ", "px;\n\n        background: ", ";\n        border-radius: ", "px;\n      "])), HEIGHT, HEIGHT - ICON_SIZE, (HEIGHT - ICON_SIZE) / 2, token.colorFillSecondary, HEIGHT / 2)),
-    emoji: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      font-size: ", "px;\n    "])), ICON_SIZE)
+    container: cx(percentStyle, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        user-select: none;\n\n        overflow: hidden;\n        display: flex;\n        gap: 4px;\n        align-items: center;\n\n        height: ", "px;\n        padding: 0 ", "px 0 ", "px;\n\n        font-family: ", ";\n\n        background: ", ";\n        border-radius: ", "px;\n      "])), HEIGHT, (HEIGHT - ICON_SIZE) * 1.2, (HEIGHT - ICON_SIZE) / 2, token.fontFamilyCode, token.colorFillSecondary, HEIGHT / 2))
   };
 });

package/es/components/ControlInput.d.ts

@@ -1,9 +1,21 @@
 /// <reference types="react" />
 import { InputProps } from "../Input";
 export interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {
+    /**
+     * @description Callback function that is triggered when the input value changes
+     */
     onChange?: (value: string) => void;
+    /**
+     * @description Callback function that is triggered when the input value has stopped changing
+     */
     onChangeEnd?: (value: string) => void;
+    /**
+     * @description Callback function that is triggered when the input value is changing
+     */
     onValueChanging?: (value: string) => void;
+    /**
+     * @description The initial value of the input
+     */
     value?: string;
 }
 export declare const ControlInput: import("react").NamedExoticComponent<ControlInputProps>;

package/es/hooks/useHighlight.d.ts

@@ -5,20 +5,20 @@ export declare const languageMap: readonly ["javascript", "js", "jsx", "json", "
  */
 interface Store {
     /**
-     * @title 将代码转化为 HTML 字符串
-     * @param text - 代码文本
-     * @param language - 代码语言
-     * @param isDarkMode - 是否为暗黑模式
-     * @returns HTML 字符串
+     * @title Convert code to HTML string
+     * @param text - The code text
+     * @param language - The language of the code
+     * @param isDarkMode - Whether it's in dark mode or not
+     * @returns HTML string
      */
     codeToHtml: (text: string, language: string, isDarkMode: boolean) => string;
     /**
-     * @title 高亮器对象
+     * @title Highlighter object
      */
     highlighter?: Highlighter;
     /**
-     * @title 初始化高亮器对象
-     * @returns 初始化 Promise 对象
+     * @title Initialize the highlighter object
+     * @returns Initialization promise object
      */
     initHighlighter: () => Promise<void>;
 }

package/es/index.d.ts

@@ -8,13 +8,13 @@ export { default as ChatItem, type ChatItemProps } from './ChatItem';
 export { default as ChatList, type ChatListProps } from './ChatList';
 export { default as ColorScales, type ColorScalesProps } from './ColorScales';
 export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
-export { default as Conversation, type ConversationProps } from './Conversation';
 export { default as CopyButton, type CopyButtonProps } from './CopyButton';
 export { default as DraggablePanel, type DraggablePanelProps } from './DraggablePanel';
 export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
 export { default as EditableMessageList, type EditableMessageListProps, } from './EditableMessageList';
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { type FeatureItem, default as Features, type FeaturesProps } from './Features';
+export { default as FluentEmoji, type FluentEmojiProps } from './FluentEmoji';
 export { default as FontLoader, type FontLoaderProps } from './FontLoader';
 export { default as Footer, type FooterProps } from './Footer';
 export { default as GradientButton, type GradientButtonProps } from './GradientButton';

package/es/index.js

@@ -7,13 +7,13 @@ export { default as ChatItem } from "./ChatItem";
 export { default as ChatList } from "./ChatList";
 export { default as ColorScales } from "./ColorScales";
 export { default as ContextMenu } from "./ContextMenu";
-export { default as Conversation } from "./Conversation";
 export { default as CopyButton } from "./CopyButton";
 export { default as DraggablePanel } from "./DraggablePanel";
 export { default as EditableMessage } from "./EditableMessage";
 export { default as EditableMessageList } from "./EditableMessageList";
 export { default as EditableText } from "./EditableText";
 export { default as Features } from "./Features";
+export { default as FluentEmoji } from "./FluentEmoji";
 export { default as FontLoader } from "./FontLoader";
 export { default as Footer } from "./Footer";
 export { default as GradientButton } from "./GradientButton";

package/es/styles/theme/base.js

@@ -1,7 +1,7 @@
 var FONT_EMOJI = "\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Apple Color Emoji\",\"Twemoji Mozilla\",\"Noto Color Emoji\",\"Android Emoji\"";
 var FONT_EN = "\"HarmonyOS Sans\",\"Segoe UI\",\"SF Pro Display\",-apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,\"Open Sans\",\"Helvetica Neue\",sans-serif";
 var FONT_CN = "\"HarmonyOS Sans SC\",\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft Yahei UI\",\"Microsoft Yahei\",\"Source Han Sans CN\",sans-serif";
-var FONT_CODE = "\"Hack Nerd Font Mono\",ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace";
+var FONT_CODE = "Hack,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace";
 export var baseToken = {
   borderRadius: 5,
   borderRadiusLG: 8,

package/es/utils/getEmojiByCharacter.d.ts

@@ -0,0 +1,2 @@
+export declare const getEmoji: (emoji: string) => string | undefined;
+export declare const getEmojiNameByCharacter: (emoji: string) => string | undefined;

package/es/utils/getEmojiByCharacter.js

@@ -0,0 +1,15 @@
+import emojiRegex from 'emoji-regex';
+import emojilib from 'emojilib';
+export var getEmoji = function getEmoji(emoji) {
+  var _emoji$match;
+  var regex = emojiRegex();
+  var pureEmoji = (_emoji$match = emoji.match(regex)) === null || _emoji$match === void 0 ? void 0 : _emoji$match[0];
+  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];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.28.0",
+  "version": "1.29.1",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -73,7 +73,6 @@
     "@ant-design/colors": "^7",
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
-    "@dqbd/tiktoken": "^1",
     "@floating-ui/react": "^0",
     "@react-spring/web": "^9",
     "ahooks": "^3",
@@ -81,6 +80,8 @@
     "chroma-js": "^2",
     "copy-to-clipboard": "^3",
     "dayjs": "^1",
+    "emoji-regex": "^10",
+    "emojilib": "^3",
     "fast-deep-equal": "^3",
     "immer": "^10",
     "leva": "^0",

package/es/Chat/store/selectors.d.ts

@@ -1,9 +0,0 @@
-import type { ChatStore } from './store';
-export declare const chatSelectors: {
-    agentTokenCount: (s: ChatStore) => number;
-    disableInput: (s: ChatStore) => boolean;
-    messagesTokenCount: (s: ChatStore) => number;
-    messagesTokens: (s: ChatStore) => number[];
-    totalTokenCount: (s: ChatStore) => number;
-    totalTokens: (s: ChatStore) => number[];
-};

package/es/Chat/store/selectors.js

@@ -1,44 +0,0 @@
-import { get_encoding } from '@dqbd/tiktoken';
-var tiktoken = get_encoding('cl100k_base');
-var encode = function encode(text) {
-  if (!text) return [];
-  var tokens = tiktoken.encode(text);
-  return tokens;
-};
-var disableInputSel = function disableInputSel(s) {
-  return s.changingSystemRole;
-};
-var messagesTokens = function messagesTokens(s) {
-  return encode(s.messages.map(function (m) {
-    return m.content;
-  }).join(''));
-};
-var agentContentTokens = function agentContentTokens(s) {
-  return encode(s.messages.filter(function (s) {
-    return s.role === 'system';
-  }).map(function (c) {
-    return c.content;
-  }).join('') || '');
-};
-var totalTokens = function totalTokens(s) {
-  return encode(s.messages.map(function (m) {
-    return m.content;
-  }).join(''));
-};
-var totalTokenCount = function totalTokenCount(s) {
-  return totalTokens(s).length;
-};
-var agentTokenCount = function agentTokenCount(s) {
-  return agentContentTokens(s).length;
-};
-var messagesTokenCount = function messagesTokenCount(s) {
-  return messagesTokens(s).length;
-};
-export var chatSelectors = {
-  agentTokenCount: agentTokenCount,
-  disableInput: disableInputSel,
-  messagesTokenCount: messagesTokenCount,
-  messagesTokens: messagesTokens,
-  totalTokenCount: totalTokenCount,
-  totalTokens: totalTokens
-};

package/es/Conversation/App.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export interface AppProps {
-    /**
-     * @description Whether to include system messages in the chat.
-     * @default true
-     */
-    includeSystem?: boolean;
-    /**
-     * @description Whether the component is in readonly mode.
-     * @default false
-     */
-    readonly?: boolean;
-}
-declare const _default: import("react").NamedExoticComponent<AppProps>;
-export default _default;

package/es/Conversation/App.js

@@ -1,43 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Typography } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-import { useStore } from "../Chat/store";
-import ChatList from "./ChatList";
-import InputArea from "./InputArea";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var ChatContainer = function ChatContainer(_ref) {
-  var readonly = _ref.readonly,
-    _ref$includeSystem = _ref.includeSystem,
-    includeSystem = _ref$includeSystem === void 0 ? true : _ref$includeSystem;
-  var _useStore = useStore(function (s) {
-      return [!s.changingSystemRole, s.title, s.description];
-    }, isEqual),
-    _useStore2 = _slicedToArray(_useStore, 3),
-    showInput = _useStore2[0],
-    title = _useStore2[1],
-    description = _useStore2[2];
-  if (readonly) return /*#__PURE__*/_jsx(ChatList, {
-    includeSystem: includeSystem,
-    readonly: true
-  });
-  return /*#__PURE__*/_jsxs(Flexbox, {
-    gap: 24,
-    height: '100%',
-    width: '100%',
-    children: [title || description ? /*#__PURE__*/_jsxs(Flexbox, {
-      children: [/*#__PURE__*/_jsx(Typography.Title, {
-        level: 4,
-        children: title
-      }), /*#__PURE__*/_jsx(Typography.Text, {
-        type: 'secondary',
-        children: description
-      })]
-    }) : undefined, /*#__PURE__*/_jsx(ChatList, {
-      includeSystem: includeSystem
-    }), showInput ? /*#__PURE__*/_jsx(InputArea, {}) : undefined]
-  });
-};
-export default /*#__PURE__*/memo(ChatContainer);

package/es/Conversation/ChatList/MessageItem/Content.d.ts

@@ -1,8 +0,0 @@
-import { FC } from 'react';
-import { ChatMessage } from "../../../Chat/types";
-export interface ContentProps extends Pick<ChatMessage, 'content' | 'role' | 'error'> {
-    index: number;
-    loading: boolean;
-}
-declare const Content: FC<ContentProps>;
-export default Content;