Configurazione e API

Opzioni di Configurazione

resources/js/shadowDomWidgetPreact.jsx

const defaultOptions = {
    // Impostazioni base
    chatTitle: "Tidiko.ai Chat",
    inputPlaceholder: "Chiedimi qualcosa",
    defaultMessage: null,
    language: "Italian",

    // Configurazione API
    appUrl: null,
    websiteUrl: null,
    jwt: null,
    jwtRefresh: null,
    socketUrl: null,

    // Personalizzazione aspetto
    colorScheme: "light",
    primaryColor: "#ff8e5e",
    loadInButton: true,
    buttonPosition: "right",
    useCustomLogo: false,
    logoUrl: null,
    userBg: null,
    aiBg: null,
    buttonColor: null,

    // Configurazione chat
    type: "assistant",
    hasDocuments: false,
    assistantInstructions: null,
    widgetAssistantId: null,
    fullHeight: false,
    linksTarget: "self",

    // Informazioni azienda
    companyName: null,
    companyDescription: null,
    collectionName: null,
    baseFeedUrl: null,

    // FAQ predefinite
    faqMessages: [],

    // Privacy e GDPR
    privacyEndpoint: null,
    csrfToken: null,
    translations: {
        privacy: {
            message: "By using Tidiko AI Chat, you accept our",
            policyLink: "Privacy Policy",
            acceptButton: "OK"
        }
    },

    // Override avanzate
    overrideSettings: {},
    platformSettings: {},
    payload: null,
};

API Pubbliche del Widget Preact

resources/js/shadowDomWidgetPreact.jsx

// Inizializzazione del widget
const widget = new TidikoAiWidgetPreact(containerId, {
    // Opzioni di configurazione
    platformSettings: {
        chatTitle: "Il Mio Chatbot",
        inputPlaceholder: "Come posso aiutarti?",
        colorScheme: "dark",
        userBg: "#ff6b35",
        aiBg: "#f8f9fa",
        buttonColor: "#007bff",
        useCustomLogo: true,
        logoUrl: "https://example.com/logo.png",
        faqMessages: [
            "Quali sono i vostri orari?",
            "Come posso contattarvi?",
            "Offrite servizi di consegna?"
        ]
    },
    
    // Configurazione API
    appUrl: "https://api.example.com",
    websiteUrl: "https://example.com",
    jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    jwtRefresh: "refresh_token_here",
    socketUrl: "wss://socket.example.com",
    
    // Configurazione chat
    type: "assistant",
    widgetAssistantId: "assistant_123",
    language: "Italian",
    hasDocuments: true,
    assistantInstructions: "Sei un assistente virtuale specializzato...",
    
    // Informazioni azienda
    companyName: "La Mia Azienda",
    companyDescription: "Descrizione della mia azienda...",
    collectionName: "prodotti",
    baseFeedUrl: "https://api.example.com/feed",
    
    // Opzioni avanzate
    fullHeight: false,
    linksTarget: "_blank",
    payload: { userId: "123", sessionId: "abc" }
});

// Metodi pubblici disponibili
widget.updateOptions({
    chatTitle: "Nuovo Titolo",
    userBg: "#ff0000"
});

widget.destroy(); // Rimuove il widget dalla pagina

Metodi Pubblici Preact

resources/js/shadowDomWidgetPreact.jsx

class TidikoAiWidgetPreact {
    // Aggiorna configurazione
    updateOptions(newOpts) {
        Object.assign(this.options, newOpts);
        this._renderWidget(); // Re-render with new options
    }

    // Distruggi widget
    destroy() {
        if (this.shadowRoot && this.shadowRoot.host) {
            this.shadowRoot.host.remove();
        }
    }

    // Metodi interni per la gestione del widget
    _createDefaultContainer() {
        const c = document.createElement("div");
        c.id = "tidiko-ai-widget";
        c.style.cssText = "position:fixed;bottom:0;right:0;z-index:999999;";
        document.body.appendChild(c);
        return c;
    }

    async _injectContent() {
        // Styles
        if (isDevelopment) {
            await this._loadDevStyles();
        } else {
            const s = document.createElement("style");
            s.textContent = CSS_STYLES;
            this.shadowRoot.appendChild(s);
        }
    }

    async _loadDevStyles() {
        try {
            const devUrl =
                import.meta.env.VITE_DEV_SERVER_URL || "http://localhost:5173";
            const link = document.createElement("link");
            link.rel = "stylesheet";
            link.href = `${devUrl}/resources/scss/agentWidget.scss`;
            this.shadowRoot.appendChild(link);
        } catch (e) {
            console.warn("Dev styles failed, using fallback", e);
            this._injectFallbackStyles();
        }
    }

    _injectFallbackStyles() {
        const style = document.createElement("style");
        style.textContent = `
            /* fallback CSS */
            .chat-wrapper { font-family: sans-serif; width:350px; height:500px; }
            .hidden{display:none!important;}
            /* ... */
        `;
        this.shadowRoot.appendChild(style);
    }

    _renderWidget() {
        // Create shadow DOM renderer and render the widget
        const renderer = createShadowRenderer(this.shadowRoot);
        renderer.render(
            <TidikoWidget
                options={this.options}
                payload={this.payload}
                collectionName={this.collectionName}
                companyName={this.companyName}
                companyDescription={this.companyDescription}
                baseFeedUrl={this.baseFeedUrl}
                hasDocuments={this.hasDocuments}
                language={this.language}
                jwt={this.jwt}
                jwtRefresh={this.jwtRefresh}
                appUrl={this.appUrl}
                websiteUrl={this.websiteUrl}
                assistantInstructions={this.assistantInstructions}
                type={this.type}
                fullHeight={this.fullHeight}
                socketUrl={this.socketUrl}
                widgetAssistantId={this.widgetAssistantId}
                linksTarget={this.linksTarget}
            />
        );
    }
}

// Auto-inizializzazione con data attributes (esempio integratore)
document.addEventListener("DOMContentLoaded", () => {
    const el = document.querySelector("[data-tidiko-ai-widget-preact]");
    if (el) {
        let params = {};
        try {
            params = JSON.parse(el.dataset.tidikoAiWidgetPreact || "{}");
        } catch {
            console.warn("Invalid data-tidiko-ai-widget-preact JSON; using defaults.");
        }
        const cid = el.dataset.containerId || null;
        new TidikoAiWidgetPreact(cid, params);
    }
});

Integrazione HTML

Esempio di integrazione

<!-- Integrazione automatica con data attributes -->
<div 
    data-tidiko-ai-widget-preact='{
        "platformSettings": {
            "chatTitle": "Il Mio Chatbot",
            "inputPlaceholder": "Come posso aiutarti?",
            "colorScheme": "dark",
            "userBg": "#ff6b35",
            "aiBg": "#f8f9fa"
        },
        "appUrl": "https://api.example.com",
        "widgetAssistantId": "assistant_123",
        "language": "Italian"
    }'
    data-container-id="my-widget-container">
</div>

<!-- Oppure integrazione manuale -->
<script src="https://example.com/widget/tidiko-widget-preact.js"></script>
<script>
    const widget = new TidikoAiWidgetPreact("my-container", {
        platformSettings: {
            chatTitle: "Il Mio Chatbot",
            inputPlaceholder: "Come posso aiutarti?",
            colorScheme: "dark",
            userBg: "#ff6b35",
            aiBg: "#f8f9fa",
            buttonColor: "#007bff",
            useCustomLogo: true,
            logoUrl: "https://example.com/logo.png",
            faqMessages: [
                "Quali sono i vostri orari?",
                "Come posso contattarvi?",
                "Offrite servizi di consegna?"
            ]
        },
        appUrl: "https://api.example.com",
        websiteUrl: "https://example.com",
        jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
        socketUrl: "wss://socket.example.com",
        type: "assistant",
        widgetAssistantId: "assistant_123",
        language: "Italian",
        hasDocuments: true,
        assistantInstructions: "Sei un assistente virtuale specializzato...",
        companyName: "La Mia Azienda",
        companyDescription: "Descrizione della mia azienda...",
        collectionName: "prodotti",
        baseFeedUrl: "https://api.example.com/feed",
        fullHeight: false,
        linksTarget: "_blank",
        payload: { userId: "123", sessionId: "abc" }
    });
</script>