@copilotkit/react-ui 1.50.1-next.1 → 1.50.1-next.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # ui
 
+## 1.50.1-next.3
+
+### Patch Changes
+
+- Updated dependencies [eac8b20]
+  - @copilotkit/react-core@1.50.1-next.3
+  - @copilotkit/runtime-client-gql@1.50.1-next.3
+  - @copilotkit/shared@1.50.1-next.3
+
+## 1.50.1-next.2
+
+### Patch Changes
+
+- bdc7a8f: - fix: restore message callbacks
+- Updated dependencies [bdc7a8f]
+  - @copilotkit/react-core@1.50.1-next.2
+  - @copilotkit/runtime-client-gql@1.50.1-next.2
+  - @copilotkit/shared@1.50.1-next.2
+
 ## 1.50.1-next.1
 
 ### Patch Changes

package/dist/{chunk-ZFJ7CTWS.mjs → chunk-7PR2KJDO.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "./chunk-OMWF7DF2.mjs";
+} from "./chunk-QPQRLXN3.mjs";
 import {
   Input
 } from "./chunk-3W6J75HS.mjs";
@@ -219,4 +219,4 @@ var CopilotModal = (_a) => {
 export {
   CopilotModal
 };
-//# sourceMappingURL=chunk-ZFJ7CTWS.mjs.map
+//# sourceMappingURL=chunk-7PR2KJDO.mjs.map

package/dist/{chunk-2OU4DPXR.mjs → chunk-ELUJRANC.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-ZFJ7CTWS.mjs";
+} from "./chunk-7PR2KJDO.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -18,4 +18,4 @@ function CopilotPopup(props) {
 export {
   CopilotPopup
 };
-//# sourceMappingURL=chunk-2OU4DPXR.mjs.map
+//# sourceMappingURL=chunk-ELUJRANC.mjs.map

package/dist/{chunk-RCFFZY5O.mjs → chunk-LQEFRHRT.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-ZFJ7CTWS.mjs";
+} from "./chunk-7PR2KJDO.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -27,4 +27,4 @@ function CopilotSidebar(props) {
 export {
   CopilotSidebar
 };
-//# sourceMappingURL=chunk-RCFFZY5O.mjs.map
+//# sourceMappingURL=chunk-LQEFRHRT.mjs.map

package/dist/{chunk-OMWF7DF2.mjs → chunk-QPQRLXN3.mjs}

@@ -246,7 +246,11 @@ function CopilotChat({
     isLoadingSuggestions,
     agent
   } = useCopilotChatInternal({
-    suggestions
+    suggestions,
+    onInProgress,
+    onSubmitMessage,
+    onStopGeneration,
+    onReloadMessages
   });
   const prevIsLoading = useRef(isLoading);
   useEffect(() => {
@@ -428,4 +432,4 @@ export {
   CopilotChat,
   WrappedCopilotChat
 };
-//# sourceMappingURL=chunk-OMWF7DF2.mjs.map
+//# sourceMappingURL=chunk-QPQRLXN3.mjs.map

package/dist/chunk-QPQRLXN3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/Chat.tsx"],"sourcesContent":["/**\n * <br/>\n * <img src=\"https://cdn.copilotkit.ai/docs/copilotkit/images/CopilotChat.gif\" width=\"500\" />\n *\n * A chatbot panel component for the CopilotKit framework. The component allows for a high degree\n * of customization through various props and custom CSS.\n *\n * ## Install Dependencies\n *\n * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.\n *\n * ```shell npm2yarn \\\"@copilotkit/react-ui\"\\\n * npm install @copilotkit/react-core @copilotkit/react-ui\n * ```\n *\n * ## Usage\n *\n * ```tsx\n * import { CopilotChat } from \"@copilotkit/react-ui\";\n * import \"@copilotkit/react-ui/styles.css\";\n *\n * <CopilotChat\n *   labels={{\n *     title: \"Your Assistant\",\n *     initial: \"Hi! 👋 How can I assist you today?\",\n *   }}\n * />\n * ```\n *\n * ### With Observability Hooks\n *\n * To monitor user interactions, provide the `observabilityHooks` prop.\n * **Note:** This requires a `publicApiKey` in the `<CopilotKit>` provider.\n *\n * ```tsx\n * <CopilotKit publicApiKey=\"YOUR_PUBLIC_API_KEY\">\n *   <CopilotChat\n *     observabilityHooks={{\n *       onMessageSent: (message) => {\n *         console.log(\"Message sent:\", message);\n *       },\n *     }}\n *   />\n * </CopilotKit>\n * ```\n *\n * ### Look & Feel\n *\n * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:\n * ```tsx title=\"YourRootComponent.tsx\"\n * ...\n * import \"@copilotkit/react-ui/styles.css\"; // [!code highlight]\n *\n * export function YourRootComponent() {\n *   return (\n *     <CopilotKit>\n *       ...\n *     </CopilotKit>\n *   );\n * }\n * ```\n * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.\n */\n\nimport {\n  ChatContext,\n  ChatContextProvider,\n  CopilotChatIcons,\n  CopilotChatLabels,\n} from \"./ChatContext\";\nimport { Messages as DefaultMessages } from \"./Messages\";\nimport { Input as DefaultInput } from \"./Input\";\nimport { RenderMessage as DefaultRenderMessage } from \"./messages/RenderMessage\";\nimport { AssistantMessage as DefaultAssistantMessage } from \"./messages/AssistantMessage\";\nimport { UserMessage as DefaultUserMessage } from \"./messages/UserMessage\";\nimport { ImageRenderer as DefaultImageRenderer } from \"./messages/ImageRenderer\";\nimport React, { useEffect, useRef, useState, useCallback } from \"react\";\nimport {\n  SystemMessageFunction,\n  useCopilotContext,\n  useCopilotChatInternal,\n  type OnStopGeneration,\n  type OnReloadMessages,\n  type ChatSuggestions,\n} from \"@copilotkit/react-core\";\nimport {\n  CopilotKitError,\n  CopilotKitErrorCode,\n  CopilotErrorEvent,\n  Message,\n  Severity,\n  ErrorVisibility,\n  styledConsole,\n  CopilotErrorHandler,\n  randomUUID,\n} from \"@copilotkit/shared\";\nimport {\n  AssistantMessageProps,\n  ChatError,\n  ComponentsMap,\n  CopilotObservabilityHooks,\n  ErrorMessageProps,\n  ImageRendererProps,\n  InputProps,\n  MessagesProps,\n  RenderMessageProps,\n  RenderSuggestionsListProps,\n  UserMessageProps,\n} from \"./props\";\n\nimport { ImageUploadQueue } from \"./ImageUploadQueue\";\nimport { Suggestions as DefaultRenderSuggestionsList } from \"./Suggestions\";\n\n/**\n * Props for CopilotChat component.\n */\nexport interface CopilotChatProps {\n  /**\n   * Custom instructions to be added to the system message. Use this property to\n   * provide additional context or guidance to the language model, influencing\n   * its responses. These instructions can include specific directions,\n   * preferences, or criteria that the model should consider when generating\n   * its output, thereby tailoring the conversation more precisely to the\n   * user's needs or the application's requirements.\n   */\n  instructions?: string;\n\n  /**\n   * Controls the behavior of suggestions in the chat interface.\n   *\n   * `auto` (default) - Suggestions are generated automatically:\n   *   - When the chat is first opened (empty state)\n   *   - After each message exchange completes\n   *   - Uses configuration from `useCopilotChatSuggestions` hooks\n   *\n   * `manual` - Suggestions are controlled programmatically:\n   *   - Use `setSuggestions()` to set custom suggestions\n   *   - Use `generateSuggestions()` to trigger AI generation\n   *   - Access via `useCopilotChat` hook\n   *\n   * `SuggestionItem[]` - Static suggestions array:\n   *   - Always shows the same suggestions\n   *   - No AI generation involved\n   */\n  suggestions?: ChatSuggestions;\n\n  /**\n   * A callback that gets called when the in progress state changes.\n   */\n  onInProgress?: (inProgress: boolean) => void;\n\n  /**\n   * A callback that gets called when a new message it submitted.\n   */\n  onSubmitMessage?: (message: string) => void | Promise<void>;\n\n  /**\n   * A custom stop generation function.\n   */\n  onStopGeneration?: OnStopGeneration;\n\n  /**\n   * A custom reload messages function.\n   */\n  onReloadMessages?: OnReloadMessages;\n\n  /**\n   * A callback function to regenerate the assistant's response\n   */\n  onRegenerate?: (messageId: string) => void;\n\n  /**\n   * A callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * A callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: Message) => void;\n\n  /**\n   * A callback function for thumbs down feedback\n   */\n  onThumbsDown?: (message: Message) => void;\n\n  /**\n   * A list of markdown components to render in assistant message.\n   * Useful when you want to render custom elements in the message (e.g a reference tag element)\n   */\n  markdownTagRenderers?: ComponentsMap;\n\n  /**\n   * Icons can be used to set custom icons for the chat window.\n   */\n  icons?: CopilotChatIcons;\n\n  /**\n   * Labels can be used to set custom labels for the chat window.\n   */\n  labels?: CopilotChatLabels;\n\n  /**\n   * Enable image upload button (image inputs only supported on some models)\n   */\n  imageUploadsEnabled?: boolean;\n\n  /**\n   * The 'accept' attribute for the file input used for image uploads.\n   * Defaults to \"image/*\".\n   */\n  inputFileAccept?: string;\n\n  /**\n   * A function that takes in context string and instructions and returns\n   * the system message to include in the chat request.\n   * Use this to completely override the system message, when providing\n   * instructions is not enough.\n   */\n  makeSystemMessage?: SystemMessageFunction;\n\n  /**\n   * Disables inclusion of CopilotKit’s default system message. When true, no system message is sent (this also suppresses any custom message from <code>makeSystemMessage</code>).\n   */\n  disableSystemMessage?: boolean;\n\n  /**\n   * A custom assistant message component to use instead of the default.\n   */\n  AssistantMessage?: React.ComponentType<AssistantMessageProps>;\n\n  /**\n   * A custom user message component to use instead of the default.\n   */\n  UserMessage?: React.ComponentType<UserMessageProps>;\n\n  /**\n   * A custom error message component to use instead of the default.\n   */\n  ErrorMessage?: React.ComponentType<ErrorMessageProps>;\n\n  /**\n   * A custom Messages component to use instead of the default.\n   */\n  Messages?: React.ComponentType<MessagesProps>;\n\n  /**\n   * @deprecated - use RenderMessage instead\n   */\n  RenderTextMessage?: React.ComponentType<RenderMessageProps>;\n\n  /**\n   * @deprecated - use RenderMessage instead\n   */\n  RenderActionExecutionMessage?: React.ComponentType<RenderMessageProps>;\n\n  /**\n   * @deprecated - use RenderMessage instead\n   */\n  RenderAgentStateMessage?: React.ComponentType<RenderMessageProps>;\n\n  /**\n   * @deprecated - use RenderMessage instead\n   */\n  RenderResultMessage?: React.ComponentType<RenderMessageProps>;\n\n  /**\n   * @deprecated - use RenderMessage instead\n   */\n  RenderImageMessage?: React.ComponentType<RenderMessageProps>;\n\n  /**\n   * A custom RenderMessage component to use instead of the default.\n   *\n   * **Warning**: This is a break-glass solution to allow for custom\n   * rendering of messages. You are most likely looking to swap out\n   * the AssistantMessage and UserMessage components instead which\n   * are also props.\n   */\n  RenderMessage?: React.ComponentType<RenderMessageProps>;\n\n  /**\n   * A custom suggestions list component to use instead of the default.\n   */\n  RenderSuggestionsList?: React.ComponentType<RenderSuggestionsListProps>;\n\n  /**\n   * A custom Input component to use instead of the default.\n   */\n  Input?: React.ComponentType<InputProps>;\n\n  /**\n   * A custom image rendering component to use instead of the default.\n   */\n  ImageRenderer?: React.ComponentType<ImageRendererProps>;\n\n  /**\n   * A class name to apply to the root element.\n   */\n  className?: string;\n\n  /**\n   * Children to render.\n   */\n  children?: React.ReactNode;\n\n  hideStopButton?: boolean;\n\n  /**\n   * Event hooks for CopilotKit chat events.\n   * These hooks only work when publicApiKey is provided.\n   */\n  observabilityHooks?: CopilotObservabilityHooks;\n\n  /**\n   * Custom error renderer for chat-specific errors.\n   * When provided, errors will be displayed inline within the chat interface.\n   */\n  renderError?: (error: {\n    message: string;\n    operation?: string;\n    timestamp: number;\n    onDismiss: () => void;\n    onRetry?: () => void;\n  }) => React.ReactNode;\n\n  /**\n   * Optional handler for comprehensive debugging and observability.\n   */\n  onError?: CopilotErrorHandler;\n}\n\nexport type ImageUpload = {\n  contentType: string;\n  bytes: string;\n};\n\nexport function CopilotChat({\n  instructions,\n  suggestions = \"auto\",\n  onSubmitMessage,\n  makeSystemMessage,\n  disableSystemMessage,\n  onInProgress,\n  onStopGeneration,\n  onReloadMessages,\n  onRegenerate,\n  onCopy,\n  onThumbsUp,\n  onThumbsDown,\n  markdownTagRenderers,\n  Messages = DefaultMessages,\n  RenderMessage = DefaultRenderMessage,\n  RenderSuggestionsList = DefaultRenderSuggestionsList,\n  Input = DefaultInput,\n  className,\n  icons,\n  labels,\n  AssistantMessage = DefaultAssistantMessage,\n  UserMessage = DefaultUserMessage,\n  ImageRenderer = DefaultImageRenderer,\n  ErrorMessage,\n  imageUploadsEnabled,\n  inputFileAccept = \"image/*\",\n  hideStopButton,\n  observabilityHooks,\n  renderError,\n  onError,\n  // Legacy props - deprecated\n  RenderTextMessage,\n  RenderActionExecutionMessage,\n  RenderAgentStateMessage,\n  RenderResultMessage,\n  RenderImageMessage,\n}: CopilotChatProps) {\n  const {\n    additionalInstructions,\n    setChatInstructions,\n    copilotApiConfig,\n    setBannerError,\n    setInternalErrorHandler,\n    removeInternalErrorHandler,\n  } = useCopilotContext();\n\n  // Destructure stable values to avoid object reference changes\n  const { publicApiKey, chatApiEndpoint } = copilotApiConfig;\n  const [selectedImages, setSelectedImages] = useState<Array<ImageUpload>>([]);\n  const [chatError, setChatError] = useState<ChatError | null>(null);\n  const [messageFeedback, setMessageFeedback] = useState<Record<string, \"thumbsUp\" | \"thumbsDown\">>(\n    {},\n  );\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  // Helper function to trigger event hooks only if publicApiKey is provided\n  const triggerObservabilityHook = useCallback(\n    (hookName: keyof CopilotObservabilityHooks, ...args: any[]) => {\n      if (publicApiKey && observabilityHooks?.[hookName]) {\n        (observabilityHooks[hookName] as any)(...args);\n      }\n      if (observabilityHooks?.[hookName] && !publicApiKey) {\n        setBannerError(\n          new CopilotKitError({\n            message: \"observabilityHooks requires a publicApiKey to function.\",\n            code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,\n            severity: Severity.CRITICAL,\n            visibility: ErrorVisibility.BANNER,\n          }),\n        );\n        styledConsole.publicApiKeyRequired(\"observabilityHooks\");\n      }\n    },\n    [publicApiKey, observabilityHooks, setBannerError],\n  );\n\n  // Helper function to trigger chat error and render error UI\n  const triggerChatError = useCallback(\n    (error: any, operation: string, originalError?: any) => {\n      const errorMessage = error?.message || error?.toString() || \"An error occurred\";\n\n      // Set chat error state for rendering\n      setChatError({\n        message: errorMessage,\n        operation,\n        timestamp: Date.now(),\n      });\n\n      const errorEvent: CopilotErrorEvent = {\n        type: \"error\",\n        timestamp: Date.now(),\n        context: {\n          source: \"ui\",\n          request: {\n            operation,\n            url: chatApiEndpoint,\n            startTime: Date.now(),\n          },\n          technical: {\n            environment: \"browser\",\n            userAgent: typeof navigator !== \"undefined\" ? navigator.userAgent : undefined,\n            stackTrace: originalError instanceof Error ? originalError.stack : undefined,\n          },\n        },\n        error,\n      };\n\n      if (onError) {\n        onError(errorEvent);\n      }\n\n      // Also trigger observability hook if available\n      if (publicApiKey && observabilityHooks?.onError) {\n        observabilityHooks.onError(errorEvent);\n      }\n\n      // Show banner error if onError hook is used without publicApiKey\n      if (observabilityHooks?.onError && !publicApiKey) {\n        setBannerError(\n          new CopilotKitError({\n            message: \"observabilityHooks.onError requires a publicApiKey to function.\",\n            code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,\n            severity: Severity.CRITICAL,\n            visibility: ErrorVisibility.BANNER,\n          }),\n        );\n        styledConsole.publicApiKeyRequired(\"observabilityHooks.onError\");\n      }\n    },\n    [publicApiKey, chatApiEndpoint, observabilityHooks, setBannerError],\n  );\n\n  useEffect(() => {\n    const id = \"chat-component\";\n    setInternalErrorHandler({\n      [id]: (error: CopilotErrorEvent) => {\n        if (!error) return;\n        triggerChatError(error.error, \"sendMessage\");\n      },\n    });\n    return () => {\n      // unregister when this instance unmounts\n      removeInternalErrorHandler?.(id);\n    };\n  }, [triggerChatError, setInternalErrorHandler, removeInternalErrorHandler]);\n\n  // Clipboard paste handler\n  useEffect(() => {\n    if (!imageUploadsEnabled) return;\n\n    const handlePaste = async (e: ClipboardEvent) => {\n      const target = e.target as HTMLElement;\n      if (!target.parentElement?.classList.contains(\"copilotKitInput\")) return;\n\n      const items = Array.from(e.clipboardData?.items || []);\n      const imageItems = items.filter((item) => item.type.startsWith(\"image/\"));\n\n      if (imageItems.length === 0) return;\n\n      e.preventDefault(); // Prevent default paste behavior for images\n\n      const imagePromises: Promise<ImageUpload | null>[] = imageItems.map((item) => {\n        const file = item.getAsFile();\n        if (!file) return Promise.resolve(null);\n\n        return new Promise<ImageUpload | null>((resolve, reject) => {\n          const reader = new FileReader();\n          reader.onload = (e) => {\n            const base64String = (e.target?.result as string)?.split(\",\")[1];\n            if (base64String) {\n              resolve({\n                contentType: file.type,\n                bytes: base64String,\n              });\n            } else {\n              resolve(null);\n            }\n          };\n          reader.onerror = reject;\n          reader.readAsDataURL(file);\n        });\n      });\n\n      try {\n        const loadedImages = (await Promise.all(imagePromises)).filter((img) => img !== null);\n        setSelectedImages((prev) => [...prev, ...loadedImages]);\n      } catch (error) {\n        // Trigger chat-level error handler\n        triggerChatError(error, \"processClipboardImages\", error);\n        console.error(\"Error processing pasted images:\", error);\n      }\n    };\n\n    document.addEventListener(\"paste\", handlePaste);\n    return () => document.removeEventListener(\"paste\", handlePaste);\n  }, [imageUploadsEnabled, triggerChatError]);\n\n  useEffect(() => {\n    if (!additionalInstructions?.length) {\n      setChatInstructions(instructions || \"\");\n      return;\n    }\n\n    /*\n      Will result in a prompt like:\n\n      You are a helpful assistant. \n      Additionally, follow these instructions:\n      - Do not answer questions about the weather.\n      - Do not answer questions about the stock market.\"\n    */\n    const combinedAdditionalInstructions = [\n      instructions,\n      \"Additionally, follow these instructions:\",\n      ...additionalInstructions.map((instruction) => `- ${instruction}`),\n    ];\n\n    setChatInstructions(combinedAdditionalInstructions.join(\"\\n\") || \"\");\n  }, [instructions, additionalInstructions]);\n\n  const {\n    messages,\n    isLoading,\n    sendMessage,\n    stopGeneration,\n    reloadMessages,\n    suggestions: currentSuggestions,\n    isLoadingSuggestions,\n    agent,\n  } = useCopilotChatInternal({\n    suggestions,\n    onInProgress,\n    onSubmitMessage,\n    onStopGeneration,\n    onReloadMessages,\n  });\n  // makeSystemMessage,\n  // disableSystemMessage,\n\n  // Track loading state changes for chat start/stop events\n  const prevIsLoading = useRef(isLoading);\n  useEffect(() => {\n    if (prevIsLoading.current !== isLoading) {\n      if (isLoading) {\n        triggerObservabilityHook(\"onChatStarted\");\n      } else {\n        triggerObservabilityHook(\"onChatStopped\");\n      }\n      prevIsLoading.current = isLoading;\n    }\n  }, [isLoading, triggerObservabilityHook]);\n\n  // Wrapper for sendMessage to clear selected images\n  const handleSendMessage = (text: string) => {\n    const images = selectedImages;\n    setSelectedImages([]);\n    if (fileInputRef.current) {\n      fileInputRef.current.value = \"\";\n    }\n\n    // Trigger message sent event\n    triggerObservabilityHook(\"onMessageSent\", text);\n\n    // TODO: send images?\n    return sendMessage({\n      id: randomUUID(),\n      content: text,\n      role: \"user\",\n    });\n  };\n\n  const chatContext = React.useContext(ChatContext);\n  const isVisible = chatContext ? chatContext.open : true;\n\n  const handleRegenerate = (messageId: string) => {\n    if (onRegenerate) {\n      onRegenerate(messageId);\n    }\n\n    // Trigger message regenerated event\n    triggerObservabilityHook(\"onMessageRegenerated\", messageId);\n\n    reloadMessages(messageId);\n  };\n\n  const handleCopy = (message: string) => {\n    if (onCopy) {\n      onCopy(message);\n    }\n\n    // Trigger message copied event\n    triggerObservabilityHook(\"onMessageCopied\", message);\n  };\n\n  const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (!event.target.files || event.target.files.length === 0) {\n      return;\n    }\n\n    const files = Array.from(event.target.files).filter((file) => file.type.startsWith(\"image/\"));\n    if (files.length === 0) return;\n\n    const fileReadPromises = files.map((file) => {\n      return new Promise<{ contentType: string; bytes: string }>((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onload = (e) => {\n          const base64String = (e.target?.result as string)?.split(\",\")[1] || \"\";\n          if (base64String) {\n            resolve({\n              contentType: file.type,\n              bytes: base64String,\n            });\n          }\n        };\n        reader.onerror = reject;\n        reader.readAsDataURL(file);\n      });\n    });\n\n    try {\n      const loadedImages = await Promise.all(fileReadPromises);\n      setSelectedImages((prev) => [...prev, ...loadedImages]);\n    } catch (error) {\n      // Trigger chat-level error handler\n      triggerChatError(error, \"processUploadedImages\", error);\n      console.error(\"Error reading files:\", error);\n    }\n  };\n\n  const removeSelectedImage = (index: number) => {\n    setSelectedImages((prev) => prev.filter((_, i) => i !== index));\n  };\n\n  const handleThumbsUp = (message: Message) => {\n    if (onThumbsUp) {\n      onThumbsUp(message);\n    }\n\n    // Update feedback state\n    setMessageFeedback((prev) => ({\n      ...prev,\n      [message.id]: \"thumbsUp\",\n    }));\n\n    // Trigger feedback given event\n    triggerObservabilityHook(\"onFeedbackGiven\", message.id, \"thumbsUp\");\n  };\n\n  const handleThumbsDown = (message: Message) => {\n    if (onThumbsDown) {\n      onThumbsDown(message);\n    }\n\n    // Update feedback state\n    setMessageFeedback((prev) => ({\n      ...prev,\n      [message.id]: \"thumbsDown\",\n    }));\n\n    // Trigger feedback given event\n    triggerObservabilityHook(\"onFeedbackGiven\", message.id, \"thumbsDown\");\n  };\n\n  return (\n    <WrappedCopilotChat icons={icons} labels={labels} className={className}>\n      {/* Render error above messages if present */}\n      {chatError &&\n        renderError &&\n        renderError({\n          ...chatError,\n          onDismiss: () => setChatError(null),\n          onRetry: () => {\n            // Clear error and potentially retry based on operation\n            setChatError(null);\n            // TODO: Implement specific retry logic based on operation type\n          },\n        })}\n\n      <Messages\n        AssistantMessage={AssistantMessage}\n        UserMessage={UserMessage}\n        RenderMessage={RenderMessage}\n        messages={messages}\n        inProgress={isLoading}\n        onRegenerate={handleRegenerate}\n        onCopy={handleCopy}\n        onThumbsUp={handleThumbsUp}\n        onThumbsDown={handleThumbsDown}\n        messageFeedback={messageFeedback}\n        markdownTagRenderers={markdownTagRenderers}\n        ImageRenderer={ImageRenderer}\n        ErrorMessage={ErrorMessage}\n        chatError={chatError}\n        // Legacy props - passed through to Messages component\n        RenderTextMessage={RenderTextMessage}\n        RenderActionExecutionMessage={RenderActionExecutionMessage}\n        RenderAgentStateMessage={RenderAgentStateMessage}\n        RenderResultMessage={RenderResultMessage}\n        RenderImageMessage={RenderImageMessage}\n      >\n        {currentSuggestions.length > 0 && (\n          <RenderSuggestionsList\n            onSuggestionClick={handleSendMessage}\n            suggestions={currentSuggestions}\n            isLoading={isLoadingSuggestions}\n          />\n        )}\n      </Messages>\n\n      {imageUploadsEnabled && (\n        <>\n          <ImageUploadQueue images={selectedImages} onRemoveImage={removeSelectedImage} />\n          <input\n            type=\"file\"\n            multiple\n            ref={fileInputRef}\n            onChange={handleImageUpload}\n            accept={inputFileAccept}\n            style={{ display: \"none\" }}\n          />\n        </>\n      )}\n      <Input\n        inProgress={isLoading}\n        chatReady={Boolean(agent)}\n        // @ts-ignore\n        onSend={handleSendMessage}\n        isVisible={isVisible}\n        onStop={stopGeneration}\n        onUpload={imageUploadsEnabled ? () => fileInputRef.current?.click() : undefined}\n        hideStopButton={hideStopButton}\n      />\n    </WrappedCopilotChat>\n  );\n}\n\nexport function WrappedCopilotChat({\n  children,\n  icons,\n  labels,\n  className,\n}: {\n  children: React.ReactNode;\n  icons?: CopilotChatIcons;\n  labels?: CopilotChatLabels;\n  className?: string;\n}) {\n  const chatContext = React.useContext(ChatContext);\n  if (!chatContext) {\n    return (\n      <ChatContextProvider icons={icons} labels={labels} open={true} setOpen={() => {}}>\n        <div className={`copilotKitChat ${className ?? \"\"}`}>{children}</div>\n      </ChatContextProvider>\n    );\n  }\n  return <>{children}</>;\n}\n"],"mappings":"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","names":["Messages","RenderMessage","Input","AssistantMessage","UserMessage","ImageRenderer","e","_a","_b"]}

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

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CopilotChatIcons, CopilotChatLabels } from './ChatContext.js';
 import React__default from 'react';
-import { ChatSuggestions, SystemMessageFunction, HintFunction } from '@copilotkit/react-core';
+import { ChatSuggestions, OnStopGeneration, OnReloadMessages, SystemMessageFunction } from '@copilotkit/react-core';
 import { Message, CopilotErrorHandler } from '@copilotkit/shared';
 import { ComponentsMap, AssistantMessageProps, UserMessageProps, ErrorMessageProps, MessagesProps, RenderMessageProps, RenderSuggestionsListProps, InputProps, ImageRendererProps, CopilotObservabilityHooks } from './props.js';
 import '../../types/suggestions.js';
@@ -189,48 +189,6 @@ interface CopilotChatProps {
      */
     onError?: CopilotErrorHandler;
 }
-interface OnStopGenerationArguments {
-    /**
-     * The name of the currently executing agent.
-     */
-    currentAgentName: string | undefined;
-    /**
-     * The messages in the chat.
-     */
-    messages: Message[];
-    /**
-     * Set the messages in the chat.
-     */
-    setMessages: (messages: Message[]) => void;
-    /**
-     * Stop chat generation.
-     */
-    stopGeneration: () => void;
-    /**
-     * Restart the currently executing agent.
-     */
-    restartCurrentAgent: () => void;
-    /**
-     * Stop the currently executing agent.
-     */
-    stopCurrentAgent: () => void;
-    /**
-     * Run the currently executing agent.
-     */
-    runCurrentAgent: (hint?: HintFunction) => Promise<void>;
-    /**
-     * Set the state of the currently executing agent.
-     */
-    setCurrentAgentState: (state: any) => void;
-}
-type OnReloadMessagesArguments = OnStopGenerationArguments & {
-    /**
-     * The message on which "regenerate" was pressed
-     */
-    messageId: string;
-};
-type OnStopGeneration = (args: OnStopGenerationArguments) => void;
-type OnReloadMessages = (args: OnReloadMessagesArguments) => void;
 type ImageUpload = {
     contentType: string;
     bytes: string;
@@ -243,4 +201,4 @@ declare function WrappedCopilotChat({ children, icons, labels, className, }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-export { CopilotChat, CopilotChatProps, ImageUpload, OnReloadMessages, OnReloadMessagesArguments, OnStopGeneration, WrappedCopilotChat };
+export { CopilotChat, CopilotChatProps, ImageUpload, WrappedCopilotChat };

package/dist/components/chat/Chat.js

@@ -2081,7 +2081,11 @@ function CopilotChat({
     isLoadingSuggestions,
     agent
   } = (0, import_react_core5.useCopilotChatInternal)({
-    suggestions
+    suggestions,
+    onInProgress,
+    onSubmitMessage,
+    onStopGeneration,
+    onReloadMessages
   });
   const prevIsLoading = (0, import_react11.useRef)(isLoading);
   (0, import_react11.useEffect)(() => {