@lobehub/ui 5.23.5 → 5.25.0

package/es/mobile/ChatHeader/ChatHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.mjs","names":["Flexbox","MobileSafeArea"],"sources":["../../../src/mobile/ChatHeader/ChatHeader.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft } from 'lucide-react';\nimport { memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport MobileSafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport type { ChatHeaderProps } from './type';\n\nconst ChatHeader = memo<ChatHeaderProps>(\n  ({\n    ref,\n    className,\n    safeArea = true,\n    style,\n    center,\n    left,\n    right,\n    gaps,\n    classNames,\n    onBackClick,\n    showBackButton,\n    styles: custmStyles,\n    children,\n    ...rest\n  }) => {\n    return (\n      <Flexbox\n        as={'header'}\n        className={cx(styles.container, className)}\n        ref={ref}\n        style={style}\n        {...rest}\n      >\n        {safeArea && <MobileSafeArea position={'top'} />}\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={styles.inner}\n          flex={1}\n          justify={'space-between'}\n        >\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={cx(styles.left, classNames?.left)}\n            flex={1}\n            gap={gaps?.left}\n            style={custmStyles?.left}\n          >\n            {showBackButton && <ActionIcon icon={ChevronLeft} onClick={() => onBackClick?.()} />}\n            {left}\n          </Flexbox>\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={cx(styles.center, classNames?.center)}\n            flex={1}\n            gap={gaps?.center}\n            justify={'center'}\n            style={custmStyles?.center}\n          >\n            {children}\n            {center}\n          </Flexbox>\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={cx(styles.right, classNames?.right)}\n            flex={1}\n            gap={gaps?.right}\n            style={custmStyles?.right}\n          >\n            {right}\n          </Flexbox>\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nChatHeader.displayName = 'ChatHeader';\n\nexport default ChatHeader;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,aAAa,MAChB,EACC,KACA,WACA,WAAW,MACX,OACA,QACA,MACA,OACA,MACA,YACA,aACA,gBACA,QAAQ,aACR,UACA,GAAG,WACC;CACJ,OACE,qBAACA,mBAAD;EACE,IAAI;EACJ,WAAW,GAAG,OAAO,WAAW,SAAS;EACpC;EACE;EACP,GAAI;YALN,CAOG,YAAY,oBAACC,UAAD,EAAgB,UAAU,MAAQ,CAAA,GAC/C,qBAACD,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,OAAO;GAClB,MAAM;GACN,SAAS;aALX;IAOE,qBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,GAAG,OAAO,MAAM,YAAY,IAAI;KAC3C,MAAM;KACN,KAAK,MAAM;KACX,OAAO,aAAa;eANtB,CAQG,kBAAkB,oBAAC,YAAD;MAAY,MAAM;MAAa,eAAe,cAAc;KAAI,CAAA,GAClF,IACM;;IACT,qBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,GAAG,OAAO,QAAQ,YAAY,MAAM;KAC/C,MAAM;KACN,KAAK,MAAM;KACX,SAAS;KACT,OAAO,aAAa;eAPtB,CASG,UACA,MACM;;IACT,oBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;KAC7C,MAAM;KACN,KAAK,MAAM;KACX,OAAO,aAAa;eAEnB;IACM,CAAA;GACF;IACF;;AAEb,CACF;AAEA,WAAW,cAAc"}
+{"version":3,"file":"ChatHeader.mjs","names":["Flexbox","MobileSafeArea"],"sources":["../../../src/mobile/ChatHeader/ChatHeader.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronLeft } from 'lucide-react';\nimport { memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport MobileSafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport type { ChatHeaderProps } from './type';\n\nconst ChatHeader = memo<ChatHeaderProps>(\n  ({\n    ref,\n    className,\n    safeArea = true,\n    style,\n    center,\n    left,\n    right,\n    gaps,\n    classNames,\n    onBackClick,\n    showBackButton,\n    styles: custmStyles,\n    children,\n    ...rest\n  }) => {\n    return (\n      <Flexbox\n        as={'header'}\n        className={cx(styles.container, className)}\n        ref={ref}\n        style={style}\n        {...rest}\n      >\n        {safeArea && <MobileSafeArea position={'top'} />}\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={styles.inner}\n          flex={1}\n          justify={'space-between'}\n        >\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={cx(styles.left, classNames?.left)}\n            flex={1}\n            gap={gaps?.left}\n            style={custmStyles?.left}\n          >\n            {showBackButton && <ActionIcon icon={ChevronLeft} onClick={() => onBackClick?.()} />}\n            {left}\n          </Flexbox>\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={cx(styles.center, classNames?.center)}\n            flex={1}\n            gap={gaps?.center}\n            justify={'center'}\n            style={custmStyles?.center}\n          >\n            {children}\n            {center}\n          </Flexbox>\n          <Flexbox\n            horizontal\n            align={'center'}\n            className={cx(styles.right, classNames?.right)}\n            flex={1}\n            gap={gaps?.right}\n            style={custmStyles?.right}\n          >\n            {right}\n          </Flexbox>\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nChatHeader.displayName = 'ChatHeader';\n\nexport default ChatHeader;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,aAAa,MAChB,EACC,KACA,WACA,WAAW,MACX,OACA,QACA,MACA,OACA,MACA,YACA,aACA,gBACA,QAAQ,aACR,UACA,GAAG,WACC;CACJ,OACE,qBAACA,mBAAD;EACE,IAAI;EACJ,WAAW,GAAG,OAAO,WAAW,SAAS;EACpC;EACE;EACP,GAAI;EALN,UAAA,CAOG,YAAY,oBAACC,UAAD,EAAgB,UAAU,MAAQ,CAAA,GAC/C,qBAACD,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,OAAO;GAClB,MAAM;GACN,SAAS;GALX,UAAA;IAOE,qBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,GAAG,OAAO,MAAM,YAAY,IAAI;KAC3C,MAAM;KACN,KAAK,MAAM;KACX,OAAO,aAAa;KANtB,UAAA,CAQG,kBAAkB,oBAAC,YAAD;MAAY,MAAM;MAAa,eAAe,cAAc;KAAI,CAAA,GAClF,IACM;;IACT,qBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,GAAG,OAAO,QAAQ,YAAY,MAAM;KAC/C,MAAM;KACN,KAAK,MAAM;KACX,SAAS;KACT,OAAO,aAAa;KAPtB,UAAA,CASG,UACA,MACM;;IACT,oBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;KAC7C,MAAM;KACN,KAAK,MAAM;KACX,OAAO,aAAa;KAEnB,UAAA;IACM,CAAA;GACF;EACF,CAAA,CAAA;;AAEb,CACF;AAEA,WAAW,cAAc"}

package/es/mobile/ChatHeader/ChatHeaderTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatHeaderTitle.mjs","names":["Flexbox","styles"],"sources":["../../../src/mobile/ChatHeader/ChatHeaderTitle.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { titleStyles as styles } from './style';\nimport type { ChatHeaderTitleProps } from './type';\n\nconst ChatHeaderTitle = memo<ChatHeaderTitleProps>(({ title, desc, tag }) => {\n  if (desc)\n    return (\n      <Flexbox align={'center'} flex={1} gap={4} justify={'center'}>\n        <Flexbox horizontal align={'center'} className={styles.titleContainer} gap={4}>\n          <div className={styles.titleWithDesc}>{title}</div>\n          {tag && (\n            <Flexbox horizontal className={styles.tag}>\n              {tag}\n            </Flexbox>\n          )}\n        </Flexbox>\n        <Flexbox horizontal align={'center'}>\n          <div className={styles.desc}>{desc}</div>\n        </Flexbox>\n      </Flexbox>\n    );\n  return (\n    <Flexbox horizontal align={'center'} flex={1} gap={4} justify={'center'}>\n      <div className={styles.title}>{title}</div>\n      <Flexbox horizontal className={styles.tag}>\n        {tag}\n      </Flexbox>\n    </Flexbox>\n  );\n});\n\nChatHeaderTitle.displayName = 'ChatHeaderTitle';\n\nexport default ChatHeaderTitle;\n"],"mappings":";;;;;;AASA,MAAM,kBAAkB,MAA4B,EAAE,OAAO,MAAM,UAAU;CAC3E,IAAI,MACF,OACE,qBAACA,mBAAD;EAAS,OAAO;EAAU,MAAM;EAAG,KAAK;EAAG,SAAS;YAApD,CACE,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,WAAWC,YAAO;GAAgB,KAAK;aAA5E,CACE,oBAAC,OAAD;IAAK,WAAWA,YAAO;cAAgB;GAAW,CAAA,GACjD,OACC,oBAACD,mBAAD;IAAS,YAAA;IAAW,WAAWC,YAAO;cACnC;GACM,CAAA,CAEJ;MACT,oBAACD,mBAAD;GAAS,YAAA;GAAW,OAAO;aACzB,oBAAC,OAAD;IAAK,WAAWC,YAAO;cAAO;GAAU,CAAA;EACjC,CAAA,CACF;;CAEb,OACE,qBAACD,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,MAAM;EAAG,KAAK;EAAG,SAAS;YAA/D,CACE,oBAAC,OAAD;GAAK,WAAWC,YAAO;aAAQ;EAAW,CAAA,GAC1C,oBAACD,mBAAD;GAAS,YAAA;GAAW,WAAWC,YAAO;aACnC;EACM,CAAA,CACF;;AAEb,CAAC;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"ChatHeaderTitle.mjs","names":["Flexbox","styles"],"sources":["../../../src/mobile/ChatHeader/ChatHeaderTitle.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { titleStyles as styles } from './style';\nimport type { ChatHeaderTitleProps } from './type';\n\nconst ChatHeaderTitle = memo<ChatHeaderTitleProps>(({ title, desc, tag }) => {\n  if (desc)\n    return (\n      <Flexbox align={'center'} flex={1} gap={4} justify={'center'}>\n        <Flexbox horizontal align={'center'} className={styles.titleContainer} gap={4}>\n          <div className={styles.titleWithDesc}>{title}</div>\n          {tag && (\n            <Flexbox horizontal className={styles.tag}>\n              {tag}\n            </Flexbox>\n          )}\n        </Flexbox>\n        <Flexbox horizontal align={'center'}>\n          <div className={styles.desc}>{desc}</div>\n        </Flexbox>\n      </Flexbox>\n    );\n  return (\n    <Flexbox horizontal align={'center'} flex={1} gap={4} justify={'center'}>\n      <div className={styles.title}>{title}</div>\n      <Flexbox horizontal className={styles.tag}>\n        {tag}\n      </Flexbox>\n    </Flexbox>\n  );\n});\n\nChatHeaderTitle.displayName = 'ChatHeaderTitle';\n\nexport default ChatHeaderTitle;\n"],"mappings":";;;;;;AASA,MAAM,kBAAkB,MAA4B,EAAE,OAAO,MAAM,UAAU;CAC3E,IAAI,MACF,OACE,qBAACA,mBAAD;EAAS,OAAO;EAAU,MAAM;EAAG,KAAK;EAAG,SAAS;EAApD,UAAA,CACE,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,WAAWC,YAAO;GAAgB,KAAK;GAA5E,UAAA,CACE,oBAAC,OAAD;IAAK,WAAWA,YAAO;IAAgB,UAAA;GAAW,CAAA,GACjD,OACC,oBAACD,mBAAD;IAAS,YAAA;IAAW,WAAWC,YAAO;IACnC,UAAA;GACM,CAAA,CAEJ;EACT,CAAA,GAAA,oBAACD,mBAAD;GAAS,YAAA;GAAW,OAAO;GACzB,UAAA,oBAAC,OAAD;IAAK,WAAWC,YAAO;IAAO,UAAA;GAAU,CAAA;EACjC,CAAA,CACF;;CAEb,OACE,qBAACD,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,MAAM;EAAG,KAAK;EAAG,SAAS;EAA/D,UAAA,CACE,oBAAC,OAAD;GAAK,WAAWC,YAAO;GAAQ,UAAA;EAAW,CAAA,GAC1C,oBAACD,mBAAD;GAAS,YAAA;GAAW,WAAWC,YAAO;GACnC,UAAA;EACM,CAAA,CACF;;AAEb,CAAC;AAED,gBAAgB,cAAc"}

package/es/mobile/ChatInputArea/ChatInputArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInputArea.mjs","names":["Flexbox"],"sources":["../../../src/mobile/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { useSize } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport {\n  type FC,\n  memo,\n  type PropsWithChildren,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport ChatInputAreaInner from '@/chat/ChatInputArea/components/ChatInputAreaInner';\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport { type ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    topAddons,\n    textAreaLeftAddons,\n    textAreaRightAddons,\n    bottomAddons,\n    expand = false,\n    setExpand,\n    onSend,\n    onInput,\n    loading,\n    value,\n    safeArea,\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const size = useSize(containerRef);\n    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n\n    useEffect(() => {\n      if (!size?.height) return;\n      setShowFullscreen(size.height > 72);\n    }, [size]);\n\n    const InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    > = useCallback(\n      ({ children, ...r }) =>\n        expand ? (\n          <Flexbox className={styles.inner} gap={8}>\n            <Flexbox horizontal gap={8} justify={'flex-end'}>\n              {r.textAreaLeftAddons}\n              {r.textAreaRightAddons}\n            </Flexbox>\n            {children}\n            {r.topAddons}\n            {r.bottomAddons}\n          </Flexbox>\n        ) : (\n          <Flexbox horizontal align={'flex-end'} className={styles.inner} gap={8}>\n            {r.textAreaLeftAddons}\n            {children}\n            {r.textAreaRightAddons}\n          </Flexbox>\n        ),\n      [expand, loading],\n    );\n\n    const showAddons = !expand && !isFocused;\n\n    return (\n      <Flexbox\n        className={cx(styles.container, expand && styles.expand, className)}\n        gap={12}\n        style={style}\n      >\n        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}\n        <Flexbox\n          className={cx(expand && styles.expand)}\n          ref={containerRef}\n          style={{ position: 'relative' }}\n        >\n          {showFullscreen && (\n            <ActionIcon\n              active\n              className={styles.expandButton}\n              icon={expand ? ChevronDown : ChevronUp}\n              id={'sssssss'}\n              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}\n              style={expand ? { top: 6 } : {}}\n              onClick={() => setExpand?.(!expand)}\n            />\n          )}\n          <InnerContainer\n            bottomAddons={bottomAddons}\n            textAreaLeftAddons={textAreaLeftAddons}\n            textAreaRightAddons={textAreaRightAddons}\n            topAddons={topAddons}\n          >\n            <ChatInputAreaInner\n              autoSize={expand ? false : { maxRows: 6, minRows: 1 }}\n              className={styles.expandTextArea}\n              loading={loading}\n              ref={ref}\n              style={{ height: 36, paddingBlock: 6 }}\n              value={value}\n              variant={expand ? 'borderless' : 'filled'}\n              onBlur={() => setIsFocused(false)}\n              onFocus={() => setIsFocused(true)}\n              onInput={onInput}\n              onSend={onSend}\n            />\n          </InnerContainer>\n        </Flexbox>\n        {bottomAddons && (\n          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>\n        )}\n        {safeArea && !isFocused && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nChatInputArea.displayName = 'ChatInputArea';\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,WACA,oBACA,qBACA,cACA,SAAS,OACT,WACA,QACA,SACA,SACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,OAAO,QAAQ,YAAY;CACjC,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,KAAK;CACnE,MAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;CAEzD,gBAAgB;EACd,IAAI,CAAC,MAAM,QAAQ;EACnB,kBAAkB,KAAK,SAAS,EAAE;CACpC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,iBAOF,aACD,EAAE,UAAU,GAAG,QACd,SACE,qBAACA,mBAAD;EAAS,WAAW,OAAO;EAAO,KAAK;YAAvC;GACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,KAAK;IAAG,SAAS;cAArC,CACG,EAAE,oBACF,EAAE,mBACI;;GACR;GACA,EAAE;GACF,EAAE;EACI;MAET,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAY,WAAW,OAAO;EAAO,KAAK;YAArE;GACG,EAAE;GACF;GACA,EAAE;EACI;KAEb,CAAC,QAAQ,OAAO,CAClB;CAEA,MAAM,aAAa,CAAC,UAAU,CAAC;CAE/B,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,OAAO,WAAW,UAAU,OAAO,QAAQ,SAAS;EAClE,KAAK;EACE;YAHT;GAKG,aAAa,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;cAAI;GAAmB,CAAA;GACzF,qBAACA,mBAAD;IACE,WAAW,GAAG,UAAU,OAAO,MAAM;IACrC,KAAK;IACL,OAAO,EAAE,UAAU,WAAW;cAHhC,CAKG,kBACC,oBAAC,YAAD;KACE,QAAA;KACA,WAAW,OAAO;KAClB,MAAM,SAAS,cAAc;KAC7B,IAAI;KACJ,MAAM;MAAE,WAAW;MAAI,cAAc;MAAO,MAAM;KAAG;KACrD,OAAO,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC;KAC9B,eAAe,YAAY,CAAC,MAAM;IACnC,CAAA,GAEH,oBAAC,gBAAD;KACgB;KACM;KACC;KACV;eAEX,oBAAC,oBAAD;MACE,UAAU,SAAS,QAAQ;OAAE,SAAS;OAAG,SAAS;MAAE;MACpD,WAAW,OAAO;MACT;MACJ;MACL,OAAO;OAAE,QAAQ;OAAI,cAAc;MAAE;MAC9B;MACP,SAAS,SAAS,eAAe;MACjC,cAAc,aAAa,KAAK;MAChC,eAAe,aAAa,IAAI;MACvB;MACD;KACT,CAAA;IACa,CAAA,CACT;;GACR,gBACC,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;cAAI;GAAsB,CAAA;GAE/E,YAAY,CAAC,aAAa,oBAAC,UAAD,EAAU,UAAU,SAAW,CAAA;EACnD;;AAEb,CACF;AAEA,cAAc,cAAc"}
+{"version":3,"file":"ChatInputArea.mjs","names":["Flexbox"],"sources":["../../../src/mobile/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { useSize } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport {\n  type FC,\n  memo,\n  type PropsWithChildren,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport ChatInputAreaInner from '@/chat/ChatInputArea/components/ChatInputAreaInner';\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport { type ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    topAddons,\n    textAreaLeftAddons,\n    textAreaRightAddons,\n    bottomAddons,\n    expand = false,\n    setExpand,\n    onSend,\n    onInput,\n    loading,\n    value,\n    safeArea,\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const size = useSize(containerRef);\n    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n\n    useEffect(() => {\n      if (!size?.height) return;\n      setShowFullscreen(size.height > 72);\n    }, [size]);\n\n    const InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    > = useCallback(\n      ({ children, ...r }) =>\n        expand ? (\n          <Flexbox className={styles.inner} gap={8}>\n            <Flexbox horizontal gap={8} justify={'flex-end'}>\n              {r.textAreaLeftAddons}\n              {r.textAreaRightAddons}\n            </Flexbox>\n            {children}\n            {r.topAddons}\n            {r.bottomAddons}\n          </Flexbox>\n        ) : (\n          <Flexbox horizontal align={'flex-end'} className={styles.inner} gap={8}>\n            {r.textAreaLeftAddons}\n            {children}\n            {r.textAreaRightAddons}\n          </Flexbox>\n        ),\n      [expand, loading],\n    );\n\n    const showAddons = !expand && !isFocused;\n\n    return (\n      <Flexbox\n        className={cx(styles.container, expand && styles.expand, className)}\n        gap={12}\n        style={style}\n      >\n        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}\n        <Flexbox\n          className={cx(expand && styles.expand)}\n          ref={containerRef}\n          style={{ position: 'relative' }}\n        >\n          {showFullscreen && (\n            <ActionIcon\n              active\n              className={styles.expandButton}\n              icon={expand ? ChevronDown : ChevronUp}\n              id={'sssssss'}\n              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}\n              style={expand ? { top: 6 } : {}}\n              onClick={() => setExpand?.(!expand)}\n            />\n          )}\n          <InnerContainer\n            bottomAddons={bottomAddons}\n            textAreaLeftAddons={textAreaLeftAddons}\n            textAreaRightAddons={textAreaRightAddons}\n            topAddons={topAddons}\n          >\n            <ChatInputAreaInner\n              autoSize={expand ? false : { maxRows: 6, minRows: 1 }}\n              className={styles.expandTextArea}\n              loading={loading}\n              ref={ref}\n              style={{ height: 36, paddingBlock: 6 }}\n              value={value}\n              variant={expand ? 'borderless' : 'filled'}\n              onBlur={() => setIsFocused(false)}\n              onFocus={() => setIsFocused(true)}\n              onInput={onInput}\n              onSend={onSend}\n            />\n          </InnerContainer>\n        </Flexbox>\n        {bottomAddons && (\n          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>\n        )}\n        {safeArea && !isFocused && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nChatInputArea.displayName = 'ChatInputArea';\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,WACA,oBACA,qBACA,cACA,SAAS,OACT,WACA,QACA,SACA,SACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,OAAO,QAAQ,YAAY;CACjC,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,KAAK;CACnE,MAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;CAEzD,gBAAgB;EACd,IAAI,CAAC,MAAM,QAAQ;EACnB,kBAAkB,KAAK,SAAS,EAAE;CACpC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,iBAOF,aACD,EAAE,UAAU,GAAG,QACd,SACE,qBAACA,mBAAD;EAAS,WAAW,OAAO;EAAO,KAAK;EAAvC,UAAA;GACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,KAAK;IAAG,SAAS;IAArC,UAAA,CACG,EAAE,oBACF,EAAE,mBACI;;GACR;GACA,EAAE;GACF,EAAE;EACI;CAET,CAAA,IAAA,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAY,WAAW,OAAO;EAAO,KAAK;EAArE,UAAA;GACG,EAAE;GACF;GACA,EAAE;EACI;CAEb,CAAA,GAAA,CAAC,QAAQ,OAAO,CAClB;CAEA,MAAM,aAAa,CAAC,UAAU,CAAC;CAE/B,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,OAAO,WAAW,UAAU,OAAO,QAAQ,SAAS;EAClE,KAAK;EACE;EAHT,UAAA;GAKG,aAAa,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAmB,CAAA;GACzF,qBAACA,mBAAD;IACE,WAAW,GAAG,UAAU,OAAO,MAAM;IACrC,KAAK;IACL,OAAO,EAAE,UAAU,WAAW;IAHhC,UAAA,CAKG,kBACC,oBAAC,YAAD;KACE,QAAA;KACA,WAAW,OAAO;KAClB,MAAM,SAAS,cAAc;KAC7B,IAAI;KACJ,MAAM;MAAE,WAAW;MAAI,cAAc;MAAO,MAAM;KAAG;KACrD,OAAO,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC;KAC9B,eAAe,YAAY,CAAC,MAAM;IACnC,CAAA,GAEH,oBAAC,gBAAD;KACgB;KACM;KACC;KACV;KAEX,UAAA,oBAAC,oBAAD;MACE,UAAU,SAAS,QAAQ;OAAE,SAAS;OAAG,SAAS;MAAE;MACpD,WAAW,OAAO;MACT;MACJ;MACL,OAAO;OAAE,QAAQ;OAAI,cAAc;MAAE;MAC9B;MACP,SAAS,SAAS,eAAe;MACjC,cAAc,aAAa,KAAK;MAChC,eAAe,aAAa,IAAI;MACvB;MACD;KACT,CAAA;IACa,CAAA,CACT;;GACR,gBACC,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAsB,CAAA;GAE/E,YAAY,CAAC,aAAa,oBAAC,UAAD,EAAU,UAAU,SAAW,CAAA;EACnD;;AAEb,CACF;AAEA,cAAc,cAAc"}

package/es/mobile/TabBar/TabBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.mjs","names":["Flexbox"],"sources":["../../../src/mobile/TabBar/TabBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport type { TabBarProps } from './type';\n\nconst TabBar = memo<TabBarProps>(\n  ({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {\n    const [currentActive, setCurrentActive] = useMergeState<string>(\n      defaultActiveKey || items[0].key,\n      {\n        defaultValue: defaultActiveKey,\n        onChange,\n        value: activeKey,\n      },\n    );\n\n    return (\n      <Flexbox as={'footer'} className={cx(styles.container, className)} ref={ref} {...rest}>\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.inner, className)}\n          justify={'space-around'}\n        >\n          {items.map((item) => {\n            const active = item.key === currentActive;\n            return (\n              <Flexbox\n                align={'center'}\n                className={cx(styles.tab, active && styles.active)}\n                gap={4}\n                justify={'center'}\n                key={item.key}\n                onClick={() => {\n                  setCurrentActive(item.key);\n                  item?.onClick?.();\n                }}\n              >\n                <Flexbox align={'center'} className={styles.icon} justify={'center'}>\n                  {typeof item.icon === 'function' ? item.icon(active) : item.icon}\n                </Flexbox>\n                <div className={styles.title}>\n                  {typeof item.title === 'function' ? item.title(active) : item.title}\n                </div>\n              </Flexbox>\n            );\n          })}\n        </Flexbox>\n        {safeArea && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nTabBar.displayName = 'MobileTabBar';\n\nexport default TabBar;\n"],"mappings":";;;;;;;;;AAYA,MAAM,SAAS,MACZ,EAAE,KAAK,WAAW,UAAU,OAAO,WAAW,kBAAkB,UAAU,GAAG,WAAW;CACvF,MAAM,CAAC,eAAe,oBAAoB,cACxC,oBAAoB,MAAM,EAAE,CAAC,KAC7B;EACE,cAAc;EACd;EACA,OAAO;CACT,CACF;CAEA,OACE,qBAACA,mBAAD;EAAS,IAAI;EAAU,WAAW,GAAG,OAAO,WAAW,SAAS;EAAQ;EAAK,GAAI;YAAjF,CACE,oBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,GAAG,OAAO,OAAO,SAAS;GACrC,SAAS;aAER,MAAM,KAAK,SAAS;IACnB,MAAM,SAAS,KAAK,QAAQ;IAC5B,OACE,qBAACA,mBAAD;KACE,OAAO;KACP,WAAW,GAAG,OAAO,KAAK,UAAU,OAAO,MAAM;KACjD,KAAK;KACL,SAAS;KAET,eAAe;MACb,iBAAiB,KAAK,GAAG;MACzB,MAAM,UAAU;KAClB;eATF,CAWE,oBAACA,mBAAD;MAAS,OAAO;MAAU,WAAW,OAAO;MAAM,SAAS;gBACxD,OAAO,KAAK,SAAS,aAAa,KAAK,KAAK,MAAM,IAAI,KAAK;KACrD,CAAA,GACT,oBAAC,OAAD;MAAK,WAAW,OAAO;gBACpB,OAAO,KAAK,UAAU,aAAa,KAAK,MAAM,MAAM,IAAI,KAAK;KAC3D,CAAA,CACE;OAZF,KAAK,GAYH;GAEb,CAAC;EACM,CAAA,GACR,YAAY,oBAAC,UAAD,EAAU,UAAU,SAAW,CAAA,CACrC;;AAEb,CACF;AAEA,OAAO,cAAc"}
+{"version":3,"file":"TabBar.mjs","names":["Flexbox"],"sources":["../../../src/mobile/TabBar/TabBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport type { TabBarProps } from './type';\n\nconst TabBar = memo<TabBarProps>(\n  ({ ref, className, safeArea, items, activeKey, defaultActiveKey, onChange, ...rest }) => {\n    const [currentActive, setCurrentActive] = useMergeState<string>(\n      defaultActiveKey || items[0].key,\n      {\n        defaultValue: defaultActiveKey,\n        onChange,\n        value: activeKey,\n      },\n    );\n\n    return (\n      <Flexbox as={'footer'} className={cx(styles.container, className)} ref={ref} {...rest}>\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.inner, className)}\n          justify={'space-around'}\n        >\n          {items.map((item) => {\n            const active = item.key === currentActive;\n            return (\n              <Flexbox\n                align={'center'}\n                className={cx(styles.tab, active && styles.active)}\n                gap={4}\n                justify={'center'}\n                key={item.key}\n                onClick={() => {\n                  setCurrentActive(item.key);\n                  item?.onClick?.();\n                }}\n              >\n                <Flexbox align={'center'} className={styles.icon} justify={'center'}>\n                  {typeof item.icon === 'function' ? item.icon(active) : item.icon}\n                </Flexbox>\n                <div className={styles.title}>\n                  {typeof item.title === 'function' ? item.title(active) : item.title}\n                </div>\n              </Flexbox>\n            );\n          })}\n        </Flexbox>\n        {safeArea && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nTabBar.displayName = 'MobileTabBar';\n\nexport default TabBar;\n"],"mappings":";;;;;;;;;AAYA,MAAM,SAAS,MACZ,EAAE,KAAK,WAAW,UAAU,OAAO,WAAW,kBAAkB,UAAU,GAAG,WAAW;CACvF,MAAM,CAAC,eAAe,oBAAoB,cACxC,oBAAoB,MAAM,EAAE,CAAC,KAC7B;EACE,cAAc;EACd;EACA,OAAO;CACT,CACF;CAEA,OACE,qBAACA,mBAAD;EAAS,IAAI;EAAU,WAAW,GAAG,OAAO,WAAW,SAAS;EAAQ;EAAK,GAAI;EAAjF,UAAA,CACE,oBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,GAAG,OAAO,OAAO,SAAS;GACrC,SAAS;GAER,UAAA,MAAM,KAAK,SAAS;IACnB,MAAM,SAAS,KAAK,QAAQ;IAC5B,OACE,qBAACA,mBAAD;KACE,OAAO;KACP,WAAW,GAAG,OAAO,KAAK,UAAU,OAAO,MAAM;KACjD,KAAK;KACL,SAAS;KAET,eAAe;MACb,iBAAiB,KAAK,GAAG;MACzB,MAAM,UAAU;KAClB;KATF,UAAA,CAWE,oBAACA,mBAAD;MAAS,OAAO;MAAU,WAAW,OAAO;MAAM,SAAS;MACxD,UAAA,OAAO,KAAK,SAAS,aAAa,KAAK,KAAK,MAAM,IAAI,KAAK;KACrD,CAAA,GACT,oBAAC,OAAD;MAAK,WAAW,OAAO;MACpB,UAAA,OAAO,KAAK,UAAU,aAAa,KAAK,MAAM,MAAM,IAAI,KAAK;KAC3D,CAAA,CACE;IAZF,GAAA,KAAK,GAYH;GAEb,CAAC;EACM,CAAA,GACR,YAAY,oBAAC,UAAD,EAAU,UAAU,SAAW,CAAA,CACrC;;AAEb,CACF;AAEA,OAAO,cAAc"}

package/es/storybook/StoryBook/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../../src/storybook/StoryBook/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { LevaPanel } from 'leva';\nimport { memo, type Ref } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\nimport { Center, Flexbox, type FlexboxProps } from '@/Flex';\n\nimport { styles } from './style';\n\nexport interface StoryBookProps extends FlexboxProps {\n  levaStore: any;\n  noPadding?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StoryBook = memo<StoryBookProps>(\n  ({ ref, levaStore, noPadding, className, children, ...rest }) => {\n    const { mobile } = useResponsive();\n\n    return (\n      <Flexbox\n        align={'stretch'}\n        className={cx(styles.editor, className)}\n        horizontal={!mobile}\n        justify={'stretch'}\n        ref={ref}\n      >\n        <Center className={cx(noPadding ? styles.left : styles.leftWithPadding)} flex={1} {...rest}>\n          {children}\n        </Center>\n        <DraggablePanel\n          className={styles.right}\n          minWidth={280}\n          placement={mobile ? 'bottom' : 'right'}\n        >\n          <div className={styles.leva}>\n            <LevaPanel fill flat store={levaStore} titleBar={false} />{' '}\n          </div>\n        </DraggablePanel>\n      </Flexbox>\n    );\n  },\n);\n\nStoryBook.displayName = 'StoryBook';\n\nexport default StoryBook;\n\nexport { useControls, useCreateStore } from 'leva';\n"],"mappings":";;;;;;;;;;AAiBA,MAAa,YAAY,MACtB,EAAE,KAAK,WAAW,WAAW,WAAW,UAAU,GAAG,WAAW;CAC/D,MAAM,EAAE,WAAW,cAAc;CAEjC,OACE,qBAACA,mBAAD;EACE,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,SAAS;EACtC,YAAY,CAAC;EACb,SAAS;EACJ;YALP,CAOE,oBAAC,QAAD;GAAQ,WAAW,GAAG,YAAY,OAAO,OAAO,OAAO,eAAe;GAAG,MAAM;GAAG,GAAI;GACnF;EACK,CAAA,GACR,oBAAC,gBAAD;GACE,WAAW,OAAO;GAClB,UAAU;GACV,WAAW,SAAS,WAAW;aAE/B,qBAAC,OAAD;IAAK,WAAW,OAAO;cAAvB,CACE,oBAAC,WAAD;KAAW,MAAA;KAAK,MAAA;KAAK,OAAO;KAAW,UAAU;IAAQ,CAAA,GAAE,GACxD;;EACS,CAAA,CACT;;AAEb,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../../src/storybook/StoryBook/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { LevaPanel } from 'leva';\nimport { memo, type Ref } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\nimport { Center, Flexbox, type FlexboxProps } from '@/Flex';\n\nimport { styles } from './style';\n\nexport interface StoryBookProps extends FlexboxProps {\n  levaStore: any;\n  noPadding?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StoryBook = memo<StoryBookProps>(\n  ({ ref, levaStore, noPadding, className, children, ...rest }) => {\n    const { mobile } = useResponsive();\n\n    return (\n      <Flexbox\n        align={'stretch'}\n        className={cx(styles.editor, className)}\n        horizontal={!mobile}\n        justify={'stretch'}\n        ref={ref}\n      >\n        <Center className={cx(noPadding ? styles.left : styles.leftWithPadding)} flex={1} {...rest}>\n          {children}\n        </Center>\n        <DraggablePanel\n          className={styles.right}\n          minWidth={280}\n          placement={mobile ? 'bottom' : 'right'}\n        >\n          <div className={styles.leva}>\n            <LevaPanel fill flat store={levaStore} titleBar={false} />{' '}\n          </div>\n        </DraggablePanel>\n      </Flexbox>\n    );\n  },\n);\n\nStoryBook.displayName = 'StoryBook';\n\nexport default StoryBook;\n\nexport { useControls, useCreateStore } from 'leva';\n"],"mappings":";;;;;;;;;;AAiBA,MAAa,YAAY,MACtB,EAAE,KAAK,WAAW,WAAW,WAAW,UAAU,GAAG,WAAW;CAC/D,MAAM,EAAE,WAAW,cAAc;CAEjC,OACE,qBAACA,mBAAD;EACE,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,SAAS;EACtC,YAAY,CAAC;EACb,SAAS;EACJ;EALP,UAAA,CAOE,oBAAC,QAAD;GAAQ,WAAW,GAAG,YAAY,OAAO,OAAO,OAAO,eAAe;GAAG,MAAM;GAAG,GAAI;GACnF;EACK,CAAA,GACR,oBAAC,gBAAD;GACE,WAAW,OAAO;GAClB,UAAU;GACV,WAAW,SAAS,WAAW;GAE/B,UAAA,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACE,oBAAC,WAAD;KAAW,MAAA;KAAK,MAAA;KAAK,OAAO;KAAW,UAAU;IAAQ,CAAA,GAAE,GACxD;;EACS,CAAA,CACT;;AAEb,CACF;AAEA,UAAU,cAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.23.5",
+  "version": "5.25.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -160,6 +160,7 @@
     "@splinetool/runtime": "1.12.98",
     "ahooks": "^3.9.7",
     "antd-style": "^4.1.0",
+    "beautiful-mermaid": "^1.1.3",
     "chroma-js": "^3.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -170,11 +171,10 @@
     "hast-util-to-jsx-runtime": "^2.3.6",
     "html-url-attributes": "^3.0.1",
     "immer": "^11.1.11",
-    "katex": "^0.16.45",
+    "katex": "^0.18.1",
     "leva": "^0.10.1",
     "lucide-react": "^1.24.0",
     "marked": "^18.0.6",
-    "mermaid": "^11.16.0",
     "motion": "^12.0.0",
     "numeral": "^2.0.6",
     "polished": "^4.3.1",
@@ -227,7 +227,6 @@
     "@testing-library/react": "^16.3.2",
     "@types/chroma-js": "^3.1.2",
     "@types/hast": "^3.0.5",
-    "@types/katex": "^0.16.8",
     "@types/mdx": "^2.0.14",
     "@types/node": "26.1.1",
     "@types/numeral": "^2.0.5",