softchatjs-react
Version:
Install the softchat-js SDKs
2 lines • 15 kB
JavaScript
import{useEffect as e1,useState as h,useRef as ce}from"react";import l from"./chat-input.module.module.css";import"./chat-input.module.module.css";import{AttachmentTypes as O,MediaType as t1,generateId as de}from"softchatjs-core";import{AiOutlineAudio as me,AiOutlineDelete as Ce,AiOutlinePlus as ue}from"react-icons/ai";import V from"../edit-panel/edit.module.module.css";import P from"../text/text.module.module.css";import{jsx as U1}from"react/jsx-runtime";var F1=o=>{let t={bold:P.textBold,medium:`${P.textMedium}`},i={sm:P.textSmall,md:P.textSizeMd,xs:P.textExtraSmall};return U1("p",{style:o.styles,className:`${P.text} ${t[o.weight||"medium"]} ${i[o.size||"md"]}`,children:o.text})},R=F1;import{AiOutlineClose as G1}from"react-icons/ai";import{createContext as W1,useContext as Y1}from"react";import{createContext as O1,useContext as $1,useState as we}from"react";import{jsx as ke}from"react/jsx-runtime";var J1=O1({activeConversation:null,setActiveConversation:()=>{},conversations:[],setConversations:()=>{},showImageModal:[],setShowImageModal:()=>{},connectionStatus:{isConnected:!1,fetchingConversations:!1,connecting:!1},setConnectionStatus:()=>{}}),u1=()=>$1(J1);var g1={background:{primary:"#1b1d21",secondary:"#202326",disabled:"#E0E0E0"},text:{primary:"white",secondary:"#4A4A4A",disabled:"#9E9E9E"},action:{primary:"#007AFF",secondary:"#5AA3FF"},chatBubble:{left:{bgColor:"#343434",messageColor:"white",messageTimeColor:"#6D6D6D",replyBorderColor:"#D1D1D6"},right:{bgColor:"#343434",messageColor:"white",messageTimeColor:"#6D6D6D",replyBorderColor:"#A3D1FF"}},icon:"white",divider:"rgba(128, 128, 128, 0.136)",hideDivider:!1,input:{bgColor:"#1b1d21",textColor:"white",emojiPickerTheme:"dark"}};import{jsx as He}from"react/jsx-runtime";var X1=W1({config:{theme:g1},client:null}),L=()=>Y1(X1);import{jsx as E,jsxs as p1}from"react/jsx-runtime";var q1=o=>{let{isEditing:t,message:i,isReplying:s,closePanel:u,width:v}=o,{config:m}=L(),{theme:a}=m,g=a?.background?.secondary,C=a?.text?.primary,b=a?.icon;return E("div",{className:t||s?`${V.edit} ${V.editOpen}`:`${V.edit}`,style:{background:g||"#1b1d21",width:v},children:p1("div",{style:{background:g||"#222529"},className:V.edit__message,children:[p1("div",{style:{width:"90%"},children:[E(R,{text:"You",styles:{color:C},weight:"bold"}),E(R,{text:i?.message,styles:{color:C},weight:"medium"})]}),E("div",{style:{width:"10%",marginRight:"15px"},children:i?.attachedMedia[0]?.mediaUrl&&E("img",{style:{height:"100%",width:"100%",borderRadius:"5px"},src:i?.attachedMedia[0]?.mediaUrl,alt:""})}),E(G1,{onClick:u,color:b,size:20,style:{cursor:"pointer"}})]})})},h1=q1;import{useRef as K1}from"react";import Q from"../menu/menu.module.module.css";import{HiPhoto as Q1}from"react-icons/hi2";import{jsx as I,jsxs as f1}from"react/jsx-runtime";var v1=o=>I("div",{ref:o.generalMenuRef,className:Q.menu,children:o.element}),y1=({onChange:o,setFiles:t,closeGeneralMenu:i})=>{let s=K1(),u=[{icon:I(Q1,{size:24,color:"white"}),title:"Photo"}],v=m=>{i();let a=m.target.files;t(Array.from(a))};return I("div",{className:Q.attachment,children:u.map((m,a)=>I("label",{htmlFor:"upload",children:f1("div",{className:Q.attachment__item,children:[f1("div",{style:{marginRight:"10px"},children:[" ",m.icon]}),I("input",{onChange:v,ref:s,type:"file",hidden:!0,id:"upload"}),I(R,{styles:{marginBottom:"3px"},size:"sm",text:m.title})]})},a))})};import{v4 as k1}from"uuid";import{MdCancel as P1}from"react-icons/md";import{VscSend as E1}from"react-icons/vsc";import{CiFaceSmile as ge}from"react-icons/ci";import ee from"emoji-picker-react";import tt from"../emoji/emoji.module.module.css";import{CiFaceSmile as nt}from"react-icons/ci";import{BsReply as st}from"react-icons/bs";import{AiOutlineDelete as rt}from"react-icons/ai";import{FiEdit2 as dt}from"react-icons/fi";import{jsx as te}from"react/jsx-runtime";var x1=({onEmojiPick:o})=>{let{config:t}=L();return te(ee,{height:350,width:300,onEmojiClick:i=>{o(i.emoji)},theme:t?.theme?.input?.emojiPickerTheme})};import b1 from"dayjs";import pt from"moment";import oe from"dayjs/plugin/localizedFormat";import ne from"dayjs/plugin/calendar";b1.extend(oe);b1.extend(ne);function T(o){if(o===0)return"00:00";var t=Number(o.toFixed(0));let i=Math.floor(t/60),s=t%60,u=String(i).padStart(2,"0"),v=String(s).padStart(2,"0");return`${u}:${v}`}import{useState as F,useEffect as ie,useRef as se,useCallback as ae}from"react";import{jsx as A}from"react/jsx-runtime";var M1=o=>{let{size:t=25,color:i="black"}=o;return A("svg",{width:t,height:t,viewBox:"0 0 256 256",fill:"none",children:A("path",{d:"M240 128C240.007 130.716 239.31 133.388 237.978 135.756C236.647 138.123 234.725 140.105 232.4 141.51L88.32 229.65C85.8909 231.138 83.1087 231.95 80.2608 232.002C77.4129 232.055 74.6025 231.347 72.12 229.95C69.6611 228.575 67.6128 226.57 66.1856 224.141C64.7585 221.712 64.0041 218.947 64 216.13V39.8701C64.0041 37.053 64.7585 34.2877 66.1856 31.8588C67.6128 29.4299 69.6611 27.4249 72.12 26.0501C74.6025 24.6536 77.4129 23.9451 80.2608 23.9979C83.1087 24.0506 85.8909 24.8626 88.32 26.3501L232.4 114.49C234.725 115.895 236.647 117.877 237.978 120.245C239.31 122.612 240.007 125.284 240 128Z",fill:i})})},L1=o=>{let{size:t=25,color:i="black"}=o;return A("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",children:A("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M8 5C7.46957 5 6.96086 5.21071 6.58579 5.58579C6.21071 5.96086 6 6.46957 6 7V17C6 17.5304 6.21071 18.0391 6.58579 18.4142C6.96086 18.7893 7.46957 19 8 19H9C9.53043 19 10.0391 18.7893 10.4142 18.4142C10.7893 18.0391 11 17.5304 11 17V7C11 6.46957 10.7893 5.96086 10.4142 5.58579C10.0391 5.21071 9.53043 5 9 5H8ZM15 5C14.4696 5 13.9609 5.21071 13.5858 5.58579C13.2107 5.96086 13 6.46957 13 7V17C13 17.5304 13.2107 18.0391 13.5858 18.4142C13.9609 18.7893 14.4696 19 15 19H16C16.5304 19 17.0391 18.7893 17.4142 18.4142C17.7893 18.0391 18 17.5304 18 17V7C18 6.46957 17.7893 5.96086 17.4142 5.58579C17.0391 5.21071 16.5304 5 16 5H15Z",fill:i})})},S1=o=>{let{size:t=25,color:i="black"}=o;return A("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",children:A("path",{d:"M18 8H17V6C17 3.24 14.76 1 12 1C9.24 1 7 3.24 7 6V8H6C4.9 8 4 8.9 4 10V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V10C20 8.9 19.1 8 18 8ZM9 6C9 4.34 10.34 3 12 3C13.66 3 15 4.34 15 6V8H9V6ZM18 20H6V10H18V20ZM12 17C13.1 17 14 16.1 14 15C14 13.9 13.1 13 12 13C10.9 13 10 13.9 10 15C10 16.1 10.9 17 12 17Z",fill:i})})};import{FaSpinner as re}from"react-icons/fa6";import{jsx as z,jsxs as w1}from"react/jsx-runtime";function U(o){let{blob:t,duration:i,url:s,style:u}=o,[v,m]=F(""),a=se(null),[g,C]=F(!1),[b,y]=F(0),[r,x]=F(!0),{config:p}=L(),H=p.theme,w=p?.theme?.text?.primary||"white",N=()=>{a.current&&(g?a.current.pause():a.current.play(),C(!g))},o1=()=>{},j=()=>{y(a.current.currentTime)},$=()=>{C(!1),y(0)};ie(()=>{if(s)return m(s);if(t){let n1=URL.createObjectURL(t);m(n1),x(!0)}},[t,s]);let _=ae(()=>r?z(re,{style:{marginRight:"3px",color:w}}):z("button",{onClick:N,style:{backgroundColor:"transparent",border:0,padding:0,margin:"0px",marginTop:"4px"},children:g?z(L1,{size:15,color:w}):z(M1,{size:15,color:w})}),[r,g]);return w1("div",{style:{display:"flex",alignItems:"center",padding:"5px",...u},children:[_(),z("audio",{ref:a,onLoadedMetadata:o1,onTimeUpdate:j,onEnded:$,onLoadStart:()=>x(!0),onCanPlay:()=>x(!1),src:v}),w1("p",{style:{padding:0,marginLeft:"10px",marginTop:0,fontSize:"11.5px",color:w},children:[T(b)," : ",T(i)]})]})}import{IoStopCircleOutline as pe}from"react-icons/io5";import"../Loaders/loaders.css";import{jsx as le}from"react/jsx-runtime";function R1(){return le("div",{className:"loader"})}import{jsx as e,jsxs as f}from"react/jsx-runtime";var he=({client:o,conversationId:t,recipientId:i,editProps:s,setEditDetails:u,recipientTyping:v,setMenuDetails:m,menuDetails:a,generalMenuRef:g,closeGeneralMenu:C,textInputRef:b,renderChatInput:y})=>{let[r,x]=h(),[p,H]=h([]),[w,N]=h(!1),[o1,j]=h(!1),[$,_]=h(!1),[n1,ve]=h([]),[I1,T1]=h(null),J=ce(),[k,W]=h(0),[M,Z]=h(null),[i1,s1]=h(null),[a1,A1]=h(0),B=o.messageClient(t),{config:r1}=L(),{theme:S}=r1,{activeConversation:Y}=u1(),[D1,X]=h(!1),D=S?.icon||"white",l1=r1?.theme?.input.bgColor||"#222529",z1=()=>{if(J.current){let{width:n}=J?.current?.getBoundingClientRect();A1(n)}};e1(()=>{z1()},[]),e1(()=>{s?.isEditing?x(s?.message):x({})},[s?.isEditing]);let H1=()=>{if(navigator.mediaDevices){let n={audio:!0};navigator.mediaDevices.getUserMedia(n).then(c=>{let d=new MediaRecorder(c);d.start(1e3),_(!0),T1(d);var q=[];d.onstop=C1=>{let K=new Blob(q,{type:"audio/mp3"});q=[],Z(K)},d.onstart=()=>{},d.ondataavailable=C1=>{q.push(C1.data),k>=300?d.stop():W(K=>K+1)}}).catch(c=>{console.error(`The following error occurred: ${c}`)})}else console.log("not media devices found")};e1(()=>{let n,c;return r?.message&&r.message.length>0&&(clearTimeout(n),n=setTimeout(()=>{o&&(o.messageClient(t).sendTypingNotification(i),n=void 0)},300),clearTimeout(c),c=setTimeout(()=>{o&&o.messageClient(t).sendStoppedTypingNotification(i)},1300)),()=>clearTimeout(n)},[r?.message,t]);let c1=async()=>{try{let n=[];if(p.length>0){let c=p[0].type.split("/")[0];X(!0);let d=await B.uploadFile(p[0],{filename:p[0].name,mimeType:p[0].type,ext:c==="image"?".png":".mp4"});n.push({type:c==="image"?t1.IMAGE:t1.VIDEO,ext:c==="image"?".png":".mp4",mediaId:k1(),mediaUrl:d.link,mimeType:p[0].type})}if(M){X(!0),console.log(M);let c=URL.createObjectURL(M),d=await B.uploadFile(c,{filename:`${de()}.mp3`,mimeType:"audio/mp3",ext:".mp3"});n.push({type:t1.AUDIO,ext:".mp3",mediaId:k1(),mediaUrl:d.link,mimeType:"audio/mp3",meta:{audioDurationSec:k}}),W(0)}return n}catch(n){return console.error(n.message),[]}finally{X(!1)}},G=()=>{x({message:""}),u(void 0)},N1=async()=>{var n=await c1();B.sendMessage({conversationId:t,to:i,message:r?.message,reactions:[],attachedMedia:n,quotedMessage:s?.message,attachmentType:n.length>0?O.MEDIA:O.NONE}),G()},d1=async()=>{B.editMessage({to:i,conversationId:t,messageId:s?.message?.messageId,textMessage:r?.message,shouldEdit:!0}),G()},j1=async()=>{var n=await c1();o.messageClient(t).broadcastMessage({broadcastListId:t,participantsIds:Y.conversation.participants,newMessage:{conversationId:t,to:i,message:r?.message,reactions:[],attachedMedia:n,attachmentType:n.length>0?O.MEDIA:O.NONE,quotedMessage:s?.message}}),G()},m1=async()=>{j(!0);try{if(!r?.message?.length&&!p.length&&!M)return;if(Y?.conversation.conversationType==="broadcast-chat")return s?.isEditing?d1():j1();if(s?.isEditing)return d1();N1()}catch(n){console.log(n)}finally{j(!1),H([]),Z(null)}},_1=n=>{n.key==="Enter"&&r?.message?.length&&m1()},ye=n=>{let c=URL.createObjectURL(n),d=document.createElement("audio");d.src=c,d.controls=!0,document.body.appendChild(d)},Z1=()=>{H1()},B1=()=>{I1.stop(),_(!1)},V1=()=>{Z(null),s1(null)};return Y?.conversation?.conversationType==="admin-chat"?f("div",{style:{padding:"20px",flex:1,display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"},children:[e(S1,{color:"white",size:20}),e(R,{size:"xs",styles:{marginLeft:"5px"},text:"Only the Admin can send messages."})]}):$?e("div",{style:{backgroundColor:S?.background?.secondary,justifyContent:"flex-end",width:"100%",flex:1},className:l.input,children:f("div",{className:l.input__inner,style:{width:"30%",fontStyle:"italic",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"10px",backgroundColor:S?.background?.secondary,boxShadow:"rgba(0, 0, 0, 0.35) 0px 5px 15px"},children:[e("button",{onClick:B1,style:{backgroundColor:"transparent",border:0,marginRight:"12px"},children:e(pe,{style:{marginTop:"5px"},color:"red",size:23})}),e("div",{style:{flex:1,width:"100%",height:"2px",backgroundColor:"grey"},children:e("div",{style:{height:"100%",backgroundColor:"white",width:`${k/300*100}%`}})}),f("p",{style:{fontSize:"11.5px",marginLeft:"15px",color:S?.text?.primary},children:[T(k)," : ",T(300)]})]})}):M&&!i1?f("div",{style:{width:"100%",backgroundColor:S?.background?.secondary||"#1b1d21",justifyContent:"flex-start",display:"flex",alignItems:"center"},className:l.input,children:[f("div",{className:l.input__inner,style:{width:"30%",fontStyle:"italic",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"10px",marginRight:"10px",backgroundColor:S?.background?.secondary||"#1b1d21",boxShadow:"rgba(0, 0, 0, 0.35) 0px 5px 15px"},children:[e("button",{onClick:()=>{Z(null),W(0)},style:{backgroundColor:"transparent",border:0},children:e(Ce,{size:22,color:"red"})}),e(U,{blob:M,duration:k})]}),e(E1,{onClick:()=>{s1(M)},size:22,color:D})]}):f("div",{ref:J,style:{height:"auto",width:"100%"},children:[D1&&e(R1,{}),e(h1,{width:a1,message:s?.message,isEditing:s?.isEditing,isReplying:s?.isReplying,closePanel:()=>u(void 0)}),p.length||M?e(fe,{width:a1,files:p,setFiles:H,audioBlob:i1,voiceMessageDuration:k,cancelAudioAttachment:V1}):null,e("div",{style:{backgroundColor:S?.background?.secondary},className:l.input,children:f("div",{className:l.input__wrap,children:[e("div",{className:l.input__icon,children:!M&&e("div",{children:e(ue,{onClick:()=>m?.({element:e(y1,{closeGeneralMenu:C,setFiles:H})}),color:D,size:22})})}),e("div",{className:l.input__inner,style:{flex:1,fontStyle:"italic",background:l1},children:y?y({onChange:n=>{x({...r,message:n})}}):f("div",{style:{display:"flex",alignItems:"center"},children:[e("input",{style:{background:l1,color:S?.input?.textColor||"white"},onKeyDown:_1,ref:b,value:r?.message,onChange:n=>x({...r,message:n.target.value}),placeholder:"Say something..."}),e(ge,{onClick:()=>N(!w),className:l.input__emoji,size:24,color:D})]})}),e("div",{className:l.input__button,children:r?.message?e(E1,{onClick:m1,size:20,color:D}):e("button",{onClick:Z1,style:{backgroundColor:"transparent",border:0,cursor:"pointer"},children:e(me,{color:D,size:20})})}),a.element?e("div",{className:l.input__menu,children:e(v1,{generalMenuRef:g,element:a.element})}):null,w?e("div",{className:l.input__emoji__picker,children:e(x1,{onEmojiPick:n=>{x({...r,message:n}),N(!1)}})}):null]})})]})},fe=({audioBlob:o,voiceMessageDuration:t,cancelAudioAttachment:i,files:s,setFiles:u,width:v})=>{let m=C=>{let b=s.filter(y=>y.name!==C);u(b)},{config:a}=L(),{theme:g}=a;return f("div",{className:l.chatPhotos,style:{width:v,paddingBottom:"10px"},children:[o?f("div",{style:{padding:"10px",background:g?.background?.primary||"#1b1d21",borderRadius:"30px",cursor:"pointer",position:"relative"},children:[e("div",{onClick:i,className:l.audioCancel,children:e(P1,{size:20,color:"grey"})}),e("div",{style:{border:`1px solid ${g.divider}`,borderRadius:"5px"},children:e(U,{style:{padding:"15px"},blob:o,duration:t})})]}):null,s.length?s.map((C,b)=>{let y=URL.createObjectURL(C);return f("div",{className:l.chatPhotos__item,children:[C.type==="video/quicktime"?e("video",{style:{},src:y}):e("img",{src:y,alt:""}),e("div",{onClick:()=>m(C.name),className:l.chatPhotos__cancel,children:e(P1,{size:20,color:"grey"})})]},b)}):null]})},ro=he;export{ro as default};
//# sourceMappingURL=chat-input.mjs.map