MessageError

Feedback & Status

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

Usage

메시지 생성이 실패했을 때 오류 문구를 배너로 알릴 때 사용한다.

import

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

MessageError 하나만 가져오면 MessageError.Message 를 그 아래에서 쓸 수 있다.

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

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

Anatomy

tsx

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

export default function Example() {
  return (
    <MessageError.Message />
  );
}

부품

필수 여부

반복

위치

MessageError.Message

선택

children 을 직접 주지 않을 때 MessageError 안에서 기본으로 렌더된다.

children 을 주면 그대로 렌더하고, 없으면 MessageError.Message 로 런타임 오류 문구를 렌더한다.

API Reference

MessageError Props

Prop

Type

Default

asChild

boolean

지정 안 함

MessageError.Message

런타임 오류 문구 텍스트 노드다.

Prop

Type

Default

asChild

boolean

지정 안 함

render

import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>

지정 안 함

같은 패밀리

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

ChatAgentStatus

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

ChatConfidenceMarker

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

ChatConnectionState

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

ChatContextDisplay

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

ChatJobProgress

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

ChatLoadingState

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

ChatMessageTiming

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

ChatTypingIndicator

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

TextShimmer

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

예제

기본

오류 문구를 children 으로 직접 주입한 모습입니다.

코드

Open in Playground

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

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

const MessageErrorDefaultExample = () => (
    <div className={wrapper}>
      <MessageError>응답을 생성하지 못했어요. 잠시 후 다시 시도해 주세요.</MessageError>
    </div>
  );

export default MessageErrorDefaultExample;

긴 문구

긴 오류 문구의 줄바꿈 처리를 확인합니다.

코드

Open in Playground

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

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

const MessageErrorLongMessageExample = () => (
    <div className={wrapper}>
      <MessageError>
        네트워크 오류로 요청이 실패했습니다. 연결 상태를 확인한 뒤 다시 시도해 주세요. 문제가 반복되면
        잠시 후 새로고침하거나 관리자에게 문의해 주세요.
      </MessageError>
    </div>
  );

export default MessageErrorLongMessageExample;