@bothub-chat/ui 2.18.1 → 2.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as e,__awaiter as t}from"tslib";import{jsx as n,jsxs as l,Fragment as r}from"react/jsx-runtime";import{useRef as o,useState as i,useCallback as a,useEffect as c,useLayoutEffect as s}from"react";import{useTransition as d}from"@react-spring/web";import{useOnClickOutside as u}from"../../utils/useOnClickOutside.js";import{InputMessageStyled as p,InputMessageContent as m,InputMessageUploadFile as v,InputMessageUploadFileInput as h,InputMessageUploadFileButton as f,InputMessageMain as g,InputMessageVoiceRecord as y,InputMessageVoiceRecordDot as b,InputMessageVoiceRecordTimeText as x,InputMessageFiles as
|
|
1
|
+
import{__rest as e,__awaiter as t}from"tslib";import{jsx as n,jsxs as l,Fragment as r}from"react/jsx-runtime";import{useRef as o,useState as i,useCallback as a,useEffect as c,useLayoutEffect as s}from"react";import{useTransition as d}from"@react-spring/web";import{useOnClickOutside as u}from"../../utils/useOnClickOutside.js";import{InputMessageStyled as p,InputMessageContent as m,InputMessageUploadFile as v,InputMessageUploadFileInput as h,InputMessageUploadFileButton as f,InputMessageMain as g,InputMessageVoiceRecord as y,InputMessageVoiceRecordDot as b,InputMessageVoiceRecordTimeText as x,InputMessageFiles as j,InputMessageFile as D,InputMessageTextArea as w,InputMessageToggleSendStyled as $,InputMessageToggleSendButton as C,InputMessageToggleSendModalStyled as F,InputMessageToggleSendModalOption as T,InputMessageSendButton as k,InputMessageSendIcon as E,InputMessageVoiceIcon as A}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 K}from"../../icons/pdf/index.js";import{TxtIcon as L}from"../../icons/txt/index.js";import{WordIcon as O}from"../../icons/word/index.js";import{XlsIcon as P}from"../../icons/xls/index.js";import{IconProvider as U}from"../icon/context.js";import"../icon/styled.js";import{getPreviewUrlForFile as V,formatUploadFiles as M,formatSeconds as B}from"./utils.js";import{AttachFileIcon as H}from"../../icons/attach-file/index.js";import{useTheme as I}from"../../theme/hook.js";const N=N=>{var{className:R,placeholder:z,message:G,files:W,disabled:_=!1,sendDisabled:q=!1,textAreaDisabled:J=!1,useAlternativeKeyDefaultValue:Q=!1,defaultKeySendText:X,alternativeKeySendText:Y,uploadFileLimit:Z=5,hideUploadFile:ee=!1,uploadFileDisabled:te=!1,uploadFileAccept:ne,autoFocus:le=!0,voice:re=!1,onSetAlternativeKeyValue:oe,onChange:ie,onFilesChange:ae,onTextAreaChange:ce,onSend:se,onFocus:de,onBlur:ue,onVoice:pe,emitError:me}=N,ve=e(N,["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"]);const he=I(),fe=o(null),[ge,ye]=i("calc(var(--bothub-scale, 1) * 18px)"),[be,xe]="string"==typeof G?[G,ie]:i(""),[je,De]=Array.isArray(W)?[W,ae]:i([]),[we,$e]=i(!_&&le),[Ce,Fe]=i(!1),[Te,ke]=i(!1),[Ee,Ae]=i(null),Se=o(null),Ke=o(null),Le=o([]),Oe=o(null),Pe=o(!1),Ue=o(null),[Ve,Me]=i(Q),[Be,He]=i(!1),Ie=a((()=>{Me(!1),null==oe||oe(!1),He(!1)}),[]),Ne=a((()=>{Me(!0),null==oe||oe(!0),He(!1)}),[]),Re=a((e=>{$e(!0),null==de||de(e)}),[de]),ze=a((e=>{$e(!1),null==ue||ue(e)}),[ue]),Ge=a((e=>{null==xe||xe(e.target.value),null==ce||ce(e)}),[xe,ce]),We=a((e=>{const t=fe.current;null!==t&&(t.style.height="calc(var(--bothub-scale, 1) * 18px)",t.style.height=`${e.currentTarget.scrollHeight}px`,t.focus(),ye(`${e.currentTarget.scrollHeight}px`))}),[]),_e=a((e=>t(void 0,void 0,void 0,(function*(){var t;if(!e.length)return;const n=[],l=[],r=yield Promise.all(null==e?void 0:e.map(V));for(const[o,i]of e.entries()){null===(t=null==ne?void 0:ne.includes(i.type))||void 0===t||t?n.push({previewUrl:r[o],name:i.name,native:i}):l.push(i)}l.length>0&&(null==me||me({name:"WRONG_FILES",payload:l})),(null==n?void 0:n.length)>0&&(null==De||De([...je,...n].slice(0,Z)))}))),[ne,me,Z,je]),qe=a((e=>t(void 0,void 0,void 0,(function*(){!te&&e.clipboardData.files.length>0&&(e.preventDefault(),yield _e([...e.clipboardData.files]))}))),[_e,te]),Je=a((e=>t(void 0,void 0,void 0,(function*(){if(!De||!e.target.files)return;const t=yield M([...je.map((({native:e})=>e)),...e.target.files]);De(t.slice(0,Z))}))),[je,De,Z]),Qe=a((e=>{null==De||De(je.filter((({name:t})=>t!==e.name)))}),[De,je]),Xe=a((e=>{e.stopPropagation(),null==se||se(be,je),ye("calc(var(--bothub-scale, 1) * 18px)")}),[be,je,se,xe,De]),Ye=a((e=>{e.stopPropagation();const t=Ve?"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(we&&"Enter"===e.key){if(n===t&&e.ctrlKey){e.preventDefault();const t=fe.current;if(!t)return;const n=t.value,o=t.selectionStart,i=n.slice(0,o),a=n.slice(o);null==xe||xe(`${i}\n${a}`),l=t,r=o+1,setTimeout((()=>{l.selectionStart=r,l.selectionEnd=r}),1)}t!==n&&""!==n&&(e.preventDefault(),null==se||se(be,je),ye("calc(var(--bothub-scale, 1) * 18px)"))}var l,r}),[we,be,je,se,xe,De]),Ze=a((()=>{var e;null===(e=fe.current)||void 0===e||e.focus()}),[]),et=a((e=>{e.stopPropagation()}),[]),tt=a((e=>{e.preventDefault(),e.stopPropagation()}),[]),nt=a((e=>t(void 0,void 0,void 0,(function*(){Pe.current=!0,e.stopPropagation();const t=yield navigator.mediaDevices.getUserMedia({audio:!0}),n=new MediaRecorder(t,{mimeType:"audio/webm"});Pe.current&&(n.start(),Se.current=n,Ke.current=t,Oe.current=window.setInterval((()=>{Ae((e=>(null!=e?e:0)+.1))}),100),ke(!0),Ae(0))}))),[Pe.current,Le.current]),lt=a((()=>{const e=Se.current,t=Ke.current,n=Oe.current;if(Te&&e&&t&&n){e.stop();for(const e of t.getTracks())e.stop();window.clearInterval(n)}}),[Te,Se.current,Ke.current,Oe.current]),rt=a((()=>t(void 0,void 0,void 0,(function*(){Pe.current=!1,Te&<()}))),[Te,lt]);c((()=>{const e=fe.current;e&&le&&e.focus()}),[_]),c((()=>{const e=fe.current;if(null!==e)return e.addEventListener("keydown",Ye),()=>{e.removeEventListener("keydown",Ye)}}),[Ye]),c((()=>{De&&W&&De(W)}),[W]),"undefined"!=typeof window&&s((()=>{const e=fe.current;null!==e&&(e.style.height=`${e.scrollHeight}px`,e.focus(),e.scrollTop=e.scrollHeight)}),[be]),c((()=>{const e=Se.current,n=e=>{e.data.size>0&&Le.current.push(e.data)},l=()=>t(void 0,void 0,void 0,(function*(){const e=new Blob(Le.current,{type:"audio/webm"});yield null==pe?void 0:pe(e),Se.current=null,Ke.current=null,Le.current=[],Oe.current=null,ke(!1),Ae(null)}));return e&&(e.addEventListener("dataavailable",n),e.addEventListener("stop",l)),()=>{e&&(e.removeEventListener("dataavailable",n),e.removeEventListener("stop",l)),lt()}}),[Se.current]),u(Ue,(()=>{He(!1)}));const ot=d(Be,{from:{opacity:0,y:10},enter:{opacity:1,y:0},leave:{opacity:0,y:10},config:{duration:150,ease:"easeOut"}});return n(p,{$active:we,$dragActive:Ce,$disabled:_,$textAreaDisabled:J,$voiceRecording:Te,className:R,onClick:Ze,onDragEnter:()=>Fe(!0),onDragLeave:()=>Fe(!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 _e([...e.dataTransfer.files]),Fe(!1),!1})),children:l(m,{children:[!ee&&!Te&&l(v,{onClick:et,children:[n(h,{type:"file",accept:ne,multiple:!0,disabled:je.length>=Z||_||te,onChange:Je},je.length),n(f,{disabled:je.length>=Z||_||te})]}),l(g,{children:[Te&&null!==Ee&&l(y,{children:[n(b,{}),n(x,{children:B(Ee)})]}),!Te&&l(r,{children:[je.length>0&&n(j,{children:je.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(L,{}):e.name.match(/.docx$/i)?n(O,{}):e.name.match(/.xlsx$/i)?n(P,{}):e.name.match(/.pdf$/i)?n(K,{}):n(H,{}),t=n(U,{size:18,children:t}),n(D,{start:t,onDelete:Qe.bind(null,e),children:e.name.length>20?`...${e.name.slice(-20)}`:e.name},e.name)}))}),(!J||J&&z&&je.length!==Z||J&&be)&&n(w,Object.assign({$disabled:_},ve,{ref:fe,value:be,placeholder:z,disabled:_||J,style:Object.assign(Object.assign({},ve.style),{height:ge}),autoFocus:!_&&le,onFocus:Re,onBlur:ze,onChange:Ge,onInput:We,onPaste:qe}))]})]}),!!X&&!!Y&&l($,{ref:Ue,children:[n(C,{onClick:()=>{He(!Be)},disabled:_}),ot(((e,t)=>t&&l(F,{style:e,children:[n(T,{active:!Ve,onClick:Ie,children:X}),n(T,{active:Ve,onClick:Ne,children:Y})]},"alternative-key-modal")))]}),!re||be||je.length>0?n(k,{disabled:_||q,onClick:Xe,children:n(E,{})}):n(k,Object.assign({},Te&&{color:he.colors.critic},{disabled:_||q,onMouseLeave:rt,onMouseDown:nt,onMouseUp:rt,onTouchStart:nt,onTouchEnd:rt,onTouchCancel:rt,onClick:tt,children:n(Te?E:A,{})}))]})})};export{N as InputMessage};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { MutableRefObject } from 'react';
|
|
2
|
-
import { MessageActionEventHandler, MessageVariant } from '../types';
|
|
2
|
+
import { MessageActionEditEventHandler, MessageActionEventHandler, MessageVariant } from '../types';
|
|
3
3
|
type MessageActionsProps = {
|
|
4
4
|
id?: string;
|
|
5
5
|
message?: string;
|
|
@@ -22,7 +22,7 @@ type MessageActionsProps = {
|
|
|
22
22
|
messageRef?: MutableRefObject<HTMLDivElement | null>;
|
|
23
23
|
onEditing?: (value: boolean) => unknown;
|
|
24
24
|
onEditedText?: (value: string) => unknown;
|
|
25
|
-
onEdit?:
|
|
25
|
+
onEdit?: MessageActionEditEventHandler;
|
|
26
26
|
onResend?: MessageActionEventHandler;
|
|
27
27
|
onDelete?: MessageActionEventHandler;
|
|
28
28
|
onUpdate?: MessageActionEventHandler;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as i,Fragment as o}from"react/jsx-runtime";import{useState as n,useRef as l,useCallback as t,useEffect as r}from"react";import{useTransition as s,easings as d}from"@react-spring/web";import{MenuDotIcon as c}from"../../../icons/menu-dot/index.js";import{UpdateIcon as a}from"../../../icons/update/index.js";import{ResendIcon as u}from"../../../icons/resend/index.js";import{EditIcon as m}from"../../../icons/edit/index.js";import{TrashIcon as p}from"../../../icons/trash/index.js";import{MessageActionsStyled as f,MessageActionsMenuStyled as
|
|
1
|
+
import{jsx as e,jsxs as i,Fragment as o}from"react/jsx-runtime";import{useState as n,useRef as l,useCallback as t,useEffect as r}from"react";import{useTransition as s,easings as d}from"@react-spring/web";import{MenuDotIcon as c}from"../../../icons/menu-dot/index.js";import{UpdateIcon as a}from"../../../icons/update/index.js";import{ResendIcon as u}from"../../../icons/resend/index.js";import{EditIcon as m}from"../../../icons/edit/index.js";import{TrashIcon as p}from"../../../icons/trash/index.js";import{MessageActionsStyled as f,MessageActionsMenuStyled as v,MessageActionsMenuModal as h,MessageActionsMenuModalOptionContent as b,MessageActionsButtonText as x,MessageEditButtonsStyled as g}from"./styled.js";import{MenuOption as j}from"./menu-option/index.js";import{CopyButton as y}from"./copy-button/index.js";import{ActionButton as T}from"./action-button/index.js";import{CheckSmallIcon as k}from"../../../icons/check-small/index.js";import{CloseIcon as L}from"../../../icons/close/index.js";import"../list/styled.js";import{useScrollbarRef as C}from"../list/context.js";const w=({id:w,message:E,variant:D="user",skeleton:z,disableResend:M,disableEdit:$,disableDelete:R,disableUpdate:U,disableCopy:B,editText:H,resendText:O,deleteText:S,submitEditTooltipLabel:W,discardEditTooltipLabel:X,updateTooltipLabel:Y,copyTooltipLabel:q,editing:A,editedText:F,messageRef:G,onEditing:I,onEditedText:J,onEdit:K,onResend:N,onDelete:P,onUpdate:Q,onCopy:V})=>{const[Z,_]=n(!1),[ee,ie]=n(),[oe,ne]=n(!1),[le,te]=n(!1),re=l(null),se=l(null),de=C(),ce=()=>{if(z)return!1;switch(D){case"assistant":return!$;case"user":return!$||!R||!M}},ae=()=>{var e,i,o,n,l,t,r,s,d;const c=null!==(o=null===(i=null===(e=null==de?void 0:de.current)||void 0===e?void 0:e.element)||void 0===i?void 0:i.scrollHeight)&&void 0!==o?o:0,a=null!==(l=null===(n=null==G?void 0:G.current)||void 0===n?void 0:n.scrollWidth)&&void 0!==l?l:0,u=null!==(r=null===(t=re.current)||void 0===t?void 0:t.offsetTop)&&void 0!==r?r:0,m=null!==(d=null===(s=re.current)||void 0===s?void 0:s.offsetLeft)&&void 0!==d?d:0;te(c-u<=180),ne("assistant"===D&&a-m<=160||"user"===D&&m<=160)},ue=t((()=>{ee&&window.clearTimeout(ee),ae(),_(!0)}),[ee]),me=t((()=>{ie(window.setTimeout((()=>_(!1)),300))}),[]),pe=t((()=>{ae(),_(!Z)}),[Z]),fe=t((e=>{const i={id:w,message:E};switch(e){case"edit":null==I||I(!0),null==J||J(null!=E?E:"");break;case"delete":null==P||P(i);break;case"resend":null==N||N(i)}_(!1)}),[w,E]),ve=t((({id:e,message:i})=>{null==I||I(!1),null==K||K({id:e,message:i,variant:D})}),[w,E]),he=t((()=>{null==I||I(!1),null==J||J(null!=E?E:"")}),[E]),be=s(Z,{from:{opacity:0,y:5},enter:{opacity:1,y:0},leave:{opacity:0,y:0},config:{duration:250,easing:d.easeOutSine}});return r((()=>{ee&&window.clearTimeout(ee)}),[]),e(f,{$variant:D,ref:re,children:A?i(g,{children:[e(T,{id:w,message:F,tooltipLabel:W,onClick:ve,children:e(k,{size:20,fill:"#1c64f2"})}),e(T,{tooltipLabel:X,onClick:he,children:e(L,{size:14,fill:"#616D8D"})})]}):i(o,{children:[ce()&&i(v,{ref:se,onBlur:()=>{_(!1)},children:[e(T,{onMouseEnter:ue,onMouseLeave:me,onClick:pe,children:e(c,{size:18})}),be(((o,n)=>n&&i(h,{style:o,onMouseEnter:ue,onMouseLeave:me,$variant:D,$invertedX:oe,$invertedY:le,children:[!M&&"user"===D&&e(j,{onClick:()=>{fe("resend")},children:i(b,{children:[e(u,{fill:"#616D8D"}),e(x,{children:O})]})}),!$&&e(j,{onClick:()=>{fe("edit")},children:i(b,{children:[e(m,{}),e(x,{children:H})]})}),!R&&e(j,{onClick:()=>{fe("delete")},children:i(b,{children:[e(p,{}),e(x,{children:S})]})})]},"message-actions-modal")))]}),!ce()&&!R&&e(T,{id:w,message:E,onClick:P,tooltipLabel:S,children:e(p,{size:20})}),!U&&"user"!==D&&e(T,{id:w,message:E,onClick:Q,tooltipLabel:Y,children:e(a,{size:18})}),!B&&e(y,{onCopy:V,tooltipLabel:q})]})})};export{w as MessageActions};
|
|
@@ -8,4 +8,9 @@ export type MessageActionEventHandler = ({ id, message, }: {
|
|
|
8
8
|
id?: string;
|
|
9
9
|
message?: string;
|
|
10
10
|
}) => unknown;
|
|
11
|
+
export type MessageActionEditEventHandler = ({ id, message, variant }: {
|
|
12
|
+
id?: string;
|
|
13
|
+
message?: string;
|
|
14
|
+
variant?: MessageVariant;
|
|
15
|
+
}) => unknown;
|
|
11
16
|
export type MessageVersionEventHandler = (id?: string) => unknown;
|