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

package/dist/index.js

@@ -85,8 +85,8 @@ __export(src_exports, {
   CopilotDevConsole: () => CopilotDevConsole,
   CopilotPopup: () => CopilotPopup,
   CopilotSidebar: () => CopilotSidebar,
+  ImageRenderer: () => ImageRenderer,
   Markdown: () => Markdown,
-  RenderImageMessage: () => RenderImageMessage,
   RenderSuggestion: () => Suggestion,
   RenderSuggestionsList: () => Suggestions,
   UserMessage: () => UserMessage,
@@ -97,7 +97,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/chat/Modal.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // src/components/chat/ChatContext.tsx
 var import_react = __toESM(require("react"));
@@ -1041,18 +1041,12 @@ var Header = ({}) => {
 
 // src/components/chat/Messages.tsx
 var import_react6 = require("react");
-var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
 var import_react_core4 = require("@copilotkit/react-core");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Messages = ({
-  messages,
   inProgress,
   children,
-  RenderTextMessage: RenderTextMessage2,
-  RenderActionExecutionMessage: RenderActionExecutionMessage2,
-  RenderAgentStateMessage: RenderAgentStateMessage2,
-  RenderResultMessage: RenderResultMessage2,
-  RenderImageMessage: RenderImageMessage2,
+  RenderMessage: RenderMessage2,
   AssistantMessage: AssistantMessage2,
   UserMessage: UserMessage2,
   onRegenerate,
@@ -1061,106 +1055,32 @@ var Messages = ({
   onThumbsDown,
   markdownTagRenderers
 }) => {
-  const context = useChatContext();
-  const initialMessages = (0, import_react6.useMemo)(
-    () => makeInitialMessages(context.labels.initial),
-    [context.labels.initial]
-  );
-  messages = [...initialMessages, ...messages];
-  const actionResults = {};
-  for (let i = 0; i < messages.length; i++) {
-    if (messages[i].isActionExecutionMessage()) {
-      const id = messages[i].id;
-      const resultMessage = messages.find(
-        (message) => message.isResultMessage() && message.actionExecutionId === id
-      );
-      if (resultMessage) {
-        actionResults[id] = import_runtime_client_gql.ResultMessage.decodeResult(resultMessage.result || "");
-      }
-    }
-  }
+  const { labels } = useChatContext();
+  const { visibleMessages, interrupt } = (0, import_react_core4.useCopilotChat)();
+  const initialMessages = (0, import_react6.useMemo)(() => makeInitialMessages(labels.initial), [labels.initial]);
+  const messages = [...initialMessages, ...visibleMessages];
   const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
-  const interrupt = (0, import_react_core4.useLangGraphInterruptRender)();
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "copilotKitMessages", ref: messagesContainerRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "copilotKitMessagesContainer", children: [
       messages.map((message, index) => {
         const isCurrentMessage = index === messages.length - 1;
-        if (message.isTextMessage()) {
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            RenderTextMessage2,
-            {
-              message,
-              inProgress,
-              index,
-              isCurrentMessage,
-              AssistantMessage: AssistantMessage2,
-              UserMessage: UserMessage2,
-              onRegenerate,
-              onCopy,
-              onThumbsUp,
-              onThumbsDown,
-              markdownTagRenderers
-            },
-            index
-          );
-        } else if (message.isActionExecutionMessage()) {
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            RenderActionExecutionMessage2,
-            {
-              message,
-              inProgress,
-              index,
-              isCurrentMessage,
-              actionResult: actionResults[message.id],
-              AssistantMessage: AssistantMessage2,
-              UserMessage: UserMessage2
-            },
-            index
-          );
-        } else if (message.isAgentStateMessage()) {
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            RenderAgentStateMessage2,
-            {
-              message,
-              inProgress,
-              index,
-              isCurrentMessage,
-              AssistantMessage: AssistantMessage2,
-              UserMessage: UserMessage2
-            },
-            index
-          );
-        } else if (message.isResultMessage()) {
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            RenderResultMessage2,
-            {
-              message,
-              inProgress,
-              index,
-              isCurrentMessage,
-              AssistantMessage: AssistantMessage2,
-              UserMessage: UserMessage2
-            },
-            index
-          );
-        } else if (message.isImageMessage && message.isImageMessage()) {
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            RenderImageMessage2,
-            {
-              message,
-              inProgress,
-              index,
-              isCurrentMessage,
-              AssistantMessage: AssistantMessage2,
-              UserMessage: UserMessage2,
-              onRegenerate,
-              onCopy,
-              onThumbsUp,
-              onThumbsDown
-            },
-            index
-          );
-        }
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          RenderMessage2,
+          {
+            message,
+            inProgress,
+            index,
+            isCurrentMessage,
+            AssistantMessage: AssistantMessage2,
+            UserMessage: UserMessage2,
+            onRegenerate,
+            onCopy,
+            onThumbsUp,
+            onThumbsDown,
+            markdownTagRenderers
+          },
+          index
+        );
       }),
       interrupt
     ] }),
@@ -1168,20 +1088,24 @@ var Messages = ({
   ] });
 };
 function makeInitialMessages(initial) {
-  let initialArray = [];
-  if (initial) {
-    if (Array.isArray(initial)) {
-      initialArray.push(...initial);
-    } else {
-      initialArray.push(initial);
-    }
+  if (!initial)
+    return [];
+  if (Array.isArray(initial)) {
+    return initial.map((message) => {
+      return {
+        id: message,
+        role: "assistant",
+        content: message
+      };
+    });
   }
-  return initialArray.map(
-    (message) => new import_runtime_client_gql.TextMessage({
-      role: import_runtime_client_gql.Role.Assistant,
-      content: message
-    })
-  );
+  return [
+    {
+      id: initial,
+      role: "system",
+      content: initial
+    }
+  ];
 }
 function useScrollToBottom(messages) {
   const messagesEndRef = (0, import_react6.useRef)(null);
@@ -1237,7 +1161,7 @@ function useScrollToBottom(messages) {
   (0, import_react6.useEffect)(() => {
     isUserScrollUpRef.current = false;
     scrollToBottom();
-  }, [messages.filter((m) => m.isTextMessage() && m.role === import_runtime_client_gql.Role.User).length]);
+  }, [messages.filter((m) => m.role === "user").length]);
   return { messagesEndRef, messagesContainerRef };
 }
 
@@ -1306,6 +1230,7 @@ var Textarea_default = AutoResizingTextarea;
 
 // src/hooks/use-push-to-talk.tsx
 var import_react_core5 = require("@copilotkit/react-core");
+var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
 var import_react8 = require("react");
 var startRecording = (mediaStreamRef, mediaRecorderRef, audioContextRef, recordedChunks, onStop) => __async(void 0, null, function* () {
   if (!mediaStreamRef.current || !audioContextRef.current) {
@@ -1397,9 +1322,8 @@ var usePushToTalk = ({
       const lastMessageIndex = context.messages.findIndex(
         (message) => message.id === startReadingFromMessageId
       );
-      const messagesAfterLast = context.messages.slice(lastMessageIndex + 1).filter(
-        (message) => message.isTextMessage() && message.role === "assistant"
-      );
+      const aguiMessages = (0, import_runtime_client_gql.gqlToAGUI)(context.messages);
+      const messagesAfterLast = aguiMessages.slice(lastMessageIndex + 1).filter((message) => message.role === "assistant");
       const text = messagesAfterLast.map((message) => message.content).join("\n");
       playAudioResponse(text, context.copilotApiConfig.textToSpeechUrl, audioContextRef.current);
       setStartReadingFromMessageId(null);
@@ -1544,7 +1468,13 @@ var Input = ({
 // src/components/chat/messages/UserMessage.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var UserMessage = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: props.subComponent || props.message });
+  const { message, ImageRenderer: ImageRenderer2 } = props;
+  const isImageMessage = message && "image" in message && message.image;
+  if (isImageMessage) {
+    const imageMessage = message;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ImageRenderer2, { image: imageMessage.image, content: imageMessage.content }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: message == null ? void 0 : message.content });
 };
 
 // src/components/chat/Markdown.tsx
@@ -1978,8 +1908,19 @@ var defaultComponents = {
       children[0] = (children == null ? void 0 : children[0]).replace("`\u258D`", "\u258D");
     }
     const match = /language-(\w+)/.exec(className || "");
-    if (inline) {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("code", __spreadProps(__spreadValues({ className }, props), { children }));
+    const hasLanguage = match && match[1];
+    const content = String(children);
+    const hasNewlines = content.includes("\n");
+    const isInline = !hasLanguage && !hasNewlines;
+    if (isInline) {
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "code",
+        __spreadProps(__spreadValues({
+          className: `copilotKitMarkdownElement copilotKitInlineCode ${className || ""}`
+        }, props), {
+          children
+        })
+      );
     }
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       CodeBlock,
@@ -2055,55 +1996,51 @@ var Markdown = ({ content, components }) => {
 var import_react12 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var AssistantMessage = (props) => {
+  var _a;
   const { icons, labels } = useChatContext();
   const {
     message,
     isLoading,
-    subComponent,
     onRegenerate,
     onCopy,
     onThumbsUp,
     onThumbsDown,
     isCurrentMessage,
-    rawData,
     markdownTagRenderers
   } = props;
   const [copied, setCopied] = (0, import_react12.useState)(false);
   const handleCopy = () => {
-    if (message && onCopy) {
-      navigator.clipboard.writeText(message);
+    const content2 = (message == null ? void 0 : message.content) || "";
+    if (content2 && onCopy) {
+      navigator.clipboard.writeText(content2);
       setCopied(true);
-      onCopy(message);
+      onCopy(content2);
       setTimeout(() => setCopied(false), 2e3);
-    } else if (message) {
-      navigator.clipboard.writeText(message);
+    } else if (content2) {
+      navigator.clipboard.writeText(content2);
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
     }
   };
   const handleRegenerate = () => {
-    if (onRegenerate) {
+    if (onRegenerate)
       onRegenerate();
-    }
   };
   const handleThumbsUp = () => {
-    const fullMessage = rawData;
-    if (onThumbsUp && fullMessage) {
-      onThumbsUp(fullMessage);
-    }
+    if (onThumbsUp && message)
+      onThumbsUp(message);
   };
   const handleThumbsDown = () => {
-    const fullMessage = rawData;
-    if (onThumbsDown && fullMessage) {
-      onThumbsDown(fullMessage);
-    }
+    if (onThumbsDown && message)
+      onThumbsDown(message);
   };
   const LoadingIcon = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: icons.activityIcon });
+  const content = (message == null ? void 0 : message.content) || "";
+  const subComponent = (_a = message == null ? void 0 : message.generativeUI) == null ? void 0 : _a.call(message);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    (message || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
-      message && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Markdown, { content: message || "", components: markdownTagRenderers }),
-      isLoading && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoadingIcon, {}),
-      message && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    content && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
+      content && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Markdown, { content, components: markdownTagRenderers }),
+      content && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         "div",
         {
           className: `copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`,
@@ -2152,19 +2089,52 @@ var AssistantMessage = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent }),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoadingIcon, {})
   ] });
 };
 
-// src/components/chat/messages/RenderTextMessage.tsx
+// src/components/chat/messages/ImageRenderer.tsx
+var import_react13 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function RenderTextMessage(_a) {
+var ImageRenderer = ({ image, content, className = "" }) => {
+  const [imageError, setImageError] = (0, import_react13.useState)(false);
+  const imageSrc = `data:image/${image.format};base64,${image.bytes}`;
+  const altText = content || "User uploaded image";
+  const handleImageError = () => {
+    setImageError(true);
+  };
+  if (imageError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `copilotKitImageRendering copilotKitImageRenderingError ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "copilotKitImageRenderingErrorMessage", children: "Failed to load image" }),
+      content && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "copilotKitImageRenderingContent", children: content })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `copilotKitImageRendering ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "img",
+      {
+        src: imageSrc,
+        alt: altText,
+        className: "copilotKitImageRenderingImage",
+        onError: handleImageError
+      }
+    ),
+    content && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "copilotKitImageRenderingContent", children: content })
+  ] });
+};
+
+// src/components/chat/messages/RenderMessage.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function RenderMessage(_a) {
   var _b = _a, {
     UserMessage: UserMessage2 = UserMessage,
-    AssistantMessage: AssistantMessage2 = AssistantMessage
+    AssistantMessage: AssistantMessage2 = AssistantMessage,
+    ImageRenderer: ImageRenderer2 = ImageRenderer
   } = _b, props = __objRest(_b, [
     "UserMessage",
-    "AssistantMessage"
+    "AssistantMessage",
+    "ImageRenderer"
   ]);
   const {
     message,
@@ -2177,24 +2147,23 @@ function RenderTextMessage(_a) {
     onThumbsDown,
     markdownTagRenderers
   } = props;
-  if (message.isTextMessage()) {
-    if (message.role === "user") {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  switch (message.role) {
+    case "user":
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         UserMessage2,
         {
           "data-message-role": "user",
-          message: message.content,
-          rawData: message
+          message,
+          ImageRenderer: ImageRenderer2
         },
         index
       );
-    } else if (message.role == "assistant") {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    case "assistant":
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         AssistantMessage2,
         {
           "data-message-role": "assistant",
-          message: message.content,
-          rawData: message,
+          message,
           isLoading: inProgress && isCurrentMessage && !message.content,
           isGenerating: inProgress && isCurrentMessage && !!message.content,
           isCurrentMessage,
@@ -2202,421 +2171,22 @@ function RenderTextMessage(_a) {
           onCopy,
           onThumbsUp,
           onThumbsDown,
-          markdownTagRenderers
-        },
-        index
-      );
-    }
-  }
-}
-
-// src/components/chat/messages/RenderActionExecutionMessage.tsx
-var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
-var import_react_core7 = require("@copilotkit/react-core");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-function RenderActionExecutionMessage(_a) {
-  var _b = _a, {
-    AssistantMessage: AssistantMessage2 = AssistantMessage
-  } = _b, props = __objRest(_b, [
-    "AssistantMessage"
-  ]);
-  const { chatComponentsCache } = (0, import_react_core7.useCopilotContext)();
-  const { message, inProgress, index, isCurrentMessage, actionResult } = props;
-  if (message.isActionExecutionMessage()) {
-    if (chatComponentsCache.current !== null && (chatComponentsCache.current.actions[message.name] || chatComponentsCache.current.actions["*"])) {
-      const render = chatComponentsCache.current.actions[message.name] || chatComponentsCache.current.actions["*"];
-      if (typeof render === "string") {
-        if (isCurrentMessage && inProgress) {
-          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            AssistantMessage2,
-            {
-              rawData: message,
-              "data-message-role": "assistant",
-              isLoading: false,
-              isGenerating: true,
-              message: render
-            },
-            index
-          );
-        } else {
-          return null;
-        }
-      } else {
-        const args = message.arguments;
-        let status = "inProgress";
-        if (actionResult !== void 0) {
-          status = "complete";
-        } else if (message.status.code !== import_runtime_client_gql2.MessageStatusCode.Pending) {
-          status = "executing";
-        }
-        try {
-          const toRender = render({
-            status,
-            // Cast to any as RenderFunctionStatus is a union that can be complex to narrow here
-            args,
-            result: actionResult,
-            name: message.name,
-            messageId: message.id
-            // Pass messageId for HITL action correlation
-          });
-          if (!toRender && status === "complete") {
-            return null;
-          }
-          if (typeof toRender === "string") {
-            return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              AssistantMessage2,
-              {
-                rawData: message,
-                "data-message-role": "assistant",
-                isLoading: false,
-                isGenerating: false,
-                message: toRender
-              },
-              index
-            );
-          } else {
-            return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              AssistantMessage2,
-              {
-                rawData: message,
-                "data-message-role": "action-render",
-                isLoading: false,
-                isGenerating: false,
-                subComponent: toRender
-              },
-              index
-            );
-          }
-        } catch (e) {
-          console.error(`Error executing render function for action ${message.name}: ${e}`);
-          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            AssistantMessage2,
-            {
-              rawData: message,
-              "data-message-role": "assistant",
-              isLoading: false,
-              isGenerating: false,
-              subComponent: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("b", { children: [
-                  "\u274C Error executing render function for action ",
-                  message.name,
-                  ":"
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("pre", { children: e instanceof Error ? e.message : String(e) })
-              ] })
-            },
-            index
-          );
-        }
-      }
-    } else if (!inProgress || !isCurrentMessage) {
-      return null;
-    } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        AssistantMessage2,
-        {
-          rawData: message,
-          "data-message-role": "assistant",
-          isLoading: true,
-          isGenerating: true
-        },
-        index
-      );
-    }
-  }
-}
-
-// src/components/chat/messages/RenderResultMessage.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-function RenderResultMessage(_a) {
-  var _b = _a, {
-    AssistantMessage: AssistantMessage2 = AssistantMessage
-  } = _b, props = __objRest(_b, [
-    "AssistantMessage"
-  ]);
-  const { message, inProgress, index, isCurrentMessage } = props;
-  if (message.isResultMessage() && inProgress && isCurrentMessage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      AssistantMessage2,
-      {
-        "data-message-role": "assistant",
-        rawData: message,
-        isLoading: true,
-        isGenerating: true
-      },
-      index
-    );
-  } else {
-    return null;
-  }
-}
-
-// src/components/chat/messages/RenderAgentStateMessage.tsx
-var import_react_core8 = require("@copilotkit/react-core");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-function RenderAgentStateMessage(_a) {
-  var _b = _a, {
-    AssistantMessage: AssistantMessage2 = AssistantMessage
-  } = _b, props = __objRest(_b, [
-    "AssistantMessage"
-  ]);
-  const { chatComponentsCache } = (0, import_react_core8.useCopilotContext)();
-  const { message, inProgress, index, isCurrentMessage } = props;
-  if (message.isAgentStateMessage()) {
-    let render;
-    if (chatComponentsCache.current !== null) {
-      render = chatComponentsCache.current.coAgentStateRenders[`${message.agentName}-${message.nodeName}`] || chatComponentsCache.current.coAgentStateRenders[`${message.agentName}-global`];
-    }
-    if (render) {
-      if (typeof render === "string") {
-        if (isCurrentMessage && inProgress) {
-          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            AssistantMessage2,
-            {
-              rawData: message,
-              message: render,
-              "data-message-role": "assistant",
-              isLoading: true,
-              isGenerating: true
-            },
-            index
-          );
-        } else {
-          return null;
-        }
-      } else {
-        const state = message.state;
-        let status = message.active ? "inProgress" : "complete";
-        const toRender = render({
-          status,
-          state,
-          nodeName: message.nodeName
-        });
-        if (!toRender && status === "complete") {
-          return null;
-        }
-        if (!toRender && isCurrentMessage && inProgress) {
-          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            AssistantMessage2,
-            {
-              "data-message-role": "assistant",
-              rawData: message,
-              isLoading: true,
-              isGenerating: true
-            },
-            index
-          );
-        } else if (!toRender) {
-          return null;
-        }
-        if (typeof toRender === "string") {
-          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            AssistantMessage2,
-            {
-              rawData: message,
-              message: toRender,
-              isLoading: true,
-              isGenerating: true,
-              "data-message-role": "assistant"
-            },
-            index
-          );
-        } else {
-          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            AssistantMessage2,
-            {
-              rawData: message,
-              "data-message-role": "agent-state-render",
-              isLoading: false,
-              isGenerating: false,
-              subComponent: toRender
-            },
-            index
-          );
-        }
-      }
-    } else if (!inProgress || !isCurrentMessage) {
-      return null;
-    } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        AssistantMessage2,
-        {
-          rawData: message,
-          isLoading: true,
-          isGenerating: true,
-          "data-message-role": "assistant"
+          markdownTagRenderers,
+          ImageRenderer: ImageRenderer2
         },
         index
       );
-    }
   }
 }
 
-// src/components/chat/messages/RenderImageMessage.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-function RenderImageMessage(_a) {
-  var _b = _a, {
-    UserMessage: UserMessage2 = UserMessage,
-    AssistantMessage: AssistantMessage2 = AssistantMessage
-  } = _b, props = __objRest(_b, [
-    "UserMessage",
-    "AssistantMessage"
-  ]);
-  const {
-    message,
-    inProgress,
-    index,
-    isCurrentMessage,
-    onRegenerate,
-    onCopy,
-    onThumbsUp,
-    onThumbsDown
-  } = props;
-  if (message.isImageMessage()) {
-    const imageData = `data:${message.format};base64,${message.bytes}`;
-    const imageComponent = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "copilotKitImage", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      "img",
-      {
-        src: imageData,
-        alt: "User uploaded image",
-        style: { maxWidth: "100%", maxHeight: "300px", borderRadius: "8px" }
-      }
-    ) });
-    if (message.role === "user") {
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        UserMessage2,
-        {
-          "data-message-role": "user",
-          message: "",
-          rawData: message,
-          subComponent: imageComponent
-        },
-        index
-      );
-    } else if (message.role === "assistant") {
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        AssistantMessage2,
-        {
-          "data-message-role": "assistant",
-          message: "",
-          rawData: message,
-          subComponent: imageComponent,
-          isLoading: inProgress && isCurrentMessage && !message.bytes,
-          isGenerating: inProgress && isCurrentMessage && !!message.bytes,
-          isCurrentMessage,
-          onRegenerate: () => onRegenerate == null ? void 0 : onRegenerate(message.id),
-          onCopy,
-          onThumbsUp,
-          onThumbsDown
-        },
-        index
-      );
-    }
-  }
-  return null;
-}
-
 // src/components/chat/Chat.tsx
-var import_react13 = __toESM(require("react"));
-var import_react_core10 = require("@copilotkit/react-core");
-
-// src/components/chat/Suggestion.tsx
-var import_react_core9 = require("@copilotkit/react-core");
+var import_react14 = __toESM(require("react"));
+var import_react_core8 = require("@copilotkit/react-core");
 var import_shared3 = require("@copilotkit/shared");
-var import_runtime_client_gql3 = require("@copilotkit/runtime-client-gql");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-function Suggestion({ title, onClick, partial, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    "button",
-    {
-      disabled: partial,
-      onClick: (e) => {
-        e.preventDefault();
-        onClick();
-      },
-      className: className || (partial ? "suggestion loading" : "suggestion"),
-      "data-test-id": "suggestion",
-      children: partial ? SmallSpinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: title })
-    }
-  );
-}
-var reloadSuggestions = (context, chatSuggestionConfiguration, setCurrentSuggestions, abortControllerRef) => __async(void 0, null, function* () {
-  const abortController = abortControllerRef.current;
-  const tools = JSON.stringify(
-    Object.values(context.actions).map((action) => ({
-      name: action.name,
-      description: action.description,
-      jsonSchema: JSON.stringify((0, import_shared3.actionParametersToJsonSchema)(action.parameters))
-    }))
-  );
-  const allSuggestions = [];
-  for (const config of Object.values(chatSuggestionConfiguration)) {
-    try {
-      const numOfSuggestionsInstructions = config.minSuggestions === 0 ? `Produce up to ${config.maxSuggestions} suggestions. If there are no highly relevant suggestions you can think of, provide an empty array.` : `Produce between ${config.minSuggestions} and ${config.maxSuggestions} suggestions.`;
-      const result = yield (0, import_react_core9.extract)({
-        context,
-        instructions: "Suggest what the user could say next. Provide clear, highly relevant suggestions. Do not literally suggest function calls. ",
-        data: config.instructions + "\n\n" + numOfSuggestionsInstructions + "\n\nAvailable tools: " + tools + "\n\n",
-        requestType: import_runtime_client_gql3.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 }) => {
-          const suggestions = args.suggestions || [];
-          const newSuggestions = [];
-          for (let i = 0; i < suggestions.length; i++) {
-            if (config.maxSuggestions !== void 0 && i >= config.maxSuggestions) {
-              break;
-            }
-            const { title, message } = suggestions[i];
-            const partial = i == suggestions.length - 1 && status !== "complete";
-            newSuggestions.push({
-              title,
-              message,
-              partial,
-              className: config.className
-            });
-          }
-          setCurrentSuggestions([...allSuggestions, ...newSuggestions]);
-        }
-      });
-      allSuggestions.push(...result.suggestions);
-    } catch (error) {
-      console.error("Error loading suggestions", error);
-    }
-  }
-  if (abortControllerRef.current === abortController) {
-    abortControllerRef.current = null;
-  }
-});
-
-// src/components/chat/Chat.tsx
-var import_runtime_client_gql4 = require("@copilotkit/runtime-client-gql");
-var import_shared4 = require("@copilotkit/shared");
-var import_react_core11 = require("@copilotkit/react-core");
+var import_react_core9 = require("@copilotkit/react-core");
 
 // src/components/chat/ImageUploadQueue.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var ImageUploadQueue = ({
   images,
   onRemoveImage,
@@ -2624,7 +2194,7 @@ var ImageUploadQueue = ({
 }) => {
   if (images.length === 0)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       className: `copilotKitImageUploadQueue ${className}`,
@@ -2635,7 +2205,7 @@ var ImageUploadQueue = ({
         margin: "8px",
         padding: "8px"
       },
-      children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "div",
         {
           className: "copilotKitImageUploadQueueItem",
@@ -2648,7 +2218,7 @@ var ImageUploadQueue = ({
             overflow: "hidden"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "img",
               {
                 src: `data:${image.contentType};base64,${image.bytes}`,
@@ -2660,7 +2230,7 @@ var ImageUploadQueue = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "button",
               {
                 onClick: () => onRemoveImage(index),
@@ -2693,10 +2263,32 @@ var ImageUploadQueue = ({
   );
 };
 
+// src/components/chat/Suggestion.tsx
+var import_react_core7 = require("@copilotkit/react-core");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function Suggestion({ title, onClick, partial, className }) {
+  if (!title)
+    return null;
+  const { isLoading } = (0, import_react_core7.useCopilotChat)();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "button",
+    {
+      disabled: partial || isLoading,
+      onClick: (e) => {
+        e.preventDefault();
+        onClick();
+      },
+      className: className || (partial ? "suggestion loading" : "suggestion"),
+      "data-test-id": "suggestion",
+      children: partial ? SmallSpinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: title })
+    }
+  );
+}
+
 // src/components/chat/Suggestions.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function Suggestions({ suggestions, onSuggestionClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "suggestions", children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "suggestions", children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Suggestion,
     {
       title: suggestion.title,
@@ -2710,9 +2302,10 @@ function Suggestions({ suggestions, onSuggestionClick }) {
 }
 
 // src/components/chat/Chat.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function CopilotChat({
   instructions,
+  suggestions = "auto",
   onSubmitMessage,
   makeSystemMessage,
   onInProgress,
@@ -2724,11 +2317,7 @@ function CopilotChat({
   onThumbsDown,
   markdownTagRenderers,
   Messages: Messages2 = Messages,
-  RenderTextMessage: RenderTextMessage2 = RenderTextMessage,
-  RenderActionExecutionMessage: RenderActionExecutionMessage2 = RenderActionExecutionMessage,
-  RenderAgentStateMessage: RenderAgentStateMessage2 = RenderAgentStateMessage,
-  RenderResultMessage: RenderResultMessage2 = RenderResultMessage,
-  RenderImageMessage: RenderImageMessage2 = RenderImageMessage,
+  RenderMessage: RenderMessage2 = RenderMessage,
   RenderSuggestionsList = Suggestions,
   Input: Input2 = Input,
   className,
@@ -2736,14 +2325,15 @@ function CopilotChat({
   labels,
   AssistantMessage: AssistantMessage2 = AssistantMessage,
   UserMessage: UserMessage2 = UserMessage,
+  ImageRenderer: ImageRenderer2 = ImageRenderer,
   imageUploadsEnabled,
   inputFileAccept = "image/*",
   hideStopButton
 }) {
-  const { additionalInstructions, setChatInstructions } = (0, import_react_core10.useCopilotContext)();
-  const [selectedImages, setSelectedImages] = (0, import_react13.useState)([]);
-  const fileInputRef = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
+  const { additionalInstructions, setChatInstructions } = (0, import_react_core8.useCopilotContext)();
+  const [selectedImages, setSelectedImages] = (0, import_react14.useState)([]);
+  const fileInputRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useEffect)(() => {
     if (!imageUploadsEnabled)
       return;
     const handlePaste = (e) => __async(this, null, function* () {
@@ -2788,7 +2378,7 @@ function CopilotChat({
     document.addEventListener("paste", handlePaste);
     return () => document.removeEventListener("paste", handlePaste);
   }, [imageUploadsEnabled]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!(additionalInstructions == null ? void 0 : additionalInstructions.length)) {
       setChatInstructions(instructions || "");
       return;
@@ -2798,17 +2388,17 @@ function CopilotChat({
       "Additionally, follow these instructions:",
       ...additionalInstructions.map((instruction) => `- ${instruction}`)
     ];
-    console.log("combinedAdditionalInstructions", combinedAdditionalInstructions);
     setChatInstructions(combinedAdditionalInstructions.join("\n") || "");
   }, [instructions, additionalInstructions]);
   const {
     visibleMessages,
     isLoading,
-    currentSuggestions,
     sendMessage,
     stopGeneration,
-    reloadMessages
+    reloadMessages,
+    suggestions: currentSuggestions
   } = useCopilotChatLogic(
+    suggestions,
     makeSystemMessage,
     onInProgress,
     onSubmitMessage,
@@ -2823,7 +2413,7 @@ function CopilotChat({
     }
     return sendMessage(text, images);
   };
-  const chatContext = import_react13.default.useContext(ChatContext);
+  const chatContext = import_react14.default.useContext(ChatContext);
   const isVisible = chatContext ? chatContext.open : true;
   const handleRegenerate = (messageId) => {
     if (onRegenerate) {
@@ -2870,17 +2460,13 @@ function CopilotChat({
   const removeSelectedImage = (index) => {
     setSelectedImages((prev) => prev.filter((_, i) => i !== index));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Messages2,
       {
         AssistantMessage: AssistantMessage2,
         UserMessage: UserMessage2,
-        RenderTextMessage: RenderTextMessage2,
-        RenderActionExecutionMessage: RenderActionExecutionMessage2,
-        RenderAgentStateMessage: RenderAgentStateMessage2,
-        RenderResultMessage: RenderResultMessage2,
-        RenderImageMessage: RenderImageMessage2,
+        RenderMessage: RenderMessage2,
         messages: visibleMessages,
         inProgress: isLoading,
         onRegenerate: handleRegenerate,
@@ -2888,7 +2474,8 @@ function CopilotChat({
         onThumbsUp,
         onThumbsDown,
         markdownTagRenderers,
-        children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        ImageRenderer: ImageRenderer2,
+        children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           RenderSuggestionsList,
           {
             onSuggestionClick: handleSendMessage,
@@ -2897,9 +2484,9 @@ function CopilotChat({
         )
       }
     ),
-    imageUploadsEnabled && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ImageUploadQueue, { images: selectedImages, onRemoveImage: removeSelectedImage }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    imageUploadsEnabled && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ImageUploadQueue, { images: selectedImages, onRemoveImage: removeSelectedImage }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "input",
         {
           type: "file",
@@ -2911,7 +2498,7 @@ function CopilotChat({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Input2,
       {
         inProgress: isLoading,
@@ -2933,75 +2520,118 @@ function WrappedCopilotChat({
   labels,
   className
 }) {
-  const chatContext = import_react13.default.useContext(ChatContext);
+  const chatContext = import_react14.default.useContext(ChatContext);
   if (!chatContext) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `copilotKitChat ${className != null ? className : ""}`, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: `copilotKitChat ${className != null ? className : ""}`, children }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children });
 }
-var SUGGESTIONS_DEBOUNCE_TIMEOUT = 1e3;
-var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onStopGeneration, onReloadMessages) => {
+var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onSubmitMessage, onStopGeneration, onReloadMessages) => {
   var _a;
   const {
     visibleMessages,
     appendMessage,
+    setMessages,
     reloadMessages: defaultReloadMessages,
     stopGeneration: defaultStopGeneration,
     runChatCompletion,
-    isLoading
-  } = (0, import_react_core10.useCopilotChat)({
-    id: (0, import_shared4.randomId)(),
+    isLoading,
+    suggestions,
+    setSuggestions,
+    generateSuggestions,
+    resetSuggestions: resetSuggestionsFromHook,
+    isLoadingSuggestions
+  } = (0, import_react_core8.useCopilotChat)({
     makeSystemMessage
   });
-  const [currentSuggestions, setCurrentSuggestions] = (0, import_react13.useState)([]);
-  const suggestionsAbortControllerRef = (0, import_react13.useRef)(null);
-  const debounceTimerRef = (0, import_react13.useRef)();
-  const abortSuggestions = () => {
-    var _a2;
-    (_a2 = suggestionsAbortControllerRef.current) == null ? void 0 : _a2.abort();
-    suggestionsAbortControllerRef.current = null;
-  };
-  const generalContext = (0, import_react_core10.useCopilotContext)();
-  const messagesContext = (0, import_react_core10.useCopilotMessagesContext)();
-  const context = __spreadValues(__spreadValues({}, generalContext), messagesContext);
-  (0, import_react13.useEffect)(() => {
-    onInProgress == null ? void 0 : onInProgress(isLoading);
-    abortSuggestions();
-    debounceTimerRef.current = setTimeout(
-      () => {
-        if (!isLoading && Object.keys(context.chatSuggestionConfiguration).length !== 0) {
-          suggestionsAbortControllerRef.current = new AbortController();
-          reloadSuggestions(
-            context,
-            context.chatSuggestionConfiguration,
-            setCurrentSuggestions,
-            suggestionsAbortControllerRef
-          );
-        }
-      },
-      currentSuggestions.length == 0 ? 0 : SUGGESTIONS_DEBOUNCE_TIMEOUT
-    );
-    return () => {
-      clearTimeout(debounceTimerRef.current);
-    };
+  const generalContext = (0, import_react_core8.useCopilotContext)();
+  const messagesContext = (0, import_react_core8.useCopilotMessagesContext)();
+  const { actions } = generalContext;
+  const [suggestionsFailed, setSuggestionsFailed] = (0, import_react14.useState)(false);
+  const hasGeneratedInitialSuggestions = (0, import_react14.useRef)(false);
+  (0, import_react14.useEffect)(() => {
+    if (Array.isArray(chatSuggestions)) {
+      setSuggestions(chatSuggestions);
+      hasGeneratedInitialSuggestions.current = true;
+    }
+  }, [JSON.stringify(chatSuggestions), setSuggestions]);
+  const generateSuggestionsWithErrorHandling = (0, import_react14.useCallback)(
+    (context) => __async(void 0, null, function* () {
+      try {
+        yield generateSuggestions();
+      } catch (error) {
+        console.error("Failed to generate suggestions:", error);
+        setSuggestionsFailed(true);
+      }
+    }),
+    [generateSuggestions]
+  );
+  (0, import_react14.useEffect)(() => {
+    if (chatSuggestions !== "auto" || isLoadingSuggestions || suggestionsFailed) {
+      return;
+    }
+    if (isLoading) {
+      return;
+    }
+    if (Object.keys(generalContext.chatSuggestionConfiguration).length === 0) {
+      return;
+    }
+    if (visibleMessages.length === 0 && !hasGeneratedInitialSuggestions.current) {
+      hasGeneratedInitialSuggestions.current = true;
+      generateSuggestionsWithErrorHandling("initial");
+      return;
+    }
+    if (visibleMessages.length > 0 && suggestions.length === 0) {
+      generateSuggestionsWithErrorHandling("post-message");
+      return;
+    }
   }, [
+    chatSuggestions,
+    isLoadingSuggestions,
+    suggestionsFailed,
+    visibleMessages.length,
     isLoading,
-    context.chatSuggestionConfiguration,
-    // hackish way to trigger suggestions reload on reset, but better than moving suggestions to the
-    // global context
-    visibleMessages.length == 0
+    suggestions.length,
+    Object.keys(generalContext.chatSuggestionConfiguration).join(","),
+    // Use stable string instead of object reference
+    generateSuggestionsWithErrorHandling
   ]);
+  (0, import_react14.useEffect)(() => {
+    if (chatSuggestions !== "auto") {
+      hasGeneratedInitialSuggestions.current = false;
+      setSuggestionsFailed(false);
+    }
+  }, [chatSuggestions]);
+  const stableContext = (0, import_react14.useMemo)(
+    () => __spreadValues(__spreadValues({}, generalContext), messagesContext),
+    [
+      // Only include stable dependencies
+      generalContext.actions,
+      messagesContext.messages.length,
+      generalContext.isLoading
+    ]
+  );
+  const resetSuggestions = (0, import_react14.useCallback)(() => {
+    resetSuggestionsFromHook();
+    setSuggestionsFailed(false);
+    hasGeneratedInitialSuggestions.current = false;
+  }, [resetSuggestionsFromHook]);
+  (0, import_react14.useEffect)(() => {
+    onInProgress == null ? void 0 : onInProgress(isLoading);
+  }, [onInProgress, isLoading]);
   const sendMessage = (messageContent, imagesToUse) => __async(void 0, null, function* () {
     const images = imagesToUse || [];
-    abortSuggestions();
-    setCurrentSuggestions([]);
+    if (chatSuggestions === "auto" || chatSuggestions === "manual") {
+      setSuggestions([]);
+    }
     let firstMessage = null;
     if (messageContent.trim().length > 0) {
-      const textMessage = new import_runtime_client_gql4.TextMessage({
-        content: messageContent,
-        role: import_runtime_client_gql4.Role.User
-      });
+      const textMessage = {
+        id: (0, import_shared3.randomId)(),
+        role: "user",
+        content: messageContent
+      };
       if (onSubmitMessage) {
         try {
           yield onSubmitMessage(messageContent);
@@ -3009,18 +2639,24 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
           console.error("Error in onSubmitMessage:", error);
         }
       }
-      yield appendMessage(textMessage, { followUp: images.length === 0 });
+      yield appendMessage(textMessage, {
+        followUp: images.length === 0,
+        clearSuggestions: chatSuggestions === "auto" || chatSuggestions === "manual"
+      });
       if (!firstMessage) {
         firstMessage = textMessage;
       }
     }
     if (images.length > 0) {
       for (let i = 0; i < images.length; i++) {
-        const imageMessage = new import_runtime_client_gql4.ImageMessage({
-          format: images[i].contentType.replace("image/", ""),
-          bytes: images[i].bytes,
-          role: import_runtime_client_gql4.Role.User
-        });
+        const imageMessage = {
+          id: (0, import_shared3.randomId)(),
+          role: "user",
+          image: {
+            format: images[i].contentType.replace("image/", ""),
+            bytes: images[i].bytes
+          }
+        };
         yield appendMessage(imageMessage, { followUp: i === images.length - 1 });
         if (!firstMessage) {
           firstMessage = imageMessage;
@@ -3028,12 +2664,11 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
       }
     }
     if (!firstMessage) {
-      return new import_runtime_client_gql4.TextMessage({ content: "", role: import_runtime_client_gql4.Role.User });
+      return { role: "user", content: "", id: (0, import_shared3.randomId)() };
     }
     return firstMessage;
   });
   const messages = visibleMessages;
-  const { setMessages } = messagesContext;
   const currentAgentName = (_a = generalContext.agentSession) == null ? void 0 : _a.agentName;
   const restartCurrentAgent = (hint) => __async(void 0, null, function* () {
     if (generalContext.agentSession) {
@@ -3054,9 +2689,9 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
   });
   const runCurrentAgent = (hint) => __async(void 0, null, function* () {
     if (generalContext.agentSession) {
-      yield (0, import_react_core11.runAgent)(
+      yield (0, import_react_core9.runAgent)(
         generalContext.agentSession.agentName,
-        context,
+        stableContext,
         appendMessage,
         runChatCompletion,
         hint
@@ -3065,7 +2700,7 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
   });
   const stopCurrentAgent = () => {
     if (generalContext.agentSession) {
-      (0, import_react_core11.stopAgent)(generalContext.agentSession.agentName, context);
+      (0, import_react_core9.stopAgent)(generalContext.agentSession.agentName, stableContext);
     }
   };
   const setCurrentAgentState = (state) => {
@@ -3080,6 +2715,7 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
     }
   };
   function stopGeneration() {
+    setSuggestions([]);
     if (onStopGeneration) {
       onStopGeneration({
         messages,
@@ -3113,17 +2749,21 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
     }
   }
   return {
+    messages,
     visibleMessages,
     isLoading,
-    currentSuggestions,
+    suggestions,
     sendMessage,
     stopGeneration,
-    reloadMessages
+    reloadMessages,
+    resetSuggestions,
+    context: stableContext,
+    actions
   };
 };
 
 // src/components/chat/Modal.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var CopilotModal = (_a) => {
   var _b = _a, {
     instructions,
@@ -3182,18 +2822,18 @@ var CopilotModal = (_a) => {
     "className",
     "children"
   ]);
-  const [openState, setOpenState] = import_react14.default.useState(defaultOpen);
+  const [openState, setOpenState] = import_react15.default.useState(defaultOpen);
   const setOpen = (open) => {
     onSetOpen == null ? void 0 : onSetOpen(open);
     setOpenState(open);
   };
-  const memoizedHeader = (0, import_react14.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Header2, {}), [Header2]);
-  const memoizedChildren = (0, import_react14.useMemo)(() => children, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen, children: [
+  const memoizedHeader = (0, import_react15.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Header2, {}), [Header2]);
+  const memoizedChildren = (0, import_react15.useMemo)(() => children, [children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen, children: [
     memoizedChildren,
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button2, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button2, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         Window2,
         {
           clickOutsideToClose,
@@ -3201,7 +2841,7 @@ var CopilotModal = (_a) => {
           hitEscapeToClose,
           children: [
             memoizedHeader,
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               CopilotChat,
               __spreadProps(__spreadValues({}, props), {
                 instructions,
@@ -3229,22 +2869,22 @@ var CopilotModal = (_a) => {
 };
 
 // src/components/chat/Popup.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function CopilotPopup(props) {
   props = __spreadProps(__spreadValues({}, props), {
     className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CopilotModal, __spreadProps(__spreadValues({}, props), { children: props.children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CopilotModal, __spreadProps(__spreadValues({}, props), { children: props.children }));
 }
 
 // src/components/chat/Sidebar.tsx
-var import_react15 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function CopilotSidebar(props) {
   props = __spreadProps(__spreadValues({}, props), {
     className: props.className ? props.className + " copilotKitSidebar" : "copilotKitSidebar"
   });
-  const [expandedClassName, setExpandedClassName] = (0, import_react15.useState)(
+  const [expandedClassName, setExpandedClassName] = (0, import_react16.useState)(
     props.defaultOpen ? "sidebarExpanded" : ""
   );
   const onSetOpen = (open) => {
@@ -3252,13 +2892,13 @@ function CopilotSidebar(props) {
     (_a = props.onSetOpen) == null ? void 0 : _a.call(props, open);
     setExpandedClassName(open ? "sidebarExpanded" : "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `copilotKitSidebarContentWrapper ${expandedClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CopilotModal, __spreadProps(__spreadValues(__spreadValues({}, props), { onSetOpen }), { children: props.children })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `copilotKitSidebarContentWrapper ${expandedClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CopilotModal, __spreadProps(__spreadValues(__spreadValues({}, props), { onSetOpen }), { children: props.children })) });
 }
 
 // src/hooks/use-copilot-chat-suggestions.tsx
-var import_react16 = require("react");
-var import_react_core12 = require("@copilotkit/react-core");
-var import_shared5 = require("@copilotkit/shared");
+var import_react17 = require("react");
+var import_react_core10 = require("@copilotkit/react-core");
+var import_shared4 = require("@copilotkit/shared");
 function useCopilotChatSuggestions({
   available = "enabled",
   instructions,
@@ -3266,11 +2906,11 @@ function useCopilotChatSuggestions({
   minSuggestions = 1,
   maxSuggestions = 3
 }, dependencies = []) {
-  const context = (0, import_react_core12.useCopilotContext)();
-  (0, import_react16.useEffect)(() => {
+  const context = (0, import_react_core10.useCopilotContext)();
+  (0, import_react17.useEffect)(() => {
     if (available === "disabled")
       return;
-    const id = (0, import_shared5.randomId)();
+    const id = (0, import_shared4.randomId)();
     context.addChatSuggestionConfiguration(id, {
       instructions,
       minSuggestions,
@@ -3289,8 +2929,8 @@ function useCopilotChatSuggestions({
   CopilotDevConsole,
   CopilotPopup,
   CopilotSidebar,
+  ImageRenderer,
   Markdown,
-  RenderImageMessage,
   RenderSuggestion,
   RenderSuggestionsList,
   UserMessage,