@copilotkit/react-core 1.10.0-next.0 → 1.10.0-next.10

package/src/hooks/use-coagent.ts

@@ -5,7 +5,7 @@
  * </Callout>
  * <Frame className="my-12">
  *   <img
- *     src="/images/coagents/SharedStateCoAgents.gif"
+ *     src="https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/SharedStateCoAgents.gif"
  *     alt="CoAgents demonstration"
  *     className="w-auto"
  *   />
@@ -89,19 +89,16 @@
  */
 
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import {
-  CopilotContextParams,
-  CopilotMessagesContextParams,
-  useCopilotContext,
-  useCopilotMessagesContext,
-} from "../context";
+import { CopilotContextParams, useCopilotContext } from "../context";
 import { CoagentState } from "../types/coagent-state";
-import { useCopilotChat } from "./use-copilot-chat";
+import { useCopilotChat } from "./use-copilot-chat_internal";
 import { Message } from "@copilotkit/shared";
 import { useAsyncCallback } from "../components/error-boundary/error-utils";
 import { useToast } from "../components/toast/toast-provider";
 import { useCopilotRuntimeClient } from "./use-copilot-runtime-client";
 import { parseJson, CopilotKitAgentDiscoveryError } from "@copilotkit/shared";
+import { useMessagesTap } from "../components/copilot-provider/copilot-messages";
+import { Message as GqlMessage } from "@copilotkit/runtime-client-gql";
 
 interface UseCoagentOptionsBase {
   /**
@@ -212,8 +209,8 @@ export type HintFunction = (params: HintFunctionParams) => Message | undefined;
  * we refer to as CoAgents, checkout the documentation at https://docs.copilotkit.ai/coagents/quickstart/langgraph.
  */
 export function useCoAgent<T = any>(options: UseCoagentOptions<T>): UseCoagentReturnType<T> {
-  const generalContext = useCopilotContext();
-  const { availableAgents } = generalContext;
+  const context = useCopilotContext();
+  const { availableAgents } = context;
   const { setBannerError } = useToast();
   const lastLoadedThreadId = useRef<string>();
   const lastLoadedState = useRef<any>();
@@ -233,11 +230,11 @@ export function useCoAgent<T = any>(options: UseCoagentOptions<T>): UseCoagentRe
     }
   }, [availableAgents]);
 
-  const messagesContext = useCopilotMessagesContext();
-  const context = { ...generalContext, ...messagesContext };
+  const { getMessagesFromTap } = useMessagesTap();
+
   const { coagentStates, coagentStatesRef, setCoagentStatesWithRef, threadId, copilotApiConfig } =
     context;
-  const { appendMessage, runChatCompletion } = useCopilotChat();
+  const { sendMessage, runChatCompletion } = useCopilotChat();
   const headers = {
     ...(copilotApiConfig.headers || {}),
   };
@@ -349,9 +346,9 @@ export function useCoAgent<T = any>(options: UseCoagentOptions<T>): UseCoagentRe
 
   const runAgentCallback = useAsyncCallback(
     async (hint?: HintFunction) => {
-      await runAgent(name, context, appendMessage, runChatCompletion, hint);
+      await runAgent(name, context, getMessagesFromTap(), sendMessage, runChatCompletion, hint);
     },
-    [name, context, appendMessage, runChatCompletion],
+    [name, context, sendMessage, runChatCompletion],
   );
 
   // Return the state and setState function
@@ -402,8 +399,9 @@ export function stopAgent(name: string, context: CopilotContextParams) {
 
 export async function runAgent(
   name: string,
-  context: CopilotContextParams & CopilotMessagesContextParams,
-  appendMessage: (message: Message) => Promise<void>,
+  context: CopilotContextParams,
+  messages: GqlMessage[],
+  sendMessage: (message: Message) => Promise<void>,
   runChatCompletion: () => Promise<Message[]>,
   hint?: HintFunction,
 ) {
@@ -415,8 +413,8 @@ export async function runAgent(
   }
 
   let previousState: any = null;
-  for (let i = context.messages.length - 1; i >= 0; i--) {
-    const message = context.messages[i];
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const message = messages[i];
     if (message.isAgentStateMessage() && message.agentName === name) {
       previousState = message.state;
     }
@@ -427,7 +425,7 @@ export async function runAgent(
   if (hint) {
     const hintMessage = hint({ previousState, currentState: state });
     if (hintMessage) {
-      await appendMessage(hintMessage);
+      await sendMessage(hintMessage);
     } else {
       await runChatCompletion();
     }

package/src/hooks/use-copilot-action.ts

@@ -83,7 +83,7 @@
  */
 
 /**
- * <img src="/images/use-copilot-action/useCopilotAction.gif" width="500" />
+ * <img src="https://cdn.copilotkit.ai/docs/copilotkit/images/use-copilot-action/useCopilotAction.gif" width="500" />
  * `useCopilotAction` is a React hook that you can use in your application to provide
  * custom actions that can be called by the AI. Essentially, it allows the Copilot to
  * execute these actions contextually during a chat, based on the user's interactions

package/src/hooks/use-copilot-chat-headless_c.ts

@@ -0,0 +1,187 @@
+/**
+ * `useCopilotChatHeadless_c` is for building fully custom UI (headless UI) implementations.
+ *
+ * <Callout type="info" title="This is a premium feature">
+ * Use of `useCopilotchatHeadless_c` requires a public license key.
+ *
+ * Sign up for free at https://cloud.copilotkit.ai/ to get your public license key.
+ *
+ * Usage is generous, free to get started, and easily slots into existing applications, either self-hosted or using Copilot Cloud.
+ * </Callout>
+ *
+ * ## Key Features:
+ *
+ * - **Fully headless**: Build your own fully custom UI's for your agentic applications.
+ * - **Advanced Suggestions**: Direct access to suggestions array with full control
+ * - **Interrupt Handling**: Support for advanced interrupt functionality
+ * - **MCP Server Support**: Model Context Protocol server configurations
+ * - **Chat Controls**: Complete set of chat management functions
+ * - **Loading States**: Comprehensive loading state management
+ *
+ * ## Usage:
+ *
+ * ### Basic Setup
+ *
+ * ```tsx
+ * import { CopilotKit } from "@copilotkit/react-core";
+ * import { useCopilotChatHeadless_c } from "@copilotkit/react-core";
+ *
+ * export function App() {
+ *   return (
+ *     <CopilotKit publicApiKey="your-free-subscription-key">
+ *       <YourComponent />
+ *     </CopilotKit>
+ *   );
+ * }
+ *
+ * export function YourComponent() {
+ *   const { messages, sendMessage, isLoading } = useCopilotChatHeadless_c();
+ *
+ *   const handleSendMessage = async () => {
+ *     await sendMessage({
+ *       id: "123",
+ *       role: "user",
+ *       content: "Hello World",
+ *     });
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       {messages.map(msg => <div key={msg.id}>{msg.content}</div>)}
+ *       <button onClick={handleSendMessage} disabled={isLoading}>
+ *         Send Message
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * ### Working with Suggestions
+ *
+ * ```tsx
+ * import { useCopilotChatHeadless_c, useCopilotChatSuggestions } from "@copilotkit/react-core";
+ *
+ * export function SuggestionExample() {
+ *   const {
+ *     suggestions,
+ *     setSuggestions,
+ *     generateSuggestions,
+ *     isLoadingSuggestions
+ *   } = useCopilotChatHeadless_c();
+ *
+ *   // Configure AI suggestion generation
+ *   useCopilotChatSuggestions({
+ *     instructions: "Suggest helpful actions based on the current context",
+ *     maxSuggestions: 3
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       {suggestions.map(suggestion => (
+ *         <button key={suggestion.title}>{suggestion.title}</button>
+ *       ))}
+ *       <button onClick={generateSuggestions} disabled={isLoadingSuggestions}>
+ *         Generate Suggestions
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+import { useEffect } from "react";
+import { useCopilotContext } from "../context/copilot-context";
+import {
+  useCopilotChat as useCopilotChatInternal,
+  defaultSystemMessage,
+  UseCopilotChatOptions as UseCopilotChatOptions_c,
+  UseCopilotChatReturn as UseCopilotChatReturn_c,
+  MCPServerConfig,
+} from "./use-copilot-chat_internal";
+
+import {
+  ErrorVisibility,
+  Severity,
+  CopilotKitError,
+  CopilotKitErrorCode,
+  styledConsole,
+} from "@copilotkit/shared";
+
+// Non-functional fallback implementation
+const createNonFunctionalReturn = (): UseCopilotChatReturn_c => ({
+  visibleMessages: [],
+  messages: [],
+  sendMessage: async () => {},
+  appendMessage: async () => {},
+  setMessages: () => {},
+  deleteMessage: () => {},
+  reloadMessages: async () => {},
+  stopGeneration: () => {},
+  reset: () => {},
+  isLoading: false,
+  runChatCompletion: async () => [],
+  mcpServers: [],
+  setMcpServers: () => {},
+  suggestions: [],
+  setSuggestions: () => {},
+  generateSuggestions: async () => {},
+  resetSuggestions: () => {},
+  isLoadingSuggestions: false,
+  interrupt: null,
+});
+/**
+ * Enterprise React hook that provides complete chat functionality for fully custom UI implementations.
+ * Includes all advanced features like direct message access, suggestions array, interrupt handling, and MCP support.
+ *
+ * **Requires a publicApiKey** - Sign up for free at https://cloud.copilotkit.ai/
+ *
+ * @param options - Configuration options for the chat
+ * @returns Complete chat interface with all enterprise features
+ *
+ * @example
+ * ```tsx
+ * const { messages, sendMessage, suggestions, interrupt } = useCopilotChatHeadless_c();
+ * ```
+ */
+function useCopilotChatHeadless_c(options: UseCopilotChatOptions_c = {}): UseCopilotChatReturn_c {
+  const { copilotApiConfig, setBannerError } = useCopilotContext();
+
+  // Check if publicApiKey is available
+  const hasPublicApiKey = Boolean(copilotApiConfig.publicApiKey);
+
+  // Always call the internal hook (follows rules of hooks)
+  const internalResult = useCopilotChatInternal(options);
+
+  // Set banner error when no public API key is provided
+  useEffect(() => {
+    if (!hasPublicApiKey) {
+      setBannerError(
+        new CopilotKitError({
+          message:
+            // add link to documentation here
+            "You're using useCopilotChatHeadless_c, a subscription-only feature, which offers extensive headless chat capabilities. To continue, you'll need to provide a free subscription key.",
+          code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+          severity: Severity.WARNING,
+          visibility: ErrorVisibility.BANNER,
+        }),
+      );
+      styledConsole.logCopilotKitPlatformMessage();
+    } else {
+      setBannerError(null); // Clear banner when API key is provided
+    }
+  }, [hasPublicApiKey]); // Removed setBannerError dependency
+
+  // Return internal result if publicApiKey is available, otherwise return fallback
+  if (hasPublicApiKey) {
+    return internalResult;
+  }
+
+  // Return non-functional fallback when no publicApiKey
+  return createNonFunctionalReturn();
+}
+
+export { defaultSystemMessage, useCopilotChatHeadless_c };
+export type { UseCopilotChatOptions_c, UseCopilotChatReturn_c, MCPServerConfig };
+
+const noKeyWarning = () => {
+  styledConsole.logCopilotKitPlatformMessage();
+};