Tinyrack

チャット

整列したメッセージとツールの開閉行を組み合わせ、進行中の作業をアクセシブルなシマーテキストで示します。

読みやすいチャット履歴を構成し、進行中の作業をアクセシブルなシマーテキストで示します。

主なプロパティ

プロパティ説明
発言者ユーザーが入力した内容には TRChatUserBubble、先頭側に配置するアシスタント内容には TRChatMessageRow を使います。
配置TRChatMessageAlignment.firstLine は、文字の拡大率が変わっても先頭アイコンを最初の行に揃えます。添付カードなどの複合サーフェスには center を使い、本文以外の文字には textVariant を指定してください。
詳細表示TRChatToolDisclosure は、読者が行を開くまで技術的な引数と結果を履歴から隠します。
状態TRChatToolStatus.running は表示中のアクティビティテキストにシマーを適用し、statusLabel は支援技術に引き続き提供します。視差効果を減らす設定ではテキストは動きません。
キーボードツールの開閉行は通常の Tab 順序に従い、Enter または Space で切り替わり、展開状態をセマンティクスで通知します。

インストール

パッケージを追加し、公開ライブラリをインポートしてください。

flutter pub add tinyrack_ui
import 'package:tinyrack_ui/tinyrack_ui.dart';

プレイグラウンド

使用方法

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

Column(
  children: [
    const TRChatUserBubble(child: Text('テストを実行してください。')),
    const TRChatMessageRow(
      icon: LucideIcons.bot,
      tone: TRChatMessageTone.primary,
      child: Text('変更内容を確認しています。'),
    ),
    TRChatToolDisclosure(
      icon: LucideIcons.terminal,
      label: 'コマンドを実行',
      secondaryLabel: 'flutter test --coverage',
      status: TRChatToolStatus.running,
      statusLabel: '実行中',
      details: const TRCodeBlock(code: r'$ flutter test'),
    ),
  ],
)

例

チャット履歴の構成 パーマリンク

発言者、アシスタントの整列、技術詳細の開閉、進行中の作業を示すシマーテキストを組み合わせ、閉じた行にはツールの詳細を表示しません。読み手が応答できる状態には、その操作を添えます。

API

メッセージプリミティブ

Prop型 / デフォルト用途
TRChatMessageRowicon, child, tone, semanticLabelアシスタントまたはアクティビティのアイコンを共通のコンテンツレールに揃えます。
TRChatUserBubblechild, semanticLabelユーザーが入力したテキストや添付ファイルをインライン末尾に配置します。
TRChatStatusRowlabel, status, iconコンパクトな履歴メタデータや進行中の状態を表示します。

ツールの開閉行

Prop型 / デフォルト用途
icon, label, secondaryLabel, statusLabelIconData, String, String?, Stringコンパクトな操作名、任意の具体的なアクティビティ、アクセシブルな状態の要約を指定します。
statusTRChatToolStatus · required実行中、成功、失敗、拒否の表示を選びます。
detailsWidget · required開いている間だけウィジェットツリーに追加する技術的な内容を指定します。
open, defaultOpen, onOpenChangebool?, bool, ValueChanged<bool>?開閉状態を制御するか、初期状態だけを指定します。