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

package/dist/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/utils.ts"],"sourcesContent":["export async function fetcher<JSON = any>(input: RequestInfo, init?: RequestInit): Promise<JSON> {\n  const res = await fetch(input, init);\n\n  if (!res.ok) {\n    const json = await res.json();\n    if (json.error) {\n      const error = new Error(json.error) as Error & {\n        status: number;\n      };\n      error.status = res.status;\n      throw error;\n    } else {\n      throw new Error(\"An unexpected error occurred\");\n    }\n  }\n\n  return res.json();\n}\n\nexport function formatDate(input: string | number | Date): string {\n  const date = new Date(input);\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAsB,QAAoB,OAAoB,MAAmC;AAAA;AAC/F,UAAM,MAAM,MAAM,MAAM,OAAO,IAAI;AAEnC,QAAI,CAAC,IAAI,IAAI;AACX,YAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAI,KAAK,OAAO;AACd,cAAM,QAAQ,IAAI,MAAM,KAAK,KAAK;AAGlC,cAAM,SAAS,IAAI;AACnB,cAAM;AAAA,MACR,OAAO;AACL,cAAM,IAAI,MAAM,8BAA8B;AAAA,MAChD;AAAA,IACF;AAEA,WAAO,IAAI,KAAK;AAAA,EAClB;AAAA;AAEO,SAAS,WAAW,OAAuC;AAChE,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,SAAO,KAAK,mBAAmB,SAAS;AAAA,IACtC,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../src/lib/utils.ts"],"sourcesContent":["export async function fetcher<JSON = any>(\n  input: RequestInfo,\n  init?: RequestInit,\n): Promise<JSON> {\n  const res = await fetch(input, init);\n\n  if (!res.ok) {\n    const json = await res.json();\n    if (json.error) {\n      const error = new Error(json.error) as Error & {\n        status: number;\n      };\n      error.status = res.status;\n      throw error;\n    } else {\n      throw new Error(\"An unexpected error occurred\");\n    }\n  }\n\n  return res.json();\n}\n\nexport function formatDate(input: string | number | Date): string {\n  const date = new Date(input);\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAsB,QACpB,OACA,MACe;AAAA;AACf,UAAM,MAAM,MAAM,MAAM,OAAO,IAAI;AAEnC,QAAI,CAAC,IAAI,IAAI;AACX,YAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAI,KAAK,OAAO;AACd,cAAM,QAAQ,IAAI,MAAM,KAAK,KAAK;AAGlC,cAAM,SAAS,IAAI;AACnB,cAAM;AAAA,MACR,OAAO;AACL,cAAM,IAAI,MAAM,8BAA8B;AAAA,MAChD;AAAA,IACF;AAEA,WAAO,IAAI,KAAK;AAAA,EAClB;AAAA;AAEO,SAAS,WAAW,OAAuC;AAChE,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,SAAO,KAAK,mBAAmB,SAAS;AAAA,IACtC,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR,CAAC;AACH;","names":[]}

package/dist/lib/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/utils.ts"],"sourcesContent":["export async function fetcher<JSON = any>(input: RequestInfo, init?: RequestInit): Promise<JSON> {\n  const res = await fetch(input, init);\n\n  if (!res.ok) {\n    const json = await res.json();\n    if (json.error) {\n      const error = new Error(json.error) as Error & {\n        status: number;\n      };\n      error.status = res.status;\n      throw error;\n    } else {\n      throw new Error(\"An unexpected error occurred\");\n    }\n  }\n\n  return res.json();\n}\n\nexport function formatDate(input: string | number | Date): string {\n  const date = new Date(input);\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n}\n"],"mappings":";;;;;AAAA,SAAsB,QAAoB,OAAoB,MAAmC;AAAA;AAC/F,UAAM,MAAM,MAAM,MAAM,OAAO,IAAI;AAEnC,QAAI,CAAC,IAAI,IAAI;AACX,YAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAI,KAAK,OAAO;AACd,cAAM,QAAQ,IAAI,MAAM,KAAK,KAAK;AAGlC,cAAM,SAAS,IAAI;AACnB,cAAM;AAAA,MACR,OAAO;AACL,cAAM,IAAI,MAAM,8BAA8B;AAAA,MAChD;AAAA,IACF;AAEA,WAAO,IAAI,KAAK;AAAA,EAClB;AAAA;AAEO,SAAS,WAAW,OAAuC;AAChE,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,SAAO,KAAK,mBAAmB,SAAS;AAAA,IACtC,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../src/lib/utils.ts"],"sourcesContent":["export async function fetcher<JSON = any>(\n  input: RequestInfo,\n  init?: RequestInit,\n): Promise<JSON> {\n  const res = await fetch(input, init);\n\n  if (!res.ok) {\n    const json = await res.json();\n    if (json.error) {\n      const error = new Error(json.error) as Error & {\n        status: number;\n      };\n      error.status = res.status;\n      throw error;\n    } else {\n      throw new Error(\"An unexpected error occurred\");\n    }\n  }\n\n  return res.json();\n}\n\nexport function formatDate(input: string | number | Date): string {\n  const date = new Date(input);\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n}\n"],"mappings":";;;;;AAAA,SAAsB,QACpB,OACA,MACe;AAAA;AACf,UAAM,MAAM,MAAM,MAAM,OAAO,IAAI;AAEnC,QAAI,CAAC,IAAI,IAAI;AACX,YAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAI,KAAK,OAAO;AACd,cAAM,QAAQ,IAAI,MAAM,KAAK,KAAK;AAGlC,cAAM,SAAS,IAAI;AACnB,cAAM;AAAA,MACR,OAAO;AACL,cAAM,IAAI,MAAM,8BAA8B;AAAA,MAChD;AAAA,IACF;AAEA,WAAO,IAAI,KAAK;AAAA,EAClB;AAAA;AAEO,SAAS,WAAW,OAAuC;AAChE,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,SAAO,KAAK,mBAAmB,SAAS;AAAA,IACtC,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR,CAAC;AACH;","names":[]}

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.51.4-next.7",
+  "version": "1.51.4-next.8",
   "sideEffects": [
     "**/*.css"
   ],
@@ -54,9 +54,9 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@copilotkit/react-core": "1.51.4-next.7",
-    "@copilotkit/runtime-client-gql": "1.51.4-next.7",
-    "@copilotkit/shared": "1.51.4-next.7"
+    "@copilotkit/react-core": "1.51.4-next.8",
+    "@copilotkit/runtime-client-gql": "1.51.4-next.8",
+    "@copilotkit/shared": "1.51.4-next.8"
   },
   "keywords": [
     "copilotkit",
@@ -75,7 +75,6 @@
     "dev": "tsup --watch --no-splitting",
     "test": "jest",
     "check-types": "tsc --noEmit",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm -rf .next",
     "link:global": "pnpm link --global",
     "unlink:global": "pnpm unlink --global"
   }

package/src/components/chat/Button.tsx

@@ -10,8 +10,12 @@ export const Button = ({}: ButtonProps) => {
         className={`copilotKitButton ${open ? "open" : ""}`}
         aria-label={open ? "Close Chat" : "Open Chat"}
       >
-        <div className="copilotKitButtonIcon copilotKitButtonIconOpen">{icons.openIcon}</div>
-        <div className="copilotKitButtonIcon copilotKitButtonIconClose">{icons.closeIcon}</div>
+        <div className="copilotKitButtonIcon copilotKitButtonIconOpen">
+          {icons.openIcon}
+        </div>
+        <div className="copilotKitButtonIcon copilotKitButtonIconClose">
+          {icons.closeIcon}
+        </div>
       </button>
     </div>
   );

package/src/components/chat/Chat.tsx

@@ -386,9 +386,9 @@ export function CopilotChat({
   const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
   const [selectedImages, setSelectedImages] = useState<Array<ImageUpload>>([]);
   const [chatError, setChatError] = useState<ChatError | null>(null);
-  const [messageFeedback, setMessageFeedback] = useState<Record<string, "thumbsUp" | "thumbsDown">>(
-    {},
-  );
+  const [messageFeedback, setMessageFeedback] = useState<
+    Record<string, "thumbsUp" | "thumbsDown">
+  >({});
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   // Helper function to trigger event hooks only if publicApiKey is provided
@@ -415,7 +415,8 @@ export function CopilotChat({
   // Helper function to trigger chat error and render error UI
   const triggerChatError = useCallback(
     (error: any, operation: string, originalError?: any) => {
-      const errorMessage = error?.message || error?.toString() || "An error occurred";
+      const errorMessage =
+        error?.message || error?.toString() || "An error occurred";
 
       // Set chat error state for rendering
       setChatError({
@@ -436,8 +437,12 @@ export function CopilotChat({
           },
           technical: {
             environment: "browser",
-            userAgent: typeof navigator !== "undefined" ? navigator.userAgent : undefined,
-            stackTrace: originalError instanceof Error ? originalError.stack : undefined,
+            userAgent:
+              typeof navigator !== "undefined"
+                ? navigator.userAgent
+                : undefined,
+            stackTrace:
+              originalError instanceof Error ? originalError.stack : undefined,
           },
         },
         error,
@@ -456,7 +461,8 @@ export function CopilotChat({
       if (observabilityHooks?.onError && !publicApiKey) {
         setBannerError(
           new CopilotKitError({
-            message: "observabilityHooks.onError requires a publicApiKey to function.",
+            message:
+              "observabilityHooks.onError requires a publicApiKey to function.",
             code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
             severity: Severity.CRITICAL,
             visibility: ErrorVisibility.BANNER,
@@ -497,30 +503,34 @@ export function CopilotChat({
 
       e.preventDefault(); // Prevent default paste behavior for images
 
-      const imagePromises: Promise<ImageUpload | null>[] = imageItems.map((item) => {
-        const file = item.getAsFile();
-        if (!file) return Promise.resolve(null);
-
-        return new Promise<ImageUpload | null>((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload = (e) => {
-            const base64String = (e.target?.result as string)?.split(",")[1];
-            if (base64String) {
-              resolve({
-                contentType: file.type,
-                bytes: base64String,
-              });
-            } else {
-              resolve(null);
-            }
-          };
-          reader.onerror = reject;
-          reader.readAsDataURL(file);
-        });
-      });
+      const imagePromises: Promise<ImageUpload | null>[] = imageItems.map(
+        (item) => {
+          const file = item.getAsFile();
+          if (!file) return Promise.resolve(null);
+
+          return new Promise<ImageUpload | null>((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+              const base64String = (e.target?.result as string)?.split(",")[1];
+              if (base64String) {
+                resolve({
+                  contentType: file.type,
+                  bytes: base64String,
+                });
+              } else {
+                resolve(null);
+              }
+            };
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+          });
+        },
+      );
 
       try {
-        const loadedImages = (await Promise.all(imagePromises)).filter((img) => img !== null);
+        const loadedImages = (await Promise.all(imagePromises)).filter(
+          (img) => img !== null,
+        );
         setSelectedImages((prev) => [...prev, ...loadedImages]);
       } catch (error) {
         // Trigger chat-level error handler
@@ -630,29 +640,36 @@ export function CopilotChat({
     triggerObservabilityHook("onMessageCopied", message);
   };
 
-  const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleImageUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
     if (!event.target.files || event.target.files.length === 0) {
       return;
     }
 
-    const files = Array.from(event.target.files).filter((file) => file.type.startsWith("image/"));
+    const files = Array.from(event.target.files).filter((file) =>
+      file.type.startsWith("image/"),
+    );
     if (files.length === 0) return;
 
     const fileReadPromises = files.map((file) => {
-      return new Promise<{ contentType: string; bytes: string }>((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          const base64String = (e.target?.result as string)?.split(",")[1] || "";
-          if (base64String) {
-            resolve({
-              contentType: file.type,
-              bytes: base64String,
-            });
-          }
-        };
-        reader.onerror = reject;
-        reader.readAsDataURL(file);
-      });
+      return new Promise<{ contentType: string; bytes: string }>(
+        (resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            const base64String =
+              (e.target?.result as string)?.split(",")[1] || "";
+            if (base64String) {
+              resolve({
+                contentType: file.type,
+                bytes: base64String,
+              });
+            }
+          };
+          reader.onerror = reject;
+          reader.readAsDataURL(file);
+        },
+      );
     });
 
     try {
@@ -747,7 +764,10 @@ export function CopilotChat({
 
       {imageUploadsEnabled && (
         <>
-          <ImageUploadQueue images={selectedImages} onRemoveImage={removeSelectedImage} />
+          <ImageUploadQueue
+            images={selectedImages}
+            onRemoveImage={removeSelectedImage}
+          />
           <input
             type="file"
             multiple
@@ -765,7 +785,9 @@ export function CopilotChat({
         onSend={handleSendMessage}
         isVisible={isVisible}
         onStop={stopGeneration}
-        onUpload={imageUploadsEnabled ? () => fileInputRef.current?.click() : undefined}
+        onUpload={
+          imageUploadsEnabled ? () => fileInputRef.current?.click() : undefined
+        }
         hideStopButton={hideStopButton}
       />
     </WrappedCopilotChat>
@@ -786,7 +808,12 @@ export function WrappedCopilotChat({
   const chatContext = React.useContext(ChatContext);
   if (!chatContext) {
     return (
-      <ChatContextProvider icons={icons} labels={labels} open={true} setOpen={() => {}}>
+      <ChatContextProvider
+        icons={icons}
+        labels={labels}
+        open={true}
+        setOpen={() => {}}
+      >
         <div className={`copilotKitChat ${className ?? ""}`}>{children}</div>
       </ChatContextProvider>
     );

package/src/components/chat/ChatContext.tsx

@@ -160,7 +160,9 @@ interface ChatContext {
   setOpen: (open: boolean) => void;
 }
 
-export const ChatContext = React.createContext<ChatContext | undefined>(undefined);
+export const ChatContext = React.createContext<ChatContext | undefined>(
+  undefined,
+);
 
 export function useChatContext(): ChatContext {
   const context = React.useContext(ChatContext);
@@ -244,5 +246,7 @@ export const ChatContextProvider = ({
     [memoizedLabels, memoizedIcons, open, setOpen],
   );
 
-  return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;
+  return (
+    <ChatContext.Provider value={context}>{children}</ChatContext.Provider>
+  );
 };

package/src/components/chat/CodeBlock.tsx

@@ -55,9 +55,9 @@ export const generateRandomString = (length: number, lowercase = false) => {
 
 const CodeBlock: FC<Props> = memo(({ language, value }) => {
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 });
-  const [SyntaxHighlighter, setSyntaxHighlighter] = useState<typeof Light | typeof Prism>(
-    () => Light,
-  );
+  const [SyntaxHighlighter, setSyntaxHighlighter] = useState<
+    typeof Light | typeof Prism
+  >(() => Light);
 
   useEffect(() => {
     try {
@@ -103,7 +103,10 @@ const CodeBlock: FC<Props> = memo(({ language, value }) => {
       <div className="copilotKitCodeBlockToolbar">
         <span className="copilotKitCodeBlockToolbarLanguage">{language}</span>
         <div className="copilotKitCodeBlockToolbarButtons">
-          <button className="copilotKitCodeBlockToolbarButton" onClick={downloadAsFile}>
+          <button
+            className="copilotKitCodeBlockToolbarButton"
+            onClick={downloadAsFile}
+          >
             {DownloadIcon}
           </button>
           <button className="copilotKitCodeBlockToolbarButton" onClick={onCopy}>
@@ -139,7 +142,8 @@ const highlightStyle: any = {
     color: "#d4d4d4",
     fontSize: "13px",
     textShadow: "none",
-    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+    fontFamily:
+      'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
     direction: "ltr",
     textAlign: "left",
     whiteSpace: "pre",
@@ -162,7 +166,8 @@ const highlightStyle: any = {
     color: "#d4d4d4",
     fontSize: "13px",
     textShadow: "none",
-    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+    fontFamily:
+      'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
     direction: "ltr",
     textAlign: "left",
     whiteSpace: "pre",

package/src/components/chat/Icons.tsx

@@ -28,7 +28,11 @@ export const CloseIcon = (
     width="24"
     height="24"
   >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+    />
   </svg>
 );
 
@@ -42,7 +46,11 @@ export const HeaderCloseIcon = (
     width="24"
     height="24"
   >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6 18L18 6M6 6l12 12"
+    />
   </svg>
 );
 
@@ -56,7 +64,11 @@ export const SendIcon = (
     width="24"
     height="24"
   >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M12 19V5m0 0l-7 7m7-7l7 7" />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 19V5m0 0l-7 7m7-7l7 7"
+    />
   </svg>
 );
 
@@ -135,18 +147,33 @@ export const CopyIcon = (
 );
 
 export const SmallSpinnerIcon = (
-  <span className="copilotKitSpinner" style={{ width: "13px", height: "13px" }}></span>
+  <span
+    className="copilotKitSpinner"
+    style={{ width: "13px", height: "13px" }}
+  ></span>
 );
 
 export const SpinnerIcon = (
-  <span className="copilotKitSpinner" style={{ width: "24px", height: "24px" }}></span>
+  <span
+    className="copilotKitSpinner"
+    style={{ width: "24px", height: "24px" }}
+  ></span>
 );
 
 export const ActivityIcon = (
   <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-    <span className="copilotKitActivityDot" style={{ animationDelay: "0s" }}></span>
-    <span className="copilotKitActivityDot" style={{ animationDelay: "0.2s" }}></span>
-    <span className="copilotKitActivityDot" style={{ animationDelay: "0.4s" }}></span>
+    <span
+      className="copilotKitActivityDot"
+      style={{ animationDelay: "0s" }}
+    ></span>
+    <span
+      className="copilotKitActivityDot"
+      style={{ animationDelay: "0.2s" }}
+    ></span>
+    <span
+      className="copilotKitActivityDot"
+      style={{ animationDelay: "0.4s" }}
+    ></span>
   </div>
 );
 
@@ -217,7 +244,11 @@ export const UploadIcon = (
     width="24"
     height="24"
   >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 4.5v15m7.5-7.5h-15"
+    />
   </svg>
 );
 
@@ -232,6 +263,10 @@ export const CheckIcon = (
     height="16"
     style={{ minWidth: "16px", minHeight: "16px" }}
   >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M4.5 12.75l6 6 9-13.5"
+    />
   </svg>
 );

package/src/components/chat/Input.tsx

@@ -3,7 +3,10 @@ import { InputProps } from "./props";
 import { useChatContext } from "./ChatContext";
 import AutoResizingTextarea from "./Textarea";
 import { usePushToTalk } from "../../hooks/use-push-to-talk";
-import { useCopilotContext, useCopilotChatInternal } from "@copilotkit/react-core";
+import {
+  useCopilotContext,
+  useCopilotChatInternal,
+} from "@copilotkit/react-core";
 import { PoweredByTag } from "./PoweredByTag";
 
 const MAX_NEWLINES = 6;
@@ -72,11 +75,18 @@ export const Input = ({
 
   const isInProgress = inProgress || pushToTalkState === "transcribing";
   const { buttonIcon, buttonAlt } = useMemo(() => {
-    if (!chatReady) return { buttonIcon: context.icons.spinnerIcon, buttonAlt: "Loading" };
+    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]);
+  }, [
+    isInProgress,
+    chatReady,
+    hideStopButton,
+    context.icons.stopIcon,
+    context.icons.sendIcon,
+  ]);
   const showPushToTalk =
     pushToTalkConfigured &&
     (pushToTalkState === "idle" || pushToTalkState === "recording") &&
@@ -85,7 +95,12 @@ export const Input = ({
   const { interrupt } = useCopilotChatInternal();
 
   const canSend = useMemo(() => {
-    return !isInProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interrupt;
+    return (
+      !isInProgress &&
+      text.trim().length > 0 &&
+      pushToTalkState === "idle" &&
+      !interrupt
+    );
   }, [interrupt, isInProgress, text, pushToTalkState]);
 
   const canStop = useMemo(() => {
@@ -95,7 +110,9 @@ export const Input = ({
   const sendDisabled = !canSend && !canStop;
 
   return (
-    <div className={`copilotKitInputContainer ${showPoweredBy ? "poweredByContainer" : ""}`}>
+    <div
+      className={`copilotKitInputContainer ${showPoweredBy ? "poweredByContainer" : ""}`}
+    >
       <div className="copilotKitInput" onClick={handleDivClick}>
         <AutoResizingTextarea
           ref={textareaRef}
@@ -127,7 +144,9 @@ export const Input = ({
           {showPushToTalk && (
             <button
               onClick={() =>
-                setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing")
+                setPushToTalkState(
+                  pushToTalkState === "idle" ? "recording" : "transcribing",
+                )
               }
               className={
                 pushToTalkState === "recording"
@@ -142,7 +161,11 @@ export const Input = ({
             disabled={sendDisabled}
             onClick={isInProgress && !hideStopButton ? onStop : send}
             data-copilotkit-in-progress={inProgress}
-            data-test-id={inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready"}
+            data-test-id={
+              inProgress
+                ? "copilot-chat-request-in-progress"
+                : "copilot-chat-ready"
+            }
             className="copilotKitInputControlButton"
             aria-label={buttonAlt}
           >

package/src/components/chat/Markdown.tsx

@@ -8,7 +8,12 @@ import rehypeRaw from "rehype-raw";
 const defaultComponents: Components = {
   a({ children, ...props }) {
     return (
-      <a className="copilotKitMarkdownElement" {...props} target="_blank" rel="noopener noreferrer">
+      <a
+        className="copilotKitMarkdownElement"
+        {...props}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
         {children}
       </a>
     );
@@ -121,7 +126,8 @@ const defaultComponents: Components = {
 const MemoizedReactMarkdown: FC<Options> = memo(
   ReactMarkdown,
   (prevProps, nextProps) =>
-    prevProps.children === nextProps.children && prevProps.components === nextProps.components,
+    prevProps.children === nextProps.children &&
+    prevProps.components === nextProps.components,
 );
 
 type MarkdownProps = {
@@ -134,7 +140,10 @@ export const Markdown = ({ content, components }: MarkdownProps) => {
     <div className="copilotKitMarkdown">
       <MemoizedReactMarkdown
         components={{ ...defaultComponents, ...components }}
-        remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
+        remarkPlugins={[
+          remarkGfm,
+          [remarkMath, { singleDollarTextMath: false }],
+        ]}
         rehypePlugins={[rehypeRaw]}
       >
         {content}

package/src/components/chat/Messages.tsx

@@ -3,7 +3,10 @@ import { MessagesProps } from "./props";
 import { useChatContext } from "./ChatContext";
 import { Message } from "@copilotkit/shared";
 import { useCopilotChatInternal } from "@copilotkit/react-core";
-import { LegacyRenderMessage, LegacyRenderProps } from "./messages/LegacyRenderMessage";
+import {
+  LegacyRenderMessage,
+  LegacyRenderProps,
+} from "./messages/LegacyRenderMessage";
 
 export const Messages = ({
   inProgress,
@@ -30,7 +33,10 @@ export const Messages = ({
 }: MessagesProps) => {
   const { labels, icons } = useChatContext();
   const { messages: visibleMessages, interrupt } = useCopilotChatInternal();
-  const initialMessages = useMemo(() => makeInitialMessages(labels.initial), [labels.initial]);
+  const initialMessages = useMemo(
+    () => makeInitialMessages(labels.initial),
+    [labels.initial],
+  );
   const messages = [...initialMessages, ...visibleMessages];
   const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
 
@@ -74,7 +80,9 @@ export const Messages = ({
 
   // Determine which render component to use
   const MessageRenderer = hasLegacyProps
-    ? (props: any) => <LegacyRenderMessage {...props} legacyProps={legacyProps} />
+    ? (props: any) => (
+        <LegacyRenderMessage {...props} legacyProps={legacyProps} />
+      )
     : RenderMessage;
 
   const LoadingIcon = () => <span>{icons.activityIcon}</span>;
@@ -104,9 +112,13 @@ export const Messages = ({
             />
           );
         })}
-        {messages[messages.length - 1]?.role === "user" && inProgress && <LoadingIcon />}
+        {messages[messages.length - 1]?.role === "user" && inProgress && (
+          <LoadingIcon />
+        )}
         {interrupt}
-        {chatError && ErrorMessage && <ErrorMessage error={chatError} isCurrentMessage />}
+        {chatError && ErrorMessage && (
+          <ErrorMessage error={chatError} isCurrentMessage />
+        )}
       </div>
       <footer className="copilotKitMessagesFooter" ref={messagesEndRef}>
         {children}
@@ -115,7 +127,9 @@ export const Messages = ({
   );
 };
 
-function makeInitialMessages(initial: string | string[] | undefined): Message[] {
+function makeInitialMessages(
+  initial: string | string[] | undefined,
+): Message[] {
   if (!initial) return [];
 
   if (Array.isArray(initial)) {
@@ -146,7 +160,8 @@ export function useScrollToBottom(messages: Message[]) {
   const scrollToBottom = () => {
     if (messagesContainerRef.current && messagesEndRef.current) {
       isProgrammaticScrollRef.current = true;
-      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
+      messagesContainerRef.current.scrollTop =
+        messagesContainerRef.current.scrollHeight;
     }
   };
 
@@ -157,7 +172,8 @@ export function useScrollToBottom(messages: Message[]) {
     }
 
     if (messagesContainerRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
+      const { scrollTop, scrollHeight, clientHeight } =
+        messagesContainerRef.current;
       isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;
     }
   };

package/src/components/chat/Modal.tsx

@@ -1,6 +1,11 @@
 import React, { useMemo, useCallback, useEffect, useRef } from "react";
 import { ChatContextProvider, useChatContext } from "./ChatContext";
-import { ButtonProps, HeaderProps, WindowProps, CopilotObservabilityHooks } from "./props";
+import {
+  ButtonProps,
+  HeaderProps,
+  WindowProps,
+  CopilotObservabilityHooks,
+} from "./props";
 import { Window as DefaultWindow } from "./Window";
 import { Button as DefaultButton } from "./Button";
 import { Header as DefaultHeader } from "./Header";
@@ -185,7 +190,12 @@ export const CopilotModal = ({
   const [openState, setOpenState] = React.useState(defaultOpen);
 
   return (
-    <ChatContextProvider icons={icons} labels={labels} open={openState} setOpen={setOpenState}>
+    <ChatContextProvider
+      icons={icons}
+      labels={labels}
+      open={openState}
+      setOpen={setOpenState}
+    >
       <CopilotModalInner
         observabilityHooks={observabilityHooks}
         onSetOpen={onSetOpen}

package/src/components/chat/Popup.tsx

@@ -71,7 +71,9 @@ import { CopilotModal, CopilotModalProps } from "./Modal";
 export function CopilotPopup(props: CopilotModalProps) {
   props = {
     ...props,
-    className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup",
+    className: props.className
+      ? props.className + " copilotKitPopup"
+      : "copilotKitPopup",
   };
   return <CopilotModal {...props}>{props.children}</CopilotModal>;
 }