Widget Preact e Shadow DOM
Il sistema di widget di Tidiko AI è stato completamente riscritto utilizzando Preact per fornire un'integrazione moderna, performante e completamente isolata in qualsiasi sito web. Il widget utilizza Shadow DOM per garantire l'isolamento completo dagli stili e dal JavaScript della pagina host.
Widget attuale
Il widget in produzione è Preact (shadowDomWidgetPreact.jsx, classe TidikoAiWidgetPreact). I blocchi che citano shadowDomWidget.js o TidikoAiWidget descrivono configurazioni di build storiche.
Aggiornamenti 2026
| Feature | Dettaglio |
|---|---|
| Streamdown | Rendering markdown assistant via AssistantMarkdownContent.jsx con componenti Tidiko custom |
| Modulo contatto | Overlay in-chat con eventi Socket contact_form_* (HITL) |
| Reconnect socket | Toast disconnessione/riconnessione, timeout caricamento history con retry |
| Embed iframe | Modalità iframe per WordPress con personalizzazione icona e CSP |
| History preview | Anteprima cronologia con markdown, FAQ e product cards |
Vedi: Modulo di Contatto · Plugin WordPress.
Sezioni
| Pagina | Contenuto |
|---|---|
| Architettura | Shadow DOM, Preact renderer, gerarchia componenti |
| Componenti | Icone, ProductCard, Message, FAQ |
| Stili e temi | CSS variables, temi predefiniti |
| Eventi e Socket | Hooks, WebSocket, contact form events |
| Messaggi e FAQ | Invio, rendering, domande frequenti |
| Configurazione e API | Opzioni, metodi pubblici, integrazione HTML |
| Build e deploy | NPM scripts, Vite, output bundle |
| Responsive e sicurezza | Breakpoints, JWT, GDPR |
| Funzionalità avanzate | Utility, product cards, contrasto colori |