@copilotkit/react-ui 1.59.1 → 1.59.2

package/oxlint-rules/copilotkit-plugin.mjs

@@ -1,11 +1,13 @@
 import requireCpkPrefix from "./require-cpk-prefix.mjs";
 import noSingleArgZodRecord from "./no-single-arg-zod-record.mjs";
+import noPublicEnvShellRead from "./no-public-env-shell-read.mjs";
 
 const plugin = {
   meta: { name: "copilotkit" },
   rules: {
     "require-cpk-prefix": requireCpkPrefix,
     "no-single-arg-zod-record": noSingleArgZodRecord,
+    "no-public-env-shell-read": noPublicEnvShellRead,
   },
 };
 

package/oxlint-rules/no-public-env-shell-read.mjs

@@ -0,0 +1,221 @@
+/**
+ * Oxlint rule: no-public-env-shell-read
+ *
+ * Bans direct READS of a specific, enumerated set of `process.env.NEXT_PUBLIC_*`
+ * URL/analytics keys (see `BANNED_KEYS` below) in showcase shell client/server
+ * code. Those values are now served at runtime via `getRuntimeConfig()` (see
+ * workstream B / Option-B migration); a stray `process.env.NEXT_PUBLIC_<key>`
+ * read would silently re-freeze the value at build time and regress the
+ * migration.
+ *
+ * IMPORTANT: this rule does NOT ban every `NEXT_PUBLIC_*` read — only the
+ * explicit banned-key set. Build-stamp keys (NEXT_PUBLIC_COMMIT_SHA,
+ * NEXT_PUBLIC_BRANCH) and the local-dev computed key
+ * (NEXT_PUBLIC_LOCAL_BACKENDS) are intentionally NOT banned.
+ *
+ * Allowed (intentionally NOT in the banned set):
+ *   - `NEXT_PUBLIC_COMMIT_SHA`   — build-stamped artifact identifier
+ *   - `NEXT_PUBLIC_BRANCH`       — build-stamped artifact identifier
+ *   - `NEXT_PUBLIC_LOCAL_BACKENDS` — local-dev only, computed from
+ *     `shared/local-ports.json` at build time (not a real env var)
+ *
+ * Forms detected as READS (each will be flagged):
+ *   - dotted member:           process.env.NEXT_PUBLIC_SHELL_URL
+ *   - string-bracket member:   process.env["NEXT_PUBLIC_SHELL_URL"]
+ *   - no-expression template:  process.env[`NEXT_PUBLIC_SHELL_URL`]
+ *   - optional chaining:       process.env?.NEXT_PUBLIC_SHELL_URL
+ *                              process.env?.["NEXT_PUBLIC_SHELL_URL"]
+ *   - destructuring read:      const { NEXT_PUBLIC_SHELL_URL } = process.env
+ *                              const { NEXT_PUBLIC_SHELL_URL: aliased } = process.env
+ *
+ * Forms intentionally NOT flagged (writes/deletes are not reads):
+ *   - assignment LHS:          process.env.NEXT_PUBLIC_X = "..."
+ *   - delete:                  delete process.env.NEXT_PUBLIC_X
+ *
+ * Out of scope (deliberately NOT covered — documented here so the gaps are
+ * auditable rather than implicit):
+ *   - aliasing:                const e = process.env; e.NEXT_PUBLIC_X
+ *                              (requires scope/flow tracking)
+ *   - bulk-iteration reads:    Object.keys(process.env), Object.values(process.env),
+ *                              Object.entries(process.env), for-in over process.env,
+ *                              spread `{...process.env}` — these read the whole
+ *                              env object without naming a key statically
+ *   - rest-pattern destructure: `const { ...rest } = process.env` — same shape
+ *                              as the iteration case (no static key in source)
+ *   - compound-assignment LHS: `process.env.X += "..."` — currently treated as
+ *                              an AssignmentExpression with operator !== "="
+ *                              (i.e. NOT flagged); fine in practice because
+ *                              showcase code does not append to env vars
+ *   - update operators:        `process.env.X++` / `process.env.X--` —
+ *                              defensively bailed; not flagged
+ *
+ * Scope is enforced via `overrides[].files` in `.oxlintrc.json` (shell
+ * source trees only; `.mdx` content, runtime-config implementation files,
+ * and tests are excluded by a follow-up override that turns this rule
+ * back off).
+ *
+ * Note: plan-B's original spec called for oxlint's `eslint/no-restricted-syntax`
+ * with an AST selector regex. oxlint 1.x does not implement that rule
+ * (only `no-restricted-globals` / `no-restricted-imports`), so we
+ * implement the equivalent guard as a focused custom rule in the existing
+ * copilotkit oxlint plugin instead.
+ */
+
+// Exported so the table-driven test in
+// `showcase/scripts/__tests__/lint-rule-no-public-env.test.ts` can iterate
+// the rule's own banned set rather than hand-mirroring it (any drift would
+// silently weaken coverage). The exported value is the same Set the rule
+// uses internally — they cannot diverge.
+export const BANNED_KEYS = new Set([
+  "NEXT_PUBLIC_POCKETBASE_URL",
+  "NEXT_PUBLIC_SHELL_URL",
+  "NEXT_PUBLIC_BASE_URL",
+  "NEXT_PUBLIC_OPS_BASE_URL",
+  "NEXT_PUBLIC_INTELLIGENCE_SIGNUP_URL",
+  "NEXT_PUBLIC_POSTHOG_KEY",
+  "NEXT_PUBLIC_POSTHOG_HOST",
+  "NEXT_PUBLIC_SCARF_PIXEL_ID",
+  "NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID",
+  "NEXT_PUBLIC_REB2B_KEY",
+  "NEXT_PUBLIC_REO_KEY",
+]);
+
+/**
+ * True iff `node` (after unwrapping a wrapping `ChainExpression`) is the
+ * `process.env` member expression. All read forms hang off this anchor:
+ *   - bare:               process.env.X
+ *   - optional chain:     process?.env.X / process.env?.X / process?.env?.X
+ * Some parser flavors wrap the whole optional chain in a `ChainExpression`
+ * whose `.expression` is the MemberExpression we want to match; others
+ * surface the MemberExpression directly with `optional: true`. We accept
+ * both shapes by stripping the wrapper first.
+ */
+function isProcessEnv(node) {
+  if (node && node.type === "ChainExpression") node = node.expression;
+  if (!node || node.type !== "MemberExpression") return false;
+  if (node.computed) return false;
+  if (!node.object || node.object.type !== "Identifier") return false;
+  if (node.object.name !== "process") return false;
+  if (!node.property || node.property.type !== "Identifier") return false;
+  return node.property.name === "env";
+}
+
+/**
+ * Given a `node.property` from a MemberExpression read off `process.env`,
+ * return the static key name if we can determine one — or null if the key
+ * is dynamic (and therefore out of scope for a static lint).
+ *
+ * Handled key forms:
+ *   - Identifier (dotted: process.env.FOO)
+ *   - Literal string (bracket: process.env["FOO"])
+ *   - TemplateLiteral with no expressions (process.env[`FOO`])
+ */
+function staticKeyName(property, computed) {
+  if (!property) return null;
+  if (!computed && property.type === "Identifier") {
+    return property.name;
+  }
+  if (
+    computed &&
+    property.type === "Literal" &&
+    typeof property.value === "string"
+  ) {
+    return property.value;
+  }
+  if (
+    computed &&
+    property.type === "TemplateLiteral" &&
+    Array.isArray(property.expressions) &&
+    property.expressions.length === 0 &&
+    Array.isArray(property.quasis) &&
+    property.quasis.length === 1
+  ) {
+    const cooked = property.quasis[0]?.value?.cooked;
+    return typeof cooked === "string" ? cooked : null;
+  }
+  return null;
+}
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow shell-side reads of a banned set of NEXT_PUBLIC_* URL/analytics keys (process.env.<key>, process.env['<key>'], destructuring, optional chaining) — use getRuntimeConfig() instead",
+    },
+    schema: [],
+    messages: {
+      forbiddenRead:
+        "Do not read process.env.NEXT_PUBLIC_* directly in shell code. Use getRuntimeConfig() from @/lib/runtime-config.client (client) or @/lib/runtime-config (server). See workstream B.",
+    },
+  },
+
+  create(context) {
+    return {
+      // Member-expression reads: dotted, bracket-string, bracket-template,
+      // and optional-chained equivalents. We skip writes (assignment LHS)
+      // and `delete` targets — those are not reads of the value.
+      MemberExpression(node) {
+        if (!isProcessEnv(node.object)) return;
+
+        // Write target: `process.env.X = ...`. The MemberExpression is the
+        // LHS of an AssignmentExpression — not a read.
+        const parent = node.parent;
+        if (
+          parent &&
+          parent.type === "AssignmentExpression" &&
+          parent.left === node
+        ) {
+          return;
+        }
+        // `delete process.env.X` — not a read either.
+        if (
+          parent &&
+          parent.type === "UnaryExpression" &&
+          parent.operator === "delete"
+        ) {
+          return;
+        }
+        // `update` operators (++/--): also a write, but extremely unlikely
+        // on a string env var. Defensive bail anyway.
+        if (parent && parent.type === "UpdateExpression") {
+          return;
+        }
+
+        const keyName = staticKeyName(node.property, node.computed);
+        if (!keyName) return;
+        if (!BANNED_KEYS.has(keyName)) return;
+
+        context.report({ node, messageId: "forbiddenRead" });
+      },
+
+      // Destructuring reads: `const { NEXT_PUBLIC_X } = process.env` and the
+      // aliased form `const { NEXT_PUBLIC_X: y } = process.env`. We catch
+      // this at the VariableDeclarator level so we can confirm the init is
+      // exactly `process.env` (not some other object with same-named props).
+      //
+      // Note: this does NOT cover the aliasing case
+      // `const e = process.env; e.NEXT_PUBLIC_X` — that requires scope
+      // tracking and is intentionally out of scope; see file header.
+      VariableDeclarator(node) {
+        if (!node.init || !isProcessEnv(node.init)) return;
+        if (!node.id || node.id.type !== "ObjectPattern") return;
+        for (const prop of node.id.properties) {
+          if (!prop || prop.type !== "Property") continue;
+          // The `key` is the source name on process.env; that's what we
+          // test against BANNED_KEYS regardless of any local alias. We
+          // route through staticKeyName() so the computed-string-key form
+          // `{ ["NEXT_PUBLIC_X"]: y } = process.env` and the no-expression
+          // template form `{ [`NEXT_PUBLIC_X`]: y } = process.env` are
+          // caught with the same parity as the bracket-member read.
+          const keyName = staticKeyName(prop.key, prop.computed);
+          if (!keyName) continue;
+          if (!BANNED_KEYS.has(keyName)) continue;
+          context.report({ node: prop, messageId: "forbiddenRead" });
+        }
+      },
+    };
+  },
+};
+
+export default rule;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-ui",
-  "version": "1.59.1",
+  "version": "1.59.2",
   "private": false,
   "keywords": [
     "ai",
@@ -48,9 +48,9 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@copilotkit/react-core": "1.59.1",
-    "@copilotkit/runtime-client-gql": "1.59.1",
-    "@copilotkit/shared": "1.59.1"
+    "@copilotkit/react-core": "1.59.2",
+    "@copilotkit/shared": "1.59.2",
+    "@copilotkit/runtime-client-gql": "1.59.2"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
@@ -71,6 +71,8 @@
   "scripts": {
     "build:css": "node -e \"const fs=require('fs');fs.mkdirSync('./dist/v2',{recursive:true});fs.cpSync('./src/v2/styles.css','./dist/v2/index.css')\"",
     "build": "tsdown && pnpm run build:css",
+    "size": "size-limit",
+    "compat-check": "es-check es2022 --module 'dist/**/!(*.umd).{mjs,cjs,js}' && es-check es2018 'dist/**/*.umd.js'",
     "dev": "tsdown --watch",
     "test": "vitest run",
     "test:watch": "vitest",

package/src/components/chat/Messages.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect, useMemo, useRef } from "react";
-import { MessagesProps } from "./props";
+import type { MessagesProps } from "./props";
 import { useChatContext } from "./ChatContext";
-import { Message } from "@copilotkit/shared";
+import type { Message } from "@copilotkit/shared";
 import { useCopilotChatInternal } from "@copilotkit/react-core";
-import {
-  LegacyRenderMessage,
-  LegacyRenderProps,
-} from "./messages/LegacyRenderMessage";
+import type { LegacyRenderProps } from "./messages/LegacyRenderMessage";
+import { LegacyRenderMessage } from "./messages/LegacyRenderMessage";
 
 export const Messages = ({
   inProgress,
@@ -85,7 +83,9 @@ export const Messages = ({
       )
     : RenderMessage;
 
-  const LoadingIcon = () => <span>{icons.activityIcon}</span>;
+  const LoadingIcon = () => (
+    <span data-testid="copilot-loading-cursor">{icons.activityIcon}</span>
+  );
 
   return (
     <div className="copilotKitMessages" ref={messagesContainerRef}>

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

@@ -1,4 +1,4 @@
-import { AssistantMessageProps } from "../props";
+import type { AssistantMessageProps } from "../props";
 import { useChatContext } from "../ChatContext";
 import { Markdown } from "../Markdown";
 import { useState } from "react";
@@ -48,7 +48,9 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
     }
   };
 
-  const LoadingIcon = () => <span>{icons.activityIcon}</span>;
+  const LoadingIcon = () => (
+    <span data-testid="copilot-loading-cursor">{icons.activityIcon}</span>
+  );
   const content = message?.content || "";
   const subComponent = message?.generativeUI?.() ?? props.subComponent;
   const subComponentPosition = message?.generativeUIPosition ?? "after";

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

@@ -1,4 +1,4 @@
-import { ErrorMessageProps } from "../props";
+import type { ErrorMessageProps } from "../props";
 import { useChatContext } from "../ChatContext";
 import { Markdown } from "../Markdown";
 import { useState } from "react";
@@ -28,7 +28,10 @@ export const ErrorMessage = (props: ErrorMessageProps) => {
   console.log(error);
 
   return (
-    <div className="copilotKitMessage copilotKitAssistantMessage">
+    <div
+      data-testid="copilot-error-banner"
+      className="copilotKitMessage copilotKitAssistantMessage"
+    >
       <Markdown content={error.message} />
 
       <div

package/src/components/chat/messages/testids.test.ts

@@ -0,0 +1,31 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
+
+/**
+ * Verifies stable `data-testid` markers exist on the error banner and loading
+ * indicator surfaces so e2e tests can deterministically distinguish "errored
+ * out" vs "still loading" states. Without these, e2e probes hit ~30-60s
+ * timeouts instead of failing fast.
+ */
+
+const errorMessagePath = resolve(__dirname, "ErrorMessage.tsx");
+const assistantMessagePath = resolve(__dirname, "AssistantMessage.tsx");
+const messagesPath = resolve(__dirname, "../Messages.tsx");
+
+const errorMessageSrc = readFileSync(errorMessagePath, "utf-8");
+const assistantMessageSrc = readFileSync(assistantMessagePath, "utf-8");
+const messagesSrc = readFileSync(messagesPath, "utf-8");
+
+describe("react-ui stable testids", () => {
+  it("ErrorMessage renders the copilot-error-banner testid on its root", () => {
+    expect(errorMessageSrc).toMatch(/data-testid="copilot-error-banner"/);
+  });
+
+  it("Messages LoadingIcon renders the copilot-loading-cursor testid", () => {
+    expect(messagesSrc).toMatch(/data-testid="copilot-loading-cursor"/);
+  });
+
+  it("AssistantMessage LoadingIcon renders the copilot-loading-cursor testid", () => {
+    expect(assistantMessageSrc).toMatch(/data-testid="copilot-loading-cursor"/);
+  });
+});