SystemMessage

Data Display

대화 흐름 중간에 넣는 저채도 시스템 안내.

Usage

메시지 사이에 구분·이벤트 같은 시스템 안내를 넣을 때 사용한다.

import

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

SystemMessage 하나만 가져오면 SystemMessage.Content · SystemMessage.Parts 를 그 아래에서 쓸 수 있다.

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

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

Anatomy

tsx

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

export default function Example() {
  return (
    <SystemMessage.Content>
      <SystemMessage.Parts />
    </SystemMessage.Content>
  );
}

부품

필수 여부

반복

위치

SystemMessage.Content

필수

SystemMessage 안에 둔다.

SystemMessage.Parts

선택

SystemMessage.Content 안에 둔다(런타임 연결 시에만 필요).

Thread.Messages 의 SystemMessage 슬롯에 연결할 때는 Content 안에 Parts 를 둔다.
직접 배치할 때는 Content 의 children 에 텍스트를 넣고 Parts 는 생략한다.

API Reference

SystemMessage Props

Prop

Type

Default

appearance

"pill" | "plain"

pill

SystemMessage.Content

appearance variant 를 입는 pill·텍스트 슬롯이다.

공개 Props 없음

SystemMessage.Parts

system-role 메시지 텍스트를 렌더한다.

Prop

Type

Default

children

(value: { part: EnrichedPartState; }) => ReactNode

지정 안 함

components

({ Empty?: EmptyMessagePartComponent | undefined; Text?: TextMessagePartComponent | undefined; Source?: SourceMessagePartComponent | undefined; Image?: ImageMessagePartComponent | undefined; File?: FileMessagePartComponent | undefined; Unstable_Audio?: Unstable_AudioMessagePartComponent | undefined; data?: { by_name?: Record<string, DataMessagePartComponent | undefined> | undefined; Fallback?: DataMessagePartComponent | undefined; } | undefined; Quote?: QuoteMessagePartComponent | undefined; generativeUI?: { components: GenerativeUIComponentRegistry; Fallback?: ComponentType<{ component: string; props?: unknown; }> | undefined; } | undefined; } & { Reasoning?: ReasoningMessagePartComponent | undefined; tools?: ({ by_name?: Record<string, ToolCallMessagePartComponent | undefined> | undefined; Fallback?: ComponentType<ToolCallMessagePartProps> | undefined; } | { Override: ComponentType<ToolCallMessagePartProps>; }) | undefined; ToolGroup?: ComponentType<PropsWithChildren<{ startIndex: number; endIndex: number; }>>; ReasoningGroup?: ReasoningGroupComponent; ChainOfThought?: never; }) | ({ Empty?: EmptyMessagePartComponent | undefined; Text?: TextMessagePartComponent | undefined; Source?: SourceMessagePartComponent | undefined; Image?: ImageMessagePartComponent | undefined; File?: FileMessagePartComponent | undefined; Unstable_Audio?: Unstable_AudioMessagePartComponent | undefined; data?: { by_name?: Record<string, DataMessagePartComponent | undefined> | undefined; Fallback?: DataMessagePartComponent | undefined; } | undefined; Quote?: QuoteMessagePartComponent | undefined; generativeUI?: { components: GenerativeUIComponentRegistry; Fallback?: ComponentType<{ component: string; props?: unknown; }> | undefined; } | undefined; } & { ChainOfThought: ComponentType; Reasoning?: never; tools?: never; ToolGroup?: never; ReasoningGroup?: never; })

지정 안 함

unstable_showEmptyOnNonTextEnd

boolean

true

같은 패밀리

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

Attachment

메시지에 첨부된 파일을 보여주는 카드.

ChainOfThought

AI 사고 과정을 접고 펼치는 타임라인.

ChatAgentCard

에이전트 이름·역할·스킬을 보여주는 소개 카드.

ChatAgentPlan

진행 단계를 순서대로 보여주는 체크리스트.

ChatCodeDiff

파일 변경 내용을 줄 단위로 보여주는 뷰어.

ChatCodeRunner

코드와 실행 결과를 함께 보여주는 블록.

ChatDiffStat

추가·삭제 줄 수를 요약하는 표시.

ChatDocumentReference

업로드 문서의 페이지·인용 구간을 보여주는 카드.

ChatInlineCitation

본문 안에 삽입하는 출처 각주 마커.

ChatResultSummaryCard

작업 결과 요약과 후속 액션 카드.

ChatRetrievalChunks

검색으로 찾은 청크 목록과 점수 표시.

ChatTerminalBlock

명령과 실행 결과를 보여주는 읽기 전용 터미널 블록.

ChatTodoList

항목별 상태를 보여주는 할 일 목록.

Markdown

스트리밍 마크다운 본문 렌더러.

Message

assistant-ui 메시지를 감싸는 역할별 버블 컨테이너.

SwapLabel

두 라벨을 폭 애니메이션과 함께 교차 전환하는 표시부.

Tool

도구 호출 렌더 컴포넌트의 네임스페이스.

ToolFallback

등록되지 않은 도구 호출을 보여주는 기본 카드.

ToolGroup

연속된 도구 호출을 하나로 묶어 접는 래퍼.

ToolGroupByIndices

구 버전 ToolGroup 계약을 위한 인덱스 기반 어댑터.

예제

Pill

기본 형태 — 저채도 pill 배경에 텍스트를 담습니다.

코드

Open in Playground

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

const stack = css({ display: 'flex', flexDirection: 'column', gap: '16' });

const SystemMessagePillExample = () => (
    <div className={stack}>
      <SystemMessage>
        <SystemMessage.Content>새 대화가 시작되었어요</SystemMessage.Content>
      </SystemMessage>
      <SystemMessage>
        <SystemMessage.Content>오후 3:24 · 밀당 선생님이 참여했어요</SystemMessage.Content>
      </SystemMessage>
    </div>
  );

export default SystemMessagePillExample;

Plain

배경 pill 없이 텍스트만 표시합니다.

코드

Open in Playground

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

const stack = css({ display: 'flex', flexDirection: 'column', gap: '16' });

const SystemMessagePlainExample = () => (
    <div className={stack}>
      <SystemMessage appearance="plain">
        <SystemMessage.Content>2026년 8월 5일</SystemMessage.Content>
      </SystemMessage>
      <SystemMessage appearance="plain">
        <SystemMessage.Content>여기부터 읽지 않은 메시지</SystemMessage.Content>
      </SystemMessage>
    </div>
  );

export default SystemMessagePlainExample;

대화 흐름 안에서

위아래 메시지 사이에 삽입된 중앙 정렬 모습입니다.

코드

Open in Playground

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

const SystemMessageInFlowExample = () => (
    <div className={css({ display: 'flex', flexDirection: 'column', gap: '8', maxWidth: 'chat.thread.maxWidth' })}>
      <div className={css({ alignSelf: 'flex-end', textStyle: 'chat-body', backgroundColor: 'neutral.ghostBg.base', borderRadius: '16', paddingX: '12', paddingY: '6' })}>
        안녕하세요!
      </div>
      <SystemMessage>
        <SystemMessage.Content>2026년 8월 5일</SystemMessage.Content>
      </SystemMessage>
      <div className={css({ alignSelf: 'flex-start', textStyle: 'chat-body', color: 'primary.text.base' })}>
        무엇을 도와드릴까요?
      </div>
    </div>
  );

export default SystemMessageInFlowExample;