@copilotkit/react-core 1.50.0-beta.8 → 1.50.0

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

@@ -15,7 +15,11 @@
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState, SetStateAction } from "react";
-import { CopilotChatConfigurationProvider, CopilotKitProvider } from "@copilotkitnext/react";
+import {
+  CopilotChatConfigurationProvider,
+  CopilotKitInspector,
+  CopilotKitProvider as CopilotKitNextProvider,
+} from "@copilotkitnext/react";
 import {
   CopilotContext,
   CopilotApiConfig,
@@ -53,7 +57,6 @@ import {
   LangGraphInterruptActionSetterArgs,
   QueuedInterruptEvent,
 } from "../../types/interrupt-action";
-import { ConsoleTrigger } from "../dev-console/console-trigger";
 import { CoAgentStateRendersProvider } from "../../context/coagent-state-renders-context";
 import { CoAgentStateRenderBridge } from "../../hooks/use-coagent-state-render-bridge";
 import { ThreadsProvider, useThreads } from "../../context/threads-context";
@@ -61,6 +64,7 @@ import { CopilotListeners } from "../CopilotListeners";
 
 export function CopilotKit({ children, ...props }: CopilotKitProps) {
   const enabled = shouldShowDevConsole(props.showDevConsole);
+  const showInspector = shouldShowDevConsole(props.enableInspector);
 
   // Use API key if provided, otherwise use the license key
   const publicApiKey = props.publicApiKey || props.publicLicenseKey;
@@ -71,9 +75,14 @@ export function CopilotKit({ children, ...props }: CopilotKitProps) {
     <ToastProvider enabled={enabled}>
       <CopilotErrorBoundary publicApiKey={publicApiKey} showUsageBanner={enabled}>
         <ThreadsProvider threadId={props.threadId}>
-          <CopilotKitProvider {...props} renderCustomMessages={renderArr} useSingleEndpoint={true}>
+          <CopilotKitNextProvider
+            {...props}
+            showDevConsole={showInspector}
+            renderCustomMessages={renderArr}
+            useSingleEndpoint={true}
+          >
             <CopilotKitInternal {...props}>{children}</CopilotKitInternal>
-          </CopilotKitProvider>
+          </CopilotKitNextProvider>
         </ThreadsProvider>
       </CopilotErrorBoundary>
     </ToastProvider>
@@ -587,7 +596,6 @@ export function CopilotKitInternal(cpkProps: CopilotKitProps) {
           <MessagesTapProvider>
             <CopilotMessages>
               {memoizedChildren}
-              {showDevConsole && <ConsoleTrigger />}
               <RegisteredActionsRenderer />
             </CopilotMessages>
           </MessagesTapProvider>

package/src/hooks/index.ts

@@ -24,6 +24,6 @@ export { useRenderToolCall } from "./use-render-tool-call";
 export { useDefaultTool } from "./use-default-tool";
 export { useLazyToolRenderer } from "./use-lazy-tool-renderer";
 export {
-  useConfigureChatSuggestions,
+  useCopilotChatSuggestions,
   type UseCopilotChatSuggestionsConfiguration,
-} from "./use-configure-chat-suggestions";
+} from "./use-copilot-chat-suggestions";

package/src/hooks/use-copilot-chat-suggestions.tsx

@@ -0,0 +1,124 @@
+/**
+ * <Callout type="warning">
+ *   useCopilotChatSuggestions is experimental. The interface is not final and
+ *   can change without notice.
+ * </Callout>
+ *
+ * `useCopilotReadable` is a React hook that provides app-state and other information
+ * to the Copilot. Optionally, the hook can also handle hierarchical state within your
+ * application, passing these parent-child relationships to the Copilot.
+ *
+ * <br/>
+ * <img src="https://cdn.copilotkit.ai/docs/copilotkit/images/use-copilot-chat-suggestions/use-copilot-chat-suggestions.gif" width="500" />
+ *
+ * ## Usage
+ *
+ * ### Install Dependencies
+ *
+ * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
+ *
+ * ```shell npm2yarn \"@copilotkit/react-ui"\
+ * npm install @copilotkit/react-core @copilotkit/react-ui
+ * ```
+ *
+ * ### Simple Usage
+ *
+ * ```tsx
+ * import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
+ *
+ * export function MyComponent() {
+ *   const [employees, setEmployees] = useState([]);
+ *
+ *   useCopilotChatSuggestions({
+ *     instructions: `The following employees are on duty: ${JSON.stringify(employees)}`,
+ *   });
+ * }
+ * ```
+ *
+ * ### Dependency Management
+ *
+ * ```tsx
+ * import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
+ *
+ * export function MyComponent() {
+ *   useCopilotChatSuggestions(
+ *     {
+ *       instructions: "Suggest the most relevant next actions.",
+ *     },
+ *     [appState],
+ *   );
+ * }
+ * ```
+ *
+ * In the example above, the suggestions are generated based on the given instructions.
+ * The hook monitors `appState`, and updates suggestions accordingly whenever it changes.
+ *
+ * ### Behavior and Lifecycle
+ *
+ * The hook registers the configuration with the chat context upon component mount and
+ * removes it on unmount, ensuring a clean and efficient lifecycle management.
+ */
+import {
+  useConfigureSuggestions,
+  useCopilotChatConfiguration,
+  useCopilotKit,
+  useSuggestions,
+} from "@copilotkitnext/react";
+import { useEffect } from "react";
+import { StaticSuggestionsConfig, Suggestion } from "@copilotkitnext/core";
+
+type StaticSuggestionInput = Omit<Suggestion, "isLoading"> & Partial<Pick<Suggestion, "isLoading">>;
+
+type StaticSuggestionsConfigInput = Omit<StaticSuggestionsConfig, "suggestions"> & {
+  suggestions: StaticSuggestionInput[];
+};
+
+type DynamicSuggestionsConfigInput = {
+  /**
+   * A prompt or instructions for the GPT to generate suggestions.
+   */
+  instructions: string;
+  /**
+   * The minimum number of suggestions to generate. Defaults to `1`.
+   * @default 1
+   */
+  minSuggestions?: number;
+  /**
+   * The maximum number of suggestions to generate. Defaults to `3`.
+   * @default 1
+   */
+  maxSuggestions?: number;
+
+  /**
+   * Whether the suggestions are available. Defaults to `enabled`.
+   * @default enabled
+   */
+  available?: "enabled" | "disabled" | "always" | "before-first-message" | "after-first-message";
+
+  /**
+   * An optional class name to apply to the suggestions.
+   */
+  className?: string;
+};
+
+export type UseCopilotChatSuggestionsConfiguration =
+  | DynamicSuggestionsConfigInput
+  | StaticSuggestionsConfigInput;
+
+export function useCopilotChatSuggestions(
+  config: UseCopilotChatSuggestionsConfiguration,
+  dependencies: any[] = [],
+) {
+  const existingConfig = useCopilotChatConfiguration();
+  const resolvedAgentId = existingConfig?.agentId ?? "default";
+
+  const available =
+    (config.available === "enabled" ? "always" : config.available) ?? "before-first-message";
+
+  const finalSuggestionConfig = {
+    ...config,
+    available,
+    consumerAgentId: resolvedAgentId, // Use chatConfig.agentId here
+  };
+  useConfigureSuggestions(finalSuggestionConfig, dependencies);
+}

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

@@ -14,10 +14,6 @@ import {
 } from "@copilotkitnext/react";
 import { Suggestion } from "@copilotkitnext/core";
 import { useLazyToolRenderer } from "./use-lazy-tool-renderer";
-import {
-  useConfigureChatSuggestions,
-  UseCopilotChatSuggestionsConfiguration,
-} from "./use-configure-chat-suggestions";
 import { AbstractAgent, AGUIConnectNotImplementedError } from "@ag-ui/client";
 import {
   CoAgentStateRenderBridge,
@@ -71,7 +67,23 @@ export interface UseCopilotChatOptions {
    * Disables inclusion of CopilotKit’s default system message. When true, no system message is sent (this also suppresses any custom message from <code>makeSystemMessage</code>).
    */
   disableSystemMessage?: boolean;
-
+  /**
+   * Controls the behavior of suggestions in the chat interface.
+   *
+   * `auto` (default) - Suggestions are generated automatically:
+   *   - When the chat is first opened (empty state)
+   *   - After each message exchange completes
+   *   - Uses configuration from `useCopilotChatSuggestions` hooks
+   *
+   * `manual` - Suggestions are controlled programmatically:
+   *   - Use `setSuggestions()` to set custom suggestions
+   *   - Use `generateSuggestions()` to trigger AI generation
+   *   - Access via `useCopilotChat` hook
+   *
+   * `SuggestionItem[]` - Static suggestions array:
+   *   - Always shows the same suggestions
+   *   - No AI generation involved
+   */
   suggestions?: ChatSuggestions;
 }
 
@@ -258,27 +270,6 @@ export interface UseCopilotChatReturn {
   threadId?: string;
 }
 
-function useConfigureSuggestions(suggestions?: UseCopilotChatOptions["suggestions"]) {
-  let suggestionsConfig: UseCopilotChatSuggestionsConfiguration;
-
-  if (Array.isArray(suggestions)) {
-    suggestionsConfig = {
-      suggestions,
-      available: "always",
-    };
-  } else if (suggestions === "auto") {
-    suggestionsConfig = {
-      available: suggestions === "auto" ? "always" : "disabled",
-      instructions:
-        "Suggest what the user could say next. Provide clear, highly relevant suggestions. Do not literally suggest function calls.",
-    };
-  } else {
-    suggestionsConfig = { available: "disabled" } as UseCopilotChatSuggestionsConfiguration;
-  }
-
-  useConfigureChatSuggestions(suggestionsConfig);
-}
-
 export function useCopilotChatInternal({
   suggestions,
 }: UseCopilotChatOptions = {}): UseCopilotChatReturn {
@@ -286,7 +277,6 @@ export function useCopilotChatInternal({
   const { threadId, agentSession } = useCopilotContext();
   const existingConfig = useCopilotChatConfiguration();
   const [agentAvailable, setAgentAvailable] = useState(false);
-  useConfigureSuggestions(suggestions);
 
   // Apply priority: props > existing config > defaults
   const resolvedAgentId = existingConfig?.agentId ?? "default";
@@ -523,6 +513,16 @@ export function useCopilotChatInternal({
     resolvedAgentId,
   ]);
 
+  const renderedSuggestions = useMemo(() => {
+    if (Array.isArray(suggestions)) {
+      return {
+        suggestions: suggestions.map((s) => ({ ...s, isLoading: false })),
+        isLoading: false,
+      };
+    }
+    return currentSuggestions;
+  }, [suggestions, currentSuggestions]);
+
   // @ts-ignore
   return {
     messages: resolvedMessages,
@@ -537,12 +537,12 @@ export function useCopilotChatInternal({
     isLoading: Boolean(agent?.isRunning),
     // mcpServers,
     // setMcpServers,
-    suggestions: currentSuggestions.suggestions,
+    suggestions: renderedSuggestions.suggestions,
     setSuggestions: (suggestions: Omit<Suggestion, "isLoading">[]) =>
       copilotkit.addSuggestionsConfig({ suggestions }),
     generateSuggestions: async () => copilotkit.reloadSuggestions(resolvedAgentId),
     resetSuggestions: () => copilotkit.clearSuggestions(resolvedAgentId),
-    isLoadingSuggestions: currentSuggestions.isLoading,
+    isLoadingSuggestions: renderedSuggestions.isLoading,
     interrupt,
     agent,
     threadId,

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

@@ -64,8 +64,6 @@
 import { useCopilotKit } from "@copilotkitnext/react";
 import { useEffect, useRef } from "react";
 
-type DataType = object | number | string | boolean | null | undefined;
-
 /**
  * Options for the useCopilotReadable hook.
  */
@@ -77,7 +75,7 @@ export interface UseCopilotReadableOptions {
   /**
    * The value to be added to the Copilot context. Object values are automatically stringified.
    */
-  value: DataType | Record<string, any> | DataType[];
+  value: any;
   /**
    * The ID of the parent context, if any.
    */
@@ -97,7 +95,7 @@ export interface UseCopilotReadableOptions {
    * A custom conversion function to use to serialize the value to a string. If not provided, the value
    * will be serialized using `JSON.stringify`.
    */
-  convert?: (value: any) => string;
+  convert?: (description: string, value: any) => string;
 }
 
 /**