@bothub-chat/ui 2.48.1-fix-message-dbd14831-26d9-4d49-85b2-65f0e64cfad3 → 2.48.2-develop-30a324f3-49c5-45da-a58f-44a7a3afc6f4

package/dist/components/message/video/styled.d.ts

@@ -3,7 +3,7 @@ export declare const MessageVideoControls: import("styled-components").IStyledCo
     $isFullScreen?: boolean;
 }>>;
 export declare const MessageVideoContainer: import("styled-components").IStyledComponent<"web", {
-    ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+    ref?: import("react").Ref<HTMLDivElement> | undefined;
     key?: import("react").Key | null | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -52,6 +52,10 @@ export declare const MessageVideoContainer: import("styled-components").IStyledC
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
@@ -261,6 +265,8 @@ export declare const MessageVideoContainer: import("styled-components").IStyledC
     onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
     onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
     onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
     onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
     onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
@@ -269,8 +275,16 @@ export declare const MessageVideoContainer: import("styled-components").IStyledC
     onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
     onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
 }>;
 export declare const MessageVideoStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, {
     $isFullScreen?: boolean;
@@ -279,11 +293,11 @@ export declare const MessageSourceStyled: import("styled-components").IStyledCom
     $isFullScreen?: boolean;
 }>>;
 export declare const MessageVideoControlsButton: import("styled-components").IStyledComponent<"web", {
-    ref?: import("react").LegacyRef<HTMLButtonElement> | undefined;
+    ref?: import("react").Ref<HTMLButtonElement> | undefined;
     key?: import("react").Key | null | undefined;
     disabled?: boolean | undefined | undefined;
     form?: string | undefined | undefined;
-    formAction?: string | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
     formEncType?: string | undefined | undefined;
     formMethod?: string | undefined | undefined;
     formNoValidate?: boolean | undefined | undefined;
@@ -338,6 +352,10 @@ export declare const MessageVideoControlsButton: import("styled-components").ISt
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
@@ -547,6 +565,8 @@ export declare const MessageVideoControlsButton: import("styled-components").ISt
     onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
     onScroll?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
     onScrollCapture?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
     onWheel?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
     onWheelCapture?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
     onAnimationStart?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
@@ -555,8 +575,16 @@ export declare const MessageVideoControlsButton: import("styled-components").ISt
     onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
     onAnimationIteration?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLButtonElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLButtonElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
 }>;
 export declare const MessageVideoControlsButtons: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isFullScreen?: boolean;
@@ -565,8 +593,13 @@ export declare const MessageVideoTimeLine: import("styled-components").IStyledCo
     $progress: number;
 }>>;
 export declare const MessageVideoTimeText: import("styled-components").IStyledComponent<"web", {
-    children?: import("react").ReactNode;
     variant?: import("@/ui/components/typography").TypographyVariant | undefined;
+    component?: import("@/ui/components/typography").TypographyComponent | undefined;
+    align?: import("@/ui/components/typography").TypographyAlign | undefined;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    target?: import("react").HTMLAttributeAnchorTarget | undefined;
+    children?: import("react").ReactNode;
     hidden?: boolean | undefined | undefined;
     color?: string | undefined | undefined;
     content?: string | undefined | undefined;
@@ -615,6 +648,10 @@ export declare const MessageVideoTimeText: import("styled-components").IStyledCo
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
@@ -823,6 +860,8 @@ export declare const MessageVideoTimeText: import("styled-components").IStyledCo
     onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLSpanElement> | undefined;
     onScroll?: import("react").UIEventHandler<HTMLSpanElement> | undefined;
     onScrollCapture?: import("react").UIEventHandler<HTMLSpanElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLSpanElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLSpanElement> | undefined;
     onWheel?: import("react").WheelEventHandler<HTMLSpanElement> | undefined;
     onWheelCapture?: import("react").WheelEventHandler<HTMLSpanElement> | undefined;
     onAnimationStart?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
@@ -831,20 +870,23 @@ export declare const MessageVideoTimeText: import("styled-components").IStyledCo
     onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
     onAnimationIteration?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLSpanElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLSpanElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
-    target?: import("react").HTMLAttributeAnchorTarget | undefined;
-    href?: string | undefined;
-    align?: import("@/ui/components/typography").TypographyAlign | undefined;
-    component?: import("@/ui/components/typography").TypographyComponent | undefined;
-    fullWidth?: boolean | undefined;
-    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
+    ref?: import("react").Ref<HTMLSpanElement> | undefined;
 }>;
 export declare const MessageVideoVolumeLine: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $volume: number;
 }>>;
 export declare const MessageVideoVolumeContainer: import("styled-components").IStyledComponent<"web", {
-    ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+    ref?: import("react").Ref<HTMLDivElement> | undefined;
     key?: import("react").Key | null | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -893,6 +935,10 @@ export declare const MessageVideoVolumeContainer: import("styled-components").IS
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
@@ -1102,6 +1148,8 @@ export declare const MessageVideoVolumeContainer: import("styled-components").IS
     onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
     onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
     onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
     onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
     onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
@@ -1110,17 +1158,23 @@ export declare const MessageVideoVolumeContainer: import("styled-components").IS
     onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
     onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
 }>;
 export declare const MessageVideoDownload: import("styled-components").IStyledComponent<"web", {
-    value?: string | number | readonly string[] | undefined;
     children?: import("react").ReactNode;
-    variant?: import("@/ui/components/button").ButtonVariant | undefined;
+    value?: string | number | readonly string[] | undefined;
     hidden?: boolean | undefined | undefined;
     color?: string | undefined | undefined;
     content?: string | undefined | undefined;
-    size?: import("@/ui/components/button").ButtonSize | undefined;
     style?: import("react").CSSProperties | undefined;
     disabled?: boolean | undefined | undefined;
     key?: import("react").Key | null | undefined;
@@ -1167,6 +1221,10 @@ export declare const MessageVideoDownload: import("styled-components").IStyledCo
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
@@ -1372,6 +1430,8 @@ export declare const MessageVideoDownload: import("styled-components").IStyledCo
     onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLButtonElement> | undefined;
     onScroll?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
     onScrollCapture?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLButtonElement> | undefined;
     onWheel?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
     onWheelCapture?: import("react").WheelEventHandler<HTMLButtonElement> | undefined;
     onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
@@ -1379,26 +1439,36 @@ export declare const MessageVideoDownload: import("styled-components").IStyledCo
     onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
     onAnimationIteration?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLButtonElement> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLButtonElement> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     form?: string | undefined | undefined;
-    name?: string | undefined | undefined;
     type?: "submit" | "reset" | "button" | undefined | undefined;
-    href?: string | undefined;
-    formAction?: string | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
     formEncType?: string | undefined | undefined;
     formMethod?: string | undefined | undefined;
     formNoValidate?: boolean | undefined | undefined;
     formTarget?: string | undefined | undefined;
-    htmlFor?: string | undefined;
-    component?: import("@/ui/components/button").ButtonComponent | undefined;
+    name?: string | undefined | undefined;
     fullWidth?: boolean | undefined;
-    skeleton?: boolean | undefined;
+    variant?: import("@/ui/components/button").ButtonVariant | undefined;
+    component?: import("@/ui/components/button").ButtonComponent | undefined;
+    size?: import("@/ui/components/button").ButtonSize | undefined;
     corner?: import("@/ui/components/button").ButtonCorner | undefined;
     startIcon?: import("react").ReactNode;
     endIcon?: import("react").ReactNode;
     iconSize?: number | undefined;
     iconFill?: string | undefined;
+    skeleton?: boolean | undefined;
+    htmlFor?: string | undefined;
+    href?: string | undefined;
     disableHoverColor?: boolean | undefined;
-    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement | null> | null | undefined;
+    ref?: import("react").Ref<HTMLButtonElement | null> | undefined;
 }>;

package/dist/components/message/video/styled.js

@@ -1,11 +1,11 @@
-import{styled as e,css as t}from"styled-components";import{Typography as i}from"../../typography/index.js";import{Button as o}from"../../button/index.js";const s=e.div.withConfig({displayName:"styled__MessageVideoControls",componentId:"sc-sakyfd-0"})(["transform:",";opacity:",";transition:all 300ms ease-out;position:absolute;left:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:8px;padding-top:16px;background:linear-gradient( 180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100% );width:100%;",""],(({$isVisible:e})=>e?"translateY(0)":"translateY(100%)"),(({$isVisible:e})=>e?1:0),(({$isFullScreen:e})=>e&&t`
+import{styled as e,css as t}from"styled-components";import{Typography as i}from"../../typography/index.js";import{Button as o}from"../../button/index.js";const s=e.div.withConfig({displayName:"styled__MessageVideoControls",componentId:"sc-sakyfd-0"})(["transform:",";opacity:",";transition:all 300ms ease-out;position:absolute;left:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:8px;padding-top:16px;background:linear-gradient( 180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100% );width:100%;",""],({$isVisible:e})=>e?"translateY(0)":"translateY(100%)",({$isVisible:e})=>e?1:0,({$isFullScreen:e})=>e&&t`
       padding: 24px;
       gap: 24px;
-    `)),a=e.div.withConfig({displayName:"styled__MessageVideoContainer",componentId:"sc-sakyfd-1"})(["position:relative;display:flex;justify-content:center;overflow:hidden;border-radius:inherit;&:hover{","{opacity:1;transform:translateY(0);}}"],s),d=e.video.withConfig({displayName:"styled__MessageVideoStyled",componentId:"sc-sakyfd-2"})(["width:100%;max-width:",";@media (max-width:","){max-width:none;}"],(({$isFullScreen:e})=>e?"100%":"640px"),(({theme:e})=>e.mobile.maxWidth)),n=e.source.withConfig({displayName:"styled__MessageSourceStyled",componentId:"sc-sakyfd-3"})(["",""],(({$isFullScreen:e})=>e&&t`
+    `),a=e.div.withConfig({displayName:"styled__MessageVideoContainer",componentId:"sc-sakyfd-1"})(["position:relative;display:flex;justify-content:center;overflow:hidden;border-radius:inherit;&:hover{","{opacity:1;transform:translateY(0);}}"],s),d=e.video.withConfig({displayName:"styled__MessageVideoStyled",componentId:"sc-sakyfd-2"})(["width:100%;max-width:",";@media (max-width:","){max-width:none;}"],({$isFullScreen:e})=>e?"100%":"640px",({theme:e})=>e.mobile.maxWidth),n=e.source.withConfig({displayName:"styled__MessageSourceStyled",componentId:"sc-sakyfd-3"})(["",""],({$isFullScreen:e})=>e&&t`
       width: 100%;
       height: 100vh;
       position: fixed;
       top: 0;
       left: 0;
       z-index: -3;
-    `)),r=e.button.withConfig({displayName:"styled__MessageVideoControlsButton",componentId:"sc-sakyfd-4"})(["position:relative;cursor:pointer;flex-shrink:0;background:none;border:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;svg path{stroke:white;}"]),l=e.div.withConfig({displayName:"styled__MessageVideoControlsButtons",componentId:"sc-sakyfd-5"})(["display:grid;grid-template-columns:auto auto 1fr auto auto;gap:8px;align-items:center;"]),p=e.div.withConfig({displayName:"styled__MessageVideoTimeLine",componentId:"sc-sakyfd-6"})(["position:relative;height:6px;border-radius:4px;width:100%;background:rgba(255,255,255,0.5);cursor:pointer;transition:all 100ms ease-out;&:hover{opacity:0.8;height:16px;}&:after{content:'';position:absolute;bottom:0;left:0;height:inherit;width:","%;right:0;bottom:0;background:",";}"],(({$progress:e})=>e),(({theme:e})=>e.colors.accent.primary)),m=e(i).attrs({variant:"body-s-medium"}).withConfig({displayName:"styled__MessageVideoTimeText",componentId:"sc-sakyfd-7"})(["color:",";"],(({theme:e})=>e.default.colors.base.white)),c=e.div.withConfig({displayName:"styled__MessageVideoVolumeLine",componentId:"sc-sakyfd-8"})(["position:relative;height:4px;transition:all 300ms ease-out;border-radius:4px;width:0;max-width:100px;opacity:0;background:rgba(255,255,255,0.5);display:flex;cursor:pointer;align-items:center;&:after{content:'';position:absolute;cursor:pointer;bottom:0;left:0;border-radius:4px;height:4px;width:","%;right:0;bottom:0;background:",";}&:before{content:'';position:absolute;left:","%;width:12px;z-index:1;margin-left:-8px;cursor:pointer;height:12px;border-radius:50%;background:rgba(255,255,255,1);}"],(({$volume:e})=>e),(({theme:e})=>e.default.colors.base.white),(({$volume:e})=>e)),g=e.div.withConfig({displayName:"styled__MessageVideoVolumeContainer",componentId:"sc-sakyfd-9"})(["display:flex;width:100%;align-items:center;overflow:hidden;gap:8px;&:hover{padding-right:8px;","{width:75px;opacity:1;}}"],c),h=e(o).attrs({variant:"text"}).withConfig({displayName:"styled__MessageVideoDownload",componentId:"sc-sakyfd-10"})([""]);export{n as MessageSourceStyled,a as MessageVideoContainer,s as MessageVideoControls,r as MessageVideoControlsButton,l as MessageVideoControlsButtons,h as MessageVideoDownload,d as MessageVideoStyled,p as MessageVideoTimeLine,m as MessageVideoTimeText,g as MessageVideoVolumeContainer,c as MessageVideoVolumeLine};
+    `),r=e.button.withConfig({displayName:"styled__MessageVideoControlsButton",componentId:"sc-sakyfd-4"})(["position:relative;cursor:pointer;flex-shrink:0;background:none;border:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;svg path{stroke:white;}"]),l=e.div.withConfig({displayName:"styled__MessageVideoControlsButtons",componentId:"sc-sakyfd-5"})(["display:grid;grid-template-columns:auto auto 1fr auto auto;gap:8px;align-items:center;"]),p=e.div.withConfig({displayName:"styled__MessageVideoTimeLine",componentId:"sc-sakyfd-6"})(["position:relative;height:6px;border-radius:4px;width:100%;background:rgba(255,255,255,0.5);cursor:pointer;transition:all 100ms ease-out;&:hover{opacity:0.8;height:16px;}&:after{content:'';position:absolute;bottom:0;left:0;height:inherit;width:","%;right:0;bottom:0;background:",";}"],({$progress:e})=>e,({theme:e})=>e.colors.accent.primary),m=e(i).attrs({variant:"body-s-medium"}).withConfig({displayName:"styled__MessageVideoTimeText",componentId:"sc-sakyfd-7"})(["color:",";"],({theme:e})=>e.default.colors.base.white),c=e.div.withConfig({displayName:"styled__MessageVideoVolumeLine",componentId:"sc-sakyfd-8"})(["position:relative;height:4px;transition:all 300ms ease-out;border-radius:4px;width:0;max-width:100px;opacity:0;background:rgba(255,255,255,0.5);display:flex;cursor:pointer;align-items:center;&:after{content:'';position:absolute;cursor:pointer;bottom:0;left:0;border-radius:4px;height:4px;width:","%;right:0;bottom:0;background:",";}&:before{content:'';position:absolute;left:","%;width:12px;z-index:1;margin-left:-8px;cursor:pointer;height:12px;border-radius:50%;background:rgba(255,255,255,1);}"],({$volume:e})=>e,({theme:e})=>e.default.colors.base.white,({$volume:e})=>e),g=e.div.withConfig({displayName:"styled__MessageVideoVolumeContainer",componentId:"sc-sakyfd-9"})(["display:flex;width:100%;align-items:center;overflow:hidden;gap:8px;&:hover{padding-right:8px;","{width:75px;opacity:1;}}"],c),h=e(o).attrs({variant:"text"}).withConfig({displayName:"styled__MessageVideoDownload",componentId:"sc-sakyfd-10"})([""]);export{n as MessageSourceStyled,a as MessageVideoContainer,s as MessageVideoControls,r as MessageVideoControlsButton,l as MessageVideoControlsButtons,h as MessageVideoDownload,d as MessageVideoStyled,p as MessageVideoTimeLine,m as MessageVideoTimeText,g as MessageVideoVolumeContainer,c as MessageVideoVolumeLine};

package/dist/components/message/video/volume/index.js

@@ -1 +1 @@
-import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useState as n,useCallback as t}from"react";import{VolumeIcon as r}from"../../../../icons/volume/index.js";import{MessageVideoVolumeContainer as i,MessageVideoControlsButton as l,MessageVideoVolumeLine as c}from"../styled.js";const s=({iconSize:s=16,handleChangeVolume:u})=>{const[m,f]=n(!1),[a,d]=n(100),p=t((e=>{e.preventDefault();const{clientX:o}=e,{width:n,left:t}=e.currentTarget.getBoundingClientRect(),r=(o-t)/n*100;r>100||r<0||(d(r),null==u||u(r))}),[u]),h=t((()=>{f(!0)}),[]),v=t((e=>{m&&p(e)}),[m]),M=t((()=>{f(!1)}),[]);return e(i,{onMouseLeave:M,children:[o(l,{children:o(r,{fill:"#fff",size:s})}),o(c,{onClick:p,onMouseMove:v,onMouseUp:M,onMouseDown:h,$volume:a})]})};export{s as MessageVideoVolume};
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useState as n,useCallback as t}from"react";import{VolumeIcon as r}from"../../../../icons/volume/index.js";import{MessageVideoVolumeContainer as i,MessageVideoControlsButton as l,MessageVideoVolumeLine as c}from"../styled.js";const s=({iconSize:s=16,handleChangeVolume:u})=>{const[m,f]=n(!1),[a,d]=n(100),p=t(e=>{e.preventDefault();const{clientX:o}=e,{width:n,left:t}=e.currentTarget.getBoundingClientRect(),r=(o-t)/n*100;r>100||r<0||(d(r),null==u||u(r))},[u]),h=t(()=>{f(!0)},[]),v=t(e=>{m&&p(e)},[m]),M=t(()=>{f(!1)},[]);return e(i,{onMouseLeave:M,children:[o(l,{children:o(r,{fill:"#fff",size:s})}),o(c,{onClick:p,onMouseMove:v,onMouseUp:M,onMouseDown:h,$volume:a})]})};export{s as MessageVideoVolume};

package/dist/components/message/voice/index.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
+export type MessageVoiceVariant = 'input' | 'message';
 export interface MessageVoiceProps extends React.ComponentProps<'div'> {
+    height?: number;
     src: string;
     waveData: number[];
     duration: number;
+    disableTranscription?: boolean;
+    variant?: MessageVoiceVariant;
 }
 export declare const MessageVoice: React.FC<MessageVoiceProps>;

package/dist/components/message/voice/index.js

@@ -1 +1 @@
-import{__rest as r}from"tslib";import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useId as e,useRef as l,useState as i,useCallback as c}from"react";import{MessageVoiceStyled as n,MessageVoiceAudio as s,MessageVoiceMain as a,MessageVoiceToggleButton as m,MessageVoicePauseIcon as d,MessageVoicePlayIcon as p,MessageVoiceWaves as u,StyledRect as h,MessageVoiceDurationText as f,MessageVoiceToggleTextButton as g,MessageVoiceHideTextIcon as y,MessageVoiceShowTextIcon as b,MessageVoiceText as j}from"./styled.js";import{formatSeconds as w}from"./utils/index.js";import{useMessage as x}from"../context.js";import"../../../theme/index.js";import{IconProvider as k}from"../../icon/context.js";import"../../icon/styled.js";import"@react-spring/web";import"react-dom";import"../../portal/styled.js";import"../../tooltip/styled.js";import"../../tooltip/arrow/styled.js";import"../../tooltip/context.js";import"unified";import"remark-parse";import"remark-gfm";import"mdast-util-to-markdown";import{isBright as C}from"../../../utils/colors/isBright.js";import"../../../utils/colors/calculateGrayScale.js";import"../../../utils/colors/calculateAccentColors.js";import{useTheme as P}from"../../../theme/hook.js";const v=v=>{var{src:L,waveData:T,duration:$,tabIndex:A=0,children:B}=v,D=r(v,["src","waveData","duration","tabIndex","children"]);const I=P(),O=e(),{color:_}=x(),E=l(null),F=l(null),[G,M]=i(!0),[R,S]=i(!1),[U,X]=i(!1),[q,z]=i(null),H=c((()=>{const r=E.current;r&&(R?r.pause():r.play())}),[R,E.current]),J=c((()=>{const r=E.current;r&&z(r.currentTime)}),[E.current]),K=c((r=>{r.stopPropagation();const t=E.current,o=F.current;if(!t||!o)return;const e=o.getBoundingClientRect(),{width:l}=e,i=(r.clientX-e.left)/l*$;t.play(),t.currentTime=i}),[E.current,$]),N=c((()=>{z(null)}),[]),Q=c((r=>{r.stopPropagation(),X(!U)}),[U]);return t(n,Object.assign({},D,{children:[o(s,{ref:E,src:L,onPlay:S.bind(null,!0),onPause:S.bind(null,!1),onCanPlayThrough:M.bind(null,!1),onTimeUpdate:J,onEnded:N}),t(a,{$loading:G,tabIndex:A,children:[o(m,{onClick:H,children:t(k,Object.assign({},"default"===_?"dark"===I.mode?{fill:I.default.colors.base.white,stroke:I.colors.accent.primary}:{fill:I.colors.accent.primaryLight,stroke:I.default.colors.base.white}:"green"===_?{fill:I.colors.gpt3}:"purple"===_?{fill:I.colors.gpt4}:{fill:_},{children:[R&&o(d,{}),!R&&o(p,{})]}))}),t(u,{ref:F,width:"145",height:"36",viewBox:"0 0 145 36",fill:"none",onClick:K,children:[t("g",{clipPath:`url(#${O}_clip)`,children:[o("rect",{width:"145",height:"36",fill:"default"===_?"standard"===I.scheme?"#A4C1FA":I.bright||"custom"===I.scheme&&C(I.colors.custom.message.user.background)?I.colors.accent.strongDown:I.colors.accent.primaryLight:I.default.colors.base.white}),null!==q&&o(h,{height:"36",fill:"dark"===I.mode?I.default.colors.base.white:I.colors.accent.primaryLight,style:{width:q/$*145}})]}),o("defs",{children:o("clipPath",{id:`${O}_clip`,children:T.map(((r,t)=>{const e=Math.max(r/100*36,2);return o("rect",{x:5*t,y:(36-e)/2,width:"3",height:e,rx:"1.5"},t)}))})})]}),t(f,{children:[null!==q&&w(q),null===q&&w($)]}),o(g,{onClick:Q,children:t(k,{fill:"light"===I.mode?I.colors.accent.primaryLight:I.colors.accent.primary,stroke:I.default.colors.base.white,children:[U&&o(y,{}),!U&&o(b,{})]})})]}),U&&B&&o(j,{$messageColor:_,children:B})]}))};export{v as MessageVoice};
+import{__rest as r}from"tslib";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useId as o,useRef as i,useState as l,useCallback as n}from"react";import{MessageVoiceStyled as c,MessageVoiceAudio as s,MessageVoiceMain as a,MessageVoiceToggleButton as m,MessageVoicePauseIcon as d,MessageVoicePlayIcon as p,MessageVoiceWaves as h,StyledRect as u,MessageVoiceDurationText as f,MessageVoiceToggleTextButton as g,MessageVoiceHideTextIcon as b,MessageVoiceShowTextIcon as w,MessageVoiceText as y}from"./styled.js";import{formatSeconds as j}from"./utils/index.js";import{useMessage as k}from"../context.js";import"../../../theme/index.js";import{IconProvider as x}from"../../icon/context.js";import"../../icon/styled.js";import"@react-spring/web";import"react-markdown";import"react-dom";import"../../portal/styled.js";import"../../tooltip/styled.js";import"../../tooltip/arrow/styled.js";import"../../tooltip/context.js";import"unified";import"remark-parse";import"remark-gfm";import"mdast-util-to-markdown";import{isBright as C}from"../../../utils/colors/isBright.js";import"../../../utils/colors/calculateGrayScale.js";import"../../../utils/colors/calculateAccentColors.js";import{useTheme as P}from"../../../theme/hook.js";const v=v=>{var{height:T=36,src:$,waveData:L,duration:A,tabIndex:B=0,disableTranscription:D,variant:I="message",children:O}=v,_=r(v,["height","src","waveData","duration","tabIndex","disableTranscription","variant","children"]);const z=P(),E=o(),{color:F}=k(),G=i(null),M=i(null),[R,S]=l(!0),[U,X]=l(!1),[q,H]=l(!1),[J,K]=l(null),N=n(()=>{const r=G.current;r&&(U?r.pause():r.play())},[U,G.current]),Q=n(()=>{const r=G.current;r&&K(r.currentTime)},[G.current]),V=n(r=>{r.stopPropagation();const t=G.current,e=M.current;if(!t||!e)return;const o=e.getBoundingClientRect(),{width:i}=o,l=(r.clientX-o.left)/i*A;t.play(),t.currentTime=l},[G.current,A]),W=n(()=>{K(null)},[]),Y=n(r=>{r.stopPropagation(),H(!q)},[q]);return t(c,Object.assign({},_,{children:[e(s,{ref:G,src:$,onPlay:X.bind(null,!0),onPause:X.bind(null,!1),onCanPlayThrough:S.bind(null,!1),onTimeUpdate:Q,onEnded:W}),t(a,{$loading:R,tabIndex:B,children:[e(m,{onClick:N,children:t(x,Object.assign({},"default"===F?"dark"===z.mode?{fill:z.default.colors.base.white,stroke:z.colors.accent.primary}:{fill:z.colors.accent.primaryLight,stroke:z.default.colors.base.white}:"green"===F?{fill:z.colors.gpt3}:"purple"===F?{fill:z.colors.gpt4}:{fill:F},"input"===I&&{size:22},{children:[U&&e(d,{}),!U&&e(p,{})]}))}),t(h,{ref:M,width:"145",height:T,viewBox:`0 0 145 ${T}`,fill:"none",onClick:V,children:[t("g",{clipPath:`url(#${E}_clip)`,children:[e("rect",{width:"145",height:T,fill:"default"===F?"standard"===z.scheme?"#A4C1FA":z.bright||"custom"===z.scheme&&C(z.colors.custom.message.user.background)?z.colors.accent.strongDown:z.colors.accent.primaryLight:z.default.colors.base.white}),null!==J&&e(u,{height:T,fill:"dark"===z.mode?z.default.colors.base.white:z.colors.accent.primaryLight,style:{width:J/A*145}})]}),e("defs",{children:e("clipPath",{id:`${E}_clip`,children:L.map((r,t)=>{const o=Math.max(r/100*36,2);return e("rect",{x:5*t,y:(T-o)/2,width:"3",height:o,rx:"1.5"},t)})})})]}),t(f,{children:[null!==J&&j(J),null===J&&j(A)]}),!D&&e(g,{onClick:Y,children:t(x,{fill:"light"===z.mode?z.colors.accent.primaryLight:z.colors.accent.primary,stroke:z.default.colors.base.white,children:[q&&e(b,{}),!q&&e(w,{})]})})]}),!D&&q&&O&&e(y,{$messageColor:F,children:O})]}))};export{v as MessageVoice};