@copilotkit/react-ui 1.8.13-next.1 → 1.8.13-next.2

package/dist/index.mjs

@@ -2,54 +2,54 @@
 import "./chunk-EFZPSZWO.mjs";
 import "./chunk-MMVDU6DF.mjs";
 import "./chunk-PXEVB7IK.mjs";
-import "./chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "./chunk-K7SXHJRT.mjs";
+} from "./chunk-IQ7DDXDA.mjs";
 import {
   CopilotSidebar
-} from "./chunk-MDMNZ6JL.mjs";
-import "./chunk-ZDKVXAL3.mjs";
+} from "./chunk-756IINQI.mjs";
+import "./chunk-WB3YULQ4.mjs";
+import "./chunk-3R6CEFJE.mjs";
 import "./chunk-TIDV74OE.mjs";
+import "./chunk-UH2UFL5W.mjs";
+import "./chunk-V7W6IM2V.mjs";
+import {
+  CopilotDevConsole
+} from "./chunk-VGPQYMKJ.mjs";
+import "./chunk-Q5V6S67N.mjs";
+import {
+  shouldShowDevConsole
+} from "./chunk-6TCUJ3B7.mjs";
+import "./chunk-KXE2JCUH.mjs";
+import "./chunk-NRA3CFEE.mjs";
+import "./chunk-BH6PCAAL.mjs";
 import "./chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "./chunk-NWE7CLTB.mjs";
-import "./chunk-DSQGQJI4.mjs";
-import "./chunk-24TDU7MY.mjs";
+} from "./chunk-ZRW27A32.mjs";
+import "./chunk-MPZAMNCN.mjs";
+import "./chunk-ALWZ35SI.mjs";
 import {
   RenderImageMessage
-} from "./chunk-LUPGADWY.mjs";
-import "./chunk-XFCMZH2H.mjs";
-import "./chunk-RVLCPPEL.mjs";
+} from "./chunk-UKWBNVMQ.mjs";
+import "./chunk-6VUDBDUN.mjs";
+import "./chunk-5INP2EWU.mjs";
 import {
   AssistantMessage
-} from "./chunk-OZXUB3V7.mjs";
+} from "./chunk-XMNTLIK5.mjs";
 import {
   UserMessage
 } from "./chunk-HWMFMBJC.mjs";
 import "./chunk-XZNY26GH.mjs";
 import "./chunk-PLHTVHUW.mjs";
-import "./chunk-KQ44Z255.mjs";
+import "./chunk-EMIYIMQ6.mjs";
+import "./chunk-CGEAG65D.mjs";
 import "./chunk-YQFVRDNC.mjs";
 import {
   Markdown
-} from "./chunk-ABHUX6T6.mjs";
-import "./chunk-IIRQWGWV.mjs";
-import "./chunk-CGEAG65D.mjs";
+} from "./chunk-YTXEWDNC.mjs";
 import "./chunk-KENCH7RN.mjs";
-import "./chunk-UH2UFL5W.mjs";
-import "./chunk-V7W6IM2V.mjs";
-import {
-  CopilotDevConsole
-} from "./chunk-VGPQYMKJ.mjs";
-import "./chunk-Q5V6S67N.mjs";
-import {
-  shouldShowDevConsole
-} from "./chunk-6TCUJ3B7.mjs";
-import "./chunk-KXE2JCUH.mjs";
-import "./chunk-NRA3CFEE.mjs";
-import "./chunk-BH6PCAAL.mjs";
+import "./chunk-B3D7U7TJ.mjs";
 import {
   useChatContext
 } from "./chunk-IEMQ2SQW.mjs";

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.13-next.1",
+  "version": "1.8.13-next.2",
   "sideEffects": [
     "**/*.css"
   ],
@@ -46,13 +46,14 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.1.3",
-    "react-markdown": "^8.0.7",
-    "react-syntax-highlighter": "^15.5.0",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1",
-    "@copilotkit/react-core": "1.8.13-next.1",
-    "@copilotkit/runtime-client-gql": "1.8.13-next.1",
-    "@copilotkit/shared": "1.8.13-next.1"
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "@copilotkit/react-core": "1.8.13-next.2",
+    "@copilotkit/runtime-client-gql": "1.8.13-next.2",
+    "@copilotkit/shared": "1.8.13-next.2"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Chat.tsx

@@ -74,6 +74,7 @@ import { Message, Role, TextMessage, ImageMessage } from "@copilotkit/runtime-cl
 import { randomId } from "@copilotkit/shared";
 import {
   AssistantMessageProps,
+  ComponentsMap,
   InputProps,
   MessagesProps,
   RenderMessageProps,
@@ -82,6 +83,7 @@ import {
 
 import { HintFunction, runAgent, stopAgent } from "@copilotkit/react-core";
 import { ImageUploadQueue } from "./ImageUploadQueue";
+import { Components } from "react-markdown";
 
 /**
  * Props for CopilotChat component.
@@ -137,6 +139,12 @@ export interface CopilotChatProps {
    */
   onThumbsDown?: (message: string) => void;
 
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
+
   /**
    * Icons can be used to set custom icons for the chat window.
    */
@@ -291,6 +299,7 @@ export function CopilotChat({
   onCopy,
   onThumbsUp,
   onThumbsDown,
+  markdownTagRenderers,
   Messages = DefaultMessages,
   RenderTextMessage = DefaultRenderTextMessage,
   RenderActionExecutionMessage = DefaultRenderActionExecutionMessage,
@@ -482,6 +491,7 @@ export function CopilotChat({
         onCopy={handleCopy}
         onThumbsUp={onThumbsUp}
         onThumbsDown={onThumbsDown}
+        markdownTagRenderers={markdownTagRenderers}
       >
         {currentSuggestions.length > 0 && (
           <div className="suggestions">

package/src/components/chat/Markdown.tsx

@@ -3,42 +3,19 @@ import ReactMarkdown, { Options, Components } from "react-markdown";
 import { CodeBlock } from "./CodeBlock";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
+import rehypeRaw from "rehype-raw";
 
-const MemoizedReactMarkdown: FC<Options> = memo(
-  ReactMarkdown,
-  (prevProps, nextProps) =>
-    prevProps.children === nextProps.children && prevProps.className === nextProps.className,
-);
-
-type MarkdownProps = {
-  content: string;
-};
-
-export const Markdown = ({ content }: MarkdownProps) => {
-  return (
-    <div className="copilotKitMarkdown">
-      <MemoizedReactMarkdown components={components} remarkPlugins={[remarkGfm, remarkMath]}>
-        {content}
-      </MemoizedReactMarkdown>
-    </div>
-  );
-};
-
-const components: Components = {
+const defaultComponents: Components = {
   a({ children, ...props }) {
     return (
-      <a
-        style={{ color: "blue", textDecoration: "underline" }}
-        {...props}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <a className="copilotKitMarkdownElement" {...props} target="_blank" rel="noopener noreferrer">
         {children}
       </a>
     );
   },
+  // @ts-expect-error -- inline
   code({ children, className, inline, ...props }) {
-    if (children.length) {
+    if (Array.isArray(children) && children.length) {
       if (children[0] == "▍") {
         return (
           <span
@@ -52,7 +29,7 @@ const components: Components = {
         );
       }
 
-      children[0] = (children[0] as string).replace("`▍`", "▍");
+      children[0] = (children?.[0] as string).replace("`▍`", "▍");
     }
 
     const match = /language-(\w+)/.exec(className || "");
@@ -74,4 +51,84 @@ const components: Components = {
       />
     );
   },
+  h1: ({ children, ...props }) => (
+    <h1 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h1>
+  ),
+  h2: ({ children, ...props }) => (
+    <h2 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h2>
+  ),
+  h3: ({ children, ...props }) => (
+    <h3 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h3>
+  ),
+  h4: ({ children, ...props }) => (
+    <h4 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h4>
+  ),
+  h5: ({ children, ...props }) => (
+    <h5 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h5>
+  ),
+  h6: ({ children, ...props }) => (
+    <h6 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h6>
+  ),
+  p: ({ children, ...props }) => (
+    <p className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </p>
+  ),
+  pre: ({ children, ...props }) => (
+    <pre className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </pre>
+  ),
+  blockquote: ({ children, ...props }) => (
+    <blockquote className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </blockquote>
+  ),
+  ul: ({ children, ...props }) => (
+    <ul className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </ul>
+  ),
+  li: ({ children, ...props }) => (
+    <li className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </li>
+  ),
+};
+
+const MemoizedReactMarkdown: FC<Options> = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children && prevProps.components === nextProps.components,
+);
+
+type MarkdownProps = {
+  content: string;
+  components?: Components;
+};
+
+export const Markdown = ({ content, components }: MarkdownProps) => {
+  return (
+    <div className="copilotKitMarkdown">
+      <MemoizedReactMarkdown
+        components={{ ...defaultComponents, ...components }}
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[rehypeRaw]}
+      >
+        {content}
+      </MemoizedReactMarkdown>
+    </div>
+  );
 };

package/src/components/chat/Messages.tsx

@@ -19,6 +19,7 @@ export const Messages = ({
   onCopy,
   onThumbsUp,
   onThumbsDown,
+  markdownTagRenderers,
 }: MessagesProps) => {
   const context = useChatContext();
   const initialMessages = useMemo(
@@ -67,6 +68,7 @@ export const Messages = ({
                 onCopy={onCopy}
                 onThumbsUp={onThumbsUp}
                 onThumbsDown={onThumbsDown}
+                markdownTagRenderers={markdownTagRenderers}
               />
             );
           } else if (message.isActionExecutionMessage()) {

package/src/components/chat/Modal.tsx

@@ -82,6 +82,7 @@ export const CopilotModal = ({
   onThumbsDown,
   onCopy,
   onRegenerate,
+  markdownTagRenderers,
   className,
   children,
 }: CopilotModalProps) => {
@@ -118,6 +119,7 @@ export const CopilotModal = ({
             onThumbsDown={onThumbsDown}
             onCopy={onCopy}
             onRegenerate={onRegenerate}
+            markdownTagRenderers={markdownTagRenderers}
           />
         </Window>
       </div>

package/src/components/chat/messages/AssistantMessage.tsx

@@ -14,6 +14,7 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
     onThumbsUp,
     onThumbsDown,
     isCurrentMessage,
+    markdownTagRenderers,
   } = props;
   const [copied, setCopied] = useState(false);
 
@@ -54,7 +55,7 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
     <>
       {(message || isLoading) && (
         <div className="copilotKitMessage copilotKitAssistantMessage">
-          {message && <Markdown content={message || ""} />}
+          {message && <Markdown content={message || ""} components={markdownTagRenderers} />}
           {isLoading && <LoadingIcon />}
 
           {message && !isLoading && (

package/src/components/chat/messages/RenderTextMessage.tsx

@@ -16,6 +16,7 @@ export function RenderTextMessage({
     onCopy,
     onThumbsUp,
     onThumbsDown,
+    markdownTagRenderers,
   } = props;
 
   if (message.isTextMessage()) {
@@ -42,6 +43,7 @@ export function RenderTextMessage({
           onCopy={onCopy}
           onThumbsUp={onThumbsUp}
           onThumbsDown={onThumbsDown}
+          markdownTagRenderers={markdownTagRenderers}
         />
       );
     }

package/src/components/chat/props.ts

@@ -1,4 +1,5 @@
 import { Message } from "@copilotkit/runtime-client-gql";
+import { ReactNode } from "react";
 
 export interface ButtonProps {}
 
@@ -19,6 +20,10 @@ export interface SuggestionsProps {
   onClick: (message: string) => void;
 }
 
+export type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {
+  [K in keyof T]: React.FC<{ children?: ReactNode } & T[K]>;
+};
+
 export interface MessagesProps {
   messages: Message[];
   inProgress: boolean;
@@ -50,6 +55,12 @@ export interface MessagesProps {
    * Callback function for thumbs down feedback
    */
   onThumbsDown?: (message: string) => void;
+
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
 }
 
 export interface Renderer {
@@ -115,6 +126,12 @@ export interface AssistantMessageProps {
    * Callback function for thumbs down feedback
    */
   onThumbsDown?: (message: string) => void;
+
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
 }
 
 export interface RenderMessageProps {
@@ -145,6 +162,12 @@ export interface RenderMessageProps {
    * Callback function for thumbs down feedback
    */
   onThumbsDown?: (message: string) => void;
+
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
 }
 
 export interface InputProps {

package/src/css/markdown.css

@@ -1,63 +1,68 @@
-.copilotKitMarkdown h1,
-.copilotKitMarkdown h2,
-.copilotKitMarkdown h3,
-.copilotKitMarkdown h4,
-.copilotKitMarkdown h5,
-.copilotKitMarkdown h6 {
+h1.copilotKitMarkdownElement,
+h2.copilotKitMarkdownElement,
+h3.copilotKitMarkdownElement,
+h4.copilotKitMarkdownElement,
+h5.copilotKitMarkdownElement,
+h6.copilotKitMarkdownElement {
   font-weight: bold;
   line-height: 1.2;
 }
 
-.copilotKitMarkdown h1:not(:last-child),
-.copilotKitMarkdown h2:not(:last-child),
-.copilotKitMarkdown h3:not(:last-child),
-.copilotKitMarkdown h4:not(:last-child),
-.copilotKitMarkdown h5:not(:last-child),
-.copilotKitMarkdown h6:not(:last-child) {
+h1.copilotKitMarkdownElement:not(:last-child),
+h2.copilotKitMarkdownElement:not(:last-child),
+h3.copilotKitMarkdownElement:not(:last-child),
+h4.copilotKitMarkdownElement:not(:last-child),
+h5.copilotKitMarkdownElement:not(:last-child),
+h6.copilotKitMarkdownElement:not(:last-child) {
   margin-bottom: 1rem;
 }
 
-.copilotKitMarkdown h1 {
+h1.copilotKitMarkdownElement {
   font-size: 1.5em;
 }
 
-.copilotKitMarkdown h2 {
+h2.copilotKitMarkdownElement {
   font-size: 1.25em;
   font-weight: 600;
 }
 
-.copilotKitMarkdown h3 {
+h3.copilotKitMarkdownElement {
   font-size: 1.1em;
 }
 
-.copilotKitMarkdown h4 {
+h4.copilotKitMarkdownElement {
   font-size: 1em;
 }
 
-.copilotKitMarkdown h5 {
+h5.copilotKitMarkdownElement {
   font-size: 0.9em;
 }
 
-.copilotKitMarkdown h6 {
+h6.copilotKitMarkdownElement {
   font-size: 0.8em;
 }
 
-.copilotKitMarkdown p {
+a.copilotKitMarkdownElement {
+  color: blue;
+  text-decoration: underline;
+}
+
+p.copilotKitMarkdownElement {
   padding: 0px;
   margin: 0px;
   line-height: 1.75;
   font-size: 1rem;
 }
 
-.copilotKitMarkdown p:not(:last-child),
-.copilotKitMarkdown pre:not(:last-child),
-.copilotKitMarkdown ol:not(:last-child),
-.copilotKitMarkdown ul:not(:last-child),
-.copilotKitMarkdown blockquote:not(:last-child) {
+p.copilotKitMarkdownElement:not(:last-child),
+pre.copilotKitMarkdownElement:not(:last-child),
+ol.copilotKitMarkdownElement:not(:last-child),
+ul.copilotKitMarkdownElement:not(:last-child),
+blockquote.copilotKitMarkdownElement:not(:last-child) {
   margin-bottom: 1.25em;
 }
 
-.copilotKitMarkdown blockquote {
+blockquote.copilotKitMarkdownElement {
   border-color: rgb(142, 142, 160);
   border-left-width: 2px;
   border-left-style: solid;
@@ -65,17 +70,17 @@
   padding-left: 10px;
 }
 
-.copilotKitMarkdown blockquote p {
+blockquote.copilotKitMarkdownElement p {
   padding: 0.7em 0;
 }
 
-.copilotKitMarkdown ul {
+ul.copilotKitMarkdownElement {
   list-style-type: disc;
   padding-left: 20px;
   overflow: visible;
 }
 
-.copilotKitMarkdown li {
+li.copilotKitMarkdownElement {
   list-style-type: inherit;
   list-style-position: outside;
   margin-left: 0;

package/dist/chunk-ABHUX6T6.mjs

@@ -1,72 +0,0 @@
-import {
-  CodeBlock
-} from "./chunk-KENCH7RN.mjs";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-MRXNTQOX.mjs";
-
-// src/components/chat/Markdown.tsx
-import { memo } from "react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import remarkMath from "remark-math";
-import { jsx } from "react/jsx-runtime";
-var MemoizedReactMarkdown = memo(
-  ReactMarkdown,
-  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
-);
-var Markdown = ({ content }) => {
-  return /* @__PURE__ */ jsx("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ jsx(MemoizedReactMarkdown, { components, remarkPlugins: [remarkGfm, remarkMath], children: content }) });
-};
-var components = {
-  a(_a) {
-    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ jsx(
-      "a",
-      __spreadProps(__spreadValues({
-        style: { color: "blue", textDecoration: "underline" }
-      }, props), {
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children
-      })
-    );
-  },
-  code(_c) {
-    var _d = _c, { children, className, inline } = _d, props = __objRest(_d, ["children", "className", "inline"]);
-    if (children.length) {
-      if (children[0] == "\u258D") {
-        return /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-              marginTop: "0.25rem"
-            },
-            children: "\u258D"
-          }
-        );
-      }
-      children[0] = children[0].replace("`\u258D`", "\u258D");
-    }
-    const match = /language-(\w+)/.exec(className || "");
-    if (inline) {
-      return /* @__PURE__ */ jsx("code", __spreadProps(__spreadValues({ className }, props), { children }));
-    }
-    return /* @__PURE__ */ jsx(
-      CodeBlock,
-      __spreadValues({
-        language: match && match[1] || "",
-        value: String(children).replace(/\n$/, "")
-      }, props),
-      Math.random()
-    );
-  }
-};
-
-export {
-  Markdown
-};
-//# sourceMappingURL=chunk-ABHUX6T6.mjs.map

package/dist/chunk-ABHUX6T6.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat/Markdown.tsx"],"sourcesContent":["import { FC, memo } from \"react\";\nimport ReactMarkdown, { Options, Components } from \"react-markdown\";\nimport { CodeBlock } from \"./CodeBlock\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\n\nconst MemoizedReactMarkdown: FC<Options> = memo(\n  ReactMarkdown,\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.className === nextProps.className,\n);\n\ntype MarkdownProps = {\n  content: string;\n};\n\nexport const Markdown = ({ content }: MarkdownProps) => {\n  return (\n    <div className=\"copilotKitMarkdown\">\n      <MemoizedReactMarkdown components={components} remarkPlugins={[remarkGfm, remarkMath]}>\n        {content}\n      </MemoizedReactMarkdown>\n    </div>\n  );\n};\n\nconst components: Components = {\n  a({ children, ...props }) {\n    return (\n      <a\n        style={{ color: \"blue\", textDecoration: \"underline\" }}\n        {...props}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        {children}\n      </a>\n    );\n  },\n  code({ children, className, inline, ...props }) {\n    if (children.length) {\n      if (children[0] == \"▍\") {\n        return (\n          <span\n            style={{\n              animation: \"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\",\n              marginTop: \"0.25rem\",\n            }}\n          >\n            ▍\n          </span>\n        );\n      }\n\n      children[0] = (children[0] as string).replace(\"`▍`\", \"▍\");\n    }\n\n    const match = /language-(\\w+)/.exec(className || \"\");\n\n    if (inline) {\n      return (\n        <code className={className} {...props}>\n          {children}\n        </code>\n      );\n    }\n\n    return (\n      <CodeBlock\n        key={Math.random()}\n        language={(match && match[1]) || \"\"}\n        value={String(children).replace(/\\n$/, \"\")}\n        {...props}\n      />\n    );\n  },\n};\n"],"mappings":";;;;;;;;;;AAAA,SAAa,YAAY;AACzB,OAAO,mBAA4C;AAEnD,OAAO,eAAe;AACtB,OAAO,gBAAgB;AAejB;AAbN,IAAM,wBAAqC;AAAA,EACzC;AAAA,EACA,CAAC,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,cAAc,UAAU;AACnF;AAMO,IAAM,WAAW,CAAC,EAAE,QAAQ,MAAqB;AACtD,SACE,oBAAC,SAAI,WAAU,sBACb,8BAAC,yBAAsB,YAAwB,eAAe,CAAC,WAAW,UAAU,GACjF,mBACH,GACF;AAEJ;AAEA,IAAM,aAAyB;AAAA,EAC7B,EAAE,IAAwB;AAAxB,iBAAE,WA3BN,IA2BI,IAAe,kBAAf,IAAe,CAAb;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,OAAO,QAAQ,gBAAgB,YAAY;AAAA,SAChD,QAFL;AAAA,QAGC,QAAO;AAAA,QACP,KAAI;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAAA,EACA,KAAK,IAA2C;AAA3C,iBAAE,YAAU,WAAW,OAvC9B,IAuCO,IAAkC,kBAAlC,IAAkC,CAAhC,YAAU,aAAW;AAC1B,QAAI,SAAS,QAAQ;AACnB,UAAI,SAAS,CAAC,KAAK,UAAK;AACtB,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,WAAW;AAAA,cACX,WAAW;AAAA,YACb;AAAA,YACD;AAAA;AAAA,QAED;AAAA,MAEJ;AAEA,eAAS,CAAC,IAAK,SAAS,CAAC,EAAa,QAAQ,YAAO,QAAG;AAAA,IAC1D;AAEA,UAAM,QAAQ,iBAAiB,KAAK,aAAa,EAAE;AAEnD,QAAI,QAAQ;AACV,aACE,oBAAC,uCAAK,aAA0B,QAA/B,EACE,WACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,UAAW,SAAS,MAAM,CAAC,KAAM;AAAA,QACjC,OAAO,OAAO,QAAQ,EAAE,QAAQ,OAAO,EAAE;AAAA,SACrC;AAAA,MAHC,KAAK,OAAO;AAAA,IAInB;AAAA,EAEJ;AACF;","names":[]}

package/dist/chunk-IIRQWGWV.mjs.map

@@ -1 +0,0 @@
-{"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, 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}: 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              />\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"],"mappings":"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","names":[]}