@copilotkit/react-ui 1.3.2 → 1.3.3

package/dist/components/chat/Chat.js

@@ -377,20 +377,365 @@ var ChatContextProvider = ({
 };
 
 // src/components/chat/Messages.tsx
-var import_react4 = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
+var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Messages = ({
+  messages,
+  inProgress,
+  children,
+  RenderTextMessage: RenderTextMessage2,
+  RenderActionExecutionMessage: RenderActionExecutionMessage2,
+  RenderAgentStateMessage: RenderAgentStateMessage2,
+  RenderResultMessage: RenderResultMessage2
+}) => {
+  const context = useChatContext();
+  const initialMessages = (0, import_react2.useMemo)(
+    () => makeInitialMessages(context.labels.initial),
+    [context.labels.initial]
+  );
+  messages = [...initialMessages, ...messages];
+  const actionResults = {};
+  for (let i = 0; i < messages.length; i++) {
+    if (messages[i] instanceof import_runtime_client_gql.ActionExecutionMessage) {
+      const id = messages[i].id;
+      const resultMessage = messages.find(
+        (message) => message instanceof import_runtime_client_gql.ResultMessage && message.actionExecutionId === id
+      );
+      if (resultMessage) {
+        actionResults[id] = import_runtime_client_gql.ResultMessage.decodeResult(resultMessage.result || "");
+      }
+    }
+  }
+  const messagesEndRef = import_react2.default.useRef(null);
+  const scrollToBottom = () => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({
+        behavior: "auto"
+      });
+    }
+  };
+  (0, import_react2.useEffect)(() => {
+    scrollToBottom();
+  }, [messages]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitMessages", children: [
+    messages.map((message, index) => {
+      const isCurrentMessage = index === messages.length - 1;
+      if (message instanceof import_runtime_client_gql.TextMessage) {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          RenderTextMessage2,
+          {
+            message,
+            inProgress,
+            index,
+            isCurrentMessage
+          },
+          index
+        );
+      } else if (message instanceof import_runtime_client_gql.ActionExecutionMessage) {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          RenderActionExecutionMessage2,
+          {
+            message,
+            inProgress,
+            index,
+            isCurrentMessage,
+            actionResult: actionResults[message.id]
+          },
+          index
+        );
+      } else if (message instanceof import_runtime_client_gql.AgentStateMessage) {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          RenderAgentStateMessage2,
+          {
+            message,
+            inProgress,
+            index,
+            isCurrentMessage
+          },
+          index
+        );
+      } else if (message instanceof import_runtime_client_gql.ResultMessage) {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          RenderResultMessage2,
+          {
+            message,
+            inProgress,
+            index,
+            isCurrentMessage
+          },
+          index
+        );
+      }
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("footer", { ref: messagesEndRef, children })
+  ] });
+};
+function makeInitialMessages(initial) {
+  let initialArray = [];
+  if (initial) {
+    if (Array.isArray(initial)) {
+      initialArray.push(...initial);
+    } else {
+      initialArray.push(initial);
+    }
+  }
+  return initialArray.map(
+    (message) => new import_runtime_client_gql.TextMessage({
+      role: import_runtime_client_gql.Role.Assistant,
+      content: message
+    })
+  );
+}
 
-// src/components/chat/Markdown.tsx
+// src/components/chat/Input.tsx
+var import_react5 = require("react");
+
+// src/components/chat/Textarea.tsx
 var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var AutoResizingTextarea = (0, import_react3.forwardRef)(
+  ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {
+    const internalTextareaRef = (0, import_react3.useRef)(null);
+    const [maxHeight, setMaxHeight] = (0, import_react3.useState)(0);
+    (0, import_react3.useImperativeHandle)(ref, () => internalTextareaRef.current);
+    (0, import_react3.useEffect)(() => {
+      const calculateMaxHeight = () => {
+        const textarea = internalTextareaRef.current;
+        if (textarea) {
+          textarea.style.height = "auto";
+          const singleRowHeight = textarea.scrollHeight;
+          setMaxHeight(singleRowHeight * maxRows);
+          if (autoFocus) {
+            textarea.focus();
+          }
+        }
+      };
+      calculateMaxHeight();
+    }, [maxRows]);
+    (0, import_react3.useEffect)(() => {
+      const textarea = internalTextareaRef.current;
+      if (textarea) {
+        textarea.style.height = "auto";
+        textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
+      }
+    }, [value, maxHeight]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "textarea",
+      {
+        ref: internalTextareaRef,
+        value,
+        onChange,
+        onKeyDown,
+        placeholder,
+        style: {
+          overflow: "auto",
+          resize: "none",
+          maxHeight: `${maxHeight}px`
+        },
+        rows: 1
+      }
+    );
+  }
+);
+var Textarea_default = AutoResizingTextarea;
+
+// src/hooks/use-push-to-talk.tsx
+var import_react_core = require("@copilotkit/react-core");
+var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
+var import_react4 = require("react");
+var startRecording = (mediaStreamRef, mediaRecorderRef, audioContextRef, recordedChunks, onStop) => __async(void 0, null, function* () {
+  if (!mediaStreamRef.current || !audioContextRef.current) {
+    mediaStreamRef.current = yield navigator.mediaDevices.getUserMedia({ audio: true });
+    audioContextRef.current = new window.AudioContext();
+    yield audioContextRef.current.resume();
+  }
+  mediaRecorderRef.current = new MediaRecorder(mediaStreamRef.current);
+  mediaRecorderRef.current.start(1e3);
+  mediaRecorderRef.current.ondataavailable = (event) => {
+    recordedChunks.push(event.data);
+  };
+  mediaRecorderRef.current.onstop = onStop;
+});
+var stopRecording = (mediaRecorderRef) => {
+  if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+    mediaRecorderRef.current.stop();
+  }
+};
+var transcribeAudio = (recordedChunks, transcribeAudioUrl) => __async(void 0, null, function* () {
+  const completeBlob = new Blob(recordedChunks, { type: "audio/mp4" });
+  const formData = new FormData();
+  formData.append("file", completeBlob, "recording.mp4");
+  const response = yield fetch(transcribeAudioUrl, {
+    method: "POST",
+    body: formData
+  });
+  if (!response.ok) {
+    throw new Error(`Error: ${response.statusText}`);
+  }
+  const transcription = yield response.json();
+  return transcription.text;
+});
+var playAudioResponse = (text, textToSpeechUrl, audioContext) => {
+  const encodedText = encodeURIComponent(text);
+  const url = `${textToSpeechUrl}?text=${encodedText}`;
+  fetch(url).then((response) => response.arrayBuffer()).then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer)).then((audioBuffer) => {
+    const source = audioContext.createBufferSource();
+    source.buffer = audioBuffer;
+    source.connect(audioContext.destination);
+    source.start(0);
+  }).catch((error) => {
+    console.error("Error with decoding audio data", error);
+  });
+};
+var usePushToTalk = ({
+  sendFunction,
+  inProgress
+}) => {
+  const [pushToTalkState, setPushToTalkState] = (0, import_react4.useState)("idle");
+  const mediaStreamRef = (0, import_react4.useRef)(null);
+  const audioContextRef = (0, import_react4.useRef)(null);
+  const mediaRecorderRef = (0, import_react4.useRef)(null);
+  const recordedChunks = (0, import_react4.useRef)([]);
+  const context = (0, import_react_core.useCopilotContext)();
+  const [startReadingFromMessageId, setStartReadingFromMessageId] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
+    if (pushToTalkState === "recording") {
+      startRecording(
+        mediaStreamRef,
+        mediaRecorderRef,
+        audioContextRef,
+        recordedChunks.current,
+        () => {
+          setPushToTalkState("transcribing");
+        }
+      );
+    } else {
+      stopRecording(mediaRecorderRef);
+      if (pushToTalkState === "transcribing") {
+        transcribeAudio(recordedChunks.current, context.copilotApiConfig.transcribeAudioUrl).then(
+          (transcription) => __async(void 0, null, function* () {
+            recordedChunks.current = [];
+            setPushToTalkState("idle");
+            const message = yield sendFunction(transcription);
+            setStartReadingFromMessageId(message.id);
+          })
+        );
+      }
+    }
+    return () => {
+      stopRecording(mediaRecorderRef);
+    };
+  }, [pushToTalkState]);
+  (0, import_react4.useEffect)(() => {
+    if (inProgress === false && startReadingFromMessageId) {
+      const lastMessageIndex = context.messages.findIndex(
+        (message) => message.id === startReadingFromMessageId
+      );
+      const messagesAfterLast = context.messages.slice(lastMessageIndex + 1).filter(
+        (message) => message instanceof import_runtime_client_gql2.TextMessage && message.role === "assistant"
+      );
+      const text = messagesAfterLast.map((message) => message.content).join("\n");
+      playAudioResponse(text, context.copilotApiConfig.textToSpeechUrl, audioContextRef.current);
+      setStartReadingFromMessageId(null);
+    }
+  }, [startReadingFromMessageId, inProgress]);
+  return { pushToTalkState, setPushToTalkState };
+};
+
+// src/components/chat/Input.tsx
+var import_react_core2 = require("@copilotkit/react-core");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Input = ({ inProgress, onSend, isVisible = false }) => {
+  const context = useChatContext();
+  const copilotContext = (0, import_react_core2.useCopilotContext)();
+  const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
+  const textareaRef = (0, import_react5.useRef)(null);
+  const handleDivClick = (event) => {
+    var _a;
+    if (event.target !== event.currentTarget)
+      return;
+    (_a = textareaRef.current) == null ? void 0 : _a.focus();
+  };
+  const [text, setText] = (0, import_react5.useState)("");
+  const send = () => {
+    var _a;
+    if (inProgress)
+      return;
+    onSend(text);
+    setText("");
+    (_a = textareaRef.current) == null ? void 0 : _a.focus();
+  };
+  (0, import_react5.useEffect)(() => {
+    var _a;
+    if (isVisible) {
+      (_a = textareaRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isVisible]);
+  const { pushToTalkState, setPushToTalkState } = usePushToTalk({
+    sendFunction: onSend,
+    inProgress
+  });
+  const sendIcon = inProgress || pushToTalkState === "transcribing" ? context.icons.activityIcon : context.icons.sendIcon;
+  const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
+  const sendDisabled = inProgress || text.length === 0 || pushToTalkState !== "idle";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Textarea_default,
+      {
+        ref: textareaRef,
+        placeholder: context.labels.placeholder,
+        autoFocus: true,
+        maxRows: 5,
+        value: text,
+        onChange: (event) => setText(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            send();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "copilotKitInputControls", children: [
+      showPushToTalk && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
+          className: pushToTalkState === "recording" ? "copilotKitPushToTalkRecording" : "",
+          children: context.icons.pushToTalkIcon
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { disabled: sendDisabled, onClick: send, children: sendIcon })
+    ] })
+  ] });
+};
+
+// src/components/chat/Response.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ResponseButton = ({ onClick, inProgress }) => {
+  const context = useChatContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { onClick, className: "copilotKitResponseButton", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: inProgress ? context.icons.stopIcon : context.icons.regenerateIcon }),
+    inProgress ? context.labels.stopGenerating : context.labels.regenerateResponse
+  ] });
+};
+
+// src/components/chat/messages/RenderTextMessage.tsx
+var import_runtime_client_gql3 = require("@copilotkit/runtime-client-gql");
+
+// src/components/chat/Markdown.tsx
+var import_react7 = require("react");
 var import_react_markdown = __toESM(require("react-markdown"));
 
 // src/components/chat/CodeBlock.tsx
-var import_react2 = require("react");
+var import_react6 = require("react");
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
 
 // src/hooks/use-copy-to-clipboard.tsx
-var React2 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 function useCopyToClipboard({ timeout = 2e3 }) {
-  const [isCopied, setIsCopied] = React2.useState(false);
+  const [isCopied, setIsCopied] = React5.useState(false);
   const copyToClipboard = (value) => {
     var _a;
     if (typeof window === "undefined" || !((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
@@ -410,7 +755,7 @@ function useCopyToClipboard({ timeout = 2e3 }) {
 }
 
 // src/components/chat/CodeBlock.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var programmingLanguages = {
   javascript: ".js",
   python: ".py",
@@ -445,7 +790,7 @@ var generateRandomString = (length, lowercase = false) => {
   }
   return lowercase ? result.toLowerCase() : result;
 };
-var CodeBlock = (0, import_react2.memo)(({ language, value }) => {
+var CodeBlock = (0, import_react6.memo)(({ language, value }) => {
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
   const downloadAsFile = () => {
     if (typeof window === "undefined") {
@@ -473,21 +818,21 @@ var CodeBlock = (0, import_react2.memo)(({ language, value }) => {
       return;
     copyToClipboard(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitCodeBlock", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DownloadIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sr-only", children: "Download" })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "copilotKitCodeBlock", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DownloadIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: "Download" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: [
-          isCopied ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CopyIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sr-only", children: "Copy code" })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: [
+          isCopied ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopyIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: "Copy code" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_react_syntax_highlighter.Prism,
       {
         language,
@@ -777,481 +1122,229 @@ var highlightStyle = {
     color: "#808080"
   },
   'pre[class*="language-"] > code[class*="language-"]': {
-    position: "relative",
-    zIndex: "1"
-  },
-  ".line-highlight.line-highlight": {
-    background: "#f7ebc6",
-    boxShadow: "inset 5px 0 0 #f7d87c",
-    zIndex: "0"
-  }
-};
-
-// src/components/chat/Markdown.tsx
-var import_remark_gfm = __toESM(require("remark-gfm"));
-var import_remark_math = __toESM(require("remark-math"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var MemoizedReactMarkdown = (0, import_react3.memo)(
-  import_react_markdown.default,
-  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
-);
-var Markdown = ({ content }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MemoizedReactMarkdown, { components, remarkPlugins: [import_remark_gfm.default, import_remark_math.default], children: content }) });
-};
-var components = {
-  p({ children }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children });
-  },
-  a(_a) {
-    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "a",
-      __spreadProps(__spreadValues({
-        style: { color: "blue", textDecoration: "underline" }
-      }, props), {
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children
-      })
-    );
-  },
-  code(_c) {
-    var _d = _c, { children, className, inline } = _d, props = __objRest(_d, ["children", "className", "inline"]);
-    if (children.length) {
-      if (children[0] == "\u258D") {
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "span",
-          {
-            style: {
-              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-              marginTop: "0.25rem"
-            },
-            children: "\u258D"
-          }
-        );
-      }
-      children[0] = children[0].replace("`\u258D`", "\u258D");
-    }
-    const match = /language-(\w+)/.exec(className || "");
-    if (inline) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", __spreadProps(__spreadValues({ className }, props), { children }));
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      CodeBlock,
-      __spreadValues({
-        language: match && match[1] || "",
-        value: String(children).replace(/\n$/, "")
-      }, props),
-      Math.random()
-    );
-  }
-};
-
-// src/components/chat/Messages.tsx
-var import_react_core = require("@copilotkit/react-core");
-var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Messages = ({ messages, inProgress, children }) => {
-  const { chatComponentsCache } = (0, import_react_core.useCopilotContext)();
-  const context = useChatContext();
-  const initialMessages = (0, import_react4.useMemo)(
-    () => makeInitialMessages(context.labels.initial),
-    [context.labels.initial]
-  );
-  messages = [...initialMessages, ...messages];
-  const functionResults = {};
-  for (let i = 0; i < messages.length; i++) {
-    if (messages[i] instanceof import_runtime_client_gql.ActionExecutionMessage) {
-      const id = messages[i].id;
-      const resultMessage = messages.find(
-        (message) => message instanceof import_runtime_client_gql.ResultMessage && message.actionExecutionId === id
-      );
-      if (resultMessage) {
-        functionResults[id] = import_runtime_client_gql.ResultMessage.decodeResult(resultMessage.result || "");
-      }
-    }
-  }
-  const messagesEndRef = import_react4.default.useRef(null);
-  const scrollToBottom = () => {
-    if (messagesEndRef.current) {
-      messagesEndRef.current.scrollIntoView({
-        behavior: "auto"
-      });
-    }
-  };
-  (0, import_react4.useEffect)(() => {
-    scrollToBottom();
-  }, [messages]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "copilotKitMessages", children: [
-    messages.map((message, index) => {
-      const isCurrentMessage = index === messages.length - 1;
-      if (message instanceof import_runtime_client_gql.TextMessage && message.role === "user") {
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: message.content }, index);
-      } else if (message instanceof import_runtime_client_gql.TextMessage && message.role == "assistant") {
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: isCurrentMessage && inProgress && !message.content ? context.icons.spinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Markdown, { content: message.content }) }, index);
-      } else if (message instanceof import_runtime_client_gql.ActionExecutionMessage) {
-        if (chatComponentsCache.current !== null && chatComponentsCache.current.actions[message.name]) {
-          const render = chatComponentsCache.current.actions[message.name];
-          if (typeof render === "string") {
-            if (isCurrentMessage && inProgress) {
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-                context.icons.spinnerIcon,
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inProgressLabel", children: render })
-              ] }, index);
-            } else {
-              return null;
-            }
-          } else {
-            const args = message.arguments;
-            let status = "inProgress";
-            if (functionResults[message.id] !== void 0) {
-              status = "complete";
-            } else if (message.status.code !== import_runtime_client_gql.MessageStatusCode.Pending) {
-              status = "executing";
-            }
-            try {
-              const toRender = render({
-                status,
-                args,
-                result: functionResults[message.id]
-              });
-              if (!toRender && status === "complete") {
-                return null;
-              }
-              if (typeof toRender === "string") {
-                return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-                  isCurrentMessage && inProgress && context.icons.spinnerIcon,
-                  " ",
-                  toRender
-                ] }, index);
-              } else {
-                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "copilotKitCustomAssistantMessage", children: toRender }, index);
-              }
-            } catch (e) {
-              console.error(`Error executing render function for action ${message.name}: ${e}`);
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-                isCurrentMessage && inProgress && context.icons.spinnerIcon,
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("b", { children: [
-                  "\u274C Error executing render: ",
-                  message.name
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
-                e instanceof Error ? e.message : String(e)
-              ] }, index);
-            }
-          }
-        } else if (!inProgress || !isCurrentMessage) {
-          return null;
-        } else {
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
-        }
-      } else if (message instanceof import_runtime_client_gql.AgentStateMessage) {
-        let render;
-        if (chatComponentsCache.current !== null) {
-          render = chatComponentsCache.current.coagentActions[`${message.agentName}-${message.nodeName}`] || chatComponentsCache.current.coagentActions[`${message.agentName}-global`];
-        }
-        if (render) {
-          if (typeof render === "string") {
-            if (isCurrentMessage && inProgress) {
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-                context.icons.spinnerIcon,
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inProgressLabel", children: render })
-              ] }, 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 (typeof toRender === "string") {
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-                isCurrentMessage && inProgress && context.icons.spinnerIcon,
-                " ",
-                toRender
-              ] }, index);
-            } else {
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "copilotKitCustomAssistantMessage", children: toRender }, index);
-            }
-          }
-        } else if (!inProgress || !isCurrentMessage) {
-          return null;
-        } else {
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
-        }
-      } else if (message instanceof import_runtime_client_gql.ResultMessage && inProgress && isCurrentMessage) {
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
-      }
-    }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("footer", { ref: messagesEndRef, children })
-  ] });
-};
-function makeInitialMessages(initial) {
-  let initialArray = [];
-  if (initial) {
-    if (Array.isArray(initial)) {
-      initialArray.push(...initial);
-    } else {
-      initialArray.push(initial);
-    }
-  }
-  return initialArray.map(
-    (message) => new import_runtime_client_gql.TextMessage({
-      role: import_runtime_client_gql.Role.Assistant,
-      content: message
-    })
-  );
-}
-
-// src/components/chat/Input.tsx
-var import_react7 = require("react");
-
-// src/components/chat/Textarea.tsx
-var import_react5 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var AutoResizingTextarea = (0, import_react5.forwardRef)(
-  ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {
-    const internalTextareaRef = (0, import_react5.useRef)(null);
-    const [maxHeight, setMaxHeight] = (0, import_react5.useState)(0);
-    (0, import_react5.useImperativeHandle)(ref, () => internalTextareaRef.current);
-    (0, import_react5.useEffect)(() => {
-      const calculateMaxHeight = () => {
-        const textarea = internalTextareaRef.current;
-        if (textarea) {
-          textarea.style.height = "auto";
-          const singleRowHeight = textarea.scrollHeight;
-          setMaxHeight(singleRowHeight * maxRows);
-          if (autoFocus) {
-            textarea.focus();
-          }
-        }
-      };
-      calculateMaxHeight();
-    }, [maxRows]);
-    (0, import_react5.useEffect)(() => {
-      const textarea = internalTextareaRef.current;
-      if (textarea) {
-        textarea.style.height = "auto";
-        textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
-      }
-    }, [value, maxHeight]);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "textarea",
-      {
-        ref: internalTextareaRef,
-        value,
-        onChange,
-        onKeyDown,
-        placeholder,
-        style: {
-          overflow: "auto",
-          resize: "none",
-          maxHeight: `${maxHeight}px`
-        },
-        rows: 1
-      }
-    );
-  }
-);
-var Textarea_default = AutoResizingTextarea;
-
-// src/hooks/use-push-to-talk.tsx
-var import_react_core2 = require("@copilotkit/react-core");
-var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
-var import_react6 = require("react");
-var startRecording = (mediaStreamRef, mediaRecorderRef, audioContextRef, recordedChunks, onStop) => __async(void 0, null, function* () {
-  if (!mediaStreamRef.current || !audioContextRef.current) {
-    mediaStreamRef.current = yield navigator.mediaDevices.getUserMedia({ audio: true });
-    audioContextRef.current = new window.AudioContext();
-    yield audioContextRef.current.resume();
-  }
-  mediaRecorderRef.current = new MediaRecorder(mediaStreamRef.current);
-  mediaRecorderRef.current.start(1e3);
-  mediaRecorderRef.current.ondataavailable = (event) => {
-    recordedChunks.push(event.data);
-  };
-  mediaRecorderRef.current.onstop = onStop;
-});
-var stopRecording = (mediaRecorderRef) => {
-  if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
-    mediaRecorderRef.current.stop();
+    position: "relative",
+    zIndex: "1"
+  },
+  ".line-highlight.line-highlight": {
+    background: "#f7ebc6",
+    boxShadow: "inset 5px 0 0 #f7d87c",
+    zIndex: "0"
   }
 };
-var transcribeAudio = (recordedChunks, transcribeAudioUrl) => __async(void 0, null, function* () {
-  const completeBlob = new Blob(recordedChunks, { type: "audio/mp4" });
-  const formData = new FormData();
-  formData.append("file", completeBlob, "recording.mp4");
-  const response = yield fetch(transcribeAudioUrl, {
-    method: "POST",
-    body: formData
-  });
-  if (!response.ok) {
-    throw new Error(`Error: ${response.statusText}`);
-  }
-  const transcription = yield response.json();
-  return transcription.text;
-});
-var playAudioResponse = (text, textToSpeechUrl, audioContext) => {
-  const encodedText = encodeURIComponent(text);
-  const url = `${textToSpeechUrl}?text=${encodedText}`;
-  fetch(url).then((response) => response.arrayBuffer()).then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer)).then((audioBuffer) => {
-    const source = audioContext.createBufferSource();
-    source.buffer = audioBuffer;
-    source.connect(audioContext.destination);
-    source.start(0);
-  }).catch((error) => {
-    console.error("Error with decoding audio data", error);
-  });
+
+// src/components/chat/Markdown.tsx
+var import_remark_gfm = __toESM(require("remark-gfm"));
+var import_remark_math = __toESM(require("remark-math"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var MemoizedReactMarkdown = (0, import_react7.memo)(
+  import_react_markdown.default,
+  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
+);
+var Markdown = ({ content }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MemoizedReactMarkdown, { components, remarkPlugins: [import_remark_gfm.default, import_remark_math.default], children: content }) });
 };
-var usePushToTalk = ({
-  sendFunction,
-  inProgress
-}) => {
-  const [pushToTalkState, setPushToTalkState] = (0, import_react6.useState)("idle");
-  const mediaStreamRef = (0, import_react6.useRef)(null);
-  const audioContextRef = (0, import_react6.useRef)(null);
-  const mediaRecorderRef = (0, import_react6.useRef)(null);
-  const recordedChunks = (0, import_react6.useRef)([]);
-  const context = (0, import_react_core2.useCopilotContext)();
-  const [startReadingFromMessageId, setStartReadingFromMessageId] = (0, import_react6.useState)(null);
-  (0, import_react6.useEffect)(() => {
-    if (pushToTalkState === "recording") {
-      startRecording(
-        mediaStreamRef,
-        mediaRecorderRef,
-        audioContextRef,
-        recordedChunks.current,
-        () => {
-          setPushToTalkState("transcribing");
-        }
-      );
-    } else {
-      stopRecording(mediaRecorderRef);
-      if (pushToTalkState === "transcribing") {
-        transcribeAudio(recordedChunks.current, context.copilotApiConfig.transcribeAudioUrl).then(
-          (transcription) => __async(void 0, null, function* () {
-            recordedChunks.current = [];
-            setPushToTalkState("idle");
-            const message = yield sendFunction(transcription);
-            setStartReadingFromMessageId(message.id);
-          })
+var components = {
+  p({ children }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children });
+  },
+  a(_a) {
+    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "a",
+      __spreadProps(__spreadValues({
+        style: { color: "blue", textDecoration: "underline" }
+      }, props), {
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children
+      })
+    );
+  },
+  code(_c) {
+    var _d = _c, { children, className, inline } = _d, props = __objRest(_d, ["children", "className", "inline"]);
+    if (children.length) {
+      if (children[0] == "\u258D") {
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "span",
+          {
+            style: {
+              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+              marginTop: "0.25rem"
+            },
+            children: "\u258D"
+          }
         );
       }
+      children[0] = children[0].replace("`\u258D`", "\u258D");
     }
-    return () => {
-      stopRecording(mediaRecorderRef);
-    };
-  }, [pushToTalkState]);
-  (0, import_react6.useEffect)(() => {
-    if (inProgress === false && startReadingFromMessageId) {
-      const lastMessageIndex = context.messages.findIndex(
-        (message) => message.id === startReadingFromMessageId
-      );
-      const messagesAfterLast = context.messages.slice(lastMessageIndex + 1).filter(
-        (message) => message instanceof import_runtime_client_gql2.TextMessage && message.role === "assistant"
-      );
-      const text = messagesAfterLast.map((message) => message.content).join("\n");
-      playAudioResponse(text, context.copilotApiConfig.textToSpeechUrl, audioContextRef.current);
-      setStartReadingFromMessageId(null);
+    const match = /language-(\w+)/.exec(className || "");
+    if (inline) {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", __spreadProps(__spreadValues({ className }, props), { children }));
     }
-  }, [startReadingFromMessageId, inProgress]);
-  return { pushToTalkState, setPushToTalkState };
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      CodeBlock,
+      __spreadValues({
+        language: match && match[1] || "",
+        value: String(children).replace(/\n$/, "")
+      }, props),
+      Math.random()
+    );
+  }
 };
 
-// src/components/chat/Input.tsx
-var import_react_core3 = require("@copilotkit/react-core");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Input = ({ inProgress, onSend, isVisible = false }) => {
-  const context = useChatContext();
-  const copilotContext = (0, import_react_core3.useCopilotContext)();
-  const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
-  const textareaRef = (0, import_react7.useRef)(null);
-  const handleDivClick = (event) => {
-    var _a;
-    if (event.target !== event.currentTarget)
-      return;
-    (_a = textareaRef.current) == null ? void 0 : _a.focus();
-  };
-  const [text, setText] = (0, import_react7.useState)("");
-  const send = () => {
-    var _a;
-    if (inProgress)
-      return;
-    onSend(text);
-    setText("");
-    (_a = textareaRef.current) == null ? void 0 : _a.focus();
-  };
-  (0, import_react7.useEffect)(() => {
-    var _a;
-    if (isVisible) {
-      (_a = textareaRef.current) == null ? void 0 : _a.focus();
+// src/components/chat/messages/RenderTextMessage.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function RenderTextMessage(props) {
+  const { message, inProgress, index, isCurrentMessage } = props;
+  const { icons } = useChatContext();
+  if (message instanceof import_runtime_client_gql3.TextMessage) {
+    if (message.role === "user") {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: message.content }, index);
+    } else if (message.role == "assistant") {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: isCurrentMessage && inProgress && !message.content ? icons.spinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Markdown, { content: message.content }) }, index);
     }
-  }, [isVisible]);
-  const { pushToTalkState, setPushToTalkState } = usePushToTalk({
-    sendFunction: onSend,
-    inProgress
-  });
-  const sendIcon = inProgress || pushToTalkState === "transcribing" ? context.icons.activityIcon : context.icons.sendIcon;
-  const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
-  const sendDisabled = inProgress || text.length === 0 || pushToTalkState !== "idle";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      Textarea_default,
-      {
-        ref: textareaRef,
-        placeholder: context.labels.placeholder,
-        autoFocus: true,
-        maxRows: 5,
-        value: text,
-        onChange: (event) => setText(event.target.value),
-        onKeyDown: (event) => {
-          if (event.key === "Enter" && !event.shiftKey) {
-            event.preventDefault();
-            send();
+  }
+}
+
+// src/components/chat/messages/RenderActionExecutionMessage.tsx
+var import_runtime_client_gql4 = require("@copilotkit/runtime-client-gql");
+var import_react_core3 = require("@copilotkit/react-core");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function RenderActionExecutionMessage(props) {
+  const { message, inProgress, index, isCurrentMessage, actionResult } = props;
+  const { chatComponentsCache } = (0, import_react_core3.useCopilotContext)();
+  const { icons } = useChatContext();
+  if (message instanceof import_runtime_client_gql4.ActionExecutionMessage) {
+    if (chatComponentsCache.current !== null && chatComponentsCache.current.actions[message.name]) {
+      const render = chatComponentsCache.current.actions[message.name];
+      if (typeof render === "string") {
+        if (isCurrentMessage && inProgress) {
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
+            icons.spinnerIcon,
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "inProgressLabel", children: 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_gql4.MessageStatusCode.Pending) {
+          status = "executing";
+        }
+        try {
+          const toRender = render({
+            status,
+            args,
+            result: actionResult
+          });
+          if (!toRender && status === "complete") {
+            return null;
+          }
+          if (typeof toRender === "string") {
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
+              isCurrentMessage && inProgress && icons.spinnerIcon,
+              " ",
+              toRender
+            ] }, index);
+          } else {
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "copilotKitCustomAssistantMessage", children: toRender }, index);
           }
+        } catch (e) {
+          console.error(`Error executing render function for action ${message.name}: ${e}`);
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
+            isCurrentMessage && inProgress && icons.spinnerIcon,
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("b", { children: [
+              "\u274C Error executing render: ",
+              message.name
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("br", {}),
+            e instanceof Error ? e.message : String(e)
+          ] }, index);
         }
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "copilotKitInputControls", children: [
-      showPushToTalk && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "button",
-        {
-          onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
-          className: pushToTalkState === "recording" ? "copilotKitPushToTalkRecording" : "",
-          children: context.icons.pushToTalkIcon
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { disabled: sendDisabled, onClick: send, children: sendIcon })
-    ] })
-  ] });
-};
+    } else if (!inProgress || !isCurrentMessage) {
+      return null;
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: icons.spinnerIcon }, index);
+    }
+  }
+}
 
-// src/components/chat/Response.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ResponseButton = ({ onClick, inProgress }) => {
-  const context = useChatContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { onClick, className: "copilotKitResponseButton", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: inProgress ? context.icons.stopIcon : context.icons.regenerateIcon }),
-    inProgress ? context.labels.stopGenerating : context.labels.regenerateResponse
-  ] });
-};
+// src/components/chat/messages/RenderResultMessage.tsx
+var import_runtime_client_gql5 = require("@copilotkit/runtime-client-gql");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function RenderResultMessage(props) {
+  const { message, inProgress, index, isCurrentMessage } = props;
+  const { icons } = useChatContext();
+  if (message instanceof import_runtime_client_gql5.ResultMessage && inProgress && isCurrentMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: icons.spinnerIcon }, index);
+  }
+}
 
-// src/components/chat/Suggestion.tsx
+// src/components/chat/messages/RenderAgentStateMessage.tsx
+var import_runtime_client_gql6 = require("@copilotkit/runtime-client-gql");
 var import_react_core4 = require("@copilotkit/react-core");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function RenderAgentStateMessage(props) {
+  const { message, inProgress, index, isCurrentMessage } = props;
+  const { chatComponentsCache } = (0, import_react_core4.useCopilotContext)();
+  const { icons } = useChatContext();
+  if (message instanceof import_runtime_client_gql6.AgentStateMessage) {
+    let render;
+    if (chatComponentsCache.current !== null) {
+      render = chatComponentsCache.current.coagentActions[`${message.agentName}-${message.nodeName}`] || chatComponentsCache.current.coagentActions[`${message.agentName}-global`];
+    }
+    if (render) {
+      if (typeof render === "string") {
+        if (isCurrentMessage && inProgress) {
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
+            icons.spinnerIcon,
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "inProgressLabel", children: render })
+          ] }, 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 (typeof toRender === "string") {
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
+            isCurrentMessage && inProgress && icons.spinnerIcon,
+            " ",
+            toRender
+          ] }, index);
+        } else {
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "copilotKitCustomAssistantMessage", children: toRender }, index);
+        }
+      }
+    } else if (!inProgress || !isCurrentMessage) {
+      return null;
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: icons.spinnerIcon }, index);
+    }
+  }
+}
+
+// src/components/chat/Suggestion.tsx
+var import_react_core5 = require("@copilotkit/react-core");
 var import_shared = require("@copilotkit/shared");
-var import_runtime_client_gql3 = require("@copilotkit/runtime-client-gql");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_runtime_client_gql7 = require("@copilotkit/runtime-client-gql");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Suggestion({ title, message, onClick, partial, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "button",
     {
       disabled: partial,
@@ -1262,7 +1355,7 @@ function Suggestion({ title, message, onClick, partial, className }) {
       className: className || "suggestion",
       children: [
         partial && SmallSpinnerIcon,
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: title })
       ]
     }
   );
@@ -1280,11 +1373,11 @@ var reloadSuggestions = (context, chatSuggestionConfiguration, setCurrentSuggest
   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_core4.extract)({
+      const result = yield (0, import_react_core5.extract)({
         context,
         instructions: "Suggest what the user could say next. Provide clear, highly relevant suggestions. Do not literally suggest function calls. " + config.instructions + "\n\n" + numOfSuggestionsInstructions,
         data: "Available tools: " + tools + "\n\n",
-        requestType: import_runtime_client_gql3.CopilotRequestType.Task,
+        requestType: import_runtime_client_gql7.CopilotRequestType.Task,
         parameters: [
           {
             name: "suggestions",
@@ -1339,14 +1432,14 @@ var reloadSuggestions = (context, chatSuggestionConfiguration, setCurrentSuggest
 
 // src/components/chat/Chat.tsx
 var import_react10 = __toESM(require("react"));
-var import_react_core7 = require("@copilotkit/react-core");
-var import_runtime_client_gql6 = require("@copilotkit/runtime-client-gql");
+var import_react_core8 = require("@copilotkit/react-core");
+var import_runtime_client_gql10 = require("@copilotkit/runtime-client-gql");
 var import_shared3 = require("@copilotkit/shared");
 
 // src/components/dev-console/utils.ts
-var import_react_core5 = require("@copilotkit/react-core");
-var import_runtime_client_gql4 = require("@copilotkit/runtime-client-gql");
-var import_runtime_client_gql5 = require("@copilotkit/runtime-client-gql");
+var import_react_core6 = require("@copilotkit/react-core");
+var import_runtime_client_gql8 = require("@copilotkit/runtime-client-gql");
+var import_runtime_client_gql9 = require("@copilotkit/runtime-client-gql");
 function shouldShowDevConsole(showDevConsole) {
   if (typeof showDevConsole === "boolean") {
     return showDevConsole;
@@ -1408,7 +1501,7 @@ function getPublishedCopilotKitVersion(current, forceCheck = false) {
 }
 function logReadables(context) {
   console.log("%cCurrent Readables:", "font-size: 16px; font-weight: bold;");
-  const readables = context.getContextString([], import_react_core5.defaultCopilotContextCategories).trim();
+  const readables = context.getContextString([], import_react_core6.defaultCopilotContextCategories).trim();
   if (readables.length === 0) {
     console.log("No readables found");
     return;
@@ -1436,7 +1529,7 @@ function logMessages(context) {
     return;
   }
   const tableData = context.messages.map((message) => {
-    if (message instanceof import_runtime_client_gql4.TextMessage) {
+    if (message instanceof import_runtime_client_gql8.TextMessage) {
       return {
         id: message.id,
         type: "TextMessage",
@@ -1445,7 +1538,7 @@ function logMessages(context) {
         scope: void 0,
         content: message.content
       };
-    } else if (message instanceof import_runtime_client_gql4.ActionExecutionMessage) {
+    } else if (message instanceof import_runtime_client_gql8.ActionExecutionMessage) {
       return {
         id: message.id,
         type: "ActionExecutionMessage",
@@ -1454,7 +1547,7 @@ function logMessages(context) {
         scope: message.scope,
         content: message.arguments
       };
-    } else if (message instanceof import_runtime_client_gql4.ResultMessage) {
+    } else if (message instanceof import_runtime_client_gql8.ResultMessage) {
       return {
         id: message.id,
         type: "ResultMessage",
@@ -1463,7 +1556,7 @@ function logMessages(context) {
         scope: message.actionExecutionId,
         content: message.result
       };
-    } else if (message instanceof import_runtime_client_gql5.AgentStateMessage) {
+    } else if (message instanceof import_runtime_client_gql9.AgentStateMessage) {
       return {
         id: message.id,
         type: `AgentStateMessage (running: ${message.running})`,
@@ -1478,12 +1571,12 @@ function logMessages(context) {
 }
 
 // src/components/dev-console/console.tsx
-var import_react_core6 = require("@copilotkit/react-core");
+var import_react_core7 = require("@copilotkit/react-core");
 var import_react8 = require("react");
 
 // src/components/dev-console/icons.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var ExclamationMarkTriangleIcon = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ExclamationMarkTriangleIcon = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "svg",
   {
     width: "13.3967723px",
@@ -1491,7 +1584,7 @@ var ExclamationMarkTriangleIcon = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     viewBox: "0 0 13.3967723 12",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { id: "exclamation-triangle", fill: "#CD2121", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { id: "exclamation-triangle", fill: "#CD2121", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "path",
       {
         d: "M5.39935802,0.75 C5.97670802,-0.25 7.42007802,-0.25 7.99742802,0.75 L13.193588,9.75 C13.770888,10.75 13.049288,12 11.894588,12 L1.50223802,12 C0.34753802,12 -0.37414898,10.75 0.20319802,9.75 L5.39935802,0.75 Z M6.69838802,2.5 C7.11260802,2.5 7.44838802,2.83579 7.44838802,3.25 L7.44838802,6.25 C7.44838802,6.66421 7.11260802,7 6.69838802,7 C6.28417802,7 5.94838802,6.66421 5.94838802,6.25 L5.94838802,3.25 C5.94838802,2.83579 6.28417802,2.5 6.69838802,2.5 Z M6.69838802,10.5 C7.25067802,10.5 7.69838802,10.0523 7.69838802,9.5 C7.69838802,8.9477 7.25067802,8.5 6.69838802,8.5 C6.14610802,8.5 5.69838802,8.9477 5.69838802,9.5 C5.69838802,10.0523 6.14610802,10.5 6.69838802,10.5 Z",
@@ -1500,7 +1593,7 @@ var ExclamationMarkTriangleIcon = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     ) }) })
   }
 );
-var ExclamationMarkIcon = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var ExclamationMarkIcon = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "svg",
   {
     width: "14px",
@@ -1508,7 +1601,7 @@ var ExclamationMarkIcon = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     viewBox: "0 0 14 14",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { id: "exclamation-circle", fill: "#EC662C", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { id: "exclamation-circle", fill: "#EC662C", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "path",
       {
         d: "M7,14 C10.866,14 14,10.866 14,7 C14,3.13401 10.866,0 7,0 C3.13401,0 0,3.13401 0,7 C0,10.866 3.13401,14 7,14 Z M7,3 C7.41421,3 7.75,3.33579 7.75,3.75 L7.75,6.75 C7.75,7.16421 7.41421,7.5 7,7.5 C6.58579,7.5 6.25,7.16421 6.25,6.75 L6.25,3.75 C6.25,3.33579 6.58579,3 7,3 Z M7,11 C7.55228,11 8,10.5523 8,10 C8,9.4477 7.55228,9 7,9 C6.44772,9 6,9.4477 6,10 C6,10.5523 6.44772,11 7,11 Z",
@@ -1517,14 +1610,14 @@ var ExclamationMarkIcon = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     ) }) })
   }
 );
-var ChevronDownIcon = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "7px", height: "4px", viewBox: "0 0 7 4", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { id: "Group", fill: "#000000", fillRule: "nonzero", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var ChevronDownIcon = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { width: "7px", height: "4px", viewBox: "0 0 7 4", version: "1.1", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { id: "Group", fill: "#000000", fillRule: "nonzero", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "path",
   {
     d: "M3.71690723,3.90271086 C3.59268176,4.03242971 3.39143629,4.03242971 3.26721082,3.90271086 L0.0853966595,0.57605615 C-0.0314221035,0.444981627 -0.0279751448,0.240725043 0.0931934622,0.114040675 C0.214362069,-0.0126436935 0.409725445,-0.0162475626 0.535093061,0.105888951 L3.49205902,3.19746006 L6.44902499,0.105888951 C6.52834574,0.0168884389 6.64780588,-0.0197473458 6.7605411,0.0103538404 C6.87327633,0.0404550266 6.96130636,0.132492308 6.99009696,0.250359396 C7.01888756,0.368226483 6.98384687,0.493124608 6.89872139,0.57605615 L3.71690723,3.90271086 Z",
     id: "Path"
   }
 ) }) }) });
-var CheckIcon2 = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var CheckIcon2 = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "svg",
   {
     width: "14px",
@@ -1532,7 +1625,7 @@ var CheckIcon2 = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     viewBox: "0 0 14 14",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { id: "Group-2", transform: "translate(-118, 0)", fill: "#1BC030", fillRule: "nonzero", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { id: "Group", transform: "translate(118, 0)", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { id: "Group-2", transform: "translate(-118, 0)", fill: "#1BC030", fillRule: "nonzero", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { id: "Group", transform: "translate(118, 0)", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "path",
       {
         d: "M0,7 C0,3.13384615 3.13384615,0 7,0 C10.8661538,0 14,3.13384615 14,7 C14,10.8661538 10.8661538,14 7,14 C3.13384615,14 0,10.8661538 0,7 Z M9.59179487,5.69764103 C9.70905818,5.54139023 9.73249341,5.33388318 9.65303227,5.15541491 C9.57357113,4.97694665 9.40367989,4.85551619 9.20909814,4.83811118 C9.01451638,4.82070616 8.82577109,4.91005717 8.71589744,5.07158974 L6.39261538,8.32389744 L5.22666667,7.15794872 C5.01450582,6.96025518 4.68389046,6.9660885 4.47883563,7.17114332 C4.27378081,7.37619815 4.26794748,7.70681351 4.46564103,7.91897436 L6.08102564,9.53435897 C6.19289944,9.64614839 6.3482622,9.70310251 6.50588106,9.69010587 C6.66349993,9.67710922 6.80743532,9.59547613 6.89948718,9.46687179 L9.59179487,5.69764103 L9.59179487,5.69764103 Z",
@@ -1541,7 +1634,7 @@ var CheckIcon2 = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     ) }) }) })
   }
 );
-var CopilotKitIcon = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+var CopilotKitIcon = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
   "svg",
   {
     width: "33px",
@@ -1550,8 +1643,8 @@ var CopilotKitIcon = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("title", { children: "bd5c9079-929b-4d55-bdc9-16d1c8181b71" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("title", { children: "bd5c9079-929b-4d55-bdc9-16d1c8181b71" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { id: "Page-1", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "image",
         {
           x: "0",
@@ -1568,10 +1661,10 @@ var CopilotKitIcon = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
 // src/components/dev-console/console.tsx
 var import_react9 = require("@headlessui/react");
 var import_shared2 = require("@copilotkit/shared");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function CopilotDevConsole() {
   const currentVersion = import_shared2.COPILOTKIT_VERSION;
-  const context = (0, import_react_core6.useCopilotContext)();
+  const context = (0, import_react_core7.useCopilotContext)();
   const [showDevConsole, setShowDevConsole] = (0, import_react8.useState)(false);
   (0, import_react8.useEffect)(() => {
     setShowDevConsole(shouldShowDevConsole(context.showDevConsole));
@@ -1642,14 +1735,14 @@ function CopilotDevConsole() {
   if (!showDevConsole) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       ref: consoleRef,
       className: "copilotKitDevConsole " + (versionStatus === "update-available" ? "copilotKitDevConsoleUpgrade" : "") + (versionStatus === "outdated" ? "copilotKitDevConsoleWarnOutdated" : ""),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "copilotKitDevConsoleLogo", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("a", { href: "https://copilotkit.ai", target: "_blank", children: CopilotKitIcon }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "copilotKitDevConsoleLogo", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { href: "https://copilotkit.ai", target: "_blank", children: CopilotKitIcon }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           VersionInfo,
           {
             showDevConsole: context.showDevConsole,
@@ -1658,7 +1751,7 @@ function CopilotDevConsole() {
             latestVersion
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           DebugMenuButton,
           {
             setShowDevConsole,
@@ -1713,12 +1806,12 @@ function VersionInfo({
       setTimeout(() => setCopyStatus(""), 1e3);
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "copilotKitVersionInfo", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("header", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "copilotKitVersionInfo", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("header", { children: [
       "COPILOTKIT DEV CONSOLE",
-      showDevConsole === "auto" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("aside", { children: asideLabel })
+      showDevConsole === "auto" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("aside", { children: asideLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { children: [
       "Version: ",
       versionLabel,
       " (",
@@ -1726,7 +1819,7 @@ function VersionInfo({
       ") ",
       versionIcon
     ] }),
-    (versionStatus === "update-available" || versionStatus === "outdated") && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { onClick: handleCopyClick, children: copyStatus || installCommand }) })
+    (versionStatus === "update-available" || versionStatus === "outdated") && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { onClick: handleCopyClick, children: copyStatus || installCommand }) })
   ] });
 }
 function DebugMenuButton({
@@ -1734,13 +1827,13 @@ function DebugMenuButton({
   checkForUpdates,
   mode
 }) {
-  const context = (0, import_react_core6.useCopilotContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "bg-black fixed top-24 w-52 text-right", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react9.Menu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react9.MenuButton, { className: `copilotKitDebugMenuButton ${mode === "compact" ? "compact" : ""}`, children: mode == "compact" ? "Debug" : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+  const context = (0, import_react_core7.useCopilotContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "bg-black fixed top-24 w-52 text-right", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react9.Menu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react9.MenuButton, { className: `copilotKitDebugMenuButton ${mode === "compact" ? "compact" : ""}`, children: mode == "compact" ? "Debug" : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
       "Debug ",
       ChevronDownIcon
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       import_react9.MenuItems,
       {
         transition: true,
@@ -1748,12 +1841,12 @@ function DebugMenuButton({
         className: "copilotKitDebugMenu",
         style: { zIndex: 40 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logReadables(context), children: "Log Readables" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logActions(context), children: "Log Actions" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logMessages(context), children: "Log Messages" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => checkForUpdates(true), children: "Check for Updates" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("hr", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => setShowDevConsole(false), children: "Hide Dev Console" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logReadables(context), children: "Log Readables" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logActions(context), children: "Log Actions" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => logMessages(context), children: "Log Messages" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => checkForUpdates(true), children: "Check for Updates" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react9.MenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "copilotKitDebugMenuItem", onClick: () => setShowDevConsole(false), children: "Hide Dev Console" }) })
         ]
       }
     )
@@ -1761,7 +1854,7 @@ function DebugMenuButton({
 }
 
 // src/components/chat/Chat.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function CopilotChat({
   instructions,
   onSubmitMessage,
@@ -1769,13 +1862,17 @@ function CopilotChat({
   showResponseButton = true,
   onInProgress,
   Messages: Messages2 = Messages,
+  RenderTextMessage: RenderTextMessage2 = RenderTextMessage,
+  RenderActionExecutionMessage: RenderActionExecutionMessage2 = RenderActionExecutionMessage,
+  RenderAgentStateMessage: RenderAgentStateMessage2 = RenderAgentStateMessage,
+  RenderResultMessage: RenderResultMessage2 = RenderResultMessage,
   Input: Input2 = Input,
   ResponseButton: ResponseButton2 = ResponseButton,
   className,
   icons,
   labels
 }) {
-  const context = (0, import_react_core7.useCopilotContext)();
+  const context = (0, import_react_core8.useCopilotContext)();
   (0, import_react10.useEffect)(() => {
     context.setChatInstructions(instructions || "");
   }, [instructions]);
@@ -1789,32 +1886,43 @@ function CopilotChat({
   } = useCopilotChatLogic(makeSystemMessage, onInProgress, onSubmitMessage);
   const chatContext = import_react10.default.useContext(ChatContext);
   const isVisible = chatContext ? chatContext.open : true;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CopilotDevConsole, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Messages2, { messages: visibleMessages, inProgress: isLoading, children: [
-      currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h6", { children: "Suggested:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          Suggestion,
-          {
-            title: suggestion.title,
-            message: suggestion.message,
-            partial: suggestion.partial,
-            className: suggestion.className,
-            onClick: (message) => sendMessage(message)
-          },
-          index
-        )) })
-      ] }),
-      showResponseButton && visibleMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        ResponseButton2,
-        {
-          onClick: isLoading ? stopGeneration : reloadMessages,
-          inProgress: isLoading
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Input2, { inProgress: isLoading, onSend: sendMessage, isVisible })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CopilotDevConsole, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      Messages2,
+      {
+        RenderTextMessage: RenderTextMessage2,
+        RenderActionExecutionMessage: RenderActionExecutionMessage2,
+        RenderAgentStateMessage: RenderAgentStateMessage2,
+        RenderResultMessage: RenderResultMessage2,
+        messages: visibleMessages,
+        inProgress: isLoading,
+        children: [
+          currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h6", { children: "Suggested:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              Suggestion,
+              {
+                title: suggestion.title,
+                message: suggestion.message,
+                partial: suggestion.partial,
+                className: suggestion.className,
+                onClick: (message) => sendMessage(message)
+              },
+              index
+            )) })
+          ] }),
+          showResponseButton && visibleMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            ResponseButton2,
+            {
+              onClick: isLoading ? stopGeneration : reloadMessages,
+              inProgress: isLoading
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Input2, { inProgress: isLoading, onSend: sendMessage, isVisible })
   ] });
 }
 function WrappedCopilotChat({
@@ -1825,14 +1933,14 @@ function WrappedCopilotChat({
 }) {
   const chatContext = import_react10.default.useContext(ChatContext);
   if (!chatContext) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `copilotKitChat ${className}`, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: `copilotKitChat ${className}`, children }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children });
 }
 var SUGGESTIONS_DEBOUNCE_TIMEOUT = 1e3;
 var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage) => {
-  const { visibleMessages, appendMessage, reloadMessages, stopGeneration, isLoading } = (0, import_react_core7.useCopilotChat)({
+  const { visibleMessages, appendMessage, reloadMessages, stopGeneration, isLoading } = (0, import_react_core8.useCopilotChat)({
     id: (0, import_shared3.randomId)(),
     makeSystemMessage
   });
@@ -1844,7 +1952,7 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage) =>
     (_a = suggestionsAbortControllerRef.current) == null ? void 0 : _a.abort();
     suggestionsAbortControllerRef.current = null;
   };
-  const context = (0, import_react_core7.useCopilotContext)();
+  const context = (0, import_react_core8.useCopilotContext)();
   (0, import_react10.useEffect)(() => {
     onInProgress == null ? void 0 : onInProgress(isLoading);
     abortSuggestions();
@@ -1869,9 +1977,9 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage) =>
   const sendMessage = (messageContent) => __async(void 0, null, function* () {
     abortSuggestions();
     setCurrentSuggestions([]);
-    const message = new import_runtime_client_gql6.TextMessage({
+    const message = new import_runtime_client_gql10.TextMessage({
       content: messageContent,
-      role: import_runtime_client_gql6.Role.User
+      role: import_runtime_client_gql10.Role.User
     });
     appendMessage(message);
     if (onSubmitMessage) {