0.1 → 0.2 마이그레이션

// Before — StickToBottom props (initial / resize)
<Conversation initial="smooth" resize="smooth">
  <ConversationContent>
    {messages.map((msg) => (
      <Message key={msg.id} from={msg.role}>...</Message>
    ))}
  </ConversationContent>
</Conversation>

// After — 자체 엔진 props + 턴 앵커링
<Conversation autoScroll scrollPreviousItemPeek={64}>
  <ConversationContent>
    {messages.map((msg) => (
      // user 턴을 앵커로 지정하면 전송 시 상단에 정착
      <ConversationMessage
        key={msg.id}
        messageId={msg.id}
        scrollAnchor={msg.role === "user"}
      >
        <Message from={msg.role}>...</Message>
      </ConversationMessage>
    ))}
  </ConversationContent>
  <ConversationScrollButton />
</Conversation>

// app/layout.tsx (또는 globals.css)
import "@reopt-ai/opt-chat/styles.css";

// Before (0.1) — children 자동 감지 (deprecated)
<MessageBranch totalBranches={messages.length}>
  <MessageBranchContent>
    {messages.map((m) => <MessageBubble key={m.id}>{m.text}</MessageBubble>)}
  </MessageBranchContent>
  <MessageBranchSelector />
</MessageBranch>

// After (0.2) — branches prop으로 명시
<MessageBranch>  {/* totalBranches 자동 감지 */}
  <MessageBranchContent
    branches={messages.map((m) => (
      <MessageBubble key={m.id}>{m.text}</MessageBubble>
    ))}
  />
  <MessageBranchSelector />
</MessageBranch>

// 에이전트 그래프가 필요한 페이지에서만
import { Canvas, Node, Edge, Controls } from "@reopt-ai/opt-chat/flow";

// peer 의존성 설치
// bun add @xyflow/react