ChatMessageTiming

Feedback & Status

메시지 생성 소요·속도를 값만 그리는 계측 표시.

Usage

첫 토큰·전체 소요·속도·청크 수를 이미 계산해 가진 채 보여줄 때 사용한다.

import

import { ChatMessageTiming } from '@mildang/design-system/unofficial/Chat';

API Reference

ChatMessageTiming Props

Prop

Type

Default

totalMs

필수

number

지정 안 함

chunks

number

지정 안 함

firstTokenMs

number

지정 안 함

labels

Partial<ChatMessageTimingLabels>

지정 안 함

tokensPerSecond

number

지정 안 함

같은 패밀리

@mildang/design-system/unofficial/Chat 에서 같이 내보내는 컴포넌트다.

ChatAgentStatus

에이전트의 현재 작업 상태를 알리는 한 줄 표시.

ChatConfidenceMarker

답변 신뢰도를 등급으로 표시하는 마커.

ChatConnectionState

전송 연결 상태를 알리는 배너.

ChatContextDisplay

컨텍스트 사용량을 게이지로 보여주는 표시.

ChatJobProgress

가중치 기반 다단계 작업 진행률 표시.

ChatLoadingState

앱이 tick을 넘겨 구동하는 생성 대기 애니메이션.

ChatTypingIndicator

점 3개로 답변 작성 중임을 알리는 인디케이터.

MessageError

메시지 오류 상태를 알리는 배너.

TextShimmer

텍스트 위로 하이라이트가 흐르는 로딩 라벨.

예제

전체 계측값

코드

Open in Playground

import { ChatMessageTiming } from '@mildang/design-system/unofficial/Chat';
import type { ComponentProps } from 'react';
type Props = ComponentProps<typeof ChatMessageTiming>;
const DEFAULT_ARGS: Props = { firstTokenMs: 312, totalMs: 4820, tokensPerSecond: 42.7, chunks: 128 };
export default function MessageTimingFullExample(props: Partial<Props> = {}) { return <ChatMessageTiming {...DEFAULT_ARGS} {...props} />; }

전체 소요 시간만

코드

Open in Playground

import { ChatMessageTiming } from '@mildang/design-system/unofficial/Chat';
import type { ComponentProps } from 'react';
type Props = ComponentProps<typeof ChatMessageTiming>;
const DEFAULT_ARGS: Props = { totalMs: 940 };
export default function MessageTimingTotalOnlyExample(props: Partial<Props> = {}) { return <ChatMessageTiming {...DEFAULT_ARGS} {...props} />; }

1초 미만

코드

Open in Playground

import { ChatMessageTiming } from '@mildang/design-system/unofficial/Chat';
import type { ComponentProps } from 'react';
type Props = ComponentProps<typeof ChatMessageTiming>;
const DEFAULT_ARGS: Props = { firstTokenMs: 88, totalMs: 640, tokensPerSecond: 96.2 };
export default function MessageTimingSubSecondExample(props: Partial<Props> = {}) { return <ChatMessageTiming {...DEFAULT_ARGS} {...props} />; }

영문 레이블

코드

Open in Playground

import { ChatMessageTiming } from '@mildang/design-system/unofficial/Chat';
import type { ComponentProps } from 'react';
type Props = ComponentProps<typeof ChatMessageTiming>;
const DEFAULT_ARGS: Props = { firstTokenMs: 312, totalMs: 4820, tokensPerSecond: 42.7, chunks: 128, labels: { firstToken: 'First token', total: 'Total', speed: 'Speed', chunks: 'Chunks', duration: (ms: number) => (ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`), count: (chunks: number) => `${chunks}` } };
export default function MessageTimingEnglishLabelsExample(props: Partial<Props> = {}) { return <ChatMessageTiming {...DEFAULT_ARGS} {...props} />; }