Actions

Copy, share, redo and more buttons under an answer.

"use client";

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

import { ChatgptActions } from "../components/chatgpt-actions";

export default function ChatgptActionsExample() {
  return (
    <Card className="border-chatgpt-border bg-chatgpt-bg font-chatgpt text-chatgpt-fg w-full min-w-0 items-start gap-0 rounded-2xl border p-6 text-base ring-0">
      <ChatgptActions text="Anytime 😭" />
    </Card>
  );
}

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

Each action is a ghost shadcn Button with a shadcn Tooltip. Copy writes text to the clipboard and shows a check for 1.5 seconds. The rest call your handlers.

Prop	Default	Description
`text`		What Copy puts on the clipboard.
`onShare`		Called by Share.
`onRedo`		Called by Redo.
`onMore`		Called by More.

ChatgptActionButton is exported too, if you want to add your own action.

Used in

ChatGPT

A full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker.