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

package/dist/hooks/index.js

@@ -97,7 +97,7 @@ __export(hooks_exports, {
 module.exports = __toCommonJS(hooks_exports);
 
 // src/hooks/use-copilot-chat.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/context/copilot-context.tsx
 var import_react = __toESM(require("react"));
@@ -173,7 +173,10 @@ var emptyCopilotContext = {
   langGraphInterruptAction: null,
   setLangGraphInterruptAction: () => null,
   removeLangGraphInterruptAction: () => null,
-  onError: void 0
+  onError: void 0,
+  suggestions: [],
+  setSuggestions: () => {
+  }
 };
 var CopilotContext = import_react.default.createContext(emptyCopilotContext);
 function useCopilotContext() {
@@ -187,11 +190,25 @@ function returnAndThrowInDebug(_value) {
   throw new Error("Remember to wrap your app in a `<CopilotKit> {...} </CopilotKit>` !!!");
 }
 
-// src/hooks/use-copilot-chat.ts
-var import_runtime_client_gql4 = require("@copilotkit/runtime-client-gql");
+// src/context/copilot-messages-context.tsx
+var import_react2 = __toESM(require("react"));
+var emptyCopilotContext2 = {
+  messages: [],
+  setMessages: () => []
+};
+var CopilotMessagesContext = import_react2.default.createContext(emptyCopilotContext2);
+function useCopilotMessagesContext() {
+  const context = import_react2.default.useContext(CopilotMessagesContext);
+  if (context === emptyCopilotContext2) {
+    throw new Error(
+      "A messages consuming component was not wrapped with `<CopilotMessages> {...} </CopilotMessages>`"
+    );
+  }
+  return context;
+}
 
 // src/hooks/use-chat.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_dom = require("react-dom");
 var import_shared4 = require("@copilotkit/shared");
 var import_runtime_client_gql3 = require("@copilotkit/runtime-client-gql");
@@ -225,12 +242,12 @@ function processActionsForRuntimeRequest(actions) {
 var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
 
 // src/components/toast/toast-provider.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_shared2 = require("@copilotkit/shared");
 var import_jsx_runtime = require("react/jsx-runtime");
-var ToastContext = (0, import_react2.createContext)(void 0);
+var ToastContext = (0, import_react3.createContext)(void 0);
 function useToast() {
-  const context = (0, import_react2.useContext)(ToastContext);
+  const context = (0, import_react3.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
@@ -238,7 +255,7 @@ function useToast() {
 }
 
 // src/hooks/use-copilot-runtime-client.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_shared3 = require("@copilotkit/shared");
 
 // src/utils/dev-console.ts
@@ -250,7 +267,7 @@ function shouldShowDevConsole(showDevConsole) {
 var useCopilotRuntimeClient = (options) => {
   const { setBannerError } = useToast();
   const _a = options, { showDevConsole, onError } = _a, runtimeOptions = __objRest(_a, ["showDevConsole", "onError"]);
-  const lastStructuredErrorRef = (0, import_react3.useRef)(null);
+  const lastStructuredErrorRef = (0, import_react4.useRef)(null);
   const traceUIError = (error, originalError) => __async(void 0, null, function* () {
     if (!onError || !runtimeOptions.publicApiKey)
       return;
@@ -278,7 +295,7 @@ var useCopilotRuntimeClient = (options) => {
       console.error("Error in onError handler:", error2);
     }
   });
-  const runtimeClient = (0, import_react3.useMemo)(() => {
+  const runtimeClient = (0, import_react4.useMemo)(() => {
     return new import_runtime_client_gql2.CopilotRuntimeClient(__spreadProps(__spreadValues({}, runtimeOptions), {
       handleGQLErrors: (error) => {
         var _a2;
@@ -367,7 +384,7 @@ function createStructuredError(gqlError) {
 }
 
 // src/components/error-boundary/error-utils.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/toast/exclamation-mark-icon.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -450,7 +467,7 @@ function ErrorToast({ errors }) {
 }
 function useErrorToast() {
   const { addToast } = useToast();
-  return (0, import_react4.useCallback)(
+  return (0, import_react5.useCallback)(
     (error) => {
       const errorId = error.map((err) => {
         var _a, _b;
@@ -470,7 +487,7 @@ function useErrorToast() {
 }
 function useAsyncCallback(callback, deps) {
   const addErrorToast = useErrorToast();
-  return (0, import_react4.useCallback)((...args) => __async(this, null, function* () {
+  return (0, import_react5.useCallback)((...args) => __async(this, null, function* () {
     try {
       return yield callback(...args);
     } catch (error) {
@@ -509,7 +526,7 @@ function useChat(options) {
     langGraphInterruptAction,
     setLangGraphInterruptAction
   } = options;
-  const runChatCompletionRef = (0, import_react5.useRef)();
+  const runChatCompletionRef = (0, import_react6.useRef)();
   const addErrorToast = useErrorToast();
   const { setBannerError } = useToast();
   const { onError } = useCopilotContext();
@@ -540,11 +557,11 @@ function useChat(options) {
       console.error("Error in use-chat onError handler:", traceError);
     }
   });
-  const agentSessionRef = (0, import_react5.useRef)(agentSession);
+  const agentSessionRef = (0, import_react6.useRef)(agentSession);
   agentSessionRef.current = agentSession;
-  const runIdRef = (0, import_react5.useRef)(runId);
+  const runIdRef = (0, import_react6.useRef)(runId);
   runIdRef.current = runId;
-  const extensionsRef = (0, import_react5.useRef)(extensions);
+  const extensionsRef = (0, import_react6.useRef)(extensions);
   extensionsRef.current = extensions;
   const publicApiKey = copilotConfig.publicApiKey;
   const headers = __spreadValues(__spreadValues({}, copilotConfig.headers || {}), publicApiKey ? { [import_shared4.COPILOT_CLOUD_PUBLIC_API_KEY_HEADER]: publicApiKey } : {});
@@ -556,7 +573,7 @@ function useChat(options) {
     credentials: copilotConfig.credentials,
     showDevConsole
   });
-  const pendingAppendsRef = (0, import_react5.useRef)([]);
+  const pendingAppendsRef = (0, import_react6.useRef)([]);
   const runChatCompletion = useAsyncCallback(
     (previousMessages) => __async(this, null, function* () {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
@@ -950,7 +967,7 @@ function useChat(options) {
     }),
     [messages]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!isLoading && pendingAppendsRef.current.length > 0) {
       const pending = pendingAppendsRef.current.splice(0);
       const followUp = pending.some((p) => p.followUp);
@@ -961,7 +978,7 @@ function useChat(options) {
       }
     }
   }, [isLoading, messages, setMessages, runChatCompletionAndHandleFunctionCall]);
-  const composeAndFlushMetaEventsInput = (0, import_react5.useCallback)(
+  const composeAndFlushMetaEventsInput = (0, import_react6.useCallback)(
     (metaEvents) => {
       return metaEvents.reduce((acc, event) => {
         if (!event)
@@ -1141,36 +1158,326 @@ function getPairedFeAction(actions, message) {
 // src/components/copilot-provider/copilotkit.tsx
 var import_react7 = require("react");
 var import_react_dom2 = require("react-dom");
+var import_shared7 = require("@copilotkit/shared");
+
+// src/utils/extract.ts
 var import_shared5 = require("@copilotkit/shared");
+var import_runtime_client_gql4 = require("@copilotkit/runtime-client-gql");
+var import_runtime_client_gql5 = require("@copilotkit/runtime-client-gql");
+function extract(_0) {
+  return __async(this, arguments, function* ({
+    context,
+    instructions,
+    parameters,
+    include,
+    data,
+    abortSignal,
+    stream,
+    requestType = import_runtime_client_gql4.CopilotRequestType.Task,
+    forwardedParameters
+  }) {
+    var _a, _b;
+    const { messages } = context;
+    const action = {
+      name: "extract",
+      description: instructions,
+      parameters,
+      handler: (args) => {
+      }
+    };
+    const includeReadable = (_a = include == null ? void 0 : include.readable) != null ? _a : false;
+    const includeMessages = (_b = include == null ? void 0 : include.messages) != null ? _b : false;
+    let contextString = "";
+    if (data) {
+      contextString = (typeof data === "string" ? data : JSON.stringify(data)) + "\n\n";
+    }
+    if (includeReadable) {
+      contextString += context.getContextString([], defaultCopilotContextCategories);
+    }
+    const systemMessage = new import_runtime_client_gql4.TextMessage({
+      content: makeSystemMessage(contextString, instructions),
+      role: import_runtime_client_gql4.Role.System
+    });
+    const instructionsMessage = new import_runtime_client_gql4.TextMessage({
+      content: makeInstructionsMessage(instructions),
+      role: import_runtime_client_gql4.Role.User
+    });
+    const response = context.runtimeClient.asStream(
+      context.runtimeClient.generateCopilotResponse({
+        data: {
+          frontend: {
+            actions: [
+              {
+                name: action.name,
+                description: action.description || "",
+                jsonSchema: JSON.stringify((0, import_shared5.actionParametersToJsonSchema)(action.parameters || []))
+              }
+            ],
+            url: window.location.href
+          },
+          messages: (0, import_runtime_client_gql5.convertMessagesToGqlInput)(
+            includeMessages ? [systemMessage, instructionsMessage, ...(0, import_runtime_client_gql5.filterAgentStateMessages)(messages)] : [systemMessage, instructionsMessage]
+          ),
+          metadata: {
+            requestType
+          },
+          forwardedParameters: __spreadProps(__spreadValues({}, forwardedParameters != null ? forwardedParameters : {}), {
+            toolChoice: "function",
+            toolChoiceFunctionName: action.name
+          })
+        },
+        properties: context.copilotApiConfig.properties,
+        signal: abortSignal
+      })
+    );
+    const reader = response.getReader();
+    let isInitial = true;
+    let actionExecutionMessage = void 0;
+    while (true) {
+      const { done, value } = yield reader.read();
+      if (done) {
+        break;
+      }
+      if (abortSignal == null ? void 0 : abortSignal.aborted) {
+        throw new Error("Aborted");
+      }
+      actionExecutionMessage = (0, import_runtime_client_gql4.convertGqlOutputToMessages)(
+        value.generateCopilotResponse.messages
+      ).find((msg) => msg.isActionExecutionMessage());
+      if (!actionExecutionMessage) {
+        continue;
+      }
+      stream == null ? void 0 : stream({
+        status: isInitial ? "initial" : "inProgress",
+        args: actionExecutionMessage.arguments
+      });
+      isInitial = false;
+    }
+    if (!actionExecutionMessage) {
+      throw new Error("extract() failed: No function call occurred");
+    }
+    stream == null ? void 0 : stream({
+      status: "complete",
+      args: actionExecutionMessage.arguments
+    });
+    return actionExecutionMessage.arguments;
+  });
+}
+function makeInstructionsMessage(instructions) {
+  return `
+The user has given you the following task to complete:
 
-// src/context/copilot-messages-context.tsx
-var import_react6 = __toESM(require("react"));
-var emptyCopilotContext2 = {
-  messages: [],
-  setMessages: () => []
-};
-var CopilotMessagesContext = import_react6.default.createContext(emptyCopilotContext2);
-function useCopilotMessagesContext() {
-  const context = import_react6.default.useContext(CopilotMessagesContext);
-  if (context === emptyCopilotContext2) {
-    throw new Error(
-      "A messages consuming component was not wrapped with `<CopilotMessages> {...} </CopilotMessages>`"
+\`\`\`
+${instructions}
+\`\`\`
+
+Any additional messages provided are for providing context only and should not be used to ask questions or engage in conversation.
+`;
+}
+function makeSystemMessage(contextString, instructions) {
+  return `
+Please act as an efficient, competent, conscientious, and industrious professional assistant.
+
+Help the user achieve their goals, and you do so in a way that is as efficient as possible, without unnecessary fluff, but also without sacrificing professionalism.
+Always be polite and respectful, and prefer brevity over verbosity.
+
+The user has provided you with the following context:
+\`\`\`
+${contextString}
+\`\`\`
+
+They have also provided you with a function called extract you MUST call to initiate actions on their behalf.
+
+Please assist them as best you can.
+
+This is not a conversation, so please do not ask questions. Just call the function without saying anything else.
+`;
+}
+
+// src/utils/suggestions.ts
+var import_shared6 = require("@copilotkit/shared");
+var import_runtime_client_gql6 = require("@copilotkit/runtime-client-gql");
+var reloadSuggestions = (context, chatSuggestionConfiguration, setCurrentSuggestions, abortControllerRef) => __async(void 0, null, function* () {
+  const abortController = abortControllerRef.current;
+  if (abortController == null ? void 0 : abortController.signal.aborted) {
+    return;
+  }
+  const setSuggestionsIfNotAborted = (suggestions) => {
+    if (!(abortController == null ? void 0 : abortController.signal.aborted) && abortControllerRef.current === abortController) {
+      setCurrentSuggestions(suggestions);
+    }
+  };
+  try {
+    const tools = JSON.stringify(
+      Object.values(context.actions).map((action) => ({
+        name: action.name,
+        description: action.description,
+        jsonSchema: JSON.stringify((0, import_shared6.actionParametersToJsonSchema)(action.parameters))
+      }))
     );
+    const allSuggestions = [];
+    let hasSuccessfulSuggestions = false;
+    let hasErrors = false;
+    let lastError = null;
+    const enabledConfigs = Object.values(chatSuggestionConfiguration).filter(
+      (config) => config.instructions && config.instructions.trim().length > 0
+    );
+    if (enabledConfigs.length === 0) {
+      return;
+    }
+    setSuggestionsIfNotAborted([]);
+    for (const config of enabledConfigs) {
+      if (abortController == null ? void 0 : abortController.signal.aborted) {
+        setSuggestionsIfNotAborted([]);
+        return;
+      }
+      try {
+        const result = yield extract({
+          context,
+          instructions: "Suggest what the user could say next. Provide clear, highly relevant suggestions. Do not literally suggest function calls. ",
+          data: `${config.instructions}
+
+Available tools: ${tools}
+
+`,
+          requestType: import_runtime_client_gql6.CopilotRequestType.Task,
+          parameters: [
+            {
+              name: "suggestions",
+              type: "object[]",
+              attributes: [
+                {
+                  name: "title",
+                  description: "The title of the suggestion. This is shown as a button and should be short.",
+                  type: "string"
+                },
+                {
+                  name: "message",
+                  description: "The message to send when the suggestion is clicked. This should be a clear, complete sentence and will be sent as an instruction to the AI.",
+                  type: "string"
+                }
+              ]
+            }
+          ],
+          include: {
+            messages: true,
+            readable: true
+          },
+          abortSignal: abortController == null ? void 0 : abortController.signal,
+          stream: ({ status, args }) => {
+            if (abortController == null ? void 0 : abortController.signal.aborted) {
+              return;
+            }
+            const suggestions = args.suggestions || [];
+            const newSuggestions = [];
+            for (let i = 0; i < suggestions.length; i++) {
+              if (config.maxSuggestions !== void 0 && i >= config.maxSuggestions) {
+                break;
+              }
+              const suggestion = suggestions[i];
+              if (!suggestion || typeof suggestion !== "object") {
+                continue;
+              }
+              const { title, message } = suggestion;
+              const hasValidTitle = title && typeof title === "string" && title.trim().length > 0;
+              const hasValidMessage = message && typeof message === "string" && message.trim().length > 0;
+              if (!hasValidTitle) {
+                continue;
+              }
+              const partial = i === suggestions.length - 1 && status !== "complete";
+              newSuggestions.push({
+                title: title.trim(),
+                message: hasValidMessage ? message.trim() : "",
+                // Use title as fallback
+                partial,
+                className: config.className
+              });
+            }
+            setSuggestionsIfNotAborted([...allSuggestions, ...newSuggestions]);
+          }
+        });
+        if ((result == null ? void 0 : result.suggestions) && Array.isArray(result.suggestions)) {
+          const validSuggestions = result.suggestions.filter(
+            (suggestion) => suggestion && typeof suggestion.title === "string" && suggestion.title.trim().length > 0
+          ).map((suggestion) => ({
+            title: suggestion.title.trim(),
+            message: suggestion.message && typeof suggestion.message === "string" && suggestion.message.trim() ? suggestion.message.trim() : suggestion.title.trim()
+          }));
+          if (validSuggestions.length > 0) {
+            allSuggestions.push(...validSuggestions);
+            hasSuccessfulSuggestions = true;
+          }
+        }
+      } catch (error) {
+        hasErrors = true;
+        lastError = error instanceof Error ? error : new Error(String(error));
+      }
+    }
+    if (hasSuccessfulSuggestions && allSuggestions.length > 0) {
+      const uniqueSuggestions = allSuggestions.filter(
+        (suggestion, index, self) => index === self.findIndex((s) => s.message === suggestion.message)
+      );
+      setSuggestionsIfNotAborted(uniqueSuggestions);
+    } else if (hasErrors) {
+      const errorMessage = lastError ? lastError.message : "Failed to generate suggestions due to API errors";
+      throw new Error(errorMessage);
+    }
+  } catch (error) {
+    throw error;
   }
-  return context;
-}
+});
 
 // src/components/copilot-provider/copilotkit.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultCopilotContextCategories = ["global"];
 
 // src/hooks/use-copilot-chat.ts
-function useCopilotChat(_a = {}) {
-  var _b = _a, {
-    makeSystemMessage
-  } = _b, options = __objRest(_b, [
-    "makeSystemMessage"
-  ]);
+var import_runtime_client_gql7 = require("@copilotkit/runtime-client-gql");
+
+// src/hooks/use-langgraph-interrupt-render.ts
+var import_react8 = __toESM(require("react"));
+var InterruptRenderer = ({ event, result, render, resolve }) => {
+  return render({ event, result, resolve });
+};
+function useLangGraphInterruptRender() {
+  const { langGraphInterruptAction, setLangGraphInterruptAction, agentSession } = useCopilotContext();
+  const responseRef = import_react8.default.useRef();
+  const resolveInterrupt = (0, import_react8.useCallback)(
+    (response) => {
+      responseRef.current = response;
+      setTimeout(() => {
+        setLangGraphInterruptAction({ event: { response } });
+      }, 0);
+    },
+    [setLangGraphInterruptAction]
+  );
+  if (!langGraphInterruptAction || !langGraphInterruptAction.event || !langGraphInterruptAction.render)
+    return null;
+  const { render, handler, event, enabled } = langGraphInterruptAction;
+  const conditionsMet = !agentSession || !enabled ? true : enabled({ eventValue: event.value, agentMetadata: agentSession });
+  if (!conditionsMet) {
+    return null;
+  }
+  let result = null;
+  if (handler) {
+    result = handler({
+      event,
+      resolve: resolveInterrupt
+    });
+  }
+  return import_react8.default.createElement(InterruptRenderer, {
+    event,
+    result,
+    render,
+    resolve: resolveInterrupt
+  });
+}
+
+// src/hooks/use-copilot-chat.ts
+var globalSuggestionPromise = null;
+function useCopilotChat(options = {}) {
+  var _a;
+  const makeSystemMessage2 = (_a = options.makeSystemMessage) != null ? _a : defaultSystemMessage;
   const {
     getContextString,
     getFunctionCallHandler,
@@ -1194,11 +1501,72 @@ function useCopilotChat(_a = {}) {
     extensions,
     setExtensions,
     langGraphInterruptAction,
-    setLangGraphInterruptAction
+    setLangGraphInterruptAction,
+    chatSuggestionConfiguration,
+    suggestions,
+    setSuggestions,
+    runtimeClient
   } = useCopilotContext();
   const { messages, setMessages } = useCopilotMessagesContext();
-  const [mcpServers, setLocalMcpServers] = (0, import_react8.useState)([]);
-  (0, import_react8.useEffect)(() => {
+  const [mcpServers, setLocalMcpServers] = (0, import_react9.useState)([]);
+  const suggestionsAbortControllerRef = (0, import_react9.useRef)(null);
+  const isLoadingSuggestionsRef = (0, import_react9.useRef)(false);
+  const abortSuggestions = (0, import_react9.useCallback)(
+    (clear = true) => {
+      var _a2;
+      (_a2 = suggestionsAbortControllerRef.current) == null ? void 0 : _a2.abort("suggestions aborted by user");
+      suggestionsAbortControllerRef.current = null;
+      if (clear) {
+        setSuggestions([]);
+      }
+    },
+    [setSuggestions]
+  );
+  const stableContext = (0, import_react9.useMemo)(() => {
+    return {
+      actions,
+      copilotApiConfig,
+      chatSuggestionConfiguration,
+      messages,
+      setMessages,
+      getContextString,
+      runtimeClient
+    };
+  }, [
+    JSON.stringify(Object.keys(actions)),
+    copilotApiConfig.chatApiEndpoint,
+    messages.length,
+    Object.keys(chatSuggestionConfiguration).length
+  ]);
+  const generateSuggestionsFunc = (0, import_react9.useCallback)(() => __async(this, null, function* () {
+    if (globalSuggestionPromise) {
+      return globalSuggestionPromise;
+    }
+    globalSuggestionPromise = (() => __async(this, null, function* () {
+      try {
+        abortSuggestions();
+        isLoadingSuggestionsRef.current = true;
+        suggestionsAbortControllerRef.current = new AbortController();
+        setSuggestions([]);
+        yield reloadSuggestions(
+          stableContext,
+          chatSuggestionConfiguration,
+          setSuggestions,
+          suggestionsAbortControllerRef
+        );
+      } catch (error) {
+        throw error;
+      } finally {
+        isLoadingSuggestionsRef.current = false;
+        globalSuggestionPromise = null;
+      }
+    }))();
+    return globalSuggestionPromise;
+  }), [stableContext, chatSuggestionConfiguration, setSuggestions, abortSuggestions]);
+  const resetSuggestions = (0, import_react9.useCallback)(() => {
+    setSuggestions([]);
+  }, [setSuggestions]);
+  (0, import_react9.useEffect)(() => {
     if (mcpServers.length > 0) {
       const serversCopy = [...mcpServers];
       copilotApiConfig.mcpServers = serversCopy;
@@ -1208,7 +1576,7 @@ function useCopilotChat(_a = {}) {
       copilotApiConfig.properties.mcpServers = serversCopy;
     }
   }, [mcpServers, copilotApiConfig]);
-  const setMcpServers = (0, import_react8.useCallback)((servers) => {
+  const setMcpServers = (0, import_react9.useCallback)((servers) => {
     setLocalMcpServers(servers);
   }, []);
   const onCoAgentStateRender = useAsyncCallback(
@@ -1229,15 +1597,15 @@ function useCopilotChat(_a = {}) {
     }),
     [coAgentStateRenders]
   );
-  const makeSystemMessageCallback = (0, import_react8.useCallback)(() => {
-    const systemMessageMaker = makeSystemMessage || defaultSystemMessage;
+  const makeSystemMessageCallback = (0, import_react9.useCallback)(() => {
+    const systemMessageMaker = makeSystemMessage2 || defaultSystemMessage;
     const contextString = getContextString([], defaultCopilotContextCategories);
-    return new import_runtime_client_gql4.TextMessage({
+    return new import_runtime_client_gql7.TextMessage({
       content: systemMessageMaker(contextString, chatInstructions),
-      role: import_runtime_client_gql4.Role.System
+      role: import_runtime_client_gql7.Role.System
     });
-  }, [getContextString, makeSystemMessage, chatInstructions]);
-  const deleteMessage = (0, import_react8.useCallback)(
+  }, [getContextString, makeSystemMessage2, chatInstructions]);
+  const deleteMessage = (0, import_react9.useCallback)(
     (messageId) => {
       setMessages((prev) => prev.filter((message) => message.id !== messageId));
     },
@@ -1246,7 +1614,7 @@ function useCopilotChat(_a = {}) {
   const { append, reload, stop, runChatCompletion } = useChat(__spreadProps(__spreadValues({}, options), {
     actions: Object.values(actions),
     copilotConfig: copilotApiConfig,
-    initialMessages: options.initialMessages || [],
+    initialMessages: (0, import_runtime_client_gql7.aguiToGQL)(options.initialMessages || []),
     onFunctionCall: getFunctionCallHandler(),
     onCoAgentStateRender,
     messages,
@@ -1273,7 +1641,8 @@ function useCopilotChat(_a = {}) {
   const latestAppend = useUpdatedRef(append);
   const latestAppendFunc = useAsyncCallback(
     (message, options2) => __async(this, null, function* () {
-      return yield latestAppend.current(message, options2);
+      abortSuggestions(options2 == null ? void 0 : options2.clearSuggestions);
+      return yield latestAppend.current((0, import_runtime_client_gql7.aguiToGQL)([message])[0], options2);
     }),
     [latestAppend]
   );
@@ -1285,20 +1654,20 @@ function useCopilotChat(_a = {}) {
     [latestReload]
   );
   const latestStop = useUpdatedRef(stop);
-  const latestStopFunc = (0, import_react8.useCallback)(() => {
+  const latestStopFunc = (0, import_react9.useCallback)(() => {
     return latestStop.current();
   }, [latestStop]);
   const latestDelete = useUpdatedRef(deleteMessage);
-  const latestDeleteFunc = (0, import_react8.useCallback)(
+  const latestDeleteFunc = (0, import_react9.useCallback)(
     (messageId) => {
       return latestDelete.current(messageId);
     },
     [latestDelete]
   );
   const latestSetMessages = useUpdatedRef(setMessages);
-  const latestSetMessagesFunc = (0, import_react8.useCallback)(
+  const latestSetMessagesFunc = (0, import_react9.useCallback)(
     (messages2) => {
-      return latestSetMessages.current(messages2);
+      return latestSetMessages.current((0, import_runtime_client_gql7.aguiToGQL)(messages2));
     },
     [latestSetMessages]
   );
@@ -1306,7 +1675,7 @@ function useCopilotChat(_a = {}) {
   const latestRunChatCompletionFunc = useAsyncCallback(() => __async(this, null, function* () {
     return yield latestRunChatCompletion.current();
   }), [latestRunChatCompletion]);
-  const reset = (0, import_react8.useCallback)(() => {
+  const reset = (0, import_react9.useCallback)(() => {
     latestStopFunc();
     setMessages([]);
     setRunId(null);
@@ -1318,20 +1687,23 @@ function useCopilotChat(_a = {}) {
       };
     }
     setAgentSession(initialAgentSession);
+    resetSuggestions();
   }, [
     latestStopFunc,
     setMessages,
     setThreadId,
     setCoagentStatesWithRef,
     setAgentSession,
-    agentLock
+    agentLock,
+    resetSuggestions
   ]);
   const latestReset = useUpdatedRef(reset);
-  const latestResetFunc = (0, import_react8.useCallback)(() => {
+  const latestResetFunc = (0, import_react9.useCallback)(() => {
     return latestReset.current();
   }, [latestReset]);
+  const interrupt = useLangGraphInterruptRender();
   return {
-    visibleMessages: messages,
+    visibleMessages: (0, import_runtime_client_gql7.gqlToAGUI)(messages, actions, coAgentStateRenders),
     appendMessage: latestAppendFunc,
     setMessages: latestSetMessagesFunc,
     reloadMessages: latestReloadFunc,
@@ -1341,12 +1713,18 @@ function useCopilotChat(_a = {}) {
     runChatCompletion: latestRunChatCompletionFunc,
     isLoading,
     mcpServers,
-    setMcpServers
+    setMcpServers,
+    suggestions,
+    setSuggestions,
+    generateSuggestions: generateSuggestionsFunc,
+    resetSuggestions,
+    isLoadingSuggestions: isLoadingSuggestionsRef.current,
+    interrupt
   };
 }
 function useUpdatedRef(value) {
-  const ref = (0, import_react8.useRef)(value);
-  (0, import_react8.useEffect)(() => {
+  const ref = (0, import_react9.useRef)(value);
+  (0, import_react9.useEffect)(() => {
     ref.current = value;
   }, [value]);
   return ref;
@@ -1379,13 +1757,13 @@ ${additionalInstructions}` : "");
 }
 
 // src/hooks/use-copilot-action.ts
-var import_shared6 = require("@copilotkit/shared");
-var import_react9 = require("react");
+var import_shared8 = require("@copilotkit/shared");
+var import_react10 = require("react");
 function useCopilotAction(action, dependencies) {
   const { setAction, removeAction, actions, chatComponentsCache } = useCopilotContext();
-  const idRef = (0, import_react9.useRef)((0, import_shared6.randomId)());
-  const renderAndWaitRef = (0, import_react9.useRef)(null);
-  const activatingMessageIdRef = (0, import_react9.useRef)(null);
+  const idRef = (0, import_react10.useRef)((0, import_shared8.randomId)());
+  const renderAndWaitRef = (0, import_react10.useRef)(null);
+  const activatingMessageIdRef = (0, import_react10.useRef)(null);
   const { addToast } = useToast();
   action = __spreadValues({}, action);
   if (
@@ -1447,7 +1825,7 @@ function useCopilotAction(action, dependencies) {
           return renderAndWait(waitProps);
         }
       }
-      return (0, import_react9.createElement)(import_react9.Fragment);
+      return (0, import_react10.createElement)(import_react10.Fragment);
     };
   }
   if (dependencies === void 0) {
@@ -1462,7 +1840,7 @@ function useCopilotAction(action, dependencies) {
       }
     }
   }
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const hasDuplicate = Object.values(actions).some(
       (otherAction) => otherAction.name === action.name && otherAction !== actions[idRef.current]
     );
@@ -1474,7 +1852,7 @@ function useCopilotAction(action, dependencies) {
       });
     }
   }, [actions]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setAction(idRef.current, action);
     if (chatComponentsCache.current !== null && action.render !== void 0) {
       chatComponentsCache.current.actions[action.name] = action.render;
@@ -1503,8 +1881,8 @@ function isFrontendAction(action) {
 }
 
 // src/hooks/use-coagent-state-render.ts
-var import_react10 = require("react");
-var import_shared7 = require("@copilotkit/shared");
+var import_react11 = require("react");
+var import_shared9 = require("@copilotkit/shared");
 function useCoAgentStateRender(action, dependencies) {
   const {
     setCoAgentStateRender,
@@ -1512,13 +1890,13 @@ function useCoAgentStateRender(action, dependencies) {
     coAgentStateRenders,
     chatComponentsCache,
     availableAgents
-  } = (0, import_react10.useContext)(CopilotContext);
-  const idRef = (0, import_react10.useRef)((0, import_shared7.randomId)());
+  } = (0, import_react11.useContext)(CopilotContext);
+  const idRef = (0, import_react11.useRef)((0, import_shared9.randomId)());
   const { setBannerError, addToast } = useToast();
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if ((availableAgents == null ? void 0 : availableAgents.length) && !availableAgents.some((a) => a.name === action.name)) {
       const message = `(useCoAgentStateRender): Agent "${action.name}" not found. Make sure the agent exists and is properly configured.`;
-      const agentError = new import_shared7.CopilotKitAgentDiscoveryError({
+      const agentError = new import_shared9.CopilotKitAgentDiscoveryError({
         agentName: action.name,
         availableAgents: availableAgents.map((a) => ({ name: a.name, id: a.id }))
       });
@@ -1536,7 +1914,7 @@ function useCoAgentStateRender(action, dependencies) {
       }
     }
   }
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const currentId = idRef.current;
     const hasDuplicate = Object.entries(coAgentStateRenders).some(([id, otherAction]) => {
       if (id === currentId)
@@ -1560,7 +1938,7 @@ function useCoAgentStateRender(action, dependencies) {
       });
     }
   }, [coAgentStateRenders]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setCoAgentStateRender(idRef.current, action);
     if (chatComponentsCache.current !== null && action.render !== void 0) {
       chatComponentsCache.current.coAgentStateRenders[key] = action.render;
@@ -1580,11 +1958,11 @@ function useCoAgentStateRender(action, dependencies) {
 }
 
 // src/hooks/use-make-copilot-document-readable.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useMakeCopilotDocumentReadable(document, categories, dependencies = []) {
   const { addDocumentContext, removeDocumentContext } = useCopilotContext();
-  const idRef = (0, import_react11.useRef)();
-  (0, import_react11.useEffect)(() => {
+  const idRef = (0, import_react12.useRef)();
+  (0, import_react12.useEffect)(() => {
     const id = addDocumentContext(document, categories);
     idRef.current = id;
     return () => {
@@ -1595,7 +1973,7 @@ function useMakeCopilotDocumentReadable(document, categories, dependencies = [])
 }
 
 // src/hooks/use-copilot-readable.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function convertToJSON(description, value) {
   return `${description}: ${typeof value === "string" ? value : JSON.stringify(value)}`;
 }
@@ -1608,10 +1986,10 @@ function useCopilotReadable({
   available = "enabled"
 }, dependencies) {
   const { addContext, removeContext } = useCopilotContext();
-  const idRef = (0, import_react12.useRef)();
+  const idRef = (0, import_react13.useRef)();
   convert = convert || convertToJSON;
   const information = convert(description, value);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (available === "disabled")
       return;
     const id = addContext(information, parentId, categories);
@@ -1624,20 +2002,20 @@ function useCopilotReadable({
 }
 
 // src/hooks/use-coagent.ts
-var import_react13 = require("react");
-var import_shared8 = require("@copilotkit/shared");
+var import_react14 = require("react");
+var import_shared10 = require("@copilotkit/shared");
 function useCoAgent(options) {
   const generalContext = useCopilotContext();
   const { availableAgents } = generalContext;
   const { setBannerError } = useToast();
-  const lastLoadedThreadId = (0, import_react13.useRef)();
-  const lastLoadedState = (0, import_react13.useRef)();
+  const lastLoadedThreadId = (0, import_react14.useRef)();
+  const lastLoadedState = (0, import_react14.useRef)();
   const { name } = options;
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if ((availableAgents == null ? void 0 : availableAgents.length) && !availableAgents.some((a) => a.name === name)) {
       const message = `(useCoAgent): Agent "${name}" not found. Make sure the agent exists and is properly configured.`;
       console.warn(message);
-      const agentError = new import_shared8.CopilotKitAgentDiscoveryError({
+      const agentError = new import_shared10.CopilotKitAgentDiscoveryError({
         agentName: name,
         availableAgents: availableAgents.map((a) => ({ name: a.name, id: a.id }))
       });
@@ -1656,7 +2034,7 @@ function useCoAgent(options) {
     credentials: copilotApiConfig.credentials,
     showDevConsole: context.showDevConsole
   });
-  const setState = (0, import_react13.useCallback)(
+  const setState = (0, import_react14.useCallback)(
     (newState) => {
       let coagentState = getCoagentState({ coagentStates, name, options });
       const updatedState = typeof newState === "function" ? newState(coagentState.state) : newState;
@@ -1668,7 +2046,7 @@ function useCoAgent(options) {
     },
     [coagentStates, name]
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const fetchAgentState = () => __async(this, null, function* () {
       var _a, _b, _c, _d;
       if (!threadId || threadId === lastLoadedThreadId.current)
@@ -1686,13 +2064,13 @@ function useCoAgent(options) {
       if (((_d = (_c = result.data) == null ? void 0 : _c.loadAgentState) == null ? void 0 : _d.threadExists) && newState && newState != "{}") {
         lastLoadedState.current = newState;
         lastLoadedThreadId.current = threadId;
-        const fetchedState = (0, import_shared8.parseJson)(newState, {});
+        const fetchedState = (0, import_shared10.parseJson)(newState, {});
         isExternalStateManagement(options) ? options.setState(fetchedState) : setState(fetchedState);
       }
     });
     void fetchAgentState();
   }, [threadId]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (isExternalStateManagement(options)) {
       setState(options.state);
     } else if (coagentStates[name] === void 0) {
@@ -1703,7 +2081,7 @@ function useCoAgent(options) {
     // reset initialstate on reset
     coagentStates[name] === void 0
   ]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const newConfig = options.config ? options.config : options.configurable ? { configurable: options.configurable } : void 0;
     if (newConfig === void 0)
       return;
@@ -1735,7 +2113,7 @@ function useCoAgent(options) {
     }),
     [name, context, appendMessage, runChatCompletion]
   );
-  return (0, import_react13.useMemo)(() => {
+  return (0, import_react14.useMemo)(() => {
     const coagentState = getCoagentState({ coagentStates, name, options });
     return {
       name,
@@ -1832,28 +2210,28 @@ var getCoagentState = ({
 };
 
 // src/hooks/use-copilot-authenticated-action.ts
-var import_react14 = require("react");
-var import_react15 = __toESM(require("react"));
+var import_react15 = require("react");
+var import_react16 = __toESM(require("react"));
 function useCopilotAuthenticatedAction_c(action, dependencies) {
   const { authConfig_c, authStates_c, setAuthStates_c } = useCopilotContext();
-  const pendingActionRef = (0, import_react14.useRef)(null);
-  const executeAction2 = (0, import_react14.useCallback)(
+  const pendingActionRef = (0, import_react15.useRef)(null);
+  const executeAction2 = (0, import_react15.useCallback)(
     (props) => {
       if (typeof action.render === "function") {
         return action.render(props);
       }
-      return action.render || import_react15.default.createElement(import_react14.Fragment);
+      return action.render || import_react16.default.createElement(import_react15.Fragment);
     },
     [action]
   );
-  const wrappedRender = (0, import_react14.useCallback)(
+  const wrappedRender = (0, import_react15.useCallback)(
     (props) => {
       const isAuthenticated = Object.values(authStates_c || {}).some(
         (state) => state.status === "authenticated"
       );
       if (!isAuthenticated) {
         pendingActionRef.current = props;
-        return (authConfig_c == null ? void 0 : authConfig_c.SignInComponent) ? import_react15.default.createElement(authConfig_c.SignInComponent, {
+        return (authConfig_c == null ? void 0 : authConfig_c.SignInComponent) ? import_react16.default.createElement(authConfig_c.SignInComponent, {
           onSignInComplete: (authState) => {
             setAuthStates_c == null ? void 0 : setAuthStates_c((prev) => __spreadProps(__spreadValues({}, prev), { [action.name]: authState }));
             if (pendingActionRef.current) {
@@ -1861,7 +2239,7 @@ function useCopilotAuthenticatedAction_c(action, dependencies) {
               pendingActionRef.current = null;
             }
           }
-        }) : import_react15.default.createElement(import_react14.Fragment);
+        }) : import_react16.default.createElement(import_react15.Fragment);
       }
       return executeAction2(props);
     },
@@ -1876,29 +2254,29 @@ function useCopilotAuthenticatedAction_c(action, dependencies) {
 }
 
 // src/hooks/use-langgraph-interrupt.ts
-var import_react16 = require("react");
-var import_shared9 = require("@copilotkit/shared");
+var import_react17 = require("react");
+var import_shared11 = require("@copilotkit/shared");
 function useLangGraphInterrupt(action, dependencies) {
   var _a;
-  const { setLangGraphInterruptAction, removeLangGraphInterruptAction, langGraphInterruptAction } = (0, import_react16.useContext)(CopilotContext);
+  const { setLangGraphInterruptAction, removeLangGraphInterruptAction, langGraphInterruptAction } = (0, import_react17.useContext)(CopilotContext);
   const { runChatCompletion } = useCopilotChat();
   const { addToast } = useToast();
-  const actionId = (0, import_shared9.dataToUUID)(JSON.stringify(action), "lgAction");
-  const hasAction = (0, import_react16.useMemo)(
+  const actionId = (0, import_shared11.dataToUUID)(JSON.stringify(action), "lgAction");
+  const hasAction = (0, import_react17.useMemo)(
     () => Boolean(langGraphInterruptAction == null ? void 0 : langGraphInterruptAction.id),
     [langGraphInterruptAction]
   );
-  const isCurrentAction = (0, import_react16.useMemo)(
+  const isCurrentAction = (0, import_react17.useMemo)(
     () => (langGraphInterruptAction == null ? void 0 : langGraphInterruptAction.id) && (langGraphInterruptAction == null ? void 0 : langGraphInterruptAction.id) === actionId,
     [langGraphInterruptAction]
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     var _a2;
     if (hasAction && isCurrentAction && ((_a2 = langGraphInterruptAction == null ? void 0 : langGraphInterruptAction.event) == null ? void 0 : _a2.response)) {
       runChatCompletion();
     }
   }, [(_a = langGraphInterruptAction == null ? void 0 : langGraphInterruptAction.event) == null ? void 0 : _a.response, runChatCompletion, hasAction, isCurrentAction]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!action)
       return;
     if (hasAction && !isCurrentAction && !action.enabled) {
@@ -1922,45 +2300,6 @@ function useLangGraphInterrupt(action, dependencies) {
   ]);
 }
 
-// src/hooks/use-langgraph-interrupt-render.ts
-var import_react17 = __toESM(require("react"));
-var InterruptRenderer = ({ event, result, render, resolve }) => {
-  return render({ event, result, resolve });
-};
-function useLangGraphInterruptRender() {
-  const { langGraphInterruptAction, setLangGraphInterruptAction, agentSession } = useCopilotContext();
-  const responseRef = import_react17.default.useRef();
-  const resolveInterrupt = (0, import_react17.useCallback)(
-    (response) => {
-      responseRef.current = response;
-      setTimeout(() => {
-        setLangGraphInterruptAction({ event: { response } });
-      }, 0);
-    },
-    [setLangGraphInterruptAction]
-  );
-  if (!langGraphInterruptAction || !langGraphInterruptAction.event || !langGraphInterruptAction.render)
-    return null;
-  const { render, handler, event, enabled } = langGraphInterruptAction;
-  const conditionsMet = !agentSession || !enabled ? true : enabled({ eventValue: event.value, agentMetadata: agentSession });
-  if (!conditionsMet) {
-    return null;
-  }
-  let result = null;
-  if (handler) {
-    result = handler({
-      event,
-      resolve: resolveInterrupt
-    });
-  }
-  return import_react17.default.createElement(InterruptRenderer, {
-    event,
-    result,
-    render,
-    resolve: resolveInterrupt
-  });
-}
-
 // src/hooks/use-copilot-additional-instructions.ts
 var import_react18 = require("react");
 function useCopilotAdditionalInstructions({ instructions, available = "enabled" }, dependencies) {