@copilotkit/react-ui 0.22.0 → 0.36.0-mme-pre.1

package/dist/components/chat/Chat.js

@@ -79,10 +79,10 @@ var __async = (__this, __arguments, generator) => {
 // src/components/chat/Chat.tsx
 var Chat_exports = {};
 __export(Chat_exports, {
-  CopilotChat: () => CopilotChat
+  CopilotChat: () => CopilotChat,
+  useCopilotChatLogic: () => useCopilotChatLogic
 });
 module.exports = __toCommonJS(Chat_exports);
-var import_react8 = __toESM(require("react"));
 
 // src/components/chat/ChatContext.tsx
 var import_react = __toESM(require("react"));
@@ -188,6 +188,40 @@ var SpinnerIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     ]
   }
 );
+var SmallSpinnerIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  {
+    style: {
+      animation: "copilotKitSpinAnimation 1s linear infinite"
+    },
+    width: "13",
+    height: "13",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "circle",
+        {
+          style: { opacity: 0.25 },
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          style: { opacity: 0.75 },
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }
+      )
+    ]
+  }
+);
 var ActivityIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
   "svg",
   {
@@ -273,6 +307,25 @@ var RegenerateIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.35 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05ZM216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32c-42.82 0-68.58 25.27-69.66 26.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.65 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8Z" })
   }
 );
+var PushToTalkIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    className: "w-6 h-6",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z"
+      }
+    )
+  }
+);
 
 // src/components/chat/ChatContext.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -296,190 +349,51 @@ var ChatContextProvider = ({
   open,
   setOpen
 }) => {
-  const context = (0, import_react.useMemo)(
-    () => ({
-      labels: __spreadValues(__spreadValues({}, {
-        initial: "",
-        title: "CopilotKit",
-        placeholder: "Type a message...",
-        thinking: "Thinking...",
-        error: "\u274C An error occurred. Please try again.",
-        stopGenerating: "Stop generating",
-        regenerateResponse: "Regenerate response"
-      }), labels),
-      icons: __spreadProps(__spreadValues({}, {
-        openIcon: OpenIcon,
-        closeIcon: CloseIcon,
-        headerCloseIcon: HeaderCloseIcon,
-        sendIcon: SendIcon,
-        activityIcon: ActivityIcon,
-        spinnerIcon: SpinnerIcon,
-        stopIcon: StopIcon,
-        regenerateIcon: RegenerateIcon
-      }), {
-        icons
-      }),
-      open,
-      setOpen
+  const context = {
+    labels: __spreadValues(__spreadValues({}, {
+      initial: "",
+      title: "CopilotKit",
+      placeholder: "Type a message...",
+      error: "\u274C An error occurred. Please try again.",
+      stopGenerating: "Stop generating",
+      regenerateResponse: "Regenerate response"
+    }), labels),
+    icons: __spreadProps(__spreadValues({}, {
+      openIcon: OpenIcon,
+      closeIcon: CloseIcon,
+      headerCloseIcon: HeaderCloseIcon,
+      sendIcon: SendIcon,
+      activityIcon: ActivityIcon,
+      spinnerIcon: SpinnerIcon,
+      stopIcon: StopIcon,
+      regenerateIcon: RegenerateIcon,
+      pushToTalkIcon: PushToTalkIcon
+    }), {
+      icons
     }),
-    [labels, icons, open, setOpen]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChatContext.Provider, { value: context, children });
-};
-
-// src/components/chat/Chat.tsx
-var import_react_core2 = require("@copilotkit/react-core");
-
-// src/components/chat/Window.tsx
-var import_react2 = __toESM(require("react"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Window = ({
-  open,
-  setOpen,
-  children,
-  clickOutsideToClose,
-  shortcut,
-  hitEscapeToClose
-}) => {
-  const windowRef = import_react2.default.useRef(null);
-  const handleClickOutside = (0, import_react2.useCallback)(
-    (event) => {
-      var _a;
-      if (!clickOutsideToClose) {
-        return;
-      }
-      const parentElement = (_a = windowRef.current) == null ? void 0 : _a.parentElement;
-      if (open && parentElement && !parentElement.contains(event.target)) {
-        setOpen(false);
-      }
-    },
-    [clickOutsideToClose, open, setOpen]
-  );
-  const handleKeyDown = (0, import_react2.useCallback)(
-    (event) => {
-      var _a;
-      const target = event.target;
-      const isInput = target.tagName === "INPUT" || target.tagName === "SELECT" || target.tagName === "TEXTAREA" || target.isContentEditable;
-      const isDescendantOfWrapper = (_a = windowRef.current) == null ? void 0 : _a.contains(target);
-      if (open && event.key === "Escape" && (!isInput || isDescendantOfWrapper) && hitEscapeToClose) {
-        setOpen(false);
-      } else if (event.key === shortcut && (isMacOS() && event.metaKey || !isMacOS() && event.ctrlKey) && (!isInput || isDescendantOfWrapper)) {
-        setOpen(!open);
-      }
-    },
-    [hitEscapeToClose, shortcut, open, setOpen]
-  );
-  const adjustForMobile = (0, import_react2.useCallback)(() => {
-    const copilotKitWindow = windowRef.current;
-    const vv = window.visualViewport;
-    if (!copilotKitWindow || !vv) {
-      return;
-    }
-    if (window.innerWidth < 640 && open) {
-      copilotKitWindow.style.height = `${vv.height}px`;
-      copilotKitWindow.style.left = `${vv.offsetLeft}px`;
-      copilotKitWindow.style.top = `${vv.offsetTop}px`;
-      document.body.style.position = "fixed";
-      document.body.style.width = "100%";
-      document.body.style.height = `${window.innerHeight}px`;
-      document.body.style.overflow = "hidden";
-      document.body.style.touchAction = "none";
-      document.body.addEventListener("touchmove", preventScroll, {
-        passive: false
-      });
-    } else {
-      copilotKitWindow.style.height = "";
-      copilotKitWindow.style.left = "";
-      copilotKitWindow.style.top = "";
-      document.body.style.position = "";
-      document.body.style.height = "";
-      document.body.style.width = "";
-      document.body.style.overflow = "";
-      document.body.style.top = "";
-      document.body.style.touchAction = "";
-      document.body.removeEventListener("touchmove", preventScroll);
-    }
-  }, [open]);
-  (0, import_react2.useEffect)(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleKeyDown);
-    if (window.visualViewport) {
-      window.visualViewport.addEventListener("resize", adjustForMobile);
-      adjustForMobile();
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleKeyDown);
-      if (window.visualViewport) {
-        window.visualViewport.removeEventListener("resize", adjustForMobile);
-      }
-    };
-  }, [adjustForMobile, handleClickOutside, handleKeyDown]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `copilotKitWindow${open ? " open" : ""}`, ref: windowRef, children });
-};
-var preventScroll = (event) => {
-  let targetElement = event.target;
-  const hasParentWithClass = (element, className) => {
-    while (element && element !== document.body) {
-      if (element.classList.contains(className)) {
-        return true;
-      }
-      element = element.parentElement;
-    }
-    return false;
+    open,
+    setOpen
   };
-  if (!hasParentWithClass(targetElement, "copilotKitMessages")) {
-    event.preventDefault();
-  }
-};
-function isMacOS() {
-  return /Mac|iMac|Macintosh/i.test(navigator.userAgent);
-}
-
-// src/components/chat/Button.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Button = ({ open, setOpen }) => {
-  const context = useChatContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { onClick: () => setOpen(!open), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "button",
-    {
-      className: `copilotKitButton ${open ? "open" : ""}`,
-      "aria-label": open ? "Close Chat" : "Open Chat",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "copilotKitButtonIcon copilotKitButtonIconOpen", children: context.icons.openIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "copilotKitButtonIcon copilotKitButtonIconClose", children: context.icons.closeIcon })
-      ]
-    }
-  ) });
-};
-
-// src/components/chat/Header.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Header = ({ setOpen }) => {
-  const context = useChatContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "copilotKitHeader", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: context.labels.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: () => setOpen(false), "aria-label": "Close", children: context.icons.headerCloseIcon })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChatContext.Provider, { value: context, children });
 };
 
 // src/components/chat/Messages.tsx
-var import_react5 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_nanoid = require("nanoid");
 var import_shared = require("@copilotkit/shared");
 
 // src/components/chat/Markdown.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_react_markdown = __toESM(require("react-markdown"));
 
 // src/components/chat/CodeBlock.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
 
 // src/hooks/use-copy-to-clipboard.tsx
-var React3 = __toESM(require("react"));
+var React2 = __toESM(require("react"));
 function useCopyToClipboard({ timeout = 2e3 }) {
-  const [isCopied, setIsCopied] = React3.useState(false);
+  const [isCopied, setIsCopied] = React2.useState(false);
   const copyToClipboard = (value) => {
     var _a;
     if (typeof window === "undefined" || !((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
@@ -499,7 +413,7 @@ function useCopyToClipboard({ timeout = 2e3 }) {
 }
 
 // src/components/chat/CodeBlock.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var programmingLanguages = {
   javascript: ".js",
   python: ".py",
@@ -534,7 +448,7 @@ var generateRandomString = (length, lowercase = false) => {
   }
   return lowercase ? result.toLowerCase() : result;
 };
-var CodeBlock = (0, import_react3.memo)(({ language, value }) => {
+var CodeBlock = (0, import_react2.memo)(({ language, value }) => {
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
   const downloadAsFile = () => {
     if (typeof window === "undefined") {
@@ -562,21 +476,21 @@ var CodeBlock = (0, import_react3.memo)(({ language, value }) => {
       return;
     copyToClipboard(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "copilotKitCodeBlock", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DownloadIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Download" })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitCodeBlock", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DownloadIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sr-only", children: "Download" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: [
-          isCopied ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CopyIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Copy code" })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: [
+          isCopied ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CopyIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sr-only", children: "Copy code" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_react_syntax_highlighter.Prism,
       {
         language,
@@ -879,21 +793,21 @@ var highlightStyle = {
 // src/components/chat/Markdown.tsx
 var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_remark_math = __toESM(require("remark-math"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var MemoizedReactMarkdown = (0, import_react4.memo)(
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var MemoizedReactMarkdown = (0, import_react3.memo)(
   import_react_markdown.default,
   (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
 );
 var Markdown = ({ content }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MemoizedReactMarkdown, { components, remarkPlugins: [import_remark_gfm.default, import_remark_math.default], children: content }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MemoizedReactMarkdown, { components, remarkPlugins: [import_remark_gfm.default, import_remark_math.default], children: content }) });
 };
 var components = {
   p({ children }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children });
   },
   a(_a) {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "a",
       __spreadProps(__spreadValues({
         style: { color: "blue", textDecoration: "underline" }
@@ -908,7 +822,7 @@ var components = {
     var _d = _c, { children, className, inline } = _d, props = __objRest(_d, ["children", "className", "inline"]);
     if (children.length) {
       if (children[0] == "\u258D") {
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "span",
           {
             style: {
@@ -923,9 +837,9 @@ var components = {
     }
     const match = /language-(\w+)/.exec(className || "");
     if (inline) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", __spreadProps(__spreadValues({ className }, props), { children }));
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("code", __spreadProps(__spreadValues({ className }, props), { children }));
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       CodeBlock,
       __spreadValues({
         language: match && match[1] || "",
@@ -938,11 +852,11 @@ var components = {
 
 // src/components/chat/Messages.tsx
 var import_react_core = require("@copilotkit/react-core");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Messages = ({ messages, inProgress }) => {
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Messages = ({ messages, inProgress, children }) => {
   const { chatComponentsCache } = (0, import_react_core.useCopilotContext)();
   const context = useChatContext();
-  const initialMessages = (0, import_react5.useMemo)(
+  const initialMessages = (0, import_react4.useMemo)(
     () => makeInitialMessages(context.labels.initial),
     [context.labels.initial]
   );
@@ -956,7 +870,7 @@ var Messages = ({ messages, inProgress }) => {
       }
     }
   }
-  const messagesEndRef = import_react5.default.useRef(null);
+  const messagesEndRef = import_react4.default.useRef(null);
   const scrollToBottom = () => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({
@@ -964,28 +878,28 @@ var Messages = ({ messages, inProgress }) => {
       });
     }
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     scrollToBottom();
   }, [messages]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "copilotKitMessages", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "copilotKitMessages", children: [
     messages.map((message, index) => {
       var _a, _b, _c;
       const isCurrentMessage = index === messages.length - 1;
       if (message.role === "user") {
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: message.content }, index);
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: message.content }, index);
       } else if (message.role == "assistant") {
         if (isCurrentMessage && inProgress && !message.content && !message.partialFunctionCall) {
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
         } else if (message.function_call || message.partialFunctionCall) {
           const functionCallName = ((_a = message.function_call) == null ? void 0 : _a.name) || ((_b = message.partialFunctionCall) == null ? void 0 : _b.name);
           if (chatComponentsCache.current !== null && chatComponentsCache.current[functionCallName]) {
             const render = chatComponentsCache.current[functionCallName];
             if (typeof render === "string") {
               if (isCurrentMessage && inProgress) {
-                return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
                   context.icons.spinnerIcon,
                   " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "inProgressLabel", children: render })
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inProgressLabel", children: render })
                 ] }, index);
               } else {
                 return null;
@@ -1007,25 +921,25 @@ var Messages = ({ messages, inProgress }) => {
                 return null;
               }
               if (typeof toRender === "string") {
-                return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
                   isCurrentMessage && inProgress && context.icons.spinnerIcon,
                   " ",
                   toRender
                 ] }, index);
               } else {
-                return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "copilotKitCustomAssistantMessage", children: toRender }, index);
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "copilotKitCustomAssistantMessage", children: toRender }, index);
               }
             }
           } else if ((!inProgress || !isCurrentMessage) && message.function_call) {
             return null;
           } else {
-            return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
           }
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Markdown, { content: message.content }) }, index);
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Markdown, { content: message.content }) }, index);
       }
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: messagesEndRef })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("footer", { ref: messagesEndRef, children })
   ] });
 };
 function makeInitialMessages(initial) {
@@ -1048,14 +962,14 @@ function makeInitialMessages(initial) {
 var import_react7 = require("react");
 
 // src/components/chat/Textarea.tsx
-var import_react6 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var AutoResizingTextarea = (0, import_react6.forwardRef)(
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AutoResizingTextarea = (0, import_react5.forwardRef)(
   ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {
-    const internalTextareaRef = (0, import_react6.useRef)(null);
-    const [maxHeight, setMaxHeight] = (0, import_react6.useState)(0);
-    (0, import_react6.useImperativeHandle)(ref, () => internalTextareaRef.current);
-    (0, import_react6.useEffect)(() => {
+    const internalTextareaRef = (0, import_react5.useRef)(null);
+    const [maxHeight, setMaxHeight] = (0, import_react5.useState)(0);
+    (0, import_react5.useImperativeHandle)(ref, () => internalTextareaRef.current);
+    (0, import_react5.useEffect)(() => {
       const calculateMaxHeight = () => {
         const textarea = internalTextareaRef.current;
         if (textarea) {
@@ -1069,14 +983,14 @@ var AutoResizingTextarea = (0, import_react6.forwardRef)(
       };
       calculateMaxHeight();
     }, [maxRows]);
-    (0, import_react6.useEffect)(() => {
+    (0, import_react5.useEffect)(() => {
       const textarea = internalTextareaRef.current;
       if (textarea) {
         textarea.style.height = "auto";
         textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
       }
     }, [value, maxHeight]);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "textarea",
       {
         ref: internalTextareaRef,
@@ -1085,7 +999,7 @@ var AutoResizingTextarea = (0, import_react6.forwardRef)(
         onKeyDown,
         placeholder,
         style: {
-          overflow: "hidden",
+          overflow: "auto",
           resize: "none",
           maxHeight: `${maxHeight}px`
         },
@@ -1096,10 +1010,113 @@ var AutoResizingTextarea = (0, import_react6.forwardRef)(
 );
 var Textarea_default = AutoResizingTextarea;
 
+// src/hooks/use-push-to-talk.tsx
+var import_react_core2 = require("@copilotkit/react-core");
+var import_react6 = require("react");
+var startRecording = (mediaStreamRef, mediaRecorderRef, audioContextRef, recordedChunks, onStop) => __async(void 0, null, function* () {
+  if (!mediaStreamRef.current || !audioContextRef.current) {
+    mediaStreamRef.current = yield navigator.mediaDevices.getUserMedia({ audio: true });
+    audioContextRef.current = new window.AudioContext();
+    yield audioContextRef.current.resume();
+  }
+  mediaRecorderRef.current = new MediaRecorder(mediaStreamRef.current);
+  mediaRecorderRef.current.start(1e3);
+  mediaRecorderRef.current.ondataavailable = (event) => {
+    recordedChunks.push(event.data);
+  };
+  mediaRecorderRef.current.onstop = onStop;
+});
+var stopRecording = (mediaRecorderRef) => {
+  if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+    mediaRecorderRef.current.stop();
+  }
+};
+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_react6.useState)("idle");
+  const mediaStreamRef = (0, import_react6.useRef)(null);
+  const audioContextRef = (0, import_react6.useRef)(null);
+  const mediaRecorderRef = (0, import_react6.useRef)(null);
+  const recordedChunks = (0, import_react6.useRef)([]);
+  const context = (0, import_react_core2.useCopilotContext)();
+  const [startReadingFromMessageId, setStartReadingFromMessageId] = (0, import_react6.useState)(null);
+  (0, import_react6.useEffect)(() => {
+    if (pushToTalkState === "recording") {
+      startRecording(
+        mediaStreamRef,
+        mediaRecorderRef,
+        audioContextRef,
+        recordedChunks.current,
+        () => {
+          setPushToTalkState("transcribing");
+        }
+      );
+    } else {
+      stopRecording(mediaRecorderRef);
+      if (pushToTalkState === "transcribing") {
+        transcribeAudio(recordedChunks.current, context.copilotApiConfig.transcribeAudioUrl).then(
+          (transcription) => __async(void 0, null, function* () {
+            recordedChunks.current = [];
+            setPushToTalkState("idle");
+            const message = yield sendFunction(transcription);
+            setStartReadingFromMessageId(message.id);
+          })
+        );
+      }
+    }
+    return () => {
+      stopRecording(mediaRecorderRef);
+    };
+  }, [pushToTalkState]);
+  (0, import_react6.useEffect)(() => {
+    if (inProgress === false && startReadingFromMessageId) {
+      const lastMessageIndex = context.messages.findIndex(
+        (message) => message.id === startReadingFromMessageId
+      );
+      const messagesAfterLast = context.messages.slice(lastMessageIndex + 1).filter((message) => message.role === "assistant" && message.content);
+      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_jsx_runtime10 = require("react/jsx-runtime");
-var Input = ({ inProgress, onSend, children, isVisible = false }) => {
+var import_react_core3 = require("@copilotkit/react-core");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Input = ({ inProgress, onSend, isVisible = false }) => {
   const context = useChatContext();
+  const copilotContext = (0, import_react_core3.useCopilotContext)();
+  const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
   const textareaRef = (0, import_react7.useRef)(null);
   const handleDivClick = (event) => {
     var _a;
@@ -1122,12 +1139,15 @@ var Input = ({ inProgress, onSend, children, isVisible = false }) => {
       (_a = textareaRef.current) == null ? void 0 : _a.focus();
     }
   }, [isVisible]);
-  const icon = inProgress ? context.icons.activityIcon : context.icons.sendIcon;
-  const disabled = inProgress || text.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "copilotKitSendButton", disabled, onClick: send, children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const { pushToTalkState, setPushToTalkState } = usePushToTalk({
+    sendFunction: onSend,
+    inProgress
+  });
+  const sendIcon = inProgress || pushToTalkState === "transcribing" ? context.icons.activityIcon : context.icons.sendIcon;
+  const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
+  const sendDisabled = inProgress || text.length === 0 || pushToTalkState !== "idle";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       Textarea_default,
       {
         ref: textareaRef,
@@ -1143,92 +1163,227 @@ var Input = ({ inProgress, onSend, children, isVisible = false }) => {
           }
         }
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "copilotKitInputControls", children: [
+      showPushToTalk && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
+          className: pushToTalkState === "recording" ? "copilotKitPushToTalkRecording" : "",
+          children: context.icons.pushToTalkIcon
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { disabled: sendDisabled, onClick: send, children: sendIcon })
+    ] })
   ] });
 };
 
-// src/components/chat/Chat.tsx
-var import_nanoid2 = require("nanoid");
-
 // src/components/chat/Response.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ResponseButton = ({ onClick, inProgress }) => {
   const context = useChatContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { onClick, className: "copilotKitResponseButton", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: inProgress ? context.icons.stopIcon : context.icons.regenerateIcon }),
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { onClick, className: "copilotKitResponseButton", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: inProgress ? context.icons.stopIcon : context.icons.regenerateIcon }),
     inProgress ? context.labels.stopGenerating : context.labels.regenerateResponse
   ] });
 };
 
+// src/components/chat/Suggestion.tsx
+var import_react_core4 = require("@copilotkit/react-core");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Suggestion({ title, message, onClick, partial, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "button",
+    {
+      disabled: partial,
+      onClick: (e) => {
+        e.preventDefault();
+        onClick(message);
+      },
+      className: className || "suggestion",
+      children: [
+        partial && SmallSpinnerIcon,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: title })
+      ]
+    }
+  );
+}
+var reloadSuggestions = (context, chatSuggestionConfiguration, setCurrentSuggestions, abortControllerRef) => __async(void 0, null, function* () {
+  const abortController = abortControllerRef.current;
+  const tools = JSON.stringify(context.getChatCompletionFunctionDescriptions(context.entryPoints));
+  const allSuggestions = [];
+  for (const config of Object.values(chatSuggestionConfiguration)) {
+    try {
+      const numOfSuggestionsInstructions = config.minSuggestions === 0 ? `Produce up to ${config.maxSuggestions} suggestions. If there are no highly relevant suggestions you can think of, provide an empty array.` : `Produce between ${config.minSuggestions} and ${config.maxSuggestions} suggestions.`;
+      const result = yield (0, import_react_core4.extract)({
+        context,
+        instructions: "Suggest what the user could say next. Provide clear, highly relevant suggestions. Do not literally suggest function calls. " + config.instructions + "\n\n" + numOfSuggestionsInstructions,
+        data: "Available tools: " + tools + "\n\n",
+        parameters: [
+          {
+            name: "suggestions",
+            type: "object[]",
+            attributes: [
+              {
+                name: "title",
+                description: "The title of the suggestion. This is shown as a button and should be short.",
+                type: "string"
+              },
+              {
+                name: "message",
+                description: "The message to send when the suggestion is clicked. This should be a clear, complete sentence and will be sent as an instruction to the AI.",
+                type: "string"
+              }
+            ]
+          }
+        ],
+        include: {
+          messages: true,
+          readable: true
+        },
+        abortSignal: abortController == null ? void 0 : abortController.signal,
+        stream: ({ status, args }) => {
+          const suggestions = args.suggestions || [];
+          const newSuggestions = [];
+          for (let i = 0; i < suggestions.length; i++) {
+            if (config.maxSuggestions !== void 0 && i >= config.maxSuggestions) {
+              break;
+            }
+            const { title, message } = suggestions[i];
+            const partial = i == suggestions.length - 1 && status !== "complete";
+            newSuggestions.push({
+              title,
+              message,
+              partial,
+              className: config.className
+            });
+          }
+          setCurrentSuggestions([...allSuggestions, ...newSuggestions]);
+        }
+      });
+      allSuggestions.push(...result.suggestions);
+    } catch (error) {
+      console.error("Error loading suggestions", error);
+    }
+  }
+  if (abortControllerRef.current === abortController) {
+    abortControllerRef.current = null;
+  }
+});
+
 // src/components/chat/Chat.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var CopilotChat = ({
+var import_react8 = __toESM(require("react"));
+var import_react_core5 = require("@copilotkit/react-core");
+var import_nanoid2 = require("nanoid");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function CopilotChat({
   instructions,
-  defaultOpen = false,
-  clickOutsideToClose = true,
-  hitEscapeToClose = true,
-  onSetOpen,
   onSubmitMessage,
-  shortcut = "/",
   icons,
   labels,
   makeSystemMessage,
   showResponseButton = true,
   onInProgress,
-  Window: Window2 = Window,
-  Button: Button2 = Button,
-  Header: Header2 = Header,
   Messages: Messages2 = Messages,
   Input: Input2 = Input,
   ResponseButton: ResponseButton2 = ResponseButton,
-  className,
-  children
-}) => {
-  const { visibleMessages, append, reload, stop, isLoading, input, setInput } = (0, import_react_core2.useCopilotChat)({
+  className
+}) {
+  const { visibleMessages, isLoading, currentSuggestions, sendMessage, stop, reload } = useCopilotChatLogic(instructions, makeSystemMessage, onInProgress, onSubmitMessage);
+  const context = import_react8.default.useContext(ChatContext);
+  let open = true;
+  let setOpen = () => {
+  };
+  if (context) {
+    icons = context.icons;
+    labels = context.labels;
+    open = context.open;
+    setOpen = context.setOpen;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatContextProvider, { icons, labels, open, setOpen, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `copilotKitPanel ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Messages2, { messages: visibleMessages, inProgress: isLoading, children: [
+      currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h6", { children: "Suggested:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Suggestion,
+          {
+            title: suggestion.title,
+            message: suggestion.message,
+            partial: suggestion.partial,
+            className: suggestion.className,
+            onClick: (message) => sendMessage(message)
+          },
+          index
+        )) })
+      ] }),
+      showResponseButton && visibleMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ResponseButton2, { onClick: isLoading ? stop : reload, inProgress: isLoading })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Input2, { inProgress: isLoading, onSend: sendMessage, isVisible: true })
+  ] }) });
+}
+var SUGGESTIONS_DEBOUNCE_TIMEOUT = 1e3;
+var useCopilotChatLogic = (instructions, makeSystemMessage, onInProgress, onSubmitMessage) => {
+  const { visibleMessages, append, reload, stop, isLoading, input, setInput } = (0, import_react_core5.useCopilotChat)({
     id: (0, import_nanoid2.nanoid)(),
     makeSystemMessage,
     additionalInstructions: instructions
   });
+  const [currentSuggestions, setCurrentSuggestions] = (0, import_react8.useState)([]);
+  const suggestionsAbortControllerRef = (0, import_react8.useRef)(null);
+  const debounceTimerRef = (0, import_react8.useRef)();
+  const abortSuggestions = () => {
+    var _a;
+    (_a = suggestionsAbortControllerRef.current) == null ? void 0 : _a.abort();
+    suggestionsAbortControllerRef.current = null;
+  };
+  const context = (0, import_react_core5.useCopilotContext)();
   (0, import_react8.useEffect)(() => {
     onInProgress == null ? void 0 : onInProgress(isLoading);
-  }, [isLoading]);
-  const [openState, setOpenState] = import_react8.default.useState(defaultOpen);
-  const setOpen = (open) => {
-    onSetOpen == null ? void 0 : onSetOpen(open);
-    setOpenState(open);
-  };
-  const sendMessage = (message) => __async(void 0, null, function* () {
-    onSubmitMessage == null ? void 0 : onSubmitMessage(message);
-    append({
+    abortSuggestions();
+    debounceTimerRef.current = setTimeout(
+      () => {
+        if (!isLoading && Object.keys(context.chatSuggestionConfiguration).length !== 0) {
+          suggestionsAbortControllerRef.current = new AbortController();
+          reloadSuggestions(
+            context,
+            context.chatSuggestionConfiguration,
+            setCurrentSuggestions,
+            suggestionsAbortControllerRef
+          );
+        }
+      },
+      currentSuggestions.length == 0 ? 0 : SUGGESTIONS_DEBOUNCE_TIMEOUT
+    );
+    return () => {
+      clearTimeout(debounceTimerRef.current);
+    };
+  }, [isLoading, context.chatSuggestionConfiguration]);
+  const sendMessage = (messageContent) => __async(void 0, null, function* () {
+    abortSuggestions();
+    setCurrentSuggestions([]);
+    onSubmitMessage == null ? void 0 : onSubmitMessage(messageContent);
+    const message = {
       id: (0, import_nanoid2.nanoid)(),
-      content: message,
+      content: messageContent,
       role: "user"
-    });
+    };
+    append(message);
+    return message;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen: setOpenState, children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button2, { open: openState, setOpen }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-        Window2,
-        {
-          open: openState,
-          setOpen,
-          clickOutsideToClose,
-          shortcut,
-          hitEscapeToClose,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Header2, { open: openState, setOpen }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Messages2, { messages: visibleMessages, inProgress: isLoading }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Input2, { inProgress: isLoading, onSend: sendMessage, isVisible: openState, children: showResponseButton && visibleMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ResponseButton2, { onClick: isLoading ? stop : reload, inProgress: isLoading }) })
-          ]
-        }
-      )
-    ] })
-  ] });
+  return {
+    visibleMessages,
+    isLoading,
+    currentSuggestions,
+    sendMessage,
+    stop,
+    reload,
+    input,
+    setInput
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  CopilotChat
+  CopilotChat,
+  useCopilotChatLogic
 });
 //# sourceMappingURL=Chat.js.map