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

package/dist/components/index.mjs

@@ -1,26 +1,926 @@
-import '../chunk-U6NJWGTV.mjs';
-export { CopilotSidebarUIProvider } from '../chunk-XGUBRIUV.mjs';
-export { CopilotSidebar } from '../chunk-C34L4AWW.mjs';
-export { CopilotSidebarContext } from '../chunk-MC6KTH4X.mjs';
-export { CopilotChat } from '../chunk-RPTRCFSO.mjs';
-import '../chunk-SEH5PQVW.mjs';
-import '../chunk-5KEDV5VC.mjs';
-import '../chunk-SHOTWRKC.mjs';
-import '../chunk-GCOPYGHH.mjs';
-import '../chunk-CNQX2VY3.mjs';
-import '../chunk-6LAZQHEB.mjs';
-import '../chunk-TEYIQHMK.mjs';
-import '../chunk-OOBQC5H6.mjs';
-import '../chunk-CF3BK4OX.mjs';
-import '../chunk-INCNMGJ7.mjs';
-export { Tooltip, TooltipProvider } from '../chunk-VGX2W5ZB.mjs';
-import '../chunk-M3CZWJI3.mjs';
-import '../chunk-2KAF7NKC.mjs';
-import '../chunk-Q6YO7LDK.mjs';
-import '../chunk-IJLMKBSZ.mjs';
-import '../chunk-ZYC5YVDO.mjs';
-import '../chunk-POVINPXX.mjs';
-import '../chunk-OHWEJUCS.mjs';
-import '../chunk-MRXNTQOX.mjs';
-//# sourceMappingURL=out.js.map
+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());
+  });
+};
+
+// src/components/chat-components/ui/separator.tsx
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { customAlphabet } from "nanoid";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var nanoid = customAlphabet(
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  7
+);
+
+// src/components/chat-components/ui/separator.tsx
+import { jsx } from "react/jsx-runtime";
+var Separator = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, orientation = "horizontal", decorative = true } = _b, props = __objRest(_b, ["className", "orientation", "decorative"]);
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.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.Root.displayName;
+
+// src/components/chat-components/chat-message.tsx
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+
+// src/components/chat-components/ui/codeblock.tsx
+import { memo } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+
+// src/hooks/use-copy-to-clipboard.tsx
+import * as React2 from "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-components/ui/icons.tsx
+import * as React3 from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function IconOpenAI(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ 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__ */ jsx2("title", { children: "OpenAI icon" }),
+        /* @__PURE__ */ jsx2("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__ */ jsx2(
+    "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__ */ jsx2("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__ */ jsx2(
+    "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__ */ jsx2("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__ */ jsx2(
+    "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__ */ jsx2("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__ */ jsx2(
+    "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__ */ jsx2("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__ */ jsx2(
+    "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__ */ jsx2("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__ */ jsx2(
+    "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__ */ jsx2("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__ */ jsx2(
+    "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__ */ jsx2("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__ */ jsx2(
+    "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__ */ jsx2("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" })
+    })
+  );
+}
+
+// src/components/chat-components/ui/button.tsx
+import * as React4 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var buttonVariants = 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 = React4.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild"]);
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx3(Comp, __spreadValues({ className: cn(buttonVariants({ variant, size, className })), ref }, props));
+  }
+);
+Button.displayName = "Button";
+
+// src/components/chat-components/ui/codeblock.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "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 = 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__ */ jsxs2("div", { className: "codeblock relative w-full bg-zinc-950 font-sans", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex w-full items-center justify-between bg-zinc-800 px-6 py-2 pr-4 text-zinc-100", children: [
+      /* @__PURE__ */ jsx4("span", { className: "text-xs lowercase", children: language }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center space-x-1", children: [
+        /* @__PURE__ */ jsxs2(
+          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__ */ jsx4(IconDownload, {}),
+              /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Download" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          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__ */ jsx4(IconCheck, {}) : /* @__PURE__ */ jsx4(IconCopy, {}),
+              /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Copy code" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      SyntaxHighlighter,
+      {
+        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";
+
+// src/components/chat-components/markdown.tsx
+import { memo as memo2 } from "react";
+import ReactMarkdown from "react-markdown";
+var MemoizedReactMarkdown = memo2(
+  ReactMarkdown,
+  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
+);
+
+// src/components/chat-components/chat-message-actions.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+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__ */ jsx5(
+    "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__ */ jsxs3(Button, { variant: "ghost", size: "icon", onClick: onCopy, children: [
+        isCopied ? /* @__PURE__ */ jsx5(IconCheck, {}) : /* @__PURE__ */ jsx5(IconCopy, {}),
+        /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Copy message" })
+      ] })
+    })
+  );
+}
+
+// src/components/chat-components/chat-message.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function ChatMessage(_a) {
+  var _b = _a, { message } = _b, props = __objRest(_b, ["message"]);
+  return /* @__PURE__ */ jsxs4("div", __spreadProps(__spreadValues({ className: cn("group relative mb-4 flex items-start") }, props), { children: [
+    /* @__PURE__ */ jsx6(
+      "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__ */ jsx6(IconUser, {}) : /* @__PURE__ */ jsx6(IconOpenAI, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "ml-4 flex-1 space-y-2 overflow-hidden px-1", children: [
+      /* @__PURE__ */ jsx6(
+        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__ */ jsx6("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__ */ jsx6("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__ */ jsx6("code", __spreadProps(__spreadValues({ className }, props2), { children }));
+              }
+              return /* @__PURE__ */ jsx6(
+                CodeBlock,
+                __spreadValues({
+                  language: match && match[1] || "",
+                  value: String(children).replace(/\n$/, "")
+                }, props2),
+                Math.random()
+              );
+            }
+          },
+          children: message.content
+        }
+      ),
+      /* @__PURE__ */ jsx6(ChatMessageActions, { message })
+    ] })
+  ] }));
+}
+
+// src/components/chat-components/chat-list.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChatList({ messages }) {
+  const displayedMessages = messages.filter((message) => message.role !== "system");
+  if (!displayedMessages.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx7("div", { className: "relative mx-auto max-w-2xl px-0", children: displayedMessages.map((message, index) => /* @__PURE__ */ jsxs5("div", { children: [
+    /* @__PURE__ */ jsx7(ChatMessage, { message }),
+    index < displayedMessages.length - 1 && /* @__PURE__ */ jsx7(Separator, { className: "my-4 md:my-4" })
+  ] }, index)) });
+}
+
+// src/components/chat-components/prompt-form.tsx
+import * as React6 from "react";
+import TextareaAutosize from "react-textarea-autosize";
+
+// src/hooks/use-enter-submit.tsx
+import { useRef } from "react";
+function useEnterSubmit() {
+  const formRef = 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 };
+}
+
+// src/components/chat-components/ui/tooltip.tsx
+import * as React5 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React5.forwardRef((_a, ref) => {
+  var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest(_b, ["className", "sideOffset"]);
+  return /* @__PURE__ */ jsx8(
+    TooltipPrimitive.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.Content.displayName;
+
+// src/components/chat-components/prompt-form.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function PromptForm({ onSubmit, input, setInput, isLoading }) {
+  const { formRef, onKeyDown } = useEnterSubmit();
+  const inputRef = React6.useRef(null);
+  React6.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+  return /* @__PURE__ */ jsx9(
+    "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__ */ jsxs6("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__ */ jsxs6(Tooltip, { children: [
+          /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true }),
+          /* @__PURE__ */ jsx9(TooltipContent, { children: "New Chat" })
+        ] }),
+        /* @__PURE__ */ jsx9(
+          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__ */ jsx9("div", { className: "absolute right-0 top-4 sm:right-4", children: /* @__PURE__ */ jsxs6(Tooltip, { children: [
+          /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs6(
+            Button,
+            {
+              type: "submit",
+              size: "icon",
+              disabled: isLoading || input === "",
+              className: " bg-slate-300",
+              children: [
+                /* @__PURE__ */ jsx9(IconArrowElbow, {}),
+                /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Send message" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx9(TooltipContent, { children: "Send message" })
+        ] }) })
+      ] })
+    }
+  );
+}
+
+// src/components/chat-components/chat-panel.tsx
+import { nanoid as nanoid2 } from "nanoid";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function ChatPanel({
+  id,
+  isLoading,
+  stop,
+  append,
+  reload,
+  input,
+  setInput,
+  messages
+}) {
+  return /* @__PURE__ */ jsx10(
+    "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__ */ jsxs7("div", { className: "mx-auto sm:max-w-2xl sm:px-4", children: [
+        /* @__PURE__ */ jsx10("div", { className: "flex h-10 items-center justify-center mb-4", children: isLoading ? /* @__PURE__ */ jsxs7(Button, { variant: "outline", onClick: () => stop(), className: "bg-background", children: [
+          /* @__PURE__ */ jsx10(IconStop, { className: "mr-2" }),
+          "Stop generating"
+        ] }) : (messages == null ? void 0 : messages.length) > 0 && /* @__PURE__ */ jsxs7(Button, { variant: "outline", onClick: () => reload(), className: "bg-background", children: [
+          /* @__PURE__ */ jsx10(IconRefresh, { className: "mr-2" }),
+          "Regenerate response"
+        ] }) }),
+        /* @__PURE__ */ jsx10("div", { className: "space-y-4 border-2 bg-background px-4 py-2 shadow-lg sm:rounded-xl md:py-4", children: /* @__PURE__ */ jsx10(
+          PromptForm,
+          {
+            onSubmit: (value) => __async(this, null, function* () {
+              yield append({
+                id: id || nanoid2(),
+                content: value,
+                role: "user"
+              });
+            }),
+            input,
+            setInput,
+            isLoading
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/components/chat-components/external-link.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function ExternalLink({ href, children }) {
+  return /* @__PURE__ */ jsxs8(
+    "a",
+    {
+      href,
+      target: "_blank",
+      className: "inline-flex flex-1 justify-center gap-1 leading-4 hover:underline",
+      children: [
+        /* @__PURE__ */ jsx11("span", { children }),
+        /* @__PURE__ */ jsx11("svg", { "aria-hidden": "true", height: "7", viewBox: "0 0 6 6", width: "7", className: "opacity-70", children: /* @__PURE__ */ jsx11(
+          "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"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/chat-components/default-empty-screen.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+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__ */ jsx12("div", { className: "mx-auto max-w-2xl px-4", children: /* @__PURE__ */ jsxs9("div", { className: "rounded-lg border bg-background p-8", children: [
+    /* @__PURE__ */ jsx12("h1", { className: "mb-2 text-lg font-semibold", children: "Welcome to CopilotKit! \u{1F44B}" }),
+    /* @__PURE__ */ jsxs9("p", { className: "mb-2 leading-normal text-muted-foreground", children: [
+      "This is a Copilot built with",
+      " ",
+      /* @__PURE__ */ jsx12(ExternalLink, { href: "https://recursively.ai", children: "recursively.ai's" }),
+      " ",
+      /* @__PURE__ */ jsx12(ExternalLink, { href: "https://github.com/RecursivelyAI/CopilotKit", children: "CopilotKit" }),
+      " ",
+      "."
+    ] }),
+    /* @__PURE__ */ jsx12("p", { className: "leading-normal text-muted-foreground", children: "You can start a conversation here or try the following examples:" }),
+    /* @__PURE__ */ jsx12("div", { className: "mt-4 flex flex-col items-start space-y-2", children: exampleMessages.map((message, index) => /* @__PURE__ */ jsxs9(
+      Button,
+      {
+        variant: "link",
+        className: "h-auto p-0 text-base",
+        onClick: () => props.setInput(message.message),
+        children: [
+          /* @__PURE__ */ jsx12(IconArrowRight, { className: "mr-2 text-muted-foreground" }),
+          message.heading
+        ]
+      },
+      index
+    )) })
+  ] }) });
+};
+
+// src/components/chat-components/chat-scroll-anchor.tsx
+import * as React8 from "react";
+import { useInView } from "react-intersection-observer";
+
+// src/hooks/use-at-bottom.tsx
+import * as React7 from "react";
+function useAtBottom(offset = 0) {
+  const [isAtBottom, setIsAtBottom] = React7.useState(false);
+  React7.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;
+}
+
+// src/components/chat-components/chat-scroll-anchor.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function ChatScrollAnchor({ trackVisibility }) {
+  const isAtBottom = useAtBottom();
+  const { ref, entry, inView } = useInView({
+    trackVisibility,
+    delay: 100,
+    rootMargin: "0px 0px -150px 0px"
+  });
+  React8.useEffect(() => {
+    if (isAtBottom && trackVisibility && !inView) {
+      entry == null ? void 0 : entry.target.scrollIntoView({
+        block: "start"
+      });
+    }
+  }, [inView, entry, isAtBottom, trackVisibility]);
+  return /* @__PURE__ */ jsx13("div", { ref, className: "h-px w-full" });
+}
+
+// src/components/chat-components/copilot-chat.tsx
+import { useCopilotChat } from "@copilotkit/react-core";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function CopilotChat({
+  id,
+  initialMessages,
+  makeSystemMessage,
+  EmptyScreen = DefaultEmptyScreen
+}) {
+  const { visibleMessages, append, reload, stop, isLoading, input, setInput } = useCopilotChat({
+    id,
+    initialMessages,
+    makeSystemMessage
+  });
+  return /* @__PURE__ */ jsxs10("div", { className: "w-full h-full flex flex-col overflow-hidden box-border items-start", children: [
+    /* @__PURE__ */ jsx14("div", { className: "pt-5 px-5 overflow-y-auto overflow-x-hidden w-full flex-grow", children: visibleMessages.length ? /* @__PURE__ */ jsxs10("div", { className: "pl-0 pr-6", children: [
+      /* @__PURE__ */ jsx14(ChatList, { messages: visibleMessages }),
+      /* @__PURE__ */ jsx14(ChatScrollAnchor, { trackVisibility: isLoading })
+    ] }) : /* @__PURE__ */ jsx14(EmptyScreen, { setInput }) }),
+    /* @__PURE__ */ jsx14("div", { className: "flex-shrink-0 w-full", children: /* @__PURE__ */ jsx14(
+      ChatPanel,
+      {
+        id,
+        isLoading,
+        stop,
+        append,
+        reload,
+        messages: visibleMessages,
+        input,
+        setInput
+      }
+    ) })
+  ] });
+}
+
+// src/components/sidebar/copilot-sidebar-ui-provider.tsx
+import { useCallback } from "react";
+import { useState as useState3 } from "react";
+
+// src/components/sidebar/copilot-sidebar.tsx
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function CopilotSidebar(props) {
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "shadow-lg bg-gray-50 flex flex-col border-l-2",
+      style: { width: "100%", height: "100%" },
+      children: [
+        /* @__PURE__ */ jsx15(TopBar, __spreadValues({}, props)),
+        /* @__PURE__ */ jsx15(CopilotChat, {})
+      ]
+    }
+  );
+}
+function TopBar(props) {
+  return /* @__PURE__ */ jsxs11("div", { className: "py-6 flex bg-gray-50 items-center justify-between px-4", children: [
+    /* @__PURE__ */ jsx15("h1", { className: "text-base font-semibold leading-6 text-gray-900", children: "Copilot Chat" }),
+    /* @__PURE__ */ jsx15("div", { className: "ml-3 flex h-7 items-center", children: /* @__PURE__ */ jsxs11(
+      "button",
+      {
+        type: "button",
+        className: "rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2",
+        onClick: () => props.setSidebarOpen(false),
+        children: [
+          /* @__PURE__ */ jsx15("span", { className: "sr-only", children: "Close panel" }),
+          /* @__PURE__ */ jsx15(XMarkIcon, { className: "h-6 w-6", "aria-hidden": "true" })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/sidebar/sidebar-context.tsx
+import { createContext } from "react";
+var CopilotSidebarContext = createContext({
+  isSidebarOpen: false,
+  toggleSidebar: () => {
+  }
+});
+
+// src/components/sidebar/copilot-sidebar-ui-provider.tsx
+import { Fragment, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+function CopilotSidebarUIProvider({ children }) {
+  const [sidebarOpen, setSidebarOpen] = useState3(true);
+  const toggleSidebar = useCallback(() => {
+    setSidebarOpen((prev) => !prev);
+  }, []);
+  return /* @__PURE__ */ jsx16(CopilotSidebarContext.Provider, { value: { isSidebarOpen: sidebarOpen, toggleSidebar }, children: /* @__PURE__ */ jsx16(Fragment, { children: /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      style: {
+        height: "100vh",
+        width: "100vw",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx16(
+          "div",
+          {
+            style: {
+              overflowY: "auto",
+              overflowX: "hidden",
+              height: "100%",
+              width: sidebarOpen ? "calc(100% - 450px)" : "100%",
+              position: "absolute",
+              transition: "width 0.5s ease-in-out"
+              // New
+            },
+            children: /* @__PURE__ */ jsx16("main", { children })
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          "div",
+          {
+            style: {
+              overflowY: "auto",
+              height: "100%",
+              width: "450px",
+              position: "absolute",
+              right: sidebarOpen ? "0" : "-450px",
+              transition: "right 0.5s ease-in-out"
+            },
+            children: /* @__PURE__ */ jsx16(TooltipProvider, { children: /* @__PURE__ */ jsx16(CopilotSidebar, { setSidebarOpen }) })
+          }
+        ),
+        !sidebarOpen && /* @__PURE__ */ jsx16(
+          "button",
+          {
+            onClick: toggleSidebar,
+            style: {
+              position: "absolute",
+              top: "5%",
+              right: "20px",
+              transform: "translateY(-50%)",
+              transition: "opacity 0.5s ease-in-out"
+            },
+            className: "bg-slate-100 ring-2 ring-slate-600 font-semibold text-black p-2 rounded-lg shadow-lg",
+            children: "Open Copilot"
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+export {
+  CopilotChat,
+  CopilotSidebar,
+  CopilotSidebarContext,
+  CopilotSidebarUIProvider,
+  Tooltip,
+  TooltipProvider
+};
 //# sourceMappingURL=index.mjs.map