pnpm dlx shadcn@latest add button separator

"use client";import { makeAssistantTool } from "@assistant-ui/react";import {  MessageDraft,  MessageDraftErrorBoundary,  parseSerializableMessageDraft,  SerializableMessageDraftSchema,  type SerializableMessageDraft,  type MessageDraftOutcome,} from "@/components/tool-ui/message-draft";export const MessageDraftTool = makeAssistantTool<  SerializableMessageDraft,  MessageDraftOutcome>({  toolName: "draftMessage",  description: "Draft a message for the user to review before sending.",  parameters: SerializableMessageDraftSchema,  render: ({ args, result, addResult, toolCallId }) => {    // Wait for channel to determine which fields are required    if (!(args as any)?.channel || !(args as any)?.body) return null;    const draft = parseSerializableMessageDraft({      ...args,      id: (args as any)?.id ?? `message-draft-${toolCallId}`,    });    return (      <MessageDraftErrorBoundary>        {result !== undefined ? (          <MessageDraft {...draft} outcome={result} />        ) : (          <MessageDraft            {...draft}            onSend={async () => {              // Perform actual send logic here              await sendMessage(draft);              addResult("sent");            }}            onCancel={() => addResult("cancelled")}          />        )}      </MessageDraftErrorBoundary>    );  },});