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

package/dist/components/chat/Modal.js

@@ -522,9 +522,7 @@ var Button = ({}) => {
 
 // src/components/dev-console/utils.ts
 var import_react_core2 = require("@copilotkit/react-core");
-function shouldShowDevConsole(showDevConsole) {
-  return showDevConsole;
-}
+var import_react_core3 = require("@copilotkit/react-core");
 function getPublishedCopilotKitVersion(current, forceCheck = false) {
   return __async(this, null, function* () {
     const LOCAL_STORAGE_KEY = "__copilotkit_version_check__";
@@ -644,7 +642,7 @@ function logMessages(context) {
 }
 
 // src/components/dev-console/console.tsx
-var import_react_core3 = require("@copilotkit/react-core");
+var import_react_core4 = require("@copilotkit/react-core");
 var import_react4 = require("react");
 
 // src/components/dev-console/icons.tsx
@@ -834,10 +832,10 @@ function CopilotKitHelpModal() {
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function CopilotDevConsole() {
   const currentVersion = import_shared2.COPILOTKIT_VERSION;
-  const context = (0, import_react_core3.useCopilotContext)();
+  const context = (0, import_react_core4.useCopilotContext)();
   const [showDevConsole, setShowDevConsole] = (0, import_react4.useState)(false);
   (0, import_react4.useEffect)(() => {
-    setShowDevConsole(shouldShowDevConsole(context.showDevConsole));
+    setShowDevConsole((0, import_react_core3.shouldShowDevConsole)(context.showDevConsole));
   }, [context.showDevConsole]);
   const dontRunTwiceInDevMode = (0, import_react4.useRef)(false);
   const [versionStatus, setVersionStatus] = (0, import_react4.useState)("unknown");
@@ -963,8 +961,8 @@ function DebugMenuButton({
   checkForUpdates,
   mode
 }) {
-  const context = (0, import_react_core3.useCopilotContext)();
-  const messagesContext = (0, import_react_core3.useCopilotMessagesContext)();
+  const context = (0, import_react_core4.useCopilotContext)();
+  const messagesContext = (0, import_react_core4.useCopilotMessagesContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react5.Menu, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_react5.MenuButton,
@@ -1025,559 +1023,137 @@ var Header = ({}) => {
 };
 
 // src/components/chat/Messages.tsx
-var import_react6 = require("react");
-var import_react_core4 = require("@copilotkit/react-core");
+var import_react10 = require("react");
+var import_react_core5 = require("@copilotkit/react-core");
+
+// src/components/chat/messages/UserMessage.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Messages = ({
-  inProgress,
-  children,
-  RenderMessage: RenderMessage2,
-  AssistantMessage: AssistantMessage2,
-  UserMessage: UserMessage2,
-  onRegenerate,
-  onCopy,
-  onThumbsUp,
-  onThumbsDown,
-  markdownTagRenderers
-}) => {
-  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);
-  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;
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          RenderMessage2,
-          {
-            message,
-            inProgress,
-            index,
-            isCurrentMessage,
-            AssistantMessage: AssistantMessage2,
-            UserMessage: UserMessage2,
-            onRegenerate,
-            onCopy,
-            onThumbsUp,
-            onThumbsDown,
-            markdownTagRenderers
-          },
-          index
-        );
-      }),
-      interrupt
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("footer", { className: "copilotKitMessagesFooter", ref: messagesEndRef, children })
-  ] });
-};
-function makeInitialMessages(initial) {
-  if (!initial)
-    return [];
-  if (Array.isArray(initial)) {
-    return initial.map((message) => {
-      return {
-        id: message,
-        role: "assistant",
-        content: message
-      };
-    });
+var UserMessage = (props) => {
+  const { message, ImageRenderer: ImageRenderer2 } = props;
+  const isImageMessage = message && "image" in message && message.image;
+  if (isImageMessage) {
+    const imageMessage = message;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImageRenderer2, { image: imageMessage.image, content: imageMessage.content }) });
   }
-  return [
-    {
-      id: initial,
-      role: "system",
-      content: initial
-    }
-  ];
-}
-function useScrollToBottom(messages) {
-  const messagesEndRef = (0, import_react6.useRef)(null);
-  const messagesContainerRef = (0, import_react6.useRef)(null);
-  const isProgrammaticScrollRef = (0, import_react6.useRef)(false);
-  const isUserScrollUpRef = (0, import_react6.useRef)(false);
-  const scrollToBottom = () => {
-    if (messagesContainerRef.current && messagesEndRef.current) {
-      isProgrammaticScrollRef.current = true;
-      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
-    }
-  };
-  const handleScroll = () => {
-    if (isProgrammaticScrollRef.current) {
-      isProgrammaticScrollRef.current = false;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: message == null ? void 0 : message.content });
+};
+
+// 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_react6 = require("react");
+var import_react_syntax_highlighter = require("react-syntax-highlighter");
+
+// src/hooks/use-copy-to-clipboard.tsx
+var React5 = __toESM(require("react"));
+function useCopyToClipboard({ timeout = 2e3 }) {
+  const [isCopied, setIsCopied] = React5.useState(false);
+  const copyToClipboard = (value) => {
+    var _a;
+    if (typeof window === "undefined" || !((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
       return;
     }
-    if (messagesContainerRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
-      isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;
-    }
-  };
-  (0, import_react6.useEffect)(() => {
-    const container = messagesContainerRef.current;
-    if (container) {
-      container.addEventListener("scroll", handleScroll);
-    }
-    return () => {
-      if (container) {
-        container.removeEventListener("scroll", handleScroll);
-      }
-    };
-  }, []);
-  (0, import_react6.useEffect)(() => {
-    const container = messagesContainerRef.current;
-    if (!container) {
+    if (!value) {
       return;
     }
-    const mutationObserver = new MutationObserver(() => {
-      if (!isUserScrollUpRef.current) {
-        scrollToBottom();
-      }
-    });
-    mutationObserver.observe(container, {
-      childList: true,
-      subtree: true,
-      characterData: true
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+      setTimeout(() => {
+        setIsCopied(false);
+      }, timeout);
     });
-    return () => {
-      mutationObserver.disconnect();
-    };
-  }, []);
-  (0, import_react6.useEffect)(() => {
-    isUserScrollUpRef.current = false;
-    scrollToBottom();
-  }, [messages.filter((m) => m.role === "user").length]);
-  return { messagesEndRef, messagesContainerRef };
+  };
+  return { isCopied, copyToClipboard };
 }
 
-// src/components/chat/Input.tsx
-var import_react9 = require("react");
-
-// src/components/chat/Textarea.tsx
-var import_react7 = require("react");
+// src/components/chat/CodeBlock.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var AutoResizingTextarea = (0, import_react7.forwardRef)(
-  ({
-    maxRows = 1,
-    placeholder,
-    value,
-    onChange,
-    onKeyDown,
-    onCompositionStart,
-    onCompositionEnd,
-    autoFocus
-  }, ref) => {
-    const internalTextareaRef = (0, import_react7.useRef)(null);
-    const [maxHeight, setMaxHeight] = (0, import_react7.useState)(0);
-    (0, import_react7.useImperativeHandle)(ref, () => internalTextareaRef.current);
-    (0, import_react7.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_react7.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_runtime11.jsx)(
-      "textarea",
+var programmingLanguages = {
+  javascript: ".js",
+  python: ".py",
+  java: ".java",
+  c: ".c",
+  cpp: ".cpp",
+  "c++": ".cpp",
+  "c#": ".cs",
+  ruby: ".rb",
+  php: ".php",
+  swift: ".swift",
+  "objective-c": ".m",
+  kotlin: ".kt",
+  typescript: ".ts",
+  go: ".go",
+  perl: ".pl",
+  rust: ".rs",
+  scala: ".scala",
+  haskell: ".hs",
+  lua: ".lua",
+  shell: ".sh",
+  sql: ".sql",
+  html: ".html",
+  css: ".css"
+  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
+};
+var generateRandomString = (length, lowercase = false) => {
+  const chars = "ABCDEFGHJKLMNPQRSTUVWXY3456789";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return lowercase ? result.toLowerCase() : result;
+};
+var CodeBlock = (0, import_react6.memo)(({ language, value }) => {
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
+  const downloadAsFile = () => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const fileExtension = programmingLanguages[language] || ".file";
+    const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
+    const fileName = window.prompt("Enter file name", suggestedFileName);
+    if (!fileName) {
+      return;
+    }
+    const blob = new Blob([value], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = url;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+  const onCopy = () => {
+    if (isCopied)
+      return;
+    copyToClipboard(value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "copilotKitCodeBlock", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: DownloadIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: isCopied ? CheckIcon : CopyIcon })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_react_syntax_highlighter.Prism,
       {
-        ref: internalTextareaRef,
-        value,
-        onChange,
-        onKeyDown,
-        onCompositionStart,
-        onCompositionEnd,
-        placeholder,
-        style: {
-          overflow: "auto",
-          resize: "none",
-          maxHeight: `${maxHeight}px`
+        language,
+        style: highlightStyle,
+        PreTag: "div",
+        customStyle: {
+          margin: 0,
+          borderBottomLeftRadius: "0.375rem",
+          borderBottomRightRadius: "0.375rem"
         },
-        rows: 1
+        children: value
       }
-    );
-  }
-);
-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) {
-    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_react8.useState)("idle");
-  const mediaStreamRef = (0, import_react8.useRef)(null);
-  const audioContextRef = (0, import_react8.useRef)(null);
-  const mediaRecorderRef = (0, import_react8.useRef)(null);
-  const recordedChunks = (0, import_react8.useRef)([]);
-  const generalContext = (0, import_react_core5.useCopilotContext)();
-  const messagesContext = (0, import_react_core5.useCopilotMessagesContext)();
-  const context = __spreadValues(__spreadValues({}, generalContext), messagesContext);
-  const [startReadingFromMessageId, setStartReadingFromMessageId] = (0, import_react8.useState)(null);
-  (0, import_react8.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_react8.useEffect)(() => {
-    if (inProgress === false && startReadingFromMessageId) {
-      const lastMessageIndex = context.messages.findIndex(
-        (message) => message.id === startReadingFromMessageId
-      );
-      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);
-    }
-  }, [startReadingFromMessageId, inProgress]);
-  return { pushToTalkState, setPushToTalkState };
-};
-
-// src/components/chat/Input.tsx
-var import_react_core6 = require("@copilotkit/react-core");
-
-// src/hooks/use-dark-mode.ts
-var useDarkMode = () => {
-  if (typeof window === "undefined")
-    return false;
-  return document.documentElement.classList.contains("dark") || document.body.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark" || document.body.getAttribute("data-theme") === "dark" || window.matchMedia("(prefers-color-scheme: dark)").matches;
-};
-
-// src/components/chat/PoweredByTag.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function PoweredByTag({ showPoweredBy = true }) {
-  const isDark = useDarkMode();
-  if (!showPoweredBy) {
-    return null;
-  }
-  const poweredByStyle = {
-    visibility: "visible",
-    display: "block",
-    position: "static",
-    textAlign: "center",
-    fontSize: "12px",
-    padding: "3px 0",
-    color: isDark ? "rgb(69, 69, 69)" : "rgb(214, 214, 214)"
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "poweredBy", style: poweredByStyle, children: "Powered by CopilotKit" }) });
-}
-
-// src/components/chat/Input.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var MAX_NEWLINES = 6;
-var Input = ({
-  inProgress,
-  onSend,
-  isVisible = false,
-  onStop,
-  onUpload,
-  hideStopButton = false
-}) => {
-  var _a, _b;
-  const context = useChatContext();
-  const copilotContext = (0, import_react_core6.useCopilotContext)();
-  const showPoweredBy = !((_a = copilotContext.copilotApiConfig) == null ? void 0 : _a.publicApiKey);
-  const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
-  const textareaRef = (0, import_react9.useRef)(null);
-  const [isComposing, setIsComposing] = (0, import_react9.useState)(false);
-  const handleDivClick = (event) => {
-    var _a2;
-    const target = event.target;
-    if (target.closest("button"))
-      return;
-    if (target.tagName === "TEXTAREA")
-      return;
-    (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
-  };
-  const [text, setText] = (0, import_react9.useState)("");
-  const send = () => {
-    var _a2;
-    if (inProgress)
-      return;
-    onSend(text);
-    setText("");
-    (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
-  };
-  const { pushToTalkState, setPushToTalkState } = usePushToTalk({
-    sendFunction: onSend,
-    inProgress
-  });
-  const isInProgress = inProgress || pushToTalkState === "transcribing";
-  const buttonIcon = isInProgress && !hideStopButton ? context.icons.stopIcon : context.icons.sendIcon;
-  const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
-  const canSend = (0, import_react9.useMemo)(() => {
-    var _a2;
-    const interruptEvent = (_a2 = copilotContext.langGraphInterruptAction) == null ? void 0 : _a2.event;
-    const interruptInProgress = (interruptEvent == null ? void 0 : interruptEvent.name) === "LangGraphInterruptEvent" && !(interruptEvent == null ? void 0 : interruptEvent.response);
-    return !isInProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interruptInProgress;
-  }, [(_b = copilotContext.langGraphInterruptAction) == null ? void 0 : _b.event, isInProgress, text, pushToTalkState]);
-  const canStop = (0, import_react9.useMemo)(() => {
-    return isInProgress && !hideStopButton;
-  }, [isInProgress, hideStopButton]);
-  const sendDisabled = !canSend && !canStop;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `copilotKitInputContainer ${showPoweredBy ? "poweredByContainer" : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        Textarea_default,
-        {
-          ref: textareaRef,
-          placeholder: context.labels.placeholder,
-          autoFocus: false,
-          maxRows: MAX_NEWLINES,
-          value: text,
-          onChange: (event) => setText(event.target.value),
-          onCompositionStart: () => setIsComposing(true),
-          onCompositionEnd: () => setIsComposing(false),
-          onKeyDown: (event) => {
-            if (event.key === "Enter" && !event.shiftKey && !isComposing) {
-              event.preventDefault();
-              if (canSend) {
-                send();
-              }
-            }
-          }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "copilotKitInputControls", children: [
-        onUpload && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { onClick: onUpload, className: "copilotKitInputControlButton", children: context.icons.uploadIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { flexGrow: 1 } }),
-        showPushToTalk && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          "button",
-          {
-            onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
-            className: pushToTalkState === "recording" ? "copilotKitInputControlButton copilotKitPushToTalkRecording" : "copilotKitInputControlButton",
-            children: context.icons.pushToTalkIcon
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          "button",
-          {
-            disabled: sendDisabled,
-            onClick: isInProgress && !hideStopButton ? onStop : send,
-            "data-copilotkit-in-progress": inProgress,
-            "data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
-            className: "copilotKitInputControlButton",
-            children: buttonIcon
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PoweredByTag, { showPoweredBy })
-  ] });
-};
-
-// src/components/chat/messages/UserMessage.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var UserMessage = (props) => {
-  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
-var import_react11 = require("react");
-var import_react_markdown = __toESM(require("react-markdown"));
-
-// src/components/chat/CodeBlock.tsx
-var import_react10 = require("react");
-var import_react_syntax_highlighter = require("react-syntax-highlighter");
-
-// src/hooks/use-copy-to-clipboard.tsx
-var React7 = __toESM(require("react"));
-function useCopyToClipboard({ timeout = 2e3 }) {
-  const [isCopied, setIsCopied] = React7.useState(false);
-  const copyToClipboard = (value) => {
-    var _a;
-    if (typeof window === "undefined" || !((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
-      return;
-    }
-    if (!value) {
-      return;
-    }
-    navigator.clipboard.writeText(value).then(() => {
-      setIsCopied(true);
-      setTimeout(() => {
-        setIsCopied(false);
-      }, timeout);
-    });
-  };
-  return { isCopied, copyToClipboard };
-}
-
-// src/components/chat/CodeBlock.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var programmingLanguages = {
-  javascript: ".js",
-  python: ".py",
-  java: ".java",
-  c: ".c",
-  cpp: ".cpp",
-  "c++": ".cpp",
-  "c#": ".cs",
-  ruby: ".rb",
-  php: ".php",
-  swift: ".swift",
-  "objective-c": ".m",
-  kotlin: ".kt",
-  typescript: ".ts",
-  go: ".go",
-  perl: ".pl",
-  rust: ".rs",
-  scala: ".scala",
-  haskell: ".hs",
-  lua: ".lua",
-  shell: ".sh",
-  sql: ".sql",
-  html: ".html",
-  css: ".css"
-  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
-};
-var generateRandomString = (length, lowercase = false) => {
-  const chars = "ABCDEFGHJKLMNPQRSTUVWXY3456789";
-  let result = "";
-  for (let i = 0; i < length; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length));
-  }
-  return lowercase ? result.toLowerCase() : result;
-};
-var CodeBlock = (0, import_react10.memo)(({ language, value }) => {
-  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
-  const downloadAsFile = () => {
-    if (typeof window === "undefined") {
-      return;
-    }
-    const fileExtension = programmingLanguages[language] || ".file";
-    const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
-    const fileName = window.prompt("Enter file name", suggestedFileName);
-    if (!fileName) {
-      return;
-    }
-    const blob = new Blob([value], { type: "text/plain" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.download = fileName;
-    link.href = url;
-    link.style.display = "none";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-  const onCopy = () => {
-    if (isCopied)
-      return;
-    copyToClipboard(value);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "copilotKitCodeBlock", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: DownloadIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: isCopied ? CheckIcon : CopyIcon })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_syntax_highlighter.Prism,
-      {
-        language,
-        style: highlightStyle,
-        PreTag: "div",
-        customStyle: {
-          margin: 0,
-          borderBottomLeftRadius: "0.375rem",
-          borderBottomRightRadius: "0.375rem"
-        },
-        children: value
-      }
-    )
+    )
   ] });
 });
 CodeBlock.displayName = "CodeBlock";
@@ -1863,315 +1439,895 @@ var highlightStyle = {
     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_rehype_raw = __toESM(require("rehype-raw"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var defaultComponents = {
-  a(_a) {
-    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { target: "_blank", rel: "noopener noreferrer", children }));
-  },
-  // @ts-expect-error -- inline
-  code(_c) {
-    var _d = _c, { children, className, inline } = _d, props = __objRest(_d, ["children", "className", "inline"]);
-    if (Array.isArray(children) && children.length) {
-      if (children[0] == "\u258D") {
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          "span",
-          {
-            style: {
-              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-              marginTop: "0.25rem"
-            },
-            children: "\u258D"
-          }
+
+// src/components/chat/Markdown.tsx
+var import_remark_gfm = __toESM(require("remark-gfm"));
+var import_remark_math = __toESM(require("remark-math"));
+var import_rehype_raw = __toESM(require("rehype-raw"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var defaultComponents = {
+  a(_a) {
+    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { target: "_blank", rel: "noopener noreferrer", children }));
+  },
+  // @ts-expect-error -- inline
+  code(_c) {
+    var _d = _c, { children, className, inline } = _d, props = __objRest(_d, ["children", "className", "inline"]);
+    if (Array.isArray(children) && children.length) {
+      if (children[0] == "\u258D") {
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "span",
+          {
+            style: {
+              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+              marginTop: "0.25rem"
+            },
+            children: "\u258D"
+          }
+        );
+      }
+      children[0] = (children == null ? void 0 : children[0]).replace("`\u258D`", "\u258D");
+    }
+    const match = /language-(\w+)/.exec(className || "");
+    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_runtime12.jsx)(
+        "code",
+        __spreadProps(__spreadValues({
+          className: `copilotKitMarkdownElement copilotKitInlineCode ${className || ""}`
+        }, props), {
+          children
+        })
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      CodeBlock,
+      __spreadValues({
+        language: match && match[1] || "",
+        value: String(children).replace(/\n$/, "")
+      }, props),
+      Math.random()
+    );
+  },
+  h1: (_e) => {
+    var _f = _e, { children } = _f, props = __objRest(_f, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h1", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h2: (_g) => {
+    var _h = _g, { children } = _h, props = __objRest(_h, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h3: (_i) => {
+    var _j = _i, { children } = _j, props = __objRest(_j, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h4: (_k) => {
+    var _l = _k, { children } = _l, props = __objRest(_l, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h4", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h5: (_m) => {
+    var _n = _m, { children } = _n, props = __objRest(_n, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h5", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h6: (_o) => {
+    var _p = _o, { children } = _p, props = __objRest(_p, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h6", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  p: (_q) => {
+    var _r = _q, { children } = _r, props = __objRest(_r, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  pre: (_s) => {
+    var _t = _s, { children } = _t, props = __objRest(_t, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("pre", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  blockquote: (_u) => {
+    var _v = _u, { children } = _v, props = __objRest(_v, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("blockquote", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  ul: (_w) => {
+    var _x = _w, { children } = _x, props = __objRest(_x, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  li: (_y) => {
+    var _z = _y, { children } = _z, props = __objRest(_z, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  }
+};
+var MemoizedReactMarkdown = (0, import_react7.memo)(
+  import_react_markdown.default,
+  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.components === nextProps.components
+);
+var Markdown = ({ content, components }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    MemoizedReactMarkdown,
+    {
+      components: __spreadValues(__spreadValues({}, defaultComponents), components),
+      remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
+      rehypePlugins: [import_rehype_raw.default],
+      children: content
+    }
+  ) });
+};
+
+// src/components/chat/messages/AssistantMessage.tsx
+var import_react8 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var AssistantMessage = (props) => {
+  var _a;
+  const { icons, labels } = useChatContext();
+  const {
+    message,
+    isLoading,
+    onRegenerate,
+    onCopy,
+    onThumbsUp,
+    onThumbsDown,
+    isCurrentMessage,
+    markdownTagRenderers
+  } = props;
+  const [copied, setCopied] = (0, import_react8.useState)(false);
+  const handleCopy = () => {
+    const content2 = (message == null ? void 0 : message.content) || "";
+    if (content2 && onCopy) {
+      navigator.clipboard.writeText(content2);
+      setCopied(true);
+      onCopy(content2);
+      setTimeout(() => setCopied(false), 2e3);
+    } else if (content2) {
+      navigator.clipboard.writeText(content2);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  const handleRegenerate = () => {
+    if (onRegenerate)
+      onRegenerate();
+  };
+  const handleThumbsUp = () => {
+    if (onThumbsUp && message)
+      onThumbsUp(message);
+  };
+  const handleThumbsDown = () => {
+    if (onThumbsDown && message)
+      onThumbsDown(message);
+  };
+  const LoadingIcon = () => /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    content && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
+      content && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Markdown, { content, components: markdownTagRenderers }),
+      content && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        "div",
+        {
+          className: `copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                className: "copilotKitMessageControlButton",
+                onClick: handleRegenerate,
+                "aria-label": labels.regenerateResponse,
+                title: labels.regenerateResponse,
+                children: icons.regenerateIcon
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                className: "copilotKitMessageControlButton",
+                onClick: handleCopy,
+                "aria-label": labels.copyToClipboard,
+                title: labels.copyToClipboard,
+                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { fontSize: "10px", fontWeight: "bold" }, children: "\u2713" }) : icons.copyIcon
+              }
+            ),
+            onThumbsUp && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                className: "copilotKitMessageControlButton",
+                onClick: handleThumbsUp,
+                "aria-label": labels.thumbsUp,
+                title: labels.thumbsUp,
+                children: icons.thumbsUpIcon
+              }
+            ),
+            onThumbsDown && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                className: "copilotKitMessageControlButton",
+                onClick: handleThumbsDown,
+                "aria-label": labels.thumbsDown,
+                title: labels.thumbsDown,
+                children: icons.thumbsDownIcon
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent }),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LoadingIcon, {})
+  ] });
+};
+
+// src/components/chat/messages/ImageRenderer.tsx
+var import_react9 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ImageRenderer = ({ image, content, className = "" }) => {
+  const [imageError, setImageError] = (0, import_react9.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_runtime14.jsxs)("div", { className: `copilotKitImageRendering copilotKitImageRenderingError ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "copilotKitImageRenderingErrorMessage", children: "Failed to load image" }),
+      content && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "copilotKitImageRenderingContent", children: content })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `copilotKitImageRendering ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "img",
+      {
+        src: imageSrc,
+        alt: altText,
+        className: "copilotKitImageRenderingImage",
+        onError: handleImageError
+      }
+    ),
+    content && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "copilotKitImageRenderingContent", children: content })
+  ] });
+};
+
+// src/components/chat/messages/RenderMessage.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function RenderMessage(_a) {
+  var _b = _a, {
+    UserMessage: UserMessage2 = UserMessage,
+    AssistantMessage: AssistantMessage2 = AssistantMessage,
+    ImageRenderer: ImageRenderer2 = ImageRenderer
+  } = _b, props = __objRest(_b, [
+    "UserMessage",
+    "AssistantMessage",
+    "ImageRenderer"
+  ]);
+  var _a2;
+  const {
+    message,
+    inProgress,
+    index,
+    isCurrentMessage,
+    onRegenerate,
+    onCopy,
+    onThumbsUp,
+    onThumbsDown,
+    markdownTagRenderers
+  } = props;
+  switch (message.role) {
+    case "user":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        UserMessage2,
+        {
+          rawData: message,
+          "data-message-role": "user",
+          message,
+          ImageRenderer: ImageRenderer2
+        },
+        index
+      );
+    case "assistant":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        AssistantMessage2,
+        {
+          "data-message-role": "assistant",
+          subComponent: (_a2 = message.generativeUI) == null ? void 0 : _a2.call(message),
+          rawData: message,
+          message,
+          isLoading: inProgress && isCurrentMessage && !message.content,
+          isGenerating: inProgress && isCurrentMessage && !!message.content,
+          isCurrentMessage,
+          onRegenerate: () => onRegenerate == null ? void 0 : onRegenerate(message.id),
+          onCopy,
+          onThumbsUp,
+          onThumbsDown,
+          markdownTagRenderers,
+          ImageRenderer: ImageRenderer2
+        },
+        index
+      );
+  }
+}
+
+// src/components/chat/messages/LegacyRenderMessage.tsx
+var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var LegacyRenderMessage = ({
+  message,
+  inProgress,
+  index,
+  isCurrentMessage,
+  actionResult,
+  AssistantMessage: AssistantMessage2,
+  UserMessage: UserMessage2,
+  ImageRenderer: ImageRenderer2,
+  onRegenerate,
+  onCopy,
+  onThumbsUp,
+  onThumbsDown,
+  markdownTagRenderers,
+  legacyProps
+}) => {
+  var _a;
+  const {
+    RenderTextMessage,
+    RenderActionExecutionMessage,
+    RenderAgentStateMessage,
+    RenderResultMessage,
+    RenderImageMessage
+  } = legacyProps;
+  const deprecatedMessage = (_a = (0, import_runtime_client_gql.aguiToGQL)(message)[0]) != null ? _a : void 0;
+  if (deprecatedMessage.isTextMessage() && RenderTextMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RenderTextMessage,
+      {
+        message,
+        inProgress,
+        index,
+        isCurrentMessage,
+        AssistantMessage: AssistantMessage2,
+        UserMessage: UserMessage2,
+        onRegenerate,
+        onCopy,
+        onThumbsUp,
+        onThumbsDown,
+        markdownTagRenderers
+      }
+    );
+  }
+  if (deprecatedMessage.isActionExecutionMessage() && RenderActionExecutionMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RenderActionExecutionMessage,
+      {
+        message,
+        inProgress,
+        index,
+        isCurrentMessage,
+        actionResult,
+        AssistantMessage: AssistantMessage2,
+        UserMessage: UserMessage2
+      }
+    );
+  }
+  if (deprecatedMessage.isAgentStateMessage() && RenderAgentStateMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RenderAgentStateMessage,
+      {
+        message,
+        inProgress,
+        index,
+        isCurrentMessage,
+        AssistantMessage: AssistantMessage2,
+        UserMessage: UserMessage2
+      }
+    );
+  }
+  if (deprecatedMessage.isResultMessage() && RenderResultMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RenderResultMessage,
+      {
+        message,
+        inProgress,
+        index,
+        isCurrentMessage,
+        AssistantMessage: AssistantMessage2,
+        UserMessage: UserMessage2
+      }
+    );
+  }
+  if (deprecatedMessage.isImageMessage() && RenderImageMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RenderImageMessage,
+      {
+        message,
+        inProgress,
+        index,
+        isCurrentMessage,
+        AssistantMessage: AssistantMessage2,
+        UserMessage: UserMessage2
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    RenderMessage,
+    {
+      message,
+      inProgress,
+      index,
+      isCurrentMessage,
+      AssistantMessage: AssistantMessage2,
+      UserMessage: UserMessage2,
+      ImageRenderer: ImageRenderer2,
+      onRegenerate,
+      onCopy,
+      onThumbsUp,
+      onThumbsDown,
+      markdownTagRenderers
+    }
+  );
+};
+
+// src/components/chat/Messages.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Messages = ({
+  inProgress,
+  children,
+  RenderMessage: RenderMessage2,
+  AssistantMessage: AssistantMessage2,
+  UserMessage: UserMessage2,
+  ImageRenderer: ImageRenderer2,
+  onRegenerate,
+  onCopy,
+  onThumbsUp,
+  onThumbsDown,
+  markdownTagRenderers,
+  // Legacy props
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+  RenderImageMessage
+}) => {
+  const { labels } = useChatContext();
+  const { messages: visibleMessages, interrupt } = (0, import_react_core5.useCopilotChatInternal)();
+  const initialMessages = (0, import_react10.useMemo)(() => makeInitialMessages(labels.initial), [labels.initial]);
+  const messages = [...initialMessages, ...visibleMessages];
+  const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
+  const hasLegacyProps = !!(RenderTextMessage || RenderActionExecutionMessage || RenderAgentStateMessage || RenderResultMessage || RenderImageMessage);
+  (0, import_react10.useEffect)(() => {
+    if (hasLegacyProps) {
+      console.warn(
+        "[CopilotKit] Legacy message render props (RenderTextMessage, RenderActionExecutionMessage, etc.) are deprecated. Please use the unified 'RenderMessage' prop instead. See migration guide: https://docs.copilotkit.ai/migration/render-message"
+      );
+    }
+  }, [hasLegacyProps]);
+  const legacyProps = (0, import_react10.useMemo)(
+    () => ({
+      RenderTextMessage,
+      RenderActionExecutionMessage,
+      RenderAgentStateMessage,
+      RenderResultMessage,
+      RenderImageMessage
+    }),
+    [
+      RenderTextMessage,
+      RenderActionExecutionMessage,
+      RenderAgentStateMessage,
+      RenderResultMessage,
+      RenderImageMessage
+    ]
+  );
+  const MessageRenderer = hasLegacyProps ? (props) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LegacyRenderMessage, __spreadProps(__spreadValues({}, props), { legacyProps })) : RenderMessage2;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "copilotKitMessages", ref: messagesContainerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "copilotKitMessagesContainer", children: [
+      messages.map((message, index) => {
+        const isCurrentMessage = index === messages.length - 1;
+        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          MessageRenderer,
+          {
+            message,
+            inProgress,
+            index,
+            isCurrentMessage,
+            AssistantMessage: AssistantMessage2,
+            UserMessage: UserMessage2,
+            ImageRenderer: ImageRenderer2,
+            onRegenerate,
+            onCopy,
+            onThumbsUp,
+            onThumbsDown,
+            markdownTagRenderers
+          },
+          index
+        );
+      }),
+      interrupt
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("footer", { className: "copilotKitMessagesFooter", ref: messagesEndRef, children })
+  ] });
+};
+function makeInitialMessages(initial) {
+  if (!initial)
+    return [];
+  if (Array.isArray(initial)) {
+    return initial.map((message) => {
+      return {
+        id: message,
+        role: "assistant",
+        content: message
+      };
+    });
+  }
+  return [
+    {
+      id: initial,
+      role: "assistant",
+      content: initial
+    }
+  ];
+}
+function useScrollToBottom(messages) {
+  const messagesEndRef = (0, import_react10.useRef)(null);
+  const messagesContainerRef = (0, import_react10.useRef)(null);
+  const isProgrammaticScrollRef = (0, import_react10.useRef)(false);
+  const isUserScrollUpRef = (0, import_react10.useRef)(false);
+  const scrollToBottom = () => {
+    if (messagesContainerRef.current && messagesEndRef.current) {
+      isProgrammaticScrollRef.current = true;
+      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+    }
+  };
+  const handleScroll = () => {
+    if (isProgrammaticScrollRef.current) {
+      isProgrammaticScrollRef.current = false;
+      return;
+    }
+    if (messagesContainerRef.current) {
+      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
+      isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;
+    }
+  };
+  (0, import_react10.useEffect)(() => {
+    const container = messagesContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", handleScroll);
+    }
+    return () => {
+      if (container) {
+        container.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, []);
+  (0, import_react10.useEffect)(() => {
+    const container = messagesContainerRef.current;
+    if (!container) {
+      return;
+    }
+    const mutationObserver = new MutationObserver(() => {
+      if (!isUserScrollUpRef.current) {
+        scrollToBottom();
+      }
+    });
+    mutationObserver.observe(container, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, []);
+  (0, import_react10.useEffect)(() => {
+    isUserScrollUpRef.current = false;
+    scrollToBottom();
+  }, [messages.filter((m) => m.role === "user").length]);
+  return { messagesEndRef, messagesContainerRef };
+}
+
+// src/components/chat/Input.tsx
+var import_react13 = require("react");
+
+// src/components/chat/Textarea.tsx
+var import_react11 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var AutoResizingTextarea = (0, import_react11.forwardRef)(
+  ({
+    maxRows = 1,
+    placeholder,
+    value,
+    onChange,
+    onKeyDown,
+    onCompositionStart,
+    onCompositionEnd,
+    autoFocus
+  }, ref) => {
+    const internalTextareaRef = (0, import_react11.useRef)(null);
+    const [maxHeight, setMaxHeight] = (0, import_react11.useState)(0);
+    (0, import_react11.useImperativeHandle)(ref, () => internalTextareaRef.current);
+    (0, import_react11.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_react11.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_runtime18.jsx)(
+      "textarea",
+      {
+        ref: internalTextareaRef,
+        value,
+        onChange,
+        onKeyDown,
+        onCompositionStart,
+        onCompositionEnd,
+        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_core6 = require("@copilotkit/react-core");
+var import_runtime_client_gql2 = require("@copilotkit/runtime-client-gql");
+var import_react12 = 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_react12.useState)("idle");
+  const mediaStreamRef = (0, import_react12.useRef)(null);
+  const audioContextRef = (0, import_react12.useRef)(null);
+  const mediaRecorderRef = (0, import_react12.useRef)(null);
+  const recordedChunks = (0, import_react12.useRef)([]);
+  const generalContext = (0, import_react_core6.useCopilotContext)();
+  const messagesContext = (0, import_react_core6.useCopilotMessagesContext)();
+  const context = __spreadValues(__spreadValues({}, generalContext), messagesContext);
+  const [startReadingFromMessageId, setStartReadingFromMessageId] = (0, import_react12.useState)(null);
+  (0, import_react12.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);
+          })
         );
       }
-      children[0] = (children == null ? void 0 : children[0]).replace("`\u258D`", "\u258D");
     }
-    const match = /language-(\w+)/.exec(className || "");
-    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 () => {
+      stopRecording(mediaRecorderRef);
+    };
+  }, [pushToTalkState]);
+  (0, import_react12.useEffect)(() => {
+    if (inProgress === false && startReadingFromMessageId) {
+      const lastMessageIndex = context.messages.findIndex(
+        (message) => message.id === startReadingFromMessageId
       );
+      const aguiMessages = (0, import_runtime_client_gql2.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);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      CodeBlock,
-      __spreadValues({
-        language: match && match[1] || "",
-        value: String(children).replace(/\n$/, "")
-      }, props),
-      Math.random()
-    );
-  },
-  h1: (_e) => {
-    var _f = _e, { children } = _f, props = __objRest(_f, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
-  },
-  h2: (_g) => {
-    var _h = _g, { children } = _h, props = __objRest(_h, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
-  },
-  h3: (_i) => {
-    var _j = _i, { children } = _j, props = __objRest(_j, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
-  },
-  h4: (_k) => {
-    var _l = _k, { children } = _l, props = __objRest(_l, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h4", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
-  },
-  h5: (_m) => {
-    var _n = _m, { children } = _n, props = __objRest(_n, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h5", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
-  },
-  h6: (_o) => {
-    var _p = _o, { children } = _p, props = __objRest(_p, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h6", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
-  },
-  p: (_q) => {
-    var _r = _q, { children } = _r, props = __objRest(_r, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
-  },
-  pre: (_s) => {
-    var _t = _s, { children } = _t, props = __objRest(_t, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("pre", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
-  },
-  blockquote: (_u) => {
-    var _v = _u, { children } = _v, props = __objRest(_v, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("blockquote", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
-  },
-  ul: (_w) => {
-    var _x = _w, { children } = _x, props = __objRest(_x, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
-  },
-  li: (_y) => {
-    var _z = _y, { children } = _z, props = __objRest(_z, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
-  }
+  }, [startReadingFromMessageId, inProgress]);
+  return { pushToTalkState, setPushToTalkState };
 };
-var MemoizedReactMarkdown = (0, import_react11.memo)(
-  import_react_markdown.default,
-  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.components === nextProps.components
-);
-var Markdown = ({ content, components }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    MemoizedReactMarkdown,
-    {
-      components: __spreadValues(__spreadValues({}, defaultComponents), components),
-      remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
-      rehypePlugins: [import_rehype_raw.default],
-      children: content
-    }
-  ) });
+
+// src/components/chat/Input.tsx
+var import_react_core7 = require("@copilotkit/react-core");
+
+// src/hooks/use-dark-mode.ts
+var useDarkMode = () => {
+  if (typeof window === "undefined")
+    return false;
+  return document.documentElement.classList.contains("dark") || document.body.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark" || document.body.getAttribute("data-theme") === "dark" || window.matchMedia("(prefers-color-scheme: dark)").matches;
 };
 
-// src/components/chat/messages/AssistantMessage.tsx
-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,
-    onRegenerate,
-    onCopy,
-    onThumbsUp,
-    onThumbsDown,
-    isCurrentMessage,
-    markdownTagRenderers
-  } = props;
-  const [copied, setCopied] = (0, import_react12.useState)(false);
-  const handleCopy = () => {
-    const content2 = (message == null ? void 0 : message.content) || "";
-    if (content2 && onCopy) {
-      navigator.clipboard.writeText(content2);
-      setCopied(true);
-      onCopy(content2);
-      setTimeout(() => setCopied(false), 2e3);
-    } else if (content2) {
-      navigator.clipboard.writeText(content2);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    }
-  };
-  const handleRegenerate = () => {
-    if (onRegenerate)
-      onRegenerate();
+// src/components/chat/PoweredByTag.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function PoweredByTag({ showPoweredBy = true }) {
+  const isDark = useDarkMode();
+  if (!showPoweredBy) {
+    return null;
+  }
+  const poweredByStyle = {
+    visibility: "visible",
+    display: "block",
+    position: "static",
+    textAlign: "center",
+    fontSize: "12px",
+    padding: "3px 0",
+    color: isDark ? "rgb(69, 69, 69)" : "rgb(214, 214, 214)"
   };
-  const handleThumbsUp = () => {
-    if (onThumbsUp && message)
-      onThumbsUp(message);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "poweredBy", style: poweredByStyle, children: "Powered by CopilotKit" }) });
+}
+
+// src/components/chat/Input.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var MAX_NEWLINES = 6;
+var Input = ({
+  inProgress,
+  onSend,
+  isVisible = false,
+  onStop,
+  onUpload,
+  hideStopButton = false
+}) => {
+  var _a, _b;
+  const context = useChatContext();
+  const copilotContext = (0, import_react_core7.useCopilotContext)();
+  const showPoweredBy = !((_a = copilotContext.copilotApiConfig) == null ? void 0 : _a.publicApiKey);
+  const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
+  const textareaRef = (0, import_react13.useRef)(null);
+  const [isComposing, setIsComposing] = (0, import_react13.useState)(false);
+  const handleDivClick = (event) => {
+    var _a2;
+    const target = event.target;
+    if (target.closest("button"))
+      return;
+    if (target.tagName === "TEXTAREA")
+      return;
+    (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
   };
-  const handleThumbsDown = () => {
-    if (onThumbsDown && message)
-      onThumbsDown(message);
+  const [text, setText] = (0, import_react13.useState)("");
+  const send = () => {
+    var _a2;
+    if (inProgress)
+      return;
+    onSend(text);
+    setText("");
+    (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
   };
-  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: [
-    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",
+  const { pushToTalkState, setPushToTalkState } = usePushToTalk({
+    sendFunction: onSend,
+    inProgress
+  });
+  const isInProgress = inProgress || pushToTalkState === "transcribing";
+  const buttonIcon = isInProgress && !hideStopButton ? context.icons.stopIcon : context.icons.sendIcon;
+  const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
+  const canSend = (0, import_react13.useMemo)(() => {
+    var _a2;
+    const interruptEvent = (_a2 = copilotContext.langGraphInterruptAction) == null ? void 0 : _a2.event;
+    const interruptInProgress = (interruptEvent == null ? void 0 : interruptEvent.name) === "LangGraphInterruptEvent" && !(interruptEvent == null ? void 0 : interruptEvent.response);
+    return !isInProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interruptInProgress;
+  }, [(_b = copilotContext.langGraphInterruptAction) == null ? void 0 : _b.event, isInProgress, text, pushToTalkState]);
+  const canStop = (0, import_react13.useMemo)(() => {
+    return isInProgress && !hideStopButton;
+  }, [isInProgress, hideStopButton]);
+  const sendDisabled = !canSend && !canStop;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `copilotKitInputContainer ${showPoweredBy ? "poweredByContainer" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        Textarea_default,
         {
-          className: `copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "button",
-              {
-                className: "copilotKitMessageControlButton",
-                onClick: handleRegenerate,
-                "aria-label": labels.regenerateResponse,
-                title: labels.regenerateResponse,
-                children: icons.regenerateIcon
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "button",
-              {
-                className: "copilotKitMessageControlButton",
-                onClick: handleCopy,
-                "aria-label": labels.copyToClipboard,
-                title: labels.copyToClipboard,
-                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { fontSize: "10px", fontWeight: "bold" }, children: "\u2713" }) : icons.copyIcon
-              }
-            ),
-            onThumbsUp && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "button",
-              {
-                className: "copilotKitMessageControlButton",
-                onClick: handleThumbsUp,
-                "aria-label": labels.thumbsUp,
-                title: labels.thumbsUp,
-                children: icons.thumbsUpIcon
-              }
-            ),
-            onThumbsDown && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              "button",
-              {
-                className: "copilotKitMessageControlButton",
-                onClick: handleThumbsDown,
-                "aria-label": labels.thumbsDown,
-                title: labels.thumbsDown,
-                children: icons.thumbsDownIcon
+          ref: textareaRef,
+          placeholder: context.labels.placeholder,
+          autoFocus: false,
+          maxRows: MAX_NEWLINES,
+          value: text,
+          onChange: (event) => setText(event.target.value),
+          onCompositionStart: () => setIsComposing(true),
+          onCompositionEnd: () => setIsComposing(false),
+          onKeyDown: (event) => {
+            if (event.key === "Enter" && !event.shiftKey && !isComposing) {
+              event.preventDefault();
+              if (canSend) {
+                send();
               }
-            )
-          ]
+            }
+          }
         }
-      )
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "copilotKitInputControls", children: [
+        onUpload && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { onClick: onUpload, className: "copilotKitInputControlButton", children: context.icons.uploadIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { flexGrow: 1 } }),
+        showPushToTalk && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "button",
+          {
+            onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
+            className: pushToTalkState === "recording" ? "copilotKitInputControlButton copilotKitPushToTalkRecording" : "copilotKitInputControlButton",
+            children: context.icons.pushToTalkIcon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "button",
+          {
+            disabled: sendDisabled,
+            onClick: isInProgress && !hideStopButton ? onStop : send,
+            "data-copilotkit-in-progress": inProgress,
+            "data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
+            className: "copilotKitInputControlButton",
+            children: buttonIcon
+          }
+        )
+      ] })
     ] }),
-    /* @__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/ImageRenderer.tsx
-var import_react13 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-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 })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PoweredByTag, { showPoweredBy })
   ] });
 };
 
-// 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,
-    ImageRenderer: ImageRenderer2 = ImageRenderer
-  } = _b, props = __objRest(_b, [
-    "UserMessage",
-    "AssistantMessage",
-    "ImageRenderer"
-  ]);
-  const {
-    message,
-    inProgress,
-    index,
-    isCurrentMessage,
-    onRegenerate,
-    onCopy,
-    onThumbsUp,
-    onThumbsDown,
-    markdownTagRenderers
-  } = props;
-  switch (message.role) {
-    case "user":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        UserMessage2,
-        {
-          "data-message-role": "user",
-          message,
-          ImageRenderer: ImageRenderer2
-        },
-        index
-      );
-    case "assistant":
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        AssistantMessage2,
-        {
-          "data-message-role": "assistant",
-          message,
-          isLoading: inProgress && isCurrentMessage && !message.content,
-          isGenerating: inProgress && isCurrentMessage && !!message.content,
-          isCurrentMessage,
-          onRegenerate: () => onRegenerate == null ? void 0 : onRegenerate(message.id),
-          onCopy,
-          onThumbsUp,
-          onThumbsDown,
-          markdownTagRenderers,
-          ImageRenderer: ImageRenderer2
-        },
-        index
-      );
-  }
-}
-
 // src/components/chat/Chat.tsx
 var import_react14 = __toESM(require("react"));
-var import_react_core8 = require("@copilotkit/react-core");
-var import_shared3 = require("@copilotkit/shared");
 var import_react_core9 = require("@copilotkit/react-core");
+var import_shared3 = require("@copilotkit/shared");
+var import_shared4 = require("@copilotkit/shared");
+var import_react_core10 = require("@copilotkit/react-core");
 
 // src/components/chat/ImageUploadQueue.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var ImageUploadQueue = ({
   images,
   onRemoveImage,
@@ -2179,7 +2335,7 @@ var ImageUploadQueue = ({
 }) => {
   if (images.length === 0)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       className: `copilotKitImageUploadQueue ${className}`,
@@ -2190,7 +2346,7 @@ var ImageUploadQueue = ({
         margin: "8px",
         padding: "8px"
       },
-      children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         "div",
         {
           className: "copilotKitImageUploadQueueItem",
@@ -2203,7 +2359,7 @@ var ImageUploadQueue = ({
             overflow: "hidden"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "img",
               {
                 src: `data:${image.contentType};base64,${image.bytes}`,
@@ -2215,7 +2371,7 @@ var ImageUploadQueue = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 onClick: () => onRemoveImage(index),
@@ -2249,13 +2405,13 @@ var ImageUploadQueue = ({
 };
 
 // src/components/chat/Suggestion.tsx
-var import_react_core7 = require("@copilotkit/react-core");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react_core8 = require("@copilotkit/react-core");
+var import_jsx_runtime22 = 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)(
+  const { isLoading } = (0, import_react_core8.useCopilotChatInternal)();
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "button",
     {
       disabled: partial || isLoading,
@@ -2265,15 +2421,15 @@ function Suggestion({ title, onClick, partial, className }) {
       },
       className: className || (partial ? "suggestion loading" : "suggestion"),
       "data-test-id": "suggestion",
-      children: partial ? SmallSpinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: title })
+      children: partial ? SmallSpinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: title })
     }
   );
 }
 
 // src/components/chat/Suggestions.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Suggestions({ suggestions, onSuggestionClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "suggestions", children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "suggestions", children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     Suggestion,
     {
       title: suggestion.title,
@@ -2287,7 +2443,7 @@ function Suggestions({ suggestions, onSuggestionClick }) {
 }
 
 // src/components/chat/Chat.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function CopilotChat({
   instructions,
   suggestions = "auto",
@@ -2313,11 +2469,83 @@ function CopilotChat({
   ImageRenderer: ImageRenderer2 = ImageRenderer,
   imageUploadsEnabled,
   inputFileAccept = "image/*",
-  hideStopButton
+  hideStopButton,
+  observabilityHooks,
+  renderError,
+  // Legacy props - deprecated
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+  RenderImageMessage
 }) {
-  const { additionalInstructions, setChatInstructions } = (0, import_react_core8.useCopilotContext)();
+  const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError } = (0, import_react_core9.useCopilotContext)();
+  const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
   const [selectedImages, setSelectedImages] = (0, import_react14.useState)([]);
+  const [chatError, setChatError] = (0, import_react14.useState)(null);
   const fileInputRef = (0, import_react14.useRef)(null);
+  const triggerObservabilityHook = (0, import_react14.useCallback)(
+    (hookName, ...args) => {
+      if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
+        observabilityHooks[hookName](...args);
+      }
+      if ((observabilityHooks == null ? void 0 : observabilityHooks[hookName]) && !publicApiKey) {
+        setBannerError(
+          new import_shared3.CopilotKitError({
+            message: "observabilityHooks requires a publicApiKey to function.",
+            code: import_shared3.CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: import_shared3.Severity.CRITICAL,
+            visibility: import_shared3.ErrorVisibility.BANNER
+          })
+        );
+        import_shared3.styledConsole.publicApiKeyRequired("observabilityHooks");
+      }
+    },
+    [publicApiKey, observabilityHooks, setBannerError]
+  );
+  const triggerChatError = (0, import_react14.useCallback)(
+    (error, operation, originalError) => {
+      const errorMessage = (error == null ? void 0 : error.message) || (error == null ? void 0 : error.toString()) || "An error occurred";
+      setChatError({
+        message: errorMessage,
+        operation,
+        timestamp: Date.now()
+      });
+      if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks.onError)) {
+        const errorEvent = {
+          type: "error",
+          timestamp: Date.now(),
+          context: {
+            source: "ui",
+            request: {
+              operation,
+              url: chatApiEndpoint,
+              startTime: Date.now()
+            },
+            technical: {
+              environment: "browser",
+              userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
+              stackTrace: originalError instanceof Error ? originalError.stack : void 0
+            }
+          },
+          error
+        };
+        observabilityHooks.onError(errorEvent);
+      }
+      if ((observabilityHooks == null ? void 0 : observabilityHooks.onError) && !publicApiKey) {
+        setBannerError(
+          new import_shared3.CopilotKitError({
+            message: "observabilityHooks.onError requires a publicApiKey to function.",
+            code: import_shared3.CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: import_shared3.Severity.CRITICAL,
+            visibility: import_shared3.ErrorVisibility.BANNER
+          })
+        );
+        import_shared3.styledConsole.publicApiKeyRequired("observabilityHooks.onError");
+      }
+    },
+    [publicApiKey, chatApiEndpoint, observabilityHooks, setBannerError]
+  );
   (0, import_react14.useEffect)(() => {
     if (!imageUploadsEnabled)
       return;
@@ -2357,12 +2585,13 @@ function CopilotChat({
         const loadedImages = (yield Promise.all(imagePromises)).filter((img) => img !== null);
         setSelectedImages((prev) => [...prev, ...loadedImages]);
       } catch (error) {
+        triggerChatError(error, "processClipboardImages", error);
         console.error("Error processing pasted images:", error);
       }
     });
     document.addEventListener("paste", handlePaste);
     return () => document.removeEventListener("paste", handlePaste);
-  }, [imageUploadsEnabled]);
+  }, [imageUploadsEnabled, triggerChatError]);
   (0, import_react14.useEffect)(() => {
     if (!(additionalInstructions == null ? void 0 : additionalInstructions.length)) {
       setChatInstructions(instructions || "");
@@ -2376,7 +2605,7 @@ function CopilotChat({
     setChatInstructions(combinedAdditionalInstructions.join("\n") || "");
   }, [instructions, additionalInstructions]);
   const {
-    visibleMessages,
+    messages,
     isLoading,
     sendMessage,
     stopGeneration,
@@ -2390,12 +2619,24 @@ function CopilotChat({
     onStopGeneration,
     onReloadMessages
   );
+  const prevIsLoading = (0, import_react14.useRef)(isLoading);
+  (0, import_react14.useEffect)(() => {
+    if (prevIsLoading.current !== isLoading) {
+      if (isLoading) {
+        triggerObservabilityHook("onChatStarted");
+      } else {
+        triggerObservabilityHook("onChatStopped");
+      }
+      prevIsLoading.current = isLoading;
+    }
+  }, [isLoading, triggerObservabilityHook]);
   const handleSendMessage = (text) => {
     const images = selectedImages;
     setSelectedImages([]);
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
+    triggerObservabilityHook("onMessageSent", text);
     return sendMessage(text, images);
   };
   const chatContext = import_react14.default.useContext(ChatContext);
@@ -2404,12 +2645,14 @@ function CopilotChat({
     if (onRegenerate) {
       onRegenerate(messageId);
     }
+    triggerObservabilityHook("onMessageRegenerated", messageId);
     reloadMessages(messageId);
   };
   const handleCopy = (message) => {
     if (onCopy) {
       onCopy(message);
     }
+    triggerObservabilityHook("onMessageCopied", message);
   };
   const handleImageUpload = (event) => __async(this, null, function* () {
     if (!event.target.files || event.target.files.length === 0) {
@@ -2439,28 +2682,52 @@ function CopilotChat({
       const loadedImages = yield Promise.all(fileReadPromises);
       setSelectedImages((prev) => [...prev, ...loadedImages]);
     } catch (error) {
+      triggerChatError(error, "processUploadedImages", error);
       console.error("Error reading files:", error);
     }
   });
   const removeSelectedImage = (index) => {
     setSelectedImages((prev) => prev.filter((_, i) => i !== index));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const handleThumbsUp = (message) => {
+    if (onThumbsUp) {
+      onThumbsUp(message);
+    }
+    triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsUp");
+  };
+  const handleThumbsDown = (message) => {
+    if (onThumbsDown) {
+      onThumbsDown(message);
+    }
+    triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsDown");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
+    chatError && renderError && renderError(__spreadProps(__spreadValues({}, chatError), {
+      onDismiss: () => setChatError(null),
+      onRetry: () => {
+        setChatError(null);
+      }
+    })),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Messages2,
       {
         AssistantMessage: AssistantMessage2,
         UserMessage: UserMessage2,
         RenderMessage: RenderMessage2,
-        messages: visibleMessages,
+        messages,
         inProgress: isLoading,
         onRegenerate: handleRegenerate,
         onCopy: handleCopy,
-        onThumbsUp,
-        onThumbsDown,
+        onThumbsUp: handleThumbsUp,
+        onThumbsDown: handleThumbsDown,
         markdownTagRenderers,
         ImageRenderer: ImageRenderer2,
-        children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        RenderTextMessage,
+        RenderActionExecutionMessage,
+        RenderAgentStateMessage,
+        RenderResultMessage,
+        RenderImageMessage,
+        children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           RenderSuggestionsList,
           {
             onSuggestionClick: handleSendMessage,
@@ -2469,9 +2736,9 @@ function CopilotChat({
         )
       }
     ),
-    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)(
+    imageUploadsEnabled && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ImageUploadQueue, { images: selectedImages, onRemoveImage: removeSelectedImage }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "input",
         {
           type: "file",
@@ -2483,7 +2750,7 @@ function CopilotChat({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Input2,
       {
         inProgress: isLoading,
@@ -2507,16 +2774,16 @@ function WrappedCopilotChat({
 }) {
   const chatContext = import_react14.default.useContext(ChatContext);
   if (!chatContext) {
-    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_runtime24.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `copilotKitChat ${className != null ? className : ""}`, children }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children });
 }
 var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onSubmitMessage, onStopGeneration, onReloadMessages) => {
   var _a;
   const {
-    visibleMessages,
-    appendMessage,
+    messages,
+    sendMessage,
     setMessages,
     reloadMessages: defaultReloadMessages,
     stopGeneration: defaultStopGeneration,
@@ -2527,11 +2794,11 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
     generateSuggestions,
     resetSuggestions: resetSuggestionsFromHook,
     isLoadingSuggestions
-  } = (0, import_react_core8.useCopilotChat)({
+  } = (0, import_react_core9.useCopilotChatInternal)({
     makeSystemMessage
   });
-  const generalContext = (0, import_react_core8.useCopilotContext)();
-  const messagesContext = (0, import_react_core8.useCopilotMessagesContext)();
+  const generalContext = (0, import_react_core9.useCopilotContext)();
+  const messagesContext = (0, import_react_core9.useCopilotMessagesContext)();
   const { actions } = generalContext;
   const [suggestionsFailed, setSuggestionsFailed] = (0, import_react14.useState)(false);
   const hasGeneratedInitialSuggestions = (0, import_react14.useRef)(false);
@@ -2562,12 +2829,12 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
     if (Object.keys(generalContext.chatSuggestionConfiguration).length === 0) {
       return;
     }
-    if (visibleMessages.length === 0 && !hasGeneratedInitialSuggestions.current) {
+    if (messages.length === 0 && !hasGeneratedInitialSuggestions.current) {
       hasGeneratedInitialSuggestions.current = true;
       generateSuggestionsWithErrorHandling("initial");
       return;
     }
-    if (visibleMessages.length > 0 && suggestions.length === 0) {
+    if (messages.length > 0 && suggestions.length === 0) {
       generateSuggestionsWithErrorHandling("post-message");
       return;
     }
@@ -2575,7 +2842,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
     chatSuggestions,
     isLoadingSuggestions,
     suggestionsFailed,
-    visibleMessages.length,
+    messages.length,
     isLoading,
     suggestions.length,
     Object.keys(generalContext.chatSuggestionConfiguration).join(","),
@@ -2605,7 +2872,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
   (0, import_react14.useEffect)(() => {
     onInProgress == null ? void 0 : onInProgress(isLoading);
   }, [onInProgress, isLoading]);
-  const sendMessage = (messageContent, imagesToUse) => __async(void 0, null, function* () {
+  const safelySendMessage = (messageContent, imagesToUse) => __async(void 0, null, function* () {
     const images = imagesToUse || [];
     if (chatSuggestions === "auto" || chatSuggestions === "manual") {
       setSuggestions([]);
@@ -2613,7 +2880,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
     let firstMessage = null;
     if (messageContent.trim().length > 0) {
       const textMessage = {
-        id: (0, import_shared3.randomId)(),
+        id: (0, import_shared4.randomId)(),
         role: "user",
         content: messageContent
       };
@@ -2624,7 +2891,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
           console.error("Error in onSubmitMessage:", error);
         }
       }
-      yield appendMessage(textMessage, {
+      yield sendMessage(textMessage, {
         followUp: images.length === 0,
         clearSuggestions: chatSuggestions === "auto" || chatSuggestions === "manual"
       });
@@ -2635,25 +2902,24 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
     if (images.length > 0) {
       for (let i = 0; i < images.length; i++) {
         const imageMessage = {
-          id: (0, import_shared3.randomId)(),
+          id: (0, import_shared4.randomId)(),
           role: "user",
           image: {
             format: images[i].contentType.replace("image/", ""),
             bytes: images[i].bytes
           }
         };
-        yield appendMessage(imageMessage, { followUp: i === images.length - 1 });
+        yield sendMessage(imageMessage, { followUp: i === images.length - 1 });
         if (!firstMessage) {
           firstMessage = imageMessage;
         }
       }
     }
     if (!firstMessage) {
-      return { role: "user", content: "", id: (0, import_shared3.randomId)() };
+      return { role: "user", content: "", id: (0, import_shared4.randomId)() };
     }
     return firstMessage;
   });
-  const messages = visibleMessages;
   const currentAgentName = (_a = generalContext.agentSession) == null ? void 0 : _a.agentName;
   const restartCurrentAgent = (hint) => __async(void 0, null, function* () {
     if (generalContext.agentSession) {
@@ -2674,18 +2940,18 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
   });
   const runCurrentAgent = (hint) => __async(void 0, null, function* () {
     if (generalContext.agentSession) {
-      yield (0, import_react_core9.runAgent)(
+      yield (0, import_react_core10.runAgent)(
         generalContext.agentSession.agentName,
         stableContext,
-        appendMessage,
-        runChatCompletion,
-        hint
+        messagesContext.messages,
+        sendMessage,
+        runChatCompletion
       );
     }
   });
   const stopCurrentAgent = () => {
     if (generalContext.agentSession) {
-      (0, import_react_core9.stopAgent)(generalContext.agentSession.agentName, stableContext);
+      (0, import_react_core10.stopAgent)(generalContext.agentSession.agentName, stableContext);
     }
   };
   const setCurrentAgentState = (state) => {
@@ -2735,10 +3001,9 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
   }
   return {
     messages,
-    visibleMessages,
     isLoading,
     suggestions,
-    sendMessage,
+    sendMessage: safelySendMessage,
     stopGeneration,
     reloadMessages,
     resetSuggestions,
@@ -2748,7 +3013,88 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
 };
 
 // src/components/chat/Modal.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react_core11 = require("@copilotkit/react-core");
+var import_shared5 = require("@copilotkit/shared");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var CopilotModalInner = (_a) => {
+  var _b = _a, {
+    observabilityHooks,
+    onSetOpen,
+    clickOutsideToClose,
+    hitEscapeToClose,
+    shortcut,
+    className,
+    children,
+    Window: Window2,
+    Button: Button2,
+    Header: Header2
+  } = _b, chatProps = __objRest(_b, [
+    "observabilityHooks",
+    "onSetOpen",
+    "clickOutsideToClose",
+    "hitEscapeToClose",
+    "shortcut",
+    "className",
+    "children",
+    "Window",
+    "Button",
+    "Header"
+  ]);
+  const { copilotApiConfig, setBannerError } = (0, import_react_core11.useCopilotContext)();
+  const { publicApiKey } = copilotApiConfig;
+  const triggerObservabilityHook = (0, import_react15.useCallback)(
+    (hookName, ...args) => {
+      if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
+        observabilityHooks[hookName](...args);
+      }
+      if ((observabilityHooks == null ? void 0 : observabilityHooks[hookName]) && !publicApiKey) {
+        setBannerError(
+          new import_shared5.CopilotKitError({
+            message: "observabilityHooks requires a publicApiKey to function.",
+            code: import_shared5.CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: import_shared5.Severity.CRITICAL,
+            visibility: import_shared5.ErrorVisibility.BANNER
+          })
+        );
+        import_shared5.styledConsole.publicApiKeyRequired("observabilityHooks");
+      }
+    },
+    [publicApiKey, observabilityHooks, setBannerError]
+  );
+  const { open } = useChatContext();
+  const prevOpen = (0, import_react15.useRef)(open);
+  (0, import_react15.useEffect)(() => {
+    if (prevOpen.current !== open) {
+      onSetOpen == null ? void 0 : onSetOpen(open);
+      if (open) {
+        triggerObservabilityHook("onChatExpanded");
+      } else {
+        triggerObservabilityHook("onChatMinimized");
+      }
+      prevOpen.current = open;
+    }
+  }, [open, onSetOpen, triggerObservabilityHook]);
+  const memoizedHeader = (0, import_react15.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Header2, {}), [Header2]);
+  const memoizedChildren = (0, import_react15.useMemo)(() => children, [children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    memoizedChildren,
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button2, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        Window2,
+        {
+          clickOutsideToClose,
+          shortcut,
+          hitEscapeToClose,
+          children: [
+            memoizedHeader,
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CopilotChat, __spreadProps(__spreadValues({}, chatProps), { observabilityHooks }))
+          ]
+        }
+      )
+    ] })
+  ] });
+};
 var CopilotModal = (_a) => {
   var _b = _a, {
     instructions,
@@ -2777,7 +3123,8 @@ var CopilotModal = (_a) => {
     onRegenerate,
     markdownTagRenderers,
     className,
-    children
+    children,
+    observabilityHooks
   } = _b, props = __objRest(_b, [
     "instructions",
     "defaultOpen",
@@ -2805,52 +3152,41 @@ var CopilotModal = (_a) => {
     "onRegenerate",
     "markdownTagRenderers",
     "className",
-    "children"
+    "children",
+    "observabilityHooks"
   ]);
   const [openState, setOpenState] = import_react15.default.useState(defaultOpen);
-  const setOpen = (open) => {
-    onSetOpen == null ? void 0 : onSetOpen(open);
-    setOpenState(open);
-  };
-  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_runtime24.jsxs)("div", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button2, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-        Window2,
-        {
-          clickOutsideToClose,
-          shortcut,
-          hitEscapeToClose,
-          children: [
-            memoizedHeader,
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-              CopilotChat,
-              __spreadProps(__spreadValues({}, props), {
-                instructions,
-                onSubmitMessage,
-                onStopGeneration,
-                onReloadMessages,
-                makeSystemMessage,
-                onInProgress,
-                Messages: Messages2,
-                Input: Input2,
-                AssistantMessage: AssistantMessage2,
-                UserMessage: UserMessage2,
-                onThumbsUp,
-                onThumbsDown,
-                onCopy,
-                onRegenerate,
-                markdownTagRenderers
-              })
-            )
-          ]
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChatContextProvider, { icons, labels, open: openState, setOpen: setOpenState, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    CopilotModalInner,
+    __spreadProps(__spreadValues({
+      observabilityHooks,
+      onSetOpen,
+      clickOutsideToClose: clickOutsideToClose != null ? clickOutsideToClose : true,
+      hitEscapeToClose: hitEscapeToClose != null ? hitEscapeToClose : true,
+      shortcut: shortcut != null ? shortcut : "/",
+      className,
+      Window: Window2,
+      Button: Button2,
+      Header: Header2,
+      instructions,
+      onSubmitMessage,
+      onStopGeneration,
+      onReloadMessages,
+      makeSystemMessage,
+      onInProgress,
+      Messages: Messages2,
+      Input: Input2,
+      AssistantMessage: AssistantMessage2,
+      UserMessage: UserMessage2,
+      onThumbsUp,
+      onThumbsDown,
+      onCopy,
+      onRegenerate,
+      markdownTagRenderers
+    }, props), {
+      children
+    })
+  ) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {