Vercel AI SDK

12345678910111213141516171819202122import { useChat } from "@ai-sdk/react";
import type { ChatTransport, UIMessage } from "ai";
import { createAiSdkAdapter } from "@ghost-ui/core/chat-adapter-ai-sdk";
import { useChatAdapter } from "@ghost-ui/core/chat-runtime-react";
import { Button } from "@ghost-ui/core/components/button";
import { Message, MessageBody } from "@ghost-ui/core/components/message";
import { MessageParts } from "@ghost-ui/core/components/message-parts";
const adapter = createAiSdkAdapter();
export function AiSdkConversation({ transport }: { transport: ChatTransport<UIMessage> }) {
  const chat = useChat({ transport });
  const runtime = useChatAdapter(adapter, chat, { identity: { threadId: "brief", revision: 0 } });
  const { messages, controller } = runtime;
  return <section aria-label="Conversation">
    {messages.map(message => <Message key={message.id} actor={message.actor} aria-label={message.actor}><MessageBody>
      <MessageParts parts={message.parts} />
    </MessageBody></Message>)}
    <Button type="button" disabled={runtime.capabilities.send.support !== "supported" || !runtime.capabilities.send.available}
      onClick={() => void controller.send({ text: "Summarize the brief", attachments: [] })}>Summarize</Button>
    {controller.status === "streaming" && <Button type="button" onClick={() => void controller.stop?.()}>Stop</Button>}
    {controller.error && <p role="alert">Could not complete the request.</p>}
  </section>;
}