AI Feedback Buttons

Quick, binary feedback controls (e.g., thumbs up/down) to capture whether AI-generated output was helpful. Use to refine AI suggestions and guide future results.

Overview

Resources

Figma

Install


yarn add @camp/ai-feedback-buttons

Variations

Usage pattern

The current usage pattern is to use the handleThumbsUp and handleThumbsDown functions to call pendoTrackEvent or some other related callback functions to record the feedback. Then, the feedbackState should be updated to the new state and the buttons become disabled after the feedback is recorded.


import { AiFeedbackButtons, STATUS, type FeedbackState } from '@camp/ai-feedback-buttons';
import { useState } from 'react';
 
const MyFeedbackButtons = () => {
  const [state, setState] = useState<FeedbackState>({
    submitted: false,
    feedback: undefined,
  });
 
  const handleThumbsUp = async () => {
    return await new Promise((resolve) =>
      resolve(console.log('pendoTrackEvent, or some other callback')),
    ).then(() => {
      const likedState: FeedbackState = {
        submitted: true,
        feedback: STATUS.LIKED,
      };
      setState(likedState);
      return likedState;
    });
  };
 
  const handleThumbsDown = async () => {
    return await new Promise((resolve) =>
      resolve(console.log('pendoTrackEvent, or some other callback')),
    ).then(() => {
      const dislikedState: FeedbackState = {
        submitted: true,
        feedback: STATUS.DISLIKED,
      };
      setState(dislikedState);
      return dislikedState;
    });
  };
 
  return (
    <AiFeedbackButtons
      handleThumbsUp={handleThumbsUp}
      handleThumbsDown={handleThumbsDown}
      feedbackState={state}
      disabled={state.submitted}
    />
  );
},

Default

By default, the component shows an animation when the like button is clicked. No disabled or selected states are persisted; these must be managed by the parent component.

Feedback states


import { AiFeedbackButtons, STATUS } from '@camp/ai-feedback-buttons';
 
const MyFeedbackButtons = () => (
  <>
    // No feedback selected
    <AiFeedbackButtons feedbackState={{ submitted: false, feedback: undefined }} />
    // Thumbs up selected
    <AiFeedbackButtons feedbackState={{ submitted: true, feedback: STATUS.LIKED }} />
    // Thumbs down selected
    <AiFeedbackButtons feedbackState={{ submitted: true, feedback: STATUS.DISLIKED }} />
  </>
);

Disabled states


import { AiFeedbackButtons } from '@camp/ai-feedback-buttons';
 
const MyFeedbackButtons = () => <AiFeedbackButtons disabled />;

Customizing icon wrappers

The component allows for customizing the icon wrappers for the liked and disliked states. This is useful for adding a tooltip or other wrapping element around the icon.

The renderLikedIcon and renderDislikedIcon props receive one argument which is the default icon component for the liked and disliked states respectively, and should return a React Node.


// Customizing icon wrappers
<AiFeedbackButtons
  feedbackState={{ submitted: true, feedback: STATUS.LIKED }}
  handleThumbsUp={async () => ({ submitted: true, feedback: STATUS.LIKED })}
  handleThumbsDown={async () => ({ submitted: true, feedback: STATUS.DISLIKED })}
  renderLikedIcon={(Icon) => (
    <Tooltip content="Like">
      <Icon />
    </Tooltip>
  )}
  renderDislikedIcon={(Icon) => (
    <Tooltip content="Dislike">
      <Icon />
    </Tooltip>
  )}
/>

Accessibility

Keyboard support

Tab: Moves focus to each feedback button.
Enter/Space: Activates the focused button.