@lobehub/ui 2.19.0 → 2.20.0

package/es/awesome/TypewriterEffect/TypewriterEffect.js

@@ -1,7 +1,7 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["sentences", "as", "typingSpeed", "initialDelay", "pauseDuration", "deletingSpeed", "loop", "className", "color", "showCursor", "hideCursorWhileTyping", "cursorCharacter", "cursorClassName", "cursorColor", "cursorBlinkDuration", "cursorStyle", "textColors", "variableSpeed", "onSentenceComplete", "startOnVisible", "reverseMode"];
+var _excluded = ["sentences", "as", "typingSpeed", "initialDelay", "pauseDuration", "deletingSpeed", "deletePauseDuration", "loop", "className", "color", "showCursor", "hideCursorWhileTyping", "cursorCharacter", "cursorClassName", "cursorColor", "cursorBlinkDuration", "cursorFade", "cursorStyle", "textColors", "variableSpeed", "onSentenceComplete", "startOnVisible", "reverseMode"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -33,6 +33,8 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
     pauseDuration = _ref$pauseDuration === void 0 ? 2000 : _ref$pauseDuration,
     _ref$deletingSpeed = _ref.deletingSpeed,
     deletingSpeed = _ref$deletingSpeed === void 0 ? 50 : _ref$deletingSpeed,
+    _ref$deletePauseDurat = _ref.deletePauseDuration,
+    deletePauseDuration = _ref$deletePauseDurat === void 0 ? 0 : _ref$deletePauseDurat,
     _ref$loop = _ref.loop,
     loop = _ref$loop === void 0 ? true : _ref$loop,
     _ref$className = _ref.className,
@@ -48,6 +50,8 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
     cursorColor = _ref.cursorColor,
     _ref$cursorBlinkDurat = _ref.cursorBlinkDuration,
     cursorBlinkDuration = _ref$cursorBlinkDurat === void 0 ? 0.8 : _ref$cursorBlinkDurat,
+    _ref$cursorFade = _ref.cursorFade,
+    cursorFade = _ref$cursorFade === void 0 ? true : _ref$cursorFade,
     _ref$cursorStyle = _ref.cursorStyle,
     cursorStyle = _ref$cursorStyle === void 0 ? 'pipe' : _ref$cursorStyle,
     _ref$textColors = _ref.textColors,
@@ -82,6 +86,10 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     isVisible = _useState10[0],
     setIsVisible = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isDeletePausing = _useState12[0],
+    setIsDeletePausing = _useState12[1];
   var containerRef = useRef(null);
   var textArray = useMemo(function () {
     return Array.isArray(sentences) ? sentences : [sentences];
@@ -122,6 +130,16 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
     var timeout;
     var currentText = textArray[currentTextIndex];
     var processedText = reverseMode ? currentText.split('').reverse().join('') : currentText;
+
+    // Handle delete pause state
+    if (isDeletePausing) {
+      timeout = setTimeout(function () {
+        setIsDeletePausing(false);
+      }, deletePauseDuration);
+      return function () {
+        return clearTimeout(timeout);
+      };
+    }
     var executeTypingAnimation = function executeTypingAnimation() {
       if (isDeleting) {
         if (displayedText === '') {
@@ -136,7 +154,10 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
             return (prev + 1) % textArray.length;
           });
           setCurrentCharIndex(0);
-          timeout = setTimeout(function () {}, pauseDuration);
+          if (deletePauseDuration > 0) {
+            setIsDeletePausing(true);
+            return;
+          }
         } else {
           timeout = setTimeout(function () {
             setDisplayedText(function (prev) {
@@ -170,7 +191,7 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
     return function () {
       return clearTimeout(timeout);
     };
-  }, [currentCharIndex, displayedText, isDeleting, typingSpeed, deletingSpeed, pauseDuration, textArray, currentTextIndex, loop, initialDelay, isVisible, reverseMode, variableSpeed, onSentenceComplete, getRandomSpeed]);
+  }, [currentCharIndex, displayedText, isDeleting, isDeletePausing, typingSpeed, deletingSpeed, deletePauseDuration, pauseDuration, textArray, currentTextIndex, loop, initialDelay, isVisible, reverseMode, variableSpeed, onSentenceComplete, getRandomSpeed]);
   var getCursorStyle = function getCursorStyle() {
     if (cursorCharacter) return styles.cursorCustom;
     switch (cursorStyle) {
@@ -192,7 +213,14 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
         }
     }
   };
-  var shouldHideCursor = hideCursorWhileTyping && (currentCharIndex < textArray[currentTextIndex].length || isDeleting);
+  var isTyping = currentCharIndex < textArray[currentTextIndex].length && !isDeleting;
+  var isAfterTyping = currentCharIndex === textArray[currentTextIndex].length && !isDeleting;
+  var shouldHideCursor = function () {
+    if (hideCursorWhileTyping === true) return true; // 完全隐藏
+    if (hideCursorWhileTyping === 'typing') return isTyping || isDeleting; // 打字和删除时隐藏
+    if (hideCursorWhileTyping === 'afterTyping') return isAfterTyping; // 打字完成后隐藏
+    return false;
+  }();
   var textColor = getCurrentTextColor();
   var finalCursorColor = getCurrentCursorColor();
 
@@ -225,11 +253,11 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
           children: char === ' ' ? "\xA0" : char
         }, "".concat(currentTextIndex, "-").concat(index));
       })
-    }), showCursor && /*#__PURE__*/_jsx(motion.span, {
+    }), showCursor && (cursorFade ? /*#__PURE__*/_jsx(motion.span, {
       animate: {
-        opacity: 1
+        opacity: shouldHideCursor ? 0 : 1
       },
-      className: cx(getCursorStyle(), cursorClassName, shouldHideCursor && styles.cursorHidden),
+      className: cx(getCursorStyle(), cursorClassName),
       initial: {
         opacity: 0
       },
@@ -237,13 +265,20 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
         backgroundColor: finalCursorColor
       } : undefined,
       transition: {
-        duration: cursorBlinkDuration,
+        duration: shouldHideCursor ? 0.2 : cursorBlinkDuration,
         ease: 'easeInOut',
-        repeat: Number.POSITIVE_INFINITY,
+        repeat: shouldHideCursor ? 0 : Number.POSITIVE_INFINITY,
         repeatType: 'reverse'
       },
       children: cursorCharacter
-    })]
+    }) : /*#__PURE__*/_jsx("span", {
+      className: cx(getCursorStyle(), cursorClassName),
+      style: {
+        backgroundColor: finalCursorColor,
+        opacity: shouldHideCursor ? 0 : 1
+      },
+      children: cursorCharacter
+    }))]
   }));
 });
 TypewriterEffect.displayName = 'TypewriterEffect';

package/es/awesome/TypewriterEffect/type.d.ts

@@ -32,21 +32,35 @@ export interface TypewriterEffectProps {
      * Cursor color (defaults to color if not provided)
      */
     cursorColor?: string;
+    /**
+     * Cursor fade animation
+     * @default true
+     */
+    cursorFade?: boolean;
     /**
      * Style of the cursor (ignored if cursorCharacter is provided)
      * @default 'pipe'
      */
     cursorStyle?: CursorStyle;
+    /**
+     * Pause duration after deleting complete before next sentence (milliseconds)
+     * @default 0
+     */
+    deletePauseDuration?: number;
     /**
      * Speed of deleting characters (milliseconds per character)
      * @default 50
      */
     deletingSpeed?: number;
     /**
-     * Hide cursor while typing
+     * Hide cursor behavior
+     * - false: always show cursor
+     * - 'typing': hide cursor while typing
+     * - 'afterTyping': hide cursor after typing complete (during pause)
+     * - true: completely hide cursor
      * @default false
      */
-    hideCursorWhileTyping?: boolean;
+    hideCursorWhileTyping?: boolean | 'typing' | 'afterTyping';
     /**
      * Initial delay before starting animation (milliseconds)
      * @default 0

package/es/chat/LoadingDots/LoadingDots.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { LoadingDotsProps } from './type';
+declare const LoadingDots: import("react").NamedExoticComponent<LoadingDotsProps>;
+export default LoadingDots;

package/es/chat/LoadingDots/LoadingDots.js

@@ -0,0 +1,125 @@
+'use client';
+
+import { memo } from 'react';
+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";
+var LoadingDots = /*#__PURE__*/memo(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 8 : _ref$size,
+    color = _ref.color,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'dots' : _ref$variant,
+    className = _ref.className;
+  var _useStyles = useStyles({
+      color: color,
+      size: size
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var renderDots = function renderDots() {
+    switch (variant) {
+      case 'pulse':
+        {
+          return /*#__PURE__*/_jsx("div", {
+            className: styles.pulseDot,
+            style: {
+              animationDelay: '0s'
+            }
+          });
+        }
+      case 'wave':
+        {
+          return /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx("div", {
+              className: styles.waveDot,
+              style: {
+                animationDelay: '0s'
+              }
+            }), /*#__PURE__*/_jsx("div", {
+              className: styles.waveDot,
+              style: {
+                animationDelay: '0.12s'
+              }
+            }), /*#__PURE__*/_jsx("div", {
+              className: styles.waveDot,
+              style: {
+                animationDelay: '0.24s'
+              }
+            })]
+          });
+        }
+      case 'orbit':
+        {
+          return /*#__PURE__*/_jsxs("div", {
+            className: styles.orbitContainer,
+            children: [/*#__PURE__*/_jsx("div", {
+              className: styles.orbitDot,
+              style: {
+                animationDelay: '0s'
+              }
+            }), /*#__PURE__*/_jsx("div", {
+              className: styles.orbitDot,
+              style: {
+                animationDelay: '-0.4s'
+              }
+            }), /*#__PURE__*/_jsx("div", {
+              className: styles.orbitDot,
+              style: {
+                animationDelay: '-0.8s'
+              }
+            })]
+          });
+        }
+      case 'typing':
+        {
+          return /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx("div", {
+              className: styles.typingDot,
+              style: {
+                animationDelay: '0s'
+              }
+            }), /*#__PURE__*/_jsx("div", {
+              className: styles.typingDot,
+              style: {
+                animationDelay: '0.15s'
+              }
+            }), /*#__PURE__*/_jsx("div", {
+              className: styles.typingDot,
+              style: {
+                animationDelay: '0.3s'
+              }
+            })]
+          });
+        }
+      default:
+        {
+          return /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx("div", {
+              className: styles.defaultDot,
+              style: {
+                animationDelay: '0s'
+              }
+            }), /*#__PURE__*/_jsx("div", {
+              className: styles.defaultDot,
+              style: {
+                animationDelay: '0.15s'
+              }
+            }), /*#__PURE__*/_jsx("div", {
+              className: styles.defaultDot,
+              style: {
+                animationDelay: '0.3s'
+              }
+            })]
+          });
+        }
+    }
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(variant === 'orbit' ? styles.orbitWrapper : styles.container, className),
+    children: renderDots()
+  });
+});
+LoadingDots.displayName = 'LoadingDots';
+export default LoadingDots;

package/es/chat/LoadingDots/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './LoadingDots';
+export type * from './type';

package/es/chat/LoadingDots/index.js

@@ -0,0 +1 @@
+export { default } from "./LoadingDots";

package/es/chat/LoadingDots/style.d.ts

@@ -0,0 +1,13 @@
+export declare const useStyles: (props?: {
+    color?: string | undefined;
+    size: number;
+} | undefined) => import("antd-style").ReturnStyles<{
+    container: import("antd-style").SerializedStyles;
+    defaultDot: import("antd-style").SerializedStyles;
+    orbitContainer: import("antd-style").SerializedStyles;
+    orbitDot: import("antd-style").SerializedStyles;
+    orbitWrapper: import("antd-style").SerializedStyles;
+    pulseDot: import("antd-style").SerializedStyles;
+    typingDot: import("antd-style").SerializedStyles;
+    waveDot: import("antd-style").SerializedStyles;
+}>;

package/es/chat/LoadingDots/style.js

@@ -0,0 +1,25 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var token = _ref.token,
+    css = _ref.css;
+  var size = _ref2.size,
+    color = _ref2.color;
+  var dotColor = color || token.colorPrimary;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        flex-direction: row;\n        gap: 6px;\n        align-items: center;\n        justify-content: center;\n\n        padding: ", "px;\n      "])), token.paddingXS),
+    // Default variant (fade)
+    defaultDot: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        width: ", "px;\n        height: ", "px;\n        border-radius: 50%;\n\n        background-color: ", ";\n\n        animation: fade-animation 1.2s ease-in-out infinite;\n\n        @keyframes fade-animation {\n          0%,\n          100% {\n            opacity: 0.3;\n          }\n\n          50% {\n            opacity: 1;\n          }\n        }\n      "])), size, size, dotColor),
+    orbitContainer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        position: relative;\n        width: ", "px;\n        height: ", "px;\n      "])), size * 4, size * 4),
+    orbitDot: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        position: absolute;\n        inset-block-start: 50%;\n        inset-inline-start: 50%;\n        transform-origin: ", "px 0;\n\n        width: ", "px;\n        height: ", "px;\n        margin-block-start: -", "px;\n        margin-inline-start: -", "px;\n        border-radius: 50%;\n\n        background-color: ", ";\n\n        animation: orbit-animation 1.2s linear infinite;\n\n        @keyframes orbit-animation {\n          0% {\n            transform: rotate(0deg) translateX(", "px);\n          }\n\n          100% {\n            transform: rotate(360deg) translateX(", "px);\n          }\n        }\n      "])), size * 2, size, size, size / 2, size / 2, dotColor, size * 2, size * 2),
+    // Orbit variant
+    orbitWrapper: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        position: relative;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: ", "px;\n        height: ", "px;\n        padding: ", "px;\n      "])), size * 5, size * 5, token.paddingXS),
+    // Pulse variant
+    pulseDot: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        width: ", "px;\n        height: ", "px;\n        border-radius: 50%;\n\n        background-color: ", ";\n\n        animation: pulse-animation 1.2s ease-in-out infinite;\n\n        @keyframes pulse-animation {\n          0%,\n          100% {\n            transform: scale(0.8);\n            opacity: 0.3;\n          }\n\n          50% {\n            transform: scale(1.3);\n            opacity: 1;\n          }\n        }\n      "])), size, size, dotColor),
+    // Typing variant
+    typingDot: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        width: ", "px;\n        height: ", "px;\n        border-radius: 50%;\n\n        background-color: ", ";\n\n        animation: typing-animation 1.2s ease-in-out infinite;\n\n        @keyframes typing-animation {\n          0%,\n          100% {\n            transform: scale(0.6);\n            opacity: 0.2;\n          }\n\n          25% {\n            transform: scale(1);\n            opacity: 1;\n          }\n\n          50%,\n          75% {\n            transform: scale(0.6);\n            opacity: 0.2;\n          }\n        }\n      "])), size, size, dotColor),
+    // Wave variant
+    waveDot: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        width: ", "px;\n        height: ", "px;\n        border-radius: 50%;\n\n        background-color: ", ";\n\n        animation: wave-animation 1.24s ease-in-out infinite;\n\n        @keyframes wave-animation {\n          0%,\n          100% {\n            transform: translateY(0);\n          }\n\n          25% {\n            transform: translateY(-", "px);\n          }\n\n          50% {\n            transform: translateY(0);\n          }\n        }\n      "])), size, size, dotColor, size * 1.5)
+  };
+});

package/es/chat/LoadingDots/type.d.ts

@@ -0,0 +1,22 @@
+export type LoadingDotsVariant = 'dots' | 'pulse' | 'wave' | 'orbit' | 'typing';
+export interface LoadingDotsProps {
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 点的颜色
+     * @description 如果不提供，将使用主题的 colorPrimary
+     */
+    color?: string;
+    /**
+     * 点的大小（直径）
+     * @default 8
+     */
+    size?: number;
+    /**
+     * 动画变体
+     * @default 'dots'
+     */
+    variant?: LoadingDotsVariant;
+}

package/es/chat/LoadingDots/type.js

@@ -0,0 +1 @@
+export {};

package/es/chat/index.d.ts

@@ -5,6 +5,7 @@ export { default as ChatItem, type ChatItemProps } from './ChatItem';
 export { ChatActionsBar, type ChatActionsBarProps, default as ChatList, type ChatListProps, type OnActionsClick, type OnAvatatsClick, type OnMessageChange, type RenderAction, type RenderErrorMessage, type RenderItem, type RenderMessage, type RenderMessageExtra, } from './ChatList';
 export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
 export { default as EditableMessageList, type EditableMessageListProps, } from './EditableMessageList';
+export { default as LoadingDots, type LoadingDotsProps } from './LoadingDots';
 export { default as MessageInput, type MessageInputProps } from './MessageInput';
 export { default as MessageModal, type MessageModalProps } from './MessageModal';
 export { default as TokenTag, type TokenTagProps } from './TokenTag';

package/es/chat/index.js

@@ -5,6 +5,7 @@ export { default as ChatItem } from "./ChatItem";
 export { ChatActionsBar, default as ChatList } from "./ChatList";
 export { default as EditableMessage } from "./EditableMessage";
 export { default as EditableMessageList } from "./EditableMessageList";
+export { default as LoadingDots } from "./LoadingDots";
 export { default as MessageInput } from "./MessageInput";
 export { default as MessageModal } from "./MessageModal";
 export { default as TokenTag } from "./TokenTag";

package/package.json

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