BranchPicker

Navigation

메시지의 분기 응답 사이를 오가는 이전/다음 컨트롤.

Usage

재생성으로 여러 응답 분기가 생긴 메시지에서 분기 사이를 이동할 때 사용한다.

import

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

BranchPicker 하나만 가져오면 BranchPicker.Previous · BranchPicker.Next · BranchPicker.Number · BranchPicker.Count 를 그 아래에서 쓸 수 있다.

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

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

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

Anatomy

tsx

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

export default function Example() {
  return (
    <BranchPicker.Previous />
    <BranchPicker.Number />
    <BranchPicker.Count />
    <BranchPicker.Next />
  );
}

부품

필수 여부

반복

위치

BranchPicker.Previous

필수

BranchPicker.Number

필수

BranchPicker.Count

필수

BranchPicker.Next

필수

분기가 하나뿐이면 기본적으로 숨긴다(hideWhenSingleBranch 기본 true).
메시지 컨텍스트가 필요하므로 ThreadPrimitive.Messages 안에서 렌더한다.

API Reference

BranchPicker Props

Prop

Type

Default

asChild

boolean

지정 안 함

hideWhenSingleBranch

boolean

false

render

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

지정 안 함

BranchPicker.Previous

이전 분기로 이동하는 버튼이다.

Prop

Type

Default

asChild

boolean

지정 안 함

icon

ReactNode

지정 안 함

render

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

지정 안 함

BranchPicker.Number

현재 분기의 순번을 보여준다.

공개 Props 없음

BranchPicker.Count

전체 분기 개수를 보여준다.

공개 Props 없음

BranchPicker.Next

다음 분기로 이동하는 버튼이다.

Prop

Type

Default

asChild

boolean

지정 안 함

icon

ReactNode

지정 안 함

render

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

지정 안 함

예제

기본 사용

여러 응답 분기 사이를 이전/다음으로 이동하는 예시다.

코드

// BranchPickerDemo.example.tsx
import { css } from "@mildang/styled-system/css";
import { ThreadPrimitive } from "@assistant-ui/react";
import { BranchPicker } 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 응답)" }]
    };
  }
};
var sampleMessages = [
  { role: "user", content: "밀당 채팅 컴포넌트 잘 붙었어?" },
  {
    role: "assistant",
    content: "네! assistant-ui 프리미티브를 Panda CSS 슬롯 레시피로 스타일링했습니다. Thread / Composer / Message 3종이 렌더됩니다."
  }
];
function MockRuntimeProvider({
  children,
  initialMessages
}) {
  const runtime = useLocalRuntime(mockAdapter, { initialMessages });
  return <AssistantRuntimeProvider runtime={runtime}>{children}</AssistantRuntimeProvider>;
}

// BranchPickerDemo.example.tsx
var AssistantMessage = () => <div className={css({ paddingY: "8" })}>
    <BranchPicker hideWhenSingleBranch={false}>
      <BranchPicker.Previous />
      <BranchPicker.Number /> / <BranchPicker.Count />
      <BranchPicker.Next />
    </BranchPicker>
  </div>;
var UserMessage = () => null;
var wrapper = css({ padding: "16", display: "flex", flexDirection: "column" });
var BranchPickerDemoExample = () => <MockRuntimeProvider initialMessages={sampleMessages}>
    <div className={wrapper}>
      <ThreadPrimitive.Root>
        <ThreadPrimitive.Messages components={{ AssistantMessage, UserMessage }} />
      </ThreadPrimitive.Root>
    </div>
  </MockRuntimeProvider>;
var BranchPickerDemo_example_default = BranchPickerDemoExample;
export {
  BranchPickerDemo_example_default as default
};