@copilotkit/react-ui 1.10.0-next.7 → 1.10.0-next.9

package/dist/components/chat/index.mjs

@@ -1,25 +1,25 @@
 import "../../chunk-SC6JRFAJ.mjs";
 import {
   CopilotSidebar
-} from "../../chunk-DSY4ZRMN.mjs";
+} from "../../chunk-TW4LLLTE.mjs";
 import "../../chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "../../chunk-EDWWF7QY.mjs";
-import "../../chunk-YH3DHANT.mjs";
+} from "../../chunk-6C3YVF5W.mjs";
+import "../../chunk-7K2X77PW.mjs";
 import "../../chunk-C3GSYRC3.mjs";
-import "../../chunk-V6DDX4LH.mjs";
+import "../../chunk-GDSZGYCE.mjs";
 import "../../chunk-V7W6IM2V.mjs";
-import "../../chunk-WBPBTTQD.mjs";
+import "../../chunk-FFJHOZX6.mjs";
+import "../../chunk-Q5V6S67N.mjs";
+import "../../chunk-JY2CSDKN.mjs";
 import "../../chunk-KXE2JCUH.mjs";
 import "../../chunk-NRA3CFEE.mjs";
 import "../../chunk-BH6PCAAL.mjs";
-import "../../chunk-Q5V6S67N.mjs";
-import "../../chunk-JY2CSDKN.mjs";
 import "../../chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "../../chunk-K344MVUT.mjs";
+} from "../../chunk-2KG77MAY.mjs";
 import "../../chunk-JHUTTP5C.mjs";
 import {
   AssistantMessage

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

@@ -1,4 +1,4 @@
-import { Message, UserMessage, AIMessage, ImageData } from '@copilotkit/shared';
+import { CopilotErrorEvent, Message, UserMessage, AIMessage, ImageData } from '@copilotkit/shared';
 import { CopilotChatSuggestion } from '../../types/suggestions.js';
 import { ReactNode } from 'react';
 
@@ -39,6 +39,11 @@ interface CopilotObservabilityHooks {
      * Called when chat generation stops
      */
     onChatStopped?: () => void;
+    /**
+     * Called when an error occurs in the chat
+     * This enables chat-specific error handling UX while preserving system-wide error monitoring
+     */
+    onError?: (errorEvent: CopilotErrorEvent) => void;
 }
 interface ButtonProps {
 }

package/dist/components/chat/props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/chat/props.ts"],"sourcesContent":["import { AIMessage, Message, UserMessage } from \"@copilotkit/shared\";\nimport { CopilotChatSuggestion } from \"../../types/suggestions\";\nimport { ReactNode } from \"react\";\nimport { ImageData } from \"@copilotkit/shared\";\n\n/**\n * Event hooks for CopilotKit chat events.\n * These hooks only work when publicApiKey is provided.\n */\nexport interface CopilotObservabilityHooks {\n  /**\n   * Called when a message is sent by the user\n   */\n  onMessageSent?: (message: string) => void;\n\n  /**\n   * Called when the chat is minimized/closed\n   */\n  onChatMinimized?: () => void;\n\n  /**\n   * Called when the chat is expanded/opened\n   */\n  onChatExpanded?: () => void;\n\n  /**\n   * Called when a message is regenerated\n   */\n  onMessageRegenerated?: (messageId: string) => void;\n\n  /**\n   * Called when a message is copied\n   */\n  onMessageCopied?: (content: string) => void;\n\n  /**\n   * Called when feedback is given (thumbs up/down)\n   */\n  onFeedbackGiven?: (messageId: string, type: \"thumbsUp\" | \"thumbsDown\") => void;\n\n  /**\n   * Called when chat generation starts\n   */\n  onChatStarted?: () => void;\n\n  /**\n   * Called when chat generation stops\n   */\n  onChatStopped?: () => void;\n}\n\nexport interface ButtonProps {}\n\nexport interface WindowProps {\n  clickOutsideToClose: boolean;\n  hitEscapeToClose: boolean;\n  shortcut: string;\n  children?: React.ReactNode;\n}\n\nexport interface HeaderProps {}\n\nexport interface SuggestionsProps {\n  title: string;\n  message: string;\n  partial?: boolean;\n  className?: string;\n  onClick: (message: string) => void;\n}\n\nexport type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {\n  [K in keyof T]: React.FC<{ children?: ReactNode } & T[K]>;\n};\n\nexport interface MessagesProps {\n  messages: Message[];\n  inProgress: boolean;\n  children?: React.ReactNode;\n  AssistantMessage: React.ComponentType<AssistantMessageProps>;\n  UserMessage: React.ComponentType<UserMessageProps>;\n  RenderMessage: React.ComponentType<RenderMessageProps>;\n  ImageRenderer: React.ComponentType<ImageRendererProps>;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: (messageId: string) => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: Message) => void;\n\n  /**\n   * 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\nexport interface Renderer {\n  content: string;\n}\n\nexport interface UserMessageProps {\n  message?: UserMessage;\n  ImageRenderer: React.ComponentType<ImageRendererProps>;\n}\n\nexport interface AssistantMessageProps {\n  /**\n   * The message content from the assistant\n   */\n\n  message?: AIMessage;\n\n  /**\n   * Indicates if this is the last message\n   */\n  isCurrentMessage?: boolean;\n\n  /**\n   * Whether a response is loading, this is when the LLM is thinking of a response but hasn't finished yet.\n   */\n  isLoading: boolean;\n\n  /**\n   * Whether a response is generating, this is when the LLM is actively generating and streaming content.\n   */\n  isGenerating: boolean;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: () => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: Message) => void;\n\n  /**\n   * 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   * A custom image rendering component to use instead of the default.\n   */\n  ImageRenderer?: React.ComponentType<ImageRendererProps>;\n}\n\nexport interface RenderMessageProps {\n  message: Message;\n  inProgress: boolean;\n  index: number;\n  isCurrentMessage: boolean;\n  actionResult?: string;\n  AssistantMessage?: React.ComponentType<AssistantMessageProps>;\n  UserMessage?: React.ComponentType<UserMessageProps>;\n  ImageRenderer?: React.ComponentType<ImageRendererProps>;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: (messageId: string) => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: Message) => void;\n\n  /**\n   * 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\nexport interface InputProps {\n  inProgress: boolean;\n  onSend: (text: string) => Promise<Message>;\n  isVisible?: boolean;\n  onStop?: () => void;\n  onUpload?: () => void;\n  hideStopButton?: boolean;\n}\n\nexport interface RenderSuggestionsListProps {\n  suggestions: CopilotChatSuggestion[];\n  onSuggestionClick: (message: string) => void;\n}\n\nexport interface ImageRendererProps {\n  /**\n   * The image data containing format and bytes\n   */\n  image: ImageData;\n\n  /**\n   * Optional content to display alongside the image\n   */\n  content?: string;\n\n  /**\n   * Additional CSS class name for styling\n   */\n  className?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/components/chat/props.ts"],"sourcesContent":["import { AIMessage, Message, UserMessage, CopilotErrorEvent } from \"@copilotkit/shared\";\nimport { CopilotChatSuggestion } from \"../../types/suggestions\";\nimport { ReactNode } from \"react\";\nimport { ImageData } from \"@copilotkit/shared\";\n\n/**\n * Event hooks for CopilotKit chat events.\n * These hooks only work when publicApiKey is provided.\n */\nexport interface CopilotObservabilityHooks {\n  /**\n   * Called when a message is sent by the user\n   */\n  onMessageSent?: (message: string) => void;\n\n  /**\n   * Called when the chat is minimized/closed\n   */\n  onChatMinimized?: () => void;\n\n  /**\n   * Called when the chat is expanded/opened\n   */\n  onChatExpanded?: () => void;\n\n  /**\n   * Called when a message is regenerated\n   */\n  onMessageRegenerated?: (messageId: string) => void;\n\n  /**\n   * Called when a message is copied\n   */\n  onMessageCopied?: (content: string) => void;\n\n  /**\n   * Called when feedback is given (thumbs up/down)\n   */\n  onFeedbackGiven?: (messageId: string, type: \"thumbsUp\" | \"thumbsDown\") => void;\n\n  /**\n   * Called when chat generation starts\n   */\n  onChatStarted?: () => void;\n\n  /**\n   * Called when chat generation stops\n   */\n  onChatStopped?: () => void;\n\n  /**\n   * Called when an error occurs in the chat\n   * This enables chat-specific error handling UX while preserving system-wide error monitoring\n   */\n  onError?: (errorEvent: CopilotErrorEvent) => void;\n}\n\nexport interface ButtonProps {}\n\nexport interface WindowProps {\n  clickOutsideToClose: boolean;\n  hitEscapeToClose: boolean;\n  shortcut: string;\n  children?: React.ReactNode;\n}\n\nexport interface HeaderProps {}\n\nexport interface SuggestionsProps {\n  title: string;\n  message: string;\n  partial?: boolean;\n  className?: string;\n  onClick: (message: string) => void;\n}\n\nexport type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {\n  [K in keyof T]: React.FC<{ children?: ReactNode } & T[K]>;\n};\n\nexport interface MessagesProps {\n  messages: Message[];\n  inProgress: boolean;\n  children?: React.ReactNode;\n  AssistantMessage: React.ComponentType<AssistantMessageProps>;\n  UserMessage: React.ComponentType<UserMessageProps>;\n  RenderMessage: React.ComponentType<RenderMessageProps>;\n  ImageRenderer: React.ComponentType<ImageRendererProps>;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: (messageId: string) => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: Message) => void;\n\n  /**\n   * 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\nexport interface Renderer {\n  content: string;\n}\n\nexport interface UserMessageProps {\n  message?: UserMessage;\n  ImageRenderer: React.ComponentType<ImageRendererProps>;\n}\n\nexport interface AssistantMessageProps {\n  /**\n   * The message content from the assistant\n   */\n\n  message?: AIMessage;\n\n  /**\n   * Indicates if this is the last message\n   */\n  isCurrentMessage?: boolean;\n\n  /**\n   * Whether a response is loading, this is when the LLM is thinking of a response but hasn't finished yet.\n   */\n  isLoading: boolean;\n\n  /**\n   * Whether a response is generating, this is when the LLM is actively generating and streaming content.\n   */\n  isGenerating: boolean;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: () => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: Message) => void;\n\n  /**\n   * 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   * A custom image rendering component to use instead of the default.\n   */\n  ImageRenderer?: React.ComponentType<ImageRendererProps>;\n}\n\nexport interface RenderMessageProps {\n  message: Message;\n  inProgress: boolean;\n  index: number;\n  isCurrentMessage: boolean;\n  actionResult?: string;\n  AssistantMessage?: React.ComponentType<AssistantMessageProps>;\n  UserMessage?: React.ComponentType<UserMessageProps>;\n  ImageRenderer?: React.ComponentType<ImageRendererProps>;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: (messageId: string) => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: Message) => void;\n\n  /**\n   * 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\nexport interface InputProps {\n  inProgress: boolean;\n  onSend: (text: string) => Promise<Message>;\n  isVisible?: boolean;\n  onStop?: () => void;\n  onUpload?: () => void;\n  hideStopButton?: boolean;\n}\n\nexport interface RenderSuggestionsListProps {\n  suggestions: CopilotChatSuggestion[];\n  onSuggestionClick: (message: string) => void;\n}\n\nexport interface ImageRendererProps {\n  /**\n   * The image data containing format and bytes\n   */\n  image: ImageData;\n\n  /**\n   * Optional content to display alongside the image\n   */\n  content?: string;\n\n  /**\n   * Additional CSS class name for styling\n   */\n  className?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/components/dev-console/console.mjs

@@ -2,12 +2,12 @@
 import {
   CopilotDevConsole,
   DebugMenuButton
-} from "../../chunk-WBPBTTQD.mjs";
+} from "../../chunk-FFJHOZX6.mjs";
+import "../../chunk-Q5V6S67N.mjs";
+import "../../chunk-JY2CSDKN.mjs";
 import "../../chunk-KXE2JCUH.mjs";
 import "../../chunk-NRA3CFEE.mjs";
 import "../../chunk-BH6PCAAL.mjs";
-import "../../chunk-Q5V6S67N.mjs";
-import "../../chunk-JY2CSDKN.mjs";
 import "../../chunk-XWG3L6QC.mjs";
 import "../../chunk-MRXNTQOX.mjs";
 export {

package/dist/components/dev-console/index.mjs

@@ -1,14 +1,14 @@
 import "../../chunk-V7W6IM2V.mjs";
 import {
   CopilotDevConsole
-} from "../../chunk-WBPBTTQD.mjs";
-import "../../chunk-KXE2JCUH.mjs";
-import "../../chunk-NRA3CFEE.mjs";
-import "../../chunk-BH6PCAAL.mjs";
+} from "../../chunk-FFJHOZX6.mjs";
 import "../../chunk-Q5V6S67N.mjs";
 import {
   shouldShowDevConsole
 } from "../../chunk-JY2CSDKN.mjs";
+import "../../chunk-KXE2JCUH.mjs";
+import "../../chunk-NRA3CFEE.mjs";
+import "../../chunk-BH6PCAAL.mjs";
 import "../../chunk-XWG3L6QC.mjs";
 import "../../chunk-MRXNTQOX.mjs";
 export {

package/dist/components/index.d.ts

@@ -18,7 +18,7 @@ import 'react/jsx-runtime';
 import './chat/Modal.js';
 import '@copilotkit/react-core/dist/types/coagent-state';
 import '@copilotkit/react-core/dist/hooks/use-tree';
-import '@copilotkit/react-core/dist/copilot-context-78fc727c';
+import '@copilotkit/react-core/dist/copilot-context-256f9020';
 import '@copilotkit/react-core/dist/types/coagent-action';
 import '@copilotkit/runtime-client-gql';
 import 'react-markdown';

package/dist/components/index.js

@@ -2326,17 +2326,20 @@ function CopilotChat({
   imageUploadsEnabled,
   inputFileAccept = "image/*",
   hideStopButton,
-  observabilityHooks
+  observabilityHooks,
+  renderError
 }) {
   const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError } = (0, import_react_core9.useCopilotContext)();
+  const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
   const [selectedImages, setSelectedImages] = (0, import_react14.useState)([]);
+  const [chatError, setChatError] = (0, import_react14.useState)(null);
   const fileInputRef = (0, import_react14.useRef)(null);
   const triggerObservabilityHook = (0, import_react14.useCallback)(
     (hookName, ...args) => {
-      if (copilotApiConfig.publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
+      if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
         observabilityHooks[hookName](...args);
       }
-      if ((observabilityHooks == null ? void 0 : observabilityHooks[hookName]) && !copilotApiConfig.publicApiKey) {
+      if ((observabilityHooks == null ? void 0 : observabilityHooks[hookName]) && !publicApiKey) {
         setBannerError(
           new import_shared3.CopilotKitError({
             message: "observabilityHooks requires a publicApiKey to function.",
@@ -2348,7 +2351,50 @@ function CopilotChat({
         import_shared3.styledConsole.publicApiKeyRequired("observabilityHooks");
       }
     },
-    [copilotApiConfig.publicApiKey, observabilityHooks]
+    [publicApiKey, observabilityHooks, setBannerError]
+  );
+  const triggerChatError = (0, import_react14.useCallback)(
+    (error, operation, originalError) => {
+      const errorMessage = (error == null ? void 0 : error.message) || (error == null ? void 0 : error.toString()) || "An error occurred";
+      setChatError({
+        message: errorMessage,
+        operation,
+        timestamp: Date.now()
+      });
+      if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks.onError)) {
+        const errorEvent = {
+          type: "error",
+          timestamp: Date.now(),
+          context: {
+            source: "ui",
+            request: {
+              operation,
+              url: chatApiEndpoint,
+              startTime: Date.now()
+            },
+            technical: {
+              environment: "browser",
+              userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
+              stackTrace: originalError instanceof Error ? originalError.stack : void 0
+            }
+          },
+          error
+        };
+        observabilityHooks.onError(errorEvent);
+      }
+      if ((observabilityHooks == null ? void 0 : observabilityHooks.onError) && !publicApiKey) {
+        setBannerError(
+          new import_shared3.CopilotKitError({
+            message: "observabilityHooks.onError requires a publicApiKey to function.",
+            code: import_shared3.CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: import_shared3.Severity.CRITICAL,
+            visibility: import_shared3.ErrorVisibility.BANNER
+          })
+        );
+        import_shared3.styledConsole.publicApiKeyRequired("observabilityHooks.onError");
+      }
+    },
+    [publicApiKey, chatApiEndpoint, observabilityHooks, setBannerError]
   );
   (0, import_react14.useEffect)(() => {
     if (!imageUploadsEnabled)
@@ -2389,12 +2435,13 @@ function CopilotChat({
         const loadedImages = (yield Promise.all(imagePromises)).filter((img) => img !== null);
         setSelectedImages((prev) => [...prev, ...loadedImages]);
       } catch (error) {
+        triggerChatError(error, "processClipboardImages", error);
         console.error("Error processing pasted images:", error);
       }
     });
     document.addEventListener("paste", handlePaste);
     return () => document.removeEventListener("paste", handlePaste);
-  }, [imageUploadsEnabled]);
+  }, [imageUploadsEnabled, triggerChatError]);
   (0, import_react14.useEffect)(() => {
     if (!(additionalInstructions == null ? void 0 : additionalInstructions.length)) {
       setChatInstructions(instructions || "");
@@ -2485,6 +2532,7 @@ function CopilotChat({
       const loadedImages = yield Promise.all(fileReadPromises);
       setSelectedImages((prev) => [...prev, ...loadedImages]);
     } catch (error) {
+      triggerChatError(error, "processUploadedImages", error);
       console.error("Error reading files:", error);
     }
   });
@@ -2504,6 +2552,12 @@ function CopilotChat({
     triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsDown");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
+    chatError && renderError && renderError(__spreadProps(__spreadValues({}, chatError), {
+      onDismiss: () => setChatError(null),
+      onRetry: () => {
+        setChatError(null);
+      }
+    })),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Messages2,
       {
@@ -2735,9 +2789,9 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
       yield (0, import_react_core10.runAgent)(
         generalContext.agentSession.agentName,
         stableContext,
+        messagesContext.messages,
         appendMessage,
-        runChatCompletion,
-        hint
+        runChatCompletion
       );
     }
   });
@@ -2807,6 +2861,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
 
 // src/components/chat/Modal.tsx
 var import_react_core11 = require("@copilotkit/react-core");
+var import_shared5 = require("@copilotkit/shared");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var CopilotModalInner = (_a) => {
   var _b = _a, {
@@ -2832,14 +2887,26 @@ var CopilotModalInner = (_a) => {
     "Button",
     "Header"
   ]);
-  const { copilotApiConfig } = (0, import_react_core11.useCopilotContext)();
+  const { copilotApiConfig, setBannerError } = (0, import_react_core11.useCopilotContext)();
+  const { publicApiKey } = copilotApiConfig;
   const triggerObservabilityHook = (0, import_react15.useCallback)(
     (hookName, ...args) => {
-      if (copilotApiConfig.publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
+      if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
         observabilityHooks[hookName](...args);
       }
+      if ((observabilityHooks == null ? void 0 : observabilityHooks[hookName]) && !publicApiKey) {
+        setBannerError(
+          new import_shared5.CopilotKitError({
+            message: "observabilityHooks requires a publicApiKey to function.",
+            code: import_shared5.CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: import_shared5.Severity.CRITICAL,
+            visibility: import_shared5.ErrorVisibility.BANNER
+          })
+        );
+        import_shared5.styledConsole.publicApiKeyRequired("observabilityHooks");
+      }
     },
-    [copilotApiConfig.publicApiKey, observabilityHooks]
+    [publicApiKey, observabilityHooks, setBannerError]
   );
   const { open } = useChatContext();
   const prevOpen = (0, import_react15.useRef)(open);