@copilotkit/react-ui 0.36.0-mme-push-to-talk.0 → 0.36.0-mme-pre.1

package/dist/chunk-VUZA5AFH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/ChatContext.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n  /**\n   * The icon to use for the open chat button.\n   * @default <OpenIcon />\n   */\n  openIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button.\n   * @default <CloseIcon />\n   */\n  closeIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button in the header.\n   * @default <HeaderCloseIcon />\n   */\n  headerCloseIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the send button.\n   * @default <SendIcon />\n   */\n  sendIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the activity indicator.\n   * @default <ActivityIcon />\n   */\n  activityIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the spinner.\n   * @default <SpinnerIcon />\n   */\n  spinnerIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the stop button.\n   * @default <StopIcon />\n   */\n  stopIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the regenerate button.\n   * @default <RegenerateIcon />\n   */\n  regenerateIcon?: React.ReactNode;\n\n  /**\n   * The icons to use for push to talk.\n   * @default <PushToTalkIcon />\n   */\n\n  pushToTalkIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n  /**\n   * The initial message(s) to display in the chat window.\n   */\n  initial?: string | string[];\n\n  /**\n   * The title to display in the header.\n   * @default \"CopilotKit\"\n   */\n  title?: string;\n\n  /**\n   * The placeholder to display in the input.\n   * @default \"Type a message...\"\n   */\n  placeholder?: string;\n\n  /**\n   * The message to display when an error occurs.\n   * @default \"❌ An error occurred. Please try again.\"\n   */\n  error?: string;\n\n  /**\n   * The label to display on the stop button.\n   * @default \"Stop generating\"\n   */\n  stopGenerating?: string;\n\n  /**\n   * The label to display on the regenerate button.\n   * @default \"Regenerate response\"\n   */\n  regenerateResponse?: string;\n}\n\ninterface ChatContext {\n  labels: Required<CopilotChatLabels>;\n  icons: Required<CopilotChatIcons>;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n  const context = React.useContext(ChatContext);\n  if (context === undefined) {\n    throw new Error(\n      \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n    );\n  }\n  return context;\n}\n\ninterface ChatContextProps {\n  // temperature?: number;\n  // instructions?: string;\n  // maxFeedback?: number;\n  labels?: CopilotChatLabels;\n  icons?: CopilotChatIcons;\n  children?: React.ReactNode;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n  // temperature,\n  // instructions,\n  // maxFeedback,\n  labels,\n  icons,\n  children,\n  open,\n  setOpen,\n}: ChatContextProps) => {\n  const context = {\n    labels: {\n      ...{\n        initial: \"\",\n        title: \"CopilotKit\",\n        placeholder: \"Type a message...\",\n        error: \"❌ An error occurred. Please try again.\",\n        stopGenerating: \"Stop generating\",\n        regenerateResponse: \"Regenerate response\",\n      },\n      ...labels,\n    },\n\n    icons: {\n      ...{\n        openIcon: DefaultIcons.OpenIcon,\n        closeIcon: DefaultIcons.CloseIcon,\n        headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n        sendIcon: DefaultIcons.SendIcon,\n        activityIcon: DefaultIcons.ActivityIcon,\n        spinnerIcon: DefaultIcons.SpinnerIcon,\n        stopIcon: DefaultIcons.StopIcon,\n        regenerateIcon: DefaultIcons.RegenerateIcon,\n        pushToTalkIcon: DefaultIcons.PushToTalkIcon,\n      },\n      icons,\n    },\n    open,\n    setOpen,\n  };\n  return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,OAAO,WAAkC;AA6KhC;AA/DF,IAAM,cAAc,MAAM,cAAuC,MAAS;AAE1E,SAAS,iBAA8B;AAC5C,QAAM,UAAU,MAAM,WAAW,WAAW;AAC5C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAaO,IAAM,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA,EAIlC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AACtB,QAAM,UAAU;AAAA,IACd,QAAQ,kCACH;AAAA,MACD,SAAS;AAAA,MACT,OAAO;AAAA,MACP,aAAa;AAAA,MACb,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,IACtB,IACG;AAAA,IAGL,OAAO,iCACF;AAAA,MACD,UAAuB;AAAA,MACvB,WAAwB;AAAA,MACxB,iBAA8B;AAAA,MAC9B,UAAuB;AAAA,MACvB,cAA2B;AAAA,MAC3B,aAA0B;AAAA,MAC1B,UAAuB;AAAA,MACvB,gBAA6B;AAAA,MAC7B,gBAA6B;AAAA,IAC/B,IAXK;AAAA,MAYL;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,SAAO,oBAAC,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAS;AACzD;","names":[]}

package/dist/{chunk-XWWMYJJF.mjs → chunk-XRODMID5.mjs}

@@ -1,10 +1,10 @@
 import {
-  CopilotChat
-} from "./chunk-JPX5ODUX.mjs";
+  CopilotModal
+} from "./chunk-T3JTSIHT.mjs";
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk-SKC7AJIV.mjs";
+} from "./chunk-MRXNTQOX.mjs";
 
 // src/components/chat/Popup.tsx
 import { jsx } from "react/jsx-runtime";
@@ -12,10 +12,10 @@ function CopilotPopup(props) {
   props = __spreadProps(__spreadValues({}, props), {
     className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup"
   });
-  return /* @__PURE__ */ jsx(CopilotChat, __spreadProps(__spreadValues({}, props), { children: props.children }));
+  return /* @__PURE__ */ jsx(CopilotModal, __spreadProps(__spreadValues({}, props), { children: props.children }));
 }
 
 export {
   CopilotPopup
 };
-//# sourceMappingURL=chunk-XWWMYJJF.mjs.map
+//# sourceMappingURL=chunk-XRODMID5.mjs.map

package/dist/{chunk-XWWMYJJF.mjs.map → chunk-XRODMID5.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/chat/Popup.tsx"],"sourcesContent":["/**\n * A chatbot popup component for CopilotKit.\n *\n * <img src=\"/images/CopilotPopup/CopilotPopup.gif\" width=\"500\" />\n *\n * <img referrerPolicy=\"no-referrer-when-downgrade\" src=\"https://static.scarf.sh/a.png?x-pxid=a9b290bb-38f9-4518-ac3b-8f54fdbf43be\" />\n *\n * A chatbot popup component for the CopilotKit framework. The component allows for a high degree\n * of customization through various props and custom CSS.\n *\n * See [CopilotSidebar](./CopilotSidebar) for a sidebar version of this component.\n *\n * <RequestExample>\n *   ```jsx CopilotPopup Example\n *   import { CopilotPopup } from \"@copilotkit/react-ui\";\n *\n *   <CopilotPopup\n *     labels={{\n *       title: \"Your Assistant\",\n *       initial: \"Hi! 👋 How can I assist you today?\",\n *     }}\n *   />\n *   ```\n * </RequestExample>\n *\n * ## Custom CSS\n *\n * You can customize the colors of the chat window by overriding the CSS variables\n * defined in the [default styles](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/colors.css).\n *\n * For example, to set the primary color to purple:\n *\n * ```jsx\n * <div style={{ \"--copilot-kit-primary-color\": \"#7D5BA6\" }}>\n *   <CopilotPopup />\n * </div>\n * ```\n *\n * To further customize the chat window, you can override the CSS classes defined\n * [here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/).\n *\n * For example:\n *\n * ```css\n * .copilotKitButton {\n *   border-radius: 0;\n * }\n * ```\n */\n\nimport { CopilotChat, CopilotChatProps } from \"./Chat\";\n\nexport function CopilotPopup(props: CopilotChatProps) {\n  props = {\n    ...props,\n    className: props.className ? props.className + \" copilotKitPopup\" : \"copilotKitPopup\",\n  };\n  return <CopilotChat {...props}>{props.children}</CopilotChat>;\n}\n"],"mappings":";;;;;;;;;AAyDS;AALF,SAAS,aAAa,OAAyB;AACpD,UAAQ,iCACH,QADG;AAAA,IAEN,WAAW,MAAM,YAAY,MAAM,YAAY,qBAAqB;AAAA,EACtE;AACA,SAAO,oBAAC,8CAAgB,QAAhB,EAAwB,gBAAM,WAAS;AACjD;","names":[]}
+{"version":3,"sources":["../src/components/chat/Popup.tsx"],"sourcesContent":["/**\n * A chatbot popup component for CopilotKit.\n *\n * <img src=\"/images/CopilotPopup/CopilotPopup.gif\" width=\"500\" />\n *\n * <img referrerPolicy=\"no-referrer-when-downgrade\" src=\"https://static.scarf.sh/a.png?x-pxid=a9b290bb-38f9-4518-ac3b-8f54fdbf43be\" />\n *\n * A chatbot popup component for the CopilotKit framework. The component allows for a high degree\n * of customization through various props and custom CSS.\n *\n * See [CopilotSidebar](./CopilotSidebar) for a sidebar version of this component.\n *\n * <RequestExample>\n *   ```jsx CopilotPopup Example\n *   import { CopilotPopup } from \"@copilotkit/react-ui\";\n *\n *   <CopilotPopup\n *     labels={{\n *       title: \"Your Assistant\",\n *       initial: \"Hi! 👋 How can I assist you today?\",\n *     }}\n *   />\n *   ```\n * </RequestExample>\n *\n * ## Custom CSS\n *\n * You can customize the colors of the chat window by overriding the CSS variables\n * defined in the [default styles](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/colors.css).\n *\n * For example, to set the primary color to purple:\n *\n * ```jsx\n * <div style={{ \"--copilot-kit-primary-color\": \"#7D5BA6\" }}>\n *   <CopilotPopup />\n * </div>\n * ```\n *\n * To further customize the chat window, you can override the CSS classes defined\n * [here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/).\n *\n * For example:\n *\n * ```css\n * .copilotKitButton {\n *   border-radius: 0;\n * }\n * ```\n */\n\nimport { CopilotModal, CopilotModalProps } from \"./Modal\";\n\nexport function CopilotPopup(props: CopilotModalProps) {\n  props = {\n    ...props,\n    className: props.className ? props.className + \" copilotKitPopup\" : \"copilotKitPopup\",\n  };\n  return <CopilotModal {...props}>{props.children}</CopilotModal>;\n}\n"],"mappings":";;;;;;;;;AAyDS;AALF,SAAS,aAAa,OAA0B;AACrD,UAAQ,iCACH,QADG;AAAA,IAEN,WAAW,MAAM,YAAY,MAAM,YAAY,qBAAqB;AAAA,EACtE;AACA,SAAO,oBAAC,+CAAiB,QAAjB,EAAyB,gBAAM,WAAS;AAClD;","names":[]}

package/dist/{chunk-ZKLK3M77.mjs → chunk-YQ3D5IQV.mjs}

@@ -1,11 +1,11 @@
 import {
   CodeBlock
-} from "./chunk-A7J4KGLP.mjs";
+} from "./chunk-UPTB2MVO.mjs";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./chunk-SKC7AJIV.mjs";
+} from "./chunk-MRXNTQOX.mjs";
 
 // src/components/chat/Markdown.tsx
 import { memo } from "react";
@@ -72,4 +72,4 @@ var components = {
 export {
   Markdown
 };
-//# sourceMappingURL=chunk-ZKLK3M77.mjs.map
+//# sourceMappingURL=chunk-YQ3D5IQV.mjs.map

package/dist/{chunk-WM6BS77F.mjs → chunk-YQFVRDNC.mjs}

@@ -36,7 +36,7 @@ var AutoResizingTextarea = forwardRef(
         onKeyDown,
         placeholder,
         style: {
-          overflow: "hidden",
+          overflow: "auto",
           resize: "none",
           maxHeight: `${maxHeight}px`
         },
@@ -50,4 +50,4 @@ var Textarea_default = AutoResizingTextarea;
 export {
   Textarea_default
 };
-//# sourceMappingURL=chunk-WM6BS77F.mjs.map
+//# sourceMappingURL=chunk-YQFVRDNC.mjs.map

package/dist/{chunk-WM6BS77F.mjs.map → chunk-YQFVRDNC.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/chat/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from \"react\";\n\ninterface AutoResizingTextareaProps {\n  maxRows?: number;\n  placeholder?: string;\n  value: string;\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n  autoFocus?: boolean;\n}\n\nconst AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextareaProps>(\n  ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {\n    const internalTextareaRef = useRef<HTMLTextAreaElement>(null);\n    const [maxHeight, setMaxHeight] = useState<number>(0);\n\n    useImperativeHandle(ref, () => internalTextareaRef.current as HTMLTextAreaElement);\n\n    useEffect(() => {\n      const calculateMaxHeight = () => {\n        const textarea = internalTextareaRef.current;\n        if (textarea) {\n          textarea.style.height = \"auto\";\n          const singleRowHeight = textarea.scrollHeight;\n          setMaxHeight(singleRowHeight * maxRows);\n          if (autoFocus) {\n            textarea.focus();\n          }\n        }\n      };\n\n      calculateMaxHeight();\n    }, [maxRows]);\n\n    useEffect(() => {\n      const textarea = internalTextareaRef.current;\n      if (textarea) {\n        textarea.style.height = \"auto\";\n        textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;\n      }\n    }, [value, maxHeight]);\n\n    return (\n      <textarea\n        ref={internalTextareaRef}\n        value={value}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n        placeholder={placeholder}\n        style={{\n          overflow: \"hidden\",\n          resize: \"none\",\n          maxHeight: `${maxHeight}px`,\n        }}\n        rows={1}\n      />\n    );\n  },\n);\n\nexport default AutoResizingTextarea;\n"],"mappings":";AAAA,SAAgB,UAAU,QAAQ,WAAW,YAAY,2BAA2B;AA2C9E;AAhCN,IAAM,uBAAuB;AAAA,EAC3B,CAAC,EAAE,UAAU,GAAG,aAAa,OAAO,UAAU,WAAW,UAAU,GAAG,QAAQ;AAC5E,UAAM,sBAAsB,OAA4B,IAAI;AAC5D,UAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,CAAC;AAEpD,wBAAoB,KAAK,MAAM,oBAAoB,OAA8B;AAEjF,cAAU,MAAM;AACd,YAAM,qBAAqB,MAAM;AAC/B,cAAM,WAAW,oBAAoB;AACrC,YAAI,UAAU;AACZ,mBAAS,MAAM,SAAS;AACxB,gBAAM,kBAAkB,SAAS;AACjC,uBAAa,kBAAkB,OAAO;AACtC,cAAI,WAAW;AACb,qBAAS,MAAM;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AAEA,yBAAmB;AAAA,IACrB,GAAG,CAAC,OAAO,CAAC;AAEZ,cAAU,MAAM;AACd,YAAM,WAAW,oBAAoB;AACrC,UAAI,UAAU;AACZ,iBAAS,MAAM,SAAS;AACxB,iBAAS,MAAM,SAAS,GAAG,KAAK,IAAI,SAAS,cAAc,SAAS;AAAA,MACtE;AAAA,IACF,GAAG,CAAC,OAAO,SAAS,CAAC;AAErB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,WAAW,GAAG;AAAA,QAChB;AAAA,QACA,MAAM;AAAA;AAAA,IACR;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;","names":[]}
+{"version":3,"sources":["../src/components/chat/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from \"react\";\n\ninterface AutoResizingTextareaProps {\n  maxRows?: number;\n  placeholder?: string;\n  value: string;\n  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n  autoFocus?: boolean;\n}\n\nconst AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextareaProps>(\n  ({ maxRows = 1, placeholder, value, onChange, onKeyDown, autoFocus }, ref) => {\n    const internalTextareaRef = useRef<HTMLTextAreaElement>(null);\n    const [maxHeight, setMaxHeight] = useState<number>(0);\n\n    useImperativeHandle(ref, () => internalTextareaRef.current as HTMLTextAreaElement);\n\n    useEffect(() => {\n      const calculateMaxHeight = () => {\n        const textarea = internalTextareaRef.current;\n        if (textarea) {\n          textarea.style.height = \"auto\";\n          const singleRowHeight = textarea.scrollHeight;\n          setMaxHeight(singleRowHeight * maxRows);\n          if (autoFocus) {\n            textarea.focus();\n          }\n        }\n      };\n\n      calculateMaxHeight();\n    }, [maxRows]);\n\n    useEffect(() => {\n      const textarea = internalTextareaRef.current;\n      if (textarea) {\n        textarea.style.height = \"auto\";\n        textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;\n      }\n    }, [value, maxHeight]);\n\n    return (\n      <textarea\n        ref={internalTextareaRef}\n        value={value}\n        onChange={onChange}\n        onKeyDown={onKeyDown}\n        placeholder={placeholder}\n        style={{\n          overflow: \"auto\",\n          resize: \"none\",\n          maxHeight: `${maxHeight}px`,\n        }}\n        rows={1}\n      />\n    );\n  },\n);\n\nexport default AutoResizingTextarea;\n"],"mappings":";AAAA,SAAgB,UAAU,QAAQ,WAAW,YAAY,2BAA2B;AA2C9E;AAhCN,IAAM,uBAAuB;AAAA,EAC3B,CAAC,EAAE,UAAU,GAAG,aAAa,OAAO,UAAU,WAAW,UAAU,GAAG,QAAQ;AAC5E,UAAM,sBAAsB,OAA4B,IAAI;AAC5D,UAAM,CAAC,WAAW,YAAY,IAAI,SAAiB,CAAC;AAEpD,wBAAoB,KAAK,MAAM,oBAAoB,OAA8B;AAEjF,cAAU,MAAM;AACd,YAAM,qBAAqB,MAAM;AAC/B,cAAM,WAAW,oBAAoB;AACrC,YAAI,UAAU;AACZ,mBAAS,MAAM,SAAS;AACxB,gBAAM,kBAAkB,SAAS;AACjC,uBAAa,kBAAkB,OAAO;AACtC,cAAI,WAAW;AACb,qBAAS,MAAM;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AAEA,yBAAmB;AAAA,IACrB,GAAG,CAAC,OAAO,CAAC;AAEZ,cAAU,MAAM;AACd,YAAM,WAAW,oBAAoB;AACrC,UAAI,UAAU;AACZ,iBAAS,MAAM,SAAS;AACxB,iBAAS,MAAM,SAAS,GAAG,KAAK,IAAI,SAAS,cAAc,SAAS;AAAA,MACtE;AAAA,IACF,GAAG,CAAC,OAAO,SAAS,CAAC;AAErB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,WAAW,GAAG;AAAA,QAChB;AAAA,QACA,MAAM;AAAA;AAAA,IACR;AAAA,EAEJ;AACF;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/chunk-ZO3GLN23.mjs

@@ -0,0 +1,137 @@
+import {
+  Suggestion,
+  reloadSuggestions
+} from "./chunk-4MKP23AD.mjs";
+import {
+  Input
+} from "./chunk-BL65ZC6L.mjs";
+import {
+  Messages
+} from "./chunk-7FES2IQA.mjs";
+import {
+  ResponseButton
+} from "./chunk-CE7PJAAO.mjs";
+import {
+  ChatContext,
+  ChatContextProvider
+} from "./chunk-VUZA5AFH.mjs";
+import {
+  __async
+} from "./chunk-MRXNTQOX.mjs";
+
+// src/components/chat/Chat.tsx
+import React, { useEffect, useRef, useState } from "react";
+import { useCopilotChat, useCopilotContext } from "@copilotkit/react-core";
+import { nanoid } from "nanoid";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CopilotChat({
+  instructions,
+  onSubmitMessage,
+  icons,
+  labels,
+  makeSystemMessage,
+  showResponseButton = true,
+  onInProgress,
+  Messages: Messages2 = Messages,
+  Input: Input2 = Input,
+  ResponseButton: ResponseButton2 = ResponseButton,
+  className
+}) {
+  const { visibleMessages, isLoading, currentSuggestions, sendMessage, stop, reload } = useCopilotChatLogic(instructions, makeSystemMessage, onInProgress, onSubmitMessage);
+  const context = React.useContext(ChatContext);
+  let open = true;
+  let setOpen = () => {
+  };
+  if (context) {
+    icons = context.icons;
+    labels = context.labels;
+    open = context.open;
+    setOpen = context.setOpen;
+  }
+  return /* @__PURE__ */ jsx(ChatContextProvider, { icons, labels, open, setOpen, children: /* @__PURE__ */ jsxs("div", { className: `copilotKitPanel ${className}`, children: [
+    /* @__PURE__ */ jsxs(Messages2, { messages: visibleMessages, inProgress: isLoading, children: [
+      currentSuggestions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h6", { children: "Suggested:" }),
+        /* @__PURE__ */ jsx("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+          Suggestion,
+          {
+            title: suggestion.title,
+            message: suggestion.message,
+            partial: suggestion.partial,
+            className: suggestion.className,
+            onClick: (message) => sendMessage(message)
+          },
+          index
+        )) })
+      ] }),
+      showResponseButton && visibleMessages.length > 0 && /* @__PURE__ */ jsx(ResponseButton2, { onClick: isLoading ? stop : reload, inProgress: isLoading })
+    ] }),
+    /* @__PURE__ */ 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 } = useCopilotChat({
+    id: nanoid(),
+    makeSystemMessage,
+    additionalInstructions: instructions
+  });
+  const [currentSuggestions, setCurrentSuggestions] = useState([]);
+  const suggestionsAbortControllerRef = useRef(null);
+  const debounceTimerRef = useRef();
+  const abortSuggestions = () => {
+    var _a;
+    (_a = suggestionsAbortControllerRef.current) == null ? void 0 : _a.abort();
+    suggestionsAbortControllerRef.current = null;
+  };
+  const context = useCopilotContext();
+  useEffect(() => {
+    onInProgress == null ? void 0 : onInProgress(isLoading);
+    abortSuggestions();
+    debounceTimerRef.current = setTimeout(
+      () => {
+        if (!isLoading && Object.keys(context.chatSuggestionConfiguration).length !== 0) {
+          suggestionsAbortControllerRef.current = new AbortController();
+          reloadSuggestions(
+            context,
+            context.chatSuggestionConfiguration,
+            setCurrentSuggestions,
+            suggestionsAbortControllerRef
+          );
+        }
+      },
+      currentSuggestions.length == 0 ? 0 : SUGGESTIONS_DEBOUNCE_TIMEOUT
+    );
+    return () => {
+      clearTimeout(debounceTimerRef.current);
+    };
+  }, [isLoading, context.chatSuggestionConfiguration]);
+  const sendMessage = (messageContent) => __async(void 0, null, function* () {
+    abortSuggestions();
+    setCurrentSuggestions([]);
+    onSubmitMessage == null ? void 0 : onSubmitMessage(messageContent);
+    const message = {
+      id: nanoid(),
+      content: messageContent,
+      role: "user"
+    };
+    append(message);
+    return message;
+  });
+  return {
+    visibleMessages,
+    isLoading,
+    currentSuggestions,
+    sendMessage,
+    stop,
+    reload,
+    input,
+    setInput
+  };
+};
+
+export {
+  CopilotChat,
+  useCopilotChatLogic
+};
+//# sourceMappingURL=chunk-ZO3GLN23.mjs.map

package/dist/chunk-ZO3GLN23.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/Chat.tsx"],"sourcesContent":["/**\n * An embeddable chat panel for CopilotKit.\n *\n * <img src=\"/images/CopilotChat/CopilotChat.gif\" width=\"500\" />\n *\n * A chatbot panel component for the CopilotKit framework. The component allows for a high degree\n * of customization through various props and custom CSS.\n *\n * <RequestExample>\n *   ```jsx CopilotChat Example\n *   import { CopilotChat } from \"@copilotkit/react-ui\";\n *\n *   <CopilotChat\n *     labels={{\n *       title: \"Your Assistant\",\n *       initial: \"Hi! 👋 How can I assist you today?\",\n *     }}\n *   />\n *   ```\n * </RequestExample>\n *\n * ## Custom CSS\n *\n * You can customize the colors of the panel by overriding the CSS variables\n * defined in the [default styles](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/colors.css).\n *\n * For example, to set the primary color to purple:\n *\n * ```jsx\n * <div style={{ \"--copilot-kit-primary-color\": \"#7D5BA6\" }}>\n *   <CopilotPopup />\n * </div>\n * ```\n *\n * To further customize the panel, you can override the CSS classes defined\n * [here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/).\n *\n * For example:\n *\n * ```css\n * .copilotKitButton {\n *   border-radius: 0;\n * }\n * ```\n */\n\nimport {\n  ChatContext,\n  ChatContextProvider,\n  CopilotChatIcons,\n  CopilotChatLabels,\n} from \"./ChatContext\";\nimport { Messages as DefaultMessages } from \"./Messages\";\nimport { Input as DefaultInput } from \"./Input\";\nimport { ResponseButton as DefaultResponseButton } from \"./Response\";\nimport { Suggestion } from \"./Suggestion\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { SystemMessageFunction, useCopilotChat, useCopilotContext } from \"@copilotkit/react-core\";\nimport { nanoid } from \"nanoid\";\nimport { reloadSuggestions } from \"./Suggestion\";\nimport { CopilotChatSuggestion } from \"../../types/suggestions\";\nimport { Message } from \"@copilotkit/shared\";\nimport { InputProps, MessagesProps, ResponseButtonProps } from \"./props\";\n\n/**\n * Props for CopilotChat component.\n */\nexport interface CopilotChatProps {\n  /**\n   * Custom instructions to be added to the system message. Use this property to\n   * provide additional context or guidance to the language model, influencing\n   * its responses. These instructions can include specific directions,\n   * preferences, or criteria that the model should consider when generating\n   * its output, thereby tailoring the conversation more precisely to the\n   * user's needs or the application's requirements.\n   */\n  instructions?: string;\n\n  /**\n   * A callback that gets called when the in progress state changes.\n   */\n  onInProgress?: (inProgress: boolean) => void;\n\n  /**\n   * A callback that gets called when a new message it submitted.\n   */\n  onSubmitMessage?: (message: string) => void;\n\n  /**\n   * Icons can be used to set custom icons for the chat window.\n   */\n  icons?: CopilotChatIcons;\n\n  /**\n   * Labels can be used to set custom labels for the chat window.\n   */\n  labels?: CopilotChatLabels;\n\n  /**\n   * A function that takes in context string and instructions and returns\n   * the system message to include in the chat request.\n   * Use this to completely override the system message, when providing\n   * instructions is not enough.\n   */\n  makeSystemMessage?: SystemMessageFunction;\n\n  /**\n   * Whether to show the response button.\n   * @default true\n   */\n  showResponseButton?: boolean;\n\n  /**\n   * A custom Messages component to use instead of the default.\n   */\n  Messages?: React.ComponentType<MessagesProps>;\n\n  /**\n   * A custom Input component to use instead of the default.\n   */\n  Input?: React.ComponentType<InputProps>;\n\n  /**\n   * A custom ResponseButton component to use instead of the default.\n   */\n  ResponseButton?: React.ComponentType<ResponseButtonProps>;\n\n  /**\n   * A class name to apply to the root element.\n   */\n  className?: string;\n\n  /**\n   * Children to render.\n   */\n  children?: React.ReactNode;\n}\n\nexport function CopilotChat({\n  instructions,\n  onSubmitMessage,\n  icons,\n  labels,\n  makeSystemMessage,\n  showResponseButton = true,\n  onInProgress,\n  Messages = DefaultMessages,\n  Input = DefaultInput,\n  ResponseButton = DefaultResponseButton,\n  className,\n}: CopilotChatProps) {\n  const { visibleMessages, isLoading, currentSuggestions, sendMessage, stop, reload } =\n    useCopilotChatLogic(instructions, makeSystemMessage, onInProgress, onSubmitMessage);\n\n  const context = React.useContext(ChatContext);\n  let open = true;\n  let setOpen: (open: boolean) => void = () => {};\n  if (context) {\n    icons = context.icons;\n    labels = context.labels;\n    open = context.open;\n    setOpen = context.setOpen;\n  }\n\n  return (\n    <ChatContextProvider icons={icons} labels={labels} open={open} setOpen={setOpen}>\n      <div className={`copilotKitPanel ${className}`}>\n        <Messages messages={visibleMessages} inProgress={isLoading}>\n          {currentSuggestions.length > 0 && (\n            <div>\n              <h6>Suggested:</h6>\n              <div className=\"suggestions\">\n                {currentSuggestions.map((suggestion, index) => (\n                  <Suggestion\n                    key={index}\n                    title={suggestion.title}\n                    message={suggestion.message}\n                    partial={suggestion.partial}\n                    className={suggestion.className}\n                    onClick={(message) => sendMessage(message)}\n                  />\n                ))}\n              </div>\n            </div>\n          )}\n          {showResponseButton && visibleMessages.length > 0 && (\n            <ResponseButton onClick={isLoading ? stop : reload} inProgress={isLoading} />\n          )}\n        </Messages>\n        <Input inProgress={isLoading} onSend={sendMessage} isVisible={true} />\n      </div>\n    </ChatContextProvider>\n  );\n}\n\nconst SUGGESTIONS_DEBOUNCE_TIMEOUT = 1000;\n\nexport const useCopilotChatLogic = (\n  instructions?: string,\n  makeSystemMessage?: SystemMessageFunction,\n  onInProgress?: (isLoading: boolean) => void,\n  onSubmitMessage?: (messageContent: string) => void,\n) => {\n  const { visibleMessages, append, reload, stop, isLoading, input, setInput } = useCopilotChat({\n    id: nanoid(),\n    makeSystemMessage,\n    additionalInstructions: instructions,\n  });\n\n  const [currentSuggestions, setCurrentSuggestions] = useState<CopilotChatSuggestion[]>([]);\n  const suggestionsAbortControllerRef = useRef<AbortController | null>(null);\n  const debounceTimerRef = useRef<any>();\n\n  const abortSuggestions = () => {\n    suggestionsAbortControllerRef.current?.abort();\n    suggestionsAbortControllerRef.current = null;\n  };\n\n  const context = useCopilotContext();\n\n  useEffect(() => {\n    onInProgress?.(isLoading);\n\n    abortSuggestions();\n\n    debounceTimerRef.current = setTimeout(\n      () => {\n        if (!isLoading && Object.keys(context.chatSuggestionConfiguration).length !== 0) {\n          suggestionsAbortControllerRef.current = new AbortController();\n          reloadSuggestions(\n            context,\n            context.chatSuggestionConfiguration,\n            setCurrentSuggestions,\n            suggestionsAbortControllerRef,\n          );\n        }\n      },\n      currentSuggestions.length == 0 ? 0 : SUGGESTIONS_DEBOUNCE_TIMEOUT,\n    );\n\n    return () => {\n      clearTimeout(debounceTimerRef.current);\n    };\n  }, [isLoading, context.chatSuggestionConfiguration]);\n\n  const sendMessage = async (messageContent: string) => {\n    abortSuggestions();\n    setCurrentSuggestions([]);\n    onSubmitMessage?.(messageContent);\n    const message: Message = {\n      id: nanoid(),\n      content: messageContent,\n      role: \"user\",\n    };\n    append(message);\n    return message;\n  };\n\n  return {\n    visibleMessages,\n    isLoading,\n    currentSuggestions,\n    sendMessage,\n    stop,\n    reload,\n    input,\n    setInput,\n  };\n};\n"],"mappings":"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","names":["Messages","Input","ResponseButton"]}

package/dist/components/chat/Button.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps } from './props.js';
 import '@copilotkit/shared';
 
-declare const Button: ({ open, setOpen, pushToTalk, setPushToTalk }: ButtonProps) => JSX.Element;
+declare const Button: ({ open, setOpen }: ButtonProps) => JSX.Element;
 
 export { Button };

package/dist/components/chat/Button.js

@@ -33,7 +33,6 @@ __export(Button_exports, {
   Button: () => Button
 });
 module.exports = __toCommonJS(Button_exports);
-var import_react2 = require("react");
 
 // src/components/chat/ChatContext.tsx
 var import_react = __toESM(require("react"));
@@ -51,36 +50,9 @@ function useChatContext() {
 
 // src/components/chat/Button.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Button = ({ open, setOpen, pushToTalk, setPushToTalk }) => {
+var Button = ({ open, setOpen }) => {
   const context = useChatContext();
-  const timerRef = (0, import_react2.useRef)(null);
-  const [isLongPress, setIsLongPress] = (0, import_react2.useState)(false);
-  const handleMouseDown = () => {
-    timerRef.current = setTimeout(() => {
-      setPushToTalk(true);
-      setIsLongPress(true);
-    }, 500);
-  };
-  const handleMouseUp = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      setPushToTalk(false);
-    }
-  };
-  const handleClick = () => {
-    if (!isLongPress) {
-      setOpen(!open);
-    } else {
-      setIsLongPress(false);
-    }
-  };
-  (0, import_react2.useEffect)(() => {
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { onClick: handleClick, onMouseDown: handleMouseDown, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { onClick: () => setOpen(!open), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
       className: `copilotKitButton ${open ? "open" : ""}`,

package/dist/components/chat/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/chat/Button.tsx","../../../src/components/chat/ChatContext.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { ButtonProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\n\nexport const Button = ({ open, setOpen, pushToTalk, setPushToTalk }: ButtonProps) => {\n  const context = useChatContext();\n  const timerRef = useRef<NodeJS.Timeout | null>(null);\n  const [isLongPress, setIsLongPress] = useState(false);\n\n  const handleMouseDown = () => {\n    timerRef.current = setTimeout(() => {\n      setPushToTalk(true);\n      setIsLongPress(true);\n    }, 500); // 500ms for long press\n  };\n\n  const handleMouseUp = () => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      setPushToTalk(false);\n    }\n  };\n\n  const handleClick = () => {\n    if (!isLongPress) {\n      setOpen(!open);\n    } else {\n      setIsLongPress(false);\n    }\n  };\n\n  // we want to handle the mouse up event event outside of the button component\n  useEffect(() => {\n    document.addEventListener(\"mouseup\", handleMouseUp);\n    return () => {\n      document.removeEventListener(\"mouseup\", handleMouseUp);\n    };\n  }, []);\n\n  return (\n    <div onClick={handleClick} onMouseDown={handleMouseDown}>\n      <button\n        className={`copilotKitButton ${open ? \"open\" : \"\"}`}\n        aria-label={open ? \"Close Chat\" : \"Open Chat\"}\n      >\n        <div className=\"copilotKitButtonIcon copilotKitButtonIconOpen\">\n          {context.icons.openIcon}\n        </div>\n        <div className=\"copilotKitButtonIcon copilotKitButtonIconClose\">\n          {context.icons.closeIcon}\n        </div>\n      </button>\n    </div>\n  );\n};\n","import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\nimport { CopilotChatSuggestion, CopilotChatSuggestionConfiguration } from \"../../types/suggestions\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n  /**\n   * The icon to use for the open chat button.\n   * @default <OpenIcon />\n   */\n  openIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button.\n   * @default <CloseIcon />\n   */\n  closeIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button in the header.\n   * @default <HeaderCloseIcon />\n   */\n  headerCloseIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the send button.\n   * @default <SendIcon />\n   */\n  sendIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the activity indicator.\n   * @default <ActivityIcon />\n   */\n  activityIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the spinner.\n   * @default <SpinnerIcon />\n   */\n  spinnerIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the stop button.\n   * @default <StopIcon />\n   */\n  stopIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the regenerate button.\n   * @default <RegenerateIcon />\n   */\n  regenerateIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n  /**\n   * The initial message(s) to display in the chat window.\n   */\n  initial?: string | string[];\n\n  /**\n   * The title to display in the header.\n   * @default \"CopilotKit\"\n   */\n  title?: string;\n\n  /**\n   * The placeholder to display in the input.\n   * @default \"Type a message...\"\n   */\n  placeholder?: string;\n\n  /**\n   * The message to display while the chat GPT is \"thinking\".\n   * @default \"Thinking...\"\n   */\n  thinking?: string;\n\n  /**\n   * The message to display when an error occurs.\n   * @default \"❌ An error occurred. Please try again.\"\n   */\n  error?: string;\n\n  /**\n   * The label to display on the stop button.\n   * @default \"Stop generating\"\n   */\n  stopGenerating?: string;\n\n  /**\n   * The label to display on the regenerate button.\n   * @default \"Regenerate response\"\n   */\n  regenerateResponse?: string;\n}\n\ninterface ChatContext {\n  labels: Required<CopilotChatLabels>;\n  icons: Required<CopilotChatIcons>;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  addChatSuggestionConfiguration: (\n    id: string,\n    suggestion: CopilotChatSuggestionConfiguration,\n  ) => void;\n  removeChatSuggestionConfiguration: (id: string) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n  const context = React.useContext(ChatContext);\n  if (context === undefined) {\n    throw new Error(\n      \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n    );\n  }\n  return context;\n}\n\ninterface ChatContextProps {\n  // temperature?: number;\n  // instructions?: string;\n  // maxFeedback?: number;\n  labels?: CopilotChatLabels;\n  icons?: CopilotChatIcons;\n  children?: React.ReactNode;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  addChatSuggestionConfiguration: (\n    id: string,\n    suggestion: CopilotChatSuggestionConfiguration,\n  ) => void;\n  removeChatSuggestionConfiguration: (id: string) => void;\n}\n\nexport const ChatContextProvider = ({\n  // temperature,\n  // instructions,\n  // maxFeedback,\n  labels,\n  icons,\n  children,\n  open,\n  setOpen,\n  addChatSuggestionConfiguration,\n  removeChatSuggestionConfiguration,\n}: ChatContextProps) => {\n  const context = {\n    labels: {\n      ...{\n        initial: \"\",\n        title: \"CopilotKit\",\n        placeholder: \"Type a message...\",\n        thinking: \"Thinking...\",\n        error: \"❌ An error occurred. Please try again.\",\n        stopGenerating: \"Stop generating\",\n        regenerateResponse: \"Regenerate response\",\n      },\n      ...labels,\n    },\n\n    icons: {\n      ...{\n        openIcon: DefaultIcons.OpenIcon,\n        closeIcon: DefaultIcons.CloseIcon,\n        headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n        sendIcon: DefaultIcons.SendIcon,\n        activityIcon: DefaultIcons.ActivityIcon,\n        spinnerIcon: DefaultIcons.SpinnerIcon,\n        stopIcon: DefaultIcons.StopIcon,\n        regenerateIcon: DefaultIcons.RegenerateIcon,\n      },\n      icons,\n    },\n    open,\n    setOpen,\n    addChatSuggestionConfiguration,\n    removeChatSuggestionConfiguration,\n  };\n  return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAA4C;;;ACA5C,mBAAyC;AA2LhC;AAxEF,IAAM,cAAc,aAAAC,QAAM,cAAuC,MAAS;AAE1E,SAAS,iBAA8B;AAC5C,QAAM,UAAU,aAAAA,QAAM,WAAW,WAAW;AAC5C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;;;ADpFM,IAAAC,sBAAA;AArCC,IAAM,SAAS,CAAC,EAAE,MAAM,SAAS,YAAY,cAAc,MAAmB;AACnF,QAAM,UAAU,eAAe;AAC/B,QAAM,eAAW,sBAA8B,IAAI;AACnD,QAAM,CAAC,aAAa,cAAc,QAAI,wBAAS,KAAK;AAEpD,QAAM,kBAAkB,MAAM;AAC5B,aAAS,UAAU,WAAW,MAAM;AAClC,oBAAc,IAAI;AAClB,qBAAe,IAAI;AAAA,IACrB,GAAG,GAAG;AAAA,EACR;AAEA,QAAM,gBAAgB,MAAM;AAC1B,QAAI,SAAS,SAAS;AACpB,mBAAa,SAAS,OAAO;AAC7B,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,aAAa;AAChB,cAAQ,CAAC,IAAI;AAAA,IACf,OAAO;AACL,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF;AAGA,+BAAU,MAAM;AACd,aAAS,iBAAiB,WAAW,aAAa;AAClD,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,aAAa;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,6CAAC,SAAI,SAAS,aAAa,aAAa,iBACtC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,oBAAoB,OAAO,SAAS;AAAA,MAC/C,cAAY,OAAO,eAAe;AAAA,MAElC;AAAA,qDAAC,SAAI,WAAU,iDACZ,kBAAQ,MAAM,UACjB;AAAA,QACA,6CAAC,SAAI,WAAU,kDACZ,kBAAQ,MAAM,WACjB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":["import_react","React","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/chat/Button.tsx","../../../src/components/chat/ChatContext.tsx"],"sourcesContent":["import { ButtonProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\n\nexport const Button = ({ open, setOpen }: ButtonProps) => {\n  const context = useChatContext();\n\n  return (\n    <div onClick={() => setOpen(!open)}>\n      <button\n        className={`copilotKitButton ${open ? \"open\" : \"\"}`}\n        aria-label={open ? \"Close Chat\" : \"Open Chat\"}\n      >\n        <div className=\"copilotKitButtonIcon copilotKitButtonIconOpen\">\n          {context.icons.openIcon}\n        </div>\n        <div className=\"copilotKitButtonIcon copilotKitButtonIconClose\">\n          {context.icons.closeIcon}\n        </div>\n      </button>\n    </div>\n  );\n};\n","import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n  /**\n   * The icon to use for the open chat button.\n   * @default <OpenIcon />\n   */\n  openIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button.\n   * @default <CloseIcon />\n   */\n  closeIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button in the header.\n   * @default <HeaderCloseIcon />\n   */\n  headerCloseIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the send button.\n   * @default <SendIcon />\n   */\n  sendIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the activity indicator.\n   * @default <ActivityIcon />\n   */\n  activityIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the spinner.\n   * @default <SpinnerIcon />\n   */\n  spinnerIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the stop button.\n   * @default <StopIcon />\n   */\n  stopIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the regenerate button.\n   * @default <RegenerateIcon />\n   */\n  regenerateIcon?: React.ReactNode;\n\n  /**\n   * The icons to use for push to talk.\n   * @default <PushToTalkIcon />\n   */\n\n  pushToTalkIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n  /**\n   * The initial message(s) to display in the chat window.\n   */\n  initial?: string | string[];\n\n  /**\n   * The title to display in the header.\n   * @default \"CopilotKit\"\n   */\n  title?: string;\n\n  /**\n   * The placeholder to display in the input.\n   * @default \"Type a message...\"\n   */\n  placeholder?: string;\n\n  /**\n   * The message to display when an error occurs.\n   * @default \"❌ An error occurred. Please try again.\"\n   */\n  error?: string;\n\n  /**\n   * The label to display on the stop button.\n   * @default \"Stop generating\"\n   */\n  stopGenerating?: string;\n\n  /**\n   * The label to display on the regenerate button.\n   * @default \"Regenerate response\"\n   */\n  regenerateResponse?: string;\n}\n\ninterface ChatContext {\n  labels: Required<CopilotChatLabels>;\n  icons: Required<CopilotChatIcons>;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n  const context = React.useContext(ChatContext);\n  if (context === undefined) {\n    throw new Error(\n      \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n    );\n  }\n  return context;\n}\n\ninterface ChatContextProps {\n  // temperature?: number;\n  // instructions?: string;\n  // maxFeedback?: number;\n  labels?: CopilotChatLabels;\n  icons?: CopilotChatIcons;\n  children?: React.ReactNode;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n  // temperature,\n  // instructions,\n  // maxFeedback,\n  labels,\n  icons,\n  children,\n  open,\n  setOpen,\n}: ChatContextProps) => {\n  const context = {\n    labels: {\n      ...{\n        initial: \"\",\n        title: \"CopilotKit\",\n        placeholder: \"Type a message...\",\n        error: \"❌ An error occurred. Please try again.\",\n        stopGenerating: \"Stop generating\",\n        regenerateResponse: \"Regenerate response\",\n      },\n      ...labels,\n    },\n\n    icons: {\n      ...{\n        openIcon: DefaultIcons.OpenIcon,\n        closeIcon: DefaultIcons.CloseIcon,\n        headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n        sendIcon: DefaultIcons.SendIcon,\n        activityIcon: DefaultIcons.ActivityIcon,\n        spinnerIcon: DefaultIcons.SpinnerIcon,\n        stopIcon: DefaultIcons.StopIcon,\n        regenerateIcon: DefaultIcons.RegenerateIcon,\n        pushToTalkIcon: DefaultIcons.PushToTalkIcon,\n      },\n      icons,\n    },\n    open,\n    setOpen,\n  };\n  return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyC;AA6KhC;AA/DF,IAAM,cAAc,aAAAA,QAAM,cAAuC,MAAS;AAE1E,SAAS,iBAA8B;AAC5C,QAAM,UAAU,aAAAA,QAAM,WAAW,WAAW;AAC5C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;;;ADhHM,IAAAC,sBAAA;AALC,IAAM,SAAS,CAAC,EAAE,MAAM,QAAQ,MAAmB;AACxD,QAAM,UAAU,eAAe;AAE/B,SACE,6CAAC,SAAI,SAAS,MAAM,QAAQ,CAAC,IAAI,GAC/B;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,oBAAoB,OAAO,SAAS;AAAA,MAC/C,cAAY,OAAO,eAAe;AAAA,MAElC;AAAA,qDAAC,SAAI,WAAU,iDACZ,kBAAQ,MAAM,UACjB;AAAA,QACA,6CAAC,SAAI,WAAU,kDACZ,kBAAQ,MAAM,WACjB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":["React","import_jsx_runtime"]}

package/dist/components/chat/Button.mjs

@@ -1,9 +1,9 @@
 import {
   Button
-} from "../../chunk-5ASYNEHX.mjs";
-import "../../chunk-KZME7C5S.mjs";
-import "../../chunk-FWTPMPSN.mjs";
-import "../../chunk-SKC7AJIV.mjs";
+} from "../../chunk-RT2XG2T7.mjs";
+import "../../chunk-VUZA5AFH.mjs";
+import "../../chunk-FZC7X5PK.mjs";
+import "../../chunk-MRXNTQOX.mjs";
 export {
   Button
 };

package/dist/components/chat/Chat.d.ts

@@ -1,9 +1,55 @@
-import React from 'react';
 import { CopilotChatIcons, CopilotChatLabels } from './ChatContext.js';
+import React__default from 'react';
 import { SystemMessageFunction } from '@copilotkit/react-core';
-import { WindowProps, ButtonProps, HeaderProps, MessagesProps, InputProps, ResponseButtonProps } from './props.js';
-import '../../types/suggestions.js';
-import '@copilotkit/shared';
+import { CopilotChatSuggestion } from '../../types/suggestions.js';
+import { Message } from '@copilotkit/shared';
+import { MessagesProps, InputProps, ResponseButtonProps } from './props.js';
+
+/**
+ * An embeddable chat panel for CopilotKit.
+ *
+ * <img src="/images/CopilotChat/CopilotChat.gif" width="500" />
+ *
+ * A chatbot panel component for the CopilotKit framework. The component allows for a high degree
+ * of customization through various props and custom CSS.
+ *
+ * <RequestExample>
+ *   ```jsx CopilotChat Example
+ *   import { CopilotChat } from "@copilotkit/react-ui";
+ *
+ *   <CopilotChat
+ *     labels={{
+ *       title: "Your Assistant",
+ *       initial: "Hi! 👋 How can I assist you today?",
+ *     }}
+ *   />
+ *   ```
+ * </RequestExample>
+ *
+ * ## Custom CSS
+ *
+ * You can customize the colors of the panel by overriding the CSS variables
+ * defined in the [default styles](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/colors.css).
+ *
+ * For example, to set the primary color to purple:
+ *
+ * ```jsx
+ * <div style={{ "--copilot-kit-primary-color": "#7D5BA6" }}>
+ *   <CopilotPopup />
+ * </div>
+ * ```
+ *
+ * To further customize the panel, you can override the CSS classes defined
+ * [here](https://github.com/CopilotKit/CopilotKit/blob/main/CopilotKit/packages/react-ui/src/css/).
+ *
+ * For example:
+ *
+ * ```css
+ * .copilotKitButton {
+ *   border-radius: 0;
+ * }
+ * ```
+ */
 
 /**
  * Props for CopilotChat component.
@@ -18,25 +64,6 @@ interface CopilotChatProps {
      * user's needs or the application's requirements.
      */
     instructions?: string;
-    /**
-     * Whether the chat window should be open by default.
-     * @default false
-     */
-    defaultOpen?: boolean;
-    /**
-     * If the chat window should close when the user clicks outside of it.
-     * @default true
-     */
-    clickOutsideToClose?: boolean;
-    /**
-     * If the chat window should close when the user hits the Escape key.
-     * @default true
-     */
-    hitEscapeToClose?: boolean;
-    /**
-     * A callback that gets called when the chat window opens or closes.
-     */
-    onSetOpen?: (open: boolean) => void;
     /**
      * A callback that gets called when the in progress state changes.
      */
@@ -45,12 +72,6 @@ interface CopilotChatProps {
      * A callback that gets called when a new message it submitted.
      */
     onSubmitMessage?: (message: string) => void;
-    /**
-     * The shortcut key to open the chat window.
-     * Uses Command-[shortcut] on a Mac and Ctrl-[shortcut] on Windows.
-     * @default "/"
-     */
-    shortcut?: string;
     /**
      * Icons can be used to set custom icons for the chat window.
      */
@@ -71,30 +92,18 @@ interface CopilotChatProps {
      * @default true
      */
     showResponseButton?: boolean;
-    /**
-     * A custom Window component to use instead of the default.
-     */
-    Window?: React.ComponentType<WindowProps>;
-    /**
-     * A custom Button component to use instead of the default.
-     */
-    Button?: React.ComponentType<ButtonProps>;
-    /**
-     * A custom Header component to use instead of the default.
-     */
-    Header?: React.ComponentType<HeaderProps>;
     /**
      * A custom Messages component to use instead of the default.
      */
-    Messages?: React.ComponentType<MessagesProps>;
+    Messages?: React__default.ComponentType<MessagesProps>;
     /**
      * A custom Input component to use instead of the default.
      */
-    Input?: React.ComponentType<InputProps>;
+    Input?: React__default.ComponentType<InputProps>;
     /**
      * A custom ResponseButton component to use instead of the default.
      */
-    ResponseButton?: React.ComponentType<ResponseButtonProps>;
+    ResponseButton?: React__default.ComponentType<ResponseButtonProps>;
     /**
      * A class name to apply to the root element.
      */
@@ -102,8 +111,18 @@ interface CopilotChatProps {
     /**
      * Children to render.
      */
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 }
-declare const CopilotChat: ({ instructions, defaultOpen, clickOutsideToClose, hitEscapeToClose, onSetOpen, onSubmitMessage, shortcut, icons, labels, makeSystemMessage, showResponseButton, onInProgress, Window, Button, Header, Messages, Input, ResponseButton, className, children, }: CopilotChatProps) => JSX.Element;
+declare function CopilotChat({ instructions, onSubmitMessage, icons, labels, makeSystemMessage, showResponseButton, onInProgress, Messages, Input, ResponseButton, className, }: CopilotChatProps): JSX.Element;
+declare const useCopilotChatLogic: (instructions?: string, makeSystemMessage?: SystemMessageFunction, onInProgress?: ((isLoading: boolean) => void) | undefined, onSubmitMessage?: ((messageContent: string) => void) | undefined) => {
+    visibleMessages: Message[];
+    isLoading: boolean;
+    currentSuggestions: CopilotChatSuggestion[];
+    sendMessage: (messageContent: string) => Promise<Message>;
+    stop: () => void;
+    reload: () => Promise<void>;
+    input: string;
+    setInput: React__default.Dispatch<React__default.SetStateAction<string>>;
+};
 
-export { CopilotChat, CopilotChatProps };
+export { CopilotChat, CopilotChatProps, useCopilotChatLogic };