BossBey File Manager

Editing: external-chatbot.js

(async function () {
	const scriptTag = document.currentScript;
	const url = new URL(scriptTag.getAttribute('data-chatbot-src'));
	const iframeWidth = scriptTag.getAttribute('data-iframe-width');
	const iframeHeight = scriptTag.getAttribute('data-iframe-height');
	const chatbotHostOrigin = `${url.origin}`;
	const chatBotUuid = scriptTag.getAttribute('data-chatbot-uuid');
	const iFrameUrl = `${chatbotHostOrigin}/chatbot/${chatBotUuid}/frame`;
	const jsonUrl = `${chatbotHostOrigin}/api/v2/chatbot/${chatBotUuid}`;

let config = {
		active: false,
		color: '#763ed1',
		trigger_avatar_size: '60px',
		avatar: null,
		trigger_background: ''
	};

const getChatbotDetails = async () => {
		if (chatBotUuid) {
			try {
				const response = await fetch(`${jsonUrl}`);
				const data = await response.json();
				const chatbot = data?.data || {};

config = {
					...config,
					...chatbot
				};
			} catch (error) {
				console.error('Failed to fetch chatbot details:', error);
				return null;
			}
		}
		return null;
	};

await getChatbotDetails();

if (!iFrameUrl) {
		console.error('Iframe source is not set');
		return;
	}

#lqd-ext-chatbot-wrap #lqd-ext-chatbot-trigger {
            display: inline-grid;
            place-items: center;
            place-content: center;
            width: var(--lqd-ext-chat-trigger-w);
            height: var(--lqd-ext-chat-trigger-h);
            padding: 0;
            position: relative;
            background-color: var(--lqd-ext-chat-trigger-background);
            color: var(--lqd-ext-chat-trigger-foreground);
            border-radius: var(--lqd-ext-chat-trigger-w);
            border: none;
            overflow: hidden;
            transition: all 0.15s;
            cursor: pointer;
            backdrop-filter: blur(12px) saturate(120%);
            pointer-events: auto;
            opacity: 0;
            visibility: hidden;
            transform: translateY(6px);
        }
        #lqd-ext-chatbot-wrap #lqd-ext-chatbot-trigger:before {
            content: '';
            display: inline-block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: var(--lqd-ext-chat-primary);
            opacity: 0;
            transform: translateY(3px);
            transition: all 0.15s;
        }
        #lqd-ext-chatbot-wrap #lqd-ext-chatbot-trigger-img,
        #lqd-ext-chatbot-wrap #lqd-ext-chatbot-trigger-icon {
            grid-row: 1 / 1;
            grid-column: 1 / 1;
            transition: all 0.15s;
        }
        #lqd-ext-chatbot-wrap #lqd-ext-chatbot-trigger-img {
            width: ${config.trigger_avatar_size ? `${parseInt(config.trigger_avatar_size, 10) }px` : '100%'};
            height: auto;
            max-width: none;
            position: relative;
            z-index: 1;
        }
        #lqd-ext-chatbot-wrap #lqd-ext-chatbot-trigger-icon {
            opacity: 0;
            transform: translateY(3px);
        }
        #lqd-ext-chatbot-wrap #lqd-ext-chatbot-trigger:active {
            transform: scale(0.9);
        }

#lqd-ext-chatbot-iframe-wrap {
            width: min(var(--lqd-ext-chat-window-w), calc(100vw - (var(--lqd-ext-chat-offset-x) * 2)));
            height: min(var(--lqd-ext-chat-window-h), calc(100vh - (var(--lqd-ext-chat-offset-y) * 2) - var(--lqd-ext-chat-trigger-h) - var(--lqd-ext-chat-window-y-offset)));
            box-shadow: 0 5px 40px hsl(0 0% 0% / 16%);
            border-radius: 12px;
            pointer-events: none;
            transform-origin: bottom left;
            transform: scale(0.975) translateY(6px);
            opacity: 0;
            visibility: hidden;
            transition: all 0.1s;
        }

#lqd-ext-chatbot-iframe {
            width: 100%;
            height: 100%;
        }

#lqd-ext-chatbot-welcome-bubble {
            padding: 12px 16px;
            border-radius: 12px;
            position: absolute;
            bottom: calc(var(--lqd-ext-chat-trigger-h) + var(--lqd-ext-chat-window-y-offset));
            left: 0;
            color: var(--lqd-ext-chat-primary);
            font-size: 14px;
            font-weight: 500;
            line-height: 1.2em;
            backdrop-filter: blur(12px) saturate(120%) brightness(1.75);
            opacity: 0;
            visibility: hidden;
            transform: translateY(6px);
            transition: all 0.15s;
        }
         #lqd-ext-chatbot-welcome-bubble:before {
            content: '';
            display: inline-block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: var(--lqd-ext-chat-primary);
            opacity: 0.05;
            border-radius: inherit;
        }
        #lqd-ext-chatbot-welcome-bubble p {
            position: relative;
            z-index: 1;
            margin: 0;
        }

.lqd-ext-chatbot-not-loaded {
            margin: 0;
            padding: 1rem;
        }

#lqd-ext-chatbot-wrap[data-ready=true] #lqd-ext-chatbot-trigger,
        #lqd-ext-chatbot-wrap[data-ready=true] #lqd-ext-chatbot-welcome-bubble {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

#lqd-ext-chatbot-wrap[data-window-state=open] #lqd-ext-chatbot-iframe-wrap {
            transform: translateY(0) scale(1);
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

#lqd-ext-chatbot-wrap[data-window-state=open] #lqd-ext-chatbot-trigger:before {
            transform: translateY(0);
            opacity: 1;
        }
        #lqd-ext-chatbot-wrap[data-window-state=open] #lqd-ext-chatbot-trigger-icon {
            opacity: 1;
            transform: translateY(0);
        }
        #lqd-ext-chatbot-wrap[data-window-state=open] #lqd-ext-chatbot-trigger-img {
            opacity: 0;
            transform: translateY(-3px);
        }
        #lqd-ext-chatbot-wrap[data-window-state=open] #lqd-ext-chatbot-welcome-bubble {
            transform: scale(0.95);
            opacity: 0;
            visibility: hidden;
        }

html[dir=rtl] #lqd-ext-chatbot-wrap[data-pos-x=left] {
            align-items: end;
        }

#lqd-ext-chatbot-wrap[data-pos-x=right] {
            left: auto;
            right: var(--lqd-ext-chat-offset-x, 30px);
            align-items: end;
        }

#lqd-ext-chatbot-wrap[data-pos-x=right] #lqd-ext-chatbot-iframe-wrap {
            transform-origin: bottom right;
        }

#lqd-ext-chatbot-wrap[data-pos-x=right] #lqd-ext-chatbot-welcome-bubble {
            left: auto;
            right: 0;
        }

html[dir=rtl] #lqd-ext-chatbot-wrap[data-pos-x=right] {
            align-items: start;
        }

#lqd-ext-chatbot-wrap[data-pos-y=top] {
            bottom: auto;
            top: var(--lqd-ext-chat-offset-y, 30px);
            flex-direction: column-reverse;
        }

#lqd-ext-chatbot-wrap[data-pos-y=top] #lqd-ext-chatbot-welcome-bubble {
            bottom: auto;
            top: calc(var(--lqd-ext-chat-trigger-h) + var(--lqd-ext-chat-window-y-offset));
        }
    </style>
    <div id="lqd-ext-chatbot-iframe-wrap">
        ${iFrameUrl ? `
            <iframe
                src="${iFrameUrl}"
                title="${config.title}"
                frameborder="0"
                allowfullscreen
                allowtransparency
                id="lqd-ext-chatbot-iframe"
                name="lqd-ext-chatbot-iframe"
                crossOrigin="anonymous"
                onload="
                    const wrapper = document.querySelector('#lqd-ext-chatbot-wrap');
                    window.addEventListener('message', event => {
                        if ( event.origin !== '${chatbotHostOrigin}' || event.data.type !== 'lqd-ext-chatbot-response-styling' || !wrapper ) return;
                        const { styles, attrs } = event.data.data;
                        Object.entries(styles).forEach(([key, value]) => {
                            if ( key === '--lqd-ext-chat-window-w' && ${iframeWidth ? true : false} ) {
                                return wrapper.style.setProperty(key, '${parseInt(iframeWidth, 10)}px');
                            } else if ( key === '--lqd-ext-chat-window-h' && ${iframeHeight ? true : false} ) {
                                return wrapper.style.setProperty(key, '${parseInt(iframeHeight, 10)}px');
                            }
                            wrapper.style.setProperty(key, value);
                        });
                        Object.entries(attrs).forEach(([key, value]) => {
                            wrapper.setAttribute(key, value);
                        });
                        wrapper.setAttribute('data-ready', 'true');
                    });

this.contentWindow.postMessage({
                        type: 'lqd-ext-chatbot-request-styling',
                    }, '${chatbotHostOrigin}');
                "
            ></iframe>` : `
        <p class="lqd-ext-chatbot-not-loaded">Could not setup the chatbot</p>
        `}
    </div>
    ${config.welcome_message && config.welcome_message !== '' ?
		`<div id="lqd-ext-chatbot-welcome-bubble">
                <p>
                    ${config.welcome_message}
                </p>
            </div>`
		:
		''
	}
    <button
        id="lqd-ext-chatbot-trigger"
        type="button"
    >
        <img
            id="lqd-ext-chatbot-trigger-img"
            src="${chatbotHostOrigin}${config.avatar}"
            alt="${config.title}"
            width="60"
            height="60"
        />
        <span id="lqd-ext-chatbot-trigger-icon">
            <svg
                width="16"
                height="10"
                viewBox="0 0 16 10"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path d="M8 9.07814L0.75 1.82814L2.44167 0.136475L8 5.69481L13.5583 0.136475L15.25 1.82814L8 9.07814Z" />
            </svg>
        </span>
    </button>
</div>`;

document.body.insertAdjacentHTML('beforeend', widgetMarkup);

const chatbotWrap = document.querySelector('#lqd-ext-chatbot-wrap');
	const trigger = document.querySelector('#lqd-ext-chatbot-trigger');
	let open = false;

trigger.addEventListener('click', ev => {
		ev.preventDefault();
		open = !open;
		chatbotWrap.setAttribute('data-window-state', open ? 'open' : 'close');
	});
})();

Cancel