@copilotkit/react-core 1.10.0-next.11 → 1.10.0-next.13

package/dist/utils/suggestions.mjs

@@ -1,20 +1,23 @@
 import {
   reloadSuggestions
-} from "../chunk-LVWV62JZ.mjs";
-import "../chunk-TWYUYC4F.mjs";
-import "../chunk-Q42NJFXR.mjs";
+} from "../chunk-5P46WS5M.mjs";
+import "../chunk-N4VN2B5S.mjs";
+import "../chunk-MUDXTKXE.mjs";
+import "../chunk-3BASANUO.mjs";
+import "../chunk-WSXTUD36.mjs";
+import "../chunk-PIF5KJYI.mjs";
 import "../chunk-2IDV5OHF.mjs";
 import "../chunk-PMAFHQ7P.mjs";
 import "../chunk-5FHSUKQL.mjs";
 import "../chunk-RKTVJRK7.mjs";
-import "../chunk-ZLQVRPDS.mjs";
-import "../chunk-OKRZF3DD.mjs";
-import "../chunk-N4WEHORG.mjs";
-import "../chunk-O7ARI5CV.mjs";
 import "../chunk-FAUNHSQU.mjs";
 import "../chunk-ICIK2BSB.mjs";
-import "../chunk-TEMLWRRT.mjs";
+import "../chunk-N4WEHORG.mjs";
+import "../chunk-O7ARI5CV.mjs";
 import "../chunk-EFL5OBKN.mjs";
+import "../chunk-6ZLPNY7X.mjs";
+import "../chunk-TEMLWRRT.mjs";
+import "../chunk-ZLQVRPDS.mjs";
 import "../chunk-SKC7AJIV.mjs";
 export {
   reloadSuggestions

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.10.0-next.11",
+  "version": "1.10.0-next.13",
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -47,8 +47,8 @@
     "@scarf/scarf": "^1.3.0",
     "react-markdown": "^8.0.7",
     "untruncate-json": "^0.0.1",
-    "@copilotkit/runtime-client-gql": "1.10.0-next.11",
-    "@copilotkit/shared": "1.10.0-next.11"
+    "@copilotkit/runtime-client-gql": "1.10.0-next.13",
+    "@copilotkit/shared": "1.10.0-next.13"
   },
   "keywords": [
     "copilotkit",

package/src/components/copilot-provider/copilotkit-props.tsx

@@ -8,10 +8,19 @@ import { CopilotErrorHandler } from "@copilotkit/shared";
 
 export interface CopilotKitProps {
   /**
-   *  Your Copilot Cloud API key. Don't have it yet? Go to https://cloud.copilotkit.ai and get one for free.
+   * Your Copilot Cloud API key.
+   *
+   * Don't have it yet? Go to https://cloud.copilotkit.ai and get one for free.
    */
   publicApiKey?: string;
 
+  /**
+   * Your public license key for accessing premium CopilotKit features.
+   *
+   * Don't have it yet? Go to https://cloud.copilotkit.ai and get one for free.
+   */
+  publicLicenseKey?: string;
+
   /**
    * Restrict input to a specific topic.
    * @deprecated Use `guardrails_c` instead to control input restrictions

package/src/components/copilot-provider/copilotkit.tsx

@@ -51,15 +51,17 @@ import {
   LangGraphInterruptAction,
   LangGraphInterruptActionSetterArgs,
 } from "../../types/interrupt-action";
-import { StatusChecker } from "../../lib/status-checker";
-import { SuggestionItem } from "../../utils/suggestions";
+import { ConsoleTrigger } from "../dev-console/console-trigger";
 
 export function CopilotKit({ children, ...props }: CopilotKitProps) {
   const enabled = shouldShowDevConsole(props.showDevConsole);
 
+  // Use API key if provided, otherwise use the license key
+  const publicApiKey = props.publicApiKey || props.publicLicenseKey;
+
   return (
     <ToastProvider enabled={enabled}>
-      <CopilotErrorBoundary publicApiKey={props.publicApiKey} showUsageBanner={enabled}>
+      <CopilotErrorBoundary publicApiKey={publicApiKey} showUsageBanner={enabled}>
         <CopilotKitInternal {...props}>{children}</CopilotKitInternal>
       </CopilotErrorBoundary>
     </ToastProvider>
@@ -74,6 +76,9 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
    */
   validateProps(cpkProps);
 
+  // Use license key as API key if provided, otherwise use the API key
+  const publicApiKey = props.publicLicenseKey || props.publicApiKey;
+
   const chatApiEndpoint = props.runtimeUrl || COPILOT_CLOUD_CHAT_URL;
 
   const [actions, setActions] = useState<Record<string, FrontendAction<any>>>({});
@@ -99,10 +104,6 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
     allElements: allDocuments,
   } = useFlatCategoryStore<DocumentPointer>();
 
-  const statusChecker = useMemo(() => new StatusChecker(), []);
-
-  const [usageBannerStatus, setUsageBannerStatus] = useState<any>(null);
-
   // Compute all the functions and properties that we need to pass
   const setAction = useCallback((id: string, action: FrontendAction<any>) => {
     setActions((prevPoints) => {
@@ -206,7 +207,7 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
   // get the appropriate CopilotApiConfig from the props
   const copilotApiConfig: CopilotApiConfig = useMemo(() => {
     let cloud: CopilotCloudConfig | undefined = undefined;
-    if (props.publicApiKey) {
+    if (publicApiKey) {
       cloud = {
         guardrails: {
           input: {
@@ -221,7 +222,7 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
     }
 
     return {
-      publicApiKey: props.publicApiKey,
+      publicApiKey: publicApiKey,
       ...(cloud ? { cloud } : {}),
       chatApiEndpoint: chatApiEndpoint,
       headers: props.headers || {},
@@ -231,7 +232,7 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
       credentials: props.credentials,
     };
   }, [
-    props.publicApiKey,
+    publicApiKey,
     props.headers,
     props.properties,
     props.transcribeAudioUrl,
@@ -269,7 +270,7 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
 
   const runtimeClient = useCopilotRuntimeClient({
     url: copilotApiConfig.chatApiEndpoint,
-    publicApiKey: copilotApiConfig.publicApiKey,
+    publicApiKey: publicApiKey,
     headers,
     credentials: copilotApiConfig.credentials,
     showDevConsole: shouldShowDevConsole(props.showDevConsole),
@@ -491,7 +492,10 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
       }}
     >
       <MessagesTapProvider>
-        <CopilotMessages>{memoizedChildren}</CopilotMessages>
+        <CopilotMessages>
+          {memoizedChildren}
+          {showDevConsole && <ConsoleTrigger />}
+        </CopilotMessages>
       </MessagesTapProvider>
       {bannerError && showDevConsole && (
         <UsageBanner
@@ -544,13 +548,18 @@ function formatFeatureName(featureName: string): string {
 function validateProps(props: CopilotKitProps): never | void {
   const cloudFeatures = Object.keys(props).filter((key) => key.endsWith("_c"));
 
-  if (!props.runtimeUrl && !props.publicApiKey) {
-    throw new ConfigurationError("Missing required prop: 'runtimeUrl' or 'publicApiKey'");
+  // Check if we have either a runtimeUrl or one of the API keys
+  const hasApiKey = props.publicApiKey || props.publicLicenseKey;
+
+  if (!props.runtimeUrl && !hasApiKey) {
+    throw new ConfigurationError(
+      "Missing required prop: 'runtimeUrl' or 'publicApiKey' or 'publicLicenseKey'",
+    );
   }
 
-  if (cloudFeatures.length > 0 && !props.publicApiKey) {
+  if (cloudFeatures.length > 0 && !hasApiKey) {
     throw new MissingPublicApiKeyError(
-      `Missing required prop: 'publicApiKey' to use cloud features: ${cloudFeatures
+      `Missing required prop: 'publicApiKey' or 'publicLicenseKey' to use cloud features: ${cloudFeatures
         .map(formatFeatureName)
         .join(", ")}`,
     );

package/src/components/dev-console/console-trigger.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { useCopilotContext } from "../../context/copilot-context";
+import { CopilotKitIcon } from "./icons";
+import { DeveloperConsoleModal } from "./developer-console-modal";
+
+interface ConsoleTriggerProps {
+  position?: "bottom-left" | "bottom-right";
+}
+
+export function ConsoleTrigger({ position = "bottom-right" }: ConsoleTriggerProps) {
+  const context = useCopilotContext();
+  const hasApiKey = Boolean(context.copilotApiConfig.publicApiKey);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [buttonPosition, setButtonPosition] = useState<{ x: number; y: number } | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  const dragRef = useRef<{
+    startX: number;
+    startY: number;
+    buttonX: number;
+    buttonY: number;
+  } | null>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  // Initialize on client side only
+  useEffect(() => {
+    setMounted(true);
+    if (typeof window !== "undefined" && !buttonPosition) {
+      const buttonSize = 60;
+      const margin = 24;
+
+      const initialPosition = {
+        x: margin,
+        y: window.innerHeight - buttonSize - margin,
+      };
+
+      setButtonPosition(initialPosition);
+    }
+  }, [position]);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (!buttonPosition) return;
+
+    dragRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      buttonX: buttonPosition.x,
+      buttonY: buttonPosition.y,
+    };
+    setIsDragging(true);
+  };
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (!dragRef.current) return;
+
+      const deltaX = e.clientX - dragRef.current.startX;
+      const deltaY = e.clientY - dragRef.current.startY;
+
+      // Calculate new position
+      let newX = dragRef.current.buttonX + deltaX;
+      let newY = dragRef.current.buttonY + deltaY;
+
+      // Keep button within viewport bounds
+      newX = Math.max(0, Math.min(newX, window.innerWidth - 60));
+      newY = Math.max(0, Math.min(newY, window.innerHeight - 60));
+
+      setButtonPosition({ x: newX, y: newY });
+    };
+
+    const handleMouseUp = (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      dragRef.current = null;
+    };
+
+    // Use capture phase to intercept events before they reach other handlers
+    document.addEventListener("mousemove", handleMouseMove, { capture: true, passive: false });
+    document.addEventListener("mouseup", handleMouseUp, { capture: true, passive: false });
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove, { capture: true });
+      document.removeEventListener("mouseup", handleMouseUp, { capture: true });
+    };
+  }, [isDragging]);
+
+  // Don't render until mounted and position is initialized
+  if (!mounted || !buttonPosition) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        onClick={() => {
+          if (!isDragging) {
+            setIsModalOpen(true);
+          }
+        }}
+        onMouseDown={handleMouseDown}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        style={{
+          position: "fixed",
+          left: `${buttonPosition.x}px`,
+          top: `${buttonPosition.y}px`,
+          zIndex: 2147483647,
+          width: "60px",
+          height: "60px",
+          background: isDragging ? "#000000" : isHovered ? "#111111" : "#000000",
+          color: "white",
+          borderRadius: "50%",
+          boxShadow: isDragging
+            ? "0 8px 32px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4)"
+            : isHovered
+              ? "0 12px 40px rgba(0, 0, 0, 0.7), 0 6px 20px rgba(0, 0, 0, 0.5)"
+              : "0 6px 20px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.3)",
+          transition: isDragging ? "none" : "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          border: "none",
+          cursor: isDragging ? "grabbing" : "grab",
+          opacity: 1,
+          userSelect: "none",
+          transform: isDragging ? "scale(1.05)" : isHovered ? "scale(1.1)" : "scale(1)",
+          backdropFilter: "blur(10px)",
+          pointerEvents: "auto",
+          isolation: "isolate",
+        }}
+        title={
+          hasApiKey
+            ? "Open Developer Console (Drag to move)"
+            : "Developer Console (API Key Required, Drag to move)"
+        }
+      >
+        <div
+          style={{
+            width: "28px",
+            height: "28px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.2))",
+          }}
+        >
+          <CopilotKitIcon />
+        </div>
+        {!hasApiKey && (
+          <div
+            style={{
+              position: "absolute",
+              top: "-2px",
+              right: "-2px",
+              width: "18px",
+              height: "18px",
+              background: "linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%)",
+              borderRadius: "50%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxShadow: "0 2px 8px rgba(255, 107, 107, 0.4)",
+              border: "2px solid white",
+            }}
+          >
+            <span style={{ fontSize: "10px", color: "white", fontWeight: "bold" }}>!</span>
+          </div>
+        )}
+      </button>
+
+      <DeveloperConsoleModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        hasApiKey={hasApiKey}
+      />
+    </>
+  );
+}