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

Bothub UI Components

import{__rest as t}from"tslib";import{jsxs as r,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 d,MessageVoicePauseIcon as m,MessageVoicePlayIcon as p,MessageVoiceWaves as h,StyledRect as u,MessageVoiceDurationText as f,MessageVoiceToggleTextButton as g,MessageVoiceHideTextIcon as b,MessageVoiceShowTextIcon as y,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{height:T=36,src:$,waveData:L,duration:A,tabIndex:B=0,disableTranscription:D,variant:I="message",children:O}=v,_=t(v,["height","src","waveData","duration","tabIndex","disableTranscription","variant","children"]);const z=P(),E=o(),{color:F}=x(),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 t=G.current;t&&(U?t.pause():t.play())}),[U,G.current]),Q=n((()=>{const t=G.current;t&&K(t.currentTime)}),[G.current]),V=n((t=>{t.stopPropagation();const r=G.current,e=M.current;if(!r||!e)return;const o=e.getBoundingClientRect(),{width:i}=o,l=(t.clientX-o.left)/i*A;r.play(),r.currentTime=l}),[G.current,A]),W=n((()=>{K(null)}),[]),Y=n((t=>{t.stopPropagation(),H(!q)}),[q]);return r(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}),r(a,{$loading:R,tabIndex:B,children:[e(d,{onClick:N,children:r(k,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(m,{}),!U&&e(p,{})]}))}),r(h,{ref:M,width:"145",height:T,viewBox:`0 0 145 ${T}`,fill:"none",onClick:V,children:[r("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(((t,r)=>{const o=Math.max(t/100*36,2);return e("rect",{x:5*r,y:(T-o)/2,width:"3",height:o,rx:"1.5"},r)}))})})]}),r(f,{children:[null!==J&&w(J),null===J&&w(A)]}),!D&&e(g,{onClick:Y,children:r(k,{fill:"light"===z.mode?z.colors.accent.primaryLight:z.colors.accent.primary,stroke:z.default.colors.base.white,children:[q&&e(b,{}),!q&&e(y,{})]})})]}),!D&&q&&O&&e(j,{$messageColor:F,children:O})]}))};export{v as MessageVoice};