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

package/dist/components/chat/Markdown.mjs

@@ -1,7 +1,7 @@
 import {
   Markdown
-} from "../../chunk-YTXEWDNC.mjs";
-import "../../chunk-KENCH7RN.mjs";
+} from "../../chunk-E6MQUIZW.mjs";
+import "../../chunk-B5IFB5YJ.mjs";
 import "../../chunk-XWG3L6QC.mjs";
 import "../../chunk-54JAUBUJ.mjs";
 import "../../chunk-MRXNTQOX.mjs";

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MessagesProps } from './props.js';
-import '@copilotkit/runtime-client-gql';
+import { Message } from '@copilotkit/shared';
 import '../../types/suggestions.js';
 
-declare const Messages: ({ messages, inProgress, children, RenderTextMessage, RenderActionExecutionMessage, RenderAgentStateMessage, RenderResultMessage, RenderImageMessage, AssistantMessage, UserMessage, onRegenerate, onCopy, onThumbsUp, onThumbsDown, markdownTagRenderers, }: MessagesProps) => react_jsx_runtime.JSX.Element;
-declare function useScrollToBottom(messages: any[]): {
+declare const Messages: ({ inProgress, children, RenderMessage, AssistantMessage, UserMessage, onRegenerate, onCopy, onThumbsUp, onThumbsDown, markdownTagRenderers, }: MessagesProps) => react_jsx_runtime.JSX.Element;
+declare function useScrollToBottom(messages: Message[]): {
     messagesEndRef: React.RefObject<HTMLDivElement>;
     messagesContainerRef: React.MutableRefObject<HTMLDivElement | null>;
 };

package/dist/components/chat/Messages.js

@@ -51,18 +51,12 @@ function useChatContext() {
 }
 
 // src/components/chat/Messages.tsx
-var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
 var import_react_core = require("@copilotkit/react-core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Messages = ({
-  messages,
   inProgress,
   children,
-  RenderTextMessage,
-  RenderActionExecutionMessage,
-  RenderAgentStateMessage,
-  RenderResultMessage,
-  RenderImageMessage,
+  RenderMessage,
   AssistantMessage,
   UserMessage,
   onRegenerate,
@@ -71,106 +65,32 @@ var Messages = ({
   onThumbsDown,
   markdownTagRenderers
 }) => {
-  const context = useChatContext();
-  const initialMessages = (0, import_react2.useMemo)(
-    () => makeInitialMessages(context.labels.initial),
-    [context.labels.initial]
-  );
-  messages = [...initialMessages, ...messages];
-  const actionResults = {};
-  for (let i = 0; i < messages.length; i++) {
-    if (messages[i].isActionExecutionMessage()) {
-      const id = messages[i].id;
-      const resultMessage = messages.find(
-        (message) => message.isResultMessage() && message.actionExecutionId === id
-      );
-      if (resultMessage) {
-        actionResults[id] = import_runtime_client_gql.ResultMessage.decodeResult(resultMessage.result || "");
-      }
-    }
-  }
+  const { labels } = useChatContext();
+  const { visibleMessages, interrupt } = (0, import_react_core.useCopilotChat)();
+  const initialMessages = (0, import_react2.useMemo)(() => makeInitialMessages(labels.initial), [labels.initial]);
+  const messages = [...initialMessages, ...visibleMessages];
   const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
-  const interrupt = (0, import_react_core.useLangGraphInterruptRender)();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "copilotKitMessages", ref: messagesContainerRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "copilotKitMessagesContainer", children: [
       messages.map((message, index) => {
         const isCurrentMessage = index === messages.length - 1;
-        if (message.isTextMessage()) {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            RenderTextMessage,
-            {
-              message,
-              inProgress,
-              index,
-              isCurrentMessage,
-              AssistantMessage,
-              UserMessage,
-              onRegenerate,
-              onCopy,
-              onThumbsUp,
-              onThumbsDown,
-              markdownTagRenderers
-            },
-            index
-          );
-        } else if (message.isActionExecutionMessage()) {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            RenderActionExecutionMessage,
-            {
-              message,
-              inProgress,
-              index,
-              isCurrentMessage,
-              actionResult: actionResults[message.id],
-              AssistantMessage,
-              UserMessage
-            },
-            index
-          );
-        } else if (message.isAgentStateMessage()) {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            RenderAgentStateMessage,
-            {
-              message,
-              inProgress,
-              index,
-              isCurrentMessage,
-              AssistantMessage,
-              UserMessage
-            },
-            index
-          );
-        } else if (message.isResultMessage()) {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            RenderResultMessage,
-            {
-              message,
-              inProgress,
-              index,
-              isCurrentMessage,
-              AssistantMessage,
-              UserMessage
-            },
-            index
-          );
-        } else if (message.isImageMessage && message.isImageMessage()) {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            RenderImageMessage,
-            {
-              message,
-              inProgress,
-              index,
-              isCurrentMessage,
-              AssistantMessage,
-              UserMessage,
-              onRegenerate,
-              onCopy,
-              onThumbsUp,
-              onThumbsDown
-            },
-            index
-          );
-        }
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          RenderMessage,
+          {
+            message,
+            inProgress,
+            index,
+            isCurrentMessage,
+            AssistantMessage,
+            UserMessage,
+            onRegenerate,
+            onCopy,
+            onThumbsUp,
+            onThumbsDown,
+            markdownTagRenderers
+          },
+          index
+        );
       }),
       interrupt
     ] }),
@@ -178,20 +98,24 @@ var Messages = ({
   ] });
 };
 function makeInitialMessages(initial) {
-  let initialArray = [];
-  if (initial) {
-    if (Array.isArray(initial)) {
-      initialArray.push(...initial);
-    } else {
-      initialArray.push(initial);
-    }
+  if (!initial)
+    return [];
+  if (Array.isArray(initial)) {
+    return initial.map((message) => {
+      return {
+        id: message,
+        role: "assistant",
+        content: message
+      };
+    });
   }
-  return initialArray.map(
-    (message) => new import_runtime_client_gql.TextMessage({
-      role: import_runtime_client_gql.Role.Assistant,
-      content: message
-    })
-  );
+  return [
+    {
+      id: initial,
+      role: "system",
+      content: initial
+    }
+  ];
 }
 function useScrollToBottom(messages) {
   const messagesEndRef = (0, import_react2.useRef)(null);
@@ -247,7 +171,7 @@ function useScrollToBottom(messages) {
   (0, import_react2.useEffect)(() => {
     isUserScrollUpRef.current = false;
     scrollToBottom();
-  }, [messages.filter((m) => m.isTextMessage() && m.role === import_runtime_client_gql.Role.User).length]);
+  }, [messages.filter((m) => m.role === "user").length]);
   return { messagesEndRef, messagesContainerRef };
 }
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/chat/Messages.tsx","../../../src/components/chat/ChatContext.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { MessagesProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport { Message, ResultMessage, TextMessage, Role } from \"@copilotkit/runtime-client-gql\";\nimport { useLangGraphInterruptRender } from \"@copilotkit/react-core\";\n\nexport const Messages = ({\n  messages,\n  inProgress,\n  children,\n  RenderTextMessage,\n  RenderActionExecutionMessage,\n  RenderAgentStateMessage,\n  RenderResultMessage,\n  RenderImageMessage,\n  AssistantMessage,\n  UserMessage,\n  onRegenerate,\n  onCopy,\n  onThumbsUp,\n  onThumbsDown,\n  markdownTagRenderers,\n}: MessagesProps) => {\n  const context = useChatContext();\n  const initialMessages = useMemo(\n    () => makeInitialMessages(context.labels.initial),\n    [context.labels.initial],\n  );\n\n  messages = [...initialMessages, ...messages];\n\n  const actionResults: Record<string, string> = {};\n\n  for (let i = 0; i < messages.length; i++) {\n    if (messages[i].isActionExecutionMessage()) {\n      const id = messages[i].id;\n      const resultMessage: ResultMessage | undefined = messages.find(\n        (message) => message.isResultMessage() && message.actionExecutionId === id,\n      ) as ResultMessage | undefined;\n\n      if (resultMessage) {\n        actionResults[id] = ResultMessage.decodeResult(resultMessage.result || \"\");\n      }\n    }\n  }\n\n  const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);\n\n  const interrupt = useLangGraphInterruptRender();\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\n          if (message.isTextMessage()) {\n            return (\n              <RenderTextMessage\n                key={index}\n                message={message}\n                inProgress={inProgress}\n                index={index}\n                isCurrentMessage={isCurrentMessage}\n                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\n                onRegenerate={onRegenerate}\n                onCopy={onCopy}\n                onThumbsUp={onThumbsUp}\n                onThumbsDown={onThumbsDown}\n                markdownTagRenderers={markdownTagRenderers}\n              />\n            );\n          } else if (message.isActionExecutionMessage()) {\n            return (\n              <RenderActionExecutionMessage\n                key={index}\n                message={message}\n                inProgress={inProgress}\n                index={index}\n                isCurrentMessage={isCurrentMessage}\n                actionResult={actionResults[message.id]}\n                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\n              />\n            );\n          } else if (message.isAgentStateMessage()) {\n            return (\n              <RenderAgentStateMessage\n                key={index}\n                message={message}\n                inProgress={inProgress}\n                index={index}\n                isCurrentMessage={isCurrentMessage}\n                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\n              />\n            );\n          } else if (message.isResultMessage()) {\n            return (\n              <RenderResultMessage\n                key={index}\n                message={message}\n                inProgress={inProgress}\n                index={index}\n                isCurrentMessage={isCurrentMessage}\n                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\n              />\n            );\n          } else if (message.isImageMessage && message.isImageMessage()) {\n            return (\n              <RenderImageMessage\n                key={index}\n                message={message}\n                inProgress={inProgress}\n                index={index}\n                isCurrentMessage={isCurrentMessage}\n                AssistantMessage={AssistantMessage}\n                UserMessage={UserMessage}\n                onRegenerate={onRegenerate}\n                onCopy={onCopy}\n                onThumbsUp={onThumbsUp}\n                onThumbsDown={onThumbsDown}\n              />\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[]): Message[] {\n  let initialArray: string[] = [];\n  if (initial) {\n    if (Array.isArray(initial)) {\n      initialArray.push(...initial);\n    } else {\n      initialArray.push(initial);\n    }\n  }\n\n  return initialArray.map(\n    (message) =>\n      new TextMessage({\n        role: Role.Assistant,\n        content: message,\n      }),\n  );\n}\n\nexport function useScrollToBottom(messages: any[]) {\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.isTextMessage() && m.role === Role.User).length]);\n\n  return { messagesEndRef, messagesContainerRef };\n}\n","import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\nimport { ThumbsDownIcon, ThumbsUpIcon } from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n  /**\n   * The icon to use for the open chat button.\n   * @default <OpenIcon />\n   */\n  openIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button.\n   * @default <CloseIcon />\n   */\n  closeIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button in the header.\n   * @default <HeaderCloseIcon />\n   */\n  headerCloseIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the send button.\n   * @default <SendIcon />\n   */\n  sendIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the activity indicator.\n   * @default <ActivityIcon />\n   */\n  activityIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the spinner.\n   * @default <SpinnerIcon />\n   */\n  spinnerIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the stop button.\n   * @default <StopIcon />\n   */\n  stopIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the regenerate button.\n   * @default <RegenerateIcon />\n   */\n  regenerateIcon?: React.ReactNode;\n\n  /**\n   * The icons to use for push to talk.\n   * @default <PushToTalkIcon />\n   */\n\n  pushToTalkIcon?: React.ReactNode;\n\n  /**\n   * The icons to use for copy assistant response\n   * @default <CopyIcon />\n   */\n\n  copyIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for thumbs up/response approval.\n   * @default <ThumbsUpIcon />\n   */\n\n  thumbsUpIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for thumbs down/response rejection.\n   * @default <ThumbsDownIcon />\n   */\n\n  thumbsDownIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the upload button.\n   * @default <UploadIcon />\n   */\n  uploadIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n  /**\n   * The initial message(s) to display in the chat window.\n   */\n  initial?: string | string[];\n\n  /**\n   * The title to display in the header.\n   * @default \"CopilotKit\"\n   */\n  title?: string;\n\n  /**\n   * The placeholder to display in the input.\n   * @default \"Type a message...\"\n   */\n  placeholder?: string;\n\n  /**\n   * The message to display when an error occurs.\n   * @default \"❌ An error occurred. Please try again.\"\n   */\n  error?: string;\n\n  /**\n   * The label to display on the stop button.\n   * @default \"Stop generating\"\n   */\n  stopGenerating?: string;\n\n  /**\n   * The label to display on the regenerate button.\n   * @default \"Regenerate response\"\n   */\n  regenerateResponse?: string;\n\n  /**\n   * The label for the copy button.\n   * @default \"Copy to clipboard\"\n   */\n  copyToClipboard?: string;\n\n  /**\n   * The label for the thumbs up button.\n   * @default \"Thumbs up\"\n   */\n  thumbsUp?: string;\n\n  /**\n   * The label for the thumbs down button.\n   * @default \"Thumbs down\"\n   */\n  thumbsDown?: string;\n\n  /**\n   * The text to display when content is copied.\n   * @default \"Copied!\"\n   */\n  copied?: string;\n}\n\ninterface ChatContext {\n  labels: Required<CopilotChatLabels>;\n  icons: Required<CopilotChatIcons>;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n  const context = React.useContext(ChatContext);\n  if (context === undefined) {\n    throw new Error(\n      \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n    );\n  }\n  return context;\n}\n\ninterface ChatContextProps {\n  // temperature?: number;\n  // instructions?: string;\n  // maxFeedback?: number;\n  labels?: CopilotChatLabels;\n  icons?: CopilotChatIcons;\n  children?: React.ReactNode;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n  // temperature,\n  // instructions,\n  // maxFeedback,\n  labels,\n  icons,\n  children,\n  open,\n  setOpen,\n}: ChatContextProps) => {\n  const memoizedLabels = useMemo(\n    () => ({\n      ...{\n        initial: \"\",\n        title: \"CopilotKit\",\n        placeholder: \"Type a message...\",\n        error: \"❌ An error occurred. Please try again.\",\n        stopGenerating: \"Stop generating\",\n        regenerateResponse: \"Regenerate response\",\n        copyToClipboard: \"Copy to clipboard\",\n        thumbsUp: \"Thumbs up\",\n        thumbsDown: \"Thumbs down\",\n        copied: \"Copied!\",\n      },\n      ...labels,\n    }),\n    [labels],\n  );\n\n  const memoizedIcons = useMemo(\n    () => ({\n      ...{\n        openIcon: DefaultIcons.OpenIcon,\n        closeIcon: DefaultIcons.CloseIcon,\n        headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n        sendIcon: DefaultIcons.SendIcon,\n        activityIcon: DefaultIcons.ActivityIcon,\n        spinnerIcon: DefaultIcons.SpinnerIcon,\n        stopIcon: DefaultIcons.StopIcon,\n        regenerateIcon: DefaultIcons.RegenerateIcon,\n        pushToTalkIcon: DefaultIcons.MicrophoneIcon,\n        copyIcon: DefaultIcons.CopyIcon,\n        thumbsUpIcon: DefaultIcons.ThumbsUpIcon,\n        thumbsDownIcon: DefaultIcons.ThumbsDownIcon,\n        uploadIcon: DefaultIcons.UploadIcon,\n      },\n      ...icons,\n    }),\n    [icons],\n  );\n\n  const context = useMemo(\n    () => ({\n      labels: memoizedLabels,\n      icons: memoizedIcons,\n      open,\n      setOpen,\n    }),\n    [memoizedLabels, memoizedIcons, open, setOpen],\n  );\n\n  return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n"],"mappings":"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","names":["import_react","React","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/chat/Messages.tsx","../../../src/components/chat/ChatContext.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { MessagesProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\nimport { Message, Role } from \"@copilotkit/shared\";\nimport { useCopilotChat } from \"@copilotkit/react-core\";\n\nexport const Messages = ({\n  inProgress,\n  children,\n  RenderMessage,\n  AssistantMessage,\n  UserMessage,\n  onRegenerate,\n  onCopy,\n  onThumbsUp,\n  onThumbsDown,\n  markdownTagRenderers,\n}: MessagesProps) => {\n  const { labels } = useChatContext();\n  const { 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  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            <RenderMessage\n              key={index}\n              message={message}\n              inProgress={inProgress}\n              index={index}\n              isCurrentMessage={isCurrentMessage}\n              AssistantMessage={AssistantMessage}\n              UserMessage={UserMessage}\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: \"system\",\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","import React, { useMemo, useState } from \"react\";\nimport * as DefaultIcons from \"./Icons\";\nimport { ThumbsDownIcon, ThumbsUpIcon } from \"./Icons\";\n\n/**\n * Icons for CopilotChat component.\n */\nexport interface CopilotChatIcons {\n  /**\n   * The icon to use for the open chat button.\n   * @default <OpenIcon />\n   */\n  openIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button.\n   * @default <CloseIcon />\n   */\n  closeIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the close chat button in the header.\n   * @default <HeaderCloseIcon />\n   */\n  headerCloseIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the send button.\n   * @default <SendIcon />\n   */\n  sendIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the activity indicator.\n   * @default <ActivityIcon />\n   */\n  activityIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the spinner.\n   * @default <SpinnerIcon />\n   */\n  spinnerIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the stop button.\n   * @default <StopIcon />\n   */\n  stopIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the regenerate button.\n   * @default <RegenerateIcon />\n   */\n  regenerateIcon?: React.ReactNode;\n\n  /**\n   * The icons to use for push to talk.\n   * @default <PushToTalkIcon />\n   */\n\n  pushToTalkIcon?: React.ReactNode;\n\n  /**\n   * The icons to use for copy assistant response\n   * @default <CopyIcon />\n   */\n\n  copyIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for thumbs up/response approval.\n   * @default <ThumbsUpIcon />\n   */\n\n  thumbsUpIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for thumbs down/response rejection.\n   * @default <ThumbsDownIcon />\n   */\n\n  thumbsDownIcon?: React.ReactNode;\n\n  /**\n   * The icon to use for the upload button.\n   * @default <UploadIcon />\n   */\n  uploadIcon?: React.ReactNode;\n}\n\n/**\n * Labels for CopilotChat component.\n */\nexport interface CopilotChatLabels {\n  /**\n   * The initial message(s) to display in the chat window.\n   */\n  initial?: string | string[];\n\n  /**\n   * The title to display in the header.\n   * @default \"CopilotKit\"\n   */\n  title?: string;\n\n  /**\n   * The placeholder to display in the input.\n   * @default \"Type a message...\"\n   */\n  placeholder?: string;\n\n  /**\n   * The message to display when an error occurs.\n   * @default \"❌ An error occurred. Please try again.\"\n   */\n  error?: string;\n\n  /**\n   * The label to display on the stop button.\n   * @default \"Stop generating\"\n   */\n  stopGenerating?: string;\n\n  /**\n   * The label to display on the regenerate button.\n   * @default \"Regenerate response\"\n   */\n  regenerateResponse?: string;\n\n  /**\n   * The label for the copy button.\n   * @default \"Copy to clipboard\"\n   */\n  copyToClipboard?: string;\n\n  /**\n   * The label for the thumbs up button.\n   * @default \"Thumbs up\"\n   */\n  thumbsUp?: string;\n\n  /**\n   * The label for the thumbs down button.\n   * @default \"Thumbs down\"\n   */\n  thumbsDown?: string;\n\n  /**\n   * The text to display when content is copied.\n   * @default \"Copied!\"\n   */\n  copied?: string;\n}\n\ninterface ChatContext {\n  labels: Required<CopilotChatLabels>;\n  icons: Required<CopilotChatIcons>;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContext = React.createContext<ChatContext | undefined>(undefined);\n\nexport function useChatContext(): ChatContext {\n  const context = React.useContext(ChatContext);\n  if (context === undefined) {\n    throw new Error(\n      \"Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?\",\n    );\n  }\n  return context;\n}\n\ninterface ChatContextProps {\n  // temperature?: number;\n  // instructions?: string;\n  // maxFeedback?: number;\n  labels?: CopilotChatLabels;\n  icons?: CopilotChatIcons;\n  children?: React.ReactNode;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nexport const ChatContextProvider = ({\n  // temperature,\n  // instructions,\n  // maxFeedback,\n  labels,\n  icons,\n  children,\n  open,\n  setOpen,\n}: ChatContextProps) => {\n  const memoizedLabels = useMemo(\n    () => ({\n      ...{\n        initial: \"\",\n        title: \"CopilotKit\",\n        placeholder: \"Type a message...\",\n        error: \"❌ An error occurred. Please try again.\",\n        stopGenerating: \"Stop generating\",\n        regenerateResponse: \"Regenerate response\",\n        copyToClipboard: \"Copy to clipboard\",\n        thumbsUp: \"Thumbs up\",\n        thumbsDown: \"Thumbs down\",\n        copied: \"Copied!\",\n      },\n      ...labels,\n    }),\n    [labels],\n  );\n\n  const memoizedIcons = useMemo(\n    () => ({\n      ...{\n        openIcon: DefaultIcons.OpenIcon,\n        closeIcon: DefaultIcons.CloseIcon,\n        headerCloseIcon: DefaultIcons.HeaderCloseIcon,\n        sendIcon: DefaultIcons.SendIcon,\n        activityIcon: DefaultIcons.ActivityIcon,\n        spinnerIcon: DefaultIcons.SpinnerIcon,\n        stopIcon: DefaultIcons.StopIcon,\n        regenerateIcon: DefaultIcons.RegenerateIcon,\n        pushToTalkIcon: DefaultIcons.MicrophoneIcon,\n        copyIcon: DefaultIcons.CopyIcon,\n        thumbsUpIcon: DefaultIcons.ThumbsUpIcon,\n        thumbsDownIcon: DefaultIcons.ThumbsDownIcon,\n        uploadIcon: DefaultIcons.UploadIcon,\n      },\n      ...icons,\n    }),\n    [icons],\n  );\n\n  const context = useMemo(\n    () => ({\n      labels: memoizedLabels,\n      icons: memoizedIcons,\n      open,\n      setOpen,\n    }),\n    [memoizedLabels, memoizedIcons, open, setOpen],\n  );\n\n  return <ChatContext.Provider value={context}>{children}</ChatContext.Provider>;\n};\n"],"mappings":"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","names":["import_react","React","import_jsx_runtime"]}

package/dist/components/chat/Messages.mjs

@@ -1,7 +1,7 @@
 import {
   Messages,
   useScrollToBottom
-} from "../../chunk-B3D7U7TJ.mjs";
+} from "../../chunk-WHDNKXMP.mjs";
 import "../../chunk-IEMQ2SQW.mjs";
 import "../../chunk-XWG3L6QC.mjs";
 import "../../chunk-MRXNTQOX.mjs";

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

@@ -2,10 +2,15 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { WindowProps, ButtonProps, HeaderProps } from './props.js';
 import { CopilotChatProps } from './Chat.js';
-import '@copilotkit/runtime-client-gql';
+import '@copilotkit/shared';
 import '../../types/suggestions.js';
-import './ChatContext.js';
+import '@copilotkit/react-core/dist/types/coagent-state';
+import '@copilotkit/react-core/dist/hooks/use-tree';
+import '@copilotkit/react-core/dist/copilot-context-bd88d30d';
+import '@copilotkit/react-core/dist/types/coagent-action';
 import '@copilotkit/react-core';
+import '@copilotkit/runtime-client-gql';
+import './ChatContext.js';
 
 interface CopilotModalProps extends CopilotChatProps {
     /**