@copilotkit/react-ui 1.51.4-next.7 → 1.51.4-next.8

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # ui
 
+## 1.51.4-next.8
+
+### Patch Changes
+
+- Updated dependencies [9bc868d]
+  - @copilotkit/react-core@1.51.4-next.8
+  - @copilotkit/runtime-client-gql@1.51.4-next.8
+  - @copilotkit/shared@1.51.4-next.8
+
 ## 1.51.4-next.7
 
 ### Patch Changes

package/README.md

@@ -48,9 +48,9 @@
 const { visibleMessages, appendMessage, setMessages, ... } = useCopilotChat();
 
 // Pre-built components with deep customization options (CSS + pass custom sub-components)
-<CopilotPopup 
-  instructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."} 
-  labels={{ title: "Popup Assistant", initial: "Need any help?" }} 
+<CopilotPopup
+  instructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."}
+  labels={{ title: "Popup Assistant", initial: "Need any help?" }}
 />
 ```
 
@@ -71,9 +71,9 @@ useCopilotAction({
 
 ```ts
 // Share state between app and agent
-const { agentState } = useCoAgent({ 
-  name: "basic_agent", 
-  initialState: { input: "NYC" } 
+const { agentState } = useCoAgent({
+  name: "basic_agent",
+  initialState: { input: "NYC" }
 });
 
 // agentic generative UI
@@ -114,14 +114,20 @@ useCopilotAction({
 ```ts
 // intermediate agent state streaming (supports both LangGraph.js + LangGraph python)
 const modifiedConfig = copilotKitCustomizeConfig(config, {
-  emitIntermediateState: [{ 
-    stateKey: "outline", 
-    tool: "set_outline", 
-    toolArgument: "outline" 
-  }],
+  emitIntermediateState: [
+    {
+      stateKey: "outline",
+      tool: "set_outline",
+      toolArgument: "outline",
+    },
+  ],
 });
-const response = await ChatOpenAI({ model: "gpt-4o" }).invoke(messages, modifiedConfig);
+const response = await ChatOpenAI({ model: "gpt-4o" }).invoke(
+  messages,
+  modifiedConfig,
+);
 ```
+
 ## 🏆 Featured Examples
 
 <p align="center">

package/dist/{chunk-O72ZB5V3.mjs → chunk-2QEDCM6H.mjs}

@@ -4,7 +4,10 @@ import {
 } from "./chunk-MRXNTQOX.mjs";
 
 // src/hooks/use-push-to-talk.tsx
-import { useCopilotContext, useCopilotMessagesContext } from "@copilotkit/react-core";
+import {
+  useCopilotContext,
+  useCopilotMessagesContext
+} from "@copilotkit/react-core";
 import { gqlToAGUI } from "@copilotkit/runtime-client-gql";
 import { useEffect, useRef, useState } from "react";
 var checkMicrophonePermission = () => __async(void 0, null, function* () {
@@ -34,7 +37,9 @@ var requestMicAndPlaybackPermission = () => __async(void 0, null, function* () {
 });
 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 });
+    mediaStreamRef.current = yield navigator.mediaDevices.getUserMedia({
+      audio: true
+    });
     audioContextRef.current = new window.AudioContext();
     yield audioContextRef.current.resume();
   }
@@ -103,14 +108,15 @@ var usePushToTalk = ({
     } 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);
-          })
-        );
+        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 () => {
@@ -125,7 +131,11 @@ var usePushToTalk = ({
       const aguiMessages = gqlToAGUI(context.messages);
       const messagesAfterLast = aguiMessages.slice(lastMessageIndex + 1).filter((message) => message.role === "assistant");
       const text = messagesAfterLast.map((message) => message.content).join("\n");
-      playAudioResponse(text, context.copilotApiConfig.textToSpeechUrl, audioContextRef.current);
+      playAudioResponse(
+        text,
+        context.copilotApiConfig.textToSpeechUrl,
+        audioContextRef.current
+      );
       setStartReadingFromMessageId(null);
     }
   }, [startReadingFromMessageId, inProgress]);
@@ -137,4 +147,4 @@ export {
   requestMicAndPlaybackPermission,
   usePushToTalk
 };
-//# sourceMappingURL=chunk-O72ZB5V3.mjs.map
+//# sourceMappingURL=chunk-2QEDCM6H.mjs.map

package/dist/chunk-2QEDCM6H.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-push-to-talk.tsx"],"sourcesContent":["import {\n  useCopilotContext,\n  useCopilotMessagesContext,\n} from \"@copilotkit/react-core\";\nimport { gqlToAGUI } from \"@copilotkit/runtime-client-gql\";\nimport { Message } from \"@copilotkit/shared\";\nimport { MutableRefObject, useEffect, useRef, useState } from \"react\";\n\nexport const checkMicrophonePermission = async () => {\n  try {\n    const permissionStatus = await navigator.permissions.query({\n      name: \"microphone\" as PermissionName,\n    });\n    if (permissionStatus.state === \"granted\") {\n      return true;\n    } else {\n      return false;\n    }\n  } catch (err) {\n    console.error(\"Error checking microphone permission\", err);\n  }\n};\n\nexport const requestMicAndPlaybackPermission = async () => {\n  try {\n    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n    const audioContext = new window.AudioContext();\n    await audioContext.resume();\n    return { stream, audioContext };\n  } catch (err) {\n    console.error(\"Error requesting microphone and playback permissions\", err);\n    return null;\n  }\n};\n\nconst startRecording = async (\n  mediaStreamRef: MutableRefObject<MediaStream | null>,\n  mediaRecorderRef: MutableRefObject<MediaRecorder | null>,\n  audioContextRef: MutableRefObject<AudioContext | null>,\n  recordedChunks: Blob[],\n  onStop: () => void,\n) => {\n  if (!mediaStreamRef.current || !audioContextRef.current) {\n    mediaStreamRef.current = await navigator.mediaDevices.getUserMedia({\n      audio: true,\n    });\n    audioContextRef.current = new window.AudioContext();\n    await audioContextRef.current.resume();\n  }\n\n  mediaRecorderRef.current = new MediaRecorder(mediaStreamRef.current!);\n  mediaRecorderRef.current.start(1000);\n  mediaRecorderRef.current.ondataavailable = (event) => {\n    recordedChunks.push(event.data);\n  };\n  mediaRecorderRef.current.onstop = onStop;\n};\n\nconst stopRecording = (\n  mediaRecorderRef: MutableRefObject<MediaRecorder | null>,\n) => {\n  if (\n    mediaRecorderRef.current &&\n    mediaRecorderRef.current.state !== \"inactive\"\n  ) {\n    mediaRecorderRef.current.stop();\n  }\n};\n\nconst transcribeAudio = async (\n  recordedChunks: Blob[],\n  transcribeAudioUrl: string,\n) => {\n  const completeBlob = new Blob(recordedChunks, { type: \"audio/mp4\" });\n  const formData = new FormData();\n  formData.append(\"file\", completeBlob, \"recording.mp4\");\n\n  const response = await fetch(transcribeAudioUrl, {\n    method: \"POST\",\n    body: formData,\n  });\n\n  if (!response.ok) {\n    throw new Error(`Error: ${response.statusText}`);\n  }\n\n  const transcription = await response.json();\n  return transcription.text;\n};\n\nconst playAudioResponse = (\n  text: string,\n  textToSpeechUrl: string,\n  audioContext: AudioContext,\n) => {\n  const encodedText = encodeURIComponent(text);\n  const url = `${textToSpeechUrl}?text=${encodedText}`;\n\n  fetch(url)\n    .then((response) => response.arrayBuffer())\n    .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))\n    .then((audioBuffer) => {\n      const source = audioContext.createBufferSource();\n      source.buffer = audioBuffer;\n      source.connect(audioContext.destination);\n      source.start(0);\n    })\n    .catch((error) => {\n      console.error(\"Error with decoding audio data\", error);\n    });\n};\n\nexport type PushToTalkState = \"idle\" | \"recording\" | \"transcribing\";\n\nexport type SendFunction = (text: string) => Promise<Message>;\n\nexport const usePushToTalk = ({\n  sendFunction,\n  inProgress,\n}: {\n  sendFunction: SendFunction;\n  inProgress: boolean;\n}) => {\n  const [pushToTalkState, setPushToTalkState] =\n    useState<PushToTalkState>(\"idle\");\n  const mediaStreamRef = useRef<MediaStream | null>(null);\n  const audioContextRef = useRef<AudioContext | null>(null);\n  const mediaRecorderRef = useRef<MediaRecorder | null>(null);\n  const recordedChunks = useRef<Blob[]>([]);\n  const generalContext = useCopilotContext();\n  const messagesContext = useCopilotMessagesContext();\n  const context = { ...generalContext, ...messagesContext };\n  const [startReadingFromMessageId, setStartReadingFromMessageId] = useState<\n    string | null\n  >(null);\n\n  useEffect(() => {\n    if (pushToTalkState === \"recording\") {\n      startRecording(\n        mediaStreamRef,\n        mediaRecorderRef,\n        audioContextRef,\n        recordedChunks.current,\n        () => {\n          setPushToTalkState(\"transcribing\");\n        },\n      );\n    } else {\n      stopRecording(mediaRecorderRef);\n      if (pushToTalkState === \"transcribing\") {\n        transcribeAudio(\n          recordedChunks.current,\n          context.copilotApiConfig.transcribeAudioUrl!,\n        ).then(async (transcription) => {\n          recordedChunks.current = [];\n          setPushToTalkState(\"idle\");\n          const message = await sendFunction(transcription);\n          setStartReadingFromMessageId(message.id);\n        });\n      }\n    }\n\n    return () => {\n      stopRecording(mediaRecorderRef);\n    };\n  }, [pushToTalkState]);\n\n  useEffect(() => {\n    if (inProgress === false && startReadingFromMessageId) {\n      const lastMessageIndex = context.messages.findIndex(\n        (message) => message.id === startReadingFromMessageId,\n      );\n\n      const aguiMessages = gqlToAGUI(context.messages);\n\n      const messagesAfterLast = aguiMessages\n        .slice(lastMessageIndex + 1)\n        .filter((message) => message.role === \"assistant\");\n\n      const text = messagesAfterLast\n        .map((message) => message.content)\n        .join(\"\\n\");\n      playAudioResponse(\n        text,\n        context.copilotApiConfig.textToSpeechUrl!,\n        audioContextRef.current!,\n      );\n\n      setStartReadingFromMessageId(null);\n    }\n  }, [startReadingFromMessageId, inProgress]);\n\n  return { pushToTalkState, setPushToTalkState };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-54JAUBUJ.mjs → chunk-6SMTHXVA.mjs}

@@ -1,6 +1,8 @@
 // src/hooks/use-copy-to-clipboard.tsx
 import * as React from "react";
-function useCopyToClipboard({ timeout = 2e3 }) {
+function useCopyToClipboard({
+  timeout = 2e3
+}) {
   const [isCopied, setIsCopied] = React.useState(false);
   const copyToClipboard = (value) => {
     var _a;
@@ -23,4 +25,4 @@ function useCopyToClipboard({ timeout = 2e3 }) {
 export {
   useCopyToClipboard
 };
-//# sourceMappingURL=chunk-54JAUBUJ.mjs.map
+//# sourceMappingURL=chunk-6SMTHXVA.mjs.map

package/dist/chunk-6SMTHXVA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-copy-to-clipboard.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport interface useCopyToClipboardProps {\n  timeout?: number;\n}\n\nexport function useCopyToClipboard({\n  timeout = 2000,\n}: useCopyToClipboardProps) {\n  const [isCopied, setIsCopied] = React.useState<Boolean>(false);\n\n  const copyToClipboard = (value: string) => {\n    if (typeof window === \"undefined\" || !navigator.clipboard?.writeText) {\n      return;\n    }\n\n    if (!value) {\n      return;\n    }\n\n    navigator.clipboard.writeText(value).then(() => {\n      setIsCopied(true);\n\n      setTimeout(() => {\n        setIsCopied(false);\n      }, timeout);\n    });\n  };\n\n  return { isCopied, copyToClipboard };\n}\n"],"mappings":";AAAA,YAAY,WAAW;AAMhB,SAAS,mBAAmB;AAAA,EACjC,UAAU;AACZ,GAA4B;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAU,eAAkB,KAAK;AAE7D,QAAM,kBAAkB,CAAC,UAAkB;AAX7C;AAYI,QAAI,OAAO,WAAW,eAAe,GAAC,eAAU,cAAV,mBAAqB,YAAW;AACpE;AAAA,IACF;AAEA,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,cAAU,UAAU,UAAU,KAAK,EAAE,KAAK,MAAM;AAC9C,kBAAY,IAAI;AAEhB,iBAAW,MAAM;AACf,oBAAY,KAAK;AAAA,MACnB,GAAG,OAAO;AAAA,IACZ,CAAC;AAAA,EACH;AAEA,SAAO,EAAE,UAAU,gBAAgB;AACrC;","names":[]}

package/dist/{chunk-IEMQ2SQW.mjs → chunk-6TLDRWAD.mjs}

@@ -12,7 +12,7 @@ import {
   ThumbsDownIcon,
   ThumbsUpIcon,
   UploadIcon
-} from "./chunk-XWG3L6QC.mjs";
+} from "./chunk-GBAPANZE.mjs";
 import {
   __spreadValues
 } from "./chunk-MRXNTQOX.mjs";
@@ -20,7 +20,9 @@ import {
 // src/components/chat/ChatContext.tsx
 import React, { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-var ChatContext = React.createContext(void 0);
+var ChatContext = React.createContext(
+  void 0
+);
 function useChatContext() {
   const context = React.useContext(ChatContext);
   if (context === void 0) {
@@ -90,4 +92,4 @@ export {
   useChatContext,
   ChatContextProvider
 };
-//# sourceMappingURL=chunk-IEMQ2SQW.mjs.map
+//# sourceMappingURL=chunk-6TLDRWAD.mjs.map

package/dist/{chunk-IEMQ2SQW.mjs.map → chunk-6TLDRWAD.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/chat/ChatContext.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\nimport { ThumbsDownIcon, ThumbsUpIcon } 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   * The icons to use for copy assistant response\n   * @default <CopyIcon />\n   */\n\n  copyIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for thumbs up/response approval.\n   * @default <ThumbsUpIcon />\n   */\n\n  thumbsUpIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for thumbs down/response rejection.\n   * @default <ThumbsDownIcon />\n   */\n\n  thumbsDownIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the upload button.\n   * @default <UploadIcon />\n   */\n  uploadIcon?: 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  /**\n   * The label for the copy button.\n   * @default \"Copy to clipboard\"\n   */\n  copyToClipboard?: string;\n\n  /**\n   * The label for the thumbs up button.\n   * @default \"Thumbs up\"\n   */\n  thumbsUp?: string;\n\n  /**\n   * The label for the thumbs down button.\n   * @default \"Thumbs down\"\n   */\n  thumbsDown?: string;\n\n  /**\n   * The text to display when content is copied.\n   * @default \"Copied!\"\n   */\n  copied?: 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 memoizedLabels = useMemo(\n    () => ({\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        copyToClipboard: \"Copy to clipboard\",\n        thumbsUp: \"Thumbs up\",\n        thumbsDown: \"Thumbs down\",\n        copied: \"Copied!\",\n      },\n      ...labels,\n    }),\n    [labels],\n  );\n\n  const memoizedIcons = useMemo(\n    () => ({\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.MicrophoneIcon,\n        copyIcon: DefaultIcons.CopyIcon,\n        thumbsUpIcon: DefaultIcons.ThumbsUpIcon,\n        thumbsDownIcon: DefaultIcons.ThumbsDownIcon,\n        uploadIcon: DefaultIcons.UploadIcon,\n      },\n      ...icons,\n    }),\n    [icons],\n  );\n\n  const context = useMemo(\n    () => ({\n      labels: memoizedLabels,\n      icons: memoizedIcons,\n      open,\n      setOpen,\n    }),\n    [memoizedLabels, memoizedIcons, open, setOpen],\n  );\n\n  return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS,eAAyB;AAsPhC;AApFF,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,iBAAiB;AAAA,IACrB,MAAO,kCACF;AAAA,MACD,SAAS;AAAA,MACT,OAAO;AAAA,MACP,aAAa;AAAA,MACb,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV,IACG;AAAA,IAEL,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,gBAAgB;AAAA,IACpB,MAAO,kCACF;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,MAC7B,UAAuB;AAAA,MACvB,cAA2B;AAAA,MAC3B,gBAA6B;AAAA,MAC7B,YAAyB;AAAA,IAC3B,IACG;AAAA,IAEL,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,eAAe,MAAM,OAAO;AAAA,EAC/C;AAEA,SAAO,oBAAC,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAS;AACzD;","names":[]}
+{"version":3,"sources":["../src/components/chat/ChatContext.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\nimport { ThumbsDownIcon, ThumbsUpIcon } 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   * The icons to use for copy assistant response\n   * @default <CopyIcon />\n   */\n\n  copyIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for thumbs up/response approval.\n   * @default <ThumbsUpIcon />\n   */\n\n  thumbsUpIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for thumbs down/response rejection.\n   * @default <ThumbsDownIcon />\n   */\n\n  thumbsDownIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the upload button.\n   * @default <UploadIcon />\n   */\n  uploadIcon?: 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  /**\n   * The label for the copy button.\n   * @default \"Copy to clipboard\"\n   */\n  copyToClipboard?: string;\n\n  /**\n   * The label for the thumbs up button.\n   * @default \"Thumbs up\"\n   */\n  thumbsUp?: string;\n\n  /**\n   * The label for the thumbs down button.\n   * @default \"Thumbs down\"\n   */\n  thumbsDown?: string;\n\n  /**\n   * The text to display when content is copied.\n   * @default \"Copied!\"\n   */\n  copied?: 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>(\n  undefined,\n);\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 memoizedLabels = useMemo(\n    () => ({\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        copyToClipboard: \"Copy to clipboard\",\n        thumbsUp: \"Thumbs up\",\n        thumbsDown: \"Thumbs down\",\n        copied: \"Copied!\",\n      },\n      ...labels,\n    }),\n    [labels],\n  );\n\n  const memoizedIcons = useMemo(\n    () => ({\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.MicrophoneIcon,\n        copyIcon: DefaultIcons.CopyIcon,\n        thumbsUpIcon: DefaultIcons.ThumbsUpIcon,\n        thumbsDownIcon: DefaultIcons.ThumbsDownIcon,\n        uploadIcon: DefaultIcons.UploadIcon,\n      },\n      ...icons,\n    }),\n    [icons],\n  );\n\n  const context = useMemo(\n    () => ({\n      labels: memoizedLabels,\n      icons: memoizedIcons,\n      open,\n      setOpen,\n    }),\n    [memoizedLabels, memoizedIcons, open, setOpen],\n  );\n\n  return (\n    <ChatContext.Provider value={context}>{children}</ChatContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS,eAAyB;AAyPrC;AAvFG,IAAM,cAAc,MAAM;AAAA,EAC/B;AACF;AAEO,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,iBAAiB;AAAA,IACrB,MAAO,kCACF;AAAA,MACD,SAAS;AAAA,MACT,OAAO;AAAA,MACP,aAAa;AAAA,MACb,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV,IACG;AAAA,IAEL,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,gBAAgB;AAAA,IACpB,MAAO,kCACF;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,MAC7B,UAAuB;AAAA,MACvB,cAA2B;AAAA,MAC3B,gBAA6B;AAAA,MAC7B,YAAyB;AAAA,IAC3B,IACG;AAAA,IAEL,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,eAAe,MAAM,OAAO;AAAA,EAC/C;AAEA,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAS;AAEpD;","names":[]}

package/dist/{chunk-UFN2VWSR.mjs → chunk-72FQQMQ2.mjs}

@@ -1,6 +1,6 @@
 import {
   useChatContext
-} from "./chunk-IEMQ2SQW.mjs";
+} from "./chunk-6TLDRWAD.mjs";
 
 // src/components/chat/Button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -22,4 +22,4 @@ var Button = ({}) => {
 export {
   Button
 };
-//# sourceMappingURL=chunk-UFN2VWSR.mjs.map
+//# sourceMappingURL=chunk-72FQQMQ2.mjs.map

package/dist/chunk-72FQQMQ2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/Button.tsx"],"sourcesContent":["import { ButtonProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\n\nexport const Button = ({}: ButtonProps) => {\n  const { open, setOpen, icons } = 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          {icons.openIcon}\n        </div>\n        <div className=\"copilotKitButtonIcon copilotKitButtonIconClose\">\n          {icons.closeIcon}\n        </div>\n      </button>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAQM,SAIE,KAJF;AALC,IAAM,SAAS,CAAC,CAAC,MAAmB;AACzC,QAAM,EAAE,MAAM,SAAS,MAAM,IAAI,eAAe;AAEhD,SACE,oBAAC,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,4BAAC,SAAI,WAAU,iDACZ,gBAAM,UACT;AAAA,QACA,oBAAC,SAAI,WAAU,kDACZ,gBAAM,WACT;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/{chunk-ELGRNEAO.mjs → chunk-AOUHT4JR.mjs}

@@ -5,7 +5,9 @@ import {
 // src/components/chat/PoweredByTag.tsx
 import { useState, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
-function PoweredByTag({ showPoweredBy = true }) {
+function PoweredByTag({
+  showPoweredBy = true
+}) {
   const [mounted, setMounted] = useState(false);
   const isDark = useDarkMode();
   useEffect(() => {
@@ -29,4 +31,4 @@ function PoweredByTag({ showPoweredBy = true }) {
 export {
   PoweredByTag
 };
-//# sourceMappingURL=chunk-ELGRNEAO.mjs.map
+//# sourceMappingURL=chunk-AOUHT4JR.mjs.map

package/dist/chunk-AOUHT4JR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/PoweredByTag.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { useDarkMode } from \"../../hooks/use-dark-mode\";\n\nexport function PoweredByTag({\n  showPoweredBy = true,\n}: {\n  showPoweredBy?: boolean;\n}) {\n  const [mounted, setMounted] = useState(false);\n  const isDark = useDarkMode();\n\n  /*\n    note(tylerslaton):\n\n    Ensure we only use the isDark computed value after client-side mount.\n    This prevents hydration mismatches by using a default color on the\n    server and initial client render, then updating to the correct\n    dark mode color after hydration is complete.\n  */\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!showPoweredBy) {\n    return null;\n  }\n\n  const poweredByStyle = {\n    visibility: \"visible\",\n    display: \"block\",\n    position: \"static\",\n    textAlign: \"center\",\n    fontSize: \"12px\",\n    padding: \"3px 0\",\n    color: mounted && isDark ? \"rgb(69, 69, 69)\" : \"rgb(214, 214, 214)\",\n  };\n\n  return (\n    <div>\n      {/*@ts-expect-error -- expecting position not to be a string, but it can be.*/}\n      <p className=\"poweredBy\" style={poweredByStyle}>\n        Powered by CopilotKit\n      </p>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAgB,UAAU,iBAAiB;AAwCrC;AArCC,SAAS,aAAa;AAAA,EAC3B,gBAAgB;AAClB,GAEG;AACD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,SAAS,YAAY;AAU3B,YAAU,MAAM;AACd,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,QAAM,iBAAiB;AAAA,IACrB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO,WAAW,SAAS,oBAAoB;AAAA,EACjD;AAEA,SACE,oBAAC,SAEC,8BAAC,OAAE,WAAU,aAAY,OAAO,gBAAgB,mCAEhD,GACF;AAEJ;","names":[]}

package/dist/{chunk-C3GSYRC3.mjs → chunk-BNJX66OH.mjs}

@@ -1,6 +1,6 @@
 import {
   useChatContext
-} from "./chunk-IEMQ2SQW.mjs";
+} from "./chunk-6TLDRWAD.mjs";
 
 // src/components/chat/Window.tsx
 import React, { useCallback, useEffect } from "react";
@@ -115,4 +115,4 @@ var preventScroll = (event) => {
 export {
   Window
 };
-//# sourceMappingURL=chunk-C3GSYRC3.mjs.map
+//# sourceMappingURL=chunk-BNJX66OH.mjs.map

package/dist/{chunk-NRA3CFEE.mjs → chunk-C27LZFA5.mjs}

@@ -1,6 +1,6 @@
 import {
   CloseIcon
-} from "./chunk-BH6PCAAL.mjs";
+} from "./chunk-JYHRHKV5.mjs";
 
 // src/components/help-modal/modal.tsx
 import { useState, useRef, useEffect } from "react";
@@ -94,4 +94,4 @@ function CopilotKitHelpModal() {
 export {
   CopilotKitHelpModal
 };
-//# sourceMappingURL=chunk-NRA3CFEE.mjs.map
+//# sourceMappingURL=chunk-C27LZFA5.mjs.map

package/dist/{chunk-FFJHOZX6.mjs → chunk-C7WM7GM3.mjs}

@@ -3,23 +3,26 @@ import {
   ChevronDownIcon,
   ExclamationMarkIcon,
   ExclamationMarkTriangleIcon
-} from "./chunk-Q5V6S67N.mjs";
+} from "./chunk-GFE5ZSPV.mjs";
 import {
   getPublishedCopilotKitVersion,
   logActions,
   logMessages,
   logReadables,
   shouldShowDevConsole
-} from "./chunk-JY2CSDKN.mjs";
+} from "./chunk-YDJ4YUUF.mjs";
 import {
   CopilotKitHelpModal
-} from "./chunk-NRA3CFEE.mjs";
+} from "./chunk-C27LZFA5.mjs";
 import {
   SmallSpinnerIcon
-} from "./chunk-XWG3L6QC.mjs";
+} from "./chunk-GBAPANZE.mjs";
 
 // src/components/dev-console/console.tsx
-import { useCopilotContext, useCopilotMessagesContext } from "@copilotkit/react-core";
+import {
+  useCopilotContext,
+  useCopilotMessagesContext
+} from "@copilotkit/react-core";
 import { useEffect, useRef, useState } from "react";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import { COPILOTKIT_VERSION } from "@copilotkit/shared";
@@ -35,7 +38,9 @@ function CopilotDevConsole() {
   const [versionStatus, setVersionStatus] = useState("unknown");
   const [latestVersion, setLatestVersion] = useState("");
   const consoleRef = useRef(null);
-  const [debugButtonMode, setDebugButtonMode] = useState("full");
+  const [debugButtonMode, setDebugButtonMode] = useState(
+    "full"
+  );
   const checkForUpdates = (force = false) => {
     setVersionStatus("checking");
     getPublishedCopilotKitVersion(currentVersion, force).then((v) => {
@@ -176,8 +181,22 @@ function DebugMenuButton({
         className: "copilotKitDebugMenu",
         style: { zIndex: 40 },
         children: [
-          /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", { className: "copilotKitDebugMenuItem", onClick: () => logReadables(context), children: "Log Readables" }) }),
-          /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", { className: "copilotKitDebugMenuItem", onClick: () => logActions(context), children: "Log Actions" }) }),
+          /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "copilotKitDebugMenuItem",
+              onClick: () => logReadables(context),
+              children: "Log Readables"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "copilotKitDebugMenuItem",
+              onClick: () => logActions(context),
+              children: "Log Actions"
+            }
+          ) }),
           /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx(
             "button",
             {
@@ -186,9 +205,23 @@ function DebugMenuButton({
               children: "Log Messages"
             }
           ) }),
-          /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", { className: "copilotKitDebugMenuItem", onClick: () => checkForUpdates(true), children: "Check for Updates" }) }),
+          /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "copilotKitDebugMenuItem",
+              onClick: () => checkForUpdates(true),
+              children: "Check for Updates"
+            }
+          ) }),
           /* @__PURE__ */ jsx("hr", {}),
-          /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", { className: "copilotKitDebugMenuItem", onClick: () => setShowDevConsole(false), children: "Hide Dev Console" }) })
+          /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "copilotKitDebugMenuItem",
+              onClick: () => setShowDevConsole(false),
+              children: "Hide Dev Console"
+            }
+          ) })
         ]
       }
     )
@@ -199,4 +232,4 @@ export {
   CopilotDevConsole,
   DebugMenuButton
 };
-//# sourceMappingURL=chunk-FFJHOZX6.mjs.map
+//# sourceMappingURL=chunk-C7WM7GM3.mjs.map

package/dist/chunk-C7WM7GM3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/dev-console/console.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCopilotContext,\n  useCopilotMessagesContext,\n} from \"@copilotkit/react-core\";\nimport {\n  getPublishedCopilotKitVersion,\n  logActions,\n  logMessages,\n  logReadables,\n  shouldShowDevConsole,\n} from \"./utils\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  CopilotKitIcon,\n  ExclamationMarkIcon,\n  ExclamationMarkTriangleIcon,\n} from \"./icons\";\nimport { Menu, MenuButton, MenuItem, MenuItems } from \"@headlessui/react\";\nimport { COPILOTKIT_VERSION } from \"@copilotkit/shared\";\nimport { SmallSpinnerIcon } from \"../chat/Icons\";\nimport { CopilotKitHelpModal } from \"../help-modal\";\n\ntype VersionStatus =\n  | \"unknown\"\n  | \"checking\"\n  | \"latest\"\n  | \"update-available\"\n  | \"outdated\";\n\nexport function CopilotDevConsole() {\n  const currentVersion = COPILOTKIT_VERSION;\n  const context = useCopilotContext();\n\n  // to prevent hydration errors, ensure that the component renders the same content\n  // server-side as it does during the initial client-side render to prevent a hydration\n  // mismatch\n  // see: https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only\n\n  const [showDevConsole, setShowDevConsole] = useState(false);\n\n  useEffect(() => {\n    setShowDevConsole(shouldShowDevConsole(context.showDevConsole));\n  }, [context.showDevConsole]);\n\n  const dontRunTwiceInDevMode = useRef(false);\n  const [versionStatus, setVersionStatus] = useState<VersionStatus>(\"unknown\");\n  const [latestVersion, setLatestVersion] = useState<string>(\"\");\n  const consoleRef = useRef<HTMLDivElement>(null);\n  const [debugButtonMode, setDebugButtonMode] = useState<\"full\" | \"compact\">(\n    \"full\",\n  );\n\n  const checkForUpdates = (force: boolean = false) => {\n    setVersionStatus(\"checking\");\n\n    getPublishedCopilotKitVersion(currentVersion, force)\n      .then((v) => {\n        setLatestVersion(v.latest);\n        let versionOk = false;\n\n        // match exact version or a version with a letter (e.g. 1.0.0-alpha.1)\n        if (v.current === v.latest) {\n          versionOk = true;\n        } else if (/[a-zA-Z]/.test(v.current)) {\n          versionOk = true;\n        }\n\n        if (versionOk) {\n          setVersionStatus(\"latest\");\n        } else if (v.severity !== \"low\") {\n          setVersionStatus(\"outdated\");\n        } else {\n          setVersionStatus(\"update-available\");\n        }\n      })\n      .catch((e) => {\n        console.error(e);\n        setVersionStatus(\"unknown\");\n      });\n  };\n\n  useEffect(() => {\n    if (dontRunTwiceInDevMode.current === true) {\n      return;\n    }\n    dontRunTwiceInDevMode.current = true;\n\n    checkForUpdates();\n  }, []);\n\n  if (!showDevConsole) {\n    return null;\n  }\n  return (\n    <div\n      ref={consoleRef}\n      className={\n        \"copilotKitDevConsole \" +\n        (versionStatus === \"update-available\"\n          ? \"copilotKitDevConsoleUpgrade\"\n          : \"\") +\n        (versionStatus === \"outdated\" ? \"copilotKitDevConsoleWarnOutdated\" : \"\")\n      }\n    >\n      <VersionInfo\n        showDevConsole={context.showDevConsole}\n        versionStatus={versionStatus}\n        currentVersion={currentVersion}\n        latestVersion={latestVersion}\n      />\n\n      <CopilotKitHelpModal />\n\n      <DebugMenuButton\n        setShowDevConsole={setShowDevConsole}\n        checkForUpdates={checkForUpdates}\n        mode={debugButtonMode}\n      />\n    </div>\n  );\n}\n\nfunction VersionInfo({\n  showDevConsole,\n  versionStatus,\n  currentVersion,\n  latestVersion,\n}: {\n  showDevConsole: boolean;\n  versionStatus: VersionStatus;\n  currentVersion: string;\n  latestVersion: string;\n}) {\n  const [copyStatus, setCopyStatus] = useState<string>(\"\");\n\n  let versionLabel = \"\";\n  let versionIcon: any = \"\";\n  let currentVersionLabel = currentVersion;\n\n  if (versionStatus === \"latest\") {\n    versionLabel = \"latest\";\n    versionIcon = CheckIcon;\n  } else if (versionStatus === \"checking\") {\n    versionLabel = \"checking\";\n    versionIcon = SmallSpinnerIcon;\n  } else if (versionStatus === \"update-available\") {\n    versionLabel = \"update available\";\n    versionIcon = ExclamationMarkIcon;\n    currentVersionLabel = `${currentVersion} → ${latestVersion}`;\n  } else if (versionStatus === \"outdated\") {\n    versionLabel = \"outdated\";\n    versionIcon = ExclamationMarkTriangleIcon;\n    currentVersionLabel = `${currentVersion} → ${latestVersion}`;\n  }\n\n  let asideLabel = \"\";\n  if (showDevConsole === true) {\n    asideLabel = \"(enabled)\";\n  }\n\n  const installCommand = [\n    `npm install`,\n    `@copilotkit/react-core@${latestVersion}`,\n    `@copilotkit/react-ui@${latestVersion}`,\n    `@copilotkit/react-textarea@${latestVersion}`,\n    `&& npm install @copilotkit/runtime@${latestVersion}`,\n  ].join(\" \");\n\n  const handleCopyClick = () => {\n    navigator.clipboard.writeText(installCommand.trim()).then(() => {\n      setCopyStatus(\"Command copied to clipboard!\");\n      setTimeout(() => setCopyStatus(\"\"), 1000);\n    });\n  };\n\n  if (versionStatus === \"update-available\" || versionStatus === \"outdated\") {\n    return (\n      <div className=\"copilotKitVersionInfo\">\n        <p>\n          {currentVersionLabel} {versionIcon}\n        </p>\n        <button onClick={handleCopyClick}>\n          {copyStatus || installCommand}\n        </button>\n      </div>\n    );\n  }\n\n  return null;\n}\n\nexport default function DebugMenuButton({\n  setShowDevConsole,\n  checkForUpdates,\n  mode,\n}: {\n  setShowDevConsole: (show: boolean) => void;\n  checkForUpdates: (force: boolean) => void;\n  mode: \"full\" | \"compact\";\n}) {\n  const context = useCopilotContext();\n  const messagesContext = useCopilotMessagesContext();\n\n  return (\n    <>\n      <Menu>\n        <MenuButton\n          className={`copilotKitDebugMenuTriggerButton ${mode === \"compact\" ? \"compact\" : \"\"}`}\n        >\n          {mode == \"compact\" ? \"Debug\" : <>Debug {ChevronDownIcon}</>}\n        </MenuButton>\n\n        <MenuItems\n          transition\n          anchor=\"bottom end\"\n          className=\"copilotKitDebugMenu\"\n          style={{ zIndex: 40 }}\n        >\n          <MenuItem>\n            <button\n              className=\"copilotKitDebugMenuItem\"\n              onClick={() => logReadables(context)}\n            >\n              Log Readables\n            </button>\n          </MenuItem>\n          <MenuItem>\n            <button\n              className=\"copilotKitDebugMenuItem\"\n              onClick={() => logActions(context)}\n            >\n              Log Actions\n            </button>\n          </MenuItem>\n          <MenuItem>\n            <button\n              className=\"copilotKitDebugMenuItem\"\n              onClick={() => logMessages(messagesContext)}\n            >\n              Log Messages\n            </button>\n          </MenuItem>\n          <MenuItem>\n            <button\n              className=\"copilotKitDebugMenuItem\"\n              onClick={() => checkForUpdates(true)}\n            >\n              Check for Updates\n            </button>\n          </MenuItem>\n          <hr />\n          <MenuItem>\n            <button\n              className=\"copilotKitDebugMenuItem\"\n              onClick={() => setShowDevConsole(false)}\n            >\n              Hide Dev Console\n            </button>\n          </MenuItem>\n        </MenuItems>\n      </Menu>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-6TWQUA2Q.mjs → chunk-CNIC5HO5.mjs}

@@ -1,11 +1,16 @@
 import {
   SmallSpinnerIcon
-} from "./chunk-XWG3L6QC.mjs";
+} from "./chunk-GBAPANZE.mjs";
 
 // src/components/chat/Suggestion.tsx
 import { useCopilotChatInternal } from "@copilotkit/react-core";
 import { jsx } from "react/jsx-runtime";
-function Suggestion({ title, onClick, partial, className }) {
+function Suggestion({
+  title,
+  onClick,
+  partial,
+  className
+}) {
   const { isLoading } = useCopilotChatInternal();
   if (!title)
     return null;
@@ -28,4 +33,4 @@ function Suggestion({ title, onClick, partial, className }) {
 export {
   Suggestion
 };
-//# sourceMappingURL=chunk-6TWQUA2Q.mjs.map
+//# sourceMappingURL=chunk-CNIC5HO5.mjs.map

package/dist/chunk-CNIC5HO5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/Suggestion.tsx"],"sourcesContent":["import { useCopilotChatInternal } from \"@copilotkit/react-core\";\nimport { SmallSpinnerIcon } from \"./Icons\";\n\ninterface SuggestionsProps {\n  title: string;\n  message: string;\n  partial?: boolean;\n  className?: string;\n  onClick: () => void;\n}\n\nexport function Suggestion({\n  title,\n  onClick,\n  partial,\n  className,\n}: SuggestionsProps) {\n  const { isLoading } = useCopilotChatInternal();\n  if (!title) return null;\n\n  return (\n    <button\n      disabled={partial || isLoading}\n      onClick={(e) => {\n        e.preventDefault();\n        onClick();\n      }}\n      className={`suggestion ${className ?? \"\"} ${partial ? \"loading\" : \"\"}`}\n      data-test-id=\"suggestion\"\n      type=\"button\"\n    >\n      {partial ? SmallSpinnerIcon : <span>{title}</span>}\n    </button>\n  );\n}\n"],"mappings":";;;;;AAAA,SAAS,8BAA8B;AA+BH;AApB7B,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,EAAE,UAAU,IAAI,uBAAuB;AAC7C,MAAI,CAAC;AAAO,WAAO;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,WAAW;AAAA,MACrB,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,gBAAQ;AAAA,MACV;AAAA,MACA,WAAW,cAAc,gCAAa,MAAM,UAAU,YAAY;AAAA,MAClE,gBAAa;AAAA,MACb,MAAK;AAAA,MAEJ,oBAAU,mBAAmB,oBAAC,UAAM,iBAAM;AAAA;AAAA,EAC7C;AAEJ;","names":[]}

package/dist/chunk-CQCXH5LY.mjs

@@ -0,0 +1,143 @@
+import {
+  PoweredByTag
+} from "./chunk-AOUHT4JR.mjs";
+import {
+  Textarea_default
+} from "./chunk-IWOCQACI.mjs";
+import {
+  useChatContext
+} from "./chunk-6TLDRWAD.mjs";
+import {
+  usePushToTalk
+} from "./chunk-2QEDCM6H.mjs";
+
+// src/components/chat/Input.tsx
+import { useMemo, useRef, useState } from "react";
+import {
+  useCopilotContext,
+  useCopilotChatInternal
+} from "@copilotkit/react-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MAX_NEWLINES = 6;
+var Input = ({
+  inProgress,
+  onSend,
+  chatReady = false,
+  onStop,
+  onUpload,
+  hideStopButton = false
+}) => {
+  var _a;
+  const context = useChatContext();
+  const copilotContext = useCopilotContext();
+  const showPoweredBy = !((_a = copilotContext.copilotApiConfig) == null ? void 0 : _a.publicApiKey);
+  const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
+  const textareaRef = useRef(null);
+  const [isComposing, setIsComposing] = useState(false);
+  const handleDivClick = (event) => {
+    var _a2;
+    const target = event.target;
+    if (target.closest("button"))
+      return;
+    if (target.tagName === "TEXTAREA")
+      return;
+    (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
+  };
+  const [text, setText] = useState("");
+  const send = () => {
+    var _a2;
+    if (inProgress)
+      return;
+    onSend(text);
+    setText("");
+    (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
+  };
+  const { pushToTalkState, setPushToTalkState } = usePushToTalk({
+    sendFunction: onSend,
+    inProgress
+  });
+  const isInProgress = inProgress || pushToTalkState === "transcribing";
+  const { buttonIcon, buttonAlt } = useMemo(() => {
+    if (!chatReady)
+      return { buttonIcon: context.icons.spinnerIcon, buttonAlt: "Loading" };
+    return isInProgress && !hideStopButton && chatReady ? { buttonIcon: context.icons.stopIcon, buttonAlt: "Stop" } : { buttonIcon: context.icons.sendIcon, buttonAlt: "Send" };
+  }, [
+    isInProgress,
+    chatReady,
+    hideStopButton,
+    context.icons.stopIcon,
+    context.icons.sendIcon
+  ]);
+  const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
+  const { interrupt } = useCopilotChatInternal();
+  const canSend = useMemo(() => {
+    return !isInProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interrupt;
+  }, [interrupt, isInProgress, text, pushToTalkState]);
+  const canStop = useMemo(() => {
+    return isInProgress && !hideStopButton;
+  }, [isInProgress, hideStopButton]);
+  const sendDisabled = !canSend && !canStop;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `copilotKitInputContainer ${showPoweredBy ? "poweredByContainer" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
+          /* @__PURE__ */ jsx(
+            Textarea_default,
+            {
+              ref: textareaRef,
+              placeholder: context.labels.placeholder,
+              autoFocus: false,
+              maxRows: MAX_NEWLINES,
+              value: text,
+              onChange: (event) => setText(event.target.value),
+              onCompositionStart: () => setIsComposing(true),
+              onCompositionEnd: () => setIsComposing(false),
+              onKeyDown: (event) => {
+                if (event.key === "Enter" && !event.shiftKey && !isComposing) {
+                  event.preventDefault();
+                  if (canSend) {
+                    send();
+                  }
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "copilotKitInputControls", children: [
+            onUpload && /* @__PURE__ */ jsx("button", { onClick: onUpload, className: "copilotKitInputControlButton", children: context.icons.uploadIcon }),
+            /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }),
+            showPushToTalk && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setPushToTalkState(
+                  pushToTalkState === "idle" ? "recording" : "transcribing"
+                ),
+                className: pushToTalkState === "recording" ? "copilotKitInputControlButton copilotKitPushToTalkRecording" : "copilotKitInputControlButton",
+                children: context.icons.pushToTalkIcon
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                disabled: sendDisabled,
+                onClick: isInProgress && !hideStopButton ? onStop : send,
+                "data-copilotkit-in-progress": inProgress,
+                "data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
+                className: "copilotKitInputControlButton",
+                "aria-label": buttonAlt,
+                children: buttonIcon
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(PoweredByTag, { showPoweredBy })
+      ]
+    }
+  );
+};
+
+export {
+  Input
+};
+//# sourceMappingURL=chunk-CQCXH5LY.mjs.map

package/dist/chunk-CQCXH5LY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/Input.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from \"react\";\nimport { InputProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport AutoResizingTextarea from \"./Textarea\";\nimport { usePushToTalk } from \"../../hooks/use-push-to-talk\";\nimport {\n  useCopilotContext,\n  useCopilotChatInternal,\n} from \"@copilotkit/react-core\";\nimport { PoweredByTag } from \"./PoweredByTag\";\n\nconst MAX_NEWLINES = 6;\n\nexport const Input = ({\n  inProgress,\n  onSend,\n  chatReady = false,\n  onStop,\n  onUpload,\n  hideStopButton = false,\n}: InputProps) => {\n  const context = useChatContext();\n  const copilotContext = useCopilotContext();\n\n  const showPoweredBy = !copilotContext.copilotApiConfig?.publicApiKey;\n\n  const pushToTalkConfigured =\n    copilotContext.copilotApiConfig.textToSpeechUrl !== undefined &&\n    copilotContext.copilotApiConfig.transcribeAudioUrl !== undefined;\n\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const [isComposing, setIsComposing] = useState(false);\n\n  const handleDivClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    const target = event.target as HTMLElement;\n\n    // If the user clicked a button or inside a button, don't focus the textarea\n    if (target.closest(\"button\")) return;\n\n    // If the user clicked the textarea, do nothing (it's already focused)\n    if (target.tagName === \"TEXTAREA\") return;\n\n    // Otherwise, focus the textarea\n    textareaRef.current?.focus();\n  };\n\n  const [text, setText] = useState(\"\");\n  const send = () => {\n    if (inProgress) return;\n    onSend(text);\n    setText(\"\");\n\n    textareaRef.current?.focus();\n  };\n\n  // tylerslaton:\n  //\n  // This scrolls CopilotKit into view always. Reading the commit history, it was likely\n  // added to fix a bug but it is causing issues now.\n  //\n  // For the future, if we want this behavior again, we will need to find a way to do it without\n  // forcing CopilotKit to always be in view. This code causes this because focusing an element\n  // in most browsers will scroll that element into view.\n  //\n  // useEffect(() => {\n  //   if (isVisible) {\n  //     textareaRef.current?.focus();\n  //   }\n  // }, [isVisible]);\n\n  const { pushToTalkState, setPushToTalkState } = usePushToTalk({\n    sendFunction: onSend,\n    inProgress,\n  });\n\n  const isInProgress = inProgress || pushToTalkState === \"transcribing\";\n  const { buttonIcon, buttonAlt } = useMemo(() => {\n    if (!chatReady)\n      return { buttonIcon: context.icons.spinnerIcon, buttonAlt: \"Loading\" };\n    return isInProgress && !hideStopButton && chatReady\n      ? { buttonIcon: context.icons.stopIcon, buttonAlt: \"Stop\" }\n      : { buttonIcon: context.icons.sendIcon, buttonAlt: \"Send\" };\n  }, [\n    isInProgress,\n    chatReady,\n    hideStopButton,\n    context.icons.stopIcon,\n    context.icons.sendIcon,\n  ]);\n  const showPushToTalk =\n    pushToTalkConfigured &&\n    (pushToTalkState === \"idle\" || pushToTalkState === \"recording\") &&\n    !inProgress;\n\n  const { interrupt } = useCopilotChatInternal();\n\n  const canSend = useMemo(() => {\n    return (\n      !isInProgress &&\n      text.trim().length > 0 &&\n      pushToTalkState === \"idle\" &&\n      !interrupt\n    );\n  }, [interrupt, isInProgress, text, pushToTalkState]);\n\n  const canStop = useMemo(() => {\n    return isInProgress && !hideStopButton;\n  }, [isInProgress, hideStopButton]);\n\n  const sendDisabled = !canSend && !canStop;\n\n  return (\n    <div\n      className={`copilotKitInputContainer ${showPoweredBy ? \"poweredByContainer\" : \"\"}`}\n    >\n      <div className=\"copilotKitInput\" onClick={handleDivClick}>\n        <AutoResizingTextarea\n          ref={textareaRef}\n          placeholder={context.labels.placeholder}\n          autoFocus={false}\n          maxRows={MAX_NEWLINES}\n          value={text}\n          onChange={(event) => setText(event.target.value)}\n          onCompositionStart={() => setIsComposing(true)}\n          onCompositionEnd={() => setIsComposing(false)}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\" && !event.shiftKey && !isComposing) {\n              event.preventDefault();\n              if (canSend) {\n                send();\n              }\n            }\n          }}\n        />\n        <div className=\"copilotKitInputControls\">\n          {onUpload && (\n            <button onClick={onUpload} className=\"copilotKitInputControlButton\">\n              {context.icons.uploadIcon}\n            </button>\n          )}\n\n          <div style={{ flexGrow: 1 }} />\n\n          {showPushToTalk && (\n            <button\n              onClick={() =>\n                setPushToTalkState(\n                  pushToTalkState === \"idle\" ? \"recording\" : \"transcribing\",\n                )\n              }\n              className={\n                pushToTalkState === \"recording\"\n                  ? \"copilotKitInputControlButton copilotKitPushToTalkRecording\"\n                  : \"copilotKitInputControlButton\"\n              }\n            >\n              {context.icons.pushToTalkIcon}\n            </button>\n          )}\n          <button\n            disabled={sendDisabled}\n            onClick={isInProgress && !hideStopButton ? onStop : send}\n            data-copilotkit-in-progress={inProgress}\n            data-test-id={\n              inProgress\n                ? \"copilot-chat-request-in-progress\"\n                : \"copilot-chat-ready\"\n            }\n            className=\"copilotKitInputControlButton\"\n            aria-label={buttonAlt}\n          >\n            {buttonIcon}\n          </button>\n        </div>\n      </div>\n      <PoweredByTag showPoweredBy={showPoweredBy} />\n    </div>\n  );\n};\n"],"mappings":"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","names":["_a"]}