Chat-UI-Komponenten
Die Bausteine einer Chat- oder KI-Assistenten-Oberfläche: Nachrichten mit Avataren und Aktionen, Chat-Bubbles mit gruppierten Ecken und Reaktionen, ein Scroller, der neuen Nachrichten folgt, aber deine Position hält, während du zurückliest, Datei- und Bildanhänge sowie Datums- und Ereignismarker.
Sie sind die kostenlose Grundlage der KI-Blöcke von HextaUI Pro, die den Composer, Streaming, Tool-Aufrufe und den Rest der Unterhaltung ergänzen.
- AttachmentDatei- und Bildkarten für Uploads, mit Fortschritt, Zuständen, Aktionen, einem Trigger über die ganze Karte und Namen, die ihre Dateiendung behalten.
- BubbleChat-Nachrichten-Bubbles mit Varianten, gruppierten Ecken, Reaktionen und Platz für interaktive Inhalte.
- MarkerLeise Hinweise zwischen Inhalten, etwa Datumstrenner und Systemereignisse, mit Sticky-Datums- und Zeitangaben, die als Heute oder Gestern gelesen werden.
- MessageEine Chat-Nachrichtenzeile mit Avatar, Name, Bubbles und Status, in der neue Nachrichten von der Seite des Absenders hereinsteigen.
- Message scrollerEin Chat-Scrollbereich, der neuen Nachrichten folgt, beim Zurücklesen deine Position hält und auf dem Sprung-Button zählt, was du verpasst hast.
In Pro-Blöcken verbaut
Blöcke für KI-Produkte, die aus diesen Komponenten gebaut sind.
- Chat ThreadDie Konversationsansicht eines KI-Chats. Deckt Antworten, die streamen, bearbeitet und wiederholt werden, sowie Versionen einer Antwort zum Umschalten ab.
- Prompt InputEin Chat-Eingabefeld, das beim Tippen wächst. Deckt Datei-Uploads, @- und /-Menüs am Cursor und Nachrichten ab, die während einer streamenden Antwort getippt werden.
- Agent TodosDer Plan, den ein Agent während der Arbeit führt, eine Zeile pro Schritt. Deckt laufende Schritte, fehlgeschlagene Schritte und Planänderungen mitten im Lauf ab.
- Chat SidebarDie Seitenleiste einer Chat-App mit angehefteten Chats, Projekten und Verlauf. Deckt Umbenennen vor Ort, Löschen mit Rückgängig und noch antwortende Chats ab.
- Code BlockCodeblöcke für KI-Antworten. Die Hervorhebung hält mit dem Streaming Schritt, Diffs lassen sich annehmen oder ablehnen und Befehle laufen in einem Terminal.
- Diff ReviewEine Prüfung der Dateiänderungen eines Agenten, bevor sie landen. Deckt Annehmen oder Ablehnen pro Änderung, Kommentare zurück an den Agenten und noch streamende Änderungen ab.