loader_test.js - master - projectArkVV/chatbot-widget

loader_test.js
185 строк10 KB
projectArkVV
Update: loader_test.js
09 авг 2026, 18:41
09 авг 2026, 18:416dd0004
(function () {
    'use strict';

    // =========================================================================
    // ЗАЩИТА ОТ ПОВТОРНОЙ ИНИЦИАЛИЗАЦИИ
    // =========================================================================
    if (window.__collegeChatbotLoaded) {
        console.warn('[Chatbot] Loader уже был инициализирован. Пропускаем.');
        return;
    }
    window.__collegeChatbotLoaded = true;

    /*=========================================================================
               ****************** КОНФИГУРАЦИЯ ********************
    ===========================================================================*/
    const VERSION = '1.0.1'; // версия при обновлении файлов на сервере!
    const CDN_BASE_URL = 'https://projectarkvv.gitverse.site/chatbot-widget';

    // =========================================================================
    // API CONFIG
    // =========================================================================
    // API_MODE — явный режим работы виджета:
    //   true  — реальный HTTP API;
    //   false — локальный сценарий/mock без сетевых запросов.
    // =========================================================================
    const API_URL = 'https://real-api.ru/chat'; // ← ЗАМЕНИТЬ на реальный URL API если не локальный сценарий!

    const API_MODE = false; // явно задаем режим работы виджета

    // Важно: это не только URL для api, но и идентификатор для локального хранилища
    const API_BASE_URL = API_MODE ? API_URL : 'only-navigation';
    
    const CONFIG = {
        // --- Контент ---
        title: 'Бот помощник',
        inputPlaceholder: 'Задайте ваш вопрос...',
        botStatus: 'я на связи',
        greeting: 'Здравствуйте! Выберите, что вас интересует',
        greetingOutsideText: 'Бот приемной комиссии\n\nЗдравствуйте! Я могу вам помочь!',
        // --- Логотип в шапке ---
        imageLogoUrl: `${CDN_BASE_URL}/logo.webp`,
        imageWidth: '60px',

        // --- Позиционирование --- bottom-left | bottom-center ...
        // Передаем строго ОБЪЕКТОМ с ключем preset, иначе будет баг!
        position: { preset: 'bottom-right' },

        // --- Прочие фичи ---
        greetingOutside: true, // всплавающее сообщение до открытия виждета
        greetingOutsideDelay: 3000,           // Появится через 3 секунды
        //greetingSoundUrl: 'https://projectarkvv.gitverse.site/chatbot-widget/greeting.mp3', // Звук (опционально)
        notificationBadge: true, // красный бейдж на виджите (имитация не прочитанного сообщения)
        zIndex: 9999,
        sessionTtlMs: 60000, //60 сек //259200000, // 72 часа (в миллисекундах)

        // --- Режим ввода ---
        showInput: false,                     // Поле ввода скрыто по умолчанию

        // --- Форма "Напишите нам" ---
        writeToUsEndpoint: '',                // Endpoint для отправки (пока пусто)
        writeToUsButtonText: 'Не нашли ответ? Напишите нам',
        writeToUsEmailPlaceholder: 'Ваш email',
        writeToUsTextPlaceholder: 'Опишите ваш вопрос подробно...',
        writeToUsSubmitText: 'Отправить',
        writeToUsSuccessMessage: 'Спасибо! Сотрудники скоро свяжутся с вами.',
    };

    const LOAD_TIMEOUT_MS = 10000; // 10 секунд на загрузку обоих скриптов
    const ROOT_ID = 'college-chatbot-root';

    // =========================================================================
    // СОЗДАЕМ КОНТЕЙНЕР
    // =========================================================================
    if (!document.getElementById(ROOT_ID)) {
        const rootDiv = document.createElement('div');
        rootDiv.id = ROOT_ID;
        (document.body || document.documentElement).appendChild(rootDiv);
    }

    // =========================================================================
    // ВСПОМОГАТЕЛЬНАЯ ФУНКЦИЯ ЗАГРУЗКИ СКРИПТА
    // =========================================================================
    function loadScript(src) {
        return new Promise((resolve, reject) => {
            const s = document.createElement('script');
            s.src = src;
            s.onload = resolve;
            s.onerror = reject;
            document.body.appendChild(s);
        });
    }

    // =========================================================================
    // ПОСЛЕДОВАТЕЛЬНАЯ ЗАГРУЗКА И ИНИЦИАЛИЗАЦИЯ
    // =========================================================================
    (async function init() {
        // Запускаем глобальный таймаут
        let initializationAborted = false;
        const loadTimeout = setTimeout(() => {
        initializationAborted = true;
        window.__collegeChatbotLoaded = false;
        console.error(
            `[Chatbot] Превышено время ожидания загрузки (${LOAD_TIMEOUT_MS / 1000}с). Монтаж отменён.`
        );
        }, LOAD_TIMEOUT_MS);

        try {
            // Загружаем настройки темы (создает window.__chatbotThemeTokens)
            await loadScript(`${CDN_BASE_URL}/theme-tokens.js?v=${VERSION}`);
            if (initializationAborted) return;

            await loadScript(`${CDN_BASE_URL}/scenario.js?v=${VERSION}`);
            if (initializationAborted) return;

            // Загружаем ядро виджета (React, CSS, логика)
            await loadScript(`${CDN_BASE_URL}/chatbot-widget.iife.js?v=${VERSION}`);
            if (initializationAborted) return;

            // Если дошли сюда — всё загрузилось, убираем таймаут
            clearTimeout(loadTimeout);

            //Проверяем, что API доступно
            if (!window.ChatbotWidget?.mountChatbotWidget) {
                throw new Error('API mountChatbotWidget не найден в бандле.');
            }

            // Монтируем виджет
            const themePreset = window.__chatbotThemePreset || 'lighty';
            const themeTokens = window.__chatbotThemeTokens || {};
            const scenario = window.__chatbotScenario;

            if (!API_MODE && (!scenario || typeof scenario !== "object")) {
            throw new Error(
                "[Chatbot] window.__chatbotScenario is not defined. Проверьте scenario.js."
            );
            }

            window.ChatbotWidget.mountChatbotWidget(`#${ROOT_ID}`, {
                apiMode:                   API_MODE,
                apiBaseUrl:                API_BASE_URL,
                theme:                     themePreset,
                themeTokens:               themeTokens,
                scenario:                  scenario,
                title:                     CONFIG.title,
                greeting:                  CONFIG.greeting,
                inputPlaceholder:          CONFIG.inputPlaceholder,
                botStatus:                 CONFIG.botStatus,
                position:                  CONFIG.position,
                notificationBadge:         CONFIG.notificationBadge,
                greetingOutside:           CONFIG.greetingOutside,
                greetingOutsideDelay:      CONFIG.greetingOutsideDelay,
                greetingOutsideText:       CONFIG.greetingOutsideText,
                imageUrl:                  CONFIG.imageLogoUrl,
                imageWidth:                CONFIG.imageWidth,
                zIndex:                    CONFIG.zIndex,
                sessionTtlMs:              CONFIG.sessionTtlMs,
                pageContext:               CONFIG.pageContext,
                showInput:                 CONFIG.showInput,
                writeToUsEndpoint:         CONFIG.writeToUsEndpoint,
                writeToUsButtonText:       CONFIG.writeToUsButtonText,
                writeToUsEmailPlaceholder: CONFIG.writeToUsEmailPlaceholder,
                writeToUsTextPlaceholder:  CONFIG.writeToUsTextPlaceholder,
                writeToUsSubmitText:       CONFIG.writeToUsSubmitText,
                writeToUsSuccessMessage:   CONFIG.writeToUsSuccessMessage,
            }, {
                isolateStyles: true, // Включаем Shadow DOM
            });

            console.log('[Chatbot] ✓ Виджет успешно инициализирован (тема из theme-tokens.js)');

        } catch (err) {
        clearTimeout(loadTimeout);

        if (initializationAborted) {
            return;
        }

        console.error('[Chatbot] Ошибка инициализации:', err);

        // Сбрасываем флаг, чтобы при исправлении проблемы скрипт можно было
        // перезапустить без перезагрузки страницы
        window.__collegeChatbotLoaded = false;
        }
    })();
})();