💠 Pricelist Hub

Pricelist Hub è il centro di controllo estetico e funzionale del chatbot AI integrato nell’ecosistema Pricelist.
Attraverso questo pannello, l’amministratore può personalizzare:
• colori, testi e messaggi;
• pulsanti e toolbar;
• comportamento visivo della finestra di chat e delle modalità vocali.

🧩 Sezioni del pannello

1️⃣ Generale
Gestisce dimensioni e posizionamento del chatbot.
• Larghezza desktop / Altezza desktop → dimensioni del chatbot nella versione desktop. Es. 600px – 400px
• Larghezza tablet / Altezza tablet → dimensioni del chatbot nella versione tablet. Es. 100% – 100%
• Posizione chatbot → posizione del chatbot nella pagina.

2️⃣ Bottone Chatbot
Gestisce dimensioni, colore, immagine e arrotondamento del pulsante di apertura del chatbot.
• Larghezza / Altezza → dimensioni del pulsante per aprire il chatbot. Es. 60px – 60px
• Colore sfondo → colore di sfondo del pulsante
• URL Immagine → url dell’immagine da utilizzare come sfondo del pulsante
• Colore del bordo → colore del bordo del pulsante
• Spessore del bordo → spessore del bordo del pulsante
• Arrotondamento angoli → arrotondamento da applicare al bordo del pulsante. Es. 10px

3️⃣ Header
Controlla la parte superiore della finestra del chatbot (barra del titolo e pulsante di chiusura).
Campi configurabili:
• Colore sfondo header → colore principale della barra superiore.
• Colore testo header → colore del titolo.
• Testo header → testo visualizzato nel titolo (es. “Devcore AI”).
• Colore sfondo login / testo login → palette della schermata di autenticazione utente.
• Colore bottone chiusura → colore dell’icona “X”.

4️⃣ Hub Toolbar
Gestisce i pulsanti rapidi nella barra superiore del chatbot, hub di accesso ai moduli secondari.
Pulsanti configurabili:
• Sfondo toolbar → colore di sfondo complessivo della barra.
• 📖 Pulsante Pricelist → apre il listino online.
• 📝 Pulsante Prev → apre la sezione Preventivi.
• 👁️ Pulsante Vision → attiva la modalità Vision per la generazione immagini (Leonardo AI).
• 📦 Pulsante DeepSpace → accede al configuratore 3D parametrico.
Ogni pulsante può avere colore personalizzato per distinguere le funzioni.

5️⃣ Chat Window
Gestisce i messaggi e i colori dell’area di conversazione.
Campi configurabili:
• Messaggio di benvenuto → testo iniziale mostrato all’utente.
• Sfondo risposta AI → colore di background dei messaggi del bot.
• Sfondo messaggio utente → colore dei messaggi inviati dall’utente.
• Colore testo AI / Colore testo utente → colore dei testi in chat.

6️⃣ Footer Input
Configura la barra inferiore per l’invio dei messaggi.
Campi configurabili:
• Colore testo input → colore del testo digitato.
• Colore sfondo input → colore del campo di scrittura.
• Bottone invio → colore del pulsante “Invia”.
• Bottone microfono → colore del pulsante di attivazione della modalità vocale.

7️⃣ Modalità Voce (Overlay)
Controlla l’aspetto della modalità vocale durante ascolto e risposta.
Campi configurabili:
• Diametro cerchio → dimensione del cerchio vocale (px).
• Colore cerchio in ascolto / in risposta → colori animati durante registrazione e risposta.
• Colore testo trascritto → colore del testo dettato visualizzato in tempo reale.
• Colore istruzioni mobile → colore del messaggio guida.
• Testo istruzione mobile → messaggio personalizzato (es. “Tocca il cerchio per parlare”).