ChatJobProgress

Feedback & Status

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

Usage

여러 단계로 나뉜 작업의 전체 진행률을 하나의 바로 보여줄 때 사용합니다. 계획 단계 나열은 ChatAgentPlan, 단순 상태 텍스트는 ChatAgentStatus, 대기 애니메이션은 ChatLoadingState를 대신 사용하세요.

import

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

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

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

API Reference

ChatJobProgress Props

Prop

Type

Default

stageIndex

필수

number

지정 안 함

stageProgress

필수

number

지정 안 함

stages

필수

readonly JobStage[]

지정 안 함

title

필수

string

지정 안 함

eta

ReactNode

지정 안 함

labels

Partial<ChatJobProgressLabels>

지정 안 함

onCancel

() => void

지정 안 함

같은 패밀리

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

ChatAgentStatus

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

ChatConfidenceMarker

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

ChatConnectionState

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

ChatContextDisplay

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

ChatLoadingState

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

ChatMessageTiming

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

ChatTypingIndicator

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

MessageError

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

TextShimmer

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

예제

진행 중

코드

import type { ComponentProps } from 'react';
import { ChatJobProgress } from '@mildang/design-system/unofficial/Chat';
type Props = ComponentProps<typeof ChatJobProgress>;
const STAGES = [
  { name: 'clone', weight: 1 },
  { name: 'install', weight: 3 },
  { name: 'build', weight: 8 },
  { name: 'upload', weight: 1 },
];
const DEFAULT_ARGS: Props = {
  title: '스테이징 배포',
  stages: STAGES,
  stageIndex: 2,
  stageProgress: 0.5,
  eta: '2분 12초 남음',
  onCancel: () => {},
  maxWidth: '380px',
};
export default function JobProgressRunningExample(props: Partial<Props> = {}) {
  return <ChatJobProgress {...DEFAULT_ARGS} {...props} />;
}

시작 직후

코드

// JobProgressRunning.example.tsx
import { ChatJobProgress } from "@mildang/design-system/unofficial/Chat";
var STAGES = [
  { name: "clone", weight: 1 },
  { name: "install", weight: 3 },
  { name: "build", weight: 8 },
  { name: "upload", weight: 1 }
];
var DEFAULT_ARGS = {
  title: "스테이징 배포",
  stages: STAGES,
  stageIndex: 2,
  stageProgress: 0.5,
  eta: "2분 12초 남음",
  onCancel: () => {
  },
  maxWidth: "380px"
};
function JobProgressRunningExample(props = {}) {
  return <ChatJobProgress {...DEFAULT_ARGS} {...props} />;
}

// JobProgressJustStarted.example.tsx
var DEFAULT_ARGS2 = { stageIndex: 0, stageProgress: 0, eta: "4분 남음" };
function JobProgressJustStartedExample(props = {}) {
  return <JobProgressRunningExample {...DEFAULT_ARGS2} {...props} />;
}
export {
  JobProgressJustStartedExample as default
};

완료

코드

// JobProgressRunning.example.tsx
import { ChatJobProgress } from "@mildang/design-system/unofficial/Chat";
var STAGES = [
  { name: "clone", weight: 1 },
  { name: "install", weight: 3 },
  { name: "build", weight: 8 },
  { name: "upload", weight: 1 }
];
var DEFAULT_ARGS = {
  title: "스테이징 배포",
  stages: STAGES,
  stageIndex: 2,
  stageProgress: 0.5,
  eta: "2분 12초 남음",
  onCancel: () => {
  },
  maxWidth: "380px"
};
function JobProgressRunningExample(props = {}) {
  return <ChatJobProgress {...DEFAULT_ARGS} {...props} />;
}

// JobProgressFinished.example.tsx
var DEFAULT_ARGS2 = { stageIndex: 4, stageProgress: 0, eta: void 0 };
function JobProgressFinishedExample(props = {}) {
  return <JobProgressRunningExample {...DEFAULT_ARGS2} {...props} />;
}
export {
  JobProgressFinishedExample as default
};

취소 없음

코드

// JobProgressRunning.example.tsx
import { ChatJobProgress } from "@mildang/design-system/unofficial/Chat";
var STAGES = [
  { name: "clone", weight: 1 },
  { name: "install", weight: 3 },
  { name: "build", weight: 8 },
  { name: "upload", weight: 1 }
];
var DEFAULT_ARGS = {
  title: "스테이징 배포",
  stages: STAGES,
  stageIndex: 2,
  stageProgress: 0.5,
  eta: "2분 12초 남음",
  onCancel: () => {
  },
  maxWidth: "380px"
};
function JobProgressRunningExample(props = {}) {
  return <ChatJobProgress {...DEFAULT_ARGS} {...props} />;
}

// JobProgressNoCancel.example.tsx
var DEFAULT_ARGS2 = {
  title: "인덱싱",
  stageIndex: 1,
  stageProgress: 0.3,
  eta: void 0,
  onCancel: void 0
};
function JobProgressNoCancelExample(props = {}) {
  return <JobProgressRunningExample {...DEFAULT_ARGS2} {...props} />;
}
export {
  JobProgressNoCancelExample as default
};

문구 교체

코드

// JobProgressRunning.example.tsx
import { ChatJobProgress } from "@mildang/design-system/unofficial/Chat";
var STAGES = [
  { name: "clone", weight: 1 },
  { name: "install", weight: 3 },
  { name: "build", weight: 8 },
  { name: "upload", weight: 1 }
];
var DEFAULT_ARGS = {
  title: "스테이징 배포",
  stages: STAGES,
  stageIndex: 2,
  stageProgress: 0.5,
  eta: "2분 12초 남음",
  onCancel: () => {
  },
  maxWidth: "380px"
};
function JobProgressRunningExample(props = {}) {
  return <ChatJobProgress {...DEFAULT_ARGS} {...props} />;
}

// JobProgressCustomLabels.example.tsx
var DEFAULT_ARGS2 = {
  title: "Deploy to staging",
  stages: [
    { name: "clone", weight: 1 },
    { name: "install", weight: 3 },
    { name: "build", weight: 8 },
    { name: "upload", weight: 1 }
  ],
  stageIndex: 4,
  stageProgress: 0,
  eta: void 0,
  labels: { done: "done", cancel: "Cancel the job", progress: "progress" }
};
function JobProgressCustomLabelsExample(props = {}) {
  return <JobProgressRunningExample {...DEFAULT_ARGS2} {...props} />;
}
export {
  JobProgressCustomLabelsExample as default
};

단계 가중치 반영

코드

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

const STAGES: JobStage[] = [
  { name: 'clone', weight: 1 },
  { name: 'install', weight: 3 },
  { name: 'build', weight: 8 },
  { name: 'upload', weight: 1 },
];

const JobProgressWeightMattersExample = () => (
  <div className={css({ display: 'flex', flexDirection: 'column', gap: '16', maxWidth: '380px' })}>
    <ChatJobProgress
      title="가중치 있음 (1 / 3 / 8 / 1)"
      stages={STAGES}
      stageIndex={1}
      stageProgress={0}
      eta="3분 40초 남음"
    />
    <ChatJobProgress
      title="가중치 균등 (1 / 1 / 1 / 1)"
      stages={STAGES.map((stage) => ({ ...stage, weight: 1 }))}
      stageIndex={1}
      stageProgress={0}
      eta="3분 40초 남음"
    />
  </div>
);

export default JobProgressWeightMattersExample;