@bothub-chat/ui/dist/components/message/voice/index.js

Bothub UI Components

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