ChatContextDisplay

Feedback & Status

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

Usage

모델 컨텍스트 창 대비 사용량을 툴바·컴포저 옆에 한 줄 게이지로 계속 보여줄 때 사용한다.

import

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

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

• 외부 패키지를 따로 설치한다. DS 의 전이 의존성에 기대지 않는다.

API Reference

ChatContextDisplay Props

Prop

Type

Default

modelContextWindow

필수

number

지정 안 함

labels

Partial<ChatContextDisplayLabels>

지정 안 함

side

"bottom" | "left" | "right" | "top"

top

usage

ChatTokenUsage

지정 안 함

variant

"text" | "bar"

bar

같은 패밀리

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

ChatAgentStatus

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

ChatConfidenceMarker

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

ChatConnectionState

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

ChatJobProgress

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

ChatLoadingState

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

ChatMessageTiming

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

ChatTypingIndicator

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

MessageError

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

TextShimmer

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

예제

기본

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ChatContextDisplay } from '@mildang/design-system/unofficial/Chat';
type Props = ComponentProps<typeof ChatContextDisplay>;
const DEFAULT_ARGS: Props = { modelContextWindow: 200000, usage: { totalTokens: 48200, inputTokens: 31000, cachedInputTokens: 12400, outputTokens: 4100, reasoningTokens: 700 } };
export default function ContextDisplayDefaultExample(props: Partial<Props> = {}) { return <ChatContextDisplay {...DEFAULT_ARGS} {...props} />; }

두 가지 표시 형태

같은 값을 막대로도, 숫자로도 보여주는 예시다.

코드

Open in Playground

import { ChatContextDisplay } from '@mildang/design-system/unofficial/Chat';
import { css } from '@mildang/styled-system/css';

const WINDOW = 200_000;

const row = css({ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '16' });

const ContextDisplayVariantsExample = () => (
    <div className={row}>
      <ChatContextDisplay
        modelContextWindow={WINDOW}
        usage={{ totalTokens: 48_200, inputTokens: 44_100, outputTokens: 4_100 }}
      />
      <ChatContextDisplay
        variant="text"
        modelContextWindow={WINDOW}
        usage={{ totalTokens: 48_200, inputTokens: 44_100, outputTokens: 4_100 }}
      />
    </div>
  );

export default ContextDisplayVariantsExample;

사용률 3단계

65% 이상은 주의, 85% 초과는 경고 색으로 갈리는 예시다.

코드

Open in Playground

import { ChatContextDisplay } from '@mildang/design-system/unofficial/Chat';
import { css } from '@mildang/styled-system/css';

const WINDOW = 200_000;

const row = css({ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '16' });

const ContextDisplaySeverityExample = () => (
    <div className={row}>
      <ChatContextDisplay modelContextWindow={WINDOW} usage={{ totalTokens: 40_000 }} />
      <ChatContextDisplay modelContextWindow={WINDOW} usage={{ totalTokens: 150_000 }} />
      <ChatContextDisplay modelContextWindow={WINDOW} usage={{ totalTokens: 190_000 }} />
    </div>
  );

export default ContextDisplaySeverityExample;

경계값

값이 없거나 창을 넘긴 경우에도 0~100% 범위로 갇히는 예시다.

코드

Open in Playground

import { ChatContextDisplay } from '@mildang/design-system/unofficial/Chat';
import { css } from '@mildang/styled-system/css';

const WINDOW = 200_000;

const row = css({ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '16' });

const ContextDisplayEdgesExample = () => (
    <div className={row}>
      <ChatContextDisplay modelContextWindow={WINDOW} />
      <ChatContextDisplay modelContextWindow={WINDOW} usage={{ totalTokens: 900_000 }} />
      <ChatContextDisplay variant="text" modelContextWindow={1_200_000} usage={{ totalTokens: 1_000 }} />
    </div>
  );

export default ContextDisplayEdgesExample;

배선 코드

실행형이 아니라 앱이 사용량을 읽어 넘기는 방식을 보여주는 코드 예시다.

코드

import { css } from '@mildang/styled-system/css';

const REGISTRATION = `// 앱 소유 — DS 는 런타임을 모른다(AD-1).
// AI SDK 라면 data part 없이 훅 하나로 끝난다.
import { useThreadTokenUsage } from '@assistant-ui/ai-sdk';
import { ChatContextDisplay } from '@mildang/design-system/unofficial/Chat';

function ContextMeter() {
  const usage = useThreadTokenUsage();

  return <ChatContextDisplay modelContextWindow={200_000} usage={usage} />;
}

// 백엔드가 직접 흘려보낸다면 data part 경로(AD-3).
import { makeAssistantDataUI } from '@assistant-ui/react';
import type { ContextDisplayData } from '@mildang/design-system/unofficial/Chat';

export const ContextUI = makeAssistantDataUI<ContextDisplayData>({
  type: 'context',
  render: ({ data }) => <ChatContextDisplay {...data} />,
});

// 서버 페이로드 예시 — 전부 JSON 직렬화 가능한 값이다.
// {
//   "modelContextWindow": 200000,
//   "usage": { "totalTokens": 48200, "inputTokens": 31000,
//              "cachedInputTokens": 12400, "outputTokens": 4100, "reasoningTokens": 700 }
// }`;

const ContextDisplayWiringExample = () => (
    <pre
      // 가로 스크롤 영역은 키보드로도 닿아야 한다(axe `scrollable-region-focusable`).
      tabIndex={0}
      className={css({
        margin: '0',
        overflowX: 'auto',
        borderRadius: 'lg',
        backgroundColor: 'neutral.ghostBg.base',
        padding: '16',
        textStyle: 'chat-small-text-R',
        fontFamily: 'monospace',
        color: 'neutral.text.base',
      })}
    >
      {REGISTRATION}
    </pre>
  );

export default ContextDisplayWiringExample;