@bothub-chat/ui 2.47.1 → 2.47.2-develop-276d1dc8-5d95-48a3-bef6-4e95d99ca126

package/dist/components/input-message/index.js

@@ -1 +1 @@
-import{__rest as e,__awaiter as t}from"tslib";import{jsx as n,jsxs as i,Fragment as l}from"react/jsx-runtime";import{useRef as r,useState as o,useCallback as a,useEffect as s}from"react";import{useTransition as c}from"@react-spring/web";import{useOnClickOutside as d}from"../../utils/useOnClickOutside.js";import{InputMessageStyled as u,InputMessageContent as p,InputMessageUploadFile as m,InputMessageUploadFileInput as v,InputMessageUploadFileButton as f,InputMessageMain as h,InputMessageVoiceRecord as g,InputMessageVoiceRecordDot as y,InputMessageVoiceRecordTimeText as b,InputMessageFiles as x,InputMessageFile as j,InputMessageTextArea as D,InputMessageToggleSendStyled as k,InputMessageToggleSendButton as F,InputMessageToggleSendModalStyled as $,InputMessageToggleSendModalOption as A,InputMessageSendButton as C,InputMessageSendIcon as E,InputMessageVoiceIcon as w}from"./styled.js";import{ChipImage as S}from"../chip/styled.js";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{PdfIcon as T}from"../../icons/pdf/index.js";import{TxtIcon as K}from"../../icons/txt/index.js";import{WordIcon as L}from"../../icons/word/index.js";import{XlsIcon as O}from"../../icons/xls/index.js";import{IconProvider as P}from"../icon/context.js";import"../icon/styled.js";import{getPreviewUrlForFile as U,isFileTypeAccepted as V,formatUploadFiles as B,formatSeconds as N}from"./utils.js";import{AttachFileIcon as I}from"../../icons/attach-file/index.js";import{getSupportedAudioMimeType as M}from"../../utils/getSupportedAudioMimeType.js";import{useTheme as R}from"../../theme/hook.js";const z=z=>{var{className:H,placeholder:G,message:W,files:_,disabled:q=!1,sendDisabled:J=!1,textAreaDisabled:Q=!1,useAlternativeKeyDefaultValue:X=!1,defaultKeySendText:Y,alternativeKeySendText:Z,uploadFileLimit:ee=5,hideUploadFile:te=!1,uploadFileDisabled:ne=!1,uploadFileAccept:ie,autoFocus:le=!0,voice:re=!1,onSetAlternativeKeyValue:oe,onChange:ae,onFilesChange:se,onTextAreaChange:ce,onSend:de,onFocus:ue,onBlur:pe,onVoice:me,emitError:ve,rightActions:fe}=z,he=e(z,["className","placeholder","message","files","disabled","sendDisabled","textAreaDisabled","useAlternativeKeyDefaultValue","defaultKeySendText","alternativeKeySendText","uploadFileLimit","hideUploadFile","uploadFileDisabled","uploadFileAccept","autoFocus","voice","onSetAlternativeKeyValue","onChange","onFilesChange","onTextAreaChange","onSend","onFocus","onBlur","onVoice","emitError","rightActions"]);const ge=R(),ye=r(null),[be,xe]=o("calc(var(--bothub-scale, 1) * 22px)"),[je,De]="string"==typeof W?[W,ae]:o(""),[ke,Fe]=Array.isArray(_)?[_,se]:o([]),[$e,Ae]=o(!q&&le),[Ce,Ee]=o(!1),[we,Se]=o(!1),[Te,Ke]=o(null),Le=r(null),Oe=r(null),Pe=r([]),Ue=r(null),Ve=r(!1),Be=r(null),[Ne,Ie]=o(X),[Me,Re]=o(!1),ze=a((()=>{Ie(!1),null==oe||oe(!1),Re(!1)}),[]),He=a((()=>{Ie(!0),null==oe||oe(!0),Re(!1)}),[]),Ge=a((e=>{Ae(!0),null==ue||ue(e)}),[ue]),We=a((e=>{Ae(!1),null==pe||pe(e)}),[pe]),_e=a((e=>{null==De||De(e.target.value),null==ce||ce(e)}),[De,ce]),qe=a((e=>t(void 0,void 0,void 0,(function*(){if(!e.length)return;const t=[],n=[],i=yield Promise.all(null==e?void 0:e.map(U));for(const[l,r]of e.entries()){V(r.type,ie)?t.push({previewUrl:i[l],name:r.name,native:r}):n.push(r)}n.length>0&&(null==ve||ve({name:"WRONG_FILES",payload:n})),(null==t?void 0:t.length)>0&&(null==Fe||Fe([...ke,...t].slice(0,ee)))}))),[ie,ve,ee,ke]),Je=a((e=>t(void 0,void 0,void 0,(function*(){!ne&&e.clipboardData.files.length>0&&(e.preventDefault(),yield qe([...e.clipboardData.files]))}))),[qe,ne]),Qe=a((e=>t(void 0,void 0,void 0,(function*(){if(!Fe||!e.target.files)return;const t=yield B([...ke.map((({native:e})=>e)),...e.target.files]);Fe(t.slice(0,ee))}))),[ke,Fe,ee]),Xe=a((e=>{null==Fe||Fe(ke.filter((({name:t})=>t!==e.name)))}),[Fe,ke]),Ye=a((e=>{e.stopPropagation(),null==de||de(je,ke),null==De||De(""),null==Fe||Fe([]),xe("calc(var(--bothub-scale, 1) * 22px)")}),[je,ke,de,De,Fe]),Ze=a((e=>{e.stopPropagation();const t=Ne?"enter":"ctrl/shift+enter";let n="";if("Enter"===e.key&&(e.shiftKey||e.ctrlKey))n="ctrl/shift+enter";else{if("Enter"!==e.key)return;n="enter"}if($e&&"Enter"===e.key){if(n===t&&e.ctrlKey){e.preventDefault();const t=ye.current;if(!t)return;const n=t.value,r=t.selectionStart,o=n.slice(0,r),a=n.slice(r);null==De||De(`${o}\n${a}`),i=t,l=r+1,setTimeout((()=>{i.selectionStart=l,i.selectionEnd=l}),1)}t!==n&&""!==n&&(e.preventDefault(),null==de||de(je,ke),xe("calc(var(--bothub-scale, 1) * 22px)"))}var i,l}),[$e,je,ke,de,De,Fe]),et=a((()=>{var e;q||null===(e=ye.current)||void 0===e||e.focus()}),[q,le]),tt=a((e=>{e.stopPropagation()}),[]),nt=a((e=>t(void 0,void 0,void 0,(function*(){if(we)return;Ve.current=!0,e.stopPropagation();const t=yield navigator.mediaDevices.getUserMedia({audio:!0}),n=new MediaRecorder(t,{mimeType:M()});Ve.current&&(n.start(1e3),Le.current=n,Oe.current=t,Ue.current=window.setInterval((()=>{Ke((e=>(null!=e?e:0)+.1))}),100),Se(!0),Ke(0))}))),[Ve.current,Pe.current,we]),it=a((()=>{const e=Le.current,t=Oe.current,n=Ue.current;if(we&&e&&t&&n){e.stop();for(const e of t.getTracks())e.stop();window.clearInterval(n)}}),[we,Le.current,Oe.current,Ue.current]),lt=a((()=>t(void 0,void 0,void 0,(function*(){Ve.current=!1,we&&it()}))),[we,it]),rt=a((()=>{const e=ye.current;null!==e&&(e.style.height="calc(var(--bothub-scale, 1) * 22px)",e.style.height=`${e.scrollHeight}px`,xe(`${e.scrollHeight}px`))}),[je,le]);s((()=>{rt()}),[rt]),s((()=>{const e=ye.current;if(!e||q)return;const t=!q&≤Ae(t),t?e.focus():document.activeElement===e&&e.blur()}),[q,le]),s((()=>{const e=ye.current;if(null!==e)return e.addEventListener("keydown",Ze),()=>{e.removeEventListener("keydown",Ze)}}),[Ze]),s((()=>{Fe&&_&&Fe(_)}),[_]),s((()=>{const e=Le.current,n=e=>{e.data.size>0&&Pe.current.push(e.data)},i=()=>t(void 0,void 0,void 0,(function*(){const e=new Blob(Pe.current,{type:M()});yield null==me?void 0:me(e),Le.current=null,Oe.current=null,Pe.current=[],Ue.current=null,Se(!1),Ke(null)}));return e&&(e.addEventListener("dataavailable",n),e.addEventListener("stop",i)),()=>{e&&(e.removeEventListener("dataavailable",n),e.removeEventListener("stop",i)),it()}}),[Le.current]),d(Be,(()=>{Re(!1)}));const ot=c(Me,{from:{opacity:0,y:10},enter:{opacity:1,y:0},leave:{opacity:0,y:10},config:{duration:150,ease:"easeOut"}});return n(u,{$active:$e,$dragActive:Ce,$disabled:q,$textAreaDisabled:Q,$voiceRecording:we,className:H,onClick:et,onDragEnter:()=>Ee(!0),onDragLeave:()=>Ee(!1),onDragOver:e=>(e.stopPropagation(),e.preventDefault(),!1),onDrop:e=>t(void 0,void 0,void 0,(function*(){if(e.dataTransfer.files.length>0)return e.stopPropagation(),e.preventDefault(),yield qe([...e.dataTransfer.files]),Ee(!1),!1})),children:i(p,{children:[!te&&!we&&i(m,{onClick:tt,children:[n(v,{type:"file",accept:ie,multiple:!0,disabled:ke.length>=ee||q||ne,onChange:Qe},ke.length),n(f,{disabled:ke.length>=ee||q||ne})]}),i(h,{children:[we&&null!==Te&&i(g,{children:[n(y,{}),n(b,{children:N(Te)})]}),!we&&i(l,{children:[ke.length>0&&n(x,{children:ke.map((e=>{let t;return t=e.previewUrl&&(e.name.match(/.png$/i)||e.name.match(/.jpg$/i)||e.name.match(/.jpeg$/i))?n(S,{src:e.previewUrl}):e.name.match(/.txt$/i)?n(K,{}):e.name.match(/.docx$/i)?n(L,{}):e.name.match(/.xlsx$/i)?n(O,{}):e.name.match(/.pdf$/i)?n(T,{}):n(I,{}),t=n(P,{size:18,children:t}),n(j,{start:t,onDelete:Xe.bind(null,e),children:e.name.length>20?`...${e.name.slice(-20)}`:e.name},e.name)}))}),(!Q||Q&&G&&ke.length!==ee||Q&&je)&&n(D,Object.assign({$disabled:q},he,{ref:ye,value:je,placeholder:G,disabled:q||Q,style:Object.assign(Object.assign({},he.style),{height:be}),onFocus:Ge,onBlur:We,onChange:_e,onPaste:Je}))]})]}),!!Y&&!!Z&&i(k,{ref:Be,children:[n(F,{onClick:e=>{e.stopPropagation(),Re(!Me)},disabled:q}),ot(((e,t)=>t&&i($,{style:e,children:[n(A,{active:!Ne,onClick:ze,children:Y}),n(A,{active:Ne,onClick:He,children:Z})]},"alternative-key-modal")))]}),fe,n(C,!re||je?Object.assign({disabled:q||J,onClick:Ye},ge.bright&&{iconFill:ge.default.colors.base.black},{"data-test":"submit-message",children:n(E,{})}):Object.assign({},we&&{color:ge.colors.critic},ge.bright&&{iconFill:ge.default.colors.base.black},{disabled:q||J,onClick:we?lt:nt,"data-test":"submit-message",children:n(we?E:w,{})}))]})})};export{z as InputMessage};
+import{__rest as e,__awaiter as t}from"tslib";import{jsx as n,jsxs as i,Fragment as r}from"react/jsx-runtime";import{useRef as l,useState as o,useCallback as a,useEffect as s}from"react";import{useTransition as c}from"@react-spring/web";import{useOnClickOutside as d}from"../../utils/useOnClickOutside.js";import{InputMessageStyled as u,InputMessageContent as p,InputMessageMain as m,InputMessageVoiceRecord as v,InputMessageVoiceRecordDot as h,InputMessageVoiceRecordTimeText as f,InputMessageFiles as g,InputMessageFile as y,InputMessageTextArea as b,InputMessageBottom as x,InputMessageBottomGroup as j,InputMessageUploadFile as D,InputMessageUploadFileInput as $,InputMessageUploadFileButton as k,InputMessageToggleSendStyled as A,InputMessageToggleSendButton as F,InputMessageToggleSendModalStyled as C,InputMessageToggleSendModalOption as E,InputMessageVoiceButton as w,InputMessageSendIcon as S,InputMessageVoiceIcon as T,InputMessageSendButton as K}from"./styled.js";import{ChipImage as L}from"../chip/styled.js";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{PdfIcon as O}from"../../icons/pdf/index.js";import{TxtIcon as P}from"../../icons/txt/index.js";import{WordIcon as U}from"../../icons/word/index.js";import{XlsIcon as V}from"../../icons/xls/index.js";import{IconProvider as B}from"../icon/context.js";import"../icon/styled.js";import{getPreviewUrlForFile as N,isFileTypeAccepted as R,formatUploadFiles as I,formatSeconds as M}from"./utils.js";import{AttachFileIcon as z}from"../../icons/attach-file/index.js";import{getSupportedAudioMimeType as H}from"../../utils/getSupportedAudioMimeType.js";import{useTheme as G}from"../../theme/hook.js";const W=W=>{var{className:_,placeholder:q,message:J,files:Q,disabled:X=!1,sendDisabled:Y=!1,textAreaDisabled:Z=!1,useAlternativeKeyDefaultValue:ee=!1,defaultKeySendText:te,alternativeKeySendText:ne,uploadFileLimit:ie=5,hideUploadFile:re=!1,uploadFileDisabled:le=!1,uploadFileAccept:oe,autoFocus:ae=!0,voice:se=!1,onSetAlternativeKeyValue:ce,onChange:de,onFilesChange:ue,onTextAreaChange:pe,onSend:me,onFocus:ve,onBlur:he,onVoice:fe,emitError:ge,rightActions:ye}=W,be=e(W,["className","placeholder","message","files","disabled","sendDisabled","textAreaDisabled","useAlternativeKeyDefaultValue","defaultKeySendText","alternativeKeySendText","uploadFileLimit","hideUploadFile","uploadFileDisabled","uploadFileAccept","autoFocus","voice","onSetAlternativeKeyValue","onChange","onFilesChange","onTextAreaChange","onSend","onFocus","onBlur","onVoice","emitError","rightActions"]);const xe=G(),je=l(null),[De,$e]=o("calc(var(--bothub-scale, 1) * 22px)"),[ke,Ae]="string"==typeof J?[J,de]:o(""),[Fe,Ce]=Array.isArray(Q)?[Q,ue]:o([]),[Ee,we]=o(!X&&ae),[Se,Te]=o(!1),[Ke,Le]=o(!1),[Oe,Pe]=o(null),Ue=l(null),Ve=l(null),Be=l([]),Ne=l(null),Re=l(!1),Ie=l(null),[Me,ze]=o(ee),[He,Ge]=o(!1),We=a((()=>{ze(!1),null==ce||ce(!1),Ge(!1)}),[]),_e=a((()=>{ze(!0),null==ce||ce(!0),Ge(!1)}),[]),qe=a((e=>{we(!0),null==ve||ve(e)}),[ve]),Je=a((e=>{we(!1),null==he||he(e)}),[he]),Qe=a((e=>{null==Ae||Ae(e.target.value),null==pe||pe(e)}),[Ae,pe]),Xe=a((e=>t(void 0,void 0,void 0,(function*(){if(!e.length)return;const t=[],n=[],i=yield Promise.all(null==e?void 0:e.map(N));for(const[r,l]of e.entries()){R(l.type,oe)?t.push({previewUrl:i[r],name:l.name,native:l}):n.push(l)}n.length>0&&(null==ge||ge({name:"WRONG_FILES",payload:n})),(null==t?void 0:t.length)>0&&(null==Ce||Ce([...Fe,...t].slice(0,ie)))}))),[oe,ge,ie,Fe]),Ye=a((e=>t(void 0,void 0,void 0,(function*(){!le&&e.clipboardData.files.length>0&&(e.preventDefault(),yield Xe([...e.clipboardData.files]))}))),[Xe,le]),Ze=a((e=>t(void 0,void 0,void 0,(function*(){if(!Ce||!e.target.files)return;const t=yield I([...Fe.map((({native:e})=>e)),...e.target.files]);Ce(t.slice(0,ie))}))),[Fe,Ce,ie]),et=a((e=>{null==Ce||Ce(Fe.filter((({name:t})=>t!==e.name)))}),[Ce,Fe]),tt=a((e=>{e.stopPropagation(),null==me||me(ke,Fe),null==Ae||Ae(""),null==Ce||Ce([]),$e("calc(var(--bothub-scale, 1) * 22px)")}),[ke,Fe,me,Ae,Ce]),nt=a((e=>{e.stopPropagation();const t=Me?"enter":"ctrl/shift+enter";let n="";if("Enter"===e.key&&(e.shiftKey||e.ctrlKey))n="ctrl/shift+enter";else{if("Enter"!==e.key)return;n="enter"}if(Ee&&"Enter"===e.key){if(n===t&&e.ctrlKey){e.preventDefault();const t=je.current;if(!t)return;const n=t.value,l=t.selectionStart,o=n.slice(0,l),a=n.slice(l);null==Ae||Ae(`${o}\n${a}`),i=t,r=l+1,setTimeout((()=>{i.selectionStart=r,i.selectionEnd=r}),1)}t!==n&&""!==n&&(e.preventDefault(),null==me||me(ke,Fe),$e("calc(var(--bothub-scale, 1) * 22px)"))}var i,r}),[Ee,ke,Fe,me,Ae,Ce]),it=a((()=>{var e;X||null===(e=je.current)||void 0===e||e.focus()}),[X,ae]),rt=a((e=>{e.stopPropagation()}),[]),lt=a((e=>t(void 0,void 0,void 0,(function*(){if(Ke)return;Re.current=!0,e.stopPropagation();const t=yield navigator.mediaDevices.getUserMedia({audio:!0}),n=new MediaRecorder(t,{mimeType:H()});Re.current&&(n.start(1e3),Ue.current=n,Ve.current=t,Ne.current=window.setInterval((()=>{Pe((e=>(null!=e?e:0)+.1))}),100),Le(!0),Pe(0))}))),[Re.current,Be.current,Ke]),ot=a((()=>{const e=Ue.current,t=Ve.current,n=Ne.current;if(Ke&&e&&t&&n){e.stop();for(const e of t.getTracks())e.stop();window.clearInterval(n)}}),[Ke,Ue.current,Ve.current,Ne.current]),at=a((()=>t(void 0,void 0,void 0,(function*(){Re.current=!1,Ke&&ot()}))),[Ke,ot]),st=a((()=>{const e=je.current;null!==e&&(e.style.height="calc(var(--bothub-scale, 1) * 22px)",e.style.height=`${e.scrollHeight}px`,$e(`${e.scrollHeight}px`))}),[ke,ae]);s((()=>{st()}),[st]),s((()=>{const e=je.current;if(!e||X)return;const t=!X&&ae;we(t),t?e.focus():document.activeElement===e&&e.blur()}),[X,ae]),s((()=>{const e=je.current;if(null!==e)return e.addEventListener("keydown",nt),()=>{e.removeEventListener("keydown",nt)}}),[nt]),s((()=>{Ce&&Q&&Ce(Q)}),[Q]),s((()=>{const e=Ue.current,n=e=>{e.data.size>0&&Be.current.push(e.data)},i=()=>t(void 0,void 0,void 0,(function*(){const e=new Blob(Be.current,{type:H()});yield null==fe?void 0:fe(e),Ue.current=null,Ve.current=null,Be.current=[],Ne.current=null,Le(!1),Pe(null)}));return e&&(e.addEventListener("dataavailable",n),e.addEventListener("stop",i)),()=>{e&&(e.removeEventListener("dataavailable",n),e.removeEventListener("stop",i)),ot()}}),[Ue.current]),d(Ie,(()=>{Ge(!1)}));const ct=c(He,{from:{opacity:0,y:10},enter:{opacity:1,y:0},leave:{opacity:0,y:10},config:{duration:150,ease:"easeOut"}});return n(u,{$active:Ee,$dragActive:Se,$disabled:X,$textAreaDisabled:Z,$voiceRecording:Ke,className:_,onClick:it,onDragEnter:()=>Te(!0),onDragLeave:()=>Te(!1),onDragOver:e=>(e.stopPropagation(),e.preventDefault(),!1),onDrop:e=>t(void 0,void 0,void 0,(function*(){if(e.dataTransfer.files.length>0)return e.stopPropagation(),e.preventDefault(),yield Xe([...e.dataTransfer.files]),Te(!1),!1})),children:i(p,{children:[i(m,{children:[Ke&&null!==Oe&&i(v,{children:[n(h,{}),n(f,{children:M(Oe)})]}),!Ke&&i(r,{children:[Fe.length>0&&n(g,{children:Fe.map((e=>{let t;return t=e.previewUrl&&(e.name.match(/.png$/i)||e.name.match(/.jpg$/i)||e.name.match(/.jpeg$/i))?n(L,{src:e.previewUrl}):e.name.match(/.txt$/i)?n(P,{}):e.name.match(/.docx$/i)?n(U,{}):e.name.match(/.xlsx$/i)?n(V,{}):e.name.match(/.pdf$/i)?n(O,{}):n(z,{}),t=n(B,{size:18,children:t}),n(y,{start:t,onDelete:et.bind(null,e),children:e.name.length>20?`...${e.name.slice(-20)}`:e.name},e.name)}))}),(!Z||Z&&q&&Fe.length!==ie||Z&&ke)&&n(b,Object.assign({$disabled:X},be,{ref:je,value:ke,placeholder:q,disabled:X||Z,style:Object.assign(Object.assign({},be.style),{height:De}),onFocus:qe,onBlur:Je,onChange:Qe,onPaste:Ye}))]})]}),i(x,{children:[i(j,{children:[!re&&!Ke&&i(D,{onClick:rt,children:[n($,{type:"file",accept:oe,multiple:!0,disabled:Fe.length>=ie||X||le,onChange:Ze},Fe.length),n(k,{disabled:Fe.length>=ie||X||le})]}),ye]}),i(j,{children:[!!te&&!!ne&&i(A,{ref:Ie,children:[n(F,{onClick:e=>{e.stopPropagation(),Ge(!He)},disabled:X}),ct(((e,t)=>t&&i(C,{style:e,children:[n(E,{active:!Me,onClick:We,children:te}),n(E,{active:Me,onClick:_e,children:ne})]},"alternative-key-modal")))]}),!se&&n(w,{$isRecording:Ke,disabled:X||Y,onClick:Ke?at:lt,"data-test":"submit-message",children:n(Ke?S:T,{})}),n(K,Object.assign({disabled:X||Y,onClick:tt},xe.bright&&{iconFill:xe.default.colors.base.black},{"data-test":"submit-message",children:n(S,{})}))]})]})]})})};export{W as InputMessage};