@copilotkit/react-ui 1.10.0-next.1 → 1.10.0-next.11

package/dist/components/chat/Messages.js

@@ -1,10 +1,39 @@
 "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 });
@@ -34,11 +63,72 @@ __export(Messages_exports, {
   useScrollToBottom: () => useScrollToBottom
 });
 module.exports = __toCommonJS(Messages_exports);
-var import_react2 = require("react");
+var import_react6 = 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");
+var CopyIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "2",
+    stroke: "currentColor",
+    width: "16",
+    height: "16",
+    style: { minWidth: "16px", minHeight: "16px" },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
+      }
+    )
+  }
+);
+var DownloadIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "2",
+    stroke: "currentColor",
+    width: "16",
+    height: "16",
+    style: { minWidth: "16px", minHeight: "16px" },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+      }
+    )
+  }
+);
+var CheckIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "2",
+    stroke: "currentColor",
+    width: "16",
+    height: "16",
+    style: { minWidth: "16px", minHeight: "16px" },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 12.75l6 6 9-13.5" })
+  }
+);
+
+// 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);
@@ -52,37 +142,908 @@ function useChatContext() {
 
 // src/components/chat/Messages.tsx
 var import_react_core = require("@copilotkit/react-core");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// src/components/chat/messages/UserMessage.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var UserMessage = (props) => {
+  const { message, ImageRenderer: ImageRenderer2 } = props;
+  const isImageMessage = message && "image" in message && message.image;
+  if (isImageMessage) {
+    const imageMessage = message;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ImageRenderer2, { image: imageMessage.image, content: imageMessage.content }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "copilotKitMessage copilotKitUserMessage", children: message == null ? void 0 : message.content });
+};
+
+// 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_runtime4 = 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_runtime4.jsxs)("div", { className: "copilotKitCodeBlock", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "copilotKitCodeBlockToolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "copilotKitCodeBlockToolbarLanguage", children: language }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "copilotKitCodeBlockToolbarButtons", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: downloadAsFile, children: DownloadIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "copilotKitCodeBlockToolbarButton", onClick: onCopy, children: isCopied ? CheckIcon : CopyIcon })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.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_rehype_raw = __toESM(require("rehype-raw"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var defaultComponents = {
+  a(_a) {
+    var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { target: "_blank", rel: "noopener noreferrer", children }));
+  },
+  // @ts-expect-error -- inline
+  code(_c) {
+    var _d = _c, { children, className, inline } = _d, props = __objRest(_d, ["children", "className", "inline"]);
+    if (Array.isArray(children) && children.length) {
+      if (children[0] == "\u258D") {
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "span",
+          {
+            style: {
+              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+              marginTop: "0.25rem"
+            },
+            children: "\u258D"
+          }
+        );
+      }
+      children[0] = (children == null ? void 0 : children[0]).replace("`\u258D`", "\u258D");
+    }
+    const match = /language-(\w+)/.exec(className || "");
+    const hasLanguage = match && match[1];
+    const content = String(children);
+    const hasNewlines = content.includes("\n");
+    const isInline = !hasLanguage && !hasNewlines;
+    if (isInline) {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "code",
+        __spreadProps(__spreadValues({
+          className: `copilotKitMarkdownElement copilotKitInlineCode ${className || ""}`
+        }, props), {
+          children
+        })
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      CodeBlock,
+      __spreadValues({
+        language: match && match[1] || "",
+        value: String(children).replace(/\n$/, "")
+      }, props),
+      Math.random()
+    );
+  },
+  h1: (_e) => {
+    var _f = _e, { children } = _f, props = __objRest(_f, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h2: (_g) => {
+    var _h = _g, { children } = _h, props = __objRest(_h, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h3: (_i) => {
+    var _j = _i, { children } = _j, props = __objRest(_j, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h4: (_k) => {
+    var _l = _k, { children } = _l, props = __objRest(_l, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h4", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h5: (_m) => {
+    var _n = _m, { children } = _n, props = __objRest(_n, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h5", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h6: (_o) => {
+    var _p = _o, { children } = _p, props = __objRest(_p, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h6", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  p: (_q) => {
+    var _r = _q, { children } = _r, props = __objRest(_r, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  pre: (_s) => {
+    var _t = _s, { children } = _t, props = __objRest(_t, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  blockquote: (_u) => {
+    var _v = _u, { children } = _v, props = __objRest(_v, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("blockquote", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  ul: (_w) => {
+    var _x = _w, { children } = _x, props = __objRest(_x, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  li: (_y) => {
+    var _z = _y, { children } = _z, props = __objRest(_z, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  }
+};
+var MemoizedReactMarkdown = (0, import_react3.memo)(
+  import_react_markdown.default,
+  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.components === nextProps.components
+);
+var Markdown = ({ content, components }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    MemoizedReactMarkdown,
+    {
+      components: __spreadValues(__spreadValues({}, defaultComponents), components),
+      remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
+      rehypePlugins: [import_rehype_raw.default],
+      children: content
+    }
+  ) });
+};
+
+// src/components/chat/messages/AssistantMessage.tsx
+var import_react4 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AssistantMessage = (props) => {
+  var _a;
+  const { icons, labels } = useChatContext();
+  const {
+    message,
+    isLoading,
+    onRegenerate,
+    onCopy,
+    onThumbsUp,
+    onThumbsDown,
+    isCurrentMessage,
+    markdownTagRenderers
+  } = props;
+  const [copied, setCopied] = (0, import_react4.useState)(false);
+  const handleCopy = () => {
+    const content2 = (message == null ? void 0 : message.content) || "";
+    if (content2 && onCopy) {
+      navigator.clipboard.writeText(content2);
+      setCopied(true);
+      onCopy(content2);
+      setTimeout(() => setCopied(false), 2e3);
+    } else if (content2) {
+      navigator.clipboard.writeText(content2);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  const handleRegenerate = () => {
+    if (onRegenerate)
+      onRegenerate();
+  };
+  const handleThumbsUp = () => {
+    if (onThumbsUp && message)
+      onThumbsUp(message);
+  };
+  const handleThumbsDown = () => {
+    if (onThumbsDown && message)
+      onThumbsDown(message);
+  };
+  const LoadingIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: icons.activityIcon });
+  const content = (message == null ? void 0 : message.content) || "";
+  const subComponent = (_a = message == null ? void 0 : message.generativeUI) == null ? void 0 : _a.call(message);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    content && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
+      content && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Markdown, { content, components: markdownTagRenderers }),
+      content && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        "div",
+        {
+          className: `copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                className: "copilotKitMessageControlButton",
+                onClick: handleRegenerate,
+                "aria-label": labels.regenerateResponse,
+                title: labels.regenerateResponse,
+                children: icons.regenerateIcon
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                className: "copilotKitMessageControlButton",
+                onClick: handleCopy,
+                "aria-label": labels.copyToClipboard,
+                title: labels.copyToClipboard,
+                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: "10px", fontWeight: "bold" }, children: "\u2713" }) : icons.copyIcon
+              }
+            ),
+            onThumbsUp && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                className: "copilotKitMessageControlButton",
+                onClick: handleThumbsUp,
+                "aria-label": labels.thumbsUp,
+                title: labels.thumbsUp,
+                children: icons.thumbsUpIcon
+              }
+            ),
+            onThumbsDown && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                className: "copilotKitMessageControlButton",
+                onClick: handleThumbsDown,
+                "aria-label": labels.thumbsDown,
+                title: labels.thumbsDown,
+                children: icons.thumbsDownIcon
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { marginBottom: "0.5rem" }, children: subComponent }),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LoadingIcon, {})
+  ] });
+};
+
+// src/components/chat/messages/ImageRenderer.tsx
+var import_react5 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ImageRenderer = ({ image, content, className = "" }) => {
+  const [imageError, setImageError] = (0, import_react5.useState)(false);
+  const imageSrc = `data:image/${image.format};base64,${image.bytes}`;
+  const altText = content || "User uploaded image";
+  const handleImageError = () => {
+    setImageError(true);
+  };
+  if (imageError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `copilotKitImageRendering copilotKitImageRenderingError ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "copilotKitImageRenderingErrorMessage", children: "Failed to load image" }),
+      content && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "copilotKitImageRenderingContent", children: content })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `copilotKitImageRendering ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "img",
+      {
+        src: imageSrc,
+        alt: altText,
+        className: "copilotKitImageRenderingImage",
+        onError: handleImageError
+      }
+    ),
+    content && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "copilotKitImageRenderingContent", children: content })
+  ] });
+};
+
+// src/components/chat/messages/RenderMessage.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function RenderMessage(_a) {
+  var _b = _a, {
+    UserMessage: UserMessage2 = UserMessage,
+    AssistantMessage: AssistantMessage2 = AssistantMessage,
+    ImageRenderer: ImageRenderer2 = ImageRenderer
+  } = _b, props = __objRest(_b, [
+    "UserMessage",
+    "AssistantMessage",
+    "ImageRenderer"
+  ]);
+  var _a2;
+  const {
+    message,
+    inProgress,
+    index,
+    isCurrentMessage,
+    onRegenerate,
+    onCopy,
+    onThumbsUp,
+    onThumbsDown,
+    markdownTagRenderers
+  } = props;
+  switch (message.role) {
+    case "user":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        UserMessage2,
+        {
+          rawData: message,
+          "data-message-role": "user",
+          message,
+          ImageRenderer: ImageRenderer2
+        },
+        index
+      );
+    case "assistant":
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        AssistantMessage2,
+        {
+          "data-message-role": "assistant",
+          subComponent: (_a2 = message.generativeUI) == null ? void 0 : _a2.call(message),
+          rawData: message,
+          message,
+          isLoading: inProgress && isCurrentMessage && !message.content,
+          isGenerating: inProgress && isCurrentMessage && !!message.content,
+          isCurrentMessage,
+          onRegenerate: () => onRegenerate == null ? void 0 : onRegenerate(message.id),
+          onCopy,
+          onThumbsUp,
+          onThumbsDown,
+          markdownTagRenderers,
+          ImageRenderer: ImageRenderer2
+        },
+        index
+      );
+  }
+}
+
+// src/components/chat/messages/LegacyRenderMessage.tsx
+var import_runtime_client_gql = require("@copilotkit/runtime-client-gql");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var LegacyRenderMessage = ({
+  message,
+  inProgress,
+  index,
+  isCurrentMessage,
+  actionResult,
+  AssistantMessage: AssistantMessage2,
+  UserMessage: UserMessage2,
+  ImageRenderer: ImageRenderer2,
+  onRegenerate,
+  onCopy,
+  onThumbsUp,
+  onThumbsDown,
+  markdownTagRenderers,
+  legacyProps
+}) => {
+  var _a;
+  const {
+    RenderTextMessage,
+    RenderActionExecutionMessage,
+    RenderAgentStateMessage,
+    RenderResultMessage,
+    RenderImageMessage
+  } = legacyProps;
+  const deprecatedMessage = (_a = (0, import_runtime_client_gql.aguiToGQL)(message)[0]) != null ? _a : void 0;
+  if (deprecatedMessage.isTextMessage() && RenderTextMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      RenderTextMessage,
+      {
+        message,
+        inProgress,
+        index,
+        isCurrentMessage,
+        AssistantMessage: AssistantMessage2,
+        UserMessage: UserMessage2,
+        onRegenerate,
+        onCopy,
+        onThumbsUp,
+        onThumbsDown,
+        markdownTagRenderers
+      }
+    );
+  }
+  if (deprecatedMessage.isActionExecutionMessage() && RenderActionExecutionMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      RenderActionExecutionMessage,
+      {
+        message,
+        inProgress,
+        index,
+        isCurrentMessage,
+        actionResult,
+        AssistantMessage: AssistantMessage2,
+        UserMessage: UserMessage2
+      }
+    );
+  }
+  if (deprecatedMessage.isAgentStateMessage() && RenderAgentStateMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      RenderAgentStateMessage,
+      {
+        message,
+        inProgress,
+        index,
+        isCurrentMessage,
+        AssistantMessage: AssistantMessage2,
+        UserMessage: UserMessage2
+      }
+    );
+  }
+  if (deprecatedMessage.isResultMessage() && RenderResultMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      RenderResultMessage,
+      {
+        message,
+        inProgress,
+        index,
+        isCurrentMessage,
+        AssistantMessage: AssistantMessage2,
+        UserMessage: UserMessage2
+      }
+    );
+  }
+  if (deprecatedMessage.isImageMessage() && RenderImageMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      RenderImageMessage,
+      {
+        message,
+        inProgress,
+        index,
+        isCurrentMessage,
+        AssistantMessage: AssistantMessage2,
+        UserMessage: UserMessage2
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    RenderMessage,
+    {
+      message,
+      inProgress,
+      index,
+      isCurrentMessage,
+      AssistantMessage: AssistantMessage2,
+      UserMessage: UserMessage2,
+      ImageRenderer: ImageRenderer2,
+      onRegenerate,
+      onCopy,
+      onThumbsUp,
+      onThumbsDown,
+      markdownTagRenderers
+    }
+  );
+};
+
+// src/components/chat/Messages.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Messages = ({
   inProgress,
   children,
-  RenderMessage,
-  AssistantMessage,
-  UserMessage,
+  RenderMessage: RenderMessage2,
+  AssistantMessage: AssistantMessage2,
+  UserMessage: UserMessage2,
+  ImageRenderer: ImageRenderer2,
   onRegenerate,
   onCopy,
   onThumbsUp,
   onThumbsDown,
-  markdownTagRenderers
+  markdownTagRenderers,
+  // Legacy props
+  RenderTextMessage,
+  RenderActionExecutionMessage,
+  RenderAgentStateMessage,
+  RenderResultMessage,
+  RenderImageMessage
 }) => {
   const { labels } = useChatContext();
-  const { visibleMessages, interrupt } = (0, import_react_core.useCopilotChat)();
-  const initialMessages = (0, import_react2.useMemo)(() => makeInitialMessages(labels.initial), [labels.initial]);
+  const { messages: visibleMessages, interrupt } = (0, import_react_core.useCopilotChatInternal)();
+  const initialMessages = (0, import_react6.useMemo)(() => makeInitialMessages(labels.initial), [labels.initial]);
   const messages = [...initialMessages, ...visibleMessages];
   const { messagesContainerRef, messagesEndRef } = useScrollToBottom(messages);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "copilotKitMessages", ref: messagesContainerRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "copilotKitMessagesContainer", children: [
+  const hasLegacyProps = !!(RenderTextMessage || RenderActionExecutionMessage || RenderAgentStateMessage || RenderResultMessage || RenderImageMessage);
+  (0, import_react6.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 = (0, import_react6.useMemo)(
+    () => ({
+      RenderTextMessage,
+      RenderActionExecutionMessage,
+      RenderAgentStateMessage,
+      RenderResultMessage,
+      RenderImageMessage
+    }),
+    [
+      RenderTextMessage,
+      RenderActionExecutionMessage,
+      RenderAgentStateMessage,
+      RenderResultMessage,
+      RenderImageMessage
+    ]
+  );
+  const MessageRenderer = hasLegacyProps ? (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LegacyRenderMessage, __spreadProps(__spreadValues({}, props), { legacyProps })) : RenderMessage2;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "copilotKitMessages", ref: messagesContainerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "copilotKitMessagesContainer", children: [
       messages.map((message, index) => {
         const isCurrentMessage = index === messages.length - 1;
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          RenderMessage,
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          MessageRenderer,
           {
             message,
             inProgress,
             index,
             isCurrentMessage,
-            AssistantMessage,
-            UserMessage,
+            AssistantMessage: AssistantMessage2,
+            UserMessage: UserMessage2,
+            ImageRenderer: ImageRenderer2,
             onRegenerate,
             onCopy,
             onThumbsUp,
@@ -94,7 +1055,7 @@ var Messages = ({
       }),
       interrupt
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("footer", { className: "copilotKitMessagesFooter", ref: messagesEndRef, children })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("footer", { className: "copilotKitMessagesFooter", ref: messagesEndRef, children })
   ] });
 };
 function makeInitialMessages(initial) {
@@ -112,16 +1073,16 @@ function makeInitialMessages(initial) {
   return [
     {
       id: initial,
-      role: "system",
+      role: "assistant",
       content: initial
     }
   ];
 }
 function useScrollToBottom(messages) {
-  const messagesEndRef = (0, import_react2.useRef)(null);
-  const messagesContainerRef = (0, import_react2.useRef)(null);
-  const isProgrammaticScrollRef = (0, import_react2.useRef)(false);
-  const isUserScrollUpRef = (0, import_react2.useRef)(false);
+  const messagesEndRef = (0, import_react6.useRef)(null);
+  const messagesContainerRef = (0, import_react6.useRef)(null);
+  const isProgrammaticScrollRef = (0, import_react6.useRef)(false);
+  const isUserScrollUpRef = (0, import_react6.useRef)(false);
   const scrollToBottom = () => {
     if (messagesContainerRef.current && messagesEndRef.current) {
       isProgrammaticScrollRef.current = true;
@@ -138,7 +1099,7 @@ function useScrollToBottom(messages) {
       isUserScrollUpRef.current = scrollTop + clientHeight < scrollHeight;
     }
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const container = messagesContainerRef.current;
     if (container) {
       container.addEventListener("scroll", handleScroll);
@@ -149,7 +1110,7 @@ function useScrollToBottom(messages) {
       }
     };
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const container = messagesContainerRef.current;
     if (!container) {
       return;
@@ -168,7 +1129,7 @@ function useScrollToBottom(messages) {
       mutationObserver.disconnect();
     };
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     isUserScrollUpRef.current = false;
     scrollToBottom();
   }, [messages.filter((m) => m.role === "user").length]);