@copilotkit/react-ui 0.10.0-alpha.4 → 0.10.0-alpha.5

package/dist/components/chat-components/copilot-chat.js

@@ -0,0 +1,876 @@
+'use strict';
+
+var React6 = require('react');
+var SeparatorPrimitive = require('@radix-ui/react-separator');
+var clsx = require('clsx');
+var nanoid = require('nanoid');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var remarkGfm = require('remark-gfm');
+var remarkMath = require('remark-math');
+var reactSyntaxHighlighter = require('react-syntax-highlighter');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var ReactMarkdown = require('react-markdown');
+var TextareaAutosize = require('react-textarea-autosize');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var reactIntersectionObserver = require('react-intersection-observer');
+var reactCore = require('@copilotkit/react-core');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React6__namespace = /*#__PURE__*/_interopNamespaceDefault(React6);
+var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SeparatorPrimitive);
+var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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 __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+nanoid.customAlphabet(
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  7
+);
+var Separator = React6__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, orientation = "horizontal", decorative = true } = _b, props = __objRest(_b, ["className", "orientation", "decorative"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(SeparatorPrimitive__namespace.Root, __spreadValues({
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )
+    }, props));
+  }
+);
+Separator.displayName = SeparatorPrimitive__namespace.Root.displayName;
+function useCopyToClipboard({
+  timeout = 2e3
+}) {
+  const [isCopied, setIsCopied] = React6__namespace.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 };
+}
+function IconOpenAI(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", __spreadProps(__spreadValues({
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    role: "img",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: cn("h-4 w-4", className)
+  }, props), {
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("title", {
+        children: "OpenAI icon"
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", {
+        d: "M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"
+      })
+    ]
+  }));
+}
+function IconArrowRight(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 256 256",
+    fill: "currentColor",
+    className: cn("h-4 w-4", className)
+  }, props), {
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "m221.66 133.66-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z"
+    })
+  }));
+}
+function IconUser(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 256 256",
+    fill: "currentColor",
+    className: cn("h-4 w-4", className)
+  }, props), {
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8ZM72 96a56 56 0 1 1 56 56 56.06 56.06 0 0 1-56-56Z"
+    })
+  }));
+}
+function IconArrowElbow(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 256 256",
+    fill: "currentColor",
+    className: cn("h-4 w-4", className)
+  }, props), {
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M200 32v144a8 8 0 0 1-8 8H67.31l34.35 34.34a8 8 0 0 1-11.32 11.32l-48-48a8 8 0 0 1 0-11.32l48-48a8 8 0 0 1 11.32 11.32L67.31 168H184V32a8 8 0 0 1 16 0Z"
+    })
+  }));
+}
+function IconRefresh(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 256 256",
+    fill: "currentColor",
+    className: cn("h-4 w-4", className)
+  }, props), {
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M197.67 186.37a8 8 0 0 1 0 11.29C196.58 198.73 170.82 224 128 224c-37.39 0-64.53-22.4-80-39.85V208a8 8 0 0 1-16 0v-48a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16H55.44C67.76 183.35 93 208 128 208c36 0 58.14-21.46 58.36-21.68a8 8 0 0 1 11.31.05ZM216 40a8 8 0 0 0-8 8v23.85C192.53 54.4 165.39 32 128 32c-42.82 0-68.58 25.27-69.66 26.34a8 8 0 0 0 11.3 11.34C69.86 69.46 92 48 128 48c35 0 60.24 24.65 72.56 40H168a8 8 0 0 0 0 16h48a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8Z"
+    })
+  }));
+}
+function IconStop(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 256 256",
+    fill: "currentColor",
+    className: cn("h-4 w-4", className)
+  }, props), {
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm24-120h-48a8 8 0 0 0-8 8v48a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-48a8 8 0 0 0-8-8Zm-8 48h-32v-32h32Z"
+    })
+  }));
+}
+function IconCopy(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 256 256",
+    fill: "currentColor",
+    className: cn("h-4 w-4", className)
+  }, props), {
+    children: /* @__PURE__ */ jsxRuntime.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"
+    })
+  }));
+}
+function IconCheck(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 256 256",
+    fill: "currentColor",
+    className: cn("h-4 w-4", className)
+  }, props), {
+    children: /* @__PURE__ */ jsxRuntime.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 IconDownload(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", __spreadProps(__spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 256 256",
+    fill: "currentColor",
+    className: cn("h-4 w-4", className)
+  }, props), {
+    children: /* @__PURE__ */ jsxRuntime.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"
+    })
+  }));
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium shadow ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-md hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "shadow-none hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 shadow-none hover:underline"
+      },
+      size: {
+        default: "h-8 px-4 py-2",
+        sm: "h-8 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-8 w-8 p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React6__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild"]);
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, __spreadValues({
+      className: cn(buttonVariants({ variant, size, className })),
+      ref
+    }, props));
+  }
+);
+Button.displayName = "Button";
+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"
+};
+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 = React6.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__ */ jsxRuntime.jsxs("div", {
+    className: "codeblock relative w-full bg-zinc-950 font-sans",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: "flex w-full items-center justify-between bg-zinc-800 px-6 py-2 pr-4 text-zinc-100",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", {
+            className: "text-xs lowercase",
+            children: language
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            className: "flex items-center space-x-1",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Button, {
+                variant: "ghost",
+                className: "hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0",
+                onClick: downloadAsFile,
+                size: "icon",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(IconDownload, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    className: "sr-only",
+                    children: "Download"
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Button, {
+                variant: "ghost",
+                size: "icon",
+                className: "text-xs hover:bg-zinc-800 focus-visible:ring-1 focus-visible:ring-slate-700 focus-visible:ring-offset-0",
+                onClick: onCopy,
+                children: [
+                  isCopied ? /* @__PURE__ */ jsxRuntime.jsx(IconCheck, {}) : /* @__PURE__ */ jsxRuntime.jsx(IconCopy, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                    className: "sr-only",
+                    children: "Copy code"
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactSyntaxHighlighter.Prism, {
+        language,
+        PreTag: "div",
+        showLineNumbers: true,
+        customStyle: {
+          margin: 0,
+          width: "100%",
+          background: "transparent",
+          padding: "1.5rem 1rem"
+        },
+        codeTagProps: {
+          style: {
+            fontSize: "0.9rem",
+            fontFamily: "var(--font-mono)"
+          }
+        },
+        children: value
+      })
+    ]
+  });
+});
+CodeBlock.displayName = "CodeBlock";
+var MemoizedReactMarkdown = React6.memo(
+  ReactMarkdown,
+  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
+);
+function ChatMessageActions(_a) {
+  var _b = _a, {
+    message,
+    className
+  } = _b, props = __objRest(_b, [
+    "message",
+    "className"
+  ]);
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
+  const onCopy = () => {
+    if (isCopied)
+      return;
+    copyToClipboard(message.content);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({
+    className: cn(
+      "flex items-center justify-end transition-opacity group-hover:opacity-100 md:absolute md:-right-10 md:-top-2 md:opacity-0",
+      className
+    )
+  }, props), {
+    children: /* @__PURE__ */ jsxRuntime.jsxs(Button, {
+      variant: "ghost",
+      size: "icon",
+      onClick: onCopy,
+      children: [
+        isCopied ? /* @__PURE__ */ jsxRuntime.jsx(IconCheck, {}) : /* @__PURE__ */ jsxRuntime.jsx(IconCopy, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {
+          className: "sr-only",
+          children: "Copy message"
+        })
+      ]
+    })
+  }));
+}
+function ChatMessage(_a) {
+  var _b = _a, { message } = _b, props = __objRest(_b, ["message"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({
+    className: cn("group relative mb-4 flex items-start")
+  }, props), {
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: cn(
+          "flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow",
+          message.role === "user" ? "bg-background" : "bg-primary text-primary-foreground"
+        ),
+        children: message.role === "user" ? /* @__PURE__ */ jsxRuntime.jsx(IconUser, {}) : /* @__PURE__ */ jsxRuntime.jsx(IconOpenAI, {})
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: "ml-4 flex-1 space-y-2 overflow-hidden px-1",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(MemoizedReactMarkdown, {
+            className: "prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 text-sm",
+            remarkPlugins: [remarkGfm, remarkMath],
+            components: {
+              p({ children }) {
+                return /* @__PURE__ */ jsxRuntime.jsx("p", {
+                  className: "mb-2 last:mb-0",
+                  children
+                });
+              },
+              code(_a2) {
+                var _b2 = _a2, { children, className, inline } = _b2, props2 = __objRest(_b2, ["children", "className", "inline"]);
+                if (children.length) {
+                  if (children[0] == "\u258D") {
+                    return /* @__PURE__ */ jsxRuntime.jsx("span", {
+                      className: "mt-1 animate-pulse cursor-default",
+                      children: "\u258D"
+                    });
+                  }
+                  children[0] = children[0].replace("`\u258D`", "\u258D");
+                }
+                const match = /language-(\w+)/.exec(className || "");
+                if (inline) {
+                  return /* @__PURE__ */ jsxRuntime.jsx("code", __spreadProps(__spreadValues({
+                    className
+                  }, props2), {
+                    children
+                  }));
+                }
+                return /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, __spreadValues({
+                  language: match && match[1] || "",
+                  value: String(children).replace(/\n$/, "")
+                }, props2), Math.random());
+              }
+            },
+            children: message.content
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(ChatMessageActions, {
+            message
+          })
+        ]
+      })
+    ]
+  }));
+}
+function ChatList({ messages }) {
+  const displayedMessages = messages.filter(
+    (message) => message.role !== "system"
+  );
+  if (!displayedMessages.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: "relative mx-auto max-w-2xl px-0",
+    children: displayedMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ChatMessage, {
+          message
+        }),
+        index < displayedMessages.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Separator, {
+          className: "my-4 md:my-4"
+        })
+      ]
+    }, index))
+  });
+}
+function useEnterSubmit() {
+  const formRef = React6.useRef(null);
+  const handleKeyDown = (event) => {
+    var _a;
+    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+      (_a = formRef.current) == null ? void 0 : _a.requestSubmit();
+      event.preventDefault();
+    }
+  };
+  return { formRef, onKeyDown: handleKeyDown };
+}
+var Tooltip = TooltipPrimitive__namespace.Root;
+var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
+var TooltipContent = React6__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest(_b, ["className", "sideOffset"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Content, __spreadValues({
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs font-medium text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      className
+    )
+  }, props));
+});
+TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
+function PromptForm({
+  onSubmit,
+  input,
+  setInput,
+  isLoading
+}) {
+  const { formRef, onKeyDown } = useEnterSubmit();
+  const inputRef = React6__namespace.useRef(null);
+  React6__namespace.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("form", {
+    onSubmit: (e) => __async(this, null, function* () {
+      e.preventDefault();
+      if (!(input == null ? void 0 : input.trim())) {
+        return;
+      }
+      setInput("");
+      yield onSubmit(input);
+    }),
+    ref: formRef,
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: "relative flex max-h-60 w-full grow flex-col overflow-hidden bg-background px-8 sm:rounded-md border sm:px-12",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, {
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, {
+              asChild: true
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, {
+              children: "New Chat"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(TextareaAutosize, {
+          ref: inputRef,
+          tabIndex: 0,
+          onKeyDown,
+          rows: 1,
+          value: input,
+          onChange: (e) => setInput(e.target.value),
+          placeholder: "Send a message.",
+          spellCheck: false,
+          className: "min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: "absolute right-0 top-4 sm:right-4",
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, {
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, {
+                asChild: true,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(Button, {
+                  type: "submit",
+                  size: "icon",
+                  disabled: isLoading || input === "",
+                  className: " bg-slate-300",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(IconArrowElbow, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", {
+                      className: "sr-only",
+                      children: "Send message"
+                    })
+                  ]
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, {
+                children: "Send message"
+              })
+            ]
+          })
+        })
+      ]
+    })
+  });
+}
+function ChatPanel({
+  id,
+  isLoading,
+  stop,
+  append,
+  reload,
+  input,
+  setInput,
+  messages
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: "inset-x-0 bottom-0 bg-gradient-to-b from-muted/10 from-10% to-muted/30 to-50% mt-4 mb-8",
+    style: { width: "100%", overflow: "hidden", boxSizing: "border-box" },
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: "mx-auto sm:max-w-2xl sm:px-4",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: "flex h-10 items-center justify-center mb-4",
+          children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(Button, {
+            variant: "outline",
+            onClick: () => stop(),
+            className: "bg-background",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(IconStop, {
+                className: "mr-2"
+              }),
+              "Stop generating"
+            ]
+          }) : (messages == null ? void 0 : messages.length) > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Button, {
+            variant: "outline",
+            onClick: () => reload(),
+            className: "bg-background",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(IconRefresh, {
+                className: "mr-2"
+              }),
+              "Regenerate response"
+            ]
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: "space-y-4 border-2 bg-background px-4 py-2 shadow-lg sm:rounded-xl md:py-4",
+          children: /* @__PURE__ */ jsxRuntime.jsx(PromptForm, {
+            onSubmit: (value) => __async(this, null, function* () {
+              yield append({
+                id,
+                content: value,
+                role: "user"
+              });
+            }),
+            input,
+            setInput,
+            isLoading
+          })
+        })
+      ]
+    })
+  });
+}
+function ExternalLink({
+  href,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("a", {
+    href,
+    target: "_blank",
+    className: "inline-flex flex-1 justify-center gap-1 leading-4 hover:underline",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", {
+        children
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("svg", {
+        "aria-hidden": "true",
+        height: "7",
+        viewBox: "0 0 6 6",
+        width: "7",
+        className: "opacity-70",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+          d: "M1.25215 5.54731L0.622742 4.9179L3.78169 1.75597H1.3834L1.38936 0.890915H5.27615V4.78069H4.40513L4.41109 2.38538L1.25215 5.54731Z",
+          fill: "currentColor"
+        })
+      })
+    ]
+  });
+}
+var exampleMessages = [
+  {
+    heading: "Explain technical concepts",
+    message: `What is a "serverless function"?`
+  },
+  {
+    heading: "Summarize an article",
+    message: "Summarize the following article for a 2nd grader: \n"
+  },
+  {
+    heading: "Draft an email",
+    message: `Draft an email to my boss about the following: 
+`
+  }
+];
+var DefaultEmptyScreen = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: "mx-auto max-w-2xl px-4",
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: "rounded-lg border bg-background p-8",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", {
+          className: "mb-2 text-lg font-semibold",
+          children: "Welcome to CopilotKit! \u{1F44B}"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", {
+          className: "mb-2 leading-normal text-muted-foreground",
+          children: [
+            "This is a Copilot built with",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(ExternalLink, {
+              href: "https://recursively.ai",
+              children: "recursively.ai's"
+            }),
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(ExternalLink, {
+              href: "https://github.com/RecursivelyAI/CopilotKit",
+              children: "CopilotKit"
+            }),
+            " ",
+            "."
+          ]
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", {
+          className: "leading-normal text-muted-foreground",
+          children: "You can start a conversation here or try the following examples:"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: "mt-4 flex flex-col items-start space-y-2",
+          children: exampleMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsxs(Button, {
+            variant: "link",
+            className: "h-auto p-0 text-base",
+            onClick: () => props.setInput(message.message),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(IconArrowRight, {
+                className: "mr-2 text-muted-foreground"
+              }),
+              message.heading
+            ]
+          }, index))
+        })
+      ]
+    })
+  });
+};
+function useAtBottom(offset = 0) {
+  const [isAtBottom, setIsAtBottom] = React6__namespace.useState(false);
+  React6__namespace.useEffect(() => {
+    const handleScroll = () => {
+      setIsAtBottom(
+        window.innerHeight + window.scrollY >= document.body.offsetHeight - offset
+      );
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [offset]);
+  return isAtBottom;
+}
+function ChatScrollAnchor({ trackVisibility }) {
+  const isAtBottom = useAtBottom();
+  const { ref, entry, inView } = reactIntersectionObserver.useInView({
+    trackVisibility,
+    delay: 100,
+    rootMargin: "0px 0px -150px 0px"
+  });
+  React6__namespace.useEffect(() => {
+    if (isAtBottom && trackVisibility && !inView) {
+      entry == null ? void 0 : entry.target.scrollIntoView({
+        block: "start"
+      });
+    }
+  }, [inView, entry, isAtBottom, trackVisibility]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref,
+    className: "h-px w-full"
+  });
+}
+function CopilotChat({
+  id,
+  initialMessages,
+  makeSystemMessage,
+  EmptyScreen = DefaultEmptyScreen
+}) {
+  const { visibleMessages, append, reload, stop, isLoading, input, setInput } = reactCore.useCopilotChat({ id, initialMessages, makeSystemMessage });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: "w-full h-full flex flex-col overflow-hidden box-border items-start",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "pt-5 px-5 overflow-y-auto overflow-x-hidden w-full flex-grow",
+        children: visibleMessages.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          className: "pl-0 pr-6",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ChatList, {
+              messages: visibleMessages
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(ChatScrollAnchor, {
+              trackVisibility: isLoading
+            })
+          ]
+        }) : /* @__PURE__ */ jsxRuntime.jsx(EmptyScreen, {
+          setInput
+        })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: "flex-shrink-0 w-full",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ChatPanel, {
+          id,
+          isLoading,
+          stop,
+          append,
+          reload,
+          messages: visibleMessages,
+          input,
+          setInput
+        })
+      })
+    ]
+  });
+}
+
+exports.CopilotChat = CopilotChat;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=copilot-chat.js.map