@copilotkit/react-ui 1.68.1 → 1.68.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-ui",
-  "version": "1.68.1",
+  "version": "1.68.2",
   "private": false,
   "keywords": [
     "ai",
@@ -49,9 +49,9 @@
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@copilotkit/runtime-client-gql": "1.68.1",
-    "@copilotkit/react-core": "1.68.1",
-    "@copilotkit/shared": "1.68.1"
+    "@copilotkit/react-core": "1.68.2",
+    "@copilotkit/runtime-client-gql": "1.68.2",
+    "@copilotkit/shared": "1.68.2"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",

package/src/components/chat/Chat.tsx

@@ -102,6 +102,8 @@ import type {
   UserMessageProps,
 } from "./props";
 
+import type { FeedbackKind } from "./feedback";
+import { applyFeedbackClick } from "./feedback";
 import { AttachmentQueue } from "./AttachmentQueue";
 import type { Attachment, AttachmentsConfig } from "./props";
 import {
@@ -185,14 +187,20 @@ export interface CopilotChatProps {
   onCopy?: (message: string) => void;
 
   /**
-   * A callback function for thumbs up feedback
+   * A callback function for thumbs up feedback.
+   *
+   * `isActive` reports the feedback state the click is transitioning to:
+   * `true` when thumbs up is being applied, `false` when it is being
+   * retracted. It is optional so existing one-argument handlers keep working.
    */
-  onThumbsUp?: (message: Message) => void;
+  onThumbsUp?: (message: Message, isActive?: boolean) => void;
 
   /**
-   * A callback function for thumbs down feedback
+   * A callback function for thumbs down feedback.
+   *
+   * See `onThumbsUp` for the meaning of `isActive`.
    */
-  onThumbsDown?: (message: Message) => void;
+  onThumbsDown?: (message: Message, isActive?: boolean) => void;
 
   /**
    * A list of markdown components to render in assistant message.
@@ -894,34 +902,36 @@ export function CopilotChat({
     }
   };
 
-  const handleThumbsUp = (message: Message) => {
-    if (onThumbsUp) {
-      onThumbsUp(message);
-    }
-
-    // Update feedback state
-    setMessageFeedback((prev) => ({
-      ...prev,
-      [message.id]: "thumbsUp",
-    }));
+  // `isActive` is the state the click transitions to. The built-in
+  // AssistantMessage derives it from the message's current feedback so a second
+  // click on an active button retracts it; a custom AssistantMessage may pass
+  // its own value. When omitted, treat the click as applying feedback.
+  const recordFeedback = (
+    message: Message,
+    kind: FeedbackKind,
+    isActive?: boolean,
+  ) => {
+    const nextActive = isActive ?? true;
 
-    // Trigger feedback given event
-    triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsUp");
-  };
+    setMessageFeedback((prev) =>
+      applyFeedbackClick(prev, message.id, kind, nextActive),
+    );
 
-  const handleThumbsDown = (message: Message) => {
-    if (onThumbsDown) {
-      onThumbsDown(message);
+    // `onFeedbackGiven` has no way to express a retraction, so only report the
+    // click that applies feedback.
+    if (nextActive) {
+      triggerObservabilityHook("onFeedbackGiven", message.id, kind);
     }
+  };
 
-    // Update feedback state
-    setMessageFeedback((prev) => ({
-      ...prev,
-      [message.id]: "thumbsDown",
-    }));
+  const handleThumbsUp = (message: Message, isActive?: boolean) => {
+    onThumbsUp?.(message, isActive ?? true);
+    recordFeedback(message, "thumbsUp", isActive);
+  };
 
-    // Trigger feedback given event
-    triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsDown");
+  const handleThumbsDown = (message: Message, isActive?: boolean) => {
+    onThumbsDown?.(message, isActive ?? true);
+    recordFeedback(message, "thumbsDown", isActive);
   };
 
   return (

package/src/components/chat/feedback.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import {
+  applyFeedbackClick,
+  isActivatingClick,
+  type MessageFeedbackMap,
+} from "./feedback";
+
+describe("isActivatingClick (#2615)", () => {
+  it("activates when no feedback has been given", () => {
+    expect(isActivatingClick(null, "thumbsUp")).toBe(true);
+    expect(isActivatingClick(undefined, "thumbsDown")).toBe(true);
+  });
+
+  it("deactivates when clicking the already-active button", () => {
+    expect(isActivatingClick("thumbsUp", "thumbsUp")).toBe(false);
+    expect(isActivatingClick("thumbsDown", "thumbsDown")).toBe(false);
+  });
+
+  it("activates when switching to the opposite button", () => {
+    expect(isActivatingClick("thumbsDown", "thumbsUp")).toBe(true);
+    expect(isActivatingClick("thumbsUp", "thumbsDown")).toBe(true);
+  });
+});
+
+describe("applyFeedbackClick (#2615)", () => {
+  it("records feedback for a message that had none", () => {
+    expect(applyFeedbackClick({}, "m1", "thumbsUp", true)).toEqual({
+      m1: "thumbsUp",
+    });
+  });
+
+  it("replaces the opposite feedback rather than keeping both", () => {
+    const previous: MessageFeedbackMap = { m1: "thumbsDown" };
+    expect(applyFeedbackClick(previous, "m1", "thumbsUp", true)).toEqual({
+      m1: "thumbsUp",
+    });
+  });
+
+  it("removes the entry when the click retracts feedback", () => {
+    const previous: MessageFeedbackMap = { m1: "thumbsUp", m2: "thumbsDown" };
+    const next = applyFeedbackClick(previous, "m1", "thumbsUp", false);
+
+    expect(next).toEqual({ m2: "thumbsDown" });
+    expect("m1" in next).toBe(false);
+  });
+
+  it("leaves other messages untouched", () => {
+    const previous: MessageFeedbackMap = { m1: "thumbsUp" };
+    expect(applyFeedbackClick(previous, "m2", "thumbsDown", true)).toEqual({
+      m1: "thumbsUp",
+      m2: "thumbsDown",
+    });
+  });
+
+  it("does not mutate the map it is given", () => {
+    const previous: MessageFeedbackMap = { m1: "thumbsUp" };
+    applyFeedbackClick(previous, "m1", "thumbsUp", false);
+    expect(previous).toEqual({ m1: "thumbsUp" });
+  });
+
+  it("returns the same reference when nothing changes", () => {
+    const previous: MessageFeedbackMap = { m1: "thumbsUp" };
+    expect(applyFeedbackClick(previous, "m1", "thumbsUp", true)).toBe(previous);
+    expect(applyFeedbackClick(previous, "m2", "thumbsUp", false)).toBe(
+      previous,
+    );
+  });
+
+  it("round-trips a toggle back to the starting state", () => {
+    const applied = applyFeedbackClick({}, "m1", "thumbsUp", true);
+    const retracted = applyFeedbackClick(applied, "m1", "thumbsUp", false);
+    expect(retracted).toEqual({});
+  });
+});

package/src/components/chat/feedback.ts

@@ -0,0 +1,38 @@
+export type FeedbackKind = "thumbsUp" | "thumbsDown";
+
+export type MessageFeedbackMap = Record<string, FeedbackKind>;
+
+/**
+ * The feedback state a click on `kind` transitions to.
+ *
+ * Clicking the button that is already active retracts the feedback, so the
+ * click deactivates it; every other click applies feedback.
+ */
+export function isActivatingClick(
+  current: FeedbackKind | null | undefined,
+  kind: FeedbackKind,
+): boolean {
+  return current !== kind;
+}
+
+/**
+ * Applies a feedback click to the message-id keyed map.
+ *
+ * A deactivating click removes the entry entirely rather than storing a falsy
+ * value, so `messageFeedback[id]` stays absent for "no feedback given".
+ */
+export function applyFeedbackClick(
+  previous: MessageFeedbackMap,
+  messageId: string,
+  kind: FeedbackKind,
+  isActive: boolean,
+): MessageFeedbackMap {
+  if (!isActive) {
+    if (!(messageId in previous)) return previous;
+    const { [messageId]: _retracted, ...rest } = previous;
+    return rest;
+  }
+
+  if (previous[messageId] === kind) return previous;
+  return { ...previous, [messageId]: kind };
+}

package/src/components/chat/messages/AssistantMessage.tsx

@@ -4,6 +4,7 @@ import { Markdown } from "../Markdown";
 import { useState } from "react";
 import React from "react";
 import { copyToClipboard } from "@copilotkit/shared";
+import { isActivatingClick } from "../feedback";
 
 export const AssistantMessage = (props: AssistantMessageProps) => {
   const { icons, labels } = useChatContext();
@@ -36,15 +37,17 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
     if (onRegenerate) onRegenerate();
   };
 
+  // Clicking the already-active button retracts the feedback, so report the
+  // state the click transitions to rather than an unconditional `true`.
   const handleThumbsUp = () => {
     if (onThumbsUp && message) {
-      onThumbsUp(message);
+      onThumbsUp(message, isActivatingClick(feedback, "thumbsUp"));
     }
   };
 
   const handleThumbsDown = () => {
     if (onThumbsDown && message) {
-      onThumbsDown(message);
+      onThumbsDown(message, isActivatingClick(feedback, "thumbsDown"));
     }
   };
 

package/src/components/chat/props.ts

@@ -118,14 +118,20 @@ export interface MessagesProps {
   onCopy?: (message: string) => void;
 
   /**
-   * Callback function for thumbs up feedback
+   * Callback function for thumbs up feedback.
+   *
+   * `isActive` reports the feedback state the click is transitioning to:
+   * `true` when thumbs up is being applied, `false` when it is being
+   * retracted. It is optional so existing one-argument handlers keep working.
    */
-  onThumbsUp?: (message: Message) => void;
+  onThumbsUp?: (message: Message, isActive?: boolean) => void;
 
   /**
-   * Callback function for thumbs down feedback
+   * Callback function for thumbs down feedback.
+   *
+   * See `onThumbsUp` for the meaning of `isActive`.
    */
-  onThumbsDown?: (message: Message) => void;
+  onThumbsDown?: (message: Message, isActive?: boolean) => void;
 
   /**
    * Map of message IDs to their feedback state
@@ -214,14 +220,20 @@ export interface AssistantMessageProps {
   onCopy?: (message: string) => void;
 
   /**
-   * Callback function for thumbs up feedback
+   * Callback function for thumbs up feedback.
+   *
+   * `isActive` reports the feedback state the click is transitioning to:
+   * `true` when thumbs up is being applied, `false` when it is being
+   * retracted. It is optional so existing one-argument handlers keep working.
    */
-  onThumbsUp?: (message: Message) => void;
+  onThumbsUp?: (message: Message, isActive?: boolean) => void;
 
   /**
-   * Callback function for thumbs down feedback
+   * Callback function for thumbs down feedback.
+   *
+   * See `onThumbsUp` for the meaning of `isActive`.
    */
-  onThumbsDown?: (message: Message) => void;
+  onThumbsDown?: (message: Message, isActive?: boolean) => void;
 
   /**
    * The feedback state for this message ("thumbsUp" or "thumbsDown")
@@ -310,14 +322,20 @@ export interface RenderMessageProps {
   onCopy?: (message: string) => void;
 
   /**
-   * Callback function for thumbs up feedback
+   * Callback function for thumbs up feedback.
+   *
+   * `isActive` reports the feedback state the click is transitioning to:
+   * `true` when thumbs up is being applied, `false` when it is being
+   * retracted. It is optional so existing one-argument handlers keep working.
    */
-  onThumbsUp?: (message: Message) => void;
+  onThumbsUp?: (message: Message, isActive?: boolean) => void;
 
   /**
-   * Callback function for thumbs down feedback
+   * Callback function for thumbs down feedback.
+   *
+   * See `onThumbsUp` for the meaning of `isActive`.
    */
-  onThumbsDown?: (message: Message) => void;
+  onThumbsDown?: (message: Message, isActive?: boolean) => void;
 
   /**
    * Map of message IDs to their feedback state

package/src/css/header-padding.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+const headerCss = fs.readFileSync(
+  path.join(path.resolve(__dirname), "header.css"),
+  "utf-8",
+);
+
+/**
+ * Returns the declarations of a rule as it applies with no media query in
+ * effect — i.e. the narrow-viewport (mobile) case.
+ */
+function baseDeclarationsFor(css: string, selector: string): string {
+  // Drop every @media block so only unconditional rules remain.
+  const withoutMediaBlocks = css.replace(
+    /@media[^{]*\{(?:[^{}]*\{[^{}]*\}\s*)*\}/g,
+    "",
+  );
+
+  const rule = new RegExp(
+    `(?:^|\\})\\s*${selector.replace(/\./g, "\\.")}\\s*\\{([^}]*)\\}`,
+  ).exec(withoutMediaBlocks);
+
+  expect(rule, `expected an unconditional \`${selector}\` rule`).not.toBeNull();
+  return rule![1];
+}
+
+describe("header horizontal padding (#2493)", () => {
+  it("reserves horizontal padding on mobile, not only at the sm breakpoint", () => {
+    const base = baseDeclarationsFor(headerCss, ".copilotKitHeader");
+
+    // The header lays out `justify-content: space-between`, so the title sits
+    // against the left edge and the close button against the right edge. With
+    // padding declared only inside `@media (min-width: 640px)` both ran flush
+    // to the viewport edge below 640px.
+    expect(base).toMatch(/padding-left:/);
+    expect(base).toMatch(/padding-right:/);
+  });
+});

package/src/css/header.css

@@ -9,6 +9,7 @@
   border-top-right-radius: 0;
   border-bottom: 1px solid var(--copilot-kit-separator-color);
   padding-left: 1.5rem;
+  padding-right: 1.5rem;
   background-color: var(--copilot-kit-contrast-color);
   justify-content: space-between;
   z-index: 2;
@@ -29,8 +30,6 @@
 
 @media (min-width: 640px) {
   .copilotKitHeader {
-    padding-left: 1.5rem;
-    padding-right: 24px;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
   }