#Thumbs up and Thumbs down buttons on CopilotChat v2 not rendering

1 messages · Page 1 of 1 (latest)

tulip radish
#

Hi,

Firstly, nice work on Copilot Kit.

I am using the new CopilotChat v2 components; however, I cannot get the thumbs up and thumbs down components to render. I have also tried to assign the onClick handlers for both via the messageView, assistantMessage props however they don't seem to be passed to the child component correctly.

I have included my sample code below. Any help will be greatly appreciated.

"use client";

import { useCopilotAction } from "@copilotkit/react-core";
import { CopilotChat, type AssistantMessage } from "@copilotkit/react-core/v2";

export default function CopilotKitPage() {

  const handleThumbsDown = (message: AssistantMessage) => {
    console.log("Thumbs down clicked for message:", message);
    alert("Sorry to hear that! We'll strive to do better.");
  };

  const handleThumbsUp = (message: AssistantMessage) => {
    console.log("Thumbs up clicked for message:", message);
    alert("Thanks for the feedback!");
  };

  return (
    <main className="flex justify-center items-center min-h-screen w-full">
      <CopilotChat
        className="w-4/5 min-h-screen"
        messageView={{
          assistantMessage: {
            onThumbsUp: handleThumbsUp,
            onThumbsDown: handleThumbsDown,
          },
        }}
        labels={{
          modalHeaderTitle: "Chat with your assistant",
          chatInputPlaceholder: "How can I help you today?",
          chatDisclaimerText: "",
          assistantMessageToolbarThumbsUpLabel: "Thumbs up",
          assistantMessageToolbarThumbsDownLabel: "Thumbs down",
        }}
      />
    </main>
  );
}
cobalt riverBOT
#

This solution has been AI generated

Thumbs buttons in CopilotChat v2 render only when you pass onThumbsUp/onThumbsDown to the CopilotChat component itself. The messageView.assistantMessage path isn’t a recognized prop in v2, and the correct component import is from @copilotkit/react-ui (v2 styling available via /v2).

Fix

  • Import CopilotChat from the UI package (v2):
import { CopilotChat } from "@copilotkit/react-ui/v2";
  • Pass feedback handlers at the top level (buttons appear on assistant messages when these are provided):
export default function CopilotKitPage() {
  const handleThumbsDown = (message) => {
    console.log("Thumbs down clicked for message:", message);
    alert("Sorry to hear that! We'll strive to do better.");
  };

  const handleThumbsUp = (message) => {
    console.log("Thumbs up clicked for message:", message);
    alert("Thanks for the feedback!");
  };

  return (
    <main className="flex justify-center items-center min-h-screen w-full">
      <CopilotChat
        className="w-4/5 min-h-screen"
        onThumbsUp={handleThumbsUp}
        onThumbsDown={handleThumbsDown}
        labels={{
          thumbsUp: "Thumbs up",
          thumbsDown: "Thumbs down",
        }}
      />
    </main>
  );
}

Notes

  • In v2, there is no messageView prop; use top-level onThumbsUp/onThumbsDown or provide a custom AssistantMessage component if you need deeper customization.
  • Labels can be customized via the labels prop (e.g., thumbsUp, thumbsDown).

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve:

#

Thank you for your feedback! Our team will provide additional assistance. 🔄

tulip radish
#

This example is from v1 of the component not v2

cobalt riverBOT
#

Hi @tulip radish Let me check with the team if anything changed with thumbs up/down in v2. I'll get back to you!