feat(react-ui): expose selectedImages via useCopilotChatImageUploads hook

packages/v1/react-ui/src/components/chat/Chat.tsx

@@ -74,7 +74,13 @@ import { RenderMessage as DefaultRenderMessage } from "./messages/RenderMessage"
 import { AssistantMessage as DefaultAssistantMessage } from "./messages/AssistantMessage";
 import { UserMessage as DefaultUserMessage } from "./messages/UserMessage";
 import { ImageRenderer as DefaultImageRenderer } from "./messages/ImageRenderer";
-import React, { useEffect, useRef, useState, useCallback } from "react";
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  useMemo,
+} from "react";
 import {
   SystemMessageFunction,
   useCopilotContext,
@@ -335,6 +341,31 @@ export type ImageUpload = {
   bytes: string;
 };
 
+type CopilotChatImageUploadsContextValue = {
+  selectedImages: Array<ImageUpload>;
+  setSelectedImages: React.Dispatch<React.SetStateAction<Array<ImageUpload>>>;
+  clearSelectedImages: () => void;
+  removeSelectedImage: (index: number) => void;
+};
+
+const CopilotChatImageUploadsContext = React.createContext<
+  CopilotChatImageUploadsContextValue | undefined
+>(undefined);
+
+/**
+ * Access image upload state from within a CopilotChat tree.
+ */
+export function useCopilotChatImageUploads() {
+  const context = React.useContext(CopilotChatImageUploadsContext);
+  if (!context) {
+    throw new Error(
+      "Context not found. Did you forget to render this hook inside a <CopilotChat> component?",
+    );
+  }
+
+  return context;
+}
+
 export function CopilotChat({
   instructions,
   suggestions = "auto",
@@ -391,6 +422,13 @@ export function CopilotChat({
   >({});
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  const clearSelectedImages = useCallback(() => {
+    setSelectedImages([]);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }, []);
+
   // Helper function to trigger event hooks only if publicApiKey is provided
   const triggerObservabilityHook = useCallback(
     (hookName: keyof CopilotObservabilityHooks, ...args: any[]) => {
@@ -600,11 +638,7 @@ export function CopilotChat({
 
   // Wrapper for sendMessage to clear selected images
   const handleSendMessage = (text: string) => {
-    const images = selectedImages;
-    setSelectedImages([]);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
+    clearSelectedImages();
 
     // Trigger message sent event
     triggerObservabilityHook("onMessageSent", text);
@@ -686,6 +720,16 @@ export function CopilotChat({
     setSelectedImages((prev) => prev.filter((_, i) => i !== index));
   };
 
+  const imageUploadsContextValue = useMemo(
+    () => ({
+      selectedImages,
+      setSelectedImages,
+      clearSelectedImages,
+      removeSelectedImage,
+    }),
+    [selectedImages, clearSelectedImages],
+  );
+
   const handleThumbsUp = (message: Message) => {
     if (onThumbsUp) {
       onThumbsUp(message);
@@ -717,80 +761,84 @@ export function CopilotChat({
   };
 
   return (
-    <WrappedCopilotChat icons={icons} labels={labels} className={className}>
-      {/* Render error above messages if present */}
-      {chatError &&
-        renderError &&
-        renderError({
-          ...chatError,
-          onDismiss: () => setChatError(null),
-          onRetry: () => {
-            // Clear error and potentially retry based on operation
-            setChatError(null);
-            // TODO: Implement specific retry logic based on operation type
-          },
-        })}
-
-      <Messages
-        AssistantMessage={AssistantMessage}
-        UserMessage={UserMessage}
-        RenderMessage={RenderMessage}
-        messages={messages}
-        inProgress={isLoading}
-        onRegenerate={handleRegenerate}
-        onCopy={handleCopy}
-        onThumbsUp={handleThumbsUp}
-        onThumbsDown={handleThumbsDown}
-        messageFeedback={messageFeedback}
-        markdownTagRenderers={markdownTagRenderers}
-        ImageRenderer={ImageRenderer}
-        ErrorMessage={ErrorMessage}
-        chatError={chatError}
-        // Legacy props - passed through to Messages component
-        RenderTextMessage={RenderTextMessage}
-        RenderActionExecutionMessage={RenderActionExecutionMessage}
-        RenderAgentStateMessage={RenderAgentStateMessage}
-        RenderResultMessage={RenderResultMessage}
-        RenderImageMessage={RenderImageMessage}
-      >
-        {currentSuggestions.length > 0 && (
-          <RenderSuggestionsList
-            onSuggestionClick={handleSendMessage}
-            suggestions={currentSuggestions}
-            isLoading={isLoadingSuggestions}
-          />
+    <CopilotChatImageUploadsContext.Provider value={imageUploadsContextValue}>
+      <WrappedCopilotChat icons={icons} labels={labels} className={className}>
+        {/* Render error above messages if present */}
+        {chatError &&
+          renderError &&
+          renderError({
+            ...chatError,
+            onDismiss: () => setChatError(null),
+            onRetry: () => {
+              // Clear error and potentially retry based on operation
+              setChatError(null);
+              // TODO: Implement specific retry logic based on operation type
+            },
+          })}
+
+        <Messages
+          AssistantMessage={AssistantMessage}
+          UserMessage={UserMessage}
+          RenderMessage={RenderMessage}
+          messages={messages}
+          inProgress={isLoading}
+          onRegenerate={handleRegenerate}
+          onCopy={handleCopy}
+          onThumbsUp={handleThumbsUp}
+          onThumbsDown={handleThumbsDown}
+          messageFeedback={messageFeedback}
+          markdownTagRenderers={markdownTagRenderers}
+          ImageRenderer={ImageRenderer}
+          ErrorMessage={ErrorMessage}
+          chatError={chatError}
+          // Legacy props - passed through to Messages component
+          RenderTextMessage={RenderTextMessage}
+          RenderActionExecutionMessage={RenderActionExecutionMessage}
+          RenderAgentStateMessage={RenderAgentStateMessage}
+          RenderResultMessage={RenderResultMessage}
+          RenderImageMessage={RenderImageMessage}
+        >
+          {currentSuggestions.length > 0 && (
+            <RenderSuggestionsList
+              onSuggestionClick={handleSendMessage}
+              suggestions={currentSuggestions}
+              isLoading={isLoadingSuggestions}
+            />
+          )}
+        </Messages>
+
+        {imageUploadsEnabled && (
+          <>
+            <ImageUploadQueue
+              images={selectedImages}
+              onRemoveImage={removeSelectedImage}
+            />
+            <input
+              type="file"
+              multiple
+              ref={fileInputRef}
+              onChange={handleImageUpload}
+              accept={inputFileAccept}
+              style={{ display: "none" }}
+            />
+          </>
         )}
-      </Messages>
-
-      {imageUploadsEnabled && (
-        <>
-          <ImageUploadQueue
-            images={selectedImages}
-            onRemoveImage={removeSelectedImage}
-          />
-          <input
-            type="file"
-            multiple
-            ref={fileInputRef}
-            onChange={handleImageUpload}
-            accept={inputFileAccept}
-            style={{ display: "none" }}
-          />
-        </>
-      )}
-      <Input
-        inProgress={isLoading}
-        chatReady={Boolean(agent)}
-        // @ts-ignore
-        onSend={handleSendMessage}
-        isVisible={isVisible}
-        onStop={stopGeneration}
-        onUpload={
-          imageUploadsEnabled ? () => fileInputRef.current?.click() : undefined
-        }
-        hideStopButton={hideStopButton}
-      />
-    </WrappedCopilotChat>
+        <Input
+          inProgress={isLoading}
+          chatReady={Boolean(agent)}
+          // @ts-ignore
+          onSend={handleSendMessage}
+          isVisible={isVisible}
+          onStop={stopGeneration}
+          onUpload={
+            imageUploadsEnabled
+              ? () => fileInputRef.current?.click()
+              : undefined
+          }
+          hideStopButton={hideStopButton}
+        />
+      </WrappedCopilotChat>
+    </CopilotChatImageUploadsContext.Provider>
   );
 }
 

packages/v1/react-ui/src/components/chat/index.tsx

@@ -2,6 +2,7 @@ export * from "./props";
 export { CopilotPopup } from "./Popup";
 export { CopilotSidebar } from "./Sidebar";
 export { CopilotChat } from "./Chat";
+export { useCopilotChatImageUploads } from "./Chat";
 export { Markdown } from "./Markdown";
 export { AssistantMessage } from "./messages/AssistantMessage";
 export { UserMessage } from "./messages/UserMessage";