@lobehub/ui 1.63.0 → 1.65.0

package/es/ChatInputArea/Action.d.ts

@@ -4,6 +4,7 @@ export interface ActionProps {
      * @description Actions to be displayed in the input area
      */
     actions?: ReactNode;
+    actionsRight?: ReactNode;
     expand?: boolean;
     onExpandChange?: (expand: boolean) => void;
 }

package/es/ChatInputArea/Action.js

@@ -16,6 +16,7 @@ var useStyles = createStyles(function (_ref) {
 });
 var Action = /*#__PURE__*/memo(function (_ref2) {
   var actions = _ref2.actions,
+    actionsRight = _ref2.actionsRight,
     expand = _ref2.expand,
     onExpandChange = _ref2.onExpandChange;
   var _useStyles = useStyles(),
@@ -28,12 +29,12 @@ var Action = /*#__PURE__*/memo(function (_ref2) {
     children: [/*#__PURE__*/_jsx("div", {
       className: styles.actionLeft,
       children: actions
-    }), /*#__PURE__*/_jsx("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       className: styles.actionsRight,
-      children: /*#__PURE__*/_jsx(ActionIcon, {
+      children: [actionsRight, /*#__PURE__*/_jsx(ActionIcon, {
         icon: expand ? Minimize2 : Maximize2,
         onClick: handleExpandClick
-      })
+      })]
     })]
   });
 });

package/es/ChatInputArea/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["text", "textareaClassName", "style", "textareaStyle", "minHeight", "className", "actions", "footer", "expand", "placeholder", "onExpandChange", "onSend", "defaultValue", "loading", "disabled", "onInputChange", "onPressEnter", "onCompositionStart", "onCompositionEnd", "onBlur", "onChange", "textareaId"];
+var _excluded = ["text", "textareaClassName", "style", "textareaStyle", "minHeight", "className", "actions", "footer", "expand", "placeholder", "onExpandChange", "onSend", "defaultValue", "loading", "disabled", "onInputChange", "onPressEnter", "onCompositionStart", "onCompositionEnd", "onBlur", "onChange", "textareaId", "actionsRight"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Button } from 'antd';
@@ -39,6 +39,7 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _onChange = _ref.onChange,
     _ref$textareaId = _ref.textareaId,
     textareaId = _ref$textareaId === void 0 ? 'lobe-chat-input-area' : _ref$textareaId,
+    actionsRight = _ref.actionsRight,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
@@ -63,6 +64,7 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, style),
     children: [/*#__PURE__*/_jsx(Action, {
       actions: actions,
+      actionsRight: actionsRight,
       expand: expand,
       onExpandChange: onExpandChange
     }), /*#__PURE__*/_jsxs("div", {

package/es/TokenTag/index.d.ts

@@ -4,14 +4,16 @@ export interface TokenTagProps extends DivProps {
     /**
      * @default 'left'
      */
-    displayMode?: 'left' | 'used';
+    displayMode?: 'remained' | 'used';
     /**
      * @description Maximum value for the token
      */
     maxValue: number;
     text?: {
         overload?: string;
+        remained?: string;
         tokens?: string;
+        used?: string;
     };
     /**
      * @description Current value of the token

package/es/TokenTag/index.js

@@ -3,7 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["className", "displayMode", "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';
+import { useHover } from 'ahooks';
+import { forwardRef, useRef } from 'react';
 import FluentEmoji from "../FluentEmoji";
 import { ICON_SIZE, useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,11 +12,13 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$displayMode = _ref.displayMode,
-    displayMode = _ref$displayMode === void 0 ? 'left' : _ref$displayMode,
+    displayMode = _ref$displayMode === void 0 ? 'remained' : _ref$displayMode,
     maxValue = _ref.maxValue,
     value = _ref.value,
     text = _ref.text,
     props = _objectWithoutProperties(_ref, _excluded);
+  var reference = useRef(ref);
+  var isHovering = useHover(reference);
   var valueLeft = maxValue - value;
   var percent = valueLeft / maxValue;
   var type;
@@ -35,12 +38,12 @@ var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     cx = _useStyles.cx;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className),
-    ref: ref
+    ref: reference
   }, props), {}, {
     children: [/*#__PURE__*/_jsx(FluentEmoji, {
       emoji: emoji,
       size: ICON_SIZE
-    }), valueLeft > 0 ? (text === null || text === void 0 ? void 0 : text.tokens) || "Tokens ".concat(displayMode === 'left' ? valueLeft : value) : (text === null || text === void 0 ? void 0 : text.overload) || 'Overload']
+    }), valueLeft > 0 ? [displayMode === 'remained' ? (text === null || text === void 0 ? void 0 : text.remained) || 'Remained' : (text === null || text === void 0 ? void 0 : text.used) || 'Used', displayMode === 'remained' ? valueLeft : value, isHovering ? (text === null || text === void 0 ? void 0 : text.tokens) || 'Tokens' : ''].join(' ') : (text === null || text === void 0 ? void 0 : text.overload) || 'Overload']
   }));
 });
 export default TokenTag;

package/es/TokenTag/style.js

@@ -26,6 +26,6 @@ export var useStyles = createStyles(function (_ref, type) {
       }
   }
   return {
-    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))
+    container: cx(percentStyle, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        user-select: none;\n\n        overflow: hidden;\n        display: flex;\n        flex: 0;\n        gap: 4px;\n        align-items: center;\n\n        min-width: fit-content;\n        height: ", "px;\n        padding: 0 ", "px 0 ", "px;\n\n        font-family: ", ";\n        font-size: 13px;\n        line-height: 1;\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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.63.0",
-  "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
+  "version": "1.65.0",
+  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
     "components",