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

package/dist/hooks/use-langgraph-interrupt.js

@@ -82,7 +82,7 @@ __export(use_langgraph_interrupt_exports, {
   useLangGraphInterrupt: () => useLangGraphInterrupt
 });
 module.exports = __toCommonJS(use_langgraph_interrupt_exports);
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/context/copilot-context.tsx
 var import_react = __toESM(require("react"));
@@ -158,7 +158,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() {
@@ -173,11 +176,27 @@ function returnAndThrowInDebug(_value) {
 }
 
 // src/hooks/use-copilot-chat.ts
-var import_react8 = require("react");
-var import_runtime_client_gql4 = require("@copilotkit/runtime-client-gql");
+var import_react9 = require("react");
+
+// 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");
@@ -211,12 +230,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");
   }
@@ -224,7 +243,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
@@ -236,7 +255,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;
@@ -264,7 +283,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;
@@ -353,7 +372,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");
@@ -436,7 +455,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;
@@ -456,7 +475,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) {
@@ -495,7 +514,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();
@@ -526,11 +545,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 } : {});
@@ -542,7 +561,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;
@@ -936,7 +955,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);
@@ -947,7 +966,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)
@@ -1127,36 +1146,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,
@@ -1180,11 +1489,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;
@@ -1194,7 +1564,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(
@@ -1215,15 +1585,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));
     },
@@ -1232,7 +1602,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,
@@ -1259,7 +1629,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]
   );
@@ -1271,20 +1642,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]
   );
@@ -1292,7 +1663,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);
@@ -1304,20 +1675,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,
@@ -1327,12 +1701,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;
@@ -1365,28 +1745,28 @@ ${additionalInstructions}` : "");
 }
 
 // src/hooks/use-langgraph-interrupt.ts
-var import_shared6 = require("@copilotkit/shared");
+var import_shared8 = require("@copilotkit/shared");
 function useLangGraphInterrupt(action, dependencies) {
   var _a;
-  const { setLangGraphInterruptAction, removeLangGraphInterruptAction, langGraphInterruptAction } = (0, import_react9.useContext)(CopilotContext);
+  const { setLangGraphInterruptAction, removeLangGraphInterruptAction, langGraphInterruptAction } = (0, import_react10.useContext)(CopilotContext);
   const { runChatCompletion } = useCopilotChat();
   const { addToast } = useToast();
-  const actionId = (0, import_shared6.dataToUUID)(JSON.stringify(action), "lgAction");
-  const hasAction = (0, import_react9.useMemo)(
+  const actionId = (0, import_shared8.dataToUUID)(JSON.stringify(action), "lgAction");
+  const hasAction = (0, import_react10.useMemo)(
     () => Boolean(langGraphInterruptAction == null ? void 0 : langGraphInterruptAction.id),
     [langGraphInterruptAction]
   );
-  const isCurrentAction = (0, import_react9.useMemo)(
+  const isCurrentAction = (0, import_react10.useMemo)(
     () => (langGraphInterruptAction == null ? void 0 : langGraphInterruptAction.id) && (langGraphInterruptAction == null ? void 0 : langGraphInterruptAction.id) === actionId,
     [langGraphInterruptAction]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.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_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!action)
       return;
     if (hasAction && !isCurrentAction && !action.enabled) {