opt-chat

"use client";

import { DefaultChatTransport } from "ai";
import {
  useChatSession,
  Conversation,
  ConversationContent,
  ConversationMessage,
  ConversationScrollButton,
  Message,
  MessageContent,
  MessageParts,
  PromptInput,
  PromptInputAttachments,
  PromptInputTextarea,
  PromptInputFooter,
  PromptInputSubmit,
} from "@reopt-ai/opt-chat";

export default function ChatPage() {
  const session = useChatSession({
    transport: new DefaultChatTransport({ api: "/api/chat" }),
  });

  return (
    <div className="flex h-dvh flex-col">
      <Conversation>
        <ConversationContent>
          {session.messages.map((msg) => (
            // user 턴에 scrollAnchor — 전송 시 질문이 상단에 정착
            <ConversationMessage
              key={msg.id}
              messageId={msg.id}
              scrollAnchor={msg.role === "user"}
            >
              <Message from={msg.role}>
                <MessageContent>
                  <MessageParts parts={msg.parts} isStreaming={session.isStreaming} />
                </MessageContent>
              </Message>
            </ConversationMessage>
          ))}
        </ConversationContent>
        <ConversationScrollButton />
      </Conversation>
      <PromptInput onSubmit={session.handleSubmit}>
        <PromptInputAttachments />
        <PromptInputTextarea />
        <PromptInputFooter>
          <PromptInputSubmit />
        </PromptInputFooter>
      </PromptInput>
    </div>
  );
}