softchatjs-react/dist/components/message-item/index.mjs

Install the softchat-js SDKs

import Y from"../avartar/avartar.module.module.css";import{createContext as l1,useContext as c1}from"react";import{createContext as i1,useContext as a1,useState as H1}from"react";import{jsx as Z1}from"react/jsx-runtime";var r1=i1({activeConversation:null,setActiveConversation:()=>{},conversations:[],setConversations:()=>{},showImageModal:[],setShowImageModal:()=>{},connectionStatus:{isConnected:!1,fetchingConversations:!1,connecting:!1},setConnectionStatus:()=>{}}),U=()=>a1(r1);var W={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 Y1}from"react/jsx-runtime";var C1=l1({config:{theme:W},client:null}),f=()=>c1(C1);import{jsx as _}from"react/jsx-runtime";var m1=({initials:t,url:e,size:o=35})=>{let{client:s,config:i}=f();return e?_("div",{className:Y.avatar,style:{height:o,width:o,borderRadius:o},children:_("img",{src:e,alt:"avatar",style:{height:"100%",width:"100%",borderRadius:"100%"}})}):_("div",{className:Y.avatar,style:{height:o,width:o,borderRadius:o,backgroundColor:i.theme.background.disabled},children:_("p",{style:{fontSize:35*.5,fontWeight:"bold",textTransform:"capitalize",color:i.theme.text.secondary},children:t})})},H=m1;import a from"./message-item.module.module.css";import P from"../text/text.module.module.css";import{jsx as p1}from"react/jsx-runtime";var d1=t=>{let e={bold:P.textBold,medium:`${P.textMedium}`},o={sm:P.textSmall,md:P.textSizeMd,xs:P.textExtraSmall};return p1("p",{style:t.styles,className:`${P.text} ${e[t.weight||"medium"]} ${o[t.size||"md"]}`,children:t.text})},h=d1;import B from"dayjs";import se from"moment";import g1 from"dayjs/plugin/localizedFormat";import u1 from"dayjs/plugin/calendar";B.extend(g1);B.extend(u1);var Q=t=>B(t).format("LT");function Z(t){if(t===0)return"00:00";var e=Number(t.toFixed(0));let o=Math.floor(e/60),s=e%60,i=String(o).padStart(2,"0"),l=String(s).padStart(2,"0");return`${i}:${l}`}import f1 from"../options-panel/options-panel.module.module.css";import{jsx as D}from"react/jsx-runtime";var h1=t=>{let{setEditDetails:e,message:o,canEdit:s,openEmojiPanel:i,optionsMenuRef:l,mousePosition:C,client:c,conversationId:m,closeOptionsMenu:r,textInputRef:g}=t,p=[{title:"Edit message",onPress:()=>{e({message:o,isEditing:!0}),r()},enabled:s},{title:"Reply",onPress:()=>{e({message:o,isReplying:!0}),r(),g.current?.focus()},enabled:!0},{title:"Add reaction",onPress:()=>{i()},enabled:!0},{title:"Delete",onPress:()=>{c.messageClient(m).deleteMessage(o.messageId,o.to,m)},enabled:s}];return D("div",{ref:l,className:`${f1.options}`,children:D("ul",{children:p.map((d,u)=>{if(d.enabled)return D("li",{onClick:d.onPress,children:D(h,{size:"sm",text:d.title})},u)})})})},X=h1;import pe from"emoji-picker-react";import T from"../emoji/emoji.module.module.css";import{CiFaceSmile as v1}from"react-icons/ci";import{BsReply as x1}from"react-icons/bs";import{AiOutlineDelete as y1}from"react-icons/ai";import{FiEdit2 as b1}from"react-icons/fi";import{jsx as b}from"react/jsx-runtime";var M1=["\u{1F44D}","\u{1F614}","\u{1F642}","\u{1F62E}","\u{1F603}"],q=t=>{let{client:e,message:o,conversationId:s,recipientId:i,setShowEmojiPanel:l}=t,{config:C}=f(),c=C?.theme?.background?.secondary||"#222529",m=({emoji:r})=>{e.messageClient(s).reactToMessage({conversationId:s,messageId:o.messageId,reactions:[{emoji:r,uid:e.chatUserId}],to:i}),l(!1)};return b("div",{ref:t.emojiPickerRef,style:{background:c},className:T.emoji,children:M1.map((r,g)=>b("div",{onClick:()=>m({emoji:r}),className:T.reaction__emoji,children:r},g))})},V=({setEditDetails:t,message:e,closeOptionsMenu:o,textInputRef:s,openEmojiPanel:i,client:l,canEdit:C,conversationId:c})=>{let{config:m}=f(),r=m.theme?.icon||"#72767D",g=[{emoji:b(b1,{size:16,color:r}),onPress:()=>{t({message:e,isEditing:!0}),o()},enabled:C},{emoji:b(v1,{size:16,color:r}),onPress:()=>{i()},enabled:!0},{emoji:b(x1,{size:16,color:r}),onPress:()=>{t({message:e,isReplying:!0}),o(),s.current?.focus()},enabled:!0},{emoji:b(y1,{size:16,color:r}),onPress:()=>{l.messageClient(c).deleteMessage(e.messageId,e.to,c)},enabled:C}];return b("div",{className:T.reactions,children:g.map((p,d)=>{if(p.enabled)return b("div",{onClick:p.onPress,className:T.reaction__emoji,children:p.emoji},d)})})};import{ThreeDots as I1}from"react-loader-spinner";import{BsCheck as R1,BsCheckAll as E1,BsClock as e1,BsX as _1}from"react-icons/bs";import{MessageStates as R}from"softchatjs-core";import{useState as A,useEffect as L1,useRef as w1,useCallback as S1}from"react";import{jsx as k}from"react/jsx-runtime";var G=t=>{let{size:e=25,color:o="black"}=t;return k("svg",{width:e,height:e,viewBox:"0 0 256 256",fill:"none",children:k("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})})},J=t=>{let{size:e=25,color:o="black"}=t;return k("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",children:k("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 P1}from"react-icons/fa6";import{jsx as I,jsxs as K}from"react/jsx-runtime";function N(t){let{blob:e,duration:o,url:s,style:i}=t,[l,C]=A(""),c=w1(null),[m,r]=A(!1),[g,p]=A(0),[d,u]=A(!0),{config:L}=f(),$=L.theme,x=L?.theme?.text?.primary||"white",j=()=>{c.current&&(m?c.current.pause():c.current.play(),r(!m))},E=()=>{},w=()=>{p(c.current.currentTime)},y=()=>{r(!1),p(0)};L1(()=>{if(s)return C(s);if(e){let S=URL.createObjectURL(e);C(S),u(!0)}},[e,s]);let z=S1(()=>d?I(P1,{style:{marginRight:"3px",color:x}}):I("button",{onClick:j,style:{backgroundColor:"transparent",border:0,padding:0,margin:"0px",marginTop:"4px"},children:m?I(J,{size:15,color:x}):I(G,{size:15,color:x})}),[d,m]);return K("div",{style:{display:"flex",alignItems:"center",padding:"5px",...i},children:[z(),I("audio",{ref:c,onLoadedMetadata:E,onTimeUpdate:w,onEnded:y,onLoadStart:()=>u(!0),onCanPlay:()=>u(!1),src:l}),K("p",{style:{padding:0,marginLeft:"10px",marginTop:0,fontSize:"11.5px",color:x},children:[Z(g)," : ",Z(o)]})]})}import{Fragment as O,jsx as n,jsxs as v}from"react/jsx-runtime";var D1={URL_REGEX:/^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,8}(:[0-9]{1,5})?(\/.*)?$/gm},Ue=t=>{let{message:e,index:o,onPress:s,show:i,setEditDetails:l,canEdit:C,showEmojiPanel:c,openEmojiPanel:m,optionsMenuRef:r,emojiPickerRef:g,mousePosition:p,client:d,conversationId:u,closeOptionsMenu:L,scrollToQuote:$,textInputRef:x,recipientId:j,hideAvartar:E}=t,w=e?.attachedMedia?.length,{config:y}=f(),z=!0;var S=d.chatUserId;let M=e.messageOwner.uid===S&&z,t1=e.messageOwner.uid===S?y.theme?.chatBubble?.right?.bgColor:y.theme?.chatBubble?.left?.bgColor||"#343434",o1=e.messageOwner.uid===S?y.theme?.chatBubble?.right?.messageColor:y.theme?.chatBubble?.left?.messageColor||"white",F=e.messageOwner.uid===S?y.theme?.chatBubble?.right?.messageTimeColor:y.theme?.chatBubble?.left?.messageTimeColor||"grey",n1=()=>e.messageState===R.SENT?n(R1,{style:{marginTop:"8px",color:"grey"}}):e.messageState===R.DELIVERED||e.messageState===R.READ?n(E1,{style:{marginTop:"8px",color:"grey"}}):e.messageState===R.LOADING?n(e1,{style:{marginTop:"8px",color:"grey"}}):e.messageState===R.FAILED?n(_1,{style:{marginTop:"8px",color:"red"}}):n(e1,{style:{marginTop:"8px",color:"grey"}});return v("div",{className:`${a.conversation}`,onContextMenu:s1=>{s(s1,o,e)},children:[v("div",{className:`${M?a.conversation__wrapper__alternate:a.conversation__wrapper}`,children:[!M&&n("div",{className:a.conversation__image,children:E?null:n(H,{initials:e.messageOwner.username.substring(0,1),url:e.messageOwner.profileUrl})}),v("div",{style:{display:"flex",alignItems:"flex-start",flexDirection:"column",justifyContent:"flex-start"},children:[c?n(q,{conversationId:u,client:d,emojiPickerRef:g,message:e,recipientId:j,setShowEmojiPanel:t.setShowEmojiPanel}):null,v("div",{className:a.conversation__text__container,children:[M&&n("div",{className:a.conversation__text__container__reactions,children:n(V,{textInputRef:x,optionsMenuRef:r,canEdit:C,message:e,setEditDetails:l,openEmojiPanel:m,mousePosition:p,client:d,conversationId:u,closeOptionsMenu:L})}),n("div",{style:{display:"flex",alignItems:"flex-end"},children:v("div",{style:{backgroundColor:t1},className:`${a.conversation__text__wrap} ${w?a.conversation__text__wrap__attach:a.conversation__text__wrap__no__attach} ${E?a.conversation__text__wrap__half__border:`${M?a.conversation__text__wrap__border__alternate:a.conversation__text__wrap__border}`}`,children:[e.quotedMessageId&&n(A1,{scrollToQuote:$,message:e?.quotedMessage}),w?n(k1,{attachments:e.attachedMedia}):null,e.message?v("div",{style:{alignItems:"center",paddingLeft:w&&"10px",paddingRight:w&&"10px",justifyContent:"space-between",wordWrap:"break-word"},children:[n(h,{styles:{textAlign:"left",marginRight:"15px",color:o1},size:"sm",text:e?.message}),v("div",{style:{display:"flex",justifyContent:"flex-end",alignItems:"center",marginTop:e?.message?.length>10?"0px":"-25px"},children:[e.lastEdited&&n(h,{styles:{textAlign:"right",marginRight:"5px",color:F,fontSize:"9px"},size:"sm",text:"(Edited)"}),n(h,{size:"xs",styles:{color:F},text:Q(e.createdAt)}),M&&n(O,{children:n1()})]})]}):null]})}),!M&&n("div",{className:a.conversation__text__container__reactions,children:n(V,{textInputRef:x,optionsMenuRef:r,canEdit:C,message:e,setEditDetails:l,openEmojiPanel:m,mousePosition:p,client:d,conversationId:u,closeOptionsMenu:L})})]}),n("div",{style:{width:"100%",display:"flex",justifyContent:M?"flex-end":"flex-start"},children:n(T1,{reactions:e.reactions,message:e})})]})]}),i?n(X,{textInputRef:x,optionsMenuRef:r,canEdit:C,message:e,setEditDetails:l,openEmojiPanel:m,mousePosition:p,client:d,conversationId:u,closeOptionsMenu:L}):null]})},T1=({reactions:t,message:e})=>{let{client:o}=f(),{conversationId:s}=e,i=o.messageClient(s),l=({emojiId:C})=>{let c=t.filter(m=>m.uid!==C);i.reactToMessage({conversationId:s,messageId:e.messageId,reactions:c,to:"30"})};return n("div",{className:a.emoji,children:t.map((C,c)=>n("div",{onClick:()=>l({emojiId:C.uid}),className:a.emoji__wrap,children:n("p",{children:C.emoji})},c))})},k1=({attachments:t})=>{let{setShowImageModal:e}=U();return n("div",{className:a.attachments,children:t.map((o,s)=>{if(o.type==="image")return n("img",{onClick:()=>e(t),src:o.mediaUrl,className:a.image,alt:"attached-images"},`${s}-attch`);if(o.type==="video")return n("video",{onClick:()=>e(t),src:o.mediaUrl,className:a.image,controls:!0},`${s}-attch`);if(o.type==="audio")return n(N,{url:o?.mediaUrl,duration:o?.meta?.audioDurationSec||0,blob:null})})})},A1=({message:t,scrollToQuote:e})=>{let o=t?.messageOwner?.username;return v("div",{className:a.quote,onClick:()=>e(t.messageId),children:[v("div",{children:[n(h,{styles:{color:"greenyellow",textAlign:"left"},size:"sm",weight:"bold",text:o?.length>30?`${o?.slice(0,5)}...`:o}),n(h,{size:"xs",text:t?.message,styles:{textAlign:"left"}})]}),n("img",{src:t?.attachedMedia[0]?.mediaUrl,alt:""})]})},We=({content:t})=>{let e=t?.split("/");return n(O,{children:e?.map((o,s)=>n("div",{style:{display:"flex"},children:o.split(" ")?.map((i,l)=>i.match(D1.URL_REGEX)?n(O,{children:n("a",{style:{textDecoration:"none"},href:i,children:n(h,{styles:{textAlign:"left",marginRight:"4px",color:"#1C9BEF"},size:"sm",text:i},l)})}):n(h,{styles:{textAlign:"left",marginRight:"4px"},text:i,size:"sm"},l))},s))})},Ye=({message:t})=>v("div",{className:a.typing__wrap,children:[n("div",{style:{marginRight:"10px"},children:n(H,{initials:t.messageOwner.username.substring(0,1),url:t.messageOwner.profileUrl})}),n(I1,{visible:!0,height:"20",width:"50",color:"#343434",radius:"9",ariaLabel:"three-dots-loading",wrapperClass:""})]});export{We as FormattedText,Ue as MessageItem,A1 as QuotedMessage,Ye as TypingIndicator,D1 as regex};
//# sourceMappingURL=index.mjs.map