User Actions

The time, edit and copy controls beside a user message.

import { Card } from "@/components/ui/card";

import { PerplexityMessage } from "../components/perplexity-message";
import { PerplexityUserActions } from "../components/perplexity-user-actions";

const QUESTION = "who did notion buy to build notion mail?";

export default function PerplexityUserActionsExample() {
  return (
    <Card className="bg-pplx-bg ring-pplx-border flex w-full min-w-0 flex-col gap-6 rounded-2xl p-6">
      <PerplexityMessage
        actions={<PerplexityUserActions text={QUESTION} timestamp="09:18" />}
        from="user"
      >
        {QUESTION}
      </PerplexityMessage>
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/perplexity-user-actions

Perplexity keeps these visible next to your own messages. They render before the pill, so pass them to the actions prop of a PerplexityMessage with from="user". Edit and Copy are shadcn Buttons with a Tooltip, and Copy switches to a check for a moment.

Prop	Default	Description
`text`		The message text that Copy puts on the clipboard.
`timestamp`		Shown before the buttons, like `09:18`.
`onEdit`		Called when Edit is clicked.

Used in

Perplexity

A full recreation of a Perplexity thread with search steps, citations with hover cards and the composer.