@copilotkit/react-ui 1.66.3 → 1.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-ui",
-  "version": "1.66.3",
+  "version": "1.67.0",
   "private": false,
   "keywords": [
     "ai",
@@ -49,9 +49,9 @@
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@copilotkit/react-core": "1.66.3",
-    "@copilotkit/shared": "1.66.3",
-    "@copilotkit/runtime-client-gql": "1.66.3"
+    "@copilotkit/react-core": "1.67.0",
+    "@copilotkit/runtime-client-gql": "1.67.0",
+    "@copilotkit/shared": "1.67.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
@@ -64,8 +64,8 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.2.3",
     "vitest": "^3.2.4",
-    "tailwind-config": "1.4.12",
-    "tsconfig": "1.4.12"
+    "tsconfig": "1.4.12",
+    "tailwind-config": "1.4.12"
   },
   "peerDependencies": {
     "react": "^18 || ^19 || ^19.0.0-rc"

package/src/components/chat/Sidebar.tsx

@@ -72,7 +72,27 @@ import React, { useState } from "react";
 import type { CopilotModalProps } from "./Modal";
 import { CopilotModal } from "./Modal";
 
-export function CopilotSidebar(props: CopilotModalProps) {
+export interface CopilotSidebarProps extends CopilotModalProps {
+  /**
+   * Make the sidebar's content wrapper exactly one viewport tall, so children
+   * can use `height: 100%` (or `flex: 1`) to fill the screen.
+   *
+   * Off by default: the wrappers are auto-height, so page content flows
+   * normally and percentage heights on children collapse to content height.
+   *
+   * ```tsx
+   * <CopilotSidebar fullHeightChildren>
+   *   <div style={{ height: "100%" }}>...</div>
+   * </CopilotSidebar>
+   * ```
+   */
+  fullHeightChildren?: boolean;
+}
+
+export function CopilotSidebar({
+  fullHeightChildren = false,
+  ...props
+}: CopilotSidebarProps) {
   props = {
     ...props,
     className: props.className
@@ -88,8 +108,16 @@ export function CopilotSidebar(props: CopilotModalProps) {
     setExpandedClassName(open ? "sidebarExpanded" : "");
   };
 
+  const contentWrapperClassName = [
+    "copilotKitSidebarContentWrapper",
+    expandedClassName,
+    fullHeightChildren ? "copilotKitSidebarFullHeightChildren" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
   return (
-    <div className={`copilotKitSidebarContentWrapper ${expandedClassName}`}>
+    <div className={contentWrapperClassName}>
       <CopilotModal {...props} {...{ onSetOpen }}>
         {props.children}
       </CopilotModal>

package/src/components/chat/index.tsx

@@ -1,6 +1,7 @@
 export * from "./props";
 export { CopilotPopup } from "./Popup";
 export { CopilotSidebar } from "./Sidebar";
+export type { CopilotSidebarProps } from "./Sidebar";
 export { CopilotChat } from "./Chat";
 export { CopilotModal } from "./Modal";
 export type { CopilotModalProps } from "./Modal";

package/src/css/sidebar-full-height.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vitest";
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+const sidebarCss = fs.readFileSync(
+  path.resolve(__dirname, "sidebar.css"),
+  "utf-8",
+);
+const sidebarTsx = fs.readFileSync(
+  path.resolve(__dirname, "../components/chat/Sidebar.tsx"),
+  "utf-8",
+);
+
+/**
+ * Regression guard for #261: children of `CopilotSidebar` could not use
+ * `height: 100%`, because both wrappers around them are auto-height blocks.
+ * The fix is opt-in, so the guard has two halves — the escape hatch works,
+ * and it stays off for everyone who didn't ask for it.
+ */
+describe("sidebar full-height children opt-in", () => {
+  const fullHeightRule =
+    /\.copilotKitSidebarContentWrapper\.copilotKitSidebarFullHeightChildren\s*\{([^}]*)\}/;
+  const childrenWrapperRule =
+    /\.copilotKitSidebarContentWrapper\.copilotKitSidebarFullHeightChildren\s*>\s*\.copilotKitModalChildrenWrapper\s*\{([^}]*)\}/;
+
+  it("gives the content wrapper a definite height children can resolve against", () => {
+    const [, body] = sidebarCss.match(fullHeightRule) ?? [];
+    expect(body).toBeDefined();
+    expect(body).toContain("display: flex");
+    expect(body).toContain("flex-direction: column");
+    // A viewport unit, not `100%` — `100%` would silently no-op in any app
+    // that doesn't declare a height on html/body/#root.
+    expect(body).toContain("height: 100dvh");
+    expect(body).toContain("height: 100vh");
+    expect(body).not.toMatch(/height:\s*100%/);
+  });
+
+  it("lets the children wrapper fill that height without a flex min-height floor", () => {
+    const [, body] = sidebarCss.match(childrenWrapperRule) ?? [];
+    expect(body).toBeDefined();
+    expect(body).toContain("flex: 1 1 auto");
+    expect(body).toContain("min-height: 0");
+  });
+
+  it("leaves the default content wrapper auto-height", () => {
+    const [, base] =
+      sidebarCss.match(/\.copilotKitSidebarContentWrapper\s*\{([^}]*)\}/) ?? [];
+    expect(base).toBeDefined();
+    expect(base).not.toContain("height");
+    expect(base).not.toContain("display");
+  });
+
+  it("applies the modifier class only when fullHeightChildren is set", () => {
+    expect(sidebarTsx).toContain("fullHeightChildren = false");
+    expect(sidebarTsx).toMatch(
+      /fullHeightChildren\s*\?\s*"copilotKitSidebarFullHeightChildren"\s*:\s*""/,
+    );
+  });
+});

package/src/css/sidebar.css

@@ -44,3 +44,30 @@
     margin-right: 28rem;
   }
 }
+
+/*
+ * Opt-in (via the `fullHeightChildren` prop on `CopilotSidebar`): let children
+ * of the sidebar use `height: 100%`.
+ *
+ * By default both wrappers CopilotSidebar puts around your app are auto-height
+ * blocks, so a percentage height on a child has no definite containing block to
+ * resolve against and collapses to content height.
+ *
+ * The viewport unit is deliberate: `height: 100%` here would only resolve if
+ * every ancestor (html/body/#root) also declared a height, which react-ui
+ * neither sets nor can guarantee. `min-height: 0` on the children wrapper
+ * overrides the flex-item `min-height: auto` default so tall content scrolls
+ * inside the child instead of stretching the wrapper past the viewport.
+ */
+.copilotKitSidebarContentWrapper.copilotKitSidebarFullHeightChildren {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  height: 100dvh;
+}
+
+.copilotKitSidebarContentWrapper.copilotKitSidebarFullHeightChildren
+  > .copilotKitModalChildrenWrapper {
+  flex: 1 1 auto;
+  min-height: 0;
+}