@calq/neura-chat-widget
Version:
NeuraChat embedable script to insert chat widget
2 lines (1 loc) • 9.84 kB
JavaScript
var NeuraChat=function(e){"use strict";function n(e,n){var t={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&n.indexOf(a)<0&&(t[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(a=Object.getOwnPropertySymbols(e);i<a.length;i++)n.indexOf(a[i])<0&&Object.prototype.propertyIsEnumerable.call(e,a[i])&&(t[a[i]]=e[a[i]])}return t}"function"==typeof SuppressedError&&SuppressedError;const t={baseUrl:"https://widget.neurachat.ai",widgetId:""};function a(e){let n=document.getElementById("neura-chat-widget-custom-css");n||(n=document.createElement("style"),n.id="neura-chat-widget-custom-css",document.head.appendChild(n)),n.textContent=`\n :root {\n --neura-chat-widget-accent-color: ${e.accent_color};\n }\n`}const i=(e,n,t,a)=>{let i;i="boolean"==typeof n?n?"enter":"leave":n;const r=[`${t}-enter`,`${t}-enter-active`],o=[`${t}-leave`,`${t}-leave-active`],d=()=>e.classList.remove(...r,...o);if(d(),"enter"===i){e.classList.add(`${t}-enter`),e.offsetWidth,e.classList.add(`${t}-enter-active`);const n=t=>{t.target===e&&(d(),e.removeEventListener("transitionend",n),a&&a())};e.addEventListener("transitionend",n)}else{e.classList.add(`${t}-leave`),e.offsetWidth,e.classList.add(`${t}-leave-active`);const n=t=>{t.target===e&&(d(),e.removeEventListener("transitionend",n),a&&a())};e.addEventListener("transitionend",n)}};return document.head.appendChild(document.createElement("style")).textContent="/* Root */\n:root {\n --neura-chat-widget-accent-color: #1f2937;\n}\n\n/* Base widget */\n.neura-chat-widget {\n position: relative !important;\n width: 100%;\n height: 100%;\n opacity: 0;\n pointer-events: none;\n}\n.neura-chat-widget--initialized {\n opacity: 1;\n pointer-events: auto;\n}\n.neura-chat-widget-inline--fullscreen {\n position: fixed !important;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 99999;\n}\n\n/* Container */\n.neura-chat-widget__wrapper {\n width: 100%;\n height: 100%;\n}\n\n/* Iframe */\n.neura-chat-widget__iframe {\n width: 100%;\n height: 100%;\n border: none;\n}\n\n/* Bubble widget */\n.neura-chat-widget-bubble .neura-chat-widget__wrapper {\n position: fixed !important;\n height: 100%;\n width: 100%;\n border-radius: 0;\n overflow: hidden;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 99999;\n opacity: 0;\n pointer-events: none;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n}\n.neura-chat-widget--open .neura-chat-widget__wrapper {\n opacity: 1;\n pointer-events: auto;\n}\n\n/* Button */\n.neura-chat-widget-bubble .neura-chat-widget__button {\n position: fixed !important;\n bottom: 20px;\n right: 20px;\n z-index: 99998;\n border-radius: 9999px;\n background-color: var(--neura-chat-widget-accent-color);\n border: none;\n cursor: pointer;\n color: #fff;\n padding: 12px;\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;\n box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n}\n.neura-chat-widget-bubble .neura-chat-widget__button:hover {\n transform: scale(1.125);\n}\n.neura-chat-widget-bubble .neura-chat-widget__button svg {\n width: 24px;\n height: 24px;\n}\n.neura-chat-widget--open .neura-chat-widget__button {\n opacity: 0;\n pointer-events: none;\n}\n\n/* Bubble widget transitions */\n.neura-chat-widget-bubble--enter {\n opacity: 0;\n transform: translateY(40px) scale(0.95);\n}\n.neura-chat-widget-bubble--enter-active {\n opacity: 1;\n transform: translateY(0) scale(1);\n transition: opacity 0.2s cubic-bezier(.4,0,.2,1), transform 0.2s cubic-bezier(.4,0,.2,1);\n}\n.neura-chat-widget-bubble--leave {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n.neura-chat-widget-bubble--leave-active {\n opacity: 0;\n transform: translateY(40px) scale(0.95);\n transition: opacity 0.2s cubic-bezier(.4,0,.2,1), transform 0.2s cubic-bezier(.4,0,.2,1);\n}\n\n/* Loading indicator */\n.neura-chat-widget__loading-indicator {\n opacity: 0;\n background-color: #fff;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 0.2s ease-in-out;\n pointer-events: none;\n}\n.neura-chat-widget__loading-indicator--active {\n opacity: 1;\n}\n.neura-chat-widget__loading-indicator svg {\n width: 32px;\n height: 32px;\n transform: rotate(180deg);\n}\n\n.neura-chat-widget__loading-path-1 {\n animation: neura-chat-widget__loading-opacity-1 1.5s ease-in-out infinite;\n}\n\n.neura-chat-widget__loading-path-2 {\n animation: neura-chat-widget__loading-opacity-2 1.5s ease-in-out infinite;\n}\n\n@keyframes neura-chat-widget__loading-opacity-1 {\n 0%, 100% { opacity: 0.5; }\n 50% { opacity: 1; }\n}\n\n@keyframes neura-chat-widget__loading-opacity-2 {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* Tablet and desktop styles */\n@media (min-width: 768px) {\n .neura-chat-widget-bubble .neura-chat-widget__wrapper {\n width: 400px;\n height: auto;\n aspect-ratio: 3/4;\n border-radius: 12px;\n bottom: 20px;\n left: auto;\n right: auto;\n }\n .neura-chat-widget-bubble--right .neura-chat-widget__wrapper {\n left: auto;\n right: 20px;\n }\n .neura-chat-widget-bubble--left .neura-chat-widget__wrapper {\n right: auto;\n left: 20px;\n }\n .neura-chat-widget-bubble--left .neura-chat-widget__button {\n left: 20px;\n right: auto;\n }\n}\n",e.createBubbleWidget=e=>{let r=!1;const o=Object.assign(Object.assign({},t),e),d=((e="right")=>{const n=document.createElement("div");return n.classList.add("neura-chat-widget","neura-chat-widget-bubble",`neura-chat-widget-bubble--${e}`),n})(o.position),c=(()=>{const e=document.createElement("div");return e.className="neura-chat-widget__wrapper",e})(),s=(e=>{const n=document.createElement("iframe");return n.className="neura-chat-widget__iframe",n.src=`${e.baseUrl}/embed/${e.widgetId}?mode=bubble`,n})(o),l=(()=>{const e=document.createElement("button");return e.className="neura-chat-widget__button",e.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-share-icon lucide-message-square-share"><path d="M21 12v3a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h7"/><path d="M16 3h5v5"/><path d="m16 8 5-5"/></svg>',e})(),u=()=>{r=!0,i(c,r,"neura-chat-widget-bubble-"),d.classList.add("neura-chat-widget--open"),w({type:"neura-chat:widget:expand"})},g=()=>{r=!1,i(c,r,"neura-chat-widget-bubble-"),d.classList.remove("neura-chat-widget--open")},h=()=>{r?g():u()},p=e=>{const t=e.data,{type:i}=t,r=n(t,["type"]);switch(i){case"neura-chat:widget:init":w({type:"neura-chat:widget:options",options:o}),a(r.config),d.classList.add("neura-chat-widget--initialized");break;case"neura-chat:widget:expand":u();break;case"neura-chat:widget:minimize":g()}},w=e=>{var n;null===(n=s.contentWindow)||void 0===n||n.postMessage(Object.assign({},JSON.parse(JSON.stringify(e))),o.baseUrl)};return l.addEventListener("click",()=>h()),c.appendChild(s),d.appendChild(c),d.appendChild(l),document.body.appendChild(d),window.addEventListener("message",p),{destroy:()=>{window.removeEventListener("message",p),document.body.removeChild(d)},toggle:h}},e.createInlineWidget=function(e){const i=Object.assign(Object.assign({},t),e);if(!i.element)throw new Error("Element is required for inline mode");const r=(e=>{if("string"==typeof e)return document.getElementById(e);if(e instanceof HTMLElement)return e;throw new Error("Element is required for inline mode")})(i.element),o=(()=>{const e=document.createElement("div");return e.className="neura-chat-widget__wrapper",e})(),d=(e=>{const n=document.createElement("iframe");return n.className="neura-chat-widget__iframe",n.src=`${e.baseUrl}/embed/${e.widgetId}?mode=inline`,n})(i),c=(()=>{const e=document.createElement("div");return e.className="neura-chat-widget__loading-indicator neura-chat-widget__loading-indicator--active",e.innerHTML='\n <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path class="neura-chat-widget__loading-path-1" d="M0 22C0 9.84973 9.84974 0 22 0V0V26C22 38.1503 12.1503 48 0 48V48V22Z" fill="oklch(0.768 0.233 130.85)" />\n <path class="neura-chat-widget__loading-path-2" d="M26 0V0C38.1503 0 48 9.84974 48 22V48V48C35.8497 48 26 38.1503 26 26V0Z" fill="oklch(0.768 0.233 130.85)" />\n </svg>\n ',e})(),s=e=>{const t=e.data,{type:o}=t,d=n(t,["type"]);switch(o){case"neura-chat:widget:init":g({type:"neura-chat:widget:options",options:i}),a(d.config),r.classList.add("neura-chat-widget--initialized"),c.classList.remove("neura-chat-widget__loading-indicator--active");break;case"neura-chat:widget:expand":l();break;case"neura-chat:widget:minimize":u()}},l=()=>{r.classList.add("neura-chat-widget-inline--fullscreen")},u=()=>{r.classList.remove("neura-chat-widget-inline--fullscreen")},g=e=>{var n;null===(n=d.contentWindow)||void 0===n||n.postMessage(Object.assign({},JSON.parse(JSON.stringify(e))),i.baseUrl)};return o.appendChild(d),r.classList.add("neura-chat-widget","neura-chat-widget-inline"),r.appendChild(o),r.appendChild(c),window.addEventListener("message",s),{destroy:()=>{window.removeEventListener("message",s),r.classList.remove("neura-chat-widget","neura-chat-widget-inline"),r.removeChild(o)}}},Object.defineProperty(e,"__esModule",{value:!0}),e}({});