Actions

The good and bad response buttons under a reply.

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

import { GeminiActions } from "../components/gemini-actions";
import { GeminiStoryText } from "../components/gemini-story-text";
import { GEMINI_STORY_ASSISTANT_MESSAGES } from "../constants/gemini-story";

const [MESSAGE] = GEMINI_STORY_ASSISTANT_MESSAGES;

export default function GeminiActionsExample() {
  return (
    <Card className="border-gemini-border bg-gemini-bg font-gemini text-gemini-fg flex w-full min-w-0 flex-col items-start gap-3 overflow-hidden rounded-2xl border px-4 py-8 text-base ring-0">
      <GeminiStoryText sources={MESSAGE.sources} text={MESSAGE.text} />
      <GeminiActions className="-ms-1.5" />
    </Card>
  );
}

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

GeminiActions renders Gemini’s row of round icon buttons, thumbs up and thumbs down. Each one is a shadcn Button with a shadcn Tooltip below it.

Prop	Default	Description
`onGoodResponse`		Called when the thumbs up is clicked.
`onBadResponse`		Called when the thumbs down is clicked.

Build your own row from GeminiActionButton, which takes a label for its tooltip and aria-label. Wrap the row in a shadcn TooltipProvider:

<TooltipProvider delay={200}>
  <GeminiActionButton label="Regenerate" onClick={regenerate}>
    <RefreshCwIcon />
  </GeminiActionButton>
</TooltipProvider>

Used in

Gemini

A full recreation of the Gemini chat with the animated sparkle, streamed replies and a model picker.