AI Suite

Suite Groups

In the components sidebar the AI suite is split into four groups: Chat (Chat, ChatComposer, PromptBar, AttachmentTray, MessageActions, SuggestionChips, TypingIndicator, ConversationStream), Agents (Agents, AgentTrace, TaskRows, ToolCallCard, ToolChips, ToolConfirmation, ApprovalCard, WorkingIndicator), Reasoning (AiElements, ChainOfThought, ReasoningDisclosure, ThinkingOrb, StreamMarkdown, CodeStream, InlineCitation, Sources) and Context & Insight (ContextCards, ContextIndicator, InsightCards, RecommendationCard, FineTuneCard). Every component in the suite can be imported through the @talex-touch/tuffex/ai category entry.

Preview

Every cell is a live, interactive component; click the name in the top-left corner to open its documentation.

Groups at a Glance

Every component in the suite, grouped by category. The list is read from each doc's category frontmatter, so new components appear on their own.

Source & License

This suite is adapted from Beautiful UI (Turbo design studio / Shane Levine, © 2026, MIT license) — 19 component showcases for AI-native interfaces: chat, reasoning traces, human-in-the-loop approvals, agent task status and more. The port follows three principles: pixel-match the source visual language (a dedicated --tx-bui-* token layer, hairline ring shadows, the 13px density system); ship components as pure controlled primitives (demo timelines stay in the demo layer); and fuse with existing tuffex components instead of duplicating them — overlaps land as variants or compositions, and accessibility gaps are filled to tuffex standards. Every component source file carries the MIT attribution in its header.

Loading & Reasoning States

01 · WorkingIndicator

Pixel-grid loader + shimmer label + live elapsed timer for long-running work. See the WorkingIndicator doc.

02 · AgentTrace

Expandable thinking / search / coding traces; the header swaps between shimmer and settled states. See the AgentTrace doc.

06 · TaskRows

Agent task status list: ring-numbered badges, status pills, collapsible details, capsule/list containers. See the TaskRows doc.

17 · CodeStream

Agent-written code revealed line by line, with a filename header, shiki highlighting and copy. See the CodeStream doc.

Streaming & Chat

03 · Streaming Text

A composition: TxStreamMarkdown word reveal + TxInlineCitation inline references + TxSources stacked favicons + TxSuggestionChips vertical follow-ups. See the InlineCitation doc.

07 · Chat

A composition (no new component): TxTabs + TxConversationStream + TxChainOfThought + TxChatComposer recreate the upstream chat panel.

08 · PromptBar

@ sources, / commands, model picker, dictation state, rounded/pill shapes; the ink-colored send key (not brand blue) is this design language's signature. See the PromptBar doc.

Approvals & Agent Actions

04 · ApprovalCard

Human-in-the-loop multi-question walkthrough: options + custom answer + pager dots. See the ApprovalCard doc.

05 · ToolChips

Tool calls and code edits as a compact expandable chip flow with a summary row. See the ToolChips doc.

09 · RecommendationCard

Agent suggestion with a three-bar confidence meter (TxSignalMeter) and alternatives. See the RecommendationCard doc.

19 · SelectionActions

Select a passage and a floating toolbar hands it to the agent for rewriting; built on TxBaseAnchor virtual references. See the SelectionActions doc.

Data Tables

11 · DiffTable

AI-proposed edits sweeping through a table: rows tint red, an added row expands; controllable via play/reset/settle. See the DiffTable doc.

12 · Records

A composition (no new component): the extended TxDataTable (sticky header / summary footer / selection highlight / tri-state select-all) + TxTag dot tags + TxDotIndicator + TxCellLink. See the DataTable doc.

13 · FilterTable

TxFilterChips status chips + TxDataTable composition; counts derive from the data. See the FilterChips doc.

Retrieval & Navigation

10 · ContextCards

RAG retrieval chunks: body text, character counts, source file rows; a single TxContextChunk works standalone. See the ContextCards doc.

14 · SidebarNav

Workspace navigation: group labels, badges, quick search with a / focus shortcut (inert decoration upstream, wired up in the port). See the SidebarNav doc.

15 · SearchPanel

Command search with live filtering and an empty state; keyboard navigation added to tuffex standards (upstream has none). See the SearchPanel doc.

Insights & Tuning

16 · InsightCards

Paged insights + a self-built canvas polyline (TxSparkChart + TxChartScrubber) + a share bar (TxAllocationBar) + metric rows (TxInsightMetric). See the InsightCards doc.

18 · FineTuneCard

The agent adjusts design properties in an inspector: layout segment (reusing TxFlatRadio) + draggable TxScrubField values + a type select. See the FineTuneCard doc.

Component Index

Shared primitive: TxIconChip (icon badge shared by 10/14/16/18).

Review Notes

• Upstream ships self-driving demos (hardcoded content + timer timelines); the ported components are fully controlled, and the timelines live only in this page's demos.
• Reduced motion is implemented per component: tweens are cut, state machines keep running, and delays are zeroed together (a deliberate divergence from upstream's single global * rule).
• Under the high-contrast theme (data-tx-contrast='high') the --tx-bui-* tokens keep their standard values — a known limitation.
• The upstream screenshots for 16's chart area render "No data to display"; the chart is built to spec with no upstream visual baseline.
• Every component source file header carries the MIT attribution: Adapted from Beautiful UI, © 2026 Shane Levine, MIT.