Message actionsNew

$pnpm dlx shadcn@latest add @nextui/message-actions

1{
2  "registries": {
3    "@nextui": {
4      "url": "https://nextui.dev/r/{name}.json",
5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
6    }
7  }
8}

1"use client";
2
3import { useChat } from "@ai-sdk/react";
4import { MessageActions } from "@/components/nextui/message-actions";
5
6export function Messages() {
7  const { messages, regenerate, status } = useChat();
8
9  return messages.map((message, i) => {
10    const text = message.parts.map((p) => (p.type === "text" ? p.text : "")).join("");
11    if (message.role !== "assistant") return <p key={message.id}>{text}</p>;
12    const last = i === messages.length - 1;
13
14    return (
15      <MessageActions
16        key={message.id}
17        text={text}
18        // AI SDK regenerate() replaces the last assistant message.
19        onRegenerate={last ? () => regenerate() : undefined}
20        regenerating={last && status === "streaming"}
21        onFeedback={(feedback, reason) =>
22          fetch("/api/feedback", { method: "POST", body: JSON.stringify({ id: message.id, feedback, reason }) })
23        }
24      >
25        <p>{text}</p>
26      </MessageActions>
27    );
28  });
29}