§AIKit ·

UI-Komponentenbibliothek für KI-Chats, aufgebaut nach den Prinzipien des Atomic Design.

§Beschreibung

@gravity-ui/aikit ist eine flexible und erweiterbare React-Komponentenbibliothek zum Erstellen von KI-Chats jeder Komplexität. Die Bibliothek bietet eine Reihe von fertigen Komponenten, die entweder direkt verwendet oder an Ihre Bedürfnisse angepasst werden können.

§Hauptmerkmale

• 🎨 Atomic Design — klare Komponentenhierarchie von Atomen bis zu Seiten
• 🔧 SDK-unabhängig — unabhängig von spezifischen KI-SDKs
• 🎭 Zweistufiger Ansatz — fertige Komponenten + Hooks zur Anpassung
• 🎨 CSS-Variablen — einfaches Theming ohne Komponenten-Overrides
• 📦 TypeScript — volle Typsicherheit von Haus aus
• 🔌 Erweiterbar — System zur Registrierung benutzerdefinierter Nachrichtentypen

§Projektstruktur

src/
├── components/
│   ├── atoms/          # Grundlegende, unteilbare UI-Elemente
│   ├── molecules/      # Einfache Gruppierungen von Atomen
│   ├── organisms/      # Komplexe Komponenten mit Logik
│   ├── templates/      # Vollständige Layouts
│   └── pages/          # Vollständige Integrationen mit Daten
├── hooks/              # Allgemeine Hooks
├── types/              # TypeScript-Typen
├── utils/              # Hilfsfunktionen
└── themes/             # CSS-Themes und Variablen

§Installation

npm install @gravity-ui/aikit

§Erste Schritte

import { ChatContainer } from '@gravity-ui/aikit';
import type { ChatType, TChatMessage } from '@gravity-ui/aikit';

function App() {
    const [messages, setMessages] = useState<TChatMessage[]>([]);
    const [chats, setChats] = useState<ChatType[]>([]);
    const [activeChat, setActiveChat] = useState<ChatType | null>(null);

    return (
        <ChatContainer
            chats={chats}
            activeChat={activeChat}
            messages={messages}
            onSendMessage={async (data) => {
                // Ihre Sende-Logik
                console.log('Nachricht:', data.content);
            }}
            onSelectChat={setActiveChat}
            onCreateChat={() => {
                // Neuen Chat erstellen
            }}
            onDeleteChat={(chat) => {
                // Chat löschen
            }}
        />
    );
}

§Architektur

Die Bibliothek basiert auf den Prinzipien des Atomic Design:

§🔹 Atome

Grundlegende, unteilbare UI-Elemente ohne Geschäftslogik:

• ActionButton — Schaltfläche mit integriertem Tooltip
• Alert — Benachrichtigungsnachrichten mit Varianten
• ChatDate — Datumsformatierung mit relativen Daten
• ContextIndicator — Anzeige der Nutzung von Token-Kontext
• ContextItem — Kontext-Label mit Entfernen-Aktion
• DiffStat — Anzeige von Code-Änderungsstatistiken
• Disclaimer — Komponente für Haftungsausschlüsse
• InlineCitation — Textzitate
• Loader — Ladeanzeige
• MarkdownRenderer — Yandex Flavored Markdown Renderer
• MessageBalloon — Nachrichten-Wrapper
• Shimmer — Ladeanimations-Effekt
• SubmitButton — Senden-Schaltfläche mit Zuständen
• ToolIndicator — Anzeige des Status der Werkzeugausführung

§🔸 Moleküle

Einfache Kombinationen von Atomen:

• BaseMessage — Basis-Wrapper für alle Nachrichtentypen
• ButtonGroup — Schaltflächengruppe mit Ausrichtungsunterstützung
• InputContext — Kontextverwaltung
• PromptInputBody — Textbereich mit automatischer Größenanpassung
• PromptInputFooter — Fußzeile mit Aktionssymbolen und Senden-Schaltfläche
• PromptInputHeader — Kopfzeile mit Kontext-Elementen und Indikator
• PromptInputPanel — Panel-Container für benutzerdefinierten Inhalt
• Suggestions — klickbare Vorschlags-Schaltflächen
• Tabs — Navigations-Tabs mit Löschfunktion
• ToolFooter — Fußzeile für Werkzeugnachrichten mit Aktionen
• ToolHeader — Kopfzeile für Werkzeugnachrichten mit Symbol und Aktionen

§🔶 Organismen

Komplexe Komponenten mit interner Logik:

• AssistantMessage — Nachricht des KI-Assistenten
• Header — Chat-Kopfzeile
• MessageList — Nachrichtenliste
• PromptInput — Eingabefeld für Nachrichten
• ThinkingMessage — Denkprozess der KI
• ToolMessage — Ausführung von Werkzeugen
• UserMessage — Benutzernachricht

§📄 Vorlagen

Vollständige Layouts:

• ChatContent — Hauptinhalt des Chats
• EmptyContainer — Leerer Zustand
• History — Chat-Verlauf

§📱 Seiten

Vollständige Integrationen:

• ChatContainer — vollständig zusammengesetzter Chat

§Dokumentation

• Schnellstart-Anleitung
• Architektur
• Projektstruktur
• Testanleitung
• Playwright-Anleitung

§Tests

Das Projekt verwendet Playwright Component Testing für visuelle Regressionstests.

§Tests ausführen

Wichtig: Alle Tests müssen über Docker ausgeführt werden, um konsistente Screenshots in verschiedenen Umgebungen zu gewährleisten.

# Alle Komponententests in Docker ausführen (empfohlen)
npm run playwright:docker

# Screenshot-Baselines in Docker aktualisieren
npm run playwright:docker:update

# Spezifischen Test nach Grep-Muster in Docker ausführen
npm run playwright:docker -- --grep "@ComponentName"

# Docker-Cache bei Bedarf löschen
npm run playwright:docker:clear-cache

§Lokale Tests (nur Linux)

Wenn Sie unter Linux arbeiten, können Sie Tests lokal ausführen:

# Playwright-Browser installieren (einmal ausführen)
npm run playwright:install

# Alle Komponententests ausführen
npm run playwright

# Screenshot-Baselines aktualisieren
npm run playwright:update

Detaillierte Testdokumentation finden Sie in der Playwright-Anleitung.

§Entwicklung

Anweisungen zur Entwicklung und Mitarbeit finden Sie in CONTRIBUTING.md.

§Lizenz

MIT