@stlite/browser
Version:
Browser Stlite
2 lines (1 loc) • 13.1 kB
JavaScript
import{r as n,E as G,_ as Q,c as g,C as ue,z as U,j as i,b$ as ge,bH as q,bV as J,bC as Z,bW as H,bu as he,cc as me,bQ as fe,b_ as xe,cd as y,bO as be,ce as ve,K as k,bS as ye,bR as je}from"./index-B3URMCDH.js";import{g as we,C as Ie,I as Ce,F as $,E as ze,a as Fe,s as Ee,u as He,b as Re}from"./FileHelper-ICQl1Zw-.js";import{I as Te}from"./InputInstructions-DZbCUUkN.js";import{i as Le}from"./inputUtils-DEic7uDW.js";import{E as Se}from"./ErrorOutline.esm-CC6CC4sP.js";import{a as ee}from"./index-qCq0L4jN.js";import{U as te}from"./UploadFileInfo-B5SttewO.js";import{T as Me}from"./textarea-CwdqKyKq.js";var ie=n.forwardRef(function(e,t){var a={fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"};return n.createElement(G,Q({iconAttrs:a,iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:t}),n.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),n.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"}))});ie.displayName="AttachFile";var oe=n.forwardRef(function(e,t){var a={fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"};return n.createElement(G,Q({iconAttrs:a,iconVerticalAlign:"middle",iconViewBox:"0 0 24 24"},e,{ref:t}),n.createElement("rect",{width:24,height:24,fill:"none"}),n.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"}))});oe.displayName="Send";const Ue=g("div",{target:"e1d2x3se4"})({name:"1nibcdy",styles:"border:none;position:relative;display:flex"}),ke=g("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}}),""),$e=g("button",{target:"e1d2x3se2"})(({theme:e,disabled:t,extended:a})=>{const p=ue(e),[m,u]=p?[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:u,pointerEvents:"auto","&:focus":{outline:"none"},":focus":{outline:"none"},"&:focus-visible":{backgroundColor:p?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"}}},""),Be=g("div",{target:"e1d2x3se1"})(({theme:e})=>({display:"flex",alignItems:"flex-end",height:"100%",position:"absolute",right:0,marginBottom:`-${e.sizes.borderWidth}`,pointerEvents:"none"}),""),Pe=g("div",{target:"e1d2x3se0"})(({theme:e})=>({position:"absolute",bottom:"0px",right:`calc(${e.iconSizes.xl} + 2 * ${e.spacing.sm} + ${e.spacing.sm})`}),""),Ne=g("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}),""),De=g("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}),""),We=g("div",{target:"e3id6jz10"})(({theme:e,disabled:t})=>({display:"flex",alignItems:"top",height:"100%",marginTop:`-${e.sizes.borderWidth}`,cursor:t?"not-allowed":"auto"}),""),Ve=g("div",{target:"e3id6jz9"})(({disabled:e})=>({pointerEvents:e?"none":"auto"}),""),Ae=g("div",{target:"e3id6jz8"})(({theme:e})=>({marginTop:"0.625em",marginLeft:e.spacing.sm,height:e.spacing.xl,width:e.sizes.borderWidth,backgroundColor:e.colors.fadedText20}),""),Ke=g("div",{target:"e3id6jz7"})(({theme:e})=>({left:0,right:0,lineHeight:e.lineHeights.tight,paddingLeft:e.spacing.sm,paddingRight:e.spacing.sm,overflowX:"auto"}),""),Oe=g("div",{target:"e3id6jz6"})({name:"zjik7",styles:"display:flex"}),Xe=g("div",{target:"e3id6jz5"})({name:"ou8xsw",styles:"flex:0 0 auto"}),Ye=g("div",{target:"e3id6jz4"})(({theme:e})=>({display:"flex",alignItems:"center",padding:e.spacing.sm,gap:e.spacing.twoXS}),""),_e=g("div",{target:"e3id6jz3"})(({theme:e})=>({color:e.colors.fadedText60}),""),Ge=g("div",{target:"e3id6jz2"})(({theme:e,fileStatus:t})=>({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:t.type==="uploaded"?e.colors.bodyText:e.colors.fadedText60}),""),Qe=g("div",{target:"e3id6jz1"})(({theme:e})=>({marginRight:e.spacing.md,color:e.colors.fadedText60}),""),qe=g("small",{target:"e3id6jz0"})(({theme:e})=>({display:"flex",alignItems:"center",maxHeight:e.sizes.smallElementHeight,color:e.colors.fadedText60,"& :hover":{color:e.colors.bodyText}}),"");function Je({children:e,content:t}){const a=U();return i.jsx(ge,{content:t,placement:q.TOP,overrides:{Body:{style:{top:`-${a.sizes.minElementHeight}`}}},children:e})}const Ze=({fileInfo:e})=>{const t=U(),{type:a}=e.status;switch(a){case"uploading":return i.jsx(me,{usingCustomTheme:!1,"data-testid":"stChatInputFileIconSpinner",size:"lg",margin:"0",padding:"0"});case"error":return i.jsx(Je,{content:e.status.errorMessage,children:i.jsx(H,{color:t.colors.red,content:Se,size:"lg"})});case"uploaded":return i.jsx(H,{content:Ce,size:"lg"});default:return he(a),null}},et=({fileInfo:e,onDelete:t})=>i.jsxs(Ye,{className:"stChatInputFile","data-testid":"stChatInputFile",children:[i.jsx(_e,{children:i.jsx(Ze,{fileInfo:e})}),i.jsx(Ge,{className:"stChatInputFileName","data-testid":"stChatInputFileName",title:e.name,fileStatus:e.status,children:e.name}),i.jsx(Qe,{children:we(e.size,$.Byte)}),i.jsx(qe,{"data-testid":"stChatInputDeleteBtn",children:i.jsx(J,{onClick:()=>t(e.id),kind:Z.MINIMAL,children:i.jsx(H,{content:Ie,size:"lg"})})})]}),tt=n.memo(et),it=({items:e,onDelete:t})=>i.jsx(Ke,{"data-testid":"stChatUploadedFiles",children:i.jsx(Oe,{children:e.map(a=>i.jsx(Xe,{children:i.jsx(tt,{fileInfo:a,onDelete:t})},a.id))})}),ot=n.memo(it),st=({getNextLocalFileId:e,addFiles:t,updateFile:a,uploadClient:p,element:m,onUploadProgress:u,onUploadComplete:x})=>(j,d)=>{const f=ee.CancelToken.source(),c=new te(d.name,d.size,e(),{type:"uploading",cancelToken:f,progress:1});t([c]),p.uploadFile({formId:"",...m},j.uploadUrl,d,h=>u(h,c.id),f.token).then(()=>x(c.id,j)).catch(h=>{ee.isCancel(h)||a(c.id,c.setStatus({type:"error",errorMessage:h?h.toString():"Unknown error"}))})},rt=({acceptMultipleFiles:e,maxFileSize:t,uploadClient:a,uploadFile:p,addFiles:m,getNextLocalFileId:u,deleteExistingFiles:x,onUploadComplete:j})=>(d,f)=>{if(!e&&d.length===0&&f.length>1){const c=f.findIndex(h=>{var w;return((w=h.errors)==null?void 0:w[0].code)===ze.TooManyFiles});c>=0&&(d.push(f[c].file),f.splice(c,1))}if(!e&&d.length>0&&x(),a.fetchFileURLs(d).then(c=>{fe(c,d).forEach(([h,w])=>{p(h,w)})}).catch(c=>{m(d.map(h=>new te(h.name,h.size,u(),{type:"error",errorMessage:c})))}),f.length>0){const c=f.map(h=>Fe(h,u(),t));m(c)}j()},nt=({getRootProps:e,getInputProps:t,acceptFile:a,disabled:p,theme:m})=>i.jsxs(We,{disabled:p,children:[i.jsxs(Ve,{"data-testid":"stChatInputFileUploadButton",disabled:p,...e(),children:[i.jsx("input",{...t()}),i.jsx(xe,{content:`Upload or drag and drop ${a===y.Multiple?"files":"a file"}`,placement:q.TOP,onMouseEnterDelay:500,children:i.jsx(J,{kind:Z.MINIMAL,disabled:p,children:i.jsx(H,{content:ie,size:"lg",color:p?m.colors.fadedText40:m.colors.fadedText60})})})]}),i.jsx(Ae,{})]}),at=n.memo(nt),lt=({getRootProps:e,getInputProps:t,acceptFile:a,inputHeight:p})=>i.jsxs(i.Fragment,{children:[i.jsx(Ne,{height:p,...e(),children:i.jsx("input",{...t()})}),i.jsx(De,{height:p,children:`Drag and drop ${a===y.Multiple?"files":"a file"} here`})]}),dt=n.memo(lt),ct=6.5,B=1,P=(e,t,a)=>a.map(p=>p.id===e?t:p),N=(e,t)=>t.find(a=>a.id===e);function pt({disabled:e,element:t,widgetMgr:a,fragmentId:p,uploadClient:m}){const u=U(),{placeholder:x,maxChars:j}=t,d=n.useRef(null),f=n.useRef(0),c=n.useRef({minHeight:0,maxHeight:0}),[h,w]=be(),[z,T]=n.useState(t.default),[F,L]=n.useState(0),[R,se]=n.useState(!1),[I,C]=n.useState([]),[E,S]=n.useState(!1),M=n.useMemo(()=>I.some(o=>o.status.type==="uploading")?!1:z!==""||I.length>0,[I,z]),b=ve(t.acceptFile),D=Ee(t.maxUploadSizeMb,$.Megabyte,$.Byte),W=n.useCallback(o=>C(s=>[...s,...o]),[]),V=n.useCallback(o=>{C(s=>{const l=N(o,s);return k(l)?s:(l.status.type==="uploading"&&l.status.cancelToken.cancel(),l.status.type==="uploaded"&&l.status.fileUrls.deleteUrl&&m.deleteFile(l.status.fileUrls.deleteUrl),s.filter(r=>r.id!==o))})},[m]),re=()=>{const o=I.filter(s=>s.status.type==="uploaded").map(s=>{const{name:l,size:r,status:v}=s,{fileId:ce,fileUrls:pe}=v;return new ye({fileId:ce,fileUrls:pe,name:l,size:r})});return new je({uploadedFileInfo:o})},A=()=>f.current++,ne=rt({acceptMultipleFiles:b===y.Multiple,maxFileSize:D,uploadClient:m,uploadFile:st({getNextLocalFileId:A,addFiles:W,updateFile:(o,s)=>{C(l=>P(o,s,l))},uploadClient:m,element:t,onUploadProgress:(o,s)=>{C(l=>{const r=N(s,l);if(k(r)||r.status.type!=="uploading")return l;const v=Math.round(o.loaded*100/o.total);return r.status.progress===v?l:P(s,r.setStatus({type:"uploading",cancelToken:r.status.cancelToken,progress:v}),l)})},onUploadComplete:(o,s)=>{C(l=>{const r=N(o,l);return k(r)||r.status.type!=="uploading"?l:P(r.id,r.setStatus({type:"uploaded",fileId:s.fileId,fileUrls:s}),l)})}}),addFiles:W,getNextLocalFileId:A,deleteExistingFiles:()=>I.forEach(o=>V(o.id)),onUploadComplete:()=>{d.current&&d.current.focus()}}),{getRootProps:K,getInputProps:O}=He({onDrop:ne,multiple:b===y.Multiple,accept:Re(t.fileType),maxSize:D}),X=()=>{let o=0;const{current:s}=d;return s&&(s.style.height="auto",o=s.scrollHeight,s.style.height=""),o},Y=()=>{if(d.current&&d.current.focus(),!M||e)return;const o={data:z,fileUploaderState:re()};a.setChatInputValue(t,o,{fromUi:!0},p),C([]),T(""),L(0)},ae=o=>{const{metaKey:s,ctrlKey:l,shiftKey:r}=o;Le(o)&&!r&&!l&&!s&&(o.preventDefault(),Y())},le=o=>{const{value:s}=o.target,{maxChars:l}=t;l!==0&&s.length>l||(T(s),L(X()))};n.useEffect(()=>{if(t.setValue){t.setValue=!1;const o=t.value||"";T(o)}},[t]),n.useLayoutEffect(()=>{if(d.current){const{offsetHeight:o}=d.current;c.current.minHeight=o,c.current.maxHeight=o*ct}},[d]),n.useEffect(()=>{const o=r=>{var v;r.preventDefault(),r.stopPropagation(),!E&&(v=r.dataTransfer)!=null&&v.types.includes("Files")&&S(!0)},s=r=>{r.preventDefault(),r.stopPropagation(),E&&(r.clientX<=0&&r.clientY<=0||r.clientX>=window.innerWidth&&r.clientY>=window.innerHeight)&&S(!1)},l=r=>{r.preventDefault(),r.stopPropagation(),E&&S(!1)};return window.addEventListener("dragover",o),window.addEventListener("drop",l),window.addEventListener("dragleave",s),()=>{window.removeEventListener("dragover",o),window.removeEventListener("drop",l),window.removeEventListener("dragleave",s)}},[E]),n.useLayoutEffect(()=>{const{minHeight:o}=c.current;se(F>0&&d.current?Math.abs(F-o)>B:!1)},[F]),n.useLayoutEffect(()=>{L(X())},[x]);const{maxHeight:_}=c.current,de=b!==y.None&&E;return i.jsxs(i.Fragment,{children:[b===y.None?null:i.jsx(ot,{items:[...I],onDelete:V}),i.jsx(Ue,{className:"stChatInput","data-testid":"stChatInput",ref:w,children:de?i.jsx(dt,{getRootProps:K,getInputProps:O,acceptFile:b,inputHeight:R?`${F+B}px`:u.sizes.minElementHeight}):i.jsxs(ke,{extended:R,children:[b===y.None?null:i.jsx(at,{getRootProps:K,getInputProps:O,acceptFile:b,disabled:e,theme:u}),i.jsx(Me,{inputRef:d,value:z,placeholder:x,onChange:le,onKeyDown:ae,"aria-label":x,disabled:e,rows:1,overrides:{Root:{style:{minHeight:u.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:{lineHeight:u.lineHeights.inputWidget,"::placeholder":{opacity:"0.7"},height:R?`${F+B}px`:"auto",maxHeight:_?`${_}px`:"none",paddingLeft:u.spacing.none,paddingBottom:u.spacing.sm,paddingTop:u.spacing.sm,paddingRight:`calc(${u.iconSizes.xl} + 2 * ${u.spacing.sm} + ${u.spacing.sm})`}}}}),h>u.breakpoints.hideWidgetDetails&&i.jsx(Pe,{children:i.jsx(Te,{dirty:M,value:z,maxLength:j,type:"chat",inForm:!1})}),i.jsx(Be,{children:i.jsx($e,{onClick:Y,disabled:!M||e,extended:R,"data-testid":"stChatInputSubmitButton",children:i.jsx(H,{content:oe,size:"xl",color:"inherit"})})})]})})]})}const ut=n.memo(pt);export{ut as default};