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어시스턴트 또는 활동 아이콘을 공통 콘텐츠 rail에 맞춰요.
TRChatUserBubblechild, semanticLabel사용자가 작성한 텍스트나 첨부 파일을 inline 끝에 배치해요.
TRChatStatusRowlabel, status, icon간결한 채팅 메타데이터나 실시간 진행 상태를 보여 줘요.

도구 디스클로저

Prop타입 / 기본값용도
icon, label, secondaryLabel, statusLabelIconData, String, String?, String간결한 작업명, 선택적인 구체 활동, 접근 가능한 상태 요약을 정의해요.
statusTRChatToolStatus · required실행 중, 성공, 실패, 거부 표현을 선택해요.
detailsWidget · required열려 있을 때만 위젯 트리에 추가할 기술 콘텐츠를 제공해요.
open, defaultOpen, onOpenChangebool?, bool, ValueChanged<bool>?열림 상태를 제어하거나 초기 상태만 지정해요.