@copilotkit/react-ui 1.10.0-next.0 → 1.10.0-next.10

package/CHANGELOG.md

@@ -1,5 +1,117 @@
 # ui
 
+## 1.10.0-next.10
+
+### Patch Changes
+
+- 6d1de58: - fix: address issues that would cause headless UI breaking changes in the next release
+
+  Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>
+
+  - fix: more fixes addressing breaking changes in new Headless UI
+
+  Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>
+
+  - chore: address linting issues
+
+  Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>
+
+  - chore: fixing branding and docs
+
+  Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>
+
+  - chore: more docs fixing
+
+  Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>
+
+- Updated dependencies [6d1de58]
+  - @copilotkit/react-core@1.10.0-next.10
+  - @copilotkit/shared@1.10.0-next.10
+  - @copilotkit/runtime-client-gql@1.10.0-next.10
+
+## 1.10.0-next.9
+
+### Patch Changes
+
+- 2354be4: - feat(chat): implement custom error handling in CopilotChat and Modal components
+
+  - Added `renderError` prop to `CopilotChat` for inline error rendering.
+  - Introduced `triggerChatError` function to manage chat-specific errors and observability hooks.
+  - Updated `Modal` to handle observability hooks with public API key checks.
+  - Enhanced `CopilotObservabilityHooks` interface to include `onError` for error event handling.
+  - @copilotkit/react-core@1.10.0-next.9
+  - @copilotkit/runtime-client-gql@1.10.0-next.9
+  - @copilotkit/shared@1.10.0-next.9
+
+## 1.10.0-next.8
+
+### Patch Changes
+
+- Updated dependencies [6de24ce]
+  - @copilotkit/react-core@1.10.0-next.8
+  - @copilotkit/runtime-client-gql@1.10.0-next.8
+  - @copilotkit/shared@1.10.0-next.8
+
+## 1.10.0-next.7
+
+### Patch Changes
+
+- @copilotkit/runtime-client-gql@1.10.0-next.7
+- @copilotkit/react-core@1.10.0-next.7
+- @copilotkit/shared@1.10.0-next.7
+
+## 1.10.0-next.6
+
+### Patch Changes
+
+- @copilotkit/runtime-client-gql@1.10.0-next.6
+- @copilotkit/react-core@1.10.0-next.6
+- @copilotkit/shared@1.10.0-next.6
+
+## 1.10.0-next.5
+
+### Patch Changes
+
+- a8c0263: - feat: add event hooks system for chat components
+- Updated dependencies [a8c0263]
+  - @copilotkit/shared@1.10.0-next.5
+  - @copilotkit/react-core@1.10.0-next.5
+  - @copilotkit/runtime-client-gql@1.10.0-next.5
+
+## 1.10.0-next.4
+
+### Patch Changes
+
+- 967d0ab: - refactor(chat): separate useCopilotChat into internal implementation and public API
+- Updated dependencies [967d0ab]
+  - @copilotkit/react-core@1.10.0-next.4
+  - @copilotkit/runtime-client-gql@1.10.0-next.4
+  - @copilotkit/shared@1.10.0-next.4
+
+## 1.10.0-next.3
+
+### Patch Changes
+
+- @copilotkit/runtime-client-gql@1.10.0-next.3
+- @copilotkit/react-core@1.10.0-next.3
+- @copilotkit/shared@1.10.0-next.3
+
+## 1.10.0-next.2
+
+### Patch Changes
+
+- @copilotkit/runtime-client-gql@1.10.0-next.2
+- @copilotkit/react-core@1.10.0-next.2
+- @copilotkit/shared@1.10.0-next.2
+
+## 1.10.0-next.1
+
+### Patch Changes
+
+- @copilotkit/runtime-client-gql@1.10.0-next.1
+- @copilotkit/react-core@1.10.0-next.1
+- @copilotkit/shared@1.10.0-next.1
+
 ## 1.10.0-next.0
 
 ### Minor Changes

package/dist/{chunk-O7KTFUAN.mjs → chunk-226ZMOE3.mjs}

@@ -1,6 +1,6 @@
 import {
   Suggestion
-} from "./chunk-Q2467VHZ.mjs";
+} from "./chunk-W26XFBEG.mjs";
 
 // src/components/chat/Suggestions.tsx
 import { jsx } from "react/jsx-runtime";
@@ -21,4 +21,4 @@ function Suggestions({ suggestions, onSuggestionClick }) {
 export {
   Suggestions
 };
-//# sourceMappingURL=chunk-O7KTFUAN.mjs.map
+//# sourceMappingURL=chunk-226ZMOE3.mjs.map

package/dist/{chunk-WHDNKXMP.mjs → chunk-BJHJBS5M.mjs}

@@ -1,10 +1,17 @@
+import {
+  LegacyRenderMessage
+} from "./chunk-MIVUCSGO.mjs";
 import {
   useChatContext
 } from "./chunk-IEMQ2SQW.mjs";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-MRXNTQOX.mjs";
 
 // src/components/chat/Messages.tsx
 import { useEffect, useMemo, useRef } from "react";
-import { useCopilotChat } from "@copilotkit/react-core";
+import { useCopilotChatInternal as useCopilotChat } from "@copilotkit/react-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Messages = ({
   inProgress,
@@ -12,23 +19,55 @@ var Messages = ({
   RenderMessage,
   AssistantMessage,
   UserMessage,
+  ImageRenderer,
   onRegenerate,
   onCopy,
   onThumbsUp,
   onThumbsDown,
-  markdownTagRenderers
+  markdownTagRenderers,
+  // Legacy props
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+  RenderImageMessage
 }) => {
   const { labels } = useChatContext();
-  const { visibleMessages, interrupt } = useCopilotChat();
+  const { messages: visibleMessages, interrupt } = useCopilotChat();
   const initialMessages = useMemo(() => makeInitialMessages(labels.initial), [labels.initial]);
   const messages = [...initialMessages, ...visibleMessages];
   const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
+  const hasLegacyProps = !!(RenderTextMessage || RenderActionExecutionMessage || RenderAgentStateMessage || RenderResultMessage || RenderImageMessage);
+  useEffect(() => {
+    if (hasLegacyProps) {
+      console.warn(
+        "[CopilotKit] Legacy message render props (RenderTextMessage, RenderActionExecutionMessage, etc.) are deprecated. Please use the unified 'RenderMessage' prop instead. See migration guide: https://docs.copilotkit.ai/migration/render-message"
+      );
+    }
+  }, [hasLegacyProps]);
+  const legacyProps = useMemo(
+    () => ({
+      RenderTextMessage,
+      RenderActionExecutionMessage,
+      RenderAgentStateMessage,
+      RenderResultMessage,
+      RenderImageMessage
+    }),
+    [
+      RenderTextMessage,
+      RenderActionExecutionMessage,
+      RenderAgentStateMessage,
+      RenderResultMessage,
+      RenderImageMessage
+    ]
+  );
+  const MessageRenderer = hasLegacyProps ? (props) => /* @__PURE__ */ jsx(LegacyRenderMessage, __spreadProps(__spreadValues({}, props), { legacyProps })) : RenderMessage;
   return /* @__PURE__ */ jsxs("div", { className: "copilotKitMessages", ref: messagesContainerRef, children: [
     /* @__PURE__ */ jsxs("div", { className: "copilotKitMessagesContainer", children: [
       messages.map((message, index) => {
         const isCurrentMessage = index === messages.length - 1;
         return /* @__PURE__ */ jsx(
-          RenderMessage,
+          MessageRenderer,
           {
             message,
             inProgress,
@@ -36,6 +75,7 @@ var Messages = ({
             isCurrentMessage,
             AssistantMessage,
             UserMessage,
+            ImageRenderer,
             onRegenerate,
             onCopy,
             onThumbsUp,
@@ -65,7 +105,7 @@ function makeInitialMessages(initial) {
   return [
     {
       id: initial,
-      role: "system",
+      role: "assistant",
       content: initial
     }
   ];
@@ -132,4 +172,4 @@ export {
   Messages,
   useScrollToBottom
 };
-//# sourceMappingURL=chunk-WHDNKXMP.mjs.map
+//# sourceMappingURL=chunk-BJHJBS5M.mjs.map

package/dist/chunk-BJHJBS5M.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/Messages.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { MessagesProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport { Message } from \"@copilotkit/shared\";\nimport { useCopilotChatInternal as useCopilotChat } from \"@copilotkit/react-core\";\nimport { LegacyRenderMessage, LegacyRenderProps } from \"./messages/LegacyRenderMessage\";\n\nexport const Messages = ({\n  inProgress,\n  children,\n  RenderMessage,\n  AssistantMessage,\n  UserMessage,\n  ImageRenderer,\n  onRegenerate,\n  onCopy,\n  onThumbsUp,\n  onThumbsDown,\n  markdownTagRenderers,\n\n  // Legacy props\n  RenderTextMessage,\n  RenderActionExecutionMessage,\n  RenderAgentStateMessage,\n  RenderResultMessage,\n  RenderImageMessage,\n}: MessagesProps) => {\n  const { labels } = useChatContext();\n  const { messages: visibleMessages, interrupt } = useCopilotChat();\n  const initialMessages = useMemo(() => makeInitialMessages(labels.initial), [labels.initial]);\n  const messages = [...initialMessages, ...visibleMessages];\n  const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);\n\n  // Check if any legacy props are provided\n  const hasLegacyProps = !!(\n    RenderTextMessage ||\n    RenderActionExecutionMessage ||\n    RenderAgentStateMessage ||\n    RenderResultMessage ||\n    RenderImageMessage\n  );\n\n  // Show deprecation warning if legacy props are used\n  useEffect(() => {\n    if (hasLegacyProps) {\n      console.warn(\n        \"[CopilotKit] Legacy message render props (RenderTextMessage, RenderActionExecutionMessage, etc.) are deprecated. \" +\n          \"Please use the unified 'RenderMessage' prop instead. \" +\n          \"See migration guide: https://docs.copilotkit.ai/migration/render-message\",\n      );\n    }\n  }, [hasLegacyProps]);\n\n  // Create legacy props object for the adapter\n  const legacyProps: LegacyRenderProps = useMemo(\n    () => ({\n      RenderTextMessage,\n      RenderActionExecutionMessage,\n      RenderAgentStateMessage,\n      RenderResultMessage,\n      RenderImageMessage,\n    }),\n    [\n      RenderTextMessage,\n      RenderActionExecutionMessage,\n      RenderAgentStateMessage,\n      RenderResultMessage,\n      RenderImageMessage,\n    ],\n  );\n\n  // Determine which render component to use\n  const MessageRenderer = hasLegacyProps\n    ? (props: any) => <LegacyRenderMessage {...props} legacyProps={legacyProps} />\n    : RenderMessage;\n\n  return (\n    <div className=\"copilotKitMessages\" ref={messagesContainerRef}>\n      <div className=\"copilotKitMessagesContainer\">\n        {messages.map((message, index) => {\n          const isCurrentMessage = index === messages.length - 1;\n          return (\n            <MessageRenderer\n              key={index}\n              message={message}\n              inProgress={inProgress}\n              index={index}\n              isCurrentMessage={isCurrentMessage}\n              AssistantMessage={AssistantMessage}\n              UserMessage={UserMessage}\n              ImageRenderer={ImageRenderer}\n              onRegenerate={onRegenerate}\n              onCopy={onCopy}\n              onThumbsUp={onThumbsUp}\n              onThumbsDown={onThumbsDown}\n              markdownTagRenderers={markdownTagRenderers}\n            />\n          );\n        })}\n        {interrupt}\n      </div>\n      <footer className=\"copilotKitMessagesFooter\" ref={messagesEndRef}>\n        {children}\n      </footer>\n    </div>\n  );\n};\n\nfunction makeInitialMessages(initial: string | string[] | undefined): Message[] {\n  if (!initial) return [];\n\n  if (Array.isArray(initial)) {\n    return initial.map((message) => {\n      return {\n        id: message,\n        role: \"assistant\",\n        content: message,\n      };\n    });\n  }\n\n  return [\n    {\n      id: initial,\n      role: \"assistant\",\n      content: initial,\n    },\n  ];\n}\n\nexport function useScrollToBottom(messages: Message[]) {\n  const messagesEndRef = useRef<HTMLDivElement>(null);\n  const messagesContainerRef = useRef<HTMLDivElement | null>(null);\n  const isProgrammaticScrollRef = useRef(false);\n  const isUserScrollUpRef = useRef(false);\n\n  const scrollToBottom = () => {\n    if (messagesContainerRef.current && messagesEndRef.current) {\n      isProgrammaticScrollRef.current = true;\n      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;\n    }\n  };\n\n  const handleScroll = () => {\n    if (isProgrammaticScrollRef.current) {\n      isProgrammaticScrollRef.current = false;\n      return;\n    }\n\n    if (messagesContainerRef.current) {\n      const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;\n      isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;\n    }\n  };\n\n  useEffect(() => {\n    const container = messagesContainerRef.current;\n    if (container) {\n      container.addEventListener(\"scroll\", handleScroll);\n    }\n    return () => {\n      if (container) {\n        container.removeEventListener(\"scroll\", handleScroll);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    const container = messagesContainerRef.current;\n    if (!container) {\n      return;\n    }\n\n    const mutationObserver = new MutationObserver(() => {\n      if (!isUserScrollUpRef.current) {\n        scrollToBottom();\n      }\n    });\n\n    mutationObserver.observe(container, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, []);\n\n  useEffect(() => {\n    isUserScrollUpRef.current = false;\n    scrollToBottom();\n  }, [messages.filter((m) => m.role === \"user\").length]);\n\n  return { messagesEndRef, messagesContainerRef };\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-Z4XPPVZT.mjs → chunk-EYRKZDP5.mjs}

@@ -29,4 +29,4 @@ function useCopilotChatSuggestions({
 export {
   useCopilotChatSuggestions
 };
-//# sourceMappingURL=chunk-Z4XPPVZT.mjs.map
+//# sourceMappingURL=chunk-EYRKZDP5.mjs.map

package/dist/chunk-EYRKZDP5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-copilot-chat-suggestions.tsx"],"sourcesContent":["/**\n * <Callout type=\"warning\">\n *   useCopilotChatSuggestions is experimental. The interface is not final and\n *   can change without notice.\n * </Callout>\n *\n * `useCopilotReadable` is a React hook that provides app-state and other information\n * to the Copilot. Optionally, the hook can also handle hierarchical state within your\n * application, passing these parent-child relationships to the Copilot.\n *\n * <br/>\n * <img src=\"https://cdn.copilotkit.ai/docs/copilotkit/images/use-copilot-chat-suggestions/use-copilot-chat-suggestions.gif\" width=\"500\" />\n *\n * ## Usage\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 * ### Simple Usage\n *\n * ```tsx\n * import { useCopilotChatSuggestions } from \"@copilotkit/react-ui\";\n *\n * export function MyComponent() {\n *   const [employees, setEmployees] = useState([]);\n *\n *   useCopilotChatSuggestions({\n *     instructions: `The following employees are on duty: ${JSON.stringify(employees)}`,\n *   });\n * }\n * ```\n *\n * ### Dependency Management\n *\n * ```tsx\n * import { useCopilotChatSuggestions } from \"@copilotkit/react-ui\";\n *\n * export function MyComponent() {\n *   useCopilotChatSuggestions(\n *     {\n *       instructions: \"Suggest the most relevant next actions.\",\n *     },\n *     [appState],\n *   );\n * }\n * ```\n *\n * In the example above, the suggestions are generated based on the given instructions.\n * The hook monitors `appState`, and updates suggestions accordingly whenever it changes.\n *\n * ### Behavior and Lifecycle\n *\n * The hook registers the configuration with the chat context upon component mount and\n * removes it on unmount, ensuring a clean and efficient lifecycle management.\n */\n\nimport { useEffect } from \"react\";\nimport { useCopilotContext } from \"@copilotkit/react-core\";\nimport { randomId } from \"@copilotkit/shared\";\n\ninterface UseCopilotChatSuggestionsConfiguration {\n  /**\n   * A prompt or instructions for the GPT to generate suggestions.\n   */\n  instructions: string;\n  /**\n   * The minimum number of suggestions to generate. Defaults to `1`.\n   * @default 1\n   */\n  minSuggestions?: number;\n  /**\n   * The maximum number of suggestions to generate. Defaults to `3`.\n   * @default 1\n   */\n  maxSuggestions?: number;\n\n  /**\n   * Whether the suggestions are available. Defaults to `enabled`.\n   * @default enabled\n   */\n  available?: \"enabled\" | \"disabled\";\n\n  /**\n   * An optional class name to apply to the suggestions.\n   */\n  className?: string;\n}\n\nexport function useCopilotChatSuggestions(\n  {\n    available = \"enabled\",\n    instructions,\n    className,\n    minSuggestions = 1,\n    maxSuggestions = 3,\n  }: UseCopilotChatSuggestionsConfiguration,\n  dependencies: any[] = [],\n) {\n  const context = useCopilotContext();\n\n  useEffect(() => {\n    if (available === \"disabled\") return;\n\n    const id = randomId();\n\n    context.addChatSuggestionConfiguration(id, {\n      instructions,\n      minSuggestions,\n      maxSuggestions,\n      className,\n    });\n\n    return () => {\n      context.removeChatSuggestionConfiguration(id);\n    };\n  }, [...dependencies, instructions, minSuggestions, maxSuggestions, className, available]);\n}\n"],"mappings":";AA6DA,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AA8BlB,SAAS,0BACd;AAAA,EACE,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,iBAAiB;AACnB,GACA,eAAsB,CAAC,GACvB;AACA,QAAM,UAAU,kBAAkB;AAElC,YAAU,MAAM;AACd,QAAI,cAAc;AAAY;AAE9B,UAAM,KAAK,SAAS;AAEpB,YAAQ,+BAA+B,IAAI;AAAA,MACzC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,cAAQ,kCAAkC,EAAE;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,GAAG,cAAc,cAAc,gBAAgB,gBAAgB,WAAW,SAAS,CAAC;AAC1F;","names":[]}

package/dist/{chunk-SGFUVPDB.mjs → chunk-FFJHOZX6.mjs}

@@ -10,7 +10,7 @@ import {
   logMessages,
   logReadables,
   shouldShowDevConsole
-} from "./chunk-QN7T3GWI.mjs";
+} from "./chunk-JY2CSDKN.mjs";
 import {
   CopilotKitHelpModal
 } from "./chunk-NRA3CFEE.mjs";
@@ -199,4 +199,4 @@ export {
   CopilotDevConsole,
   DebugMenuButton
 };
-//# sourceMappingURL=chunk-SGFUVPDB.mjs.map
+//# sourceMappingURL=chunk-FFJHOZX6.mjs.map

package/dist/{chunk-WPVTPQ7X.mjs → chunk-GBP47ONN.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotModal
-} from "./chunk-GJ3MFNBX.mjs";
+} from "./chunk-Y44VLEUH.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -27,4 +27,4 @@ function CopilotSidebar(props) {
 export {
   CopilotSidebar
 };
-//# sourceMappingURL=chunk-WPVTPQ7X.mjs.map
+//# sourceMappingURL=chunk-GBP47ONN.mjs.map

package/dist/chunk-GBP47ONN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat/Sidebar.tsx"],"sourcesContent":["/**\n * <br/>\n * <img src=\"https://cdn.copilotkit.ai/docs/copilotkit/images/CopilotSidebar.gif\" width=\"500\" />\n *\n * A chatbot sidebar component for the CopilotKit framework. Highly customizable through various props and custom CSS.\n *\n * See [CopilotPopup](/reference/components/chat/CopilotPopup) for a popup version of this component.\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 { CopilotSidebar } from \"@copilotkit/react-ui\";\n * import \"@copilotkit/react-ui/styles.css\";\n *\n * <CopilotSidebar\n *   labels={{\n *     title: \"Your Assistant\",\n *     initial: \"Hi! 👋 How can I assist you today?\",\n *   }}\n * >\n *   <YourApp/>\n * </CopilotSidebar>\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 *   <CopilotSidebar\n *     observabilityHooks={{\n *       onChatExpanded: () => {\n *         console.log(\"Sidebar opened\");\n *       },\n *       onChatMinimized: () => {\n *         console.log(\"Sidebar closed\");\n *       },\n *     }}\n *   >\n *     <YourApp/>\n *   </CopilotSidebar>\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 */\nimport React, { useState } from \"react\";\nimport { CopilotModal, CopilotModalProps } from \"./Modal\";\n\nexport function CopilotSidebar(props: CopilotModalProps) {\n  props = {\n    ...props,\n    className: props.className ? props.className + \" copilotKitSidebar\" : \"copilotKitSidebar\",\n  };\n  const [expandedClassName, setExpandedClassName] = useState(\n    props.defaultOpen ? \"sidebarExpanded\" : \"\",\n  );\n\n  const onSetOpen = (open: boolean) => {\n    props.onSetOpen?.(open);\n    setExpandedClassName(open ? \"sidebarExpanded\" : \"\");\n  };\n\n  return (\n    <div className={`copilotKitSidebarContentWrapper ${expandedClassName}`}>\n      <CopilotModal {...props} {...{ onSetOpen }}>\n        {props.children}\n      </CopilotModal>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAuEA,SAAgB,gBAAgB;AAmB1B;AAhBC,SAAS,eAAe,OAA0B;AACvD,UAAQ,iCACH,QADG;AAAA,IAEN,WAAW,MAAM,YAAY,MAAM,YAAY,uBAAuB;AAAA,EACxE;AACA,QAAM,CAAC,mBAAmB,oBAAoB,IAAI;AAAA,IAChD,MAAM,cAAc,oBAAoB;AAAA,EAC1C;AAEA,QAAM,YAAY,CAAC,SAAkB;AAnFvC;AAoFI,gBAAM,cAAN,+BAAkB;AAClB,yBAAqB,OAAO,oBAAoB,EAAE;AAAA,EACpD;AAEA,SACE,oBAAC,SAAI,WAAW,mCAAmC,qBACjD,8BAAC,8DAAiB,QAAW,EAAE,UAAU,IAAxC,EACE,gBAAM,WACT,GACF;AAEJ;","names":[]}

package/dist/{chunk-GVKA7RQQ.mjs → chunk-GDSZGYCE.mjs}

@@ -1,6 +1,6 @@
 import {
   CopilotDevConsole
-} from "./chunk-SGFUVPDB.mjs";
+} from "./chunk-FFJHOZX6.mjs";
 import {
   useChatContext
 } from "./chunk-IEMQ2SQW.mjs";
@@ -29,4 +29,4 @@ var Header = ({}) => {
 export {
   Header
 };
-//# sourceMappingURL=chunk-GVKA7RQQ.mjs.map
+//# sourceMappingURL=chunk-GDSZGYCE.mjs.map

package/dist/{chunk-LXCD3K7B.mjs → chunk-GJ4SX4JE.mjs}

@@ -1,6 +1,18 @@
+import {
+  Suggestions
+} from "./chunk-226ZMOE3.mjs";
+import {
+  ImageUploadQueue
+} from "./chunk-PLHTVHUW.mjs";
+import {
+  Input
+} from "./chunk-DTRPPNSA.mjs";
+import {
+  Messages
+} from "./chunk-BJHJBS5M.mjs";
 import {
   RenderMessage
-} from "./chunk-JHUTTP5C.mjs";
+} from "./chunk-T5QU6KSB.mjs";
 import {
   AssistantMessage
 } from "./chunk-GCKKSSBU.mjs";
@@ -10,18 +22,6 @@ import {
 import {
   UserMessage
 } from "./chunk-VVL6JFCJ.mjs";
-import {
-  Suggestions
-} from "./chunk-O7KTFUAN.mjs";
-import {
-  ImageUploadQueue
-} from "./chunk-PLHTVHUW.mjs";
-import {
-  Input
-} from "./chunk-DTRPPNSA.mjs";
-import {
-  Messages
-} from "./chunk-WHDNKXMP.mjs";
 import {
   ChatContext,
   ChatContextProvider
@@ -35,10 +35,17 @@ import {
 // src/components/chat/Chat.tsx
 import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import {
-  useCopilotChat,
+  useCopilotChatInternal as useCopilotChat,
   useCopilotContext,
   useCopilotMessagesContext
 } from "@copilotkit/react-core";
+import {
+  CopilotKitError,
+  CopilotKitErrorCode,
+  Severity,
+  ErrorVisibility,
+  styledConsole
+} from "@copilotkit/shared";
 import { randomId } from "@copilotkit/shared";
 import { runAgent, stopAgent } from "@copilotkit/react-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -67,11 +74,83 @@ function CopilotChat({
   ImageRenderer: ImageRenderer2 = ImageRenderer,
   imageUploadsEnabled,
   inputFileAccept = "image/*",
-  hideStopButton
+  hideStopButton,
+  observabilityHooks,
+  renderError,
+  // Legacy props - deprecated
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+  RenderImageMessage
 }) {
-  const { additionalInstructions, setChatInstructions } = useCopilotContext();
+  const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError } = useCopilotContext();
+  const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
   const [selectedImages, setSelectedImages] = useState([]);
+  const [chatError, setChatError] = useState(null);
   const fileInputRef = useRef(null);
+  const triggerObservabilityHook = useCallback(
+    (hookName, ...args) => {
+      if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
+        observabilityHooks[hookName](...args);
+      }
+      if ((observabilityHooks == null ? void 0 : observabilityHooks[hookName]) && !publicApiKey) {
+        setBannerError(
+          new CopilotKitError({
+            message: "observabilityHooks requires a publicApiKey to function.",
+            code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: Severity.CRITICAL,
+            visibility: ErrorVisibility.BANNER
+          })
+        );
+        styledConsole.publicApiKeyRequired("observabilityHooks");
+      }
+    },
+    [publicApiKey, observabilityHooks, setBannerError]
+  );
+  const triggerChatError = 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 CopilotKitError({
+            message: "observabilityHooks.onError requires a publicApiKey to function.",
+            code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: Severity.CRITICAL,
+            visibility: ErrorVisibility.BANNER
+          })
+        );
+        styledConsole.publicApiKeyRequired("observabilityHooks.onError");
+      }
+    },
+    [publicApiKey, chatApiEndpoint, observabilityHooks, setBannerError]
+  );
   useEffect(() => {
     if (!imageUploadsEnabled)
       return;
@@ -111,12 +190,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]);
   useEffect(() => {
     if (!(additionalInstructions == null ? void 0 : additionalInstructions.length)) {
       setChatInstructions(instructions || "");
@@ -130,7 +210,7 @@ function CopilotChat({
     setChatInstructions(combinedAdditionalInstructions.join("\n") || "");
   }, [instructions, additionalInstructions]);
   const {
-    visibleMessages,
+    messages,
     isLoading,
     sendMessage,
     stopGeneration,
@@ -144,12 +224,24 @@ function CopilotChat({
     onStopGeneration,
     onReloadMessages
   );
+  const prevIsLoading = useRef(isLoading);
+  useEffect(() => {
+    if (prevIsLoading.current !== isLoading) {
+      if (isLoading) {
+        triggerObservabilityHook("onChatStarted");
+      } else {
+        triggerObservabilityHook("onChatStopped");
+      }
+      prevIsLoading.current = isLoading;
+    }
+  }, [isLoading, triggerObservabilityHook]);
   const handleSendMessage = (text) => {
     const images = selectedImages;
     setSelectedImages([]);
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
+    triggerObservabilityHook("onMessageSent", text);
     return sendMessage(text, images);
   };
   const chatContext = React.useContext(ChatContext);
@@ -158,12 +250,14 @@ function CopilotChat({
     if (onRegenerate) {
       onRegenerate(messageId);
     }
+    triggerObservabilityHook("onMessageRegenerated", messageId);
     reloadMessages(messageId);
   };
   const handleCopy = (message) => {
     if (onCopy) {
       onCopy(message);
     }
+    triggerObservabilityHook("onMessageCopied", message);
   };
   const handleImageUpload = (event) => __async(this, null, function* () {
     if (!event.target.files || event.target.files.length === 0) {
@@ -193,27 +287,51 @@ function CopilotChat({
       const loadedImages = yield Promise.all(fileReadPromises);
       setSelectedImages((prev) => [...prev, ...loadedImages]);
     } catch (error) {
+      triggerChatError(error, "processUploadedImages", error);
       console.error("Error reading files:", error);
     }
   });
   const removeSelectedImage = (index) => {
     setSelectedImages((prev) => prev.filter((_, i) => i !== index));
   };
+  const handleThumbsUp = (message) => {
+    if (onThumbsUp) {
+      onThumbsUp(message);
+    }
+    triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsUp");
+  };
+  const handleThumbsDown = (message) => {
+    if (onThumbsDown) {
+      onThumbsDown(message);
+    }
+    triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsDown");
+  };
   return /* @__PURE__ */ jsxs(WrappedCopilotChat, { icons, labels, className, children: [
+    chatError && renderError && renderError(__spreadProps(__spreadValues({}, chatError), {
+      onDismiss: () => setChatError(null),
+      onRetry: () => {
+        setChatError(null);
+      }
+    })),
     /* @__PURE__ */ jsx(
       Messages2,
       {
         AssistantMessage: AssistantMessage2,
         UserMessage: UserMessage2,
         RenderMessage: RenderMessage2,
-        messages: visibleMessages,
+        messages,
         inProgress: isLoading,
         onRegenerate: handleRegenerate,
         onCopy: handleCopy,
-        onThumbsUp,
-        onThumbsDown,
+        onThumbsUp: handleThumbsUp,
+        onThumbsDown: handleThumbsDown,
         markdownTagRenderers,
         ImageRenderer: ImageRenderer2,
+        RenderTextMessage,
+        RenderActionExecutionMessage,
+        RenderAgentStateMessage,
+        RenderResultMessage,
+        RenderImageMessage,
         children: currentSuggestions.length > 0 && /* @__PURE__ */ jsx(
           RenderSuggestionsList,
           {
@@ -269,8 +387,8 @@ function WrappedCopilotChat({
 var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onSubmitMessage, onStopGeneration, onReloadMessages) => {
   var _a;
   const {
-    visibleMessages,
-    appendMessage,
+    messages,
+    sendMessage,
     setMessages,
     reloadMessages: defaultReloadMessages,
     stopGeneration: defaultStopGeneration,
@@ -316,12 +434,12 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
     if (Object.keys(generalContext.chatSuggestionConfiguration).length === 0) {
       return;
     }
-    if (visibleMessages.length === 0 && !hasGeneratedInitialSuggestions.current) {
+    if (messages.length === 0 && !hasGeneratedInitialSuggestions.current) {
       hasGeneratedInitialSuggestions.current = true;
       generateSuggestionsWithErrorHandling("initial");
       return;
     }
-    if (visibleMessages.length > 0 && suggestions.length === 0) {
+    if (messages.length > 0 && suggestions.length === 0) {
       generateSuggestionsWithErrorHandling("post-message");
       return;
     }
@@ -329,7 +447,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
     chatSuggestions,
     isLoadingSuggestions,
     suggestionsFailed,
-    visibleMessages.length,
+    messages.length,
     isLoading,
     suggestions.length,
     Object.keys(generalContext.chatSuggestionConfiguration).join(","),
@@ -359,7 +477,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
   useEffect(() => {
     onInProgress == null ? void 0 : onInProgress(isLoading);
   }, [onInProgress, isLoading]);
-  const sendMessage = (messageContent, imagesToUse) => __async(void 0, null, function* () {
+  const safelySendMessage = (messageContent, imagesToUse) => __async(void 0, null, function* () {
     const images = imagesToUse || [];
     if (chatSuggestions === "auto" || chatSuggestions === "manual") {
       setSuggestions([]);
@@ -378,7 +496,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
           console.error("Error in onSubmitMessage:", error);
         }
       }
-      yield appendMessage(textMessage, {
+      yield sendMessage(textMessage, {
         followUp: images.length === 0,
         clearSuggestions: chatSuggestions === "auto" || chatSuggestions === "manual"
       });
@@ -396,7 +514,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
             bytes: images[i].bytes
           }
         };
-        yield appendMessage(imageMessage, { followUp: i === images.length - 1 });
+        yield sendMessage(imageMessage, { followUp: i === images.length - 1 });
         if (!firstMessage) {
           firstMessage = imageMessage;
         }
@@ -407,7 +525,6 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
     }
     return firstMessage;
   });
-  const messages = visibleMessages;
   const currentAgentName = (_a = generalContext.agentSession) == null ? void 0 : _a.agentName;
   const restartCurrentAgent = (hint) => __async(void 0, null, function* () {
     if (generalContext.agentSession) {
@@ -431,9 +548,9 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
       yield runAgent(
         generalContext.agentSession.agentName,
         stableContext,
-        appendMessage,
-        runChatCompletion,
-        hint
+        messagesContext.messages,
+        sendMessage,
+        runChatCompletion
       );
     }
   });
@@ -489,10 +606,9 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
   }
   return {
     messages,
-    visibleMessages,
     isLoading,
     suggestions,
-    sendMessage,
+    sendMessage: safelySendMessage,
     stopGeneration,
     reloadMessages,
     resetSuggestions,
@@ -506,4 +622,4 @@ export {
   WrappedCopilotChat,
   useCopilotChatLogic
 };
-//# sourceMappingURL=chunk-LXCD3K7B.mjs.map
+//# sourceMappingURL=chunk-GJ4SX4JE.mjs.map