FeedbackBar

Response action toolbar with thumbs up/down feedback, copy to clipboard, and regenerate. The primary mechanism for users to signal response quality.

FeedbackBar — Live Demo

The transformer architecture uses self-attention to process sequences in parallel, enabling efficient training on modern GPUs. This was a fundamental shift from recurrent approaches.

FeedbackBar — Default (no children)

When no children are provided, FeedbackBar renders ThumbsUp + ThumbsDown + Copy by default.

Import

tsx

import { FeedbackBar } from "@arc-lo/ui";

Basic usage

tsx

<FeedbackBar.Root onFeedback={(value) => trackFeedback(value)}>
  <FeedbackBar.ThumbsUp />
  <FeedbackBar.ThumbsDown />
  <FeedbackBar.Copy text={responseText} />
  <FeedbackBar.Regenerate onRegenerate={() => regenerate()} />
</FeedbackBar.Root>

Default (no children)

tsx

{/* Renders ThumbsUp + ThumbsDown + Copy */}
<FeedbackBar.Root onFeedback={handleFeedback} />

With StreamingText

tsx

<StreamingText.Root stream={stream}>
  <StreamingText.Content />
  <StreamingText.Cursor />
  <StreamingText.Toolbar>
    <FeedbackBar.Root onFeedback={handleFeedback}>
      <FeedbackBar.ThumbsUp />
      <FeedbackBar.ThumbsDown />
      <FeedbackBar.Copy />
      <FeedbackBar.Regenerate onRegenerate={regenerate} />
    </FeedbackBar.Root>
  </StreamingText.Toolbar>
</StreamingText.Root>

Parts

Part	Description
`Root`	Toolbar container with feedback state
`ThumbsUp`	Toggle positive feedback
`ThumbsDown`	Toggle negative feedback
`Copy`	Copy text to clipboard with checkmark confirmation
`Regenerate`	Trigger response regeneration

Props

Root

Prop	Type	Default	Description
`onFeedback`	`(value: "up" \| "down" \| null) => void`	—	Called when feedback changes