RunProgress

에이전트 실행 진행 상태를 단계별로 표시하는 컴포넌트입니다. 복잡한 AI 작업의 진행 상황을 시각화합니다.

Installation

bash

npx axis-cli add run-progress --agentic

Interactive Demo

대기 중

입력 분석

사용자 입력을 분석합니다

컨텍스트 검색

Usage

tsx

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

const steps = [
  { id: '1', label: '데이터 분석', status: 'complete' },
  { id: '2', label: '모델 선택', status: 'running', description: '최적의 모델을 선택하는 중...' },
  { id: '3', label: '결과 생성', status: 'pending' },
]

export function Example() {
  return (
    <RunProgress
      status="running"
      steps={steps}
      currentStep={1}
      onCancel={() => console.log('취소')}
    />
  )
}

Props

Prop	Type	Default	Description
`status`Required	`"idle" \| "running" \| "complete" \| "error"`	-	전체 실행 상태
`steps`Required	`Step[]`	-	단계 목록 배열
`currentStep`	`number`	-	현재 진행 중인 단계 인덱스
`onCancel`	`() => void`	-	취소 버튼 클릭 시 콜백
`onRetry`	`() => void`	-	재시도 버튼 클릭 시 콜백
`className`	`string`	-	추가 CSS 클래스

statusRequired

Type:"idle" | "running" | "complete" | "error"

전체 실행 상태

stepsRequired

Type:Step[]

단계 목록 배열

currentStep

Type:number

Default:-

현재 진행 중인 단계 인덱스

onCancel

Type:() => void

Default:-

취소 버튼 클릭 시 콜백

onRetry

Type:() => void

Default:-

재시도 버튼 클릭 시 콜백

className

Type:string

Default:-

추가 CSS 클래스

Step Type

Prop	Type	Default	Description
`id`Required	`string`	-	단계 고유 식별자
`label`Required	`string`	-	단계 이름
`status`Required	`"pending" \| "running" \| "complete" \| "error"`	-	단계 상태
`description`	`string`	-	단계 설명

idRequired

Type:string

단계 고유 식별자

labelRequired

Type:string

단계 이름

statusRequired

Type:"pending" | "running" | "complete" | "error"

단계 상태

description

Type:string

Default:-

단계 설명