Message

A user pill or an assistant answer with search and action slots.

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

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

export default function PerplexityMessageExample() {
  return (
    <Card className="bg-pplx-bg ring-pplx-border flex w-full min-w-0 flex-col gap-6 rounded-2xl p-6">
      <PerplexityMessage from="user">
        who did notion buy to build notion mail?
      </PerplexityMessage>
      <PerplexityMessage from="assistant">
        Notion bought Skiff, the team and technology behind what later became
        Notion Mail.
      </PerplexityMessage>
    </Card>
  );
}

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

User turns sit in a gray pill aligned to the end. Assistant answers use Perplexity’s serif at 16px. Assistant turns stack the search slot, the answer and the actions slot, capped at Perplexity’s 42rem reading width.

Prop	Default	Description
`from`		`"user"` or `"assistant"`.
`search`		Rendered above the answer, usually a `PerplexitySearch`.
`actions`		Below an answer, usually `PerplexityActions`. On a user turn it sits before the pill, usually `PerplexityUserActions`.

Used in

Perplexity

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