ChatReasoningEffort

Data Input

추론 강도 레벨 선택 및 사용량 표시.

Usage

사용자가 추론 강도(예산) 레벨을 고르고 현재 사용량을 함께 확인해야 할 때 사용합니다. onSelect 없이는 선택 UI 없이 현재 값만 보여줍니다.

import

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

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

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

API Reference

ChatReasoningEffort Props

Prop

Type

Default

levels

필수

readonly ChatReasoningEffortLevel[]

지정 안 함

selectedKey

필수

string

지정 안 함

labels

Partial<ChatReasoningEffortLabels>

지정 안 함

onSelect

(key: string) => void

지정 안 함

spent

number

지정 안 함

같은 패밀리

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

Composer

메시지를 입력하고 전송하는 채팅 입력창.

EditComposer

이미 보낸 메시지를 고쳐 다시 보내는 편집창.

예제

표시 전용

코드

import type { ComponentProps } from 'react';
import { ChatReasoningEffort } from '@mildang/design-system/unofficial/Chat';
type Props = ComponentProps<typeof ChatReasoningEffort>;
const LEVELS = [
  { key: 'low', label: '낮음', budget: 2000 },
  { key: 'medium', label: '보통', budget: 8000 },
  { key: 'high', label: '높음', budget: 32000 },
];
const DEFAULT_ARGS: Props = { levels: LEVELS, selectedKey: 'high', spent: 28400 };
export default function ReasoningEffortReadOnlyExample(props: Partial<Props> = {}) {
  return <ChatReasoningEffort {...DEFAULT_ARGS} {...props} />;
}

예산 없음

코드

import type { ComponentProps } from 'react';
import { ChatReasoningEffort } from '@mildang/design-system/unofficial/Chat';
type Props = ComponentProps<typeof ChatReasoningEffort>;
const DEFAULT_ARGS: Props = {
  levels: [
    { key: 'low', label: '낮음' },
    { key: 'medium', label: '보통' },
    { key: 'high', label: '높음' },
  ],
  selectedKey: 'low',
  onSelect: () => undefined,
};
export default function ReasoningEffortNoBudgetExample(props: Partial<Props> = {}) {
  return <ChatReasoningEffort {...DEFAULT_ARGS} {...props} />;
}

예산 소진

코드

import type { ComponentProps } from 'react';
import { ChatReasoningEffort } from '@mildang/design-system/unofficial/Chat';
type Props = ComponentProps<typeof ChatReasoningEffort>;
const DEFAULT_ARGS: Props = {
  levels: [
    { key: 'low', label: '낮음', budget: 2000 },
    { key: 'medium', label: '보통', budget: 8000 },
    { key: 'high', label: '높음', budget: 32000 },
  ],
  selectedKey: 'low',
  spent: 2600,
  onSelect: () => undefined,
};
export default function ReasoningEffortBudgetSpentExample(props: Partial<Props> = {}) {
  return <ChatReasoningEffort {...DEFAULT_ARGS} {...props} />;
}

레벨 선택 인터랙션

코드

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

const frame = css({ maxWidth: '320px' });

const LEVELS = [
  { key: 'low', label: '낮음', budget: 2000 },
  { key: 'medium', label: '보통', budget: 8000 },
  { key: 'high', label: '높음', budget: 32000 },
];

/** 강도는 앱 상태다 — 스토리가 그 앱 역할을 한다. */
const Controlled = ({ spent }: { spent?: number }) => {
  const [key, setKey] = useState('medium');

  return (
    <ChatReasoningEffort
      levels={LEVELS}
      selectedKey={key}
      spent={spent}
      onSelect={setKey}
      className={frame}
    />
  );
};

const ReasoningEffortSelectableExample = () => <Controlled spent={3200} />;

export default ReasoningEffortSelectableExample;