.DOM
Der DOMManagerService gibt dir Zugriff auf die DOM-Elemente des Bot-Containers. Du kannst einzelne Bereiche (Header, Content, Footer) ansprechen, ein-/ausblenden, CSS-Variablen setzen und externe Ressourcen nachladen.
body()
Gibt das HTML-Element des gesamten Bot-Containers zurück.
Signatur: body(): HTMLElement | null
const container = RAGAI.DOM.body();
console.log(container);
header()
Gibt das HTML-Element des Bot-Headers zurück.
Signatur: header(): HTMLElement | null
const header = RAGAI.DOM.header();
header.style.backgroundColor = '#333';
content()
Gibt das HTML-Element des Bot-Content-Bereichs zurück (dort, wo die Nachrichten angezeigt werden).
Signatur: content(): HTMLElement | null
const content = RAGAI.DOM.content();
content.scrollTop = content.scrollHeight;
footer()
Gibt das HTML-Element des Bot-Footers zurück (Eingabebereich).
Signatur: footer(): HTMLElement | null
const footer = RAGAI.DOM.footer();
console.log('Footer sichtbar:', footer !== null);
hideFooter() / showFooter()
Blendet den Footer-Bereich aus bzw. wieder ein.
Signatur: hideFooter(): void / showFooter(): void
// Footer ausblenden (z. B. während einer Animation)
RAGAI.DOM.hideFooter();
// Footer wieder einblenden
RAGAI.DOM.showFooter();
hideHeader() / showHeader()
Blendet den Header-Bereich aus bzw. wieder ein.
Signatur: hideHeader(): void / showHeader(): void
// Header ausblenden für Vollbild-Modus
RAGAI.DOM.hideHeader();
// Header wieder einblenden
RAGAI.DOM.showHeader();
createElementFromHTML(html)
Erstellt ein HTML-Element aus einem HTML-String. Der übergebene String wird als Inhalt eines <div>-Elements geparst und das resultierende Element zurückgegeben.
Signatur: createElementFromHTML(html: string): HTMLElement
const element = RAGAI.DOM.createElementFromHTML('<p>Hallo Welt!</p>');
RAGAI.DOM.content().appendChild(element);
// Komplexeres Beispiel
const karte = RAGAI.DOM.createElementFromHTML(`
<div class="info-karte">
<h3>Hinweis</h3>
<p>Diese Nachricht wurde dynamisch erzeugt.</p>
</div>
`);
RAGAI.DOM.content().appendChild(karte);
styleVar(key, value)
Setzt eine CSS Custom Property (CSS-Variable) auf dem Bot-Container. Damit kannst du das Erscheinungsbild des Bots dynamisch anpassen.
Signatur: styleVar(key: string, value: string): void
// Primärfarbe ändern
RAGAI.DOM.styleVar('--primary-color', '#ff6600');
// Schriftgröße anpassen
RAGAI.DOM.styleVar('--font-size', '16px');
loadExternalJS(url)
Lädt ein externes JavaScript dynamisch nach. Die Funktion gibt ein Promise zurück, das aufgelöst wird, sobald das Skript geladen ist.
Signatur: loadExternalJS(url: string): Promise<void>
await RAGAI.DOM.loadExternalJS('https://cdn.example.com/bibliothek.min.js');
console.log('Externes JS geladen');
loadExternalCSS(url)
Lädt ein externes CSS-Stylesheet dynamisch nach. Die Funktion gibt ein Promise zurück, das aufgelöst wird, sobald das Stylesheet geladen ist.
Signatur: loadExternalCSS(url: string): Promise<void>
await RAGAI.DOM.loadExternalCSS('https://cdn.example.com/styles.min.css');
console.log('Externes CSS geladen');
setBodyColor(color)
Setzt die Hintergrundfarbe des Bot-Containers (#bot-container).
Signatur: setBodyColor(color: string): void
RAGAI.DOM.setBodyColor('#f5f5f5');
// Auch CSS-Farbwerte sind möglich
RAGAI.DOM.setBodyColor('rgba(0, 0, 0, 0.8)');
Vollständiges Beispiel
await RAGAI.WAITFOR.initialIdle();
// Header ausblenden für ein immersives Erlebnis
RAGAI.DOM.hideHeader();
// Hintergrundfarbe setzen
RAGAI.DOM.setBodyColor('#1a1a2e');
// CSS-Variable anpassen
RAGAI.DOM.styleVar('--text-color', '#ffffff');
// Externes CSS und JS laden
await RAGAI.DOM.loadExternalCSS('https://cdn.example.com/theme.css');
await RAGAI.DOM.loadExternalJS('https://cdn.example.com/animation.js');
// Dynamisches HTML-Element einfügen
const banner = RAGAI.DOM.createElementFromHTML(`
<div style="padding: 12px; background: #e94560; color: white; text-align: center;">
Willkommen beim interaktiven Quiz!
</div>
`);
RAGAI.DOM.content().prepend(banner);