softchatjs-react/dist/components/user-conversations/index.mjs

Install the softchat-js SDKs

import{useState as Q,useMemo as j}from"react";import p from"./index.module.module.css";import g from"../text/text.module.module.css";import{jsx as N}from"react/jsx-runtime";var F=t=>{let s={bold:g.textBold,medium:`${g.textMedium}`},n={sm:g.textSmall,md:g.textSizeMd,xs:g.textExtraSmall};return N("p",{style:t.styles,className:`${g.text} ${s[t.weight||"medium"]} ${n[t.size||"md"]}`,children:t.text})},h=F;import k from"dayjs";import w from"moment";import $ from"dayjs/plugin/localizedFormat";import W from"dayjs/plugin/calendar";k.extend($);k.extend(W);function R(t){if(!t)return"";let s=w(),n=w(t),a=w.duration(s.diff(n)),r=Math.floor(a.asYears());if(r>0)return r+"yr";let l=Math.floor(a.asMonths());if(l>0)return l+"mo";let o=Math.floor(a.asWeeks());if(o>0)return o+"w";let i=Math.floor(a.asDays());if(i>0)return i+"d";let c=Math.floor(a.asHours());if(c>0)return c+"h";let d=Math.floor(a.asMinutes());return d>0?d+"m":"Just now"}import{createContext as Y,useContext as _,useState as p1}from"react";import{jsx as u1}from"react/jsx-runtime";var J=Y({activeConversation:null,setActiveConversation:()=>{},conversations:[],setConversations:()=>{},showImageModal:[],setShowImageModal:()=>{},connectionStatus:{isConnected:!1,fetchingConversations:!1,connecting:!1},setConnectionStatus:()=>{}}),M=()=>_(J);import{createContext as X,useContext as G}from"react";var T={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 S1}from"react/jsx-runtime";var O=X({config:{theme:T},client:null}),u=()=>G(O);import H from"../avartar/avartar.module.module.css";import{jsx as y}from"react/jsx-runtime";var q=({initials:t,url:s,size:n=35})=>{let{client:a,config:r}=u();return s?y("div",{className:H.avatar,style:{height:n,width:n,borderRadius:n},children:y("img",{src:s,alt:"avatar",style:{height:"100%",width:"100%",borderRadius:"100%"}})}):y("div",{className:H.avatar,style:{height:n,width:n,borderRadius:n,backgroundColor:r.theme.background.disabled},children:y("p",{style:{fontSize:35*.5,fontWeight:"bold",textTransform:"capitalize",color:r.theme.text.secondary},children:t})})},S=q;import{useState as K}from"react";import{jsx as v,jsxs as Z}from"react/jsx-runtime";function b({connectionStatus:t,theme:s,onTextChange:n}){let[a,r]=K(""),l=o=>{r(o),n(o)};return Z("div",{style:{width:"100%",padding:"20px"},children:[v("div",{children:t.isConnected?Z("span",{style:{display:"flex",alignItems:"center",color:s.text.primary},children:[v("p",{style:{fontWeight:"bold",fontSize:"26px"},children:"Chats"}),v("span",{style:{marginLeft:10,height:"5px",width:"5px",borderRadius:"5px",backgroundColor:"green"}})]}):v("p",{style:{color:s.text.primary},children:"Connecting..."})}),v("input",{value:a,onChange:o=>l(o.target.value),placeholder:"Search chats",style:{height:"40px",width:"100%",marginTop:"15px",textIndent:"15px",backgroundColor:"transparent",border:`1px solid ${s.divider}`,borderRadius:"10px",color:s.text.primary}})]})}import{jsx as V}from"react/jsx-runtime";var A=t=>{let{size:s=25,color:n="black"}=t;return V("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:V("path",{d:"M8.6 22.5L6.7 19.3L3.1 18.5L3.45 14.8L1 12L3.45 9.2L3.1 5.5L6.7 4.7L8.6 1.5L12 2.95L15.4 1.5L17.3 4.7L20.9 5.5L20.55 9.2L23 12L20.55 14.8L20.9 18.5L17.3 19.3L15.4 22.5L12 21.05L8.6 22.5ZM9.45 19.95L12 18.85L14.6 19.95L16 17.55L18.75 16.9L18.5 14.1L20.35 12L18.5 9.85L18.75 7.05L16 6.45L14.55 4.05L12 5.15L9.4 4.05L8 6.45L5.25 7.05L5.5 9.85L3.65 12L5.5 14.1L5.25 16.95L8 17.55L9.45 19.95ZM10.95 15.55L16.6 9.9L15.2 8.45L10.95 12.7L8.8 10.6L7.4 12L10.95 15.55Z",fill:n})})};import{IoCloseCircle as t1}from"react-icons/io5";import{jsx as e,jsxs as C}from"react/jsx-runtime";var t5=({setMainListOpen:t,setShowUserList:s,showUserList:n,userListRef:a,renderConversationList:r,connectionStatus:l,resetState:o})=>{let{client:i,config:c}=u(),{setActiveConversation:d,conversations:f}=M(),[x,z]=Q("");if(r)return e("div",{style:{width:"100%",height:"100%",background:"green",position:"relative"},children:r({conversations:f,onCoversationItemClick:m=>{d(m),t(!1)}})});let I=j(()=>{try{let m=i.chatUserId;return f.filter(B=>B.conversation.participantList.some(L=>{let P=L.participantDetails.username.toLowerCase(),U=L.participantDetails?.firstname?.toLowerCase()||"",E=L.participantDetails?.lastname?.toLowerCase()||"";return L.participantDetails?.uid!==m&&(P.includes(x.toLowerCase())||U.includes(x.toLowerCase())||E.includes(x.toLowerCase()))}))}catch{return f}},[f,x]);return C("div",{style:{background:c?.theme?.background?.secondary,borderRight:`1px solid ${c.theme.divider}`},className:p.list,children:[e(b,{connectionStatus:l,theme:c.theme,onTextChange:m=>z(m)}),I.length===0&&e("div",{className:p.list__empty,children:e(h,{styles:{textAlign:"center",color:c.theme.text.primary},text:"Start a new conversation."})}),I.map((m,D)=>e(e1,{item:m,onClick:()=>{d(m),t(!1),o()},borderBottom:""},D))]})},e1=({item:t,onClick:s,borderBottom:n})=>{let{client:a,config:r}=u(),{activeConversation:l}=M(),o=t.conversation.participantList.filter(d=>d.participantId!==a.chatUserId),i=r?.theme?.text?.primary||"white",c=()=>t.lastMessage?.attachmentType==="media"?C("div",{className:p.media,children:[e("img",{src:t.lastMessage.attachedMedia.find(d=>d.type==="image")?.mediaUrl,alt:""}),e(h,{styles:{textAlign:"left",color:i},size:"sm",text:"Media"})]}):e(h,{styles:{textAlign:"left",color:i},size:"sm",text:t.lastMessage?.message?.length>75?t.lastMessage?.message?.substring(0,75)+"...":t.lastMessage?.message});return C("div",{className:p.item,onClick:s,children:[e("div",{style:{marginRight:"10px"},children:o[0]&&e(S,{initials:o[0]?.participantDetails?.username?.substring(0,1),size:40,url:o[0]?.participantDetails?.profileUrl})}),C("div",{style:{width:"100%",padding:"20px 0px 20px 0px",borderBottom:n},children:[C("div",{style:{width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between"},children:[C("div",{style:{display:"flex",alignItems:"center"},children:[e(h,{styles:{textAlign:"left",color:i,textTransform:"capitalize",marginRight:"5px"},weight:"bold",text:o[0]?.participantDetails?.username}),t.conversation.conversationType==="admin-chat"&&e(A,{size:15,color:r.theme.icon})]}),e(h,{size:"sm",styles:{color:i},text:R(t.lastMessage?.createdAt)})]}),C("div",{style:{width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between"},children:[c(),t.unread.length>0&&e("div",{className:p.unread,children:e(h,{size:"xs",text:String(t.unread.length),styles:{color:"black"}})})]})]})]})},e5=({users:t=[],userListRef:s,close:n})=>{let{client:a,config:r}=u(),l=o=>{try{a.newConversation(o,null).create("Hey there \u{1F44B}"),n()}catch(i){console.error(i?.message)}};return C("div",{ref:s,style:{background:r?.theme?.background?.secondary||"#202326"},className:p.userList,children:[C("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:15},children:[e(h,{styles:{color:r?.theme?.text?.primary||"white"},text:"Users"}),e("button",{onClick:n,style:{backgroundColor:"transparent",border:0,cursor:"pointer"},children:e(t1,{size:22})})]}),e("div",{className:p.scrollbar,style:{overflowY:"scroll",height:"300px"},children:t.map((o,i)=>C("div",{onClick:()=>{l(o)},className:p.userList__wrap,children:[e(S,{initials:o.username.substring(0,1),url:o.profileUrl}),e("div",{className:p.userList__user,style:{marginLeft:"6px"},children:e(h,{size:"sm",text:o.username,styles:{color:r?.theme?.text?.primary||"white"}})})]},i))})]})};export{t5 as ConversationList,e5 as UserList};
//# sourceMappingURL=index.mjs.map