@copilotkit/react-ui 1.3.2 → 1.3.3-pre.0

package/dist/components/chat/Messages.js

@@ -1,39 +1,10 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -62,61 +33,11 @@ __export(Messages_exports, {
   Messages: () => Messages
 });
 module.exports = __toCommonJS(Messages_exports);
-var import_react4 = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 
 // src/components/chat/ChatContext.tsx
 var import_react = __toESM(require("react"));
-
-// src/components/chat/Icons.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function CheckIcon(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "svg",
-    __spreadProps(__spreadValues({
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 256 256",
-      fill: "currentColor",
-      style: { height: "1rem", width: "1rem" },
-      className
-    }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z" })
-    })
-  );
-}
-function DownloadIcon(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "svg",
-    __spreadProps(__spreadValues({
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 256 256",
-      fill: "currentColor",
-      style: { height: "1rem", width: "1rem" },
-      className
-    }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M224 152v56a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16v-56a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0Zm-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 132.69V40a8 8 0 0 0-16 0v92.69l-26.34-26.35a8 8 0 0 0-11.32 11.32Z" })
-    })
-  );
-}
-function CopyIcon(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "svg",
-    __spreadProps(__spreadValues({
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 256 256",
-      fill: "currentColor",
-      style: { height: "1rem", width: "1rem" },
-      className
-    }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z" })
-    })
-  );
-}
-
-// src/components/chat/ChatContext.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
 var ChatContext = import_react.default.createContext(void 0);
 function useChatContext() {
   const context = import_react.default.useContext(ChatContext);
@@ -128,487 +49,25 @@ function useChatContext() {
   return context;
 }
 
-// src/components/chat/Markdown.tsx
-var import_react3 = require("react");
-var import_react_markdown = __toESM(require("react-markdown"));
-
-// src/components/chat/CodeBlock.tsx
-var import_react2 = require("react");
-var import_react_syntax_highlighter = require("react-syntax-highlighter");
-
-// src/hooks/use-copy-to-clipboard.tsx
-var React2 = __toESM(require("react"));
-function useCopyToClipboard({ timeout = 2e3 }) {
-  const [isCopied, setIsCopied] = React2.useState(false);
-  const copyToClipboard = (value) => {
-    var _a;
-    if (typeof window === "undefined" || !((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
-      return;
-    }
-    if (!value) {
-      return;
-    }
-    navigator.clipboard.writeText(value).then(() => {
-      setIsCopied(true);
-      setTimeout(() => {
-        setIsCopied(false);
-      }, timeout);
-    });
-  };
-  return { isCopied, copyToClipboard };
-}
-
-// src/components/chat/CodeBlock.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var programmingLanguages = {
-  javascript: ".js",
-  python: ".py",
-  java: ".java",
-  c: ".c",
-  cpp: ".cpp",
-  "c++": ".cpp",
-  "c#": ".cs",
-  ruby: ".rb",
-  php: ".php",
-  swift: ".swift",
-  "objective-c": ".m",
-  kotlin: ".kt",
-  typescript: ".ts",
-  go: ".go",
-  perl: ".pl",
-  rust: ".rs",
-  scala: ".scala",
-  haskell: ".hs",
-  lua: ".lua",
-  shell: ".sh",
-  sql: ".sql",
-  html: ".html",
-  css: ".css"
-  // add more file extensions here, make sure the key is same as language prop in CodeBlock.tsx component
-};
-var generateRandomString = (length, lowercase = false) => {
-  const chars = "ABCDEFGHJKLMNPQRSTUVWXY3456789";
-  let result = "";
-  for (let i = 0; i < length; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length));
-  }
-  return lowercase ? result.toLowerCase() : result;
-};
-var CodeBlock = (0, import_react2.memo)(({ language, value }) => {
-  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
-  const downloadAsFile = () => {
-    if (typeof window === "undefined") {
-      return;
-    }
-    const fileExtension = programmingLanguages[language] || ".file";
-    const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
-    const fileName = window.prompt("Enter file name", suggestedFileName);
-    if (!fileName) {
-      return;
-    }
-    const blob = new Blob([value], { type: "text/plain" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.download = fileName;
-    link.href = url;
-    link.style.display = "none";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-  const onCopy = () => {
-    if (isCopied)
-      return;
-    copyToClipboard(value);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitCodeBlock", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DownloadIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sr-only", children: "Download" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: [
-          isCopied ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CopyIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sr-only", children: "Copy code" })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_syntax_highlighter.Prism,
-      {
-        language,
-        style: highlightStyle,
-        PreTag: "div",
-        customStyle: {
-          margin: 0,
-          borderBottomLeftRadius: "0.375rem",
-          borderBottomRightRadius: "0.375rem"
-        },
-        children: value
-      }
-    )
-  ] });
-});
-CodeBlock.displayName = "CodeBlock";
-var highlightStyle = {
-  'pre[class*="language-"]': {
-    color: "#d4d4d4",
-    fontSize: "13px",
-    textShadow: "none",
-    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
-    direction: "ltr",
-    textAlign: "left",
-    whiteSpace: "pre",
-    wordSpacing: "normal",
-    wordBreak: "normal",
-    lineHeight: "1.5",
-    MozTabSize: "4",
-    OTabSize: "4",
-    tabSize: "4",
-    WebkitHyphens: "none",
-    MozHyphens: "none",
-    msHyphens: "none",
-    hyphens: "none",
-    padding: "1em",
-    margin: ".5em 0",
-    overflow: "auto",
-    background: "#1e1e1e"
-  },
-  'code[class*="language-"]': {
-    color: "#d4d4d4",
-    fontSize: "13px",
-    textShadow: "none",
-    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
-    direction: "ltr",
-    textAlign: "left",
-    whiteSpace: "pre",
-    wordSpacing: "normal",
-    wordBreak: "normal",
-    lineHeight: "1.5",
-    MozTabSize: "4",
-    OTabSize: "4",
-    tabSize: "4",
-    WebkitHyphens: "none",
-    MozHyphens: "none",
-    msHyphens: "none",
-    hyphens: "none"
-  },
-  'pre[class*="language-"]::selection': {
-    textShadow: "none",
-    background: "#264F78"
-  },
-  'code[class*="language-"]::selection': {
-    textShadow: "none",
-    background: "#264F78"
-  },
-  'pre[class*="language-"] *::selection': {
-    textShadow: "none",
-    background: "#264F78"
-  },
-  'code[class*="language-"] *::selection': {
-    textShadow: "none",
-    background: "#264F78"
-  },
-  ':not(pre) > code[class*="language-"]': {
-    padding: ".1em .3em",
-    borderRadius: ".3em",
-    color: "#db4c69",
-    background: "#1e1e1e"
-  },
-  ".namespace": {
-    Opacity: ".7"
-  },
-  "doctype.doctype-tag": {
-    color: "#569CD6"
-  },
-  "doctype.name": {
-    color: "#9cdcfe"
-  },
-  comment: {
-    color: "#6a9955"
-  },
-  prolog: {
-    color: "#6a9955"
-  },
-  punctuation: {
-    color: "#d4d4d4"
-  },
-  ".language-html .language-css .token.punctuation": {
-    color: "#d4d4d4"
-  },
-  ".language-html .language-javascript .token.punctuation": {
-    color: "#d4d4d4"
-  },
-  property: {
-    color: "#9cdcfe"
-  },
-  tag: {
-    color: "#569cd6"
-  },
-  boolean: {
-    color: "#569cd6"
-  },
-  number: {
-    color: "#b5cea8"
-  },
-  constant: {
-    color: "#9cdcfe"
-  },
-  symbol: {
-    color: "#b5cea8"
-  },
-  inserted: {
-    color: "#b5cea8"
-  },
-  unit: {
-    color: "#b5cea8"
-  },
-  selector: {
-    color: "#d7ba7d"
-  },
-  "attr-name": {
-    color: "#9cdcfe"
-  },
-  string: {
-    color: "#ce9178"
-  },
-  char: {
-    color: "#ce9178"
-  },
-  builtin: {
-    color: "#ce9178"
-  },
-  deleted: {
-    color: "#ce9178"
-  },
-  ".language-css .token.string.url": {
-    textDecoration: "underline"
-  },
-  operator: {
-    color: "#d4d4d4"
-  },
-  entity: {
-    color: "#569cd6"
-  },
-  "operator.arrow": {
-    color: "#569CD6"
-  },
-  atrule: {
-    color: "#ce9178"
-  },
-  "atrule.rule": {
-    color: "#c586c0"
-  },
-  "atrule.url": {
-    color: "#9cdcfe"
-  },
-  "atrule.url.function": {
-    color: "#dcdcaa"
-  },
-  "atrule.url.punctuation": {
-    color: "#d4d4d4"
-  },
-  keyword: {
-    color: "#569CD6"
-  },
-  "keyword.module": {
-    color: "#c586c0"
-  },
-  "keyword.control-flow": {
-    color: "#c586c0"
-  },
-  function: {
-    color: "#dcdcaa"
-  },
-  "function.maybe-class-name": {
-    color: "#dcdcaa"
-  },
-  regex: {
-    color: "#d16969"
-  },
-  important: {
-    color: "#569cd6"
-  },
-  italic: {
-    fontStyle: "italic"
-  },
-  "class-name": {
-    color: "#4ec9b0"
-  },
-  "maybe-class-name": {
-    color: "#4ec9b0"
-  },
-  console: {
-    color: "#9cdcfe"
-  },
-  parameter: {
-    color: "#9cdcfe"
-  },
-  interpolation: {
-    color: "#9cdcfe"
-  },
-  "punctuation.interpolation-punctuation": {
-    color: "#569cd6"
-  },
-  variable: {
-    color: "#9cdcfe"
-  },
-  "imports.maybe-class-name": {
-    color: "#9cdcfe"
-  },
-  "exports.maybe-class-name": {
-    color: "#9cdcfe"
-  },
-  escape: {
-    color: "#d7ba7d"
-  },
-  "tag.punctuation": {
-    color: "#808080"
-  },
-  cdata: {
-    color: "#808080"
-  },
-  "attr-value": {
-    color: "#ce9178"
-  },
-  "attr-value.punctuation": {
-    color: "#ce9178"
-  },
-  "attr-value.punctuation.attr-equals": {
-    color: "#d4d4d4"
-  },
-  namespace: {
-    color: "#4ec9b0"
-  },
-  'pre[class*="language-javascript"]': {
-    color: "#9cdcfe"
-  },
-  'code[class*="language-javascript"]': {
-    color: "#9cdcfe"
-  },
-  'pre[class*="language-jsx"]': {
-    color: "#9cdcfe"
-  },
-  'code[class*="language-jsx"]': {
-    color: "#9cdcfe"
-  },
-  'pre[class*="language-typescript"]': {
-    color: "#9cdcfe"
-  },
-  'code[class*="language-typescript"]': {
-    color: "#9cdcfe"
-  },
-  'pre[class*="language-tsx"]': {
-    color: "#9cdcfe"
-  },
-  'code[class*="language-tsx"]': {
-    color: "#9cdcfe"
-  },
-  'pre[class*="language-css"]': {
-    color: "#ce9178"
-  },
-  'code[class*="language-css"]': {
-    color: "#ce9178"
-  },
-  'pre[class*="language-html"]': {
-    color: "#d4d4d4"
-  },
-  'code[class*="language-html"]': {
-    color: "#d4d4d4"
-  },
-  ".language-regex .token.anchor": {
-    color: "#dcdcaa"
-  },
-  ".language-html .token.punctuation": {
-    color: "#808080"
-  },
-  'pre[class*="language-"] > code[class*="language-"]': {
-    position: "relative",
-    zIndex: "1"
-  },
-  ".line-highlight.line-highlight": {
-    background: "#f7ebc6",
-    boxShadow: "inset 5px 0 0 #f7d87c",
-    zIndex: "0"
-  }
-};
-
-// src/components/chat/Markdown.tsx
-var import_remark_gfm = __toESM(require("remark-gfm"));
-var import_remark_math = __toESM(require("remark-math"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var MemoizedReactMarkdown = (0, import_react3.memo)(
-  import_react_markdown.default,
-  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
-);
-var Markdown = ({ content }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MemoizedReactMarkdown, { components, remarkPlugins: [import_remark_gfm.default, import_remark_math.default], children: content }) });
-};
-var components = {
-  p({ children }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children });
-  },
-  a(_a) {
-    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("code", __spreadProps(__spreadValues({ className }, props), { children }));
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      CodeBlock,
-      __spreadValues({
-        language: match && match[1] || "",
-        value: String(children).replace(/\n$/, "")
-      }, props),
-      Math.random()
-    );
-  }
-};
-
 // src/components/chat/Messages.tsx
-var import_react_core = require("@copilotkit/react-core");
 var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Messages = ({ messages, inProgress, children }) => {
-  const { chatComponentsCache } = (0, import_react_core.useCopilotContext)();
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Messages = ({
+  messages,
+  inProgress,
+  children,
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage
+}) => {
   const context = useChatContext();
-  const initialMessages = (0, import_react4.useMemo)(
+  const initialMessages = (0, import_react2.useMemo)(
     () => makeInitialMessages(context.labels.initial),
     [context.labels.initial]
   );
   messages = [...initialMessages, ...messages];
-  const functionResults = {};
+  const actionResults = {};
   for (let i = 0; i < messages.length; i++) {
     if (messages[i] instanceof import_runtime_client_gql.ActionExecutionMessage) {
       const id = messages[i].id;
@@ -616,11 +75,11 @@ var Messages = ({ messages, inProgress, children }) => {
         (message) => message instanceof import_runtime_client_gql.ResultMessage && message.actionExecutionId === id
       );
       if (resultMessage) {
-        functionResults[id] = import_runtime_client_gql.ResultMessage.decodeResult(resultMessage.result || "");
+        actionResults[id] = import_runtime_client_gql.ResultMessage.decodeResult(resultMessage.result || "");
       }
     }
   }
-  const messagesEndRef = import_react4.default.useRef(null);
+  const messagesEndRef = import_react2.default.useRef(null);
   const scrollToBottom = () => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({
@@ -628,120 +87,60 @@ var Messages = ({ messages, inProgress, children }) => {
       });
     }
   };
-  (0, import_react4.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     scrollToBottom();
   }, [messages]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "copilotKitMessages", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "copilotKitMessages", children: [
     messages.map((message, index) => {
       const isCurrentMessage = index === messages.length - 1;
-      if (message instanceof import_runtime_client_gql.TextMessage && message.role === "user") {
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: message.content }, index);
-      } else if (message instanceof import_runtime_client_gql.TextMessage && message.role == "assistant") {
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: isCurrentMessage && inProgress && !message.content ? context.icons.spinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Markdown, { content: message.content }) }, index);
+      if (message instanceof import_runtime_client_gql.TextMessage) {
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          RenderTextMessage,
+          {
+            message,
+            inProgress,
+            index,
+            isCurrentMessage
+          },
+          index
+        );
       } else if (message instanceof import_runtime_client_gql.ActionExecutionMessage) {
-        if (chatComponentsCache.current !== null && chatComponentsCache.current.actions[message.name]) {
-          const render = chatComponentsCache.current.actions[message.name];
-          if (typeof render === "string") {
-            if (isCurrentMessage && inProgress) {
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-                context.icons.spinnerIcon,
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inProgressLabel", children: render })
-              ] }, index);
-            } else {
-              return null;
-            }
-          } else {
-            const args = message.arguments;
-            let status = "inProgress";
-            if (functionResults[message.id] !== void 0) {
-              status = "complete";
-            } else if (message.status.code !== import_runtime_client_gql.MessageStatusCode.Pending) {
-              status = "executing";
-            }
-            try {
-              const toRender = render({
-                status,
-                args,
-                result: functionResults[message.id]
-              });
-              if (!toRender && status === "complete") {
-                return null;
-              }
-              if (typeof toRender === "string") {
-                return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-                  isCurrentMessage && inProgress && context.icons.spinnerIcon,
-                  " ",
-                  toRender
-                ] }, index);
-              } else {
-                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "copilotKitCustomAssistantMessage", children: toRender }, index);
-              }
-            } catch (e) {
-              console.error(`Error executing render function for action ${message.name}: ${e}`);
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-                isCurrentMessage && inProgress && context.icons.spinnerIcon,
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("b", { children: [
-                  "\u274C Error executing render: ",
-                  message.name
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
-                e instanceof Error ? e.message : String(e)
-              ] }, index);
-            }
-          }
-        } else if (!inProgress || !isCurrentMessage) {
-          return null;
-        } else {
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
-        }
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          RenderActionExecutionMessage,
+          {
+            message,
+            inProgress,
+            index,
+            isCurrentMessage,
+            actionResult: actionResults[message.id]
+          },
+          index
+        );
       } else if (message instanceof import_runtime_client_gql.AgentStateMessage) {
-        let render;
-        if (chatComponentsCache.current !== null) {
-          render = chatComponentsCache.current.coagentActions[`${message.agentName}-${message.nodeName}`] || chatComponentsCache.current.coagentActions[`${message.agentName}-global`];
-        }
-        if (render) {
-          if (typeof render === "string") {
-            if (isCurrentMessage && inProgress) {
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-                context.icons.spinnerIcon,
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inProgressLabel", children: render })
-              ] }, index);
-            } else {
-              return null;
-            }
-          } else {
-            const state = message.state;
-            let status = message.active ? "inProgress" : "complete";
-            const toRender = render({
-              status,
-              state,
-              nodeName: message.nodeName
-            });
-            if (!toRender && status === "complete") {
-              return null;
-            }
-            if (typeof toRender === "string") {
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: [
-                isCurrentMessage && inProgress && context.icons.spinnerIcon,
-                " ",
-                toRender
-              ] }, index);
-            } else {
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "copilotKitCustomAssistantMessage", children: toRender }, index);
-            }
-          }
-        } else if (!inProgress || !isCurrentMessage) {
-          return null;
-        } else {
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
-        }
-      } else if (message instanceof import_runtime_client_gql.ResultMessage && inProgress && isCurrentMessage) {
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `copilotKitMessage copilotKitAssistantMessage`, children: context.icons.spinnerIcon }, index);
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          RenderAgentStateMessage,
+          {
+            message,
+            inProgress,
+            index,
+            isCurrentMessage
+          },
+          index
+        );
+      } else if (message instanceof import_runtime_client_gql.ResultMessage) {
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          RenderResultMessage,
+          {
+            message,
+            inProgress,
+            index,
+            isCurrentMessage
+          },
+          index
+        );
       }
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("footer", { ref: messagesEndRef, children })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("footer", { ref: messagesEndRef, children })
   ] });
 };
 function makeInitialMessages(initial) {