User message actions

"use client"

import * as React from "react"
import { Message } from "@/components/candor/message"
import { MessageBranches } from "@/components/candor/message-branches"
import { UserMessageActions } from "@/components/candor/user-message-actions"

/*
 * The app keeps the versions: Edit hands back the words (here they'd go to the composer), and what the person sends
 * is a new message. MessageBranches pages through the versions the app kept.
 */
const versions = ["Draft the launch note", "Draft the launch note for the EU team"]

export default function Example() {
  const [index, setIndex] = React.useState(versions.length - 1)
  const [editing, setEditing] = React.useState<string | null>(null)
  const text = versions[index]!
  return (
    <div className="flex max-w-md flex-col gap-2 text-sm">
      <Message
        message={{ id: "m1", author: { role: "user" }, status: "complete", blocks: [{ kind: "plain", text }] }}
        meta={
          <UserMessageActions text={text} onEdit={setEditing}>
            <MessageBranches index={index} count={versions.length} onValueChange={setIndex} />
          </UserMessageActions>
        }
      />
      <p className="text-xs text-muted-foreground">{editing === null ? "Choose Edit to put the words back in the composer." : `In the composer: “${editing}”`}</p>
    </div>
  )
}