💠 Preisliste Hub

Pricelist Hub ist das ästhetische und funktionale Kontrollzentrum des in das Pricelist-Ökosystem integrierten AI-Chatbots. Über dieses Panel kann der Administrator Folgendes anpassen:
• Farben, Texte und Nachrichten;
• Schaltflächen und Werkzeugleisten;
• visuelles Verhalten des Chatfensters und der Sprachmodi.

🧩 Abschnitte des Panels

1️⃣ Allgemein
Verwaltet die Größe und Positionierung des Chatbots.
• Breite Desktop / Höhe Desktop → Abmessungen des Chatbots in der Desktop-Version. Z.B. 600px – 400px
• Breite Tablet / Höhe Tablet → Abmessungen des Chatbots in der Tablet-Version. Z.B. 100% – 100%
• Position des Chatbots → Position des Chatbots auf der Seite.

2️⃣ Chatbot-Button
Verwaltet Größe, Farbe, Bild und Abrundung des Öffnungsbuttons des Chatbots.
• Breite / Höhe → Abmessungen des Buttons zum Öffnen des Chatbots. Z.B. 60px – 60px
• Hintergrundfarbe → Hintergrundfarbe des Buttons
• Bild-URL → URL des Bildes, das als Hintergrund des Buttons verwendet werden soll
• Randfarbe → Farbe des Randes des Buttons
• Randstärke → Stärke des Randes des Buttons
• Abrundung der Ecken → Abrundung, die auf den Rand des Buttons angewendet wird. Z.B. 10px

3️⃣ Header
Überprüfen Sie den oberen Teil des Chatbot-Fensters (Titelleiste und Schließen-Schaltfläche).
Konfigurierbare Felder:
• Header-Hintergrundfarbe → Hauptfarbe der oberen Leiste.
• Header-Textfarbe → Farbe des Titels.
• Header-Text → im Titel angezeigter Text (z.B. „Devcore AI“).
• Login-Hintergrundfarbe / Login-Textfarbe → Palette des Benutzer-Authentifizierungsbildschirms.
• Schließen-Schaltflächenfarbe → Farbe des „X“-Symbols.

4️⃣ Hub-Toolbar
Verwaltet die Schnellzugriffsschaltflächen in der oberen Leiste des Chatbots, Zugangshub zu den sekundären Modulen.
Konfigurierbare Schaltflächen:
• Toolbar-Hintergrund → Gesamtfarbe der Leiste.
• 📖 Pricelist-Schaltfläche → öffnet die Online-Preisliste.
• 📝 Prev-Schaltfläche → öffnet den Bereich Angebote.
• 👁️ Vision-Schaltfläche → aktiviert den Vision-Modus zur Bildgenerierung (Leonardo AI).
• 📦 DeepSpace-Schaltfläche → greift auf den parametrischen 3D-Konfigurator zu.
Jede Schaltfläche kann eine individuelle Farbe haben, um die Funktionen zu unterscheiden.

5️⃣ Chatfenster
Verwaltet die Nachrichten und Farben des Konversationsbereichs.
Konfigurierbare Felder:
• Willkommensnachricht → anfänglicher Text, der dem Benutzer angezeigt wird.
• AI-Antwort-Hintergrund → Hintergrundfarbe der Bot-Nachrichten.
• Benutzer-Nachricht-Hintergrund → Farbe der vom Benutzer gesendeten Nachrichten.
• AI-Textfarbe / Benutzer-Textfarbe → Farbe der Texte im Chat.

6️⃣ Footer-Eingabe
Konfigurieren Sie die untere Leiste für das Senden von Nachrichten.
Konfigurierbare Felder:
• Textfarbe Eingabe → Farbe des eingegebenen Textes.
• Hintergrundfarbe Eingabe → Farbe des Schreibfeldes.
• Senden-Button → Farbe des „Senden“-Buttons.
• Mikrofon-Button → Farbe des Buttons zur Aktivierung des Sprachmodus.

7️⃣ Sprachmodus (Overlay)
Steuern Sie das Erscheinungsbild des Sprachmodus während des Hörens und Antwortens.
Konfigurierbare Felder:
• Durchmesser Kreis → Größe des Sprachkreises (px).
• Farbe Kreis beim Hören / Antworten → animierte Farben während der Aufnahme und Antwort.
• Farbe transkribierter Text → Farbe des in Echtzeit angezeigten diktierten Textes.
• Farbe Anweisungen mobil → Farbe der Anleitungsmeldung.
• Text Anweisung mobil → personalisierte Nachricht (z.B. „Tippen Sie auf den Kreis, um zu sprechen“).