MessageRating

function Example() {
  const [rating, setRating] = useState();
  const [dislikeOpen, setDislikeOpen] = useState(false);
  return (
    <div className="flex items-center gap-1">
      <MessageRating
        rating={rating}
        pending={false}
        dislikeOpen={dislikeOpen}
        onDislikeOpenChange={setDislikeOpen}
        onRate={(next) => {
          setRating(next ?? undefined);
          setDislikeOpen(false);
        }}
      />
    </div>
  );
}

render(<Example />);