SourcePanel

AI 응답의 출처와 근거를 표시하는 패널 컴포넌트입니다. 웹, 파일, 데이터베이스, API 등 다양한 출처 유형을 지원합니다.

Installation

bash

npx axis-cli add source-panel --agentic

Interactive Demo

아래 패널에서 "더 보기"를 클릭하여 확장/축소할 수 있습니다.

출처 (6개)

🌐

React 공식 문서

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.

95%

📄

API Reference

REST API 엔드포인트 목록과 사용 방법을 설명합니다.

/docs/api-reference.md

88%

🗄️

User Data

users.analytics

75%

Usage

tsx

import { SourcePanel } from '@axis-ds/agentic-ui'

const sources = [
  {
    id: '1',
    type: 'web',
    title: 'React 공식 문서',
    url: 'https://react.dev',
    snippet: 'React를 사용하면 컴포넌트를 통해 UI를 구축할 수 있습니다.',
    relevance: 0.95,
  },
  {
    id: '2',
    type: 'file',
    title: 'API 문서',
    path: '/docs/api-reference.md',
    relevance: 0.82,
  },
]

export function Example() {
  return <SourcePanel sources={sources} maxItems={3} />
}

Props

Prop	Type	Default	Description
`sources`Required	`Source[]`	-	출처 목록 배열
`expandable`	`boolean`	true	확장 가능 여부
`defaultExpanded`	`boolean`	false	기본 확장 상태
`maxItems`	`number`	5	기본 표시 개수
`className`	`string`	-	추가 CSS 클래스

sourcesRequired

Type:Source[]

출처 목록 배열

expandable

Type:boolean

Default:true

확장 가능 여부

defaultExpanded

Type:boolean

Default:false

기본 확장 상태

maxItems

Type:number

Default:5

기본 표시 개수

className

Type:string

Default:-

추가 CSS 클래스

Source Type

Prop	Type	Default	Description
`id`Required	`string`	-	출처 고유 식별자
`type`Required	`"web" \| "file" \| "database" \| "api"`	-	출처 유형
`title`Required	`string`	-	출처 제목
`url`	`string`	-	웹 링크 URL
`path`	`string`	-	파일 경로
`snippet`	`string`	-	관련 내용 발췌
`relevance`	`number`	-	관련도 점수 (0-1)

idRequired

Type:string

출처 고유 식별자

typeRequired

Type:"web" | "file" | "database" | "api"

출처 유형

titleRequired

Type:string

출처 제목

url

Type:string

Default:-

웹 링크 URL

path

Type:string

Default:-

파일 경로

snippet

Type:string

Default:-