밀당 DS

시작하기

ThreadWelcome

Layout

빈 스레드에서 인사말과 추천 프롬프트를 보여주는 영역.

Usage

스레드에 메시지가 없을 때 인사말과 추천 질문을 함께 보여줄 때 사용한다.

import

import

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

ThreadWelcome 하나만 가져오면 ThreadWelcome.Message · ThreadWelcome.Suggestions · ThreadWelcome.Suggestion 를 그 아래에서 쓸 수 있다.

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

• @mildang/icons 를 따로 설치한다. DS 패키지에 아이콘 컴포넌트가 포함되지 않는다.

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

• 외부 패키지를 따로 설치한다. DS 의 전이 의존성에 기대지 않는다.

Anatomy

tsx

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

export default function Example() {
  return (
    <ThreadWelcome.Message />
    <ThreadWelcome.Suggestions>
      <ThreadWelcome.Suggestion />
    </ThreadWelcome.Suggestions>
  );
}

부품

필수 여부

반복

위치

ThreadWelcome.Message

필수

ThreadWelcome.Suggestions

선택

ThreadWelcome.Suggestion

선택

여러 개 가능

ThreadWelcome.Suggestions 안에 반복해 둔다.

  • Thread.Empty에 전달해 메시지가 없을 때만 렌더한다.

API Reference

ThreadWelcome.Message

인사말 제목을 보여준다.

공개 Props 없음

ThreadWelcome.Suggestions

추천 프롬프트 pill들을 감싸는 영역이다.

공개 Props 없음

ThreadWelcome.Suggestion

클릭하면 해당 문구로 메시지를 보내는 추천 pill이다.

Prop

Type

Default

autoSend

boolean

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

clearComposer

boolean

true

color

("blue" | "green" | "orange" | "red" | "brand" | "neutral") & (string & (import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | (import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | null | undefined)[] | { _hover?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _focus?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _focusWithin?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _focusVisible?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _disabled?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _active?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _visited?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _target?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _readOnly?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _readWrite?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _empty?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _checked?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _enabled?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _expanded?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _highlighted?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _complete?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _incomplete?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _dragging?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _before?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _after?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _firstLetter?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _firstLine?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _marker?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _selection?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _file?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _backdrop?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _first?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _last?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _only?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _even?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _odd?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _firstOfType?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _lastOfType?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _onlyOfType?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _peerFocus?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _peerHover?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _peerActive?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _peerFocusWithin?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _peerFocusVisible?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _peerDisabled?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _peerChecked?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _peerInvalid?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _peerExpanded?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _peerPlaceholderShown?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _groupFocus?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _groupHover?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _groupActive?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _groupFocusWithin?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _groupFocusVisible?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _groupDisabled?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _groupChecked?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _groupExpanded?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _groupInvalid?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _indeterminate?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _required?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _valid?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _invalid?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _autofill?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _inRange?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _outOfRange?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _placeholder?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _placeholderShown?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _pressed?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _selected?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _grabbed?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _underValue?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _overValue?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _atValue?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _default?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _optional?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _open?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _closed?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _fullscreen?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _loading?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _hidden?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _current?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _currentPage?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _currentStep?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _today?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _unavailable?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _rangeStart?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _rangeEnd?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _now?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _topmost?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _motionReduce?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _motionSafe?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _print?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _landscape?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _portrait?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _dark?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _light?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _osDark?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _osLight?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _highContrast?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _lessContrast?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _moreContrast?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _ltr?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _rtl?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _scrollbar?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _scrollbarThumb?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _scrollbarTrack?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _horizontal?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _vertical?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _icon?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _starting?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _noscript?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _invertedColors?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _themeMildang?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _themeEducore?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _themeSchool?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; _themeGoes?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; xs?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; xsOnly?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; xsDown?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; sm?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; smOnly?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; smDown?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; md?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; mdOnly?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; mdDown?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; lg?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; lgOnly?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; lgDown?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; xl?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; xlOnly?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; xlDown?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; xsToSm?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; xsToMd?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; xsToLg?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; xsToXl?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; smToMd?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; smToLg?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; smToXl?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; mdToLg?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; mdToXl?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; lgToXl?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; "_themeEducore-v2"?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; "_themeEducore-v2-yellow"?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; "_themeEducore-v2-purple"?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; "_themeEducore-v2-blue"?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; "_themeEducore-v2-green"?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; base?: import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").ColorToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | readonly string[] | import("../../../../node_modules/@mildang/styled-system/types/csstype").Property.Color | undefined>; }))

지정 안 함

hideWhileRunning

boolean

지정 안 함

icon

ReactNode

지정 안 함

label

ReactNode

지정 안 함

method

"replace"

지정 안 함

prompt

string

지정 안 함

send

boolean

지정 안 함

size

("xs" | "sm" | "md" | "lg") & import("@mildang/styled-system/types").ConditionalValue<import("@mildang/styled-system/tokens").SizeToken | import("@mildang/styled-system/types").AnyString | `var(--${string})` | "auto" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12">

지정 안 함

startIcon

ReactNode

지정 안 함

sx

import("@mildang/styled-system/types").SystemStyleObject | (import("@mildang/styled-system/types").SystemStyleObject & import("@mildang/styled-system/types").SystemStyleObject[])

지정 안 함

같은 패밀리

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

Thread

메시지 목록과 입력창을 담는 채팅 스레드 컨테이너.

예제

기본 사용

인사말과 추천 프롬프트 pill 목록을 함께 보여주는 기본 형태다.

코드

// ThreadWelcomeDemo.example.tsx
import { css } from "@mildang/styled-system/css";
import { ThreadPrimitive } from "@assistant-ui/react";
import { ThreadWelcome } from "@mildang/design-system/unofficial/Chat";

// ../../examples/mockRuntime.tsx
import {
  AssistantRuntimeProvider,
  useLocalRuntime,
  useRemoteThreadListRuntime
} from "@assistant-ui/react";
import { useState } from "react";
var mockAdapter = {
  async run() {
    return {
      content: [{ type: "text", text: "안녕하세요! 무엇을 도와드릴까요? (mock 응답)" }]
    };
  }
};
function MockRuntimeProvider({
  children,
  initialMessages
}) {
  const runtime = useLocalRuntime(mockAdapter, { initialMessages });
  return <AssistantRuntimeProvider runtime={runtime}>{children}</AssistantRuntimeProvider>;
}

// ThreadWelcomeDemo.example.tsx
var suggestions = ["밀당 채팅 컴포넌트 소개해줘", "오늘 학습 요약해줘", "다음 수업 준비물 알려줘"];
var wrapper = css({ display: "flex" });
var ThreadWelcomeDemoExample = () => <MockRuntimeProvider>
    <div className={wrapper}>
      <ThreadPrimitive.Root className={css({ display: "flex", flex: 1 })}>
        <ThreadPrimitive.Empty>
          <ThreadWelcome>
            <ThreadWelcome.Message>무엇을 도와드릴까요?</ThreadWelcome.Message>
            <ThreadWelcome.Suggestions>
              {suggestions.map((prompt) => <ThreadWelcome.Suggestion key={prompt} prompt={prompt} send label={prompt} />)}
            </ThreadWelcome.Suggestions>
          </ThreadWelcome>
        </ThreadPrimitive.Empty>
      </ThreadPrimitive.Root>
    </div>
  </MockRuntimeProvider>;
var ThreadWelcomeDemo_example_default = ThreadWelcomeDemoExample;
export {
  ThreadWelcomeDemo_example_default as default
};

아이콘 추가

추천 pill 앞에 아이콘을 붙인 예시다.

코드

// ThreadWelcomeWithIcons.example.tsx
import { css } from "@mildang/styled-system/css";
import { ThreadPrimitive } from "@assistant-ui/react";
import BookIcon from "@mildang/icons/react/book";
import ChatIcon from "@mildang/icons/react/chat";
import MagicWandIcon from "@mildang/icons/react/magic-wand";
import { ThreadWelcome } from "@mildang/design-system/unofficial/Chat";

// ../../examples/mockRuntime.tsx
import {
  AssistantRuntimeProvider,
  useLocalRuntime,
  useRemoteThreadListRuntime
} from "@assistant-ui/react";
import { useState } from "react";
var mockAdapter = {
  async run() {
    return {
      content: [{ type: "text", text: "안녕하세요! 무엇을 도와드릴까요? (mock 응답)" }]
    };
  }
};
function MockRuntimeProvider({
  children,
  initialMessages
}) {
  const runtime = useLocalRuntime(mockAdapter, { initialMessages });
  return <AssistantRuntimeProvider runtime={runtime}>{children}</AssistantRuntimeProvider>;
}

// ThreadWelcomeWithIcons.example.tsx
var iconSuggestions = [
  { prompt: "오늘 학습 요약해줘", icon: <BookIcon /> },
  { prompt: "틀린 문제 다시 풀래", icon: <MagicWandIcon /> },
  { prompt: "선생님께 질문 남기기", icon: <ChatIcon /> }
];
var wrapper = css({ display: "flex" });
var ThreadWelcomeWithIconsExample = () => <MockRuntimeProvider>
    <div className={wrapper}>
      <ThreadPrimitive.Root className={css({ display: "flex", flex: 1 })}>
        <ThreadPrimitive.Empty>
          <ThreadWelcome>
            <ThreadWelcome.Message>무엇을 도와드릴까요?</ThreadWelcome.Message>
            <ThreadWelcome.Suggestions>
              {iconSuggestions.map(({ prompt, icon }) => <ThreadWelcome.Suggestion key={prompt} prompt={prompt} send label={prompt} icon={icon} />)}
            </ThreadWelcome.Suggestions>
          </ThreadWelcome>
        </ThreadPrimitive.Empty>
      </ThreadPrimitive.Root>
    </div>
  </MockRuntimeProvider>;
var ThreadWelcomeWithIcons_example_default = ThreadWelcomeWithIconsExample;
export {
  ThreadWelcomeWithIcons_example_default as default
};

계층형 추천

주제를 고르면 하위 추천 프롬프트가 드러나는 예시다.

코드

// ThreadWelcomeHierarchical.example.tsx
import { useState as useState2 } from "react";
import { css } from "@mildang/styled-system/css";
import { ThreadPrimitive } from "@assistant-ui/react";
import { ThreadWelcome } from "@mildang/design-system/unofficial/Chat";
import { Chip } from "@mildang/design-system/Chip";

// ../../examples/mockRuntime.tsx
import {
  AssistantRuntimeProvider,
  useLocalRuntime,
  useRemoteThreadListRuntime
} from "@assistant-ui/react";
import { useState } from "react";
var mockAdapter = {
  async run() {
    return {
      content: [{ type: "text", text: "안녕하세요! 무엇을 도와드릴까요? (mock 응답)" }]
    };
  }
};
function MockRuntimeProvider({
  children,
  initialMessages
}) {
  const runtime = useLocalRuntime(mockAdapter, { initialMessages });
  return <AssistantRuntimeProvider runtime={runtime}>{children}</AssistantRuntimeProvider>;
}

// ThreadWelcomeHierarchical.example.tsx
var topics = {
  수학: ["이차방정식 근 구하기", "분수의 나눗셈 설명해줘"],
  영어: ["지문 요약해줘", "문법 오류 찾아줘"]
};
var HierarchicalSuggestions = () => {
  const [topic, setTopic] = useState2(null);
  return <ThreadWelcome.Suggestions>
      {topic == null ? Object.keys(topics).map((t) => <Chip key={t} type="outlined" color="neutral" label={t} onClick={() => setTopic(t)} />) : [
    <Chip key="back" type="text" color="neutral" label="← 뒤로" onClick={() => setTopic(null)} />,
    ...topics[topic].map((prompt) => <ThreadWelcome.Suggestion key={prompt} prompt={prompt} send label={prompt} />)
  ]}
    </ThreadWelcome.Suggestions>;
};
var wrapper = css({ display: "flex" });
var ThreadWelcomeHierarchicalExample = () => <MockRuntimeProvider>
    <div className={wrapper}>
      <ThreadPrimitive.Root className={css({ display: "flex", flex: 1 })}>
        <ThreadPrimitive.Empty>
          <ThreadWelcome>
            <ThreadWelcome.Message>어떤 과목이 궁금해요?</ThreadWelcome.Message>
            <HierarchicalSuggestions />
          </ThreadWelcome>
        </ThreadPrimitive.Empty>
      </ThreadPrimitive.Root>
    </div>
  </MockRuntimeProvider>;
var ThreadWelcomeHierarchical_example_default = ThreadWelcomeHierarchicalExample;
export {
  ThreadWelcomeHierarchical_example_default as default
};