Chat · Tinyrack Design System

Compose readable chat transcripts and show work in progress with accessible shimmer text.

Contract

Axis	Contract
Authorship	Use `TRChatUserBubble` for user-authored content and `TRChatMessageRow` for start-aligned assistant content.
Alignment	`TRChatMessageAlignment.firstLine` keeps the leading icon on the first line at every text scale. Use `center` when the child is a compound surface such as an attachment card, and set `textVariant` when prose does not use the body role.
Disclosure	`TRChatToolDisclosure` keeps technical arguments and results out of the transcript until the reader opens the row.
State	`TRChatToolStatus.running` shimmers the visible activity text and keeps `statusLabel` available to assistive technology. Reduced-motion settings leave the text static.
Keyboard	Tool disclosures follow normal Tab order and toggle with Enter or Space while exposing expanded semantics.

Install

Add the package, then import its public library.

flutter pub add tinyrack_ui

import 'package:tinyrack_ui/tinyrack_ui.dart';

Playground

Loading the Flutter preview

Usage

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

Column(
  children: [
    const TRChatUserBubble(child: Text('Run the tests.')),
    const TRChatMessageRow(
      icon: LucideIcons.bot,
      tone: TRChatMessageTone.primary,
      child: Text('I am checking the changes.'),
    ),
    TRChatToolDisclosure(
      icon: LucideIcons.terminal,
      label: 'Run command',
      secondaryLabel: 'flutter test --coverage',
      status: TRChatToolStatus.running,
      statusLabel: 'Running',
      details: const TRCodeBlock(code: r'$ flutter test'),
    ),
  ],
)

Examples

Transcript composition permalink

Combine authorship, assistant alignment, technical disclosure, and shimmer text for live work without exposing tool detail in the collapsed row. A status the reader can answer carries its own action.

Loading the Flutter preview

API

Message primitives

Prop	Type / default	Purpose
`TRChatMessageRow`	`icon, child, tone, semanticLabel`	Aligns an assistant or activity icon with a shared content rail.
`TRChatUserBubble`	`child, semanticLabel`	Places user-authored text or attachments at the inline end.
`TRChatStatusRow`	`label, status, icon`	Shows compact transcript metadata or live progress.

Tool disclosure

Prop	Type / default	Purpose
`icon, label, secondaryLabel, statusLabel`	`IconData, String, String?, String`	Define the compact action, optional concrete activity, and accessible state summary.
`status`	`TRChatToolStatus · required`	Selects running, succeeded, failed, or denied presentation.
`details`	`Widget · required`	Provides technical content mounted only while open.
`open, defaultOpen, onOpenChange`	`bool?, bool, ValueChanged<bool>?`	Control the disclosure or let it own its initial state.