', { text: 'Sorry, but your browser doesn\'t ' - + 'support WebSockets.'} )); - input.hide(); - $('span').hide(); - return; - } - - // open connection - var connection = new WebSocket('ws://localhost:3000/cable'); - - connection.onopen = function () { - // check whether we have a pubsub token and contact identifier or else set one - setUpContact(); - setUpConversation(); - - // first we want users to subscribe to the chatwoot webhooks - connection.send(JSON.stringify({command:"subscribe", identifier: "{\"channel\":\"RoomChannel\",\"pubsub_token\":\""+chatwoot.contactPubsubToken+"\"}" })); - input.removeAttr('disabled'); - status.text('Send Message:'); - }; - - connection.onerror = function (error) { - // just in there were some problems with connection... - content.html($('
', { text: 'Sorry, but there\'s some problem with your ' - + 'connection or the server is down.' } )); - }; - - // most important part - incoming messages - connection.onmessage = function (message) { - // try to parse JSON message. Because we know that the server always returns - // JSON this should work without any problem but we should make sure that - // the massage is not chunked or otherwise damaged. - try { - var json = JSON.parse(message.data); - } catch (e) { - console.log('This doesn\'t look like a valid JSON: ', message.data); - return; - } - - if (json.type === 'welcome') { - // lets ignore the welcome - } else if (json.type === 'ping') { - // lets ignore the pings - } else if (json.type === 'confirm_subscription') { - // lets ignore the confirmation - }else if (json.message.event === 'message.created') { - console.log('here comes message', json); - if(json.message.data.message_type === 1) - { - addMessage(json.message.data.sender.name, json.message.data.content); + "use strict"; + + window.chatwoot = { + // replace with your actual inbox identifier + inboxIdentifier: "sdasdsadfashaksdaskh", + chatwootAPIUrl: "https://localhost:3000/public/api/v1/" + }; + + var content = $('#content'); + var input = $('#input'); + var status = $('#status'); + + // Open WebSocket connection + var connection = new WebSocket('wss://localhost:3000/cable'); + + connection.onopen = async function () { + try { + await setUpContact(); // Ensure contact is created + await setUpConversation(); // Ensure conversation is created + + connection.send(JSON.stringify({ + command: "subscribe", + identifier: JSON.stringify({ + channel: "RoomChannel", + pubsub_token: chatwoot.contactPubsubToken + }) + })); + input.removeAttr('disabled'); + status.text('Send Message:'); + } catch (error) { + console.error("Setup failed:", error); + } + }; + + connection.onerror = function (error) { + content.html($('
', { text: 'Sorry, but there\'s some problem with your connection or the server is down.' })); + }; + + connection.onmessage = function (message) { + try { + var json = JSON.parse(message.data); + if (json.type === 'welcome' || json.type === 'ping' || json.type === 'confirm_subscription') return; + + if (json.message.event === 'message.created') { + console.log('Incoming message', json); + if (json.message.data.message_type === 1) { + addMessage(json.message.data.sender.name, json.message.data.content); + } } - } else { - console.log('Hmm..., I\'ve never seen JSON like this: ', json); - } - }; - - /** - * Send mesage when user presses Enter key - */ - input.keydown(function(e) { - if (e.keyCode === 13) { - var msg = $(this).val(); - if (!msg) { - return; - } - // send the message to chatwoot - //connection.send(msg); - sendMessage(msg); - addMessage("me", msg) - $(this).val(''); - } - }); - - /** - * This method is optional. If the server wasn't able to respond to the - * in 3 seconds then show some error message to notify the user that - * something is wrong. - */ - setInterval(function() { - if (connection.readyState !== 1) { - status.text('Error'); - input.attr('disabled', 'disabled').val('Unable to communicate ' - + 'with the WebSocket server.'); - } - }, 3000); - - /** - * Add message to the chat window - */ - function addMessage(author, message) { - content.append('
' + author + ' @ ' + ':' + message + '
'); - content.scrollTop(1000000); - } - - function setUpContact() { - if(getCookie('contactIdentifier')){ - chatwoot.contactIdentifier = getCookie('contactIdentifier'); - chatwoot.contactPubsubToken = getCookie('contactPubsubToken') - }else{ - xhttp.open("POST", chatwoot.chatwootAPIUrl + "inboxes/"+chatwoot.inboxIdentifier+"/contacts"); - xhttp.send(); - var contactPubsubToken = JSON.parse(xhttp.responseText).pubsub_token; - var contactIdentifier = JSON.parse(xhttp.responseText).source_id; - setCookie('contactIdentifier',contactIdentifier,30); - setCookie('contactPubsubToken',contactPubsubToken,30); + } catch (e) { + console.log('Invalid JSON:', message.data); + } + }; + + input.keydown(function (e) { + if (e.keyCode === 13) { + var msg = $(this).val(); + if (!msg) return; + + sendMessage(msg); + addMessage("me", msg); + $(this).val(''); + } + }); + + setInterval(function () { + if (connection.readyState !== 1) { + status.text('Error'); + input.attr('disabled', 'disabled').val('Unable to communicate with the WebSocket server.'); + } + }, 3000); + + function addMessage(author, message) { + content.append(`${author}: ${message}
`); + content.scrollTop(1000000); + } + + /** + * 🚀 Asynchronous function to set up a contact + */ + async function setUpContact() { + let contactIdentifier = getCookie('contactIdentifier'); + let contactPubsubToken = getCookie('contactPubsubToken'); + + if (contactIdentifier && contactPubsubToken) { + chatwoot.contactIdentifier = contactIdentifier; + chatwoot.contactPubsubToken = contactPubsubToken; + return; + } + + try { + const response = await fetch(`${chatwoot.chatwootAPIUrl}inboxes/${chatwoot.inboxIdentifier}/contacts`, { + method: "POST", + headers: { "Content-Type": "application/json" } + }); + + if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`); + + const data = await response.json(); + chatwoot.contactIdentifier = data.source_id; + chatwoot.contactPubsubToken = data.pubsub_token; + + setCookie('contactIdentifier', data.source_id, 30); + setCookie('contactPubsubToken', data.pubsub_token, 30); + + } catch (error) { + console.error("Error setting up contact:", error); + } + } + + /** + * 🚀 Asynchronous function to set up a conversation + */ + async function setUpConversation() { + let contactConverstion = getCookie('contactConverstion'); + if (contactConverstion) { + chatwoot.contactConverstion = contactConverstion; + return; + } + + try { + const response = await fetch(`${chatwoot.chatwootAPIUrl}inboxes/${chatwoot.inboxIdentifier}/contacts/${chatwoot.contactIdentifier}/conversations`, { + method: "POST", + headers: { "Content-Type": "application/json" } + }); + + if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`); + + const data = await response.json(); + chatwoot.contactConverstion = data.id; + + setCookie('contactConverstion', data.id, 30); + + } catch (error) { + console.error("Error setting up conversation:", error); + } + } + + /** + * 🚀 Asynchronous function to send a message + */ + async function sendMessage(msg) { + if (!chatwoot.contactConverstion) { + console.error("Cannot send message. Conversation is undefined."); + return; + } + + try { + const response = await fetch(`${chatwoot.chatwootAPIUrl}inboxes/${chatwoot.inboxIdentifier}/contacts/${chatwoot.contactIdentifier}/conversations/${chatwoot.contactConverstion}/messages`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ content: msg }) + }); + + if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`); + + } catch (error) { + console.error("Error sending message:", error); + } + } + + /** + * 🍪 Set a cookie + */ + function setCookie(name, value, days) { + let expires = ""; + if (days) { + let date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + expires = "; expires=" + date.toUTCString(); } - } - - function setUpConversation() { - if(getCookie('contactConverstion')){ - chatwoot.contactConverstion = getCookie('contactConverstion'); - }else{ - xhttp.open("POST", chatwoot.chatwootAPIUrl + "inboxes/"+chatwoot.inboxIdentifier+"/contacts/"+chatwoot.contactIdentifier+"/conversations", false); - xhttp.send(); - var contactConverstion = JSON.parse(xhttp.responseText).id; - setCookie('contactConverstion',contactConverstion,30); + document.cookie = name + "=" + (value || "") + expires + "; path=/"; + } + + /** + * 🍪 Get a cookie + */ + function getCookie(name) { + let nameEQ = name + "="; + let ca = document.cookie.split(';'); + for (let i = 0; i < ca.length; i++) { + let c = ca[i].trim(); + if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); } - } - - function sendMessage(msg){ - xhttp.open("POST", chatwoot.chatwootAPIUrl + "inboxes/"+chatwoot.inboxIdentifier+"/contacts/"+chatwoot.contactIdentifier+"/conversations/"+chatwoot.contactConverstion+"/messages", false); - xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); - xhttp.send(JSON.stringify({content: msg})); - } - - function setCookie(name,value,days) { - var expires = ""; - if (days) { - var date = new Date(); - date.setTime(date.getTime() + (days*24*60*60*1000)); - expires = "; expires=" + date.toUTCString(); - } - document.cookie = name + "=" + (value || "") + expires + "; path=/"; - } - function getCookie(name) { - var nameEQ = name + "="; - var ca = document.cookie.split(';'); - for(var i=0;i < ca.length;i++) { - var c = ca[i]; - while (c.charAt(0)==' ') c = c.substring(1,c.length); - if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); - } - return null; - } - function eraseCookie(name) { - document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'; - } -}); \ No newline at end of file + return null; + } +});