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

package/src/components/chat/PoweredByTag.tsx

@@ -1,7 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { useDarkMode } from "../../hooks/use-dark-mode";
 
-export function PoweredByTag({ showPoweredBy = true }: { showPoweredBy?: boolean }) {
+export function PoweredByTag({
+  showPoweredBy = true,
+}: {
+  showPoweredBy?: boolean;
+}) {
   const [mounted, setMounted] = useState(false);
   const isDark = useDarkMode();
 

package/src/components/chat/Sidebar.tsx

@@ -75,7 +75,9 @@ import { CopilotModal, CopilotModalProps } from "./Modal";
 export function CopilotSidebar(props: CopilotModalProps) {
   props = {
     ...props,
-    className: props.className ? props.className + " copilotKitSidebar" : "copilotKitSidebar",
+    className: props.className
+      ? props.className + " copilotKitSidebar"
+      : "copilotKitSidebar",
   };
   const [expandedClassName, setExpandedClassName] = useState(
     props.defaultOpen ? "sidebarExpanded" : "",

package/src/components/chat/Suggestion.tsx

@@ -9,7 +9,12 @@ interface SuggestionsProps {
   onClick: () => void;
 }
 
-export function Suggestion({ title, onClick, partial, className }: SuggestionsProps) {
+export function Suggestion({
+  title,
+  onClick,
+  partial,
+  className,
+}: SuggestionsProps) {
   const { isLoading } = useCopilotChatInternal();
   if (!title) return null;
 

package/src/components/chat/Textarea.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
 
 interface AutoResizingTextareaProps {
   maxRows?: number;
@@ -11,7 +17,10 @@ interface AutoResizingTextareaProps {
   autoFocus?: boolean;
 }
 
-const AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextareaProps>(
+const AutoResizingTextarea = forwardRef<
+  HTMLTextAreaElement,
+  AutoResizingTextareaProps
+>(
   (
     {
       maxRows = 1,
@@ -28,7 +37,10 @@ const AutoResizingTextarea = forwardRef<HTMLTextAreaElement, AutoResizingTextare
     const internalTextareaRef = useRef<HTMLTextAreaElement>(null);
     const [maxHeight, setMaxHeight] = useState<number>(0);
 
-    useImperativeHandle(ref, () => internalTextareaRef.current as HTMLTextAreaElement);
+    useImperativeHandle(
+      ref,
+      () => internalTextareaRef.current as HTMLTextAreaElement,
+    );
 
     useEffect(() => {
       const calculateMaxHeight = () => {

package/src/components/chat/messages/AssistantMessage.tsx

@@ -58,10 +58,14 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
 
   return (
     <>
-      {renderBefore ? <div style={{ marginBottom: "0.5rem" }}>{subComponent}</div> : null}
+      {renderBefore ? (
+        <div style={{ marginBottom: "0.5rem" }}>{subComponent}</div>
+      ) : null}
       {content && (
         <div className="copilotKitMessage copilotKitAssistantMessage">
-          {content && <Markdown content={content} components={markdownTagRenderers} />}
+          {content && (
+            <Markdown content={content} components={markdownTagRenderers} />
+          )}
 
           {content && !isLoading && (
             <div
@@ -82,7 +86,9 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
                 title={labels.copyToClipboard}
               >
                 {copied ? (
-                  <span style={{ fontSize: "10px", fontWeight: "bold" }}>✓</span>
+                  <span style={{ fontSize: "10px", fontWeight: "bold" }}>
+                    ✓
+                  </span>
                 ) : (
                   icons.copyIcon
                 )}
@@ -115,7 +121,9 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
           )}
         </div>
       )}
-      {renderAfter ? <div style={{ marginBottom: "0.5rem" }}>{subComponent}</div> : null}
+      {renderAfter ? (
+        <div style={{ marginBottom: "0.5rem" }}>{subComponent}</div>
+      ) : null}
       {isLoading && <LoadingIcon />}
     </>
   );

package/src/components/chat/messages/ErrorMessage.tsx

@@ -32,7 +32,9 @@ export const ErrorMessage = (props: ErrorMessageProps) => {
     <div className="copilotKitMessage copilotKitAssistantMessage">
       <Markdown content={error.message} />
 
-      <div className={`copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`}>
+      <div
+        className={`copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`}
+      >
         <button
           className="copilotKitMessageControlButton"
           onClick={handleRegenerate}

package/src/components/chat/messages/ImageRenderer.tsx

@@ -5,7 +5,11 @@ import { ImageRendererProps } from "../props";
  * Default image rendering component that can be customized by users.
  * Uses CSS classes for styling so users can override styles.
  */
-export const ImageRenderer: React.FC<ImageRendererProps> = ({ image, content, className = "" }) => {
+export const ImageRenderer: React.FC<ImageRendererProps> = ({
+  image,
+  content,
+  className = "",
+}) => {
   const [imageError, setImageError] = useState(false);
   const imageSrc = `data:image/${image.format};base64,${image.bytes}`;
   const altText = content || "User uploaded image";
@@ -16,9 +20,15 @@ export const ImageRenderer: React.FC<ImageRendererProps> = ({ image, content, cl
 
   if (imageError) {
     return (
-      <div className={`copilotKitImageRendering copilotKitImageRenderingError ${className}`}>
-        <div className="copilotKitImageRenderingErrorMessage">Failed to load image</div>
-        {content && <div className="copilotKitImageRenderingContent">{content}</div>}
+      <div
+        className={`copilotKitImageRendering copilotKitImageRenderingError ${className}`}
+      >
+        <div className="copilotKitImageRenderingErrorMessage">
+          Failed to load image
+        </div>
+        {content && (
+          <div className="copilotKitImageRenderingContent">{content}</div>
+        )}
       </div>
     );
   }
@@ -31,7 +41,9 @@ export const ImageRenderer: React.FC<ImageRendererProps> = ({ image, content, cl
         className="copilotKitImageRenderingImage"
         onError={handleImageError}
       />
-      {content && <div className="copilotKitImageRenderingContent">{content}</div>}
+      {content && (
+        <div className="copilotKitImageRenderingContent">{content}</div>
+      )}
     </div>
   );
 };

package/src/components/chat/messages/LegacyRenderMessage.tsx

@@ -72,7 +72,10 @@ export const LegacyRenderMessage: React.FC<LegacyRenderMessageProps> = ({
     );
   }
 
-  if (deprecatedMessage.isActionExecutionMessage() && RenderActionExecutionMessage) {
+  if (
+    deprecatedMessage.isActionExecutionMessage() &&
+    RenderActionExecutionMessage
+  ) {
     return (
       <RenderActionExecutionMessage
         messages={messages}

package/src/components/chat/messages/UserMessage.tsx

@@ -2,7 +2,9 @@ import { UserMessageProps } from "../props";
 
 type UserMessageContent = NonNullable<UserMessageProps["message"]>["content"];
 
-const getTextContent = (content: UserMessageContent | undefined): string | undefined => {
+const getTextContent = (
+  content: UserMessageContent | undefined,
+): string | undefined => {
   if (typeof content === "undefined") {
     return undefined;
   }
@@ -19,7 +21,10 @@ const getTextContent = (content: UserMessageContent | undefined): string | undef
         }
         return undefined;
       })
-      .filter((value): value is string => typeof value === "string" && value.length > 0)
+      .filter(
+        (value): value is string =>
+          typeof value === "string" && value.length > 0,
+      )
       .join(" ")
       .trim() || undefined
   );
@@ -27,7 +32,8 @@ const getTextContent = (content: UserMessageContent | undefined): string | undef
 
 export const UserMessage = (props: UserMessageProps) => {
   const { message, ImageRenderer } = props;
-  const isImageMessage = message && "image" in message && Boolean(message.image);
+  const isImageMessage =
+    message && "image" in message && Boolean(message.image);
 
   if (isImageMessage) {
     const imageMessage = message!;
@@ -42,5 +48,7 @@ export const UserMessage = (props: UserMessageProps) => {
 
   const content = getTextContent(message?.content);
 
-  return <div className="copilotKitMessage copilotKitUserMessage">{content}</div>;
+  return (
+    <div className="copilotKitMessage copilotKitUserMessage">{content}</div>
+  );
 };

package/src/components/chat/props.ts

@@ -1,4 +1,9 @@
-import { AIMessage, Message, UserMessage, CopilotErrorEvent } from "@copilotkit/shared";
+import {
+  AIMessage,
+  Message,
+  UserMessage,
+  CopilotErrorEvent,
+} from "@copilotkit/shared";
 import { CopilotChatSuggestion } from "../../types/suggestions";
 import { ReactNode } from "react";
 import { ImageData } from "@copilotkit/shared";
@@ -36,7 +41,10 @@ export interface CopilotObservabilityHooks {
   /**
    * Called when feedback is given (thumbs up/down)
    */
-  onFeedbackGiven?: (messageId: string, type: "thumbsUp" | "thumbsDown") => void;
+  onFeedbackGiven?: (
+    messageId: string,
+    type: "thumbsUp" | "thumbsDown",
+  ) => void;
 
   /**
    * Called when chat generation starts
@@ -74,7 +82,9 @@ export interface SuggestionsProps {
   onClick: (message: string) => void;
 }
 
-export type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {
+export type ComponentsMap<
+  T extends Record<string, object> = Record<string, object>,
+> = {
   [K in keyof T]: React.FC<{ children?: ReactNode } & T[K]>;
 };
 

package/src/components/dev-console/console.tsx

@@ -1,6 +1,9 @@
 "use client";
 
-import { useCopilotContext, useCopilotMessagesContext } from "@copilotkit/react-core";
+import {
+  useCopilotContext,
+  useCopilotMessagesContext,
+} from "@copilotkit/react-core";
 import {
   getPublishedCopilotKitVersion,
   logActions,
@@ -21,7 +24,12 @@ import { COPILOTKIT_VERSION } from "@copilotkit/shared";
 import { SmallSpinnerIcon } from "../chat/Icons";
 import { CopilotKitHelpModal } from "../help-modal";
 
-type VersionStatus = "unknown" | "checking" | "latest" | "update-available" | "outdated";
+type VersionStatus =
+  | "unknown"
+  | "checking"
+  | "latest"
+  | "update-available"
+  | "outdated";
 
 export function CopilotDevConsole() {
   const currentVersion = COPILOTKIT_VERSION;
@@ -42,7 +50,9 @@ export function CopilotDevConsole() {
   const [versionStatus, setVersionStatus] = useState<VersionStatus>("unknown");
   const [latestVersion, setLatestVersion] = useState<string>("");
   const consoleRef = useRef<HTMLDivElement>(null);
-  const [debugButtonMode, setDebugButtonMode] = useState<"full" | "compact">("full");
+  const [debugButtonMode, setDebugButtonMode] = useState<"full" | "compact">(
+    "full",
+  );
 
   const checkForUpdates = (force: boolean = false) => {
     setVersionStatus("checking");
@@ -90,7 +100,9 @@ export function CopilotDevConsole() {
       ref={consoleRef}
       className={
         "copilotKitDevConsole " +
-        (versionStatus === "update-available" ? "copilotKitDevConsoleUpgrade" : "") +
+        (versionStatus === "update-available"
+          ? "copilotKitDevConsoleUpgrade"
+          : "") +
         (versionStatus === "outdated" ? "copilotKitDevConsoleWarnOutdated" : "")
       }
     >
@@ -171,7 +183,9 @@ function VersionInfo({
         <p>
           {currentVersionLabel} {versionIcon}
         </p>
-        <button onClick={handleCopyClick}>{copyStatus || installCommand}</button>
+        <button onClick={handleCopyClick}>
+          {copyStatus || installCommand}
+        </button>
       </div>
     );
   }
@@ -207,12 +221,18 @@ export default function DebugMenuButton({
           style={{ zIndex: 40 }}
         >
           <MenuItem>
-            <button className="copilotKitDebugMenuItem" onClick={() => logReadables(context)}>
+            <button
+              className="copilotKitDebugMenuItem"
+              onClick={() => logReadables(context)}
+            >
               Log Readables
             </button>
           </MenuItem>
           <MenuItem>
-            <button className="copilotKitDebugMenuItem" onClick={() => logActions(context)}>
+            <button
+              className="copilotKitDebugMenuItem"
+              onClick={() => logActions(context)}
+            >
               Log Actions
             </button>
           </MenuItem>
@@ -225,13 +245,19 @@ export default function DebugMenuButton({
             </button>
           </MenuItem>
           <MenuItem>
-            <button className="copilotKitDebugMenuItem" onClick={() => checkForUpdates(true)}>
+            <button
+              className="copilotKitDebugMenuItem"
+              onClick={() => checkForUpdates(true)}
+            >
               Check for Updates
             </button>
           </MenuItem>
           <hr />
           <MenuItem>
-            <button className="copilotKitDebugMenuItem" onClick={() => setShowDevConsole(false)}>
+            <button
+              className="copilotKitDebugMenuItem"
+              onClick={() => setShowDevConsole(false)}
+            >
               Hide Dev Console
             </button>
           </MenuItem>

package/src/components/dev-console/icons.tsx

@@ -65,7 +65,12 @@ export const CheckIcon = (
     xmlns="http://www.w3.org/2000/svg"
   >
     <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-      <g id="Group-2" transform="translate(-118, 0)" fill="#1BC030" fillRule="nonzero">
+      <g
+        id="Group-2"
+        transform="translate(-118, 0)"
+        fill="#1BC030"
+        fillRule="nonzero"
+      >
         <g id="Group" transform="translate(118, 0)">
           <path
             d="M0,7 C0,3.13384615 3.13384615,0 7,0 C10.8661538,0 14,3.13384615 14,7 C14,10.8661538 10.8661538,14 7,14 C3.13384615,14 0,10.8661538 0,7 Z M9.59179487,5.69764103 C9.70905818,5.54139023 9.73249341,5.33388318 9.65303227,5.15541491 C9.57357113,4.97694665 9.40367989,4.85551619 9.20909814,4.83811118 C9.01451638,4.82070616 8.82577109,4.91005717 8.71589744,5.07158974 L6.39261538,8.32389744 L5.22666667,7.15794872 C5.01450582,6.96025518 4.68389046,6.9660885 4.47883563,7.17114332 C4.27378081,7.37619815 4.26794748,7.70681351 4.46564103,7.91897436 L6.08102564,9.53435897 C6.19289944,9.64614839 6.3482622,9.70310251 6.50588106,9.69010587 C6.66349993,9.67710922 6.80743532,9.59547613 6.89948718,9.46687179 L9.59179487,5.69764103 L9.59179487,5.69764103 Z"

package/src/components/dev-console/utils.ts

@@ -25,25 +25,31 @@ export async function getPublishedCopilotKitVersion(
         return parsedVersion;
       }
     } catch (error) {
-      console.error("Failed to parse CopilotKitVersion from localStorage", error);
+      console.error(
+        "Failed to parse CopilotKitVersion from localStorage",
+        error,
+      );
     }
   }
 
   try {
-    const response = await fetch("https://api.cloud.copilotkit.ai/check-for-updates", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
+    const response = await fetch(
+      "https://api.cloud.copilotkit.ai/check-for-updates",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          packages: [
+            {
+              packageName: "@copilotkit/shared",
+              packageVersion: current,
+            },
+          ],
+        }),
       },
-      body: JSON.stringify({
-        packages: [
-          {
-            packageName: "@copilotkit/shared",
-            packageVersion: current,
-          },
-        ],
-      }),
-    });
+    );
 
     const data = await response.json();
 
@@ -66,7 +72,9 @@ export async function getPublishedCopilotKitVersion(
 export function logReadables(context: CopilotContextParams) {
   console.log("%cCurrent Readables:", "font-size: 16px; font-weight: bold;");
 
-  const readables = context.getContextString([], defaultCopilotContextCategories).trim();
+  const readables = context
+    .getContextString([], defaultCopilotContextCategories)
+    .trim();
   if (readables.length === 0) {
     console.log("No readables found");
     return;

package/src/components/help-modal/icons.tsx

@@ -35,11 +35,19 @@ export const CloseIcon = () => (
     width="20"
     height="20"
   >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M6 18L18 6M6 6l12 12"
+    />
   </svg>
 );
 
-export const LoadingSpinnerIcon = ({ color = "rgb(107 114 128)" }: { color?: string }) => (
+export const LoadingSpinnerIcon = ({
+  color = "rgb(107 114 128)",
+}: {
+  color?: string;
+}) => (
   <svg
     style={{
       animation: "copilotKitSpinAnimation 1s linear infinite",

package/src/hooks/use-copy-to-clipboard.tsx

@@ -4,7 +4,9 @@ export interface useCopyToClipboardProps {
   timeout?: number;
 }
 
-export function useCopyToClipboard({ timeout = 2000 }: useCopyToClipboardProps) {
+export function useCopyToClipboard({
+  timeout = 2000,
+}: useCopyToClipboardProps) {
   const [isCopied, setIsCopied] = React.useState<Boolean>(false);
 
   const copyToClipboard = (value: string) => {

package/src/hooks/use-push-to-talk.tsx

@@ -1,4 +1,7 @@
-import { useCopilotContext, useCopilotMessagesContext } from "@copilotkit/react-core";
+import {
+  useCopilotContext,
+  useCopilotMessagesContext,
+} from "@copilotkit/react-core";
 import { gqlToAGUI } from "@copilotkit/runtime-client-gql";
 import { Message } from "@copilotkit/shared";
 import { MutableRefObject, useEffect, useRef, useState } from "react";
@@ -38,7 +41,9 @@ const startRecording = async (
   onStop: () => void,
 ) => {
   if (!mediaStreamRef.current || !audioContextRef.current) {
-    mediaStreamRef.current = await navigator.mediaDevices.getUserMedia({ audio: true });
+    mediaStreamRef.current = await navigator.mediaDevices.getUserMedia({
+      audio: true,
+    });
     audioContextRef.current = new window.AudioContext();
     await audioContextRef.current.resume();
   }
@@ -51,13 +56,21 @@ const startRecording = async (
   mediaRecorderRef.current.onstop = onStop;
 };
 
-const stopRecording = (mediaRecorderRef: MutableRefObject<MediaRecorder | null>) => {
-  if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+const stopRecording = (
+  mediaRecorderRef: MutableRefObject<MediaRecorder | null>,
+) => {
+  if (
+    mediaRecorderRef.current &&
+    mediaRecorderRef.current.state !== "inactive"
+  ) {
     mediaRecorderRef.current.stop();
   }
 };
 
-const transcribeAudio = async (recordedChunks: Blob[], transcribeAudioUrl: string) => {
+const transcribeAudio = async (
+  recordedChunks: Blob[],
+  transcribeAudioUrl: string,
+) => {
   const completeBlob = new Blob(recordedChunks, { type: "audio/mp4" });
   const formData = new FormData();
   formData.append("file", completeBlob, "recording.mp4");
@@ -75,7 +88,11 @@ const transcribeAudio = async (recordedChunks: Blob[], transcribeAudioUrl: strin
   return transcription.text;
 };
 
-const playAudioResponse = (text: string, textToSpeechUrl: string, audioContext: AudioContext) => {
+const playAudioResponse = (
+  text: string,
+  textToSpeechUrl: string,
+  audioContext: AudioContext,
+) => {
   const encodedText = encodeURIComponent(text);
   const url = `${textToSpeechUrl}?text=${encodedText}`;
 
@@ -104,7 +121,8 @@ export const usePushToTalk = ({
   sendFunction: SendFunction;
   inProgress: boolean;
 }) => {
-  const [pushToTalkState, setPushToTalkState] = useState<PushToTalkState>("idle");
+  const [pushToTalkState, setPushToTalkState] =
+    useState<PushToTalkState>("idle");
   const mediaStreamRef = useRef<MediaStream | null>(null);
   const audioContextRef = useRef<AudioContext | null>(null);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
@@ -112,7 +130,9 @@ export const usePushToTalk = ({
   const generalContext = useCopilotContext();
   const messagesContext = useCopilotMessagesContext();
   const context = { ...generalContext, ...messagesContext };
-  const [startReadingFromMessageId, setStartReadingFromMessageId] = useState<string | null>(null);
+  const [startReadingFromMessageId, setStartReadingFromMessageId] = useState<
+    string | null
+  >(null);
 
   useEffect(() => {
     if (pushToTalkState === "recording") {
@@ -128,14 +148,15 @@ export const usePushToTalk = ({
     } else {
       stopRecording(mediaRecorderRef);
       if (pushToTalkState === "transcribing") {
-        transcribeAudio(recordedChunks.current, context.copilotApiConfig.transcribeAudioUrl!).then(
-          async (transcription) => {
-            recordedChunks.current = [];
-            setPushToTalkState("idle");
-            const message = await sendFunction(transcription);
-            setStartReadingFromMessageId(message.id);
-          },
-        );
+        transcribeAudio(
+          recordedChunks.current,
+          context.copilotApiConfig.transcribeAudioUrl!,
+        ).then(async (transcription) => {
+          recordedChunks.current = [];
+          setPushToTalkState("idle");
+          const message = await sendFunction(transcription);
+          setStartReadingFromMessageId(message.id);
+        });
       }
     }
 
@@ -156,8 +177,14 @@ export const usePushToTalk = ({
         .slice(lastMessageIndex + 1)
         .filter((message) => message.role === "assistant");
 
-      const text = messagesAfterLast.map((message) => message.content).join("\n");
-      playAudioResponse(text, context.copilotApiConfig.textToSpeechUrl!, audioContextRef.current!);
+      const text = messagesAfterLast
+        .map((message) => message.content)
+        .join("\n");
+      playAudioResponse(
+        text,
+        context.copilotApiConfig.textToSpeechUrl!,
+        audioContextRef.current!,
+      );
 
       setStartReadingFromMessageId(null);
     }

package/src/lib/utils.ts

@@ -1,4 +1,7 @@
-export async function fetcher<JSON = any>(input: RequestInfo, init?: RequestInit): Promise<JSON> {
+export async function fetcher<JSON = any>(
+  input: RequestInfo,
+  init?: RequestInit,
+): Promise<JSON> {
   const res = await fetch(input, init);
 
   if (!res.ok) {

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../utilities/tsconfig/react-library.json",
+  "extends": "../tsconfig/react-library.json",
   "include": ["."],
   "exclude": [
     "dist",

package/tsup.config.ts

@@ -1,7 +1,11 @@
 import { defineConfig, Options } from "tsup";
 
 export default defineConfig((options: Options) => ({
-  entry: ["src/**/*.{ts,tsx}", "!src/**/*.test.{ts,tsx}", "!src/**/__tests__/**/*"],
+  entry: [
+    "src/**/*.{ts,tsx}",
+    "!src/**/*.test.{ts,tsx}",
+    "!src/**/__tests__/**/*",
+  ],
   format: ["esm", "cjs"],
   dts: true,
   minify: false,