Message actions

"use client"
import * as React from "react"import { RefreshCwIcon, Share2Icon } from "lucide-react"
import { AiMark } from "@/components/ui/ai-mark"import { Bubble, BubbleContent } from "@/components/ui/bubble"import { Message, MessageContent, MessageHeader } from "@/components/ui/message"import {  MessageAction,  MessageActionCopy,  MessageActionFeedback,  MessageActions,  MessageVersions,} from "@/components/ui/message-actions"
const versions = [  "Net revenue retention for Q3 is 112%. Expansion from Halcyon Health and Orbis Retail added $186,000, and churn removed $74,000.",  "NRR is 112% for Q3. Expansion added $186,000 (mostly Halcyon Health and Orbis Retail) against $74,000 of churn and contraction, up from 108% in Q2.",]
export default function MessageActionsHover() {  const [version, setVersion] = React.useState(2)  return (    <div className="flex w-full max-w-xl flex-col gap-8">      <Message from="user">        <MessageContent>          <Bubble align="end">            <BubbleContent>What is our net revenue retention for Q3?</BubbleContent>          </Bubble>          <MessageActions className="justify-end">            <MessageActionCopy value="What is our net revenue retention for Q3?" />          </MessageActions>        </MessageContent>      </Message>      <Message from="assistant">        <MessageContent className="gap-2">          <MessageHeader>            <AiMark model="Generated by Claude Opus 5.5" />            Ledgerline Copilot          </MessageHeader>          <p>{versions[version - 1]}</p>          <MessageActions visibility="always">            <MessageActionCopy value={versions[version - 1]} />            <MessageAction label="Regenerate">              <RefreshCwIcon />            </MessageAction>            <MessageActionFeedback />            <MessageAction label="Share">              <Share2Icon />            </MessageAction>            <MessageVersions value={version} total={versions.length} onValueChange={setVersion} />          </MessageActions>        </MessageContent>      </Message>      <p className="text-[13px] text-muted-foreground">Hover the question to see its copy action. The latest answer keeps its actions visible.</p>    </div>  )}

"use client"
import * as React from "react"import { RefreshCwIcon } from "lucide-react"
import {  MessageAction,  MessageActionCopy,  MessageActionFeedback,  MessageActions,  type FeedbackValue,} from "@/components/ui/message-actions"
export default function MessageActionsFeedback() {  const [value, setValue] = React.useState<FeedbackValue>(null)  const [last, setLast] = React.useState<string>("")  return (    <div className="flex flex-col items-center gap-4">      <MessageActions visibility="always">        <MessageActionCopy value="Q3 NRR is 112%." />        <MessageAction label="Regenerate">          <RefreshCwIcon />        </MessageAction>        <MessageActionFeedback          value={value}          onValueChange={setValue}          reasons={["Wrong numbers", "Missing accounts", "Out of date", "Too long"]}          onFeedback={(feedback) => setLast(feedback.reasons.join(", ") || feedback.comment)}        />      </MessageActions>      <p className="text-[13px] text-muted-foreground tabular-nums" aria-live="polite">        {value === "up" && "Rated good"}        {value === "down" && (last ? `Rated bad: ${last}` : "Rated bad")}        {value === null && "Press thumbs down to open the feedback form"}      </p>    </div>  )}