EditComposer

Data Input

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

Usage

사용자가 이전에 보낸 메시지를 수정해 새 분기로 다시 전송할 때 사용한다.

import

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

EditComposer 하나만 가져오면 EditComposer.Input · EditComposer.Header · EditComposer.Footer · EditComposer.LeadingActions · EditComposer.TrailingActions · EditComposer.Status · EditComposer.Send · EditComposer.Cancel · EditComposer.Attachments · EditComposer.AddAttachment 를 그 아래에서 쓸 수 있다.

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

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

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

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

Anatomy

tsx

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

export default function Example() {
  return (
    <EditComposer.Header>
      <EditComposer.Attachments />
    </EditComposer.Header>
    <EditComposer.Input />
    <EditComposer.Footer>
      <EditComposer.Status />
      <EditComposer.LeadingActions />
      <EditComposer.TrailingActions />
      <EditComposer.AddAttachment />
      <EditComposer.Send />
      <EditComposer.Cancel />
    </EditComposer.Footer>
  );
}

부품

필수 여부

반복

위치

EditComposer.Header

선택

EditComposer.Attachments

선택

EditComposer.Header 안에 둔다.

EditComposer.Input

필수

EditComposer.Footer

선택

EditComposer.Status

조건부

표시할 상태가 있을 때만 렌더한다.

EditComposer.Footer 안에 둔다.

EditComposer.LeadingActions

선택

EditComposer.Footer 안에 둔다.

EditComposer.TrailingActions

선택

EditComposer.Footer 안에 둔다.

EditComposer.AddAttachment

선택

EditComposer.Footer 안에 둔다.

EditComposer.Send

필수

EditComposer.Footer 안에 둔다.

EditComposer.Cancel

필수

EditComposer.Footer 안에 둔다.

편집을 전송하면 기존 메시지 대신 새 분기가 생기고, BranchPicker로 오갈 수 있다.
메시지 컨텍스트가 필요하므로 ThreadPrimitive.Messages 안에서 렌더한다.

API Reference

EditComposer Props

Prop

Type

Default

asChild

boolean

지정 안 함

compact

boolean

false

drawer

ReactNode

지정 안 함

elevation

"raised" | "flat"

raised

render

ReactElement<unknown, string | JSXElementConstructor<any>>

지정 안 함

severity

"error" | "warning"

지정 안 함

variant

"default" | "edit"

default

EditComposer.Header

편집창 위쪽에 첨부 목록 등 보조 콘텐츠를 두는 영역이다.

공개 Props 없음

EditComposer.Attachments

편집 중인 메시지의 첨부 파일 목록을 렌더한다.

Prop

Type

Default

children

(value: { attachment: Attachment; }) => ReactNode

지정 안 함

components

ComposerAttachmentsComponentConfig

지정 안 함

EditComposer.Input

기존 메시지 내용을 채운 텍스트 입력 영역이다.

공개 Props 없음

EditComposer.Footer

편집창 아래쪽에 상태·액션 버튼을 두는 영역이다.

공개 Props 없음

EditComposer.Status

전송 오류·경고 같은 상태 메시지를 보여준다.

Prop

Type

Default

severity

"error" | "warning"

지정 안 함

EditComposer.LeadingActions

편집창 앞쪽에 커스텀 액션 버튼을 두는 영역이다.

공개 Props 없음

EditComposer.TrailingActions

편집창 뒤쪽에 커스텀 액션 버튼을 두는 영역이다.

공개 Props 없음

EditComposer.AddAttachment

파일 첨부를 추가하는 버튼이다.

Prop

Type

Default

asChild

boolean

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

disabled

boolean

지정 안 함

icon

ReactNode

지정 안 함

boolean

지정 안 함

size

IconButtonSize

지정 안 함

variant

IconButtonVariant

지정 안 함

EditComposer.Send

수정한 메시지를 새 분기로 전송하는 버튼이다.

Prop

Type

Default

asChild

boolean

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

disabled

boolean

지정 안 함

icon

ReactNode

지정 안 함

boolean

지정 안 함

size

IconButtonSize

지정 안 함

variant

IconButtonVariant

지정 안 함

EditComposer.Cancel

편집을 취소하고 원래 메시지로 되돌리는 버튼이다.

Prop

Type

Default

asChild

boolean

지정 안 함

children

ReactNode

지정 안 함

className

string

지정 안 함

disabled

boolean

지정 안 함

icon

ReactNode

지정 안 함

boolean

지정 안 함

size

IconButtonSize

지정 안 함

variant

IconButtonVariant

지정 안 함

같은 패밀리

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

ChatReasoningEffort

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

Composer

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

예제

기본 사용

사용자 메시지를 편집 모드로 전환해 다시 전송하는 예시다.

코드

// EditComposerDemo.example.tsx
import { css } from "@mildang/styled-system/css";
import CheckIcon from "@mildang/icons/react/check";
import CloseIcon from "@mildang/icons/react/close";
import { EditComposer } 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>;
}

// EditComposerDemo.example.tsx
var wrapper = css({ padding: "16" });
var EditComposerDemoExample = () => <MockRuntimeProvider>
    <div className={wrapper}>
      <EditComposer>
        <EditComposer.Input placeholder="메시지를 편집하세요…" />
        <EditComposer.Footer>
          <EditComposer.TrailingActions>
            <EditComposer.Cancel aria-label="편집 취소" icon={<CloseIcon />} />
            <EditComposer.Send aria-label="편집 저장" icon={<CheckIcon />} />
          </EditComposer.TrailingActions>
        </EditComposer.Footer>
      </EditComposer>
    </div>
  </MockRuntimeProvider>;
var EditComposerDemo_example_default = EditComposerDemoExample;
export {
  EditComposerDemo_example_default as default
};