Chat showcase
A self-playing sovereign AI chat: a question, the answer typed out, the interceptor pipeline it went through, and the promise that nothing left the premises.
Web — React, depuis @krizaka/orazaka-design-system. L'app mobile Orazaka prend les tokens du kit, pas ses composants. Stable : son API ne change qu’à une version majeure.
Pourquoi il existe au-dessus de Krizaka UI
Orazaka sells one idea — your AI answers on your own machines, through a deterministic pipeline, with zero data egress. A chat bubble from @krizaka/ui cannot tell that story; this composite stages it the same way on the website, the client app and the console: the persona asks, the engine answers locally, the pipeline chips land, the privacy line closes.
Quand l’utiliser
- On a home or a product page, to show what Orazaka does in one glance.
- In an empty state of the chat (first visit), as a demonstration before the first question.
Quand ne pas l’utiliser
- For a real conversation: this is a scripted mockup, not a chat.
- For a short status of the engine (online, model).À la place : Badge
Installation
Installer
npm install @krizaka/orazaka-design-system && npm install -D tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/orazaka-design-system/theme.css";The package ships its TypeScript sources: add it to transpilePackages (with @krizaka/orazaka-shared and @krizaka/ui).
Importer
import { ChatShowcase } from "@krizaka/orazaka-design-system";Exemples
A sovereign answer
Eric asks about a contract; the answer is computed on premises and the pipeline shows the steps.
In the reader's language
The same mockup with the words of another locale — every word is a prop.
Props
Renders the animated sovereign-chat card.
| Prop | Type | Défaut | Description |
|---|---|---|---|
answerrequis | string | — | The assistant's scripted answer (typed out char-by-char). |
labelsrequis | ChatShowcaseLabels | — | The chrome's words, translated: the agent's name, its status, the model, the "answered locally" tag, the privacy line, the composer's placeholder. |
pipelinerequis | string[] | — | Interceptor pipeline steps rendered as chips once the answer lands. |
questionrequis | string | — | The user's scripted question. |
className | string | — | Extra classes on the wrapper (width, placement), merged last. |
Accessibilité
role="img"with the question and the answer as its name: a screen reader hears the exchange once, not the typing.- Under
prefers-reduced-motionthe final state shows at once: no typing, no pulse, no caret. - The fake composer is
aria-hidden: it is not a field.
Bonnes pratiques
- Speak as a named persona with a real need ("Eric, finance lead"), never an admin or a test account.
- The pipeline names steps the reader understands (
PII masked,Routed locally), not class names. - Every word is a prop (
labels,question,answer,pipeline): the app translates them. - One per page: it moves, and two moving mockups compete.
Composants liés
Généré depuis le code de @krizaka/orazaka-design-system 2.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub