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
2 lines • 12.8 kB
JavaScript
import{r as i,h as t}from"./p-5ec77bd1.js";import{g as s,w as e}from"./p-6b09d4e5.js";const l=function(i){if(!i.conversationId||!i.licenseKey||!i.appSecret||!i.userSecret||!i.userToken||!i.isometrikUserId||!i.projectId||!i.keysetId||!i.accountId){console.error("Missing required props to Initialize chat!");return}const t=document.getElementById(`${i.conversationId}`);if(t){console.warn(`Chat component for ${i.conversationId} already exists.`);return}const s=document.createElement("chat-test");s.id=i.conversationId;s.baseUrl=(i===null||i===void 0?void 0:i.baseUrl)||"https://apis.isometrik.io";s.hostUrl=(i===null||i===void 0?void 0:i.hostUrl)||"wss://connections.isometrik.io:2053/mqtt";s.licenseKey=i.licenseKey;s.appSecret=i.appSecret;s.userSecret=i.userSecret;s.userToken=i.userToken;s.isometrikUserId=i.isometrikUserId;s.projectId=i.projectId;s.keysetId=i.keysetId;s.accountId=i.accountId;s.conversationId=i.conversationId;s.isDark=i.defaultTheme=="dark"?true:false;s.darkThemeUrl=i.darkThemeUrl||"https://isometrik-website-bucket.s3.ap-south-1.amazonaws.com/styles/chat-dark-theme.css";s.lightThemeUrl=i.lightThemeUrl||"https://isometrik-website-bucket.s3.ap-south-1.amazonaws.com/styles/chat-light-theme.css";document.body.appendChild(s)};const n=function(i){if(!i){console.error("conversationId is require to closeChat");return}const t=document.getElementById(i);if(t){t.baseUrl=null;t.hostUrl=null;t.licenseKey=null;t.appSecret=null;t.userSecret=null;t.userToken=null;t.isometrikUserId=null;t.projectId=null;t.keysetId=null;t.accountId=null;t.conversationId=null;document.body.removeChild(t)}};const o=function(i){const t=document.getElementsByTagName("CHAT-TEST");for(let s=0;s<t.length;s++){const e=t[s];e.isDark=i=="dark"?true:false}};if(typeof window!=="undefined"){window.initializeChat=l;window.closeChat=n;window.switchChatTheme=o}const h=class{constructor(t){i(this,t);this.typingTimeout=null;this.refetchInterval=null;this.changeScrollToBottomState=i=>{this.isScrollToBottom=i};this.changeScrollToTopState=i=>{this.isScrollToTop=i};this.updateSkip=()=>{if(!this.isMessageLimitEnd){this.skip+=20}};this.updateAllMessages=i=>{this.allMessages=i};this.refetchMessages=async()=>{this.isScrollToBottom=true;this.skip=0;this.isMessageLimitEnd=false;await this.getMessages(0)};this.changeMessageSendingState=i=>{this.isMessageSending=i};this.baseUrl=undefined;this.hostUrl=undefined;this.licenseKey=undefined;this.appSecret=undefined;this.userSecret=undefined;this.userToken=undefined;this.isometrikUserId=undefined;this.projectId=undefined;this.keysetId=undefined;this.accountId=undefined;this.conversationId=undefined;this.isDark=undefined;this.darkThemeUrl=undefined;this.lightThemeUrl=undefined;this.isInitialized=false;this.findUserId={};this.mqttClient=null;this.mqttInitialized=false;this.allMessages=[];this.userMetaData=null;this.conversationMetaData=null;this.isMessageLimitEnd=false;this.skip=0;this.isMessagesLoading=false;this.isMessageSending=false;this.deviceId="";this.isScrollToBottom=true;this.isScrollToTop=false;this.isChatClosed=false;this.isChatMinimized=false;this.isSubscribedToTopic=false;this.isMessageListenerAttached=false;this.isInitialCallDone=false;this.isTyping=false}async componentWillLoad(){this.loadTheme();try{const i=await s();this.deviceId=i;e.initializeInstance({baseUrl:this.baseUrl,licenseKey:this.licenseKey,appSecret:this.appSecret,userSecret:this.userSecret,userToken:this.userToken});this.isInitialized=true;await this.setupMqttClient();await this.getUserDetails();await this.getUserConversationDetails();if(!this.isMessageLimitEnd){await this.getMessages(this.skip)}}catch(i){this.isInitialized=false;console.error("ChatSDK initialization failed:",i)}}cleanupMQTT(){if(this.mqttClient&&this.mqttClient.client){this.mqttClient.client.removeAllListeners("message");if(this.refetchInterval){clearInterval(this.refetchInterval);this.refetchInterval=null}this.mqttClient=null;this.mqttInitialized=false;this.isSubscribedToTopic=false;this.isMessageListenerAttached=false;this.isInitialCallDone=false;this.baseUrl=null;this.hostUrl=null;this.licenseKey=null;this.appSecret=null;this.userSecret=null;this.userToken=null;this.isometrikUserId=null;this.projectId=null;this.keysetId=null;this.accountId=null;this.conversationId=null}}async setupMqttClient(){if(this.mqttClient){this.cleanupMQTT()}const i=e.getInstance().initializeMqtt({hostUri:this.hostUrl,clientId:this.isometrikUserId,licenseKey:this.licenseKey,projectId:this.projectId,keysetId:this.keysetId,accountId:this.accountId,deviceId:this.deviceId});this.mqttClient=i;console.log(this.mqttClient,"mqtt client");if(this.mqttClient){this.mqttInitialized=true;this.mqttClient.client.on("connect",(async()=>{if(this.refetchInterval){clearInterval(this.refetchInterval);this.refetchInterval=null}if(!this.isInitialCallDone){await e.getInstance().message.putRead({conversationId:this.conversationId});await this.refetchMessages();this.isInitialCallDone=true}}));this.mqttClient.client.on("message",(async(i,t)=>{var s,l,n,o,h,a,d;const c=JSON.parse(t.toString());console.log(`klmnop new Incoming message form11111 ${i}:1`,c);if((c===null||c===void 0?void 0:c.action)==="messageRead"){this.allMessages=(s=this.allMessages)===null||s===void 0?void 0:s.map((i=>(i===null||i===void 0?void 0:i.messageId)===(c===null||c===void 0?void 0:c.messageId)?Object.assign(Object.assign({},i),{readByAll:true}):i))}if((c===null||c===void 0?void 0:c.action)==="typingEvent"&&c.userId!=this.userMetaData.userId){this.isTyping=true}else{this.isTyping=false}if((c===null||c===void 0?void 0:c.action)==="multipleMessagesRead"&&c.userId!=((l=this.userMetaData)===null||l===void 0?void 0:l.userId)){this.allMessages=(n=this.allMessages)===null||n===void 0?void 0:n.map((i=>{var t,s;return(i===null||i===void 0?void 0:i.readByAll)!=true&&((i===null||i===void 0?void 0:i.senderId)||((t=i===null||i===void 0?void 0:i.senderInfo)===null||t===void 0?void 0:t.userId))==((s=this.userMetaData)===null||s===void 0?void 0:s.userId)?Object.assign(Object.assign({},i),{readByAll:true}):i}))}if((c===null||c===void 0?void 0:c.action)=="messagesDeleteForAll"){this.allMessages=this.allMessages.filter((i=>i.messageId!=c.messageIds[0]))}if((c===null||c===void 0?void 0:c.senderId)==((o=this.userMetaData)===null||o===void 0?void 0:o.userId)&&(c===null||c===void 0?void 0:c.action)=="chatMessageSent"){this.changeMessageSendingState(false);this.allMessages=this.allMessages.map((i=>i.messageId==c.messageId||i.id=="12"?c:i))}if((c===null||c===void 0?void 0:c.action)=="messageDelivered"&&c.senderId!=((h=this.userMetaData)===null||h===void 0?void 0:h.userId)){this.allMessages=(a=this.allMessages)===null||a===void 0?void 0:a.map((i=>(i===null||i===void 0?void 0:i.messageId)===(c===null||c===void 0?void 0:c.messageId)?Object.assign(Object.assign({},i),{deliveredToAll:true}):i))}if((c===null||c===void 0?void 0:c.senderId)!=((d=this.userMetaData)===null||d===void 0?void 0:d.userId)&&(c===null||c===void 0?void 0:c.action)=="chatMessageSent"&&(c===null||c===void 0?void 0:c.action)!="typingEvent"&&(c===null||c===void 0?void 0:c.action)!="messageRead"&&(c===null||c===void 0?void 0:c.action)!="multipleMessagesRead"&&(c===null||c===void 0?void 0:c.action)!="messageRead"&&(c===null||c===void 0?void 0:c.action)!="messageDelivered"){this.allMessages=[...this.allMessages,c];try{await e.getInstance().message.putIndicateDelivered({conversationId:c===null||c===void 0?void 0:c.conversationId,messageId:c===null||c===void 0?void 0:c.messageId})}catch(i){console.log(i,"putIndicateDelivered request error")}}}));this.mqttClient.client.on("error",(i=>{console.log("MQTT connection error:---\x3e",i);this.isInitialCallDone=true;if(!this.refetchInterval){this.refetchInterval=setInterval((()=>{console.log("MQTT connection failed, refetching messages...");this.refetchMessages()}),3e4)}}))}}async getUserDetails(){var i,t,s;try{const l=await e.getInstance().user.getUserDetails();this.userMetaData={userId:(l===null||l===void 0?void 0:l.userId)||"",userIdentifier:(l===null||l===void 0?void 0:l.userIdentifier)||"",firstName:((i=l===null||l===void 0?void 0:l.metaData)===null||i===void 0?void 0:i.firstName)||"",lastName:((t=l===null||l===void 0?void 0:l.metaData)===null||t===void 0?void 0:t.lastName)||"",updatedAt:(l===null||l===void 0?void 0:l.updatedAt)||"",userName:(l===null||l===void 0?void 0:l.userName)||"",online:(l===null||l===void 0?void 0:l.online)||"",userProfileImageUrl:(l===null||l===void 0?void 0:l.userProfileImageUrl)||"",profilePic:((s=l===null||l===void 0?void 0:l.metaData)===null||s===void 0?void 0:s.profilePic)||""}}catch(i){console.error("getUserDetails fetching error:",i)}}async getUserConversationDetails(){try{const i=await e.getInstance().Conversation.getConversationDetails({conversationId:this.conversationId},this.conversationId);this.conversationMetaData=i.conversationDetails}catch(i){console.error("getConversationDetails fetching error:",i)}}async getMessages(i){this.isMessagesLoading=true;this.isScrollToTop=true;try{const t=await e.getInstance().message.getMessages({conversationId:this.conversationId,limit:20,skip:i});if(i===0){this.allMessages=[...t.messages.reverse()]}else{this.allMessages=[...t.messages.reverse(),...this.allMessages]}}catch(i){if(i.errorCode===1){this.isMessageLimitEnd=true}console.error("Error fetching messages:",i)}finally{this.isMessagesLoading=false}}async deleteMessageFromSelf(i){try{this.allMessages=this.allMessages.filter((t=>t.messageId!==i.messageIds));await e.getInstance().message.deleteMessageSelf(i)}catch(i){console.error("Delete self error:",i)}}async deleteMeassageFromEveryOne(i){try{this.allMessages=this.allMessages.filter((t=>t.messageId!==i.messageIds));await e.getInstance().message.deleteMessagesEveryone(i)}catch(i){console.error("Delete all error:",i)}}handleSkipChange(){if(!this.isMessageLimitEnd){this.getMessages(this.skip)}}loadTheme(){const i=document.getElementById("theme-style");if(i){i.href=this.isDark?`${this.darkThemeUrl}`:`${this.lightThemeUrl}`}else{const i=document.createElement("link");i.id="theme-style";i.rel="stylesheet";i.href=this.isDark?`${this.darkThemeUrl}`:`${this.lightThemeUrl}`;document.head.appendChild(i)}}handleTypingChange(){if(this.isTyping){if(this.typingTimeout){clearTimeout(this.typingTimeout)}this.typingTimeout=setTimeout((()=>{this.isTyping=false}),1e4)}}disconnectedCallback(){this.cleanupMQTT();if(this.typingTimeout){clearTimeout(this.typingTimeout);this.typingTimeout=null}}render(){return t("div",{key:"88bd56afdec0d1320cd2051514f16a685ca6b974"},t("div",{key:"282e054e46e6dfc95de4946dcd0cf7898a65cddf",class:"isometrik-quickchat"},!this.isChatClosed?this.isChatMinimized?t("div",{class:"minimizedChat"},t("chat-header-closed",{conversationDetails:this.conversationMetaData,onMinimize:()=>{this.isChatMinimized=false},onClose:()=>{n(this.conversationId)}})):t("div",{class:"openChat"},t("chat-header",{isDark:this.isDark,conversationDetails:this.conversationMetaData,onMinimize:()=>{this.isChatMinimized=true},onClose:()=>{this.isChatClosed=true;n(this.conversationId)},isTyping:this.isTyping}),t("chat-body",{isDark:this.isDark,isMessagesLoading:this.isMessagesLoading,updateSkip:this.updateSkip,isMessageLimitEnd:this.isMessageLimitEnd,allMessages:this.allMessages,userMetaData:this.userMetaData,skip:this.skip,isScrollToBottom:this.isScrollToBottom,changeScrollToBottomState:this.changeScrollToBottomState,isMessageSending:this.isMessageSending,isScrollToTop:this.isScrollToTop,changeScrollToTopState:this.changeScrollToTopState,deleteForSelf:this.deleteMessageFromSelf,deleteForAll:this.deleteMeassageFromEveryOne,isChatClosed:this.isChatClosed,isChatMinimized:this.isChatMinimized,updateAllMessages:this.updateAllMessages,conversationId:this.conversationId}),t("chat-footer",{isDark:this.isDark,userMetaData:this.userMetaData,updateAllMessages:this.updateAllMessages,changeMessageSendingState:this.changeMessageSendingState,changeScrollToBottomState:this.changeScrollToBottomState,refetchMessages:this.refetchMessages,allMessages:this.allMessages,conversationId:this.conversationId})):null))}static get watchers(){return{skip:["handleSkipChange"],isDark:["loadTheme"],isTyping:["handleTypingChange"]}}};h.style=":host {\n display: block;\n width: 95vw;\n max-width: 500px;\n position: fixed;\n right: 5px;\n bottom: 2px;\n box-shadow: 0px 0px 4px #6d5555;\n border-radius: 15px 15px 0px 0px;\n z-index: 2147483647 !important;\n background-color: #FFF;\n overflow: hidden;\n }\n\n .isometrik-quickchat {\n box-shadow: 0px 0px 20px 1px #6294a926;\n }\n .openChat {\n height: 90vh;\n display: flex;\n flex-direction: column;\n overflow: hidden; \n }";export{h as chat_test};
//# sourceMappingURL=p-fe16b0d9.entry.js.map