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, from @krizaka/orazaka-design-system. The Orazaka mobile app takes the kit's tokens, not its components. Stable: its API only changes in a major version.
Why it exists above 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.
When to use
- 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.
When not to use
- For a real conversation: this is a scripted mockup, not a chat.
- For a short status of the engine (online, model).Use instead: Badge
Installation
Install
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).
Import
import { ChatShowcase } from "@krizaka/orazaka-design-system";Examples
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 | Default | Description |
|---|---|---|---|
answerrequired | string | — | The assistant's scripted answer (typed out char-by-char). |
labelsrequired | 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. |
pipelinerequired | string[] | — | Interceptor pipeline steps rendered as chips once the answer lands. |
questionrequired | string | — | The user's scripted question. |
className | string | — | Extra classes on the wrapper (width, placement), merged last. |
Accessibility
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.
Best practices
- 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.
Related components
Generated from the code of @krizaka/orazaka-design-system 2.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub