@lobehub/ui 3.4.6 → 4.0.0

package/es/awesome/SpotlightCard/SpotlightCard.d.mts

@@ -1,8 +1,8 @@
 import { SpotlightCardProps } from "./type.mjs";
-import * as react109 from "react";
+import * as react127 from "react";
 
 //#region src/awesome/SpotlightCard/SpotlightCard.d.ts
-declare const SpotlightCard: react109.NamedExoticComponent<SpotlightCardProps<any>>;
+declare const SpotlightCard: react127.NamedExoticComponent<SpotlightCardProps<any>>;
 //#endregion
 export { SpotlightCard };
 //# sourceMappingURL=SpotlightCard.d.mts.map

package/es/awesome/TypewriterEffect/TypewriterEffect.d.mts

@@ -1,8 +1,8 @@
 import { TypewriterEffectProps } from "./type.mjs";
-import * as react115 from "react";
+import * as react128 from "react";
 
 //#region src/awesome/TypewriterEffect/TypewriterEffect.d.ts
-declare const TypewriterEffect: react115.NamedExoticComponent<TypewriterEffectProps>;
+declare const TypewriterEffect: react128.NamedExoticComponent<TypewriterEffectProps>;
 //#endregion
 export { TypewriterEffect };
 //# sourceMappingURL=TypewriterEffect.d.mts.map

package/es/awesome/TypewriterEffect/TypewriterEffect.mjs

@@ -1,12 +1,13 @@
 'use client';
 
+import { MotionComponent } from "../../MotionProvider/index.mjs";
 import { useStyles } from "./style.mjs";
-import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createElement, memo, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { motion } from "motion/react";
 
 //#region src/awesome/TypewriterEffect/TypewriterEffect.tsx
 const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed = 100, initialDelay = 0, pauseDuration = 2e3, deletingSpeed = 50, deletePauseDuration = 0, loop = true, className = "", color, showCursor = true, hideCursorWhileTyping = false, cursorCharacter, cursorClassName = "", cursorColor, cursorBlinkDuration = .8, cursorFade = true, cursorStyle = "pipe", textColors = [], variableSpeed, onSentenceComplete, startOnVisible = false, reverseMode = false, segmentMode = "grapheme", ...props }) => {
+	const Motion = use(MotionComponent);
 	const { styles, cx } = useStyles();
 	const [displayedText, setDisplayedText] = useState("");
 	const [currentCharIndex, setCurrentCharIndex] = useState(0);
@@ -139,7 +140,7 @@ const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed =
 	}, /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 		className: styles.text,
 		style: textColor ? { color: textColor } : void 0,
-		children: characters.map((char, index) => /* @__PURE__ */ jsx(motion.span, {
+		children: characters.map((char, index) => /* @__PURE__ */ jsx(Motion.span, {
 			animate: { opacity: 1 },
 			initial: { opacity: 0 },
 			style: { display: "inline-block" },
@@ -149,7 +150,7 @@ const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed =
 			},
 			children: char === " " ? "\xA0" : char
 		}, `${currentTextIndex}-${index}`))
-	}), showCursor && (cursorFade ? /* @__PURE__ */ jsx(motion.span, {
+	}), showCursor && (cursorFade ? /* @__PURE__ */ jsx(Motion.span, {
 		animate: { opacity: shouldHideCursor ? 0 : 1 },
 		className: cx(getCursorStyle(), cursorClassName),
 		initial: { opacity: 0 },

package/es/awesome/TypewriterEffect/TypewriterEffect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TypewriterEffect.mjs","names":["timeout: ReturnType<typeof setTimeout>"],"sources":["../../../src/awesome/TypewriterEffect/TypewriterEffect.tsx"],"sourcesContent":["'use client';\n\nimport { motion } from 'motion/react';\nimport { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useStyles } from './style';\nimport type { TypewriterEffectProps } from './type';\n\nconst TypewriterEffect = memo<TypewriterEffectProps>(\n  ({\n    sentences,\n    as: Component = 'div',\n    typingSpeed = 100,\n    initialDelay = 0,\n    pauseDuration = 2000,\n    deletingSpeed = 50,\n    deletePauseDuration = 0,\n    loop = true,\n    className = '',\n    color,\n    showCursor = true,\n    hideCursorWhileTyping = false,\n    cursorCharacter,\n    cursorClassName = '',\n    cursorColor,\n    cursorBlinkDuration = 0.8,\n    cursorFade = true,\n    cursorStyle = 'pipe',\n    textColors = [],\n    variableSpeed,\n    onSentenceComplete,\n    startOnVisible = false,\n    reverseMode = false,\n    segmentMode = 'grapheme',\n    ...props\n  }: TypewriterEffectProps) => {\n    const { styles, cx } = useStyles();\n    const [displayedText, setDisplayedText] = useState('');\n    const [currentCharIndex, setCurrentCharIndex] = useState(0);\n    const [isDeleting, setIsDeleting] = useState(false);\n    const [currentTextIndex, setCurrentTextIndex] = useState(0);\n    const [isVisible, setIsVisible] = useState(!startOnVisible);\n    const [isDeletePausing, setIsDeletePausing] = useState(false);\n    const containerRef = useRef<HTMLElement>(null);\n\n    const textArray = useMemo(\n      () => (Array.isArray(sentences) ? sentences : [sentences]),\n      [sentences],\n    );\n\n    // Helper function to split text based on segment mode\n    const splitText = useCallback(\n      (text: string): string[] => {\n        // Use Intl.Segmenter if available\n        if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n          const segmenter = new Intl.Segmenter(undefined, { granularity: segmentMode });\n          return Array.from(segmenter.segment(text), (segment) => segment.segment);\n        }\n\n        // Fallback when Intl.Segmenter is not available\n        if (segmentMode === 'word') {\n          // Simple word splitting fallback\n          return text.split(/(\\s+)/).filter(Boolean);\n        }\n\n        // Grapheme fallback\n        return Array.from(text);\n      },\n      [segmentMode],\n    );\n\n    const getRandomSpeed = useCallback(() => {\n      if (!variableSpeed) return typingSpeed;\n      const { min, max } = variableSpeed;\n      return Math.random() * (max - min) + min;\n    }, [variableSpeed, typingSpeed]);\n\n    const getCurrentTextColor = () => {\n      if (textColors.length > 0) {\n        return textColors[currentTextIndex % textColors.length];\n      }\n      return color;\n    };\n\n    const getCurrentCursorColor = () => {\n      return cursorColor || color;\n    };\n\n    useEffect(() => {\n      if (!startOnVisible || !containerRef.current) return;\n\n      const observer = new IntersectionObserver(\n        (entries) => {\n          entries.forEach((entry) => {\n            if (entry.isIntersecting) {\n              setIsVisible(true);\n            }\n          });\n        },\n        { threshold: 0.1 },\n      );\n\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [startOnVisible]);\n\n    useEffect(() => {\n      if (!isVisible) return;\n\n      let timeout: ReturnType<typeof setTimeout>;\n\n      const currentText = textArray[currentTextIndex];\n      // Split text based on segment mode\n      const textSegments = splitText(currentText);\n      const processedText = reverseMode ? textSegments.reverse().join('') : currentText;\n\n      // Handle delete pause state\n      if (isDeletePausing) {\n        timeout = setTimeout(() => {\n          setIsDeletePausing(false);\n        }, deletePauseDuration);\n        return () => clearTimeout(timeout);\n      }\n\n      const executeTypingAnimation = () => {\n        if (isDeleting) {\n          if (displayedText === '') {\n            setIsDeleting(false);\n            if (currentTextIndex === textArray.length - 1 && !loop) {\n              return;\n            }\n            if (onSentenceComplete) {\n              onSentenceComplete(textArray[currentTextIndex], currentTextIndex);\n            }\n            setCurrentTextIndex((prev) => (prev + 1) % textArray.length);\n            setCurrentCharIndex(0);\n\n            if (deletePauseDuration > 0) {\n              setIsDeletePausing(true);\n              return;\n            }\n          } else {\n            timeout = setTimeout(() => {\n              setDisplayedText((prev) => {\n                const segments = splitText(prev);\n                return segments.slice(0, -1).join('');\n              });\n            }, deletingSpeed);\n          }\n        } else {\n          const processedSegments = splitText(processedText);\n          if (currentCharIndex < processedSegments.length) {\n            timeout = setTimeout(\n              () => {\n                setDisplayedText((prev) => prev + processedSegments[currentCharIndex]);\n                setCurrentCharIndex((prev) => prev + 1);\n              },\n              variableSpeed ? getRandomSpeed() : typingSpeed,\n            );\n          } else if (textArray.length >= 1) {\n            if (!loop && currentTextIndex === textArray.length - 1) return;\n\n            timeout = setTimeout(() => {\n              setIsDeleting(true);\n            }, pauseDuration);\n          }\n        }\n      };\n\n      if (currentCharIndex === 0 && !isDeleting && displayedText === '') {\n        timeout = setTimeout(executeTypingAnimation, initialDelay);\n      } else {\n        executeTypingAnimation();\n      }\n\n      return () => clearTimeout(timeout);\n    }, [\n      currentCharIndex,\n      displayedText,\n      isDeleting,\n      isDeletePausing,\n      typingSpeed,\n      deletingSpeed,\n      deletePauseDuration,\n      pauseDuration,\n      textArray,\n      currentTextIndex,\n      loop,\n      initialDelay,\n      isVisible,\n      reverseMode,\n      variableSpeed,\n      onSentenceComplete,\n      getRandomSpeed,\n      splitText,\n    ]);\n\n    const getCursorStyle = () => {\n      if (cursorCharacter) return styles.cursorCustom;\n\n      switch (cursorStyle) {\n        case 'block': {\n          return styles.cursorBlock;\n        }\n        case 'dot': {\n          return styles.cursorDot;\n        }\n        case 'underscore': {\n          return styles.cursorUnderscore;\n        }\n        case 'pipe': {\n          return styles.cursor;\n        }\n      }\n    };\n\n    const currentTextLength = splitText(textArray[currentTextIndex]).length;\n    const isTyping = currentCharIndex < currentTextLength && !isDeleting;\n    const isAfterTyping = currentCharIndex === currentTextLength && !isDeleting;\n\n    const shouldHideCursor = (() => {\n      if (hideCursorWhileTyping === true) return true; // 完全隐藏\n      if (hideCursorWhileTyping === 'typing') return isTyping || isDeleting; // 打字和删除时隐藏\n      if (hideCursorWhileTyping === 'afterTyping') return isAfterTyping; // 打字完成后隐藏\n      return false;\n    })();\n\n    const textColor = getCurrentTextColor();\n    const finalCursorColor = getCurrentCursorColor();\n\n    // Split displayed text for animation\n    const characters = splitText(displayedText);\n\n    return createElement(\n      Component,\n      {\n        className: cx(styles.container, className),\n        ref: containerRef,\n        ...props,\n      },\n      <>\n        <span className={styles.text} style={textColor ? { color: textColor } : undefined}>\n          {characters.map((char, index) => (\n            <motion.span\n              animate={{ opacity: 1 }}\n              initial={{ opacity: 0 }}\n              key={`${currentTextIndex}-${index}`}\n              style={{ display: 'inline-block' }}\n              transition={{\n                duration: typingSpeed / 500,\n                ease: 'easeInOut',\n              }}\n            >\n              {char === ' ' ? '\\u00A0' : char}\n            </motion.span>\n          ))}\n        </span>\n        {showCursor &&\n          (cursorFade ? (\n            <motion.span\n              animate={{ opacity: shouldHideCursor ? 0 : 1 }}\n              className={cx(getCursorStyle(), cursorClassName)}\n              initial={{ opacity: 0 }}\n              style={finalCursorColor ? { backgroundColor: finalCursorColor } : undefined}\n              transition={{\n                duration: shouldHideCursor ? 0.2 : cursorBlinkDuration,\n                ease: 'easeInOut',\n                repeat: shouldHideCursor ? 0 : Number.POSITIVE_INFINITY,\n                repeatType: 'reverse',\n              }}\n            >\n              {cursorCharacter}\n            </motion.span>\n          ) : (\n            <span\n              className={cx(getCursorStyle(), cursorClassName)}\n              style={{\n                backgroundColor: finalCursorColor,\n                opacity: shouldHideCursor ? 0 : 1,\n              }}\n            >\n              {cursorCharacter}\n            </span>\n          ))}\n      </>,\n    );\n  },\n);\n\nTypewriterEffect.displayName = 'TypewriterEffect';\n\nexport default TypewriterEffect;\n"],"mappings":"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"}
+{"version":3,"file":"TypewriterEffect.mjs","names":["timeout: ReturnType<typeof setTimeout>"],"sources":["../../../src/awesome/TypewriterEffect/TypewriterEffect.tsx"],"sourcesContent":["'use client';\n\nimport { createElement, memo, use, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { MotionComponent } from '@/MotionProvider';\n\nimport { useStyles } from './style';\nimport type { TypewriterEffectProps } from './type';\n\nconst TypewriterEffect = memo<TypewriterEffectProps>(\n  ({\n    sentences,\n    as: Component = 'div',\n    typingSpeed = 100,\n    initialDelay = 0,\n    pauseDuration = 2000,\n    deletingSpeed = 50,\n    deletePauseDuration = 0,\n    loop = true,\n    className = '',\n    color,\n    showCursor = true,\n    hideCursorWhileTyping = false,\n    cursorCharacter,\n    cursorClassName = '',\n    cursorColor,\n    cursorBlinkDuration = 0.8,\n    cursorFade = true,\n    cursorStyle = 'pipe',\n    textColors = [],\n    variableSpeed,\n    onSentenceComplete,\n    startOnVisible = false,\n    reverseMode = false,\n    segmentMode = 'grapheme',\n    ...props\n  }: TypewriterEffectProps) => {\n    const Motion = use(MotionComponent);\n    const { styles, cx } = useStyles();\n    const [displayedText, setDisplayedText] = useState('');\n    const [currentCharIndex, setCurrentCharIndex] = useState(0);\n    const [isDeleting, setIsDeleting] = useState(false);\n    const [currentTextIndex, setCurrentTextIndex] = useState(0);\n    const [isVisible, setIsVisible] = useState(!startOnVisible);\n    const [isDeletePausing, setIsDeletePausing] = useState(false);\n    const containerRef = useRef<HTMLElement>(null);\n\n    const textArray = useMemo(\n      () => (Array.isArray(sentences) ? sentences : [sentences]),\n      [sentences],\n    );\n\n    // Helper function to split text based on segment mode\n    const splitText = useCallback(\n      (text: string): string[] => {\n        // Use Intl.Segmenter if available\n        if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n          const segmenter = new Intl.Segmenter(undefined, { granularity: segmentMode });\n          return Array.from(segmenter.segment(text), (segment) => segment.segment);\n        }\n\n        // Fallback when Intl.Segmenter is not available\n        if (segmentMode === 'word') {\n          // Simple word splitting fallback\n          return text.split(/(\\s+)/).filter(Boolean);\n        }\n\n        // Grapheme fallback\n        return Array.from(text);\n      },\n      [segmentMode],\n    );\n\n    const getRandomSpeed = useCallback(() => {\n      if (!variableSpeed) return typingSpeed;\n      const { min, max } = variableSpeed;\n      return Math.random() * (max - min) + min;\n    }, [variableSpeed, typingSpeed]);\n\n    const getCurrentTextColor = () => {\n      if (textColors.length > 0) {\n        return textColors[currentTextIndex % textColors.length];\n      }\n      return color;\n    };\n\n    const getCurrentCursorColor = () => {\n      return cursorColor || color;\n    };\n\n    useEffect(() => {\n      if (!startOnVisible || !containerRef.current) return;\n\n      const observer = new IntersectionObserver(\n        (entries) => {\n          entries.forEach((entry) => {\n            if (entry.isIntersecting) {\n              setIsVisible(true);\n            }\n          });\n        },\n        { threshold: 0.1 },\n      );\n\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [startOnVisible]);\n\n    useEffect(() => {\n      if (!isVisible) return;\n\n      let timeout: ReturnType<typeof setTimeout>;\n\n      const currentText = textArray[currentTextIndex];\n      // Split text based on segment mode\n      const textSegments = splitText(currentText);\n      const processedText = reverseMode ? textSegments.reverse().join('') : currentText;\n\n      // Handle delete pause state\n      if (isDeletePausing) {\n        timeout = setTimeout(() => {\n          setIsDeletePausing(false);\n        }, deletePauseDuration);\n        return () => clearTimeout(timeout);\n      }\n\n      const executeTypingAnimation = () => {\n        if (isDeleting) {\n          if (displayedText === '') {\n            setIsDeleting(false);\n            if (currentTextIndex === textArray.length - 1 && !loop) {\n              return;\n            }\n            if (onSentenceComplete) {\n              onSentenceComplete(textArray[currentTextIndex], currentTextIndex);\n            }\n            setCurrentTextIndex((prev) => (prev + 1) % textArray.length);\n            setCurrentCharIndex(0);\n\n            if (deletePauseDuration > 0) {\n              setIsDeletePausing(true);\n              return;\n            }\n          } else {\n            timeout = setTimeout(() => {\n              setDisplayedText((prev) => {\n                const segments = splitText(prev);\n                return segments.slice(0, -1).join('');\n              });\n            }, deletingSpeed);\n          }\n        } else {\n          const processedSegments = splitText(processedText);\n          if (currentCharIndex < processedSegments.length) {\n            timeout = setTimeout(\n              () => {\n                setDisplayedText((prev) => prev + processedSegments[currentCharIndex]);\n                setCurrentCharIndex((prev) => prev + 1);\n              },\n              variableSpeed ? getRandomSpeed() : typingSpeed,\n            );\n          } else if (textArray.length >= 1) {\n            if (!loop && currentTextIndex === textArray.length - 1) return;\n\n            timeout = setTimeout(() => {\n              setIsDeleting(true);\n            }, pauseDuration);\n          }\n        }\n      };\n\n      if (currentCharIndex === 0 && !isDeleting && displayedText === '') {\n        timeout = setTimeout(executeTypingAnimation, initialDelay);\n      } else {\n        executeTypingAnimation();\n      }\n\n      return () => clearTimeout(timeout);\n    }, [\n      currentCharIndex,\n      displayedText,\n      isDeleting,\n      isDeletePausing,\n      typingSpeed,\n      deletingSpeed,\n      deletePauseDuration,\n      pauseDuration,\n      textArray,\n      currentTextIndex,\n      loop,\n      initialDelay,\n      isVisible,\n      reverseMode,\n      variableSpeed,\n      onSentenceComplete,\n      getRandomSpeed,\n      splitText,\n    ]);\n\n    const getCursorStyle = () => {\n      if (cursorCharacter) return styles.cursorCustom;\n\n      switch (cursorStyle) {\n        case 'block': {\n          return styles.cursorBlock;\n        }\n        case 'dot': {\n          return styles.cursorDot;\n        }\n        case 'underscore': {\n          return styles.cursorUnderscore;\n        }\n        case 'pipe': {\n          return styles.cursor;\n        }\n      }\n    };\n\n    const currentTextLength = splitText(textArray[currentTextIndex]).length;\n    const isTyping = currentCharIndex < currentTextLength && !isDeleting;\n    const isAfterTyping = currentCharIndex === currentTextLength && !isDeleting;\n\n    const shouldHideCursor = (() => {\n      if (hideCursorWhileTyping === true) return true; // 完全隐藏\n      if (hideCursorWhileTyping === 'typing') return isTyping || isDeleting; // 打字和删除时隐藏\n      if (hideCursorWhileTyping === 'afterTyping') return isAfterTyping; // 打字完成后隐藏\n      return false;\n    })();\n\n    const textColor = getCurrentTextColor();\n    const finalCursorColor = getCurrentCursorColor();\n\n    // Split displayed text for animation\n    const characters = splitText(displayedText);\n\n    return createElement(\n      Component,\n      {\n        className: cx(styles.container, className),\n        ref: containerRef,\n        ...props,\n      },\n      <>\n        <span className={styles.text} style={textColor ? { color: textColor } : undefined}>\n          {characters.map((char, index) => (\n            <Motion.span\n              animate={{ opacity: 1 }}\n              initial={{ opacity: 0 }}\n              key={`${currentTextIndex}-${index}`}\n              style={{ display: 'inline-block' }}\n              transition={{\n                duration: typingSpeed / 500,\n                ease: 'easeInOut',\n              }}\n            >\n              {char === ' ' ? '\\u00A0' : char}\n            </Motion.span>\n          ))}\n        </span>\n        {showCursor &&\n          (cursorFade ? (\n            <Motion.span\n              animate={{ opacity: shouldHideCursor ? 0 : 1 }}\n              className={cx(getCursorStyle(), cursorClassName)}\n              initial={{ opacity: 0 }}\n              style={finalCursorColor ? { backgroundColor: finalCursorColor } : undefined}\n              transition={{\n                duration: shouldHideCursor ? 0.2 : cursorBlinkDuration,\n                ease: 'easeInOut',\n                repeat: shouldHideCursor ? 0 : Number.POSITIVE_INFINITY,\n                repeatType: 'reverse',\n              }}\n            >\n              {cursorCharacter}\n            </Motion.span>\n          ) : (\n            <span\n              className={cx(getCursorStyle(), cursorClassName)}\n              style={{\n                backgroundColor: finalCursorColor,\n                opacity: shouldHideCursor ? 0 : 1,\n              }}\n            >\n              {cursorCharacter}\n            </span>\n          ))}\n      </>,\n    );\n  },\n);\n\nTypewriterEffect.displayName = 'TypewriterEffect';\n\nexport default TypewriterEffect;\n"],"mappings":"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"}

package/es/brand/BrandLoading/{style-CB0aumHV.css → style-Cof4dJBw.css}

@@ -32,4 +32,4 @@
 }
 
 
-/*# sourceMappingURL=style-CB0aumHV.css.map*/
+/*# sourceMappingURL=style-Cof4dJBw.css.map*/

package/es/brand/BrandLoading/{style-CB0aumHV.css.map → style-Cof4dJBw.css.map}

@@ -1 +1 @@
-{"version":3,"file":"style-CB0aumHV.css","names":[],"sources":["../../../src/brand/BrandLoading/style.css"],"sourcesContent":["@keyframes draw {\n  0% {\n    stroke-dashoffset: 1000;\n  }\n\n  100% {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes fill {\n  30% {\n    fill-opacity: 5%;\n  }\n\n  100% {\n    fill-opacity: 100%;\n  }\n}\n\n.lobe-brand-loading path {\n  fill: currentcolor;\n  fill-opacity: 0%;\n  stroke: currentcolor;\n  stroke-dasharray: 1000;\n  stroke-dashoffset: 1000;\n  stroke-width: 0.25em;\n\n  animation:\n    draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n    fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA"}
+{"version":3,"file":"style-Cof4dJBw.css","names":[],"sources":["../../../src/brand/BrandLoading/style.css"],"sourcesContent":["@keyframes draw {\n  0% {\n    stroke-dashoffset: 1000;\n  }\n\n  100% {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes fill {\n  30% {\n    fill-opacity: 5%;\n  }\n\n  100% {\n    fill-opacity: 100%;\n  }\n}\n\n.lobe-brand-loading path {\n  fill: currentcolor;\n  fill-opacity: 0%;\n  stroke: currentcolor;\n  stroke-dasharray: 1000;\n  stroke-dashoffset: 1000;\n  stroke-width: 0.25em;\n\n  animation:\n    draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n    fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA"}

package/es/brand/LobeChat/index.d.mts

@@ -1,5 +1,5 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react1 from "react";
+import * as react46 from "react";
 import { ReactNode } from "react";
 
 //#region src/brand/LobeChat/index.d.ts
@@ -8,7 +8,7 @@ interface LobeChatProps extends DivProps {
   size?: number;
   type?: '3d' | 'flat' | 'mono' | 'text' | 'combine';
 }
-declare const LobeChat: react1.NamedExoticComponent<LobeChatProps>;
+declare const LobeChat: react46.NamedExoticComponent<LobeChatProps>;
 //#endregion
 export { LobeChat, LobeChatProps };
 //# sourceMappingURL=index.d.mts.map

package/es/brand/LobeHub/index.d.mts

@@ -1,5 +1,5 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react2 from "react";
+import * as react48 from "react";
 import { ReactNode } from "react";
 
 //#region src/brand/LobeHub/index.d.ts
@@ -8,7 +8,7 @@ interface LobeHubProps extends DivProps {
   size?: number;
   type?: '3d' | 'flat' | 'mono' | 'text' | 'combine';
 }
-declare const LobeHub: react2.NamedExoticComponent<LobeHubProps>;
+declare const LobeHub: react48.NamedExoticComponent<LobeHubProps>;
 //#endregion
 export { LobeHub, LobeHubProps };
 //# sourceMappingURL=index.d.mts.map

package/es/brand/LogoThree/LogoSpline.d.mts

@@ -1,6 +1,6 @@
 import { SplineProps } from "../../awesome/Spline/type.mjs";
 import "../../awesome/Spline/index.mjs";
-import * as react3 from "react";
+import * as react47 from "react";
 import { CSSProperties } from "react";
 
 //#region src/brand/LogoThree/LogoSpline.d.ts
@@ -10,7 +10,7 @@ interface LogoSplineProps extends Partial<SplineProps> {
   style?: CSSProperties;
   width?: number | string;
 }
-declare const LogoSpline: react3.NamedExoticComponent<LogoSplineProps>;
+declare const LogoSpline: react47.NamedExoticComponent<LogoSplineProps>;
 //#endregion
 export { LogoSpline, LogoSplineProps };
 //# sourceMappingURL=LogoSpline.d.mts.map

package/es/brand/LogoThree/index.d.mts

@@ -1,6 +1,6 @@
 import { SplineProps } from "../../awesome/Spline/type.mjs";
 import "../../awesome/Spline/index.mjs";
-import * as react4 from "react";
+import * as react49 from "react";
 import { CSSProperties } from "react";
 
 //#region src/brand/LogoThree/index.d.ts
@@ -9,7 +9,7 @@ interface LogoThreeProps extends Partial<SplineProps> {
   size?: number;
   style?: CSSProperties;
 }
-declare const LogoThree: react4.NamedExoticComponent<LogoThreeProps>;
+declare const LogoThree: react49.NamedExoticComponent<LogoThreeProps>;
 //#endregion
 export { LogoThree, LogoThreeProps };
 //# sourceMappingURL=index.d.mts.map

package/es/chat/BackBottom/BackBottom.d.mts

@@ -1,8 +1,8 @@
 import { BackBottomProps } from "./type.mjs";
-import * as react125 from "react";
+import * as react109 from "react";
 
 //#region src/chat/BackBottom/BackBottom.d.ts
-declare const BackBottom: react125.NamedExoticComponent<BackBottomProps>;
+declare const BackBottom: react109.NamedExoticComponent<BackBottomProps>;
 //#endregion
 export { BackBottom };
 //# sourceMappingURL=BackBottom.d.mts.map

package/es/chat/ChatInputArea/components/ChatInputAreaInner.d.mts

@@ -1,8 +1,8 @@
 import { ChatInputAreaInnerProps } from "../type.mjs";
-import * as react124 from "react";
+import * as react113 from "react";
 
 //#region src/chat/ChatInputArea/components/ChatInputAreaInner.d.ts
-declare const ChatInputAreaInner: react124.NamedExoticComponent<ChatInputAreaInnerProps>;
+declare const ChatInputAreaInner: react113.NamedExoticComponent<ChatInputAreaInnerProps>;
 //#endregion
 export { ChatInputAreaInner };
 //# sourceMappingURL=ChatInputAreaInner.d.mts.map

package/es/chat/ChatItem/ChatItem.d.mts

@@ -1,8 +1,8 @@
 import { ChatItemProps } from "./type.mjs";
-import * as react128 from "react";
+import * as react107 from "react";
 
 //#region src/chat/ChatItem/ChatItem.d.ts
-declare const ChatItem: react128.NamedExoticComponent<ChatItemProps>;
+declare const ChatItem: react107.NamedExoticComponent<ChatItemProps>;
 //#endregion
 export { ChatItem };
 //# sourceMappingURL=ChatItem.d.mts.map

package/es/chat/ChatItem/ChatItem.mjs

@@ -1,6 +1,8 @@
 'use client';
 
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import chat_default from "../../i18n/resources/en/chat.mjs";
 import { useStyles } from "./style.mjs";
 import Actions_default from "./components/Actions.mjs";
 import Avatar_default from "./components/Avatar.mjs";
@@ -14,8 +16,9 @@ import { useResponsive } from "antd-style";
 
 //#region src/chat/ChatItem/ChatItem.tsx
 const MOBILE_AVATAR_SIZE = 32;
-const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, className, primary, loading, message, placeholderMessage = "...", placement = "left", variant = "bubble", avatar, error, showTitle, time, editing, onChange, onEditingChange, messageExtra, renderMessage, text, errorMessage, onDoubleClick, fontSize, aboveMessage, belowMessage, markdownProps, actionsWrapWidth = 54, showAvatar = true, titleAddon, ...rest }) => {
+const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, className, primary, loading, message, placeholderMessage, placement = "left", variant = "bubble", avatar, error, showTitle, time, editing, onChange, onEditingChange, messageExtra, renderMessage, text, errorMessage, onDoubleClick, fontSize, aboveMessage, belowMessage, markdownProps, actionsWrapWidth = 54, showAvatar = true, titleAddon, ...rest }) => {
 	const { mobile } = useResponsive();
+	const { t } = useTranslation(chat_default);
 	const { cx: cx$1, styles } = useStyles({
 		editing,
 		placement,
@@ -25,6 +28,8 @@ const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, class
 		title: avatar.title,
 		variant
 	});
+	const placeholderText = placeholderMessage ?? t("chat.placeholder");
+	const avatarAlt = avatarProps?.alt || avatar.title || t("chat.avatar");
 	const contentRef = useRef(null);
 	const containerRef = useRef(null);
 	const [layoutMode, setLayoutMode] = useState(variant === "bubble" ? "horizontal" : "vertical");
@@ -53,7 +58,7 @@ const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, class
 			showAvatar && /* @__PURE__ */ jsx(Avatar_default, {
 				...avatarProps,
 				addon: avatarAddon,
-				alt: avatarProps?.alt || avatar.title || "avatar",
+				alt: avatarAlt,
 				avatar,
 				loading,
 				onClick: onAvatarClick,
@@ -86,7 +91,7 @@ const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, class
 						children: [/* @__PURE__ */ jsx(FlexBasic_default, {
 							ref: contentRef,
 							width: "100%",
-							children: error && (message === placeholderMessage || !message) ? /* @__PURE__ */ jsx(ErrorContent_default, {
+							children: error && (message === placeholderText || !message) ? /* @__PURE__ */ jsx(ErrorContent_default, {
 								error,
 								message: errorMessage,
 								placement

package/es/chat/ChatItem/ChatItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatItem.mjs","names":["Flexbox","cx","Avatar","Title","ErrorContent","MessageContent","Actions","BorderSpacing"],"sources":["../../../src/chat/ChatItem/ChatItem.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport Actions from './components/Actions';\nimport Avatar from './components/Avatar';\nimport BorderSpacing from './components/BorderSpacing';\nimport ErrorContent from './components/ErrorContent';\nimport MessageContent from './components/MessageContent';\nimport Title from './components/Title';\nimport { useStyles } from './style';\nimport type { ChatItemProps } from './type';\n\nconst MOBILE_AVATAR_SIZE = 32;\n\nconst ChatItem = memo<ChatItemProps>(\n  ({\n    avatarAddon,\n    onAvatarClick,\n    avatarProps,\n    actions,\n    className,\n    primary,\n    loading,\n    message,\n    placeholderMessage = '...',\n    placement = 'left',\n    variant = 'bubble',\n    avatar,\n    error,\n    showTitle,\n    time,\n    editing,\n    onChange,\n    onEditingChange,\n    messageExtra,\n    renderMessage,\n    text,\n    errorMessage,\n    onDoubleClick,\n    fontSize,\n    aboveMessage,\n    belowMessage,\n    markdownProps,\n    actionsWrapWidth = 54,\n    showAvatar = true,\n    titleAddon,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const { cx, styles } = useStyles({\n      editing,\n      placement,\n      primary,\n      showTitle,\n      time,\n      title: avatar.title,\n      variant,\n    });\n\n    // 在 ChatItem 组件中添加\n    const contentRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [layoutMode, setLayoutMode] = useState<'horizontal' | 'vertical'>(\n      variant === 'bubble' ? 'horizontal' : 'vertical',\n    );\n\n    // 使用 ResizeObserver 监控内容和容器尺寸\n    useEffect(() => {\n      if (variant === 'docs') {\n        setLayoutMode('vertical');\n        return;\n      }\n\n      if (!contentRef.current || !containerRef.current) return;\n\n      const observer = new ResizeObserver(() => {\n        if (!contentRef.current || !containerRef.current) return;\n\n        const containerWidth = containerRef.current.clientWidth;\n        const contentWidth = contentRef.current.scrollWidth; // 使用scrollWidth获取实际内容宽度\n\n        // 预留给Actions的最小空间 (根据实际Actions大小调整)\n\n        // 只有当内容宽度 + Actions最小宽度 > 容器宽度时才切换布局\n        setLayoutMode(contentWidth + actionsWrapWidth > containerWidth ? 'vertical' : 'horizontal');\n      });\n\n      observer.observe(contentRef.current);\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [variant, actionsWrapWidth]);\n\n    return (\n      <Flexbox\n        className={cx(styles.container, className)}\n        direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\n        gap={mobile ? 6 : 12}\n        {...rest}\n      >\n        {showAvatar && (\n          <Avatar\n            {...avatarProps}\n            addon={avatarAddon}\n            alt={avatarProps?.alt || avatar.title || 'avatar'}\n            avatar={avatar}\n            loading={loading}\n            onClick={onAvatarClick}\n            placement={placement}\n            size={mobile ? MOBILE_AVATAR_SIZE : undefined}\n            style={{\n              marginTop: showTitle ? -12 : 6,\n              ...avatarProps?.style,\n            }}\n          />\n        )}\n        <Flexbox\n          align={placement === 'left' ? 'flex-start' : 'flex-end'}\n          className={styles.messageContainer}\n          ref={containerRef}\n        >\n          <Title\n            avatar={avatar}\n            placement={placement}\n            showTitle={showTitle}\n            time={time}\n            titleAddon={titleAddon}\n          />\n          {aboveMessage}\n          <Flexbox\n            align={placement === 'left' ? 'flex-start' : 'flex-end'}\n            className={styles.messageContent}\n            data-layout={layoutMode} // 添加数据属性以方便样式选择\n            direction={\n              layoutMode === 'horizontal'\n                ? placement === 'left'\n                  ? 'horizontal'\n                  : 'horizontal-reverse'\n                : 'vertical'\n            }\n            gap={8}\n          >\n            <Flexbox ref={contentRef} width={'100%'}>\n              {error && (message === placeholderMessage || !message) ? (\n                <ErrorContent error={error} message={errorMessage} placement={placement} />\n              ) : (\n                <MessageContent\n                  editing={editing}\n                  fontSize={fontSize}\n                  markdownProps={markdownProps}\n                  message={message}\n                  messageExtra={\n                    <>\n                      {error && (\n                        <ErrorContent error={error} message={errorMessage} placement={placement} />\n                      )}\n                      {messageExtra}\n                    </>\n                  }\n                  onChange={onChange}\n                  onDoubleClick={onDoubleClick}\n                  onEditingChange={onEditingChange}\n                  placement={placement}\n                  primary={primary}\n                  renderMessage={renderMessage}\n                  text={text}\n                  variant={variant}\n                />\n              )}\n            </Flexbox>\n            {actions && (\n              <Actions\n                actions={actions}\n                editing={editing}\n                placement={placement}\n                variant={variant}\n              />\n            )}\n          </Flexbox>\n          {belowMessage}\n        </Flexbox>\n        {mobile && variant === 'bubble' && showAvatar && (\n          <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nexport default ChatItem;\n\nexport type { ChatItemProps } from './type';\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,qBAAqB;AAE3B,MAAM,WAAW,MACd,EACC,aACA,eACA,aACA,SACA,WACA,SACA,SACA,SACA,qBAAqB,OACrB,YAAY,QACZ,UAAU,UACV,QACA,OACA,WACA,MACA,SACA,UACA,iBACA,cACA,eACA,MACA,cACA,eACA,UACA,cACA,cACA,eACA,mBAAmB,IACnB,aAAa,MACb,YACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,UAAI,WAAW,UAAU;EAC/B;EACA;EACA;EACA;EACA;EACA,OAAO,OAAO;EACd;EACD,CAAC;CAGF,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,YAAY,iBAAiB,SAClC,YAAY,WAAW,eAAe,WACvC;AAGD,iBAAgB;AACd,MAAI,YAAY,QAAQ;AACtB,iBAAc,WAAW;AACzB;;AAGF,MAAI,CAAC,WAAW,WAAW,CAAC,aAAa,QAAS;EAElD,MAAM,WAAW,IAAI,qBAAqB;AACxC,OAAI,CAAC,WAAW,WAAW,CAAC,aAAa,QAAS;GAElD,MAAM,iBAAiB,aAAa,QAAQ;GAC5C,MAAM,eAAe,WAAW,QAAQ;AAKxC,iBAAc,eAAe,mBAAmB,iBAAiB,aAAa,aAAa;IAC3F;AAEF,WAAS,QAAQ,WAAW,QAAQ;AACpC,WAAS,QAAQ,aAAa,QAAQ;AAEtC,eAAa,SAAS,YAAY;IACjC,CAAC,SAAS,iBAAiB,CAAC;AAE/B,QACE,qBAACA;EACC,WAAWC,KAAG,OAAO,WAAW,UAAU;EAC1C,WAAW,cAAc,SAAS,eAAe;EACjD,KAAK,SAAS,IAAI;EAClB,GAAI;;GAEH,cACC,oBAACC;IACC,GAAI;IACJ,OAAO;IACP,KAAK,aAAa,OAAO,OAAO,SAAS;IACjC;IACC;IACT,SAAS;IACE;IACX,MAAM,SAAS,qBAAqB;IACpC,OAAO;KACL,WAAW,YAAY,MAAM;KAC7B,GAAG,aAAa;KACjB;KACD;GAEJ,qBAACF;IACC,OAAO,cAAc,SAAS,eAAe;IAC7C,WAAW,OAAO;IAClB,KAAK;;KAEL,oBAACG;MACS;MACG;MACA;MACL;MACM;OACZ;KACD;KACD,qBAACH;MACC,OAAO,cAAc,SAAS,eAAe;MAC7C,WAAW,OAAO;MAClB,eAAa;MACb,WACE,eAAe,eACX,cAAc,SACZ,eACA,uBACF;MAEN,KAAK;iBAEL,oBAACA;OAAQ,KAAK;OAAY,OAAO;iBAC9B,UAAU,YAAY,sBAAsB,CAAC,WAC5C,oBAACI;QAAoB;QAAO,SAAS;QAAyB;SAAa,GAE3E,oBAACC;QACU;QACC;QACK;QACN;QACT,cACE,8CACG,SACC,oBAACD;SAAoB;SAAO,SAAS;SAAyB;UAAa,EAE5E,gBACA;QAEK;QACK;QACE;QACN;QACF;QACM;QACT;QACG;SACT;QAEI,EACT,WACC,oBAACE;OACU;OACA;OACE;OACF;QACT;OAEI;KACT;;KACO;GACT,UAAU,YAAY,YAAY,cACjC,oBAACC,yBAAc,eAAe,qBAAsB;;GAE9C;EAGf;AAED,uBAAe"}
+{"version":3,"file":"ChatItem.mjs","names":["chatMessages","Flexbox","cx","Avatar","Title","ErrorContent","MessageContent","Actions","BorderSpacing"],"sources":["../../../src/chat/ChatItem/ChatItem.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport chatMessages from '@/i18n/resources/en/chat';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport Actions from './components/Actions';\nimport Avatar from './components/Avatar';\nimport BorderSpacing from './components/BorderSpacing';\nimport ErrorContent from './components/ErrorContent';\nimport MessageContent from './components/MessageContent';\nimport Title from './components/Title';\nimport { useStyles } from './style';\nimport type { ChatItemProps } from './type';\n\nconst MOBILE_AVATAR_SIZE = 32;\n\nconst ChatItem = memo<ChatItemProps>(\n  ({\n    avatarAddon,\n    onAvatarClick,\n    avatarProps,\n    actions,\n    className,\n    primary,\n    loading,\n    message,\n    placeholderMessage,\n    placement = 'left',\n    variant = 'bubble',\n    avatar,\n    error,\n    showTitle,\n    time,\n    editing,\n    onChange,\n    onEditingChange,\n    messageExtra,\n    renderMessage,\n    text,\n    errorMessage,\n    onDoubleClick,\n    fontSize,\n    aboveMessage,\n    belowMessage,\n    markdownProps,\n    actionsWrapWidth = 54,\n    showAvatar = true,\n    titleAddon,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const { t } = useTranslation(chatMessages);\n    const { cx, styles } = useStyles({\n      editing,\n      placement,\n      primary,\n      showTitle,\n      time,\n      title: avatar.title,\n      variant,\n    });\n    const placeholderText = placeholderMessage ?? t('chat.placeholder');\n    const avatarAlt = avatarProps?.alt || avatar.title || t('chat.avatar');\n\n    // 在 ChatItem 组件中添加\n    const contentRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [layoutMode, setLayoutMode] = useState<'horizontal' | 'vertical'>(\n      variant === 'bubble' ? 'horizontal' : 'vertical',\n    );\n\n    // 使用 ResizeObserver 监控内容和容器尺寸\n    useEffect(() => {\n      if (variant === 'docs') {\n        setLayoutMode('vertical');\n        return;\n      }\n\n      if (!contentRef.current || !containerRef.current) return;\n\n      const observer = new ResizeObserver(() => {\n        if (!contentRef.current || !containerRef.current) return;\n\n        const containerWidth = containerRef.current.clientWidth;\n        const contentWidth = contentRef.current.scrollWidth; // 使用scrollWidth获取实际内容宽度\n\n        // 预留给Actions的最小空间 (根据实际Actions大小调整)\n\n        // 只有当内容宽度 + Actions最小宽度 > 容器宽度时才切换布局\n        setLayoutMode(contentWidth + actionsWrapWidth > containerWidth ? 'vertical' : 'horizontal');\n      });\n\n      observer.observe(contentRef.current);\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [variant, actionsWrapWidth]);\n\n    return (\n      <Flexbox\n        className={cx(styles.container, className)}\n        direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\n        gap={mobile ? 6 : 12}\n        {...rest}\n      >\n        {showAvatar && (\n          <Avatar\n            {...avatarProps}\n            addon={avatarAddon}\n            alt={avatarAlt}\n            avatar={avatar}\n            loading={loading}\n            onClick={onAvatarClick}\n            placement={placement}\n            size={mobile ? MOBILE_AVATAR_SIZE : undefined}\n            style={{\n              marginTop: showTitle ? -12 : 6,\n              ...avatarProps?.style,\n            }}\n          />\n        )}\n        <Flexbox\n          align={placement === 'left' ? 'flex-start' : 'flex-end'}\n          className={styles.messageContainer}\n          ref={containerRef}\n        >\n          <Title\n            avatar={avatar}\n            placement={placement}\n            showTitle={showTitle}\n            time={time}\n            titleAddon={titleAddon}\n          />\n          {aboveMessage}\n          <Flexbox\n            align={placement === 'left' ? 'flex-start' : 'flex-end'}\n            className={styles.messageContent}\n            data-layout={layoutMode} // 添加数据属性以方便样式选择\n            direction={\n              layoutMode === 'horizontal'\n                ? placement === 'left'\n                  ? 'horizontal'\n                  : 'horizontal-reverse'\n                : 'vertical'\n            }\n            gap={8}\n          >\n            <Flexbox ref={contentRef} width={'100%'}>\n              {error && (message === placeholderText || !message) ? (\n                <ErrorContent error={error} message={errorMessage} placement={placement} />\n              ) : (\n                <MessageContent\n                  editing={editing}\n                  fontSize={fontSize}\n                  markdownProps={markdownProps}\n                  message={message}\n                  messageExtra={\n                    <>\n                      {error && (\n                        <ErrorContent error={error} message={errorMessage} placement={placement} />\n                      )}\n                      {messageExtra}\n                    </>\n                  }\n                  onChange={onChange}\n                  onDoubleClick={onDoubleClick}\n                  onEditingChange={onEditingChange}\n                  placement={placement}\n                  primary={primary}\n                  renderMessage={renderMessage}\n                  text={text}\n                  variant={variant}\n                />\n              )}\n            </Flexbox>\n            {actions && (\n              <Actions\n                actions={actions}\n                editing={editing}\n                placement={placement}\n                variant={variant}\n              />\n            )}\n          </Flexbox>\n          {belowMessage}\n        </Flexbox>\n        {mobile && variant === 'bubble' && showAvatar && (\n          <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nexport default ChatItem;\n\nexport type { ChatItemProps } from './type';\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,qBAAqB;AAE3B,MAAM,WAAW,MACd,EACC,aACA,eACA,aACA,SACA,WACA,SACA,SACA,SACA,oBACA,YAAY,QACZ,UAAU,UACV,QACA,OACA,WACA,MACA,SACA,UACA,iBACA,cACA,eACA,MACA,cACA,eACA,UACA,cACA,cACA,eACA,mBAAmB,IACnB,aAAa,MACb,YACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,MAAM,eAAeA,aAAa;CAC1C,MAAM,EAAE,UAAI,WAAW,UAAU;EAC/B;EACA;EACA;EACA;EACA;EACA,OAAO,OAAO;EACd;EACD,CAAC;CACF,MAAM,kBAAkB,sBAAsB,EAAE,mBAAmB;CACnE,MAAM,YAAY,aAAa,OAAO,OAAO,SAAS,EAAE,cAAc;CAGtE,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,YAAY,iBAAiB,SAClC,YAAY,WAAW,eAAe,WACvC;AAGD,iBAAgB;AACd,MAAI,YAAY,QAAQ;AACtB,iBAAc,WAAW;AACzB;;AAGF,MAAI,CAAC,WAAW,WAAW,CAAC,aAAa,QAAS;EAElD,MAAM,WAAW,IAAI,qBAAqB;AACxC,OAAI,CAAC,WAAW,WAAW,CAAC,aAAa,QAAS;GAElD,MAAM,iBAAiB,aAAa,QAAQ;GAC5C,MAAM,eAAe,WAAW,QAAQ;AAKxC,iBAAc,eAAe,mBAAmB,iBAAiB,aAAa,aAAa;IAC3F;AAEF,WAAS,QAAQ,WAAW,QAAQ;AACpC,WAAS,QAAQ,aAAa,QAAQ;AAEtC,eAAa,SAAS,YAAY;IACjC,CAAC,SAAS,iBAAiB,CAAC;AAE/B,QACE,qBAACC;EACC,WAAWC,KAAG,OAAO,WAAW,UAAU;EAC1C,WAAW,cAAc,SAAS,eAAe;EACjD,KAAK,SAAS,IAAI;EAClB,GAAI;;GAEH,cACC,oBAACC;IACC,GAAI;IACJ,OAAO;IACP,KAAK;IACG;IACC;IACT,SAAS;IACE;IACX,MAAM,SAAS,qBAAqB;IACpC,OAAO;KACL,WAAW,YAAY,MAAM;KAC7B,GAAG,aAAa;KACjB;KACD;GAEJ,qBAACF;IACC,OAAO,cAAc,SAAS,eAAe;IAC7C,WAAW,OAAO;IAClB,KAAK;;KAEL,oBAACG;MACS;MACG;MACA;MACL;MACM;OACZ;KACD;KACD,qBAACH;MACC,OAAO,cAAc,SAAS,eAAe;MAC7C,WAAW,OAAO;MAClB,eAAa;MACb,WACE,eAAe,eACX,cAAc,SACZ,eACA,uBACF;MAEN,KAAK;iBAEL,oBAACA;OAAQ,KAAK;OAAY,OAAO;iBAC9B,UAAU,YAAY,mBAAmB,CAAC,WACzC,oBAACI;QAAoB;QAAO,SAAS;QAAyB;SAAa,GAE3E,oBAACC;QACU;QACC;QACK;QACN;QACT,cACE,8CACG,SACC,oBAACD;SAAoB;SAAO,SAAS;SAAyB;UAAa,EAE5E,gBACA;QAEK;QACK;QACE;QACN;QACF;QACM;QACT;QACG;SACT;QAEI,EACT,WACC,oBAACE;OACU;OACA;OACE;OACF;QACT;OAEI;KACT;;KACO;GACT,UAAU,YAAY,YAAY,cACjC,oBAACC,yBAAc,eAAe,qBAAsB;;GAE9C;EAGf;AAED,uBAAe"}

package/es/chat/ChatList/ChatList.d.mts

@@ -1,8 +1,8 @@
 import { ChatListProps } from "./type.mjs";
-import * as react130 from "react";
+import * as react108 from "react";
 
 //#region src/chat/ChatList/ChatList.d.ts
-declare const ChatList: react130.NamedExoticComponent<ChatListProps>;
+declare const ChatList: react108.NamedExoticComponent<ChatListProps>;
 //#endregion
 export { ChatList };
 //# sourceMappingURL=ChatList.d.mts.map

package/es/chat/EditableMessage/EditableMessage.d.mts

@@ -1,8 +1,8 @@
 import { EditableMessageProps } from "./type.mjs";
-import * as react131 from "react";
+import * as react110 from "react";
 
 //#region src/chat/EditableMessage/EditableMessage.d.ts
-declare const EditableMessage: react131.NamedExoticComponent<EditableMessageProps>;
+declare const EditableMessage: react110.NamedExoticComponent<EditableMessageProps>;
 //#endregion
 export { EditableMessage };
 //# sourceMappingURL=EditableMessage.d.mts.map

package/es/chat/EditableMessageList/EditableMessageList.d.mts

@@ -1,8 +1,8 @@
 import { EditableMessageListProps } from "./type.mjs";
-import * as react126 from "react";
+import * as react112 from "react";
 
 //#region src/chat/EditableMessageList/EditableMessageList.d.ts
-declare const EditableMessageList: react126.NamedExoticComponent<EditableMessageListProps>;
+declare const EditableMessageList: react112.NamedExoticComponent<EditableMessageListProps>;
 //#endregion
 export { EditableMessageList };
 //# sourceMappingURL=EditableMessageList.d.mts.map

package/es/chat/EditableMessageList/EditableMessageList.mjs

@@ -4,7 +4,9 @@ import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import ActionIcon_default from "../../ActionIcon/ActionIcon.mjs";
 import Button_default from "../../Button/Button.mjs";
 import ControlInput_default from "../../EditableText/ControlInput.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
 import Select_default from "../../Select/Select.mjs";
+import editableMessage_default from "../../i18n/resources/en/editableMessage.mjs";
 import { messagesReducer } from "./messageReducer.mjs";
 import { memo, useEffect, useReducer } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,8 +14,16 @@ import { Plus, Trash } from "lucide-react";
 import isEqual from "fast-deep-equal";
 
 //#region src/chat/EditableMessageList/EditableMessageList.tsx
-const EditableMessageList = memo(({ disabled, dataSources, onChange }) => {
+const EditableMessageList = memo(({ disabled, dataSources, onChange, texts }) => {
 	const [chatMessages, dispatch] = useReducer(messagesReducer, dataSources);
+	const { t } = useTranslation(editableMessage_default);
+	const addPropsText = texts?.addProps ?? t("editableMessage.addProps");
+	const deleteText = texts?.delete ?? t("editableMessage.delete");
+	const inputPlaceholderText = texts?.inputPlaceholder ?? t("editableMessage.inputPlaceholder");
+	const outputPlaceholderText = texts?.outputPlaceholder ?? t("editableMessage.outputPlaceholder");
+	const systemText = texts?.system ?? t("editableMessage.system");
+	const inputText = texts?.input ?? t("editableMessage.input");
+	const outputText = texts?.output ?? t("editableMessage.output");
 	useEffect(() => {
 		if (!isEqual(dataSources, chatMessages)) onChange?.(chatMessages);
 	}, [chatMessages]);
@@ -36,15 +46,15 @@ const EditableMessageList = memo(({ disabled, dataSources, onChange }) => {
 					},
 					options: [
 						{
-							label: "System",
+							label: systemText,
 							value: "system"
 						},
 						{
-							label: "Input",
+							label: inputText,
 							value: "user"
 						},
 						{
-							label: "Output",
+							label: outputText,
 							value: "assistant"
 						}
 					],
@@ -61,7 +71,7 @@ const EditableMessageList = memo(({ disabled, dataSources, onChange }) => {
 							type: "updateMessage"
 						});
 					},
-					placeholder: item.role === "user" ? "请填入输入的样例内容" : "请填入输出的样例",
+					placeholder: item.role === "user" ? inputPlaceholderText : outputPlaceholderText,
 					value: item.content
 				}),
 				/* @__PURE__ */ jsx(ActionIcon_default, {
@@ -72,7 +82,7 @@ const EditableMessageList = memo(({ disabled, dataSources, onChange }) => {
 							type: "deleteMessage"
 						});
 					},
-					title: "Delete",
+					title: deleteText,
 					variant: "filled"
 				})
 			]
@@ -89,7 +99,7 @@ const EditableMessageList = memo(({ disabled, dataSources, onChange }) => {
 					type: "addMessage"
 				});
 			},
-			children: "Add Props"
+			children: addPropsText
 		})]
 	}) : void 0;
 }, isEqual);

package/es/chat/EditableMessageList/EditableMessageList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableMessageList.mjs","names":["Flexbox","Select","ControlInput","ActionIcon","Button"],"sources":["../../../src/chat/EditableMessageList/EditableMessageList.tsx"],"sourcesContent":["'use client';\n\nimport isEqual from 'fast-deep-equal';\nimport { Plus, Trash } from 'lucide-react';\nimport { memo, useEffect, useReducer } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Button from '@/Button';\nimport ControlInput from '@/EditableText/ControlInput';\nimport { Flexbox } from '@/Flex';\nimport Select from '@/Select';\n\nimport { messagesReducer } from './messageReducer';\nimport type { EditableMessageListProps } from './type';\n\nconst EditableMessageList = memo<EditableMessageListProps>(\n  ({ disabled, dataSources, onChange }) => {\n    const [chatMessages, dispatch] = useReducer(messagesReducer, dataSources);\n\n    useEffect(() => {\n      if (!isEqual(dataSources, chatMessages)) {\n        onChange?.(chatMessages);\n      }\n    }, [chatMessages]);\n\n    return dataSources ? (\n      <Flexbox gap={12}>\n        {chatMessages.map((item, index) => (\n          <Flexbox\n            align={'center'}\n            gap={8}\n            horizontal\n            key={`${index}-${item.content}`}\n            width={'100%'}\n          >\n            <Select\n              disabled={disabled}\n              onChange={(value) => {\n                dispatch({ index, role: value, type: 'updateMessageRole' });\n              }}\n              options={[\n                { label: 'System', value: 'system' },\n                { label: 'Input', value: 'user' },\n                { label: 'Output', value: 'assistant' },\n              ]}\n              style={{ width: 120 }}\n              styles={{ popup: { root: { zIndex: 100 } } }}\n              value={item.role}\n            />\n            <ControlInput\n              disabled={disabled}\n              onChange={(e) => {\n                dispatch({ index, message: e, type: 'updateMessage' });\n              }}\n              placeholder={item.role === 'user' ? '请填入输入的样例内容' : '请填入输出的样例'}\n              value={item.content}\n            />\n            <ActionIcon\n              icon={Trash}\n              onClick={() => {\n                dispatch({ index, type: 'deleteMessage' });\n              }}\n              title=\"Delete\"\n              variant={'filled'}\n            />\n          </Flexbox>\n        ))}\n\n        <Button\n          block\n          disabled={disabled}\n          icon={Plus}\n          onClick={() => {\n            const lastMeg = chatMessages.at(-1);\n\n            dispatch({\n              message: { content: '', role: lastMeg?.role === 'user' ? 'assistant' : 'user' },\n              type: 'addMessage',\n            });\n          }}\n        >\n          Add Props\n        </Button>\n      </Flexbox>\n    ) : undefined;\n  },\n  isEqual,\n);\n\nEditableMessageList.displayName = 'EditableMessageList';\n\nexport default EditableMessageList;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,sBAAsB,MACzB,EAAE,UAAU,aAAa,eAAe;CACvC,MAAM,CAAC,cAAc,YAAY,WAAW,iBAAiB,YAAY;AAEzE,iBAAgB;AACd,MAAI,CAAC,QAAQ,aAAa,aAAa,CACrC,YAAW,aAAa;IAEzB,CAAC,aAAa,CAAC;AAElB,QAAO,cACL,qBAACA;EAAQ,KAAK;aACX,aAAa,KAAK,MAAM,UACvB,qBAACA;GACC,OAAO;GACP,KAAK;GACL;GAEA,OAAO;;IAEP,oBAACC;KACW;KACV,WAAW,UAAU;AACnB,eAAS;OAAE;OAAO,MAAM;OAAO,MAAM;OAAqB,CAAC;;KAE7D,SAAS;MACP;OAAE,OAAO;OAAU,OAAO;OAAU;MACpC;OAAE,OAAO;OAAS,OAAO;OAAQ;MACjC;OAAE,OAAO;OAAU,OAAO;OAAa;MACxC;KACD,OAAO,EAAE,OAAO,KAAK;KACrB,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,KAAK,EAAE,EAAE;KAC5C,OAAO,KAAK;MACZ;IACF,oBAACC;KACW;KACV,WAAW,MAAM;AACf,eAAS;OAAE;OAAO,SAAS;OAAG,MAAM;OAAiB,CAAC;;KAExD,aAAa,KAAK,SAAS,SAAS,eAAe;KACnD,OAAO,KAAK;MACZ;IACF,oBAACC;KACC,MAAM;KACN,eAAe;AACb,eAAS;OAAE;OAAO,MAAM;OAAiB,CAAC;;KAE5C,OAAM;KACN,SAAS;MACT;;KAhCG,GAAG,MAAM,GAAG,KAAK,UAiCd,CACV,EAEF,oBAACC;GACC;GACU;GACV,MAAM;GACN,eAAe;AAGb,aAAS;KACP,SAAS;MAAE,SAAS;MAAI,MAHV,aAAa,GAAG,GAAG,EAGM,SAAS,SAAS,cAAc;MAAQ;KAC/E,MAAM;KACP,CAAC;;aAEL;IAEQ;GACD,GACR;GAEN,QACD;AAED,oBAAoB,cAAc;AAElC,kCAAe"}
+{"version":3,"file":"EditableMessageList.mjs","names":["editableMessageMessages","Flexbox","Select","ControlInput","ActionIcon","Button"],"sources":["../../../src/chat/EditableMessageList/EditableMessageList.tsx"],"sourcesContent":["'use client';\n\nimport isEqual from 'fast-deep-equal';\nimport { Plus, Trash } from 'lucide-react';\nimport { memo, useEffect, useReducer } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Button from '@/Button';\nimport ControlInput from '@/EditableText/ControlInput';\nimport { Flexbox } from '@/Flex';\nimport Select from '@/Select';\nimport editableMessageMessages from '@/i18n/resources/en/editableMessage';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { messagesReducer } from './messageReducer';\nimport type { EditableMessageListProps } from './type';\n\nconst EditableMessageList = memo<EditableMessageListProps>(\n  ({ disabled, dataSources, onChange, texts }) => {\n    const [chatMessages, dispatch] = useReducer(messagesReducer, dataSources);\n    const { t } = useTranslation(editableMessageMessages);\n\n    const addPropsText = texts?.addProps ?? t('editableMessage.addProps');\n    const deleteText = texts?.delete ?? t('editableMessage.delete');\n    const inputPlaceholderText = texts?.inputPlaceholder ?? t('editableMessage.inputPlaceholder');\n    const outputPlaceholderText =\n      texts?.outputPlaceholder ?? t('editableMessage.outputPlaceholder');\n    const systemText = texts?.system ?? t('editableMessage.system');\n    const inputText = texts?.input ?? t('editableMessage.input');\n    const outputText = texts?.output ?? t('editableMessage.output');\n\n    useEffect(() => {\n      if (!isEqual(dataSources, chatMessages)) {\n        onChange?.(chatMessages);\n      }\n    }, [chatMessages]);\n\n    return dataSources ? (\n      <Flexbox gap={12}>\n        {chatMessages.map((item, index) => (\n          <Flexbox\n            align={'center'}\n            gap={8}\n            horizontal\n            key={`${index}-${item.content}`}\n            width={'100%'}\n          >\n            <Select\n              disabled={disabled}\n              onChange={(value) => {\n                dispatch({ index, role: value, type: 'updateMessageRole' });\n              }}\n              options={[\n                { label: systemText, value: 'system' },\n                { label: inputText, value: 'user' },\n                { label: outputText, value: 'assistant' },\n              ]}\n              style={{ width: 120 }}\n              styles={{ popup: { root: { zIndex: 100 } } }}\n              value={item.role}\n            />\n            <ControlInput\n              disabled={disabled}\n              onChange={(e) => {\n                dispatch({ index, message: e, type: 'updateMessage' });\n              }}\n              placeholder={item.role === 'user' ? inputPlaceholderText : outputPlaceholderText}\n              value={item.content}\n            />\n            <ActionIcon\n              icon={Trash}\n              onClick={() => {\n                dispatch({ index, type: 'deleteMessage' });\n              }}\n              title={deleteText}\n              variant={'filled'}\n            />\n          </Flexbox>\n        ))}\n\n        <Button\n          block\n          disabled={disabled}\n          icon={Plus}\n          onClick={() => {\n            const lastMeg = chatMessages.at(-1);\n\n            dispatch({\n              message: { content: '', role: lastMeg?.role === 'user' ? 'assistant' : 'user' },\n              type: 'addMessage',\n            });\n          }}\n        >\n          {addPropsText}\n        </Button>\n      </Flexbox>\n    ) : undefined;\n  },\n  isEqual,\n);\n\nEditableMessageList.displayName = 'EditableMessageList';\n\nexport default EditableMessageList;\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,sBAAsB,MACzB,EAAE,UAAU,aAAa,UAAU,YAAY;CAC9C,MAAM,CAAC,cAAc,YAAY,WAAW,iBAAiB,YAAY;CACzE,MAAM,EAAE,MAAM,eAAeA,wBAAwB;CAErD,MAAM,eAAe,OAAO,YAAY,EAAE,2BAA2B;CACrE,MAAM,aAAa,OAAO,UAAU,EAAE,yBAAyB;CAC/D,MAAM,uBAAuB,OAAO,oBAAoB,EAAE,mCAAmC;CAC7F,MAAM,wBACJ,OAAO,qBAAqB,EAAE,oCAAoC;CACpE,MAAM,aAAa,OAAO,UAAU,EAAE,yBAAyB;CAC/D,MAAM,YAAY,OAAO,SAAS,EAAE,wBAAwB;CAC5D,MAAM,aAAa,OAAO,UAAU,EAAE,yBAAyB;AAE/D,iBAAgB;AACd,MAAI,CAAC,QAAQ,aAAa,aAAa,CACrC,YAAW,aAAa;IAEzB,CAAC,aAAa,CAAC;AAElB,QAAO,cACL,qBAACC;EAAQ,KAAK;aACX,aAAa,KAAK,MAAM,UACvB,qBAACA;GACC,OAAO;GACP,KAAK;GACL;GAEA,OAAO;;IAEP,oBAACC;KACW;KACV,WAAW,UAAU;AACnB,eAAS;OAAE;OAAO,MAAM;OAAO,MAAM;OAAqB,CAAC;;KAE7D,SAAS;MACP;OAAE,OAAO;OAAY,OAAO;OAAU;MACtC;OAAE,OAAO;OAAW,OAAO;OAAQ;MACnC;OAAE,OAAO;OAAY,OAAO;OAAa;MAC1C;KACD,OAAO,EAAE,OAAO,KAAK;KACrB,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,KAAK,EAAE,EAAE;KAC5C,OAAO,KAAK;MACZ;IACF,oBAACC;KACW;KACV,WAAW,MAAM;AACf,eAAS;OAAE;OAAO,SAAS;OAAG,MAAM;OAAiB,CAAC;;KAExD,aAAa,KAAK,SAAS,SAAS,uBAAuB;KAC3D,OAAO,KAAK;MACZ;IACF,oBAACC;KACC,MAAM;KACN,eAAe;AACb,eAAS;OAAE;OAAO,MAAM;OAAiB,CAAC;;KAE5C,OAAO;KACP,SAAS;MACT;;KAhCG,GAAG,MAAM,GAAG,KAAK,UAiCd,CACV,EAEF,oBAACC;GACC;GACU;GACV,MAAM;GACN,eAAe;AAGb,aAAS;KACP,SAAS;MAAE,SAAS;MAAI,MAHV,aAAa,GAAG,GAAG,EAGM,SAAS,SAAS,cAAc;MAAQ;KAC/E,MAAM;KACP,CAAC;;aAGH;IACM;GACD,GACR;GAEN,QACD;AAED,oBAAoB,cAAc;AAElC,kCAAe"}

package/es/chat/EditableMessageList/type.d.mts

@@ -6,6 +6,15 @@ interface EditableMessageListProps {
   dataSources: LLMMessage[];
   disabled?: boolean;
   onChange?: (chatMessages: LLMMessage[]) => void;
+  texts?: {
+    addProps?: string;
+    delete?: string;
+    input?: string;
+    inputPlaceholder?: string;
+    output?: string;
+    outputPlaceholder?: string;
+    system?: string;
+  };
 }
 //#endregion
 export { EditableMessageListProps };

package/es/chat/MessageInput/MessageInput.d.mts

@@ -1,8 +1,8 @@
 import { MessageInputProps } from "./type.mjs";
-import * as react127 from "react";
+import * as react111 from "react";
 
 //#region src/chat/MessageInput/MessageInput.d.ts
-declare const MessageInput: react127.NamedExoticComponent<MessageInputProps>;
+declare const MessageInput: react111.NamedExoticComponent<MessageInputProps>;
 //#endregion
 export { MessageInput };
 //# sourceMappingURL=MessageInput.d.mts.map

package/es/chat/MessageModal/MessageModal.d.mts

@@ -1,8 +1,8 @@
 import { MessageModalProps } from "./type.mjs";
-import * as react129 from "react";
+import * as react114 from "react";
 
 //#region src/chat/MessageModal/MessageModal.d.ts
-declare const MessageModal: react129.NamedExoticComponent<MessageModalProps>;
+declare const MessageModal: react114.NamedExoticComponent<MessageModalProps>;
 //#endregion
 export { MessageModal };
 //# sourceMappingURL=MessageModal.d.mts.map

package/es/chat/MessageModal/MessageModal.mjs

@@ -4,9 +4,11 @@ import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Button_default from "../../Button/Button.mjs";
 import CodeEditor_default from "../../CodeEditor/CodeEditor.mjs";
 import TextArea_default from "../../Input/TextArea.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
 import Modal_default from "../../Modal/Modal.mjs";
 import Markdown_default from "../../Markdown/Markdown.mjs";
 import { useStyles } from "../MessageInput/style.mjs";
+import messageModal_default from "../../i18n/resources/en/messageModal.mjs";
 import { memo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import useMergeState from "use-merge-value";
@@ -16,6 +18,7 @@ import { useResponsive } from "antd-style";
 const MessageModal = memo(({ panelRef, editing, open, height = "75vh", onOpenChange, onEditingChange, placeholder, value, language = "markdown", onChange, text, footer, extra }) => {
 	const { mobile } = useResponsive();
 	const { styles: textStyles } = useStyles();
+	const { t } = useTranslation(messageModal_default);
 	const [isEdit, setTyping] = useMergeState(false, {
 		onChange: onEditingChange,
 		value: editing
@@ -25,32 +28,34 @@ const MessageModal = memo(({ panelRef, editing, open, height = "75vh", onOpenCha
 		value: open
 	});
 	const [temporaryValue, setMessage] = useState(value);
-	const modalFooter = isEdit ? /* @__PURE__ */ jsxs(FlexBasic_default, {
-		direction: "horizontal-reverse",
-		gap: 8,
-		children: [/* @__PURE__ */ jsx(Button_default, {
-			onClick: () => {
-				setTyping(false);
-				onChange?.(temporaryValue);
-				setMessage(value);
-			},
-			type: "primary",
-			children: text?.confirm || "Confirm"
-		}), /* @__PURE__ */ jsx(Button_default, {
-			onClick: () => {
-				setTyping(false);
-				setMessage(value);
-			},
-			children: text?.cancel || "Cancel"
-		})]
-	}) : footer;
+	const confirmText = text?.confirm ?? t("messageModal.confirm");
+	const cancelText = text?.cancel ?? t("messageModal.cancel");
+	const editText = text?.edit ?? t("messageModal.edit");
 	return /* @__PURE__ */ jsx(Modal_default, {
 		allowFullscreen: true,
-		cancelText: text?.cancel || "Cancel",
+		cancelText,
 		destroyOnHidden: true,
-		footer: modalFooter,
+		footer: isEdit ? /* @__PURE__ */ jsxs(FlexBasic_default, {
+			direction: "horizontal-reverse",
+			gap: 8,
+			children: [/* @__PURE__ */ jsx(Button_default, {
+				onClick: () => {
+					setTyping(false);
+					onChange?.(temporaryValue);
+					setMessage(value);
+				},
+				type: "primary",
+				children: confirmText
+			}), /* @__PURE__ */ jsx(Button_default, {
+				onClick: () => {
+					setTyping(false);
+					setMessage(value);
+				},
+				children: cancelText
+			})]
+		}) : footer,
 		height,
-		okText: text?.edit || "Edit",
+		okText: editText,
 		onCancel: () => {
 			setShowModal(false);
 			setTyping(false);

package/es/chat/MessageModal/MessageModal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MessageModal.mjs","names":["useTextStyles","useControlledState","Flexbox","Button","Modal","TextArea","value","CodeEditor","Markdown"],"sources":["../../../src/chat/MessageModal/MessageModal.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Button from '@/Button';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport TextArea from '@/Input/TextArea';\nimport Markdown from '@/Markdown';\nimport Modal from '@/Modal';\nimport { useStyles as useTextStyles } from '@/chat/MessageInput/style';\n\nimport type { MessageModalProps } from './type';\n\nconst MessageModal = memo<MessageModalProps>(\n  ({\n    panelRef,\n    editing,\n    open,\n    height = '75vh',\n    onOpenChange,\n    onEditingChange,\n    placeholder,\n    value,\n    language = 'markdown',\n    onChange,\n    text,\n    footer,\n    extra,\n  }) => {\n    const { mobile } = useResponsive();\n    const { styles: textStyles } = useTextStyles();\n    const [isEdit, setTyping] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    const [showModal, setShowModal] = useControlledState(false, {\n      onChange: onOpenChange,\n      value: open,\n    });\n\n    const [temporaryValue, setMessage] = useState(value);\n\n    const modalFooter = isEdit ? (\n      <Flexbox direction={'horizontal-reverse'} gap={8}>\n        <Button\n          onClick={() => {\n            setTyping(false);\n            onChange?.(temporaryValue);\n            setMessage(value);\n          }}\n          type=\"primary\"\n        >\n          {text?.confirm || 'Confirm'}\n        </Button>\n        <Button\n          onClick={() => {\n            setTyping(false);\n            setMessage(value);\n          }}\n        >\n          {text?.cancel || 'Cancel'}\n        </Button>\n      </Flexbox>\n    ) : (\n      footer\n    );\n\n    return (\n      <Modal\n        allowFullscreen\n        cancelText={text?.cancel || 'Cancel'}\n        destroyOnHidden\n        footer={modalFooter}\n        height={height}\n        okText={text?.edit || 'Edit'}\n        onCancel={() => {\n          setShowModal(false);\n          setTyping(false);\n          setMessage(value);\n        }}\n        onOk={() => setTyping(true)}\n        open={showModal}\n        panelRef={panelRef}\n        title={text?.title}\n      >\n        {isEdit ? (\n          mobile ? (\n            <TextArea\n              autoSize\n              className={textStyles}\n              defaultValue={temporaryValue}\n              onBlur={(e) => setMessage(e.target.value)}\n              onChange={(value) => setMessage(value.target.value)}\n              placeholder={placeholder}\n              value={temporaryValue}\n              variant={'borderless'}\n            />\n          ) : (\n            <CodeEditor\n              className={textStyles}\n              defaultValue={temporaryValue}\n              language={language}\n              onBlur={(e) => setMessage(e.target.value)}\n              onValueChange={(value) => setMessage(value)}\n              placeholder={placeholder}\n              value={temporaryValue}\n              variant={'borderless'}\n            />\n          )\n        ) : (\n          <>\n            {extra}\n            <Markdown variant={'chat'}>{String(value || placeholder)}</Markdown>\n          </>\n        )}\n      </Modal>\n    );\n  },\n);\n\nMessageModal.displayName = 'MessageModal';\n\nexport default MessageModal;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,eAAe,MAClB,EACC,UACA,SACA,MACA,SAAS,QACT,cACA,iBACA,aACA,OACA,WAAW,YACX,UACA,MACA,QACA,YACI;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,eAAeA,WAAe;CAC9C,MAAM,CAAC,QAAQ,aAAaC,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,WAAW,gBAAgBA,cAAmB,OAAO;EAC1D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,gBAAgB,cAAc,SAAS,MAAM;CAEpD,MAAM,cAAc,SAClB,qBAACC;EAAQ,WAAW;EAAsB,KAAK;aAC7C,oBAACC;GACC,eAAe;AACb,cAAU,MAAM;AAChB,eAAW,eAAe;AAC1B,eAAW,MAAM;;GAEnB,MAAK;aAEJ,MAAM,WAAW;IACX,EACT,oBAACA;GACC,eAAe;AACb,cAAU,MAAM;AAChB,eAAW,MAAM;;aAGlB,MAAM,UAAU;IACV;GACD,GAEV;AAGF,QACE,oBAACC;EACC;EACA,YAAY,MAAM,UAAU;EAC5B;EACA,QAAQ;EACA;EACR,QAAQ,MAAM,QAAQ;EACtB,gBAAgB;AACd,gBAAa,MAAM;AACnB,aAAU,MAAM;AAChB,cAAW,MAAM;;EAEnB,YAAY,UAAU,KAAK;EAC3B,MAAM;EACI;EACV,OAAO,MAAM;YAEZ,SACC,SACE,oBAACC;GACC;GACA,WAAW;GACX,cAAc;GACd,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,WAAW,YAAU,WAAWC,QAAM,OAAO,MAAM;GACtC;GACb,OAAO;GACP,SAAS;IACT,GAEF,oBAACC;GACC,WAAW;GACX,cAAc;GACJ;GACV,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,gBAAgB,YAAU,WAAWD,QAAM;GAC9B;GACb,OAAO;GACP,SAAS;IACT,GAGJ,8CACG,OACD,oBAACE;GAAS,SAAS;aAAS,OAAO,SAAS,YAAY;IAAY,IACnE;GAEC;EAGb;AAED,aAAa,cAAc;AAE3B,2BAAe"}
+{"version":3,"file":"MessageModal.mjs","names":["useTextStyles","messageModalMessages","useControlledState","Modal","Flexbox","Button","TextArea","value","CodeEditor","Markdown"],"sources":["../../../src/chat/MessageModal/MessageModal.tsx"],"sourcesContent":["'use client';\n\nimport { useResponsive } from 'antd-style';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport Button from '@/Button';\nimport CodeEditor from '@/CodeEditor';\nimport { Flexbox } from '@/Flex';\nimport TextArea from '@/Input/TextArea';\nimport Markdown from '@/Markdown';\nimport Modal from '@/Modal';\nimport { useStyles as useTextStyles } from '@/chat/MessageInput/style';\nimport messageModalMessages from '@/i18n/resources/en/messageModal';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport type { MessageModalProps } from './type';\n\nconst MessageModal = memo<MessageModalProps>(\n  ({\n    panelRef,\n    editing,\n    open,\n    height = '75vh',\n    onOpenChange,\n    onEditingChange,\n    placeholder,\n    value,\n    language = 'markdown',\n    onChange,\n    text,\n    footer,\n    extra,\n  }) => {\n    const { mobile } = useResponsive();\n    const { styles: textStyles } = useTextStyles();\n    const { t } = useTranslation(messageModalMessages);\n    const [isEdit, setTyping] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    const [showModal, setShowModal] = useControlledState(false, {\n      onChange: onOpenChange,\n      value: open,\n    });\n\n    const [temporaryValue, setMessage] = useState(value);\n\n    const confirmText = text?.confirm ?? t('messageModal.confirm');\n    const cancelText = text?.cancel ?? t('messageModal.cancel');\n    const editText = text?.edit ?? t('messageModal.edit');\n\n    const modalFooter = isEdit ? (\n      <Flexbox direction={'horizontal-reverse'} gap={8}>\n        <Button\n          onClick={() => {\n            setTyping(false);\n            onChange?.(temporaryValue);\n            setMessage(value);\n          }}\n          type=\"primary\"\n        >\n          {confirmText}\n        </Button>\n        <Button\n          onClick={() => {\n            setTyping(false);\n            setMessage(value);\n          }}\n        >\n          {cancelText}\n        </Button>\n      </Flexbox>\n    ) : (\n      footer\n    );\n\n    return (\n      <Modal\n        allowFullscreen\n        cancelText={cancelText}\n        destroyOnHidden\n        footer={modalFooter}\n        height={height}\n        okText={editText}\n        onCancel={() => {\n          setShowModal(false);\n          setTyping(false);\n          setMessage(value);\n        }}\n        onOk={() => setTyping(true)}\n        open={showModal}\n        panelRef={panelRef}\n        title={text?.title}\n      >\n        {isEdit ? (\n          mobile ? (\n            <TextArea\n              autoSize\n              className={textStyles}\n              defaultValue={temporaryValue}\n              onBlur={(e) => setMessage(e.target.value)}\n              onChange={(value) => setMessage(value.target.value)}\n              placeholder={placeholder}\n              value={temporaryValue}\n              variant={'borderless'}\n            />\n          ) : (\n            <CodeEditor\n              className={textStyles}\n              defaultValue={temporaryValue}\n              language={language}\n              onBlur={(e) => setMessage(e.target.value)}\n              onValueChange={(value) => setMessage(value)}\n              placeholder={placeholder}\n              value={temporaryValue}\n              variant={'borderless'}\n            />\n          )\n        ) : (\n          <>\n            {extra}\n            <Markdown variant={'chat'}>{String(value || placeholder)}</Markdown>\n          </>\n        )}\n      </Modal>\n    );\n  },\n);\n\nMessageModal.displayName = 'MessageModal';\n\nexport default MessageModal;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,eAAe,MAClB,EACC,UACA,SACA,MACA,SAAS,QACT,cACA,iBACA,aACA,OACA,WAAW,YACX,UACA,MACA,QACA,YACI;CACJ,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,eAAeA,WAAe;CAC9C,MAAM,EAAE,MAAM,eAAeC,qBAAqB;CAClD,MAAM,CAAC,QAAQ,aAAaC,cAAmB,OAAO;EACpD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,WAAW,gBAAgBA,cAAmB,OAAO;EAC1D,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,CAAC,gBAAgB,cAAc,SAAS,MAAM;CAEpD,MAAM,cAAc,MAAM,WAAW,EAAE,uBAAuB;CAC9D,MAAM,aAAa,MAAM,UAAU,EAAE,sBAAsB;CAC3D,MAAM,WAAW,MAAM,QAAQ,EAAE,oBAAoB;AA2BrD,QACE,oBAACC;EACC;EACY;EACZ;EACA,QA9BgB,SAClB,qBAACC;GAAQ,WAAW;GAAsB,KAAK;cAC7C,oBAACC;IACC,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,eAAe;AAC1B,gBAAW,MAAM;;IAEnB,MAAK;cAEJ;KACM,EACT,oBAACA;IACC,eAAe;AACb,eAAU,MAAM;AAChB,gBAAW,MAAM;;cAGlB;KACM;IACD,GAEV;EASU;EACR,QAAQ;EACR,gBAAgB;AACd,gBAAa,MAAM;AACnB,aAAU,MAAM;AAChB,cAAW,MAAM;;EAEnB,YAAY,UAAU,KAAK;EAC3B,MAAM;EACI;EACV,OAAO,MAAM;YAEZ,SACC,SACE,oBAACC;GACC;GACA,WAAW;GACX,cAAc;GACd,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,WAAW,YAAU,WAAWC,QAAM,OAAO,MAAM;GACtC;GACb,OAAO;GACP,SAAS;IACT,GAEF,oBAACC;GACC,WAAW;GACX,cAAc;GACJ;GACV,SAAS,MAAM,WAAW,EAAE,OAAO,MAAM;GACzC,gBAAgB,YAAU,WAAWD,QAAM;GAC9B;GACb,OAAO;GACP,SAAS;IACT,GAGJ,8CACG,OACD,oBAACE;GAAS,SAAS;aAAS,OAAO,SAAS,YAAY;IAAY,IACnE;GAEC;EAGb;AAED,aAAa,cAAc;AAE3B,2BAAe"}