Activity

The side sheet listing the search steps and sources.

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

import { ChatgptActivity } from "../components/chatgpt-activity";
import { CHATGPT_STORY_SEARCH } from "../constants/chatgpt-story";

export default function ChatgptActivityExample() {
  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">
      <ChatgptActivity
        seconds={21}
        sites={CHATGPT_STORY_SEARCH.sites}
        sourceCount={CHATGPT_STORY_SEARCH.sourceCount}
        sources={CHATGPT_STORY_SEARCH.sources}
        websites={CHATGPT_STORY_SEARCH.websites}
      />
    </Card>
  );
}

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

ChatgptActivity renders a ChatgptSearch that opens a shadcn Sheet from the right. The sheet shows the searched sites as pills, three by name and the rest as a stacked “+ N more”, then every source. The steps and sources are shadcn Item rows in a ScrollArea, joined by a vertical Separator, and a source with href renders its row as a link. Favicons use shadcn Avatar and load from Google’s favicon service unless you pass your own.

interface ChatgptActivitySite {
  domain: string;
  favicon?: string;
  label: string;
}

interface ChatgptActivitySource {
  domain: string;
  favicon?: string;
  href?: string;
  id: string;
  publisher: string;
  snippet: string;
  timeLabel: string;
  title: string;
}

Used in