@iqmo/browser
Version:
Browser Stlite
2 lines (1 loc) • 12.6 kB
JavaScript
import{r as l,E as K,_ as O,c as p,j as o,c0 as re,bI as Y,bW as G,bE as _,bX as F,ch as y,ao as U,c1 as le,bw as de,bV as ce,bS as pe,cf as q,b7 as ge,bl as ue,bP as he,ci as me,D as H,bU as fe,bT as xe}from"./index-0xtYjrTa.js";import{g as be,C as ve,I as ye,F as M,E as je,a as Ie,s as we,u as Ce,b as ze}from"./FileHelper-8IqgwBWr.js";import{I as Fe}from"./InputInstructions-D_qxDPd4.js";import{u as Ee,T as Te}from"./useTextInputAutoExpand-NUdcCyCX.js";import{i as Re}from"./inputUtils-DCYiajnz.js";import{E as Se}from"./ErrorOutline.esm-COcwP2Q7.js";import{U as J}from"./UploadFileInfo-B5SttewO.js";var Q=l.forwardRef(function(e,t){var a={fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"};return l.createElement(K,O({iconAttrs:a,iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:t}),l.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),l.createElement("path",{d:"M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5a2.5 2.5 0 015 0v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5a2.5 2.5 0 005 0V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"}))});Q.displayName="AttachFile";var Z=l.forwardRef(function(e,t){var a={fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"};return l.createElement(K,O({iconAttrs:a,iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:t}),l.createElement("rect",{width:24,height:24,fill:"none"}),l.createElement("path",{d:"M3 5.51v3.71c0 .46.31.86.76.97L11 12l-7.24 1.81c-.45.11-.76.51-.76.97v3.71c0 .72.73 1.2 1.39.92l15.42-6.49c.82-.34.82-1.5 0-1.84L4.39 4.58C3.73 4.31 3 4.79 3 5.51z"}))});Z.displayName="Send";const Le=p("div",{target:"e3id6jz12"})(({theme:e,height:t})=>({backgroundColor:e.colors.transparent,position:"absolute",left:0,bottom:0,minHeight:`max(${e.sizes.emptyDropdownHeight}, ${t})`,width:"100%",zIndex:e.zIndices.priority}),""),Ue=p("div",{target:"e3id6jz11"})(({theme:e,height:t})=>({border:`${e.sizes.borderWidth} solid`,borderColor:e.colors.primary,borderRadius:e.radii.chatInput,backgroundColor:e.colors.secondaryBg,color:e.colors.primary,display:"flex",alignItems:"center",justifyContent:"center",height:t,width:"100%",fontWeight:e.fontWeights.bold}),""),He=p("div",{target:"e3id6jz10"})(({theme:e,disabled:t})=>({display:"flex",alignItems:"top",height:"100%",marginTop:`-${e.sizes.borderWidth}`,cursor:t?"not-allowed":"auto"}),""),Me=p("div",{target:"e3id6jz9"})(({disabled:e})=>({pointerEvents:e?"none":"auto"}),""),ke=p("div",{target:"e3id6jz8"})(({theme:e})=>({marginTop:"0.625em",marginLeft:e.spacing.sm,height:e.spacing.xl,width:e.sizes.borderWidth,backgroundColor:e.colors.fadedText20}),""),Pe=p("div",{target:"e3id6jz7"})(({theme:e})=>({left:0,right:0,lineHeight:e.lineHeights.tight,paddingLeft:e.spacing.sm,paddingRight:e.spacing.sm,overflowX:"auto"}),""),Be=p("div",{target:"e3id6jz6"})({name:"zjik7",styles:"display:flex"}),We=p("div",{target:"e3id6jz5"})({name:"ou8xsw",styles:"flex:0 0 auto"}),De=p("div",{target:"e3id6jz4"})(({theme:e})=>({display:"flex",alignItems:"center",padding:e.spacing.sm,gap:e.spacing.twoXS}),""),Ne=p("div",{target:"e3id6jz3"})(({theme:e})=>({color:e.colors.fadedText60}),""),$e=p("div",{target:"e3id6jz2"})(({theme:e,fileStatus:t})=>({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:t.type==="uploaded"?e.colors.bodyText:e.colors.fadedText60}),""),Ve=p("div",{target:"e3id6jz1"})(({theme:e})=>({marginRight:e.spacing.md,color:e.colors.fadedText60}),""),Ae=p("small",{target:"e3id6jz0"})(({theme:e})=>({display:"flex",alignItems:"center",maxHeight:e.sizes.smallElementHeight,color:e.colors.fadedText60,"& :hover":{color:e.colors.bodyText}}),""),Xe=({getRootProps:e,getInputProps:t,acceptFile:a,disabled:d,theme:m})=>o.jsxs(He,{disabled:d,children:[o.jsxs(Me,{"data-testid":"stChatInputFileUploadButton",disabled:d,...e(),children:[o.jsx("input",{...t()}),o.jsx(re,{content:`Upload or drag and drop ${a===y.Multiple?"files":"a file"}`,placement:Y.TOP,onMouseEnterDelay:500,children:o.jsx(G,{kind:_.MINIMAL,disabled:d,children:o.jsx(F,{content:Q,size:"lg",color:d?m.colors.fadedText40:m.colors.fadedText60})})})]}),o.jsx(ke,{})]}),Ke=l.memo(Xe),Oe=({getRootProps:e,getInputProps:t,acceptFile:a,inputHeight:d})=>o.jsxs(o.Fragment,{children:[o.jsx(Le,{height:d,...e(),children:o.jsx("input",{...t()})}),o.jsx(Ue,{height:d,children:`Drag and drop ${a===y.Multiple?"files":"a file"} here`})]}),Ye=l.memo(Oe);function Ge({children:e,content:t}){const a=U();return o.jsx(le,{content:t,placement:Y.TOP,overrides:{Body:{style:{top:`-${a.sizes.minElementHeight}`}}},children:e})}const _e=({fileInfo:e})=>{const t=U(),{type:a}=e.status;switch(a){case"uploading":return o.jsx(ce,{"data-testid":"stChatInputFileIconSpinner",size:"lg",margin:"0",padding:"0"});case"error":return o.jsx(Ge,{content:e.status.errorMessage,children:o.jsx(F,{color:t.colors.red,content:Se,size:"lg"})});case"uploaded":return o.jsx(F,{content:ye,size:"lg"});default:return de(a),null}},qe=({fileInfo:e,onDelete:t})=>o.jsxs(De,{className:"stChatInputFile","data-testid":"stChatInputFile",children:[o.jsx(Ne,{children:o.jsx(_e,{fileInfo:e})}),o.jsx($e,{className:"stChatInputFileName","data-testid":"stChatInputFileName",title:e.name,fileStatus:e.status,children:e.name}),o.jsx(Ve,{children:be(e.size,M.Byte)}),o.jsx(Ae,{"data-testid":"stChatInputDeleteBtn",children:o.jsx(G,{onClick:()=>t(e.id),kind:_.MINIMAL,children:o.jsx(F,{content:ve,size:"lg"})})})]}),Je=l.memo(qe),Qe=({items:e,onDelete:t})=>o.jsx(Pe,{"data-testid":"stChatUploadedFiles",children:o.jsx(Be,{children:e.map(a=>o.jsx(We,{children:o.jsx(Je,{fileInfo:a,onDelete:t})},a.id))})}),Ze=l.memo(Qe),et=({acceptMultipleFiles:e,maxFileSize:t,uploadClient:a,uploadFile:d,addFiles:m,getNextLocalFileId:c,deleteExistingFiles:b,onUploadComplete:x})=>(f,u)=>{if(!e&&f.length===0&&u.length>1){const g=u.findIndex(h=>h.errors?.[0].code===je.TooManyFiles);g>=0&&(f.push(u[g].file),u.splice(g,1))}if(!e&&f.length>0&&b(),a.fetchFileURLs(f).then(g=>{pe(g,f).forEach(([h,E])=>{d(h,E)})}).catch(g=>{m(f.map(h=>new J(h.name,h.size,c(),{type:"error",errorMessage:g})))}),u.length>0){const g=u.map(h=>Ie(h,c(),t));m(g)}x()},tt=({getNextLocalFileId:e,addFiles:t,updateFile:a,uploadClient:d,element:m,onUploadProgress:c,onUploadComplete:b})=>(x,f)=>{const u=q.CancelToken.source(),g=new J(f.name,f.size,e(),{type:"uploading",cancelToken:u,progress:1});t([g]),d.uploadFile({formId:"",...m},x.uploadUrl,f,h=>c(h,g.id),u.token).then(()=>b(g.id,x)).catch(h=>{q.isCancel(h)||a(g.id,g.setStatus({type:"error",errorMessage:h?h.toString():"Unknown error"}))})},ot=p("div",{target:"e1d2x3se4"})({name:"1nibcdy",styles:"border:none;position:relative;display:flex"}),it=p("div",{target:"e1d2x3se3"})(({theme:e,extended:t})=>({border:`${e.sizes.borderWidth} solid`,borderColor:e.colors.widgetBorderColor??e.colors.transparent,borderRadius:e.radii.chatInput,backgroundColor:e.colors.secondaryBg,position:"relative",flexGrow:1,display:"flex",alignItems:"center",paddingLeft:e.spacing.lg,maxHeight:t?"none":e.sizes.minElementHeight,gap:e.spacing.sm,overflow:"hidden",":focus-within":{borderColor:e.colors.primary}}),""),st=p("button",{target:"e1d2x3se2"})(({theme:e,disabled:t,extended:a})=>{const d=ge(e),[m,c]=d?[e.colors.gray60,e.colors.gray80]:[e.colors.gray80,e.colors.gray40];return{border:"none",backgroundColor:e.colors.transparent,borderTopRightRadius:a?"0":e.radii.chatInput,borderTopLeftRadius:a?e.radii.default:"0",borderBottomRightRadius:e.radii.chatInput,display:"inline-flex",alignItems:"center",justifyContent:"center",lineHeight:e.lineHeights.none,margin:e.spacing.none,padding:e.spacing.sm,color:t?m:c,pointerEvents:"auto","&:focus":{outline:"none"},":focus":{outline:"none"},"&:focus-visible":{backgroundColor:d?e.colors.gray10:e.colors.gray90},"&:hover":{color:e.colors.primary},"&:disabled, &:disabled:hover, &:disabled:active":{backgroundColor:e.colors.transparent,borderColor:e.colors.transparent,color:e.colors.gray,cursor:"not-allowed"}}},""),at=p("div",{target:"e1d2x3se1"})(({theme:e})=>({display:"flex",alignItems:"flex-end",height:"100%",position:"absolute",right:0,marginBottom:`-${e.sizes.borderWidth}`,pointerEvents:"none"}),""),nt=p("div",{target:"e1d2x3se0"})(({theme:e})=>({position:"absolute",bottom:"0px",right:`calc(${e.iconSizes.xl} + 2 * ${e.spacing.sm} + ${e.spacing.sm})`}),""),k=(e,t,a)=>a.map(d=>d.id===e?t:d),P=(e,t)=>t.find(a=>a.id===e);function rt({disabled:e,element:t,widgetMgr:a,fragmentId:d,uploadClient:m}){const c=U(),{placeholder:b,maxChars:x}=t,f=l.useRef(0),u=l.useRef(null),[g,h]=ue(),{innerWidth:E,innerHeight:B}=he(),[C,R]=l.useState(t.default),[j,I]=l.useState([]),[z,S]=l.useState(!1),w=Ee({textareaRef:u,dependencies:[b]}),L=l.useMemo(()=>j.some(i=>i.status.type==="uploading")?!1:C!==""||j.length>0,[j,C]),v=me(t.acceptFile),W=we(t.maxUploadSizeMb,M.Megabyte,M.Byte),D=l.useCallback(i=>I(n=>[...n,...i]),[]),N=l.useCallback(i=>{I(n=>{const r=P(i,n);return H(r)?n:(r.status.type==="uploading"&&r.status.cancelToken.cancel(),r.status.type==="uploaded"&&r.status.fileUrls.deleteUrl&&m.deleteFile(r.status.fileUrls.deleteUrl),n.filter(s=>s.id!==i))})},[m]),ee=()=>{const i=j.filter(n=>n.status.type==="uploaded").map(n=>{const{name:r,size:s,status:T}=n,{fileId:ae,fileUrls:ne}=T;return new fe({fileId:ae,fileUrls:ne,name:r,size:s})});return new xe({uploadedFileInfo:i})},$=()=>f.current++,te=et({acceptMultipleFiles:v===y.Multiple,maxFileSize:W,uploadClient:m,uploadFile:tt({getNextLocalFileId:$,addFiles:D,updateFile:(i,n)=>{I(r=>k(i,n,r))},uploadClient:m,element:t,onUploadProgress:(i,n)=>{I(r=>{const s=P(n,r);if(H(s)||s.status.type!=="uploading")return r;const T=Math.round(i.loaded*100/i.total);return s.status.progress===T?r:k(n,s.setStatus({type:"uploading",cancelToken:s.status.cancelToken,progress:T}),r)})},onUploadComplete:(i,n)=>{I(r=>{const s=P(i,r);return H(s)||s.status.type!=="uploading"?r:k(s.id,s.setStatus({type:"uploaded",fileId:n.fileId,fileUrls:n}),r)})}}),addFiles:D,getNextLocalFileId:$,deleteExistingFiles:()=>j.forEach(i=>N(i.id)),onUploadComplete:()=>{u.current&&u.current.focus()}}),{getRootProps:V,getInputProps:A}=Ce({onDrop:te,multiple:v===y.Multiple,accept:ze(t.fileType),maxSize:W}),X=()=>{if(u.current&&u.current.focus(),!L||e)return;const i={data:C,fileUploaderState:ee()};a.setChatInputValue(t,i,{fromUi:!0},d),I([]),R("")},oe=i=>{const{metaKey:n,ctrlKey:r,shiftKey:s}=i;Re(i)&&!s&&!r&&!n&&(i.preventDefault(),X())},ie=i=>{const{value:n}=i.target;x!==0&&n.length>x||(R(n),w.updateScrollHeight())};l.useEffect(()=>{if(t.setValue){t.setValue=!1;const i=t.value||"";R(i)}},[t]),l.useEffect(()=>{const i=s=>{s.preventDefault(),s.stopPropagation(),!z&&s.dataTransfer?.types.includes("Files")&&S(!0)},n=s=>{s.preventDefault(),s.stopPropagation(),z&&(s.clientX<=0&&s.clientY<=0||s.clientX>=E&&s.clientY>=B)&&S(!1)},r=s=>{s.preventDefault(),s.stopPropagation(),z&&S(!1)};return window.addEventListener("dragover",i),window.addEventListener("drop",r),window.addEventListener("dragleave",n),()=>{window.removeEventListener("dragover",i),window.removeEventListener("drop",r),window.removeEventListener("dragleave",n)}},[z,E,B]);const se=v!==y.None&&z;return o.jsxs(o.Fragment,{children:[v===y.None?null:o.jsx(Ze,{items:[...j],onDelete:N}),o.jsx(ot,{className:"stChatInput","data-testid":"stChatInput",ref:h,children:se?o.jsx(Ye,{getRootProps:V,getInputProps:A,acceptFile:v,inputHeight:w.height}):o.jsxs(it,{extended:w.isExtended,children:[v===y.None?null:o.jsx(Ke,{getRootProps:V,getInputProps:A,acceptFile:v,disabled:e,theme:c}),o.jsx(Te,{inputRef:u,value:C,placeholder:b,onChange:ie,onKeyDown:oe,"aria-label":b,disabled:e,rows:1,overrides:{Root:{style:{minHeight:c.sizes.minElementHeight,outline:"none",borderLeftWidth:"0",borderRightWidth:"0",borderTopWidth:"0",borderBottomWidth:"0",borderTopLeftRadius:"0",borderTopRightRadius:"0",borderBottomRightRadius:"0",borderBottomLeftRadius:"0"}},Input:{props:{"data-testid":"stChatInputTextArea"},style:{fontWeight:c.fontWeights.normal,lineHeight:c.lineHeights.inputWidget,"::placeholder":{color:c.colors.fadedText60},height:w.height,maxHeight:w.maxHeight,paddingLeft:c.spacing.none,paddingBottom:c.spacing.sm,paddingTop:c.spacing.sm,paddingRight:`calc(${c.iconSizes.xl} + 2 * ${c.spacing.sm} + ${c.spacing.sm})`}}}}),g>c.breakpoints.hideWidgetDetails&&o.jsx(nt,{children:o.jsx(Fe,{dirty:L,value:C,maxLength:x,type:"chat",inForm:!1})}),o.jsx(at,{children:o.jsx(st,{onClick:X,disabled:!L||e,extended:w.isExtended,"data-testid":"stChatInputSubmitButton",children:o.jsx(F,{content:Z,size:"xl",color:"inherit"})})})]})})]})}const lt=l.memo(rt);export{lt as default};