.CARDS

Der CARDS-Manager ermöglicht es dir, den Chatverlauf mit verschiedenen Medieninhalten und interaktiven Elementen zu erweitern. Du kannst Bilder, Videos, iFrames, HTML, Buttons und Ladeanimationen direkt im Chat darstellen.

tip

Siehe .CHARTS, um herauszufinden, wie Diagramme im Chatverlauf angezeigt werden können.

.image(src, altText, cssClass)

Zeigt ein Bild direkt im Chatverlauf an.

Parameter	Typ	Standard	Beschreibung
src	string	—	URL des Bildes
altText	string	''	Alternativer Text für Barrierefreiheit
cssClass	string	''	Optionale CSS-Klasse für individuelle Gestaltung

Rückgabewert: Promise<void>

// Einfaches Bild
await RAGAI.CARDS.image('https://example.com/bild.png');

// Bild mit Alt-Text und CSS-Klasse
await RAGAI.CARDS.image('https://example.com/bild.png', 'Produktfoto', 'rounded-image');

.iframe(url, cssClass)

Bettet eine externe Website als iFrame direkt im Chatverlauf ein.

Parameter	Typ	Standard	Beschreibung
url	string	—	URL der einzubettenden Website
cssClass	string	''	Optionale CSS-Klasse für individuelle Gestaltung

Rückgabewert: Promise<void>

// Einfacher iFrame
await RAGAI.CARDS.iframe('https://example.com');

// iFrame mit CSS-Klasse
await RAGAI.CARDS.iframe('https://example.com/dashboard', 'full-width');

.vimeo(id, hash, cssClass)

Zeigt ein Vimeo-Video direkt im Chatverlauf an. Du benötigst die Video-ID und den Freigabe-Hash aus der Vimeo-URL.

Parameter	Typ	Standard	Beschreibung
id	string	—	Die Vimeo-Video-ID
hash	string	—	Der generierte Freigabe-Hash
cssClass	string	''	Optionale CSS-Klasse für individuelle Gestaltung

Rückgabewert: Promise<void>

await RAGAI.CARDS.vimeo('123456789', 'a1b2c3d4e5');

.youtube(id, cssClass)

Zeigt ein YouTube-Video direkt im Chatverlauf an.

Parameter	Typ	Standard	Beschreibung
id	string	—	Die YouTube-Video-ID (z. B. dQw4w9WgXcQ)
cssClass	string	''	Optionale CSS-Klasse für individuelle Gestaltung

Rückgabewert: Promise<void>

await RAGAI.CARDS.youtube('dQw4w9WgXcQ');

// Mit CSS-Klasse
await RAGAI.CARDS.youtube('dQw4w9WgXcQ', 'video-large');

.buttons(buttons, cssClass)

Zeigt eine Reihe von klickbaren Buttons direkt im Chatverlauf an. Buttons können als einfache Strings oder als Objekte mit erweiterten Optionen übergeben werden.

Parameter	Typ	Standard	Beschreibung
buttons	BUTTONCARDBUTTON[]	—	Array von Button-Definitionen
cssClass	string	''	Optionale CSS-Klasse für individuelle Gestaltung

BUTTONCARDBUTTON-Objekt:

Eigenschaft	Typ	Beschreibung
text	string	Der angezeigte Button-Text
value	string	Optionaler Wert, der beim Klick gesendet wird
cssClass	string	Optionale CSS-Klasse für den einzelnen Button

Rückgabewert: Promise<void>

// Einfache Text-Buttons
await RAGAI.CARDS.buttons([
  { text: 'Option A' },
  { text: 'Option B' },
  { text: 'Option C' }
]);

// Buttons mit Werten und CSS-Klassen
await RAGAI.CARDS.buttons([
  { text: 'Ja', value: 'yes', cssClass: 'btn-success' },
  { text: 'Nein', value: 'no', cssClass: 'btn-danger' }
]);

.stageListButtons()

Stellt alle konfigurierten Stages des Bots als klickbare Buttons im Chatverlauf dar. Beim Klick auf einen Button wird die entsprechende Stage aktiviert.

Rückgabewert: Promise<void>

await RAGAI.CARDS.stageListButtons();

.html(html, cssClass, id)

Rendert beliebigen HTML-Code direkt im Chatverlauf. Damit kannst du individuelle Inhalte darstellen, die über die Standardkarten hinausgehen.

Parameter	Typ	Standard	Beschreibung
html	string	—	Der HTML-Code, der gerendert werden soll
cssClass	string	''	Optionale CSS-Klasse für individuelle Gestaltung
id	string	''	Optionale ID für das HTML-Element

Rückgabewert: Promise<void>

// Einfaches HTML
await RAGAI.CARDS.html('<h2>Zusammenfassung</h2><p>Hier ist deine Zusammenfassung ...</p>');

// HTML mit CSS-Klasse und ID
await RAGAI.CARDS.html(
  '<div class="info-box"><p>Wichtige Information</p></div>',
  'highlight',
  'info-card-1'
);

.debugEvent(html, cssClass, id)

Fügt eine Debug-Karte im Chatverlauf ein. Diese Methode funktioniert wie .html(), ist aber speziell für Debug-Ausgaben gedacht.

Parameter	Typ	Standard	Beschreibung
html	string	—	Der HTML-Code für die Debug-Ausgabe
cssClass	string	''	Optionale CSS-Klasse
id	string	''	Optionale ID für das Element

Rückgabewert: Promise<void>

await RAGAI.CARDS.debugEvent('<pre>Debug: Variable x = 42</pre>');

.loading(text, icon, cssClass)

Zeigt eine temporäre Ladenachricht im Chatverlauf an. Nützlich, um dem Nutzer zu signalisieren, dass eine Verarbeitung stattfindet.

Parameter	Typ	Standard	Beschreibung
text	string	''	Optionaler Text neben der Ladeanimation
icon	string	''	Optionales Remix-Icon (z. B. ri-search-line)
cssClass	string	''	Optionale CSS-Klasse

// Einfache Ladeanimation
RAGAI.CARDS.loading();

// Mit Text
RAGAI.CARDS.loading('Daten werden analysiert ...');

// Mit Text und Icon
RAGAI.CARDS.loading('Suche läuft ...', 'ri-search-line');

.removeLoading()

Entfernt die aktuelle Ladenachricht aus dem Chatverlauf. Rufe diese Methode auf, wenn die Verarbeitung abgeschlossen ist.

RAGAI.CARDS.loading('Daten werden geladen ...');

// Nach Abschluss der Verarbeitung
RAGAI.CARDS.removeLoading();

.addBotCard(payload, triggerEvent)

Fügt eine benutzerdefinierte Bot-Karte zum Chatverlauf hinzu. Diese Low-Level-Methode erlaubt es dir, Karten mit beliebigem Typ und Daten zu erstellen.

Parameter	Typ	Standard	Beschreibung
payload	object	—	Objekt mit type (string) und data (beliebig)
triggerEvent	boolean	true	Ob ein Event ausgelöst werden soll

Rückgabewert: Promise<HistoryItemResponse>

await RAGAI.CARDS.addBotCard({
  type: 'custom',
  data: { title: 'Meine Karte', content: 'Inhalt der Karte' }
});

// Ohne Event auszulösen
await RAGAI.CARDS.addBotCard(
  { type: 'info', data: { message: 'Stille Benachrichtigung' } },
  false
);