softchatjs-react/dist/components/message-list/message-list.mjs

Install the softchat-js SDKs

import{useMemo as dt,createRef as Ct,useEffect as ae,useRef as J,useState as j,useLayoutEffect as gt}from"react";import W from"./message-list.module.module.css";import ue from"../avartar/avartar.module.module.css";import{createContext as Be,useContext as ze}from"react";import{createContext as je,useContext as He,useState as wt}from"react";import{jsx as St}from"react/jsx-runtime";var Oe=je({activeConversation:null,setActiveConversation:()=>{},conversations:[],setConversations:()=>{},showImageModal:[],setShowImageModal:()=>{},connectionStatus:{isConnected:!1,fetchingConversations:!1,connecting:!1},setConnectionStatus:()=>{}}),V=()=>He(Oe);var ge={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 kt}from"react/jsx-runtime";var Ze=Be({config:{theme:ge},client:null}),b=()=>ze(Ze);import{jsx as $}from"react/jsx-runtime";var Ne=({initials:t,url:e,size:o=35})=>{let{client:r,config:g}=b();return e?$("div",{className:ue.avatar,style:{height:o,width:o,borderRadius:o},children:$("img",{src:e,alt:"avatar",style:{height:"100%",width:"100%",borderRadius:"100%"}})}):$("div",{className:ue.avatar,style:{height:o,width:o,borderRadius:o,backgroundColor:g.theme.background.disabled},children:$("p",{style:{fontSize:35*.5,fontWeight:"bold",textTransform:"capitalize",color:g.theme.text.secondary},children:t})})},se=Ne;import d from"../message-item/message-item.module.module.css";import A from"../text/text.module.module.css";import{jsx as $e}from"react/jsx-runtime";var Ve=t=>{let e={bold:A.textBold,medium:`${A.textMedium}`},o={sm:A.textSmall,md:A.textSizeMd,xs:A.textExtraSmall};return $e("p",{style:t.styles,className:`${A.text} ${e[t.weight||"medium"]} ${o[t.size||"md"]}`,children:t.text})},L=Ve;import F from"dayjs";import Ft from"moment";import Fe from"dayjs/plugin/localizedFormat";import Ue from"dayjs/plugin/calendar";F.extend(Fe);F.extend(Ue);var pe=t=>F(t).format("LT"),fe=t=>F(t).format("ll");function ne(t){if(t===0)return"00:00";var e=Number(t.toFixed(0));let o=Math.floor(e/60),r=e%60,g=String(o).padStart(2,"0"),p=String(r).padStart(2,"0");return`${g}:${p}`}import Ye from"../options-panel/options-panel.module.module.css";import{jsx as U}from"react/jsx-runtime";var Qe=t=>{let{setEditDetails:e,message:o,canEdit:r,openEmojiPanel:g,optionsMenuRef:p,mousePosition:a,client:l,conversationId:C,closeOptionsMenu:c,textInputRef:x}=t,u=[{title:"Edit message",onPress:()=>{e({message:o,isEditing:!0}),c()},enabled:r},{title:"Reply",onPress:()=>{e({message:o,isReplying:!0}),c(),x.current?.focus()},enabled:!0},{title:"Add reaction",onPress:()=>{g()},enabled:!0},{title:"Delete",onPress:()=>{l.messageClient(C).deleteMessage(o.messageId,o.to,C)},enabled:r}];return U("div",{ref:p,className:`${Ye.options}`,children:U("ul",{children:u.map((f,h)=>{if(f.enabled)return U("li",{onClick:f.onPress,children:U(L,{size:"sm",text:f.title})},h)})})})},he=Qe;import Kt from"emoji-picker-react";import Y from"../emoji/emoji.module.module.css";import{CiFaceSmile as Xe}from"react-icons/ci";import{BsReply as Je}from"react-icons/bs";import{AiOutlineDelete as We}from"react-icons/ai";import{FiEdit2 as qe}from"react-icons/fi";import{jsx as D}from"react/jsx-runtime";var Ge=["\u{1F44D}","\u{1F614}","\u{1F642}","\u{1F62E}","\u{1F603}"],ve=t=>{let{client:e,message:o,conversationId:r,recipientId:g,setShowEmojiPanel:p}=t,{config:a}=b(),l=a?.theme?.background?.secondary||"#222529",C=({emoji:c})=>{e.messageClient(r).reactToMessage({conversationId:r,messageId:o.messageId,reactions:[{emoji:c,uid:e.chatUserId}],to:g}),p(!1)};return D("div",{ref:t.emojiPickerRef,style:{background:l},className:Y.emoji,children:Ge.map((c,x)=>D("div",{onClick:()=>C({emoji:c}),className:Y.reaction__emoji,children:c},x))})},ie=({setEditDetails:t,message:e,closeOptionsMenu:o,textInputRef:r,openEmojiPanel:g,client:p,canEdit:a,conversationId:l})=>{let{config:C}=b(),c=C.theme?.icon||"#72767D",x=[{emoji:D(qe,{size:16,color:c}),onPress:()=>{t({message:e,isEditing:!0}),o()},enabled:a},{emoji:D(Xe,{size:16,color:c}),onPress:()=>{g()},enabled:!0},{emoji:D(Je,{size:16,color:c}),onPress:()=>{t({message:e,isReplying:!0}),o(),r.current?.focus()},enabled:!0},{emoji:D(We,{size:16,color:c}),onPress:()=>{p.messageClient(l).deleteMessage(e.messageId,e.to,l)},enabled:a}];return D("div",{className:Y.reactions,children:x.map((u,f)=>{if(u.enabled)return D("div",{onClick:u.onPress,className:Y.reaction__emoji,children:u.emoji},f)})})};import{ThreeDots as st}from"react-loader-spinner";import{BsCheck as nt,BsCheckAll as it,BsClock as be,BsX as rt}from"react-icons/bs";import{MessageStates as z}from"softchatjs-core";import{useState as X,useEffect as Ke,useRef as et,useCallback as tt}from"react";import{jsx as Q}from"react/jsx-runtime";var xe=t=>{let{size:e=25,color:o="black"}=t;return Q("svg",{width:e,height:e,viewBox:"0 0 256 256",fill:"none",children:Q("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:o})})},ye=t=>{let{size:e=25,color:o="black"}=t;return Q("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",children:Q("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:o})})};import{FaSpinner as ot}from"react-icons/fa6";import{jsx as B,jsxs as Me}from"react/jsx-runtime";function re(t){let{blob:e,duration:o,url:r,style:g}=t,[p,a]=X(""),l=et(null),[C,c]=X(!1),[x,u]=X(0),[f,h]=X(!0),{config:_}=b(),q=_.theme,y=_?.theme?.text?.primary||"white",H=()=>{l.current&&(C?l.current.pause():l.current.play(),c(!C))},R=()=>{},v=()=>{u(l.current.currentTime)},w=()=>{c(!1),u(0)};Ke(()=>{if(r)return a(r);if(e){let I=URL.createObjectURL(e);a(I),h(!0)}},[e,r]);let k=tt(()=>f?B(ot,{style:{marginRight:"3px",color:y}}):B("button",{onClick:H,style:{backgroundColor:"transparent",border:0,padding:0,margin:"0px",marginTop:"4px"},children:C?B(ye,{size:15,color:y}):B(xe,{size:15,color:y})}),[f,C]);return Me("div",{style:{display:"flex",alignItems:"center",padding:"5px",...g},children:[k(),B("audio",{ref:l,onLoadedMetadata:R,onTimeUpdate:v,onEnded:w,onLoadStart:()=>h(!0),onCanPlay:()=>h(!1),src:p}),Me("p",{style:{padding:0,marginLeft:"10px",marginTop:0,fontSize:"11.5px",color:y},children:[ne(x)," : ",ne(o)]})]})}import{Fragment as mt,jsx as s,jsxs as P}from"react/jsx-runtime";var we=t=>{let{message:e,index:o,onPress:r,show:g,setEditDetails:p,canEdit:a,showEmojiPanel:l,openEmojiPanel:C,optionsMenuRef:c,emojiPickerRef:x,mousePosition:u,client:f,conversationId:h,closeOptionsMenu:_,scrollToQuote:q,textInputRef:y,recipientId:H,hideAvartar:R}=t,v=e?.attachedMedia?.length,{config:w}=b(),k=!0;var I=f.chatUserId;let M=e.messageOwner.uid===I&&k,Z=e.messageOwner.uid===I?w.theme?.chatBubble?.right?.bgColor:w.theme?.chatBubble?.left?.bgColor||"#343434",N=e.messageOwner.uid===I?w.theme?.chatBubble?.right?.messageColor:w.theme?.chatBubble?.left?.messageColor||"white",G=e.messageOwner.uid===I?w.theme?.chatBubble?.right?.messageTimeColor:w.theme?.chatBubble?.left?.messageTimeColor||"grey",K=()=>e.messageState===z.SENT?s(nt,{style:{marginTop:"8px",color:"grey"}}):e.messageState===z.DELIVERED||e.messageState===z.READ?s(it,{style:{marginTop:"8px",color:"grey"}}):e.messageState===z.LOADING?s(be,{style:{marginTop:"8px",color:"grey"}}):e.messageState===z.FAILED?s(rt,{style:{marginTop:"8px",color:"red"}}):s(be,{style:{marginTop:"8px",color:"grey"}});return P("div",{className:`${d.conversation}`,onContextMenu:O=>{r(O,o,e)},children:[P("div",{className:`${M?d.conversation__wrapper__alternate:d.conversation__wrapper}`,children:[!M&&s("div",{className:d.conversation__image,children:R?null:s(se,{initials:e.messageOwner.username.substring(0,1),url:e.messageOwner.profileUrl})}),P("div",{style:{display:"flex",alignItems:"flex-start",flexDirection:"column",justifyContent:"flex-start"},children:[l?s(ve,{conversationId:h,client:f,emojiPickerRef:x,message:e,recipientId:H,setShowEmojiPanel:t.setShowEmojiPanel}):null,P("div",{className:d.conversation__text__container,children:[M&&s("div",{className:d.conversation__text__container__reactions,children:s(ie,{textInputRef:y,optionsMenuRef:c,canEdit:a,message:e,setEditDetails:p,openEmojiPanel:C,mousePosition:u,client:f,conversationId:h,closeOptionsMenu:_})}),s("div",{style:{display:"flex",alignItems:"flex-end"},children:P("div",{style:{backgroundColor:Z},className:`${d.conversation__text__wrap} ${v?d.conversation__text__wrap__attach:d.conversation__text__wrap__no__attach} ${R?d.conversation__text__wrap__half__border:`${M?d.conversation__text__wrap__border__alternate:d.conversation__text__wrap__border}`}`,children:[e.quotedMessageId&&s(ct,{scrollToQuote:q,message:e?.quotedMessage}),v?s(lt,{attachments:e.attachedMedia}):null,e.message?P("div",{style:{alignItems:"center",paddingLeft:v&&"10px",paddingRight:v&&"10px",justifyContent:"space-between",wordWrap:"break-word"},children:[s(L,{styles:{textAlign:"left",marginRight:"15px",color:N},size:"sm",text:e?.message}),P("div",{style:{display:"flex",justifyContent:"flex-end",alignItems:"center",marginTop:e?.message?.length>10?"0px":"-25px"},children:[e.lastEdited&&s(L,{styles:{textAlign:"right",marginRight:"5px",color:G,fontSize:"9px"},size:"sm",text:"(Edited)"}),s(L,{size:"xs",styles:{color:G},text:pe(e.createdAt)}),M&&s(mt,{children:K()})]})]}):null]})}),!M&&s("div",{className:d.conversation__text__container__reactions,children:s(ie,{textInputRef:y,optionsMenuRef:c,canEdit:a,message:e,setEditDetails:p,openEmojiPanel:C,mousePosition:u,client:f,conversationId:h,closeOptionsMenu:_})})]}),s("div",{style:{width:"100%",display:"flex",justifyContent:M?"flex-end":"flex-start"},children:s(at,{reactions:e.reactions,message:e})})]})]}),g?s(he,{textInputRef:y,optionsMenuRef:c,canEdit:a,message:e,setEditDetails:p,openEmojiPanel:C,mousePosition:u,client:f,conversationId:h,closeOptionsMenu:_}):null]})},at=({reactions:t,message:e})=>{let{client:o}=b(),{conversationId:r}=e,g=o.messageClient(r),p=({emojiId:a})=>{let l=t.filter(C=>C.uid!==a);g.reactToMessage({conversationId:r,messageId:e.messageId,reactions:l,to:"30"})};return s("div",{className:d.emoji,children:t.map((a,l)=>s("div",{onClick:()=>p({emojiId:a.uid}),className:d.emoji__wrap,children:s("p",{children:a.emoji})},l))})},lt=({attachments:t})=>{let{setShowImageModal:e}=V();return s("div",{className:d.attachments,children:t.map((o,r)=>{if(o.type==="image")return s("img",{onClick:()=>e(t),src:o.mediaUrl,className:d.image,alt:"attached-images"},`${r}-attch`);if(o.type==="video")return s("video",{onClick:()=>e(t),src:o.mediaUrl,className:d.image,controls:!0},`${r}-attch`);if(o.type==="audio")return s(re,{url:o?.mediaUrl,duration:o?.meta?.audioDurationSec||0,blob:null})})})},ct=({message:t,scrollToQuote:e})=>{let o=t?.messageOwner?.username;return P("div",{className:d.quote,onClick:()=>e(t.messageId),children:[P("div",{children:[s(L,{styles:{color:"greenyellow",textAlign:"left"},size:"sm",weight:"bold",text:o?.length>30?`${o?.slice(0,5)}...`:o}),s(L,{size:"xs",text:t?.message,styles:{textAlign:"left"}})]}),s("img",{src:t?.attachedMedia[0]?.mediaUrl,alt:""})]})};var Le=({message:t})=>P("div",{className:d.typing__wrap,children:[s("div",{style:{marginRight:"10px"},children:s(se,{initials:t.messageOwner.username.substring(0,1),url:t.messageOwner.profileUrl})}),s(st,{visible:!0,height:"20",width:"50",color:"#343434",radius:"9",ariaLabel:"three-dots-loading",wrapperClass:""})]});import ut from"moment";import{jsx as S,jsxs as le}from"react/jsx-runtime";var pt=t=>{let{messages:e=[],setEditDetails:o,recipientTyping:r,mousePosition:g,conversationId:p,client:a,textInputRef:l,setPresentPage:C,presentPage:c,recipientId:x,scrollToKey:u,fetchingMore:f,messagesEndRef:h,renderChatBubble:_,renderChatHeader:q,headerHeightOffset:y,getOlderMessages:H,customHeight:R}=t,v=J(),[w,k]=j(!1),[I,M]=j(!1),[Z,N]=j(""),[G,K]=j(""),O=J(null),ee=J(null),[ce,Se]=j({}),{activeConversation:Pe}=V(),{config:te}=b(),[ft,ht]=j(!1),oe=J({}),me=te.theme,Ie=te?.theme?.text?.primary||"white";var vt=null;function Ee(){return window.innerHeight-80-60-y}let Re=(n,i)=>{n.preventDefault(),M(!1),k(!0),N(i)},de=n=>{w&&!O.current?.contains(n.target)&&k(!1),I&&!ee.current?.contains(n.target)&&M(!1)},Te=n=>{M(!0),N(n)};ae(()=>{document.addEventListener("mousedown",de)},[O,ee,de]);let De=n=>{h.current&&h.current.scrollIntoView({behavior:n===!0?"instant":"smooth"})};ae(()=>{e.length>0&&e.map(n=>{Se(i=>{let m={...i};return m[n.messageId]=Ct(),m})})},[e]),ae(()=>{De()},[Pe]);let _e=n=>{try{K(n);let i=ce[n];i.current&&(i.current.style.backgroundColor="#282c34",i.current.style.transition="0.5s",setTimeout(()=>{i.current.style.backgroundColor="transparent"},1500),i?.current.scrollIntoView({behavior:"smooth",block:"center"}))}catch(i){console.log(i)}},Ce=e.reduce((n,i)=>{let m=ut(i.createdAt).format("MMMM DD, YYYY"),T=n.find(E=>E.date===m);if(T)T.messages.push(i);else{let E={date:m,messages:[i]};n.push(E)}return n},[]),xt=()=>{if(v.current.scrollTop===0){let n=v.current.scrollHeight;C(m=>m+1);let i=v.current.scrollHeight;v.current.scrollTop=i-n}},ke=n=>{try{let i=v.current,m=i.scrollHeight,T=i.scrollTop,{scrollTop:E}=n.target,yt=Ee();E<=0&&H(()=>{})}catch(i){console.error(i.message)}};gt(()=>{try{if(!u||v.current.scrollTop!==0)return;oe.current[u]&&oe.current[u].scrollIntoView()}catch(n){console.error(n.message)}},[u]);let Ae=dt(()=>R?`calc(${R}px - 80px - 60px - ${y}px)`:`calc(100vh - 80px - 60px - ${y}px)`,[R]);return le("div",{ref:v,onScroll:ke,className:W.wrapper,style:{height:Ae},children:[f&&S("div",{className:W.loading,children:S(L,{styles:{color:"white"},size:"sm",text:"Loading more..."})}),Ce.map((n,i)=>le("div",{className:W.wrapper__sec,children:[le("div",{style:{justifyContent:"center",display:"flex",width:"100%",alignItems:"center"},children:[S("div",{style:{flex:1,height:".5px",width:"100%",backgroundColor:me?.divider}}),S("div",{style:{backgroundColor:te?.theme?.background?.secondary||"#1b1d21"},className:W.wrapper__date,children:S(L,{styles:{color:Ie},size:"xs",text:fe(n.date)})}),S("div",{style:{flex:1,height:".5px",width:"100%",backgroundColor:me?.divider}})]},`${i}-sec`),n.messages.map((m,T)=>S("div",{ref:E=>oe.current[m.messageId]=E,children:S("div",{ref:ce[m?.messageId],children:t.renderChatBubble?t.renderChatBubble(m):S(we,{hideAvartar:m.messageOwner.uid===n.messages[T+1]?.messageOwner.uid,textInputRef:l,show:w&&Z==m.messageId,showEmojiPanel:I&&Z==m.messageId,index:T,message:m,onPress:E=>Re(E,m.messageId),setEditDetails:o,canEdit:m.from===a?.chatUserId,openEmojiPanel:()=>Te(m.messageId),optionsMenuRef:O,emojiPickerRef:ee,mousePosition:g,client:a,conversationId:p,closeOptionsMenu:()=>k(!1),scrollToQuote:_e,recipientId:x,setShowEmojiPanel:M},T)})}))]},i)),r&&S(Le,{message:Ce[0]?.messages[0]}),S("div",{ref:h,style:{height:"1px",width:"100%"}})]})},Q1=pt;export{Q1 as default};
//# sourceMappingURL=message-list.mjs.map