@copilotkit/react-ui 0.9.0-alpha.6 → 0.9.0-alpha.7

package/dist/chunk-MRXNTQOX.mjs

@@ -0,0 +1,55 @@
+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());
+  });
+};
+
+export { __async, __objRest, __spreadProps, __spreadValues };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-MRXNTQOX.mjs.map

package/dist/chunk-MRXNTQOX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/dist/chunk-N7KB3Z57.mjs

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+// src/hooks/use-at-bottom.tsx
+function useAtBottom(offset = 0) {
+  const [isAtBottom, setIsAtBottom] = React.useState(false);
+  React.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;
+}
+
+export { useAtBottom };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-N7KB3Z57.mjs.map

package/dist/chunk-N7KB3Z57.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-at-bottom.tsx"],"names":[],"mappings":";AAAA,YAAY,WAAW;AAEhB,SAAS,YAAY,SAAS,GAAG;AACtC,QAAM,CAAC,YAAY,aAAa,IAAU,eAAS,KAAK;AAExD,EAAM,gBAAU,MAAM;AACpB,UAAM,eAAe,MAAM;AACzB;AAAA,QACE,OAAO,cAAc,OAAO,WAC1B,SAAS,KAAK,eAAe;AAAA,MACjC;AAAA,IACF;AAEA,WAAO,iBAAiB,UAAU,cAAc,EAAE,SAAS,KAAK,CAAC;AACjE,iBAAa;AAEb,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT","sourcesContent":["import * as React from \"react\";\n\nexport function useAtBottom(offset = 0) {\n  const [isAtBottom, setIsAtBottom] = React.useState(false);\n\n  React.useEffect(() => {\n    const handleScroll = () => {\n      setIsAtBottom(\n        window.innerHeight + window.scrollY >=\n          document.body.offsetHeight - offset\n      );\n    };\n\n    window.addEventListener(\"scroll\", handleScroll, { passive: true });\n    handleScroll();\n\n    return () => {\n      window.removeEventListener(\"scroll\", handleScroll);\n    };\n  }, [offset]);\n\n  return isAtBottom;\n}\n"]}

package/dist/chunk-RSONJDLO.mjs

@@ -0,0 +1,28 @@
+import { useAtBottom } from './chunk-N7KB3Z57.mjs';
+import * as React from 'react';
+import { useInView } from 'react-intersection-observer';
+import { jsx } from 'react/jsx-runtime';
+
+function ChatScrollAnchor({ trackVisibility }) {
+  const isAtBottom = useAtBottom();
+  const { ref, entry, inView } = useInView({
+    trackVisibility,
+    delay: 100,
+    rootMargin: "0px 0px -150px 0px"
+  });
+  React.useEffect(() => {
+    if (isAtBottom && trackVisibility && !inView) {
+      entry == null ? void 0 : entry.target.scrollIntoView({
+        block: "start"
+      });
+    }
+  }, [inView, entry, isAtBottom, trackVisibility]);
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    className: "h-px w-full"
+  });
+}
+
+export { ChatScrollAnchor };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-RSONJDLO.mjs.map

package/dist/chunk-RSONJDLO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat-components/chat-scroll-anchor.tsx"],"names":[],"mappings":";;;;;AAEA,YAAY,WAAW;AACvB,SAAS,iBAAiB;AAwBjB;AA3BT;AAWO,SAAS,iBAAiB,EAAE,gBAAgB,GAA0B;AAC3E,QAAM,aAAa,YAAY;AAC/B,QAAM,EAAE,KAAK,OAAO,OAAO,IAAI,UAAU;AAAA,IACvC;AAAA,IACA,OAAO;AAAA,IACP,YAAY;AAAA,EACd,CAAC;AAED,EAAM,gBAAU,MAAM;AACpB,QAAI,cAAc,mBAAmB,CAAC,QAAQ;AAC5C,qCAAO,OAAO,eAAe;AAAA,QAC3B,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,YAAY,eAAe,CAAC;AAE/C,SAAO,oBAAC;AAAA,IAAI;AAAA,IAAU,WAAU;AAAA,GAAc;AAChD","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { useAtBottom } from \"../../hooks/use-at-bottom\";\n\ninterface ChatScrollAnchorProps {\n  trackVisibility?: boolean;\n}\n\nexport function ChatScrollAnchor({ trackVisibility }: ChatScrollAnchorProps) {\n  const isAtBottom = useAtBottom();\n  const { ref, entry, inView } = useInView({\n    trackVisibility,\n    delay: 100,\n    rootMargin: \"0px 0px -150px 0px\",\n  });\n\n  React.useEffect(() => {\n    if (isAtBottom && trackVisibility && !inView) {\n      entry?.target.scrollIntoView({\n        block: \"start\",\n      });\n    }\n  }, [inView, entry, isAtBottom, trackVisibility]);\n\n  return <div ref={ref} className=\"h-px w-full\" />;\n}\n"]}

package/dist/chunk-TUPGAO7T.mjs

@@ -0,0 +1,72 @@
+import { CopilotSidebar } from './chunk-7KPMJBGH.mjs';
+import { CopilotSidebarContext } from './chunk-MC6KTH4X.mjs';
+import { TooltipProvider } from './chunk-BS6RR2DJ.mjs';
+import { useState, useCallback } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+function CopilotSidebarUIProvider({
+  children
+}) {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const toggleSidebar = useCallback(() => {
+    setSidebarOpen((prev) => !prev);
+  }, []);
+  return /* @__PURE__ */ jsx(CopilotSidebarContext.Provider, {
+    value: { isSidebarOpen: sidebarOpen, toggleSidebar },
+    children: /* @__PURE__ */ jsx(Fragment, {
+      children: /* @__PURE__ */ jsxs("div", {
+        style: {
+          height: "100vh",
+          width: "100vw",
+          position: "relative"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            style: {
+              overflowY: "auto",
+              overflowX: "hidden",
+              height: "100%",
+              width: sidebarOpen ? "calc(100% - 450px)" : "100%",
+              position: "absolute",
+              transition: "width 0.5s ease-in-out"
+            },
+            children: /* @__PURE__ */ jsx("main", {
+              children
+            })
+          }),
+          /* @__PURE__ */ jsx("div", {
+            style: {
+              overflowY: "auto",
+              height: "100%",
+              width: "450px",
+              position: "absolute",
+              right: sidebarOpen ? "0" : "-450px",
+              transition: "right 0.5s ease-in-out"
+            },
+            children: /* @__PURE__ */ jsx(TooltipProvider, {
+              children: /* @__PURE__ */ jsx(CopilotSidebar, {
+                setSidebarOpen
+              })
+            })
+          }),
+          !sidebarOpen && /* @__PURE__ */ jsx("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 { CopilotSidebarUIProvider };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-TUPGAO7T.mjs.map

package/dist/chunk-TUPGAO7T.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/sidebar/copilot-sidebar-ui-provider.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,SAA2B,mBAAmB;AAC9C,SAAS,gBAAgB;AAsBnB,mBAkBM,KAjBJ,YADF;AAbC,SAAS,yBAAyB;AAAA,EACvC;AACF,GAAkC;AAChC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AAEnD,QAAM,gBAAgB,YAAY,MAAM;AACtC,mBAAe,CAAC,SAAS,CAAC,IAAI;AAAA,EAChC,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,sBAAsB,UAAtB;AAAA,IACC,OAAO,EAAE,eAAe,aAAa,cAAc;AAAA,IAEnD;AAAA,MACE,+BAAC;AAAA,QACC,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,UAAU;AAAA,QACZ;AAAA,QAEA;AAAA,8BAAC;AAAA,YACC,OAAO;AAAA,cACL,WAAW;AAAA,cACX,WAAW;AAAA,cACX,QAAQ;AAAA,cACR,OAAO,cAAc,uBAAuB;AAAA,cAC5C,UAAU;AAAA,cACV,YAAY;AAAA,YACd;AAAA,YAEA,8BAAC;AAAA,cAAM;AAAA,aAAS;AAAA,WAClB;AAAA,UACA,oBAAC;AAAA,YACC,OAAO;AAAA,cACL,WAAW;AAAA,cACX,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU;AAAA,cACV,OAAO,cAAc,MAAM;AAAA,cAC3B,YAAY;AAAA,YACd;AAAA,YAEA,8BAAC;AAAA,cACC,8BAAC;AAAA,gBAAe;AAAA,eAAgC;AAAA,aAClD;AAAA,WACF;AAAA,UACC,CAAC,eACA,oBAAC;AAAA,YACC,SAAS;AAAA,YACT,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK;AAAA,cACL,OAAO;AAAA,cACP,WAAW;AAAA,cACX,YAAY;AAAA,YACd;AAAA,YACA,WAAU;AAAA,YACX;AAAA,WAED;AAAA;AAAA,OAEJ;AAAA,KACF;AAAA,GACF;AAEJ","sourcesContent":["import React, { ReactNode, useCallback } from \"react\";\nimport { useState } from \"react\";\nimport { CopilotSidebar } from \"./copilot-sidebar\";\nimport { CopilotSidebarContext } from \"./sidebar-context\";\nimport { TooltipProvider } from \"../chat-components/ui/tooltip\";\n\nexport interface CopilotSidebarUIProviderProps {\n  children: ReactNode;\n}\n\nexport function CopilotSidebarUIProvider({\n  children,\n}: CopilotSidebarUIProviderProps) {\n  const [sidebarOpen, setSidebarOpen] = useState(true);\n\n  const toggleSidebar = useCallback(() => {\n    setSidebarOpen((prev) => !prev);\n  }, []);\n\n  return (\n    <CopilotSidebarContext.Provider\n      value={{ isSidebarOpen: sidebarOpen, toggleSidebar }}\n    >\n      <>\n        <div\n          style={{\n            height: \"100vh\",\n            width: \"100vw\",\n            position: \"relative\",\n          }}\n        >\n          <div\n            style={{\n              overflowY: \"auto\",\n              overflowX: \"hidden\",\n              height: \"100%\",\n              width: sidebarOpen ? \"calc(100% - 450px)\" : \"100%\",\n              position: \"absolute\",\n              transition: \"width 0.5s ease-in-out\", // New\n            }}\n          >\n            <main>{children}</main>\n          </div>\n          <div\n            style={{\n              overflowY: \"auto\",\n              height: \"100%\",\n              width: \"450px\",\n              position: \"absolute\",\n              right: sidebarOpen ? \"0\" : \"-450px\",\n              transition: \"right 0.5s ease-in-out\",\n            }}\n          >\n            <TooltipProvider>\n              <CopilotSidebar setSidebarOpen={setSidebarOpen} />\n            </TooltipProvider>\n          </div>\n          {!sidebarOpen && (\n            <button\n              onClick={toggleSidebar}\n              style={{\n                position: \"absolute\",\n                top: \"5%\",\n                right: \"20px\",\n                transform: \"translateY(-50%)\",\n                transition: \"opacity 0.5s ease-in-out\",\n              }}\n              className=\"bg-slate-100 ring-2 ring-slate-600 font-semibold text-black p-2 rounded-lg shadow-lg\"\n            >\n              Open Copilot\n            </button>\n          )}\n        </div>\n      </>\n    </CopilotSidebarContext.Provider>\n  );\n}\n"]}

package/dist/chunk-TVTG3V4F.mjs

@@ -0,0 +1,40 @@
+import { __async } from './chunk-MRXNTQOX.mjs';
+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
+);
+function fetcher(input, init) {
+  return __async(this, null, function* () {
+    const res = yield fetch(input, init);
+    if (!res.ok) {
+      const json = yield res.json();
+      if (json.error) {
+        const error = new Error(json.error);
+        error.status = res.status;
+        throw error;
+      } else {
+        throw new Error("An unexpected error occurred");
+      }
+    }
+    return res.json();
+  });
+}
+function formatDate(input) {
+  const date = new Date(input);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+
+export { cn, fetcher, formatDate, nanoid };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-TVTG3V4F.mjs.map

package/dist/chunk-TVTG3V4F.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts"],"names":[],"mappings":";;;;;AAAA,SAAS,YAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;AAEO,IAAM,SAAS;AAAA,EACpB;AAAA,EACA;AACF;AAEA,SAAsB,QACpB,OACA,MACe;AAAA;AACf,UAAM,MAAM,MAAM,MAAM,OAAO,IAAI;AAEnC,QAAI,CAAC,IAAI,IAAI;AACX,YAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,UAAI,KAAK,OAAO;AACd,cAAM,QAAQ,IAAI,MAAM,KAAK,KAAK;AAGlC,cAAM,SAAS,IAAI;AACnB,cAAM;AAAA,MACR,OAAO;AACL,cAAM,IAAI,MAAM,8BAA8B;AAAA,MAChD;AAAA,IACF;AAEA,WAAO,IAAI,KAAK;AAAA,EAClB;AAAA;AAEO,SAAS,WAAW,OAAuC;AAChE,QAAM,OAAO,IAAI,KAAK,KAAK;AAC3B,SAAO,KAAK,mBAAmB,SAAS;AAAA,IACtC,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,EACR,CAAC;AACH","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { customAlphabet } from \"nanoid\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const nanoid = customAlphabet(\n  \"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\",\n  7\n); // 7-character random string\n\nexport async function fetcher<JSON = any>(\n  input: RequestInfo,\n  init?: RequestInit\n): Promise<JSON> {\n  const res = await fetch(input, init);\n\n  if (!res.ok) {\n    const json = await res.json();\n    if (json.error) {\n      const error = new Error(json.error) as Error & {\n        status: number;\n      };\n      error.status = res.status;\n      throw error;\n    } else {\n      throw new Error(\"An unexpected error occurred\");\n    }\n  }\n\n  return res.json();\n}\n\nexport function formatDate(input: string | number | Date): string {\n  const date = new Date(input);\n  return date.toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n}\n"]}

package/dist/chunk-U6NJWGTV.mjs

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-U6NJWGTV.mjs.map

package/dist/chunk-U6NJWGTV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/chunk-UKKJ6H2K.mjs

@@ -0,0 +1,90 @@
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-BS6RR2DJ.mjs';
+import { Button } from './chunk-V6QYUEJR.mjs';
+import { IconArrowElbow } from './chunk-KR7MH7XO.mjs';
+import { useEnterSubmit } from './chunk-BIPCPNHG.mjs';
+import { __async } from './chunk-MRXNTQOX.mjs';
+import * as React from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function PromptForm({
+  onSubmit,
+  input,
+  setInput,
+  isLoading
+}) {
+  const { formRef, onKeyDown } = useEnterSubmit();
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+  return /* @__PURE__ */ 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__ */ 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__ */ jsxs(Tooltip, {
+          children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, {
+              asChild: true
+            }),
+            /* @__PURE__ */ jsx(TooltipContent, {
+              children: "New Chat"
+            })
+          ]
+        }),
+        /* @__PURE__ */ 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__ */ jsx("div", {
+          className: "absolute right-0 top-4 sm:right-4",
+          children: /* @__PURE__ */ jsxs(Tooltip, {
+            children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, {
+                asChild: true,
+                children: /* @__PURE__ */ jsxs(Button, {
+                  type: "submit",
+                  size: "icon",
+                  disabled: isLoading || input === "",
+                  className: " bg-slate-300",
+                  children: [
+                    /* @__PURE__ */ jsx(IconArrowElbow, {}),
+                    /* @__PURE__ */ jsx("span", {
+                      className: "sr-only",
+                      children: "Send message"
+                    })
+                  ]
+                })
+              }),
+              /* @__PURE__ */ jsx(TooltipContent, {
+                children: "Send message"
+              })
+            ]
+          })
+        })
+      ]
+    })
+  });
+}
+
+export { PromptForm };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-UKKJ6H2K.mjs.map

package/dist/chunk-UKKJ6H2K.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat-components/prompt-form.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,YAAY,WAAW;AACvB,OAAO,sBAAsB;AA4CrB,SACE,KADF;AA5BD,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgB;AACd,QAAM,EAAE,SAAS,UAAU,IAAI,eAAe;AAC9C,QAAM,WAAiB,aAA4B,IAAI;AAEvD,EAAM,gBAAU,MAAM;AACpB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,MAAM;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC;AAAA,IACC,UAAU,CAAO,MAAM;AACrB,QAAE,eAAe;AACjB,UAAI,EAAC,+BAAO,SAAQ;AAClB;AAAA,MACF;AACA,eAAS,EAAE;AACX,YAAM,SAAS,KAAK;AAAA,IACtB;AAAA,IACA,KAAK;AAAA,IAEL,+BAAC;AAAA,MAAI,WAAU;AAAA,MACb;AAAA,6BAAC;AAAA,UACC;AAAA,gCAAC;AAAA,cAAe,SAAO;AAAA,aAWvB;AAAA,YACA,oBAAC;AAAA,cAAe;AAAA,aAAQ;AAAA;AAAA,SAC1B;AAAA,QACA,oBAAC;AAAA,UACC,KAAK;AAAA,UACL,UAAU;AAAA,UACV;AAAA,UACA,MAAM;AAAA,UACN,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC,aAAY;AAAA,UACZ,YAAY;AAAA,UACZ,WAAU;AAAA,SACZ;AAAA,QACA,oBAAC;AAAA,UAAI,WAAU;AAAA,UACb,+BAAC;AAAA,YACC;AAAA,kCAAC;AAAA,gBAAe,SAAO;AAAA,gBACrB,+BAAC;AAAA,kBACC,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,UAAU,aAAa,UAAU;AAAA,kBACjC,WAAU;AAAA,kBAEV;AAAA,wCAAC,kBAAe;AAAA,oBAChB,oBAAC;AAAA,sBAAK,WAAU;AAAA,sBAAU;AAAA,qBAAY;AAAA;AAAA,iBACxC;AAAA,eACF;AAAA,cACA,oBAAC;AAAA,gBAAe;AAAA,eAAY;AAAA;AAAA,WAC9B;AAAA,SACF;AAAA;AAAA,KACF;AAAA,GACF;AAEJ","sourcesContent":["import * as React from \"react\";\nimport TextareaAutosize from \"react-textarea-autosize\";\nimport { UseChatHelpers } from \"ai/react\";\n\nimport { useEnterSubmit } from \"../../hooks/use-enter-submit\";\nimport { cn } from \"../../lib/utils\";\nimport { Button, buttonVariants } from \"./ui/button\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"./ui/tooltip\";\nimport { IconArrowElbow, IconPlus } from \"./ui/icons\";\n// import Link from \"next/link\";\n\nexport interface PromptProps\n  extends Pick<UseChatHelpers, \"input\" | \"setInput\"> {\n  onSubmit: (value: string) => Promise<void>;\n  isLoading: boolean;\n}\n\nexport function PromptForm({\n  onSubmit,\n  input,\n  setInput,\n  isLoading,\n}: PromptProps) {\n  const { formRef, onKeyDown } = useEnterSubmit();\n  const inputRef = React.useRef<HTMLTextAreaElement>(null);\n\n  React.useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, []);\n\n  return (\n    <form\n      onSubmit={async (e) => {\n        e.preventDefault();\n        if (!input?.trim()) {\n          return;\n        }\n        setInput(\"\");\n        await onSubmit(input);\n      }}\n      ref={formRef}\n    >\n      <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\">\n        <Tooltip>\n          <TooltipTrigger asChild>\n            {/* <Link\n              href=\"/\"\n              className={cn(\n                buttonVariants({ size: \"sm\", variant: \"outline\" }),\n                \"absolute left-0 top-4 h-8 w-8 rounded-full bg-background p-0 sm:left-4\"\n              )}\n            >\n              <IconPlus />\n              <span className=\"sr-only\">New Chat</span>\n            </Link> */}\n          </TooltipTrigger>\n          <TooltipContent>New Chat</TooltipContent>\n        </Tooltip>\n        <TextareaAutosize\n          ref={inputRef}\n          tabIndex={0}\n          onKeyDown={onKeyDown}\n          rows={1}\n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          placeholder=\"Send a message.\"\n          spellCheck={false}\n          className=\"min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm\"\n        />\n        <div className=\"absolute right-0 top-4 sm:right-4\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                type=\"submit\"\n                size=\"icon\"\n                disabled={isLoading || input === \"\"}\n                className=\" bg-slate-300\"\n              >\n                <IconArrowElbow />\n                <span className=\"sr-only\">Send message</span>\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>Send message</TooltipContent>\n          </Tooltip>\n        </div>\n      </div>\n    </form>\n  );\n}\n"]}

package/dist/chunk-V6QYUEJR.mjs

@@ -0,0 +1,47 @@
+import { cn } from './chunk-TVTG3V4F.mjs';
+import { __objRest, __spreadValues } from './chunk-MRXNTQOX.mjs';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } 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 = React.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__ */ jsx(Comp, __spreadValues({
+      className: cn(buttonVariants({ variant, size, className })),
+      ref
+    }, props));
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-V6QYUEJR.mjs.map

package/dist/chunk-V6QYUEJR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat-components/ui/button.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,WAA8B;AA4CjC;AAxCN,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAQA,IAAM,SAAe;AAAA,EACnB,CAAC,IAAyD,QAAQ;AAAjE,iBAAE,aAAW,SAAS,MAAM,UAAU,MA3CzC,IA2CG,IAAgD,kBAAhD,IAAgD,CAA9C,aAAW,WAAS,QAAM;AAC3B,UAAM,OAAO,UAAU,OAAO;AAC9B,WACE,oBAAC;AAAA,MACC,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MAC1D;AAAA,OACI,MACN;AAAA,EAEJ;AACF;AACA,OAAO,cAAc","sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-md hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"shadow-none hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 shadow-none hover:underline\",\n      },\n      size: {\n        default: \"h-8 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-8 w-8 p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n"]}

package/dist/chunk-VSNDSL6W.mjs

@@ -0,0 +1,74 @@
+import { ExternalLink } from './chunk-KXJV37FS.mjs';
+import { Button } from './chunk-V6QYUEJR.mjs';
+import { IconArrowRight } from './chunk-KR7MH7XO.mjs';
+import { jsx, jsxs } 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__ */ jsx("div", {
+    className: "mx-auto max-w-2xl px-4",
+    children: /* @__PURE__ */ jsxs("div", {
+      className: "rounded-lg border bg-background p-8",
+      children: [
+        /* @__PURE__ */ jsx("h1", {
+          className: "mb-2 text-lg font-semibold",
+          children: "Welcome to CopilotKit! \u{1F44B}"
+        }),
+        /* @__PURE__ */ jsxs("p", {
+          className: "mb-2 leading-normal text-muted-foreground",
+          children: [
+            "This is a Copilot built with",
+            " ",
+            /* @__PURE__ */ jsx(ExternalLink, {
+              href: "https://recursively.ai",
+              children: "recursively.ai's"
+            }),
+            " ",
+            /* @__PURE__ */ jsx(ExternalLink, {
+              href: "https://github.com/RecursivelyAI/CopilotKit",
+              children: "CopilotKit"
+            }),
+            " ",
+            "."
+          ]
+        }),
+        /* @__PURE__ */ jsx("p", {
+          className: "leading-normal text-muted-foreground",
+          children: "You can start a conversation here or try the following examples:"
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: "mt-4 flex flex-col items-start space-y-2",
+          children: exampleMessages.map((message, index) => /* @__PURE__ */ jsxs(Button, {
+            variant: "link",
+            className: "h-auto p-0 text-base",
+            onClick: () => props.setInput(message.message),
+            children: [
+              /* @__PURE__ */ jsx(IconArrowRight, {
+                className: "mr-2 text-muted-foreground"
+              }),
+              message.heading
+            ]
+          }, index))
+        })
+      ]
+    })
+  });
+};
+
+export { DefaultEmptyScreen };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-VSNDSL6W.mjs.map

package/dist/chunk-VSNDSL6W.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat-components/default-empty-screen.tsx"],"names":[],"mappings":";;;;;;;;;;;AA+BQ,cAGA,YAHA;AA/BR;AAQA,IAAM,kBAAkB;AAAA,EACtB;AAAA,IACE,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA;AAAA,IACE,SAAS;AAAA,IACT,SAAS;AAAA;AAAA,EACX;AACF;AAMO,IAAM,qBAAiD,CAAC,UAAU;AACvE,SACE,oBAAC;AAAA,IAAI,WAAU;AAAA,IACb,+BAAC;AAAA,MAAI,WAAU;AAAA,MACb;AAAA,4BAAC;AAAA,UAAG,WAAU;AAAA,UAA6B;AAAA,SAE3C;AAAA,QACA,qBAAC;AAAA,UAAE,WAAU;AAAA,UAA4C;AAAA;AAAA,YAC1B;AAAA,YAC7B,oBAAC;AAAA,cAAa,MAAK;AAAA,cAAyB;AAAA,aAE5C;AAAA,YAAgB;AAAA,YAChB,oBAAC;AAAA,cAAa,MAAK;AAAA,cAA8C;AAAA,aAEjE;AAAA,YAAgB;AAAA,YAAI;AAAA;AAAA,SAEtB;AAAA,QACA,oBAAC;AAAA,UAAE,WAAU;AAAA,UAAuC;AAAA,SAEpD;AAAA,QACA,oBAAC;AAAA,UAAI,WAAU;AAAA,UACZ,0BAAgB,IAAI,CAAC,SAAS,UAC7B,qBAAC;AAAA,YAEC,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,SAAS,MAAM,MAAM,SAAS,QAAQ,OAAO;AAAA,YAE7C;AAAA,kCAAC;AAAA,gBAAe,WAAU;AAAA,eAA6B;AAAA,cACtD,QAAQ;AAAA;AAAA,aANJ,KAOP,CACD;AAAA,SACH;AAAA;AAAA,KACF;AAAA,GACF;AAEJ","sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { UseChatHelpers } from \"ai/react\";\n\nimport { Button } from \"./ui/button\";\nimport { ExternalLink } from \"./external-link\";\nimport { IconArrowRight } from \"./ui/icons\";\n\nconst exampleMessages = [\n  {\n    heading: \"Explain technical concepts\",\n    message: `What is a \"serverless function\"?`,\n  },\n  {\n    heading: \"Summarize an article\",\n    message: \"Summarize the following article for a 2nd grader: \\n\",\n  },\n  {\n    heading: \"Draft an email\",\n    message: `Draft an email to my boss about the following: \\n`,\n  },\n];\n\nexport interface EmptyScreenProps {\n  setInput: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const DefaultEmptyScreen: React.FC<EmptyScreenProps> = (props) => {\n  return (\n    <div className=\"mx-auto max-w-2xl px-4\">\n      <div className=\"rounded-lg border bg-background p-8\">\n        <h1 className=\"mb-2 text-lg font-semibold\">\n          Welcome to CopilotKit! 👋\n        </h1>\n        <p className=\"mb-2 leading-normal text-muted-foreground\">\n          This is a Copilot built with{\" \"}\n          <ExternalLink href=\"https://recursively.ai\">\n            recursively.ai's\n          </ExternalLink>{\" \"}\n          <ExternalLink href=\"https://github.com/RecursivelyAI/CopilotKit\">\n            CopilotKit\n          </ExternalLink>{\" \"}\n          .\n        </p>\n        <p className=\"leading-normal text-muted-foreground\">\n          You can start a conversation here or try the following examples:\n        </p>\n        <div className=\"mt-4 flex flex-col items-start space-y-2\">\n          {exampleMessages.map((message, index) => (\n            <Button\n              key={index}\n              variant=\"link\"\n              className=\"h-auto p-0 text-base\"\n              onClick={() => props.setInput(message.message)}\n            >\n              <IconArrowRight className=\"mr-2 text-muted-foreground\" />\n              {message.heading}\n            </Button>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/chunk-ZB6JHNDT.mjs

@@ -0,0 +1,75 @@
+import { CodeBlock } from './chunk-HKSY5T7Y.mjs';
+import { MemoizedReactMarkdown } from './chunk-6LRNF2VU.mjs';
+import { ChatMessageActions } from './chunk-6UJWRTL6.mjs';
+import { IconUser, IconOpenAI } from './chunk-KR7MH7XO.mjs';
+import { cn } from './chunk-TVTG3V4F.mjs';
+import { __objRest, __spreadProps, __spreadValues } from './chunk-MRXNTQOX.mjs';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ChatMessage(_a) {
+  var _b = _a, { message } = _b, props = __objRest(_b, ["message"]);
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
+    className: cn("group relative mb-4 flex items-start")
+  }, props), {
+    children: [
+      /* @__PURE__ */ 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__ */ jsx(IconUser, {}) : /* @__PURE__ */ jsx(IconOpenAI, {})
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "ml-4 flex-1 space-y-2 overflow-hidden px-1",
+        children: [
+          /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("code", __spreadProps(__spreadValues({
+                    className
+                  }, props2), {
+                    children
+                  }));
+                }
+                return /* @__PURE__ */ jsx(CodeBlock, __spreadValues({
+                  language: match && match[1] || "",
+                  value: String(children).replace(/\n$/, "")
+                }, props2), Math.random());
+              }
+            },
+            children: message.content
+          }),
+          /* @__PURE__ */ jsx(ChatMessageActions, {
+            message
+          })
+        ]
+      })
+    ]
+  }));
+}
+
+export { ChatMessage };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-ZB6JHNDT.mjs.map

package/dist/chunk-ZB6JHNDT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/chat-components/chat-message.tsx"],"names":["_a","_b","props"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,eAAe;AACtB,OAAO,gBAAgB;AAuBY,cAE7B,YAF6B;AAX5B,SAAS,YAAY,IAAyC;AAAzC,eAAE,UAd9B,IAc4B,IAAc,kBAAd,IAAc,CAAZ;AAC5B,SACE,qBAAC;AAAA,IAAI,WAAW,GAAG,sCAAsC;AAAA,KAAO,QAA/D;AAAA,IACC;AAAA,0BAAC;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,QAAQ,SAAS,SACb,kBACA;AAAA,QACN;AAAA,QAEC,kBAAQ,SAAS,SAAS,oBAAC,YAAS,IAAK,oBAAC,cAAW;AAAA,OACxD;AAAA,MACA,qBAAC;AAAA,QAAI,WAAU;AAAA,QACb;AAAA,8BAAC;AAAA,YACC,WAAU;AAAA,YACV,eAAe,CAAC,WAAW,UAAU;AAAA,YACrC,YAAY;AAAA,cACV,EAAE,EAAE,SAAS,GAAG;AACd,uBAAO,oBAAC;AAAA,kBAAE,WAAU;AAAA,kBAAkB;AAAA,iBAAS;AAAA,cACjD;AAAA,cACA,KAAKA,KAA2C;AAA3C,oBAAAC,MAAAD,KAAE,YAAU,WAAW,OAnCxC,IAmCiBC,KAAkCC,SAAA,UAAlCD,KAAkC,CAAhC,YAAU,aAAW;AAC1B,oBAAI,SAAS,QAAQ;AACnB,sBAAI,SAAS,MAAM,UAAK;AACtB,2BACE,oBAAC;AAAA,sBAAK,WAAU;AAAA,sBAAoC;AAAA,qBAAC;AAAA,kBAEzD;AAEA,2BAAS,KAAM,SAAS,GAAc,QAAQ,YAAO,QAAG;AAAA,gBAC1D;AAEA,sBAAM,QAAQ,iBAAiB,KAAK,aAAa,EAAE;AAEnD,oBAAI,QAAQ;AACV,yBACE,oBAAC;AAAA,oBAAK;AAAA,qBAA0BC,SAA/B;AAAA,oBACE;AAAA,oBACH;AAAA,gBAEJ;AAEA,uBACE,oBAAC;AAAA,kBAEC,UAAW,SAAS,MAAM,MAAO;AAAA,kBACjC,OAAO,OAAO,QAAQ,EAAE,QAAQ,OAAO,EAAE;AAAA,mBACrCA,SAHC,KAAK,OAAO,CAInB;AAAA,cAEJ;AAAA,YACF;AAAA,YAEC,kBAAQ;AAAA,WACX;AAAA,UACA,oBAAC;AAAA,YAAmB;AAAA,WAAkB;AAAA;AAAA,OACxC;AAAA;AAAA,IACF;AAEJ","sourcesContent":["import { Message } from \"ai\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\n\nimport { cn } from \"../../lib/utils\";\nimport { CodeBlock } from \"./ui/codeblock\";\nimport { MemoizedReactMarkdown } from \"./markdown\";\nimport { IconOpenAI, IconUser } from \"./ui/icons\";\nimport { ChatMessageActions } from \"./chat-message-actions\";\n\nexport interface ChatMessageProps {\n  message: Message;\n}\n\nexport function ChatMessage({ message, ...props }: ChatMessageProps) {\n  return (\n    <div className={cn(\"group relative mb-4 flex items-start\")} {...props}>\n      <div\n        className={cn(\n          \"flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow\",\n          message.role === \"user\"\n            ? \"bg-background\"\n            : \"bg-primary text-primary-foreground\"\n        )}\n      >\n        {message.role === \"user\" ? <IconUser /> : <IconOpenAI />}\n      </div>\n      <div className=\"ml-4 flex-1 space-y-2 overflow-hidden px-1\">\n        <MemoizedReactMarkdown\n          className=\"prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 text-sm\"\n          remarkPlugins={[remarkGfm, remarkMath]}\n          components={{\n            p({ children }) {\n              return <p className=\"mb-2 last:mb-0\">{children}</p>;\n            },\n            code({ children, className, inline, ...props }) {\n              if (children.length) {\n                if (children[0] == \"▍\") {\n                  return (\n                    <span className=\"mt-1 animate-pulse cursor-default\">▍</span>\n                  );\n                }\n\n                children[0] = (children[0] as string).replace(\"`▍`\", \"▍\");\n              }\n\n              const match = /language-(\\w+)/.exec(className || \"\");\n\n              if (inline) {\n                return (\n                  <code className={className} {...props}>\n                    {children}\n                  </code>\n                );\n              }\n\n              return (\n                <CodeBlock\n                  key={Math.random()}\n                  language={(match && match[1]) || \"\"}\n                  value={String(children).replace(/\\n$/, \"\")}\n                  {...props}\n                />\n              );\n            },\n          }}\n        >\n          {message.content}\n        </MemoizedReactMarkdown>\n        <ChatMessageActions message={message} />\n      </div>\n    </div>\n  );\n}\n"]}