Actions

The action bar under an answer, with the sources count.

"use client";

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

import { PerplexityActions } from "../components/perplexity-actions";
import { PERPLEXITY_DEMO_SOURCES } from "../constants/perplexity-demo";

export default function PerplexityActionsExample() {
  return (
    <Card className="bg-pplx-bg ring-pplx-border w-full min-w-0 gap-0 rounded-2xl p-6">
      <div className="mx-auto max-w-2xl">
        <PerplexityActions
          sources={PERPLEXITY_DEMO_SOURCES}
          text="Notion bought Skiff to build Notion Mail."
        />
      </div>
    </Card>
  );
}

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

Every action is a ghost shadcn Button with a shadcn Tooltip. Rewrite opens a shadcn Popover with the Rewrite Panel. More opens a shadcn DropdownMenu with Download and a Rewrite submenu that holds the same panel. Copy writes text to the clipboard and shows a check for 1.5 seconds. When you pass sources, a static PerplexitySourcesSummary sits after Rewrite.

Prop	Default	Description
`text`		The answer text Copy writes to the clipboard.
`sources`		Shows the stacked favicons and the count.
`models`	`PERPLEXITY_MODELS`	The model list of the Rewrite panel.
`onShare`, `onDownload`		Left-side actions.
`onRewrite`		Called with `{ mode }` when Rewrite is pressed in the panel.
`onGoodResponse`, `onBadResponse`, `onMore`		Right-side actions.

Used in

Perplexity

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