isomtrik-quickchat
Version:
isomtrik-quickchat is a lightweight, real-time chat component built with Stencil JS. It is designed to be seamlessly integrated into web applications, offering customizable and responsive chat functionalities. The module supports both CommonJS and ES modu
552 lines (518 loc) • 56.2 kB
JavaScript
import{r as t,g as e,h as i,H as o,a as n}from"./p-5ec77bd1.js";import{B as s}from"./p-f8b36946.js";import"./p-0beaae0c.js";import"./p-8ce782d9.js";import{k as r,s as a,h as d,a as l}from"./p-3a537be0.js";import{w as h,g as p}from"./p-6b09d4e5.js";import{I as c}from"./p-30b883d0.js";const g=({content:t="",color:e="",fontSize:i="16px",textAlign:o="center",fontWeight:n="normal",fontStyle:s="normal",backgroundColor:d="transparent",borderColor:l="transparent",borderWidth:h="1px",borderStyle:p="solid",borderRadius:c="4px",fontFamily:g="",width:u="",height:m="auto"})=>r`
<div
class="storybook-text"
style=${a({color:e,fontSize:i,textAlign:o,fontWeight:n,fontStyle:s,backgroundColor:d,borderColor:l,borderWidth:h,borderStyle:p,borderRadius:c,fontFamily:g,width:u,height:m})}
>
${t}
</div>
`;class u extends d{static properties={bgColor:{type:String},msgTextColor:{type:String},msgTextTimeColor:{type:String},borderWidth:{type:String},borderColor:{type:String},borderStyle:{type:String},borderRadius:{type:String},padding:{type:String},height:{type:String},width:{type:String},time:{type:String},textContent:{type:String},alignSelf:{type:String},fontFamily:{type:String}};static styles=l`
.message-container {
position: relative;
width:fit-content;
max-width:80% !important;
align-self: center;
overflow-wrap: break-word;
}
.image-container {
cursor: pointer;
}
.full-screen-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.full-screen-image {
max-width: 90%;
max-height: 90%;
object-fit: cover;
}
.close-button {
position: absolute;
top: 20px;
right: 20px;
font-size: 2rem;
color: white;
cursor: pointer;
background: transparent;
border: none;
}
`;openFullScreen(){this.isFullScreen=true}closeFullScreen(){this.isFullScreen=false}render(){return r`
<div
class="message-container"
style="padding:${this.padding||"10px"};
border-width: ${this.borderWidth};
border-color: ${this.borderColor};
border-style:${this.borderStyle};
border-radius:${this.borderRadius||"7px"};
height:${this.height};
background-color:${this.bgColor||"#EFF1FA"};
align-self: ${this.alignSelf||"left"}
font-family: ${this.fontFamily}
"
>
${g({content:this.textContent||"some incoming message some somesomesomesome",textAlign:"left",fontFamily:this.fontFamily,color:this.msgTextColor})}
<timestamp-element .time="${this.time||(new Date).toISOString()}" .color="${this.msgTextTimeColor}"></timestamp-element>
</div>
`}}customElements.define("incoming-text-message-bubble",u);class m extends d{static properties={bgColor:{type:String},msgTextColor:{type:String},msgTextTimeColor:{type:String},borderWidth:{type:String},borderColor:{type:String},borderStyle:{type:String},borderRadius:{type:String},padding:{type:String},height:{type:String},width:{type:String},time:{type:String},textContent:{type:String},alignSelf:{type:String},isRead:{type:Boolean},isPopupOpen:{type:Boolean},fontFamily:{type:String},isDelivered:{type:String}};constructor(){super();this.isPopupOpen=false}static styles=l`
.message-container {
position: relative;
width: fit-content;
max-width: 80% !important;
align-self: center;
overflow-wrap: break-word;
}
.message-footer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
gap: 2px;
}
.actions {
position: absolute;
left: -15px;
cursor: pointer;
top: 5px;
}
.popup {
position: absolute;
top: 0px;
left: -100px;
background-color: white;
border: 1px solid #eef1fa;
border-radius: 5px;
padding: 10px;
box-shadow: 0 2px 10px #eef1fa;
z-index: 10;
display: flex;
flex-items: column;
align-items: center;
justify-content: center;
}
.popup div {
cursor: pointer;
}
`;openPopup(){this.isPopupOpen=!this.isPopupOpen}openFullScreen(){this.isFullScreen=true}closeFullScreen(){this.isFullScreen=false}render(){return r`
<div
class="message-container"
style="padding:${this.padding||"10px"};
border-width: ${this.borderWidth};
border-color: ${this.borderColor}
border-style:${this.borderStyle||"solid"};
border-radius:${this.borderRadius||"10px"};
height:${this.height};
background-color:${this.bgColor||"#FFF"};
align-self: ${this.alignSelf||"right"}
font-family: ${this.fontFamily}
"
>
${g({content:this.textContent||"some outgoing message sssj sj sj ssj ssj some some smosk ajabfa bfa bfhjab ome somesomesomesome",textAlign:"left",fontFamily:this.fontFamily,color:this.msgTextColor})}
<div class="message-footer">
<div><timestamp-element .time="${this.time||(new Date).toISOString()}" .color="${this.msgTextTimeColor}"></timestamp-element></div>
${this.isRead==true?r`<blue-read-mark></blue-read-mark>`:this.isDelivered=="true"?r`<double-mark></double-mark>`:this.isDelivered=="pending"?r`<clock-mark></clock-mark>`:r`<single-mark></single-mark>`}
</div>
</div>
`}}customElements.define("outgoing-text-message-bubble",m);const x=t=>{if(!t){return""}const e=new Date(t);const i=new Date;i.setHours(0,0,0,0);const o=new Date(i);o.setDate(i.getDate()-1);const n=e.getDate();const s=e.toLocaleString(undefined,{month:"long"});const r=t=>{if(t>3&&t<21)return"th";switch(t%10){case 1:return"st";case 2:return"nd";case 3:return"rd";default:return"th"}};const a=`${n}${r(n)} ${s}`;if(e>=i){return"Today"}else if(e>=o&&e<i){return"Yesterday"}else{return a}};class v extends d{static properties={bgColor:{type:String},textColor:{type:String},width:{type:String},padding:{type:String},borderRadius:{type:String},borderWidth:{type:String},borderColor:{type:String},fontSize:{type:String},fontWeight:{type:String},fontFamily:{type:String},content:{type:String}};render(){return r`
<div
style="background-color: ${this.bgColor||"#F9E3FF"}; width: ${this.width};
border-radius: ${this.borderRadius}; border-width: ${this.borderWidth}; border-color: ${this.borderColor};
padding: ${this.padding}; color: ${this.textColor}; font-family: ${this.fontFamily};
font-size: ${this.fontSize}; font-weight: ${this.fontWeight};
"
>
${this.content}
</div>
`}}customElements.define("message-date-pill",v);class f extends d{static properties={height:{type:String},width:{type:String},spinTime:{type:String},spinnerPrimaryColor:{type:String},spinnerSecondaryColor:{type:String},spinnerBorderWidth:{type:String}};static styles=l`
.spinner {
border-radius: 50%;
z-index: 10;
}
.main-container {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
`;render(){return r`
<div class="main-container">
<div
class="spinner"
style="
border-color: ${this.spinnerSecondaryColor};
border-width: ${this.spinnerBorderWidth};
border-style: solid;
border-top-color: ${this.spinnerPrimaryColor};
height: ${this.height};
width: ${this.width};
animation: spin ${this.spinTime} linear infinite;
"
></div>
</div>
`}}customElements.define("spinner-loader",f);const y=class{constructor(e){t(this,e);this.openPopup=(t,e)=>{t.stopPropagation();this.isPopupOpen=this.isPopupOpen===e?null:e};this.handleScroll=()=>{const t=this.chatBodyElement.shadowRoot.querySelector(".chat-body");if(t){const e=t.scrollTop;if(e===0&&!this.isMessageLimitEnd){this.updateSkip()}this.onScrollEnd()}};this.onScrollEnd=()=>{const t=this.chatBodyElement.shadowRoot.querySelector(".chat-body");const e=t.scrollTop;this.previousTotalScrollHeight=t.scrollHeight-e};this.scrollToBottom=()=>{const t=this.chatBodyElement.shadowRoot.querySelector(".chat-body");const e=t.scrollTop;if(t){setTimeout((()=>{t.scrollTop=t.scrollHeight;this.previousTotalScrollHeight=t.scrollHeight-e}),200)}};this.scrollToTop=()=>{const t=this.chatBodyElement.shadowRoot.querySelector(".chat-body");if(t){setTimeout((()=>{const e=t.scrollHeight-this.previousTotalScrollHeight;t.scrollTop=e;this.previousTotalScrollHeight=t.scrollHeight}),0)}};this.putReadAll=async()=>{var t;const e=this.allMessages.some((t=>{var e,i;return((t===null||t===void 0?void 0:t.senderId)||((e=t===null||t===void 0?void 0:t.senderInfo)===null||e===void 0?void 0:e.userId))!=((i=this.userMetaData)===null||i===void 0?void 0:i.userId)&&!t.readByAll}));if(e){await h.getInstance().message.putRead({conversationId:this.conversationId});const e=(t=this.allMessages)===null||t===void 0?void 0:t.map((t=>{var e,i;return(t===null||t===void 0?void 0:t.readByAll)!=true&&((t===null||t===void 0?void 0:t.senderId)||((e=t===null||t===void 0?void 0:t.senderInfo)===null||e===void 0?void 0:e.userId))!=((i=this.userMetaData)===null||i===void 0?void 0:i.userId)?Object.assign(Object.assign({},t),{readByAll:true}):t}));this.updateAllMessages(e)}};this.handleVisibilityChange=async()=>{if(document.visibilityState==="visible"){this.isTabActive=true;this.putReadAll()}else{this.isTabActive=false}};this.handleDocumentClick=t=>{const e=t.target;if(!e.closest(".popup")&&!e.closest(".kebab-menu")){this.isPopupOpen=null}};this.isSelf=false;this.conversationId=undefined;this.skip=undefined;this.isDark=undefined;this.allMessages=undefined;this.userMetaData=undefined;this.isMessagesLoading=undefined;this.isMessageSending=undefined;this.isMessageLimitEnd=undefined;this.updateSkip=undefined;this.isScrollToBottom=undefined;this.isScrollToTop=undefined;this.deleteForAll=undefined;this.deleteForSelf=undefined;this.changeScrollToBottomState=undefined;this.changeScrollToTopState=undefined;this.updateAllMessages=undefined;this.isChatClosed=undefined;this.isChatMinimized=undefined;this.previousTotalScrollHeight=0;this.deviceId="";this.scrollTimeout=null;this.isPopupOpen=null;this.deletedMessages=new Set;this.isTabActive=true}deleteMessageForSelf(t){this.deleteForSelf({conversationId:this.conversationId,messageIds:t});this.isPopupOpen=null}deleteMessageForEveryone(t){this.deleteForAll({conversationId:this.conversationId,messageIds:t});this.isPopupOpen=null}async componentWillLoad(){const t=await p();this.deviceId=t}async componentDidLoad(){document.addEventListener("visibilitychange",this.handleVisibilityChange);document.addEventListener("click",this.handleDocumentClick);const t=this.chatBodyElement.shadowRoot.querySelector(".chat-body");if(t){t.addEventListener("scroll",this.handleScroll)}this.scrollToBottom();this.putReadAll()}async handleDataChange(){var t,e;if(this.isScrollToBottom&&this.allMessages.length>0&&((t=this.userMetaData)===null||t===void 0?void 0:t.userId)){this.scrollToBottom();this.changeScrollToBottomState(false)}else if(this.allMessages.length>0&&((e=this.userMetaData)===null||e===void 0?void 0:e.userId)&&!this.isScrollToBottom&&this.isScrollToTop){this.scrollToTop();this.changeScrollToTopState(false)}if(!this.isChatMinimized&&!this.isChatClosed&&this.isTabActive){this.putReadAll()}}disconnectedCallback(){document.removeEventListener("visibilitychange",this.handleVisibilityChange);document.removeEventListener("click",this.handleDocumentClick);const t=this.chatBodyElement.shadowRoot.querySelector(".chat-body");if(t){t.removeEventListener("scroll",this.handleScroll)}}render(){var t;const n=e("https://isometrik-website-bucket.s3.ap-south-1.amazonaws.com/chat_BG_8a53348931.png");return i(o,{key:"3986d01d3b846ad517b2c61f6fe716bf7503b394"},i("div",{key:"05072e8c6db5067a8176f1aaaed88fe4239326f7",id:"lol",class:"chat-body chat-body-bg",style:{backgroundColor:"var(--chat-body-bg)",backgroundImage:`url(${n})`,display:"flex",flexGrow:"1",flexDirection:"column",gap:"20px",padding:"10px 15px 35px 10px",overflowY:"scroll"}},this.isMessagesLoading&&i("spinner-loader",{key:"95f62ae1152616164dba87849942e87d4c16cc0a",height:"20px",width:"20px",spinTime:"1s",spinnerPrimaryColor:"#000",spinnerSecondaryColor:"#F9E3FF",spinnerBorderWidth:"3px"}),this.allMessages.length>0&&((t=this.userMetaData)===null||t===void 0?void 0:t.userId)&&this.allMessages.map(((t,e)=>{var o,n,s;const r=x(this.allMessages[e].sentAt);const a=x(((o=this.allMessages[e-1])===null||o===void 0?void 0:o.sentAt)||"");const d=r!==a;if(t.attachments){return i("div",{style:{display:"flex",width:"100%",flexDirection:"column",gap:"15px"}},d&&i("div",{style:{display:"flex",width:"100%",justifyContent:"center"}},i("message-date-pill",{borderRadius:"9px",textColor:"var(--chat-date-pill-text)",bgColor:"var(--chat-date-pill-bg)",padding:"5px 20px",content:r})),t.attachments.map((e=>{var o,n;if(((t===null||t===void 0?void 0:t.senderId)||((o=t===null||t===void 0?void 0:t.senderInfo)===null||o===void 0?void 0:o.userId))==((n=this.userMetaData)===null||n===void 0?void 0:n.userId)){return i("div",{id:"outgoing-message",style:{position:"relative",display:"flex",width:"100%",justifyContent:"right"}},e.mimeType.startsWith("application/")?i("document-message",{docType:e.mimeType,fileName:e.name,href:e.mediaUrl,bgColor:"var(--chat-outgoing-msg-bg)",width:"220px",padding:"10px 10px 30px 10px",borderRadius:"6px",time:t===null||t===void 0?void 0:t.sentAt,docName:e.name,isRead:t.readByAll,isSelf:true,isDelivered:`${t===null||t===void 0?void 0:t.deliveredToAll}`}):e.mimeType.startsWith("video/")?i("video-message",{height:"180px",width:"200px",padding:"10px 10px 20px 10px",bgColor:"var(--chat-outgoing-msg-bg)",isSelf:true,borderRadius:"6px",time:t===null||t===void 0?void 0:t.sentAt,type:e.mimeType,videoSrc:e.mediaUrl,isRead:t.readByAll,isDelivered:`${t===null||t===void 0?void 0:t.deliveredToAll}`}):e.mimeType.startsWith("image/")?i("image-message",{bgColor:"var(--chat-outgoing-msg-bg)",padding:"10px 10px 20px 10px",isSelf:true,borderRadius:"6px",time:t===null||t===void 0?void 0:t.sentAt,imageSrc:e.mediaUrl,height:"150px",width:"150px",isRead:t.readByAll,borderWidth:"5px",borderColor:"var(--chat-outgoing-msg-bg)",borderStyle:"solid",isDelivered:`${t===null||t===void 0?void 0:t.deliveredToAll}`}):"",i("span",{class:"kebab-menu",style:{cursor:"pointer",position:"absolute",right:"-12px ",top:"5px"},onClick:e=>this.openPopup(e,t===null||t===void 0?void 0:t.messageId)},i("svg",{width:"14px",height:"14px",viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",fill:"var(--chat-msg-info-icon)",class:"bi bi-three-dots-vertical"},i("g",{id:"SVGRepo_bgCarrier","stroke-width":"0"}),i("g",{id:"SVGRepo_tracerCarrier","stroke-linecap":"round","stroke-linejoin":"round"}),i("g",{id:"SVGRepo_iconCarrier"},i("path",{d:"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"})))),this.isPopupOpen===(t===null||t===void 0?void 0:t.messageId)?i("div",{class:"popup"},i("span",{class:"deleteText",onClick:()=>this.deleteMessageForSelf(t===null||t===void 0?void 0:t.messageId)},"Delete For Me"),i("span",{class:"deleteText",onClick:()=>this.deleteMessageForEveryone(t===null||t===void 0?void 0:t.messageId)},"Delete For All")):null)}else{return i("div",{style:{display:"flex",width:"100%",justifyContent:"left"}},e.mimeType.startsWith("application/")?i("document-message",{docType:e.mimeType,fileName:e.name,href:e.mediaUrl,bgColor:"var(--chat-incoming-msg-bg)",width:"220px",padding:"10px 10px 30px 10px",borderRadius:"6px",time:t===null||t===void 0?void 0:t.sentAt,docName:e.name,isSelf:false}):e.mimeType.startsWith("video/")?i("video-message",{height:"180px",width:"200px",bgColor:"var(--chat-incoming-msg-bg)",padding:"10px 10px 20px 10px",borderRadius:"6px",isSelf:false,time:t===null||t===void 0?void 0:t.sentAt,type:e.mimeType,videoSrc:e.mediaUrl}):e.mimeType.startsWith("image/")?i("image-message",{bgColor:"var(--chat-incoming-msg-bg)",padding:"10px 10px 20px 10px",borderRadius:"6px",isSelf:false,time:t===null||t===void 0?void 0:t.sentAt,imageSrc:e.mediaUrl,height:"150px",width:"150px",borderWidth:"5px",borderColor:"var(--chat-incoming-msg-bg)",borderStyle:"solid"}):"")}})))}else if(t.body){if(((t===null||t===void 0?void 0:t.senderId)||((n=t===null||t===void 0?void 0:t.senderInfo)===null||n===void 0?void 0:n.userId))==((s=this.userMetaData)===null||s===void 0?void 0:s.userId)){return i("div",{style:{display:"flex",width:"100%",flexDirection:"column",gap:"15px"}},d&&i("div",{style:{display:"flex",width:"100%",justifyContent:"center"}},i("message-date-pill",{borderRadius:"9px",textColor:"var(--chat-date-pill-text)",bgColor:"var(--chat-date-pill-bg)",padding:"5px 20px",content:r})),i("div",{id:"outgoing-message",style:{position:"relative",display:"flex",width:"100%",justifyContent:"end"}},i("outgoing-text-message-bubble",{msgTextColor:"var(--chat-outgoing-msg-text)",msgTextTimeColor:"var(--chat-outgoing-msg-time-text)",isRead:t.readByAll,padding:"10px 10px 1px 10px",borderRadius:"10px 10px 0 10px",textContent:t===null||t===void 0?void 0:t.body,time:t===null||t===void 0?void 0:t.sentAt,bgColor:"var(--chat-outgoing-msg-bg)",isDelivered:`${t===null||t===void 0?void 0:t.deliveredToAll}`}),i("span",{class:"kebab-menu",style:{cursor:"pointer",position:"absolute",right:"-12px ",top:"5px"},onClick:e=>this.openPopup(e,t===null||t===void 0?void 0:t.messageId)},i("svg",{width:"14px",height:"14px",viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",fill:"var(--chat-msg-info-icon, #000)",class:"bi bi-three-dots-vertical"},i("g",{id:"SVGRepo_bgCarrier","stroke-width":"0"}),i("g",{id:"SVGRepo_tracerCarrier","stroke-linecap":"round","stroke-linejoin":"round"}),i("g",{id:"SVGRepo_iconCarrier"},i("path",{d:"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"})))),this.isPopupOpen===(t===null||t===void 0?void 0:t.messageId)?i("div",{class:"popup"},i("span",{class:"deleteText",onClick:()=>this.deleteMessageForSelf(t===null||t===void 0?void 0:t.messageId)},"Delete For Me"),i("span",{class:"deleteText",onClick:()=>this.deleteMessageForEveryone(t===null||t===void 0?void 0:t.messageId)},"Delete For All")):null))}else{return i("div",{style:{display:"flex",width:"100%",flexDirection:"column",gap:"15px"}},d&&i("div",{style:{display:"flex",width:"100%",justifyContent:"center"}},i("message-date-pill",{borderRadius:"9px",textColor:"var(--chat-date-pill-text)",bgColor:"var(--chat-date-pill-bg)",padding:"5px 20px",content:r})),i("incoming-text-message-bubble",{bgColor:"var(--chat-incoming-msg-bg)",msgTextTimeColor:"var(--chat-incoming-msg-time-text)",msgTextColor:"var(--chat-incoming-msg-text)",borderRadius:"10px 10px 10px 0",time:t===null||t===void 0?void 0:t.sentAt,textContent:t===null||t===void 0?void 0:t.body}))}}else if(t.action=="conversationCreated"){return i("div",{style:{display:"flex",width:"100%",justifyContent:"center"}},d&&i("message-date-pill",{borderRadius:"9px",textColor:"var(--chat-date-pill-text)",bgColor:"var(--chat-date-pill-bg)",padding:"5px 20px",content:r}))}}))))}get chatBodyElement(){return n(this)}static get watchers(){return{allMessages:["handleDataChange"],userMetaData:["handleDataChange"]}}};y.style=":host {\n flex-grow: 1;\n overflow: hidden;\n display: flex;\n background-color: var(--chat-body-bg);\n}\n \n\n #outgoing-message > * {\n display: flex;\n width: 100%;\n justify-content: end;\n }\n\n ::-webkit-scrollbar {\n width: 5px;\n }\n\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n ::-webkit-scrollbar-thumb {\n background-color: #F9E3FF !important;\n border-radius: 10px;\n }\n .popup {\n position: absolute;\n bottom: 100%;\n box-shadow: 0px 0px 10px 0px GRAY;\n z-index: 10;\n display: flex !important;\n flex-direction: column !important;\n align-items: center !important;\n justify-content: center !important;\n width: 30% !important;\n gap: 16px !important;\n background-color: #FFFFFF;\n font-family: 'Roboto';\n padding: 10px;\n font-weight:500;\n border-radius: 8px;\n }\n\n .popup span {\n cursor: pointer;\n }\n #outgoing-message .kebab-menu {\n opacity: 0;\n transition: opacity 0.2s ease;\n }\n\n #outgoing-message:hover .kebab-menu {\n opacity: 1;\n }\n\n .deleteText {\n font-size: 14px;\n font-weight: 700;\n }";class b extends d{static properties={value:{type:String},placeholder:{type:String},width:{type:String},height:{type:String},borderColor:{type:String},borderRadius:{type:String},backgroundColor:{type:String},fontSize:{type:String},padding:{type:String},color:{type:String},placeholderColor:{type:String},borderWidth:{type:String},inputHeight:{type:String},minHeight:{type:String},maxHeight:{type:String}};static styles=l`
:host {
display: block;
}
textarea {
width: var(--input-width, 100%);
max-height: var(--input-max-height, 100px);
min-height: var(--input-min-height, 45px);
height: var(--input-height, 45px);
border: var(--input-border-width, 1px) solid var(--input-border-color, gray);
border-radius: var(--input-border-radius, 4px);
background-color: var(--input-background-color, white);
font-size: var(--input-font-size, 16px);
padding: var(--input-padding, 12px);
color: var(--input-color);
box-sizing: border-box;
resize: none;
overflow-y: auto;
outline: none;
border-width: none;
font-family: 'Roboto';
transition: height 0.2s ease;
}
textarea::-webkit-scrollbar {
width: 5px;
}
textarea::-webkit-scrollbar-track {
background: #eff1fa;
}
textarea::-webkit-scrollbar-thumb {
background-color: gray;
border-radius: 10px;
}
textarea::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
textarea::placeholder {
color: var(--input-placeholder-color, #aaa);
font-family: sans-serif;
}
textarea:focus {
border-color: transparent;
outline: none;
}
`;constructor(){super();this.value="";this.placeholder="Enter your text here...";this.width="100%";this.minHeight="45px";this.maxHeight="105px";this.inputHeight="45px";this.borderColor="gray";this.borderRadius="4px";this.backgroundColor="white";this.fontSize="16px";this.padding="12px";this.placeholderColor="#aaa";this.borderWidth="1px"}render(){return r`
<textarea
.value=${this.value}
placeholder=${this.placeholder}
style=${a({"--input-width":this.width,"--input-min-height":this.minHeight,"--input-max-height":this.maxHeight,"--input-height":this.inputHeight,"--input-border-color":this.borderColor,"--input-border-radius":this.borderRadius,"--input-background-color":this.backgroundColor,"--input-font-size":this.fontSize,"--input-padding":this.padding,"--input-color":this.color||"#202020","--input-placeholder-color":this.placeholderColor,"--input-border-width":this.borderWidth})}
@input=${this.handleInputChange}
></textarea>
`}handleInputChange(t){this.value=t.target.value;this.adjustTextareaHeight(t.target);this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:true,composed:true}))}adjustTextareaHeight(t){if(t.value.length===0){this.inputHeight="45px"}else{t.style.height="45px";const e=t.scrollHeight;if(e<=45){this.inputHeight="45px"}else if(e>45&&e<=105){this.inputHeight=`${e}px`}else{this.inputHeight="105px"}}t.style.height=this.inputHeight}resetHeight(){const t=this.shadowRoot.querySelector("textarea");if(t){this.inputHeight="45px";t.style.height=this.inputHeight}}}customElements.define("my-input",b);class w extends d{static properties={bgColor:{type:String},textColor:{type:String},documentIcon:{type:String},mediaIcon:{type:String},documentIconHeight:{type:String},documentIconWidth:{type:String},mediaIconHeight:{type:String},mediaIconWidth:{type:String},containerBorderWidth:{type:String},containerBorderColor:{type:String},containerBorderStyle:{type:String},width:{type:String},flexDirection:{type:String},padding:{type:String},iconGap:{type:String},containerBorderRadius:{type:String},onFileUploaded:{type:String}};static styles=l`
.attachment-box-container {
display: flex;
gap: 2px;
color: white;
align-items: center;
}
.document-container,
.media-container {
cursor: pointer !important;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
input[type="file"] {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: pointer;
}
`;handleFileChange(t,e){const i=t.target.files[0];if(i){console.log(`${e} uploaded:`,i);this.dispatchEvent(new CustomEvent("file-uploaded",{detail:{fileType:e,file:i},bubbles:true,composed:true}))}}render(){return r`
<div class='attachment-box-container' style='background-color: ${this.bgColor};
border-width: ${this.containerBorderWidth};
border-color: ${this.containerBorderColor};
border-style: ${this.containerBorderStyle};
border-radius: ${this.containerBorderRadius||"10px"};
width: ${this.width};
flex-direction: ${this.flexDirection};
padding: ${this.padding};
gap: ${this.iconGap};
'>
<div class='document-container'>
${this.documentIcon?c({src:this.documentIcon,alt:"document icon",width:this.documentIconWidth,height:this.documentIconHeight}):""}
<input
id="documentUpload"
type="file"
accept="application/"
@change="${t=>this.handleFileChange(t,"Document")}"
/>
</div>
<div class='media-container'>
${this.mediaIcon?c({src:this.mediaIcon,alt:"media icon",width:this.mediaIconWidth,height:this.mediaIconHeight}):""}
<!-- Hidden file input for media -->
<input
id="mediaUpload"
type="file"
accept="image/*,video/*"
@change="${t=>this.handleFileChange(t,"Media")}"
/>
</div>
</div>
`}}customElements.define("attachment-box",w);class S extends d{constructor(){super();this.isAttachmentMenuVisible=false,this.inputBorderColor="transparent",this.inputBorderWidth="1px";this.inputBorderStyle="dashed",this.inputPlaceholder="Type in your message here",this.sendButtonIcon="https://flexcrew.s3.us-west-1.amazonaws.com/Group_1171280804_28e21ab22f.svg",this.attachmentIcon="https://flexcrew.s3.us-west-1.amazonaws.com/gallery_add_4272954ac0.svg",this.attachmentIconHeight="34px",this.attachmentIconWidth="34px",this.sendButtonIconHeight="50px",this.sendButtonIconWidth="50px",this.sendButtonIconRadius="50%",this.inputFontSize="16px",this.containerPadding="10px",this.inputBorderRadius="20px",this.inputContainerBorderWidth="1px",this.inputContainerBorderRadius="10px",this.inputContainerBorderStyle="solid",this.inputPlaceholderColor="#D4D8EB",this.inputContainerPadding="0 10px",this.onSendClick=null}static properties={bgColor:{type:String},inputBorderColor:{type:String},inputBorderWidth:{type:String},inputBorderStyle:{type:String},inputPlaceholder:{type:String},inputBgColor:{type:String},inputFontSize:{type:String},inputFontColor:{type:String},inputBorderRadius:{type:String},attachmentIcon:{type:String},attachmentIconColor:{type:String},sendButtonIcon:{type:String},sendButtonIconHeight:{type:String},sendButtonIconWidth:{type:String},attachmentIconHeight:{type:String},attachmentIconWidth:{type:String},sendButtonIconRadius:{type:String},containerPadding:{type:String},containerBoxShadow:{type:String},inputContainerBorderColor:{type:String},inputContainerBorderWidth:{type:String},inputContainerBorderRadius:{type:String},inputPlaceholderColor:{type:String},inputContainerPadding:{type:String},isAttachmentMenuVisible:{type:Boolean},onSendClick:{type:Function},inputValue:{type:String},onMediaIconClick:{type:Function},onDocumentClick:{type:Function},onFileUploaded:{type:Function}};static styles=l`
.footer-container {
display: flex;
align-items: end;
gap: 10px;
position: relative;
box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
}
.input-container {
flex: 1;
display: flex;
align-items: end;
}
.attachment-container {
width: fit-content;
margin-right: 10px;
cursor: pointer;
}
.input-box-container {
width: 100%;
}
.send-container {
width: fit-content;
}
.focused-input {
border: none !important;
outline: none !important;
}
.attachment-menu {
position: absolute;
background-color: white;
border: 1px solid #d4d8eb;
bottom: 65px;
left: 12px;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
gap: 10px;
border-radius: 10px;
}
`;toggleAttachmentMenu(){this.isAttachmentMenuVisible=!this.isAttachmentMenuVisible}handleInputChange(t){this.inputValue=t.target.value;this.dispatchEvent(new CustomEvent("input-change",{detail:{value:this.inputValue},bubbles:true,composed:true}))}handleMediaIconClick(){console.log("inputclicked")}resetInputHeight(){const t=this.shadowRoot.querySelector("my-input");if(t){t.resetHeight()}}fileUploadHandler(t){this.onFileUploaded(t);this.isAttachmentMenuVisible=!this.isAttachmentMenuVisible}render(){return r`
<div class='footer-container'
style='padding: ${this.containerPadding};
box-shadow: ${this.containerBoxShadow};
background-color:${this.bgColor||"#000"}'
>
<div class='input-container'
style='border-color: ${this.inputContainerBorderColor||"D4D8EB"};
border-width: ${this.inputContainerBorderWidth};
border-radius: ${this.inputContainerBorderRadius};
border-style: solid;
padding: ${this.inputContainerPadding}'
background-color: ${this.inputBgColor||"#ffffff"}
>
<div class='attachment-container' @click="${this.toggleAttachmentMenu}">
<svg width="36px" height="36px" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M13 4H8.8C7.11984 4 6.27976 4 5.63803 4.32698C5.07354 4.6146 4.6146 5.07354 4.32698 5.63803C4 6.27976 4 7.11984 4 8.8V15.2C4 16.8802 4 17.7202 4.32698 18.362C4.6146 18.9265 5.07354 19.3854 5.63803 19.673C6.27976 20 7.11984 20 8.8 20H15.2C16.8802 20 17.7202 20 18.362 19.673C18.9265 19.3854 19.3854 18.9265 19.673 18.362C20 17.7202 20 16.8802 20 15.2V11" stroke=${this.attachmentIconColor||"#000"} stroke-width="1.536" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M4 16L8.29289 11.7071C8.68342 11.3166 9.31658 11.3166 9.70711 11.7071L13 15M13 15L15.7929 12.2071C16.1834 11.8166 16.8166 11.8166 17.2071 12.2071L20 15M13 15L15.25 17.25" stroke=${this.attachmentIconColor||"#000"} stroke-width="1.536" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M18.5 3V5.5M18.5 8V5.5M18.5 5.5H16M18.5 5.5H21" stroke=${this.attachmentIconColor||"#000"} stroke-width="1.536" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
</div>
${this.isAttachmentMenuVisible?r`
<div class="attachment-menu">
<attachment-box
.documentIcon=${"https://flexcrew.s3.us-west-1.amazonaws.com/document_text_svgrepo_com_1_2583e4b5fc.svg"}
.mediaIcon=${"https://flexcrew.s3.us-west-1.amazonaws.com/image_svgrepo_com_2f478c0a9b.svg"}
.mediaIconHeight=${"25px"}
.mediaIconWidth=${"25px"}
.documentIconHeight=${"25px"}
.documentIconWidth=${"25px"}
.flexDirection=${"column"}
.bgColor=${"white"}
.onMediaIconClick="${this.mediaIconHandler}"
.onDocumentIconClick="${this.onDocumentClick}"
.onFileUploaded="${this.onFileUploaded}"
@file-uploaded="${t=>this.fileUploadHandler(t)}"
>
</attachment-box>
</div>
`:""}
<div class='input-box-container som'>
<my-input
.value="${this.inputValue}"
.borderColor="${this.inputBorderColor||"gray"}"
.borderWidth="${this.inputBorderWidth||"1px"}"
.borderRadius="${this.inputBorderRadius} || "10px"
.backgroundColor=${this.inputBgColor||"#ffffff"}
.fontSize="${this.inputFontSize||"14px"}"
.padding="10px"
.placeholder="${this.inputPlaceholder||"Type your message"}"
.color=${this.inputFontColor}
.placeholderColor=${this.inputPlaceholderColor||"#000"}
@input="${this.handleInputChange}"
></my-input>
</div>
</div>
<div class='send-container' >
${this.sendButtonIcon?s({backgroundImage:this.sendButtonIcon,width:this.sendButtonIconWidth,height:this.sendButtonIconHeight,borderWidth:"0px",borderColor:"transparent",borderRadius:this.sendButtonIconRadius,onClick:()=>{this.onSendClick();this.resetInputHeight()}}):""}
</div>
</div>
`}}customElements.define("my-test-footer",S);class C extends d{static properties={bgColor:{type:String},textColor:{type:String},width:{type:String},padding:{type:String},borderRadius:{type:String},borderWidth:{type:String},borderColor:{type:String},onClose:{type:Function},fontSize:{type:String},fontWeight:{type:String},fontFamily:{type:String},content:{type:String},height:{type:String},contentType:{type:String}};static styles=l`
.close-button {
cursor: pointer;
background: none;
border: none;
font-size: 20px;
position: absolute;
right: -5px;
top: -5px;
padding: 0px;
border-radius: 50%;
height: 14px;
width: 14px;
aspect-ratio: 1:1
}
.attachment-preview-container {
display: flex;
align-items: center;
position: absolute;
bottom:70px;
margin-left: 10px;
}
.document-preview {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.document-name {
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
`;render(){return r`
<div
class="attachment-preview-container"
style="background-color: ${this.bgColor}; width: ${this.width};
border-radius: ${this.borderRadius}; border-width: ${this.borderWidth}; border-color: ${this.borderColor};
padding: ${this.padding}; height: ${this.height};"
>
<div class="attachment-details" style="height: ${this.height}; width: ${this.width}">
${this.contentType==="image"?c({src:this.content,alt:"attachment-preview",height:"100%",width:"100%",objectFit:"cover"}):this.contentType==="video"?r`<video src="${this.content}" controls width="100%" height="100%" style="object-fit: cover;"></video>`:r`
<div class="document-preview">
<span class="document-icon">
<svg
width="64px"
height="64px"
viewBox="0 0 1024 1024"
class="icon"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
fill="#000000"
data-darkreader-inline-fill=""
style="--darkreader-inline-fill: #000000;"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path
d="M719.8 651.8m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z"
fill="#EFF1FA"
style="--darkreader-inline-fill: #cddcef;"
data-darkreader-inline-fill=""
></path>
<path
d="M512.1 64H172v896h680V385.6L512.1 64z m278.8 324.3h-280v-265l280 265zM808 916H216V108h278.6l0.2 0.2v296.2h312.9l0.2 0.2V916z"
fill="#EFF1FA39393A"
style="--darkreader-inline-fill: rgba(166, 13, 13, 0.23);"
></path>
<path d="M280.5 530h325.9v16H280.5z" fill="#EFF1FA39393A" style="--darkreader-inline-fill: rgba(166, 13, 13, 0.23);"></path>
<path d="M639.5 530h90.2v16h-90.2z" fill="#EFF1FA" style="--darkreader-inline-fill: #cddcef;" data-darkreader-inline-fill=""></path>
<path d="M403.5 641.8h277v16h-277z" fill="#EFF1FA39393A" style="--darkreader-inline-fill: rgba(166, 13, 13, 0.23);"></path>
<path d="M280.6 641.8h91.2v16h-91.2z" fill="#EFF1FA" style="--darkreader-inline-fill: #cddcef;" data-darkreader-inline-fill=""></path>
<path d="M279.9 753.7h326.5v16H279.9z" fill="#EFF1FA39393A" style="--darkreader-inline-fill: rgba(166, 13, 13, 0.23);"></path>
<path d="M655.8 753.7h73.9v16h-73.9z" fill="#EFF1FA" style="--darkreader-inline-fill: #cddcef;" data-darkreader-inline-fill=""></path>
</g>
</svg>
</span>
<span class="document-name">${this.content}</span>
</div>
`}
</div>
<button class="close-button" @click="${this.onClose}">
<svg width="20px" height="20px" viewBox="0 0 32.00 32.00" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#ffffff" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(7.52,7.52), scale(0.53)"><rect x="0" y="0" width="32.00" height="32.00" rx="16" fill="#000" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="1.6"></g><g id="SVGRepo_iconCarrier"> <title>cross-circle</title> <desc>Created with Sketch Beta.</desc> <defs> </defs> <g id="Page-1" stroke-width="0.00032" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-570.000000, -1089.000000)" fill="#EFF1FA"> <path d="M591.657,1109.24 C592.048,1109.63 592.048,1110.27 591.657,1110.66 C591.267,1111.05 590.633,1111.05 590.242,1110.66 L586.006,1106.42 L581.74,1110.69 C581.346,1111.08 580.708,1111.08 580.314,1110.69 C579.921,1110.29 579.921,1109.65 580.314,1109.26 L584.58,1104.99 L580.344,1100.76 C579.953,1100.37 579.953,1099.73 580.344,1099.34 C580.733,1098.95 581.367,1098.95 581.758,1099.34 L585.994,1103.58 L590.292,1099.28 C590.686,1098.89 591.323,1098.89 591.717,1099.28 C592.11,1099.68 592.11,1100.31 591.717,1100.71 L587.42,1105.01 L591.657,1109.24 L591.657,1109.24 Z M586,1089 C577.163,1089 570,1096.16 570,1105 C570,1113.84 577.163,1121 586,1121 C594.837,1121 602,1113.84 602,1105 C602,1096.16 594.837,1089 586,1089 L586,1089 Z" id="cross-circle" sketch:type="MSShapeGroup"> </path> </g> </g> </g></svg> </div>
`}}customElements.define("attachment-preview",C);const k=class{constructor(e){t(this,e);this.handleInputChange=t=>{this.messageBody=t.detail.value;this.debounceApiCall()};this.debounceApiCall=()=>{clearTimeout(this.debounceTimeout);this.debounceTimeout=setTimeout((()=>{this.postTyping()}),300)};this.postTyping=async()=>{await h.getInstance().message.postIndicateTyping({conversationId:this.conversationId})};this.handleFileUpload=t=>{const{file:e}=t.detail;this.attachmentDetails=e;if(e){const t=new FileReader;t.onload=t=>{var i,o,n;const s=e.type.split("/")[0];if(s==="image"){this.imagePreviewSrc=(i=t.target)===null||i===void 0?void 0:i.result}else if(s==="video"){this.videoPreviewSrc=(o=t.target)===null||o===void 0?void 0:o.result}else if(s.startsWith("application")){this.pdfPreviewSrc=(n=t.target)===null||n===void 0?void 0:n.result}};t.readAsDataURL(e)}};this.handleSendMessage=async()=>{var t,e,i,o,n,s;if(!this.messageBody.trim()&&!this.attachmentDetails){const t=this.messageBody.replace(/\n/g," ");this.messageBody=t;return}this.changeScrollToBottomState(true);const r=this.conversationId;const a=this.messageBody.trim();this.messageBody="";if(a){this.updateAllMessages([...this.allMessages,{body:a,messageId:"12",deliveredToAll:"pending",senderId:this.userMetaData.userId,sentAt:Date.now()}]);this.changeMessageSendingState(true);try{const t=await h.getInstance().message.postMessages({showInConversation:true,messageType:0,searchableTags:[a.slice(2).trim(),a.slice(3).trim()],encrypted:false,conversationId:r,deviceId:this.deviceId,body:a});const e=[...this.allMessages];const i=e.findIndex((t=>t.messageId=="12"));const o=e[i];const n=Object.assign(Object.assign({},o),{messageId:t.messageId,deliveredToAll:false});e.splice(i,1,n);this.updateAllMessages(e)}catch(t){console.log(t,"postMessages error for text")}finally{this.changeMessageSendingState(false)}this.inputKey++}else if(this.attachmentDetails){this.changeMessageSendingState(true);const a=this.attachmentDetails.lastModified+"";let d;const l=this.attachmentDetails.type;if(l.startsWith("image/")){d=0}else if(l.startsWith("video/")){d=1}else if(l.startsWith("audio/")){d=2}else{d=3}const p=[{nameWithExtension:this.attachmentDetails.name,mediaType:d,mediaId:a,mimeType:this.attachmentDetails.type,size:this.attachmentDetails.size,file:this.attachmentDetails}];this.updateAllMessages([...this.allMessages,{body:"",messageId:"12",deliveredToAll:"pending",senderId:this.userMetaData.userId,sentAt:Date.now(),attachments:[{mediaUrl:this.imagePreviewSrc||this.videoPreviewSrc||this.pdfPreviewSrc,mimeType:this.attachmentDetails.type}]}]);this.pdfPreviewSrc="";this.videoPreviewSrc="";this.imagePreviewSrc="";this.messageBody="";const c=this.attachmentDetails;this.attachmentDetails=null;try{const a=await h.getInstance().message.postMessagesPresignedurls({conversationId:r,attachments:p});if(a===null||a===void 0?void 0:a.presignedUrls){const d=(e=(t=a===null||a===void 0?void 0:a.presignedUrls)===null||t===void 0?void 0:t[0])===null||e===void 0?void 0:e.mediaId;const g=(o=(i=a===null||a===void 0?void 0:a.presignedUrls)===null||i===void 0?void 0:i[0])===null||o===void 0?void 0:o.mediaUrl;const u=(s=(n=a===null||a===void 0?void 0:a.presignedUrls)===null||n===void 0?void 0:n[0])===null||s===void 0?void 0:s.thumbnailUrl;const m=p===null||p===void 0?void 0:p[0];const x=m===null||m===void 0?void 0:m.mimeType.split("/")[1];const v={mediaId:d,mediaUrl:g,thumbnailUrl:u,attachmentType:0,mimeType:m.mimeType,name:m.nameWithExtension,extension:x,size:m.size};const f=a.presignedUrls[0].mediaPresignedUrl;try{await fetch(f,{method:"PUT",body:c,headers:{"Content-Type":l}});try{const t=await h.getInstance().message.postMessages({showInConversation:true,messageType:0,encrypted:false,conversationId:r,body:"attachment",attachments:[v],deviceId:this.deviceId});const e=[...this.allMessages];const i=e.findIndex((t=>t.messageId=="12"));const o=e[i];const n=Object.assign(Object.assign({},o),{messageId:t.messageId,deliveredToAll:false});e.splice(i,1,n);this.updateAllMessages(e)}catch(t){console.log(t,"postMessages error for media")}}catch(t){console.log(t,"error for verify media in put request")}}}catch(t){console.log(t,"Error while uploading the media for Presignedurls")}finally{this.changeMessageSendingState(false)}this.inputKey++}};this.handleEnterPress=t=>{if(t.key==="Enter"&&!t.shiftKey){t.preventDefault();this.handleSendMessage()}};this.messageBody="";this.isDark=undefined;this.conversationId=undefined;this.userMetaData=undefined;this.refetchMessages=undefined;this.changeMessageSendingState=undefined;this.changeScrollToBottomState=undefined;this.updateAllMessages=undefined;this.allMessages=undefined;this.attachmentDetails=null;this.deviceId="";this.imagePreviewSrc="";this.videoPreviewSrc="";this.pdfPreviewSrc="";this.inputKey=0}async componentWillLoad(){const t=await p();this.deviceId=t}componentDidLoad(){document.addEventListener("keydown",this.handleEnterPress)}render(){const t=this.attachmentDetails?this.attachmentDetails.type.split("/")[0]:"";const e=this.attachmentDetails?this.attachmentDetails.name:"";return i("div",{key:"6bfdccb972d103026702f670537957cdaadada93"},this.attachmentDetails&&i("attachment-preview",{key:"91e5d538b27da828702582583ce003e1299108be",onClose:()=>this.attachmentDetails=null,width:"150px",height:"150px",bgColor:"#EFF1FA",padding:"3px",margin:"10px 0 0 0",contentType:t,content:t==="image"?this.imagePreviewSrc:t==="video"?this.videoPreviewSrc:e}),i("my-test-footer",{key:this.inputKey,inputValue:this.messageBody,onFileUploaded:this.handleFileUpload,"oninput-change":this.handleInputChange,onSendClick:this.handleSendMessage,bgColor:"var(--chat-footer-bg)",inputBgColor:"var(--chat-footer-input-bg)",inputFontColor:"var(--chat-footer-input-text)",inputContainerBorderColor:"var(--chat-footer-input-border)",attachmentIconColor:"var(--chat-footer-attachment-icon)"}))}};class $ extends d{static properties={image:{type:Object},text:{type:Object},lastSeenText:{type:String},lastSeenTextColor:{type:String},lastSeenTextFontSize:{type:String},textHref:{type:String},onFirstSvgClick:{type:Function},onSecondSvgClick:{type:Function},boxShadow:{type:String},borderRadius:{type:String},borderColor:{type:String},borderStyle:{type:String},borderWidth:{type:String},padding:{type:String},profileImage:{type:String},bgColor:{type:String},textColor:{type:String},nameTextColor:{type:String},closeIconColor:{type:String},minimizeIconColor:{type:String}};constructor(){super();this.profilePlaceholderImage="https://isometrik-website-bucket.s3.ap-south-1.amazonaws.com/Frame_02577f7cb1.svg";this.image={src:"/assets/images/iso-img.svg",alt:"Nature image",width:"45px",height:"45px",borderRadius:"50%"};this.text={content:"Kristin Watson",fontSize:"18px",textAlign:"left",fontWeight:"bolder",fontStyle:"normal"}}static styles=l`
.head-container {
display: flex;
align-items: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
}
.image-container {
margin-right: 16px;
}
.text-container {
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
flex-direction: column;
}
.actions {
display: flex;
gap: 8px;
margin-left: auto;
cursor: pointer;
}
.last-seen {
color: var(--last-seen-text-color, gray);
font-size: var(--last-seen-text-font-size, 14px);
margin-top: 4px;
}
`;_handleTextClick(){if(this.textHref){window.location.href=this.textHref}}_handleFirstSvgClick(){if(this.onFirstSvgClick){this.onFirstSvgClick()}}_handleSecondSvgClick(){if(this.onSecondSvgClick){this.onSecondSvgClick()}}render(){return r`
<div
class="head-container"
style="border-radius: ${this.borderRadius};
border-color: ${this.borderColor||"gray"};
border-width: ${this.borderWidth||"0px"};
border-style: ${this.borderStyle||"solid"};
padding: ${this.padding};
background-color: ${this.bgColor||"#FFF"};
color: ${this.textColor||"#FFF"};
border-bottom: 1px solid #d9c0c0;
"
>
<div class="image-container">
${c({src:this.profileImage||this.profilePlaceholderImage,height:"50px",width:"50px",placeholderImage:this.profilePlaceholderImage})}
</div>
<div class="text-container" @click=${this._handleTextClick}>
${g({fontSize:"20px",fontWeight:"bold",content:this.text||"",color:this.nameTextColor||"#000"})}
${this.lastSeenText?r` <div
class="last-seen"
style="
color: ${this.lastSeenTextColor||"gray"};
font-size: ${this.lastSeenTextFontSize||"14px"};
"
>
${this.lastSeenText}
</div>`:""}
</div>
<div class="actions">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" @click=${this._handleFirstSvgClick}>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20.5803 18.8697C21.3079 19.5972 20.2027 20.7024 19.4751 19.9748L14.5878 15.0878V17.7827C14.5878 18.8118 13.0248 18.8118 13.0248 17.7827V13.2009C13.0248 12.7692 13.375 12.4193 13.8063 12.4193H18.388C19.417 12.4193 19.417 13.9824 18.388 13.9824H15.6933L20.5803 18.8697ZM9.83598 5.43015C9.83598 4.40109 11.399 4.40109 11.399 5.43015V10.0118C11.399 10.4434 11.0489 10.7933 10.6175 10.7933H6.03561C5.00656 10.7933 5.00656 9.23027 6.03561 9.23027H8.73057L3.84351 4.34321C3.11598 3.61567 4.22114 2.51051 4.94868