ChatDocumentReference

Data Display

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

Usage

어시스턴트 답변이 특정 업로드 파일의 특정 페이지를 근거로 들 때 사용합니다. 웹 URL 출처는 Message.Sources, 검색 청크 나열은 ChatRetrievalChunks, 인라인 각주는 ChatInlineCitation을 대신 사용하세요.

import

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

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

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

API Reference

ChatDocumentReference Props

Prop

Type

Default

anchors

필수

readonly DocumentAnchor[]

지정 안 함

pages

필수

number

지정 안 함

title

필수

string

지정 안 함

activePage

number

지정 안 함

fileType

string

지정 안 함

labels

Partial<ChatDocumentReferenceLabels>

지정 안 함

onJump

(page: number) => void

지정 안 함

같은 패밀리

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

Attachment

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

ChainOfThought

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

ChatAgentCard

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

ChatAgentPlan

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

ChatCodeDiff

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

ChatCodeRunner

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

ChatDiffStat

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

ChatInlineCitation

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

ChatResultSummaryCard

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

ChatRetrievalChunks

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

ChatTerminalBlock

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

ChatTodoList

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

Markdown

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

Message

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

SwapLabel

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

SystemMessage

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

Tool

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

ToolFallback

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

ToolGroup

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

ToolGroupByIndices

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

예제

기본

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ChatDocumentReference } from '@mildang/design-system/unofficial/Chat';
type Props = ComponentProps<typeof ChatDocumentReference>;
const DEFAULT_ARGS: Props = { title: '재시도 정책 설계.pdf', pages: 48, anchors: [{ page: 4, quote: '토큰 만료(401)에서만 한 번 재시도한다.' }, { page: 12, quote: '네트워크 오류는 재시도 대상이 아니며 그대로 상위로 전파한다.' }, { page: 12, quote: '재시도 간격은 지수 백오프로 늘리되 상한을 둔다.' }], fileType: 'pdf' };
export default function DocumentReferenceDefaultExample(props: Partial<Props> = {}) { return <ChatDocumentReference {...DEFAULT_ARGS} {...props} />; }

인용 하나

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ChatDocumentReference } from '@mildang/design-system/unofficial/Chat';
type Props = ComponentProps<typeof ChatDocumentReference>;
const DEFAULT_ARGS: Props = { title: 'RFC-2026-03 인터셉터.pdf', pages: 9, anchors: [{ page: 3, quote: '재시도 상한이 없으면 만료된 세션이 오래 살아남는다.' }], activePage: 3, fileType: 'pdf' };
export default function DocumentReferenceSingleAnchorExample(props: Partial<Props> = {}) { return <ChatDocumentReference {...DEFAULT_ARGS} {...props} />; }

파일 타입별 아이콘

코드

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

const DocumentReferenceFileTypesExample = () => (
    <div className={css({ display: 'flex', flexDirection: 'column', gap: '12' })}>
      <ChatDocumentReference
        title="2026 예산.xlsx"
        pages={6}
        anchors={[{ page: 2, quote: '3분기 인프라 예산은 전 분기 대비 12% 늘었다.' }]}
        fileType="xlsx"
      />
      <ChatDocumentReference
        title="온보딩 안내.docx"
        pages={12}
        anchors={[{ page: 5, quote: '첫 주에는 페어 리뷰만 받고 직접 머지하지 않는다.' }]}
        fileType="docx"
      />
      <ChatDocumentReference
        title="확장자 없는 문서"
        pages={3}
        anchors={[{ page: 1, quote: '지원하지 않는 확장자는 기본 글리프로 떨어진다.' }]}
      />
    </div>
  );

export default DocumentReferenceFileTypesExample;

페이지 이동 인터랙션

코드

import { useState } from 'react';
import { css } from '@mildang/styled-system/css';
import { ChatDocumentReference } from '@mildang/design-system/unofficial/Chat';
import { DocumentAnchor } from '@mildang/design-system/unofficial/Chat';

// 12쪽이 두 번 인용된다 — 한 쪽에 여러 앵커가 걸리는 정상 케이스다.
const ANCHORS: readonly DocumentAnchor[] = [
  { page: 4, quote: '토큰 만료(401)에서만 한 번 재시도한다.' },
  { page: 12, quote: '네트워크 오류는 재시도 대상이 아니며 그대로 상위로 전파한다.' },
  { page: 12, quote: '재시도 간격은 지수 백오프로 늘리되 상한을 둔다.' },
];

/** 활성 쪽은 앱(뷰어)이 소유한다 — 스토리에서는 `useState` 가 그 역할을 대신한다. */
const ViewerDemo = () => {
  const [page, setPage] = useState(12);

  return (
    <div className={css({ display: 'flex', flexDirection: 'column', gap: '12' })}>
      <ChatDocumentReference
        title="재시도 정책 설계.pdf"
        pages={48}
        anchors={ANCHORS}
        activePage={page}
        fileType="pdf"
        onJump={setPage}
      />
      <span className={css({ textStyle: 'chat-small-text-R', color: 'neutral.text.low' })}>
        뷰어가 보고 있는 쪽: {page}
      </span>
    </div>
  );
};

const DocumentReferenceInteractiveExample = () => <ViewerDemo />;

export default DocumentReferenceInteractiveExample;