@copilotkit/react-ui 1.8.5-next.1 → 1.8.5-next.3

package/dist/index.mjs

@@ -1,61 +1,62 @@
 "use client";
-import "./chunk-EFZPSZWO.mjs";
+import "./chunk-T26KLXLH.mjs";
+import {
+  useCopilotChatSuggestions
+} from "./chunk-Z4XPPVZT.mjs";
+import "./chunk-IU3WTXLQ.mjs";
 import "./chunk-MMVDU6DF.mjs";
 import "./chunk-SQMEPWVT.mjs";
-import "./chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "./chunk-6QV7AIIG.mjs";
+} from "./chunk-P53JYD5X.mjs";
 import {
   CopilotSidebar
-} from "./chunk-U6ISBBRF.mjs";
-import "./chunk-4TWPMWD4.mjs";
-import "./chunk-P7S3E5UW.mjs";
-import "./chunk-2OTVZXDX.mjs";
+} from "./chunk-TYAYVE3X.mjs";
+import "./chunk-WB3YULQ4.mjs";
+import "./chunk-GULJZORG.mjs";
+import "./chunk-QSUC3MKT.mjs";
+import "./chunk-JGMFJZMG.mjs";
+import "./chunk-QDC2Q7XX.mjs";
 import "./chunk-V7W6IM2V.mjs";
 import {
   CopilotDevConsole
-} from "./chunk-D5XIJNXQ.mjs";
+} from "./chunk-Q6XB5B2M.mjs";
+import "./chunk-Q5V6S67N.mjs";
 import {
   shouldShowDevConsole
 } from "./chunk-6TCUJ3B7.mjs";
 import "./chunk-KXE2JCUH.mjs";
 import "./chunk-NRA3CFEE.mjs";
 import "./chunk-BH6PCAAL.mjs";
-import "./chunk-Q5V6S67N.mjs";
+import "./chunk-EFZPSZWO.mjs";
 import "./chunk-YOEL33HG.mjs";
 import {
   CopilotChat
-} from "./chunk-MYUOPOIL.mjs";
-import "./chunk-WNC6OCIB.mjs";
-import "./chunk-62QMTKMJ.mjs";
+} from "./chunk-DRAM4KIH.mjs";
+import "./chunk-QMW2LYI3.mjs";
+import "./chunk-COZFHP6Y.mjs";
+import "./chunk-YIQTTJAT.mjs";
+import "./chunk-USR5CBYD.mjs";
+import {
+  AssistantMessage
+} from "./chunk-N7ZQXCKF.mjs";
 import {
   UserMessage
 } from "./chunk-HEIDCT7I.mjs";
-import "./chunk-NMNC4ROZ.mjs";
-import "./chunk-Q2YY2NX3.mjs";
-import {
-  AssistantMessage
-} from "./chunk-5M7ODWKH.mjs";
 import "./chunk-TOQ7P4DO.mjs";
-import "./chunk-QJKMOGWN.mjs";
+import "./chunk-RXBEZZ5I.mjs";
+import "./chunk-S5MBUNGN.mjs";
 import "./chunk-YQFVRDNC.mjs";
 import {
   Markdown
-} from "./chunk-XNQO5AZZ.mjs";
+} from "./chunk-KSW7FVYG.mjs";
+import "./chunk-DYUT4CVD.mjs";
+import "./chunk-54JAUBUJ.mjs";
 import "./chunk-ZY25LVYR.mjs";
 import {
   useChatContext
 } from "./chunk-UN2E3HCK.mjs";
-import "./chunk-PCTCOQK2.mjs";
 import "./chunk-ORSMX3SE.mjs";
-import "./chunk-IU3WTXLQ.mjs";
-import "./chunk-T26KLXLH.mjs";
-import {
-  useCopilotChatSuggestions
-} from "./chunk-Z4XPPVZT.mjs";
-import "./chunk-54JAUBUJ.mjs";
-import "./chunk-S5MBUNGN.mjs";
 import "./chunk-MRXNTQOX.mjs";
 export {
   AssistantMessage,

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.5-next.1",
+  "version": "1.8.5-next.3",
   "sideEffects": [
     "**/*.css"
   ],
@@ -50,9 +50,9 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
-    "@copilotkit/react-core": "1.8.5-next.1",
-    "@copilotkit/runtime-client-gql": "1.8.5-next.1",
-    "@copilotkit/shared": "1.8.5-next.1"
+    "@copilotkit/react-core": "1.8.5-next.3",
+    "@copilotkit/runtime-client-gql": "1.8.5-next.3",
+    "@copilotkit/shared": "1.8.5-next.3"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Window.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect } from "react";
 import { WindowProps } from "./props";
 import { useChatContext } from "./ChatContext";
+import { useCopilotContext } from "@copilotkit/react-core";
+import { useDarkMode } from "../../hooks/use-dark-mode";
 
 export const Window = ({
   children,
@@ -9,6 +11,7 @@ export const Window = ({
   hitEscapeToClose,
 }: WindowProps) => {
   const windowRef = React.useRef<HTMLDivElement>(null);
+  const context = useCopilotContext();
 
   const { open, setOpen } = useChatContext();
 
@@ -121,9 +124,31 @@ export const Window = ({
     };
   }, [adjustForMobile, handleClickOutside, handleKeyDown]);
 
+  const isDark = useDarkMode();
+
+  const showPoweredBy = !context.copilotApiConfig?.publicApiKey;
+  const poweredByStyle = {
+    visibility: "visible",
+    display: "block",
+    position: "static",
+    textAlign: "center",
+    fontSize: "12px",
+    padding: "3px 0",
+    color: isDark ? "rgb(69, 69, 69)" : "rgb(214, 214, 214)",
+  };
+
   return (
-    <div className={`copilotKitWindow${open ? " open" : ""}`} ref={windowRef}>
+    <div
+      className={`copilotKitWindow ${showPoweredBy ? " poweredByContainer" : ""} ${open ? " open" : ""}`}
+      ref={windowRef}
+    >
       {children}
+      {showPoweredBy && (
+        // @ts-expect-error -- expecting position not to be a string, but it can be.
+        <p className="poweredBy" style={poweredByStyle}>
+          Powered by CopilotKit
+        </p>
+      )}
     </div>
   );
 };

package/src/css/input.css

@@ -14,7 +14,7 @@
 
 .copilotKitInputContainer {
   width: 100%;
-  padding: 0 0 15px 0;
+  padding: 0;
   background: var(--copilot-kit-background-color);
   border-bottom-left-radius: 0.75rem;
   border-bottom-right-radius: 0.75rem;

package/src/css/window.css

@@ -14,6 +14,33 @@
   transform: scale(0.95) translateY(20px);
   display: flex;
   pointer-events: none;
+  padding-bottom: 15px;
+}
+
+.poweredByContainer {
+  padding: 0;
+  visibility: visible !important;
+  display: flex !important;
+  position: fixed !important;
+}
+
+.poweredBy {
+  visibility: visible !important;
+  display: block !important;
+  position: static !important;
+  text-align: center !important;
+  font-size: 12px !important;
+  padding: 3px 0 !important;
+  color: rgb(214, 214, 214) !important;
+}
+
+.dark,
+html.dark,
+body.dark,
+[data-theme="dark"],
+html[style*="color-scheme: dark"],
+body[style*="color-scheme: dark"] .poweredBy {
+  color: rgb(69, 69, 69) !important;
 }
 
 .copilotKitSidebar .copilotKitWindow {

package/src/hooks/use-dark-mode.ts

@@ -0,0 +1,10 @@
+export const useDarkMode = () => {
+  if (typeof window === "undefined") return false;
+  return (
+    document.documentElement.classList.contains("dark") ||
+    document.body.classList.contains("dark") ||
+    document.documentElement.getAttribute("data-theme") === "dark" ||
+    document.body.getAttribute("data-theme") === "dark" ||
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  );
+};

package/dist/chunk-P7S3E5UW.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat/Window.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from \"react\";\nimport { WindowProps } from \"./props\";\nimport { useChatContext } from \"./ChatContext\";\n\nexport const Window = ({\n  children,\n  clickOutsideToClose,\n  shortcut,\n  hitEscapeToClose,\n}: WindowProps) => {\n  const windowRef = React.useRef<HTMLDivElement>(null);\n\n  const { open, setOpen } = useChatContext();\n\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (!clickOutsideToClose) {\n        return;\n      }\n\n      const parentElement = windowRef.current?.parentElement;\n\n      let className = \"\";\n      if (event.target instanceof HTMLElement) {\n        className = event.target.className;\n      }\n\n      if (\n        open &&\n        parentElement &&\n        !parentElement.contains(event.target as any) &&\n        // prevent closing the window when clicking on the debug menu\n        !className.includes(\"copilotKitDebugMenu\")\n      ) {\n        setOpen(false);\n      }\n    },\n    [clickOutsideToClose, open, setOpen],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      const target = event.target as HTMLElement;\n      const isInput =\n        target.tagName === \"INPUT\" ||\n        target.tagName === \"SELECT\" ||\n        target.tagName === \"TEXTAREA\" ||\n        target.isContentEditable;\n\n      const isDescendantOfWrapper = windowRef.current?.contains(target);\n\n      if (\n        open &&\n        event.key === \"Escape\" &&\n        (!isInput || isDescendantOfWrapper) &&\n        hitEscapeToClose\n      ) {\n        setOpen(false);\n      } else if (\n        event.key === shortcut &&\n        ((isMacOS() && event.metaKey) || (!isMacOS() && event.ctrlKey)) &&\n        (!isInput || isDescendantOfWrapper)\n      ) {\n        setOpen(!open);\n      }\n    },\n    [hitEscapeToClose, shortcut, open, setOpen],\n  );\n\n  const adjustForMobile = useCallback(() => {\n    const copilotKitWindow = windowRef.current;\n    const vv = window.visualViewport;\n    if (!copilotKitWindow || !vv) {\n      return;\n    }\n\n    if (window.innerWidth < 640 && open) {\n      copilotKitWindow.style.height = `${vv.height}px`;\n      copilotKitWindow.style.left = `${vv.offsetLeft}px`;\n      copilotKitWindow.style.top = `${vv.offsetTop}px`;\n\n      document.body.style.position = \"fixed\";\n      document.body.style.width = \"100%\";\n      document.body.style.height = `${window.innerHeight}px`;\n      document.body.style.overflow = \"hidden\";\n      document.body.style.touchAction = \"none\";\n\n      // Prevent scrolling on iOS\n      document.body.addEventListener(\"touchmove\", preventScroll, {\n        passive: false,\n      });\n    } else {\n      copilotKitWindow.style.height = \"\";\n      copilotKitWindow.style.left = \"\";\n      copilotKitWindow.style.top = \"\";\n      document.body.style.position = \"\";\n      document.body.style.height = \"\";\n      document.body.style.width = \"\";\n      document.body.style.overflow = \"\";\n      document.body.style.top = \"\";\n      document.body.style.touchAction = \"\";\n\n      document.body.removeEventListener(\"touchmove\", preventScroll);\n    }\n  }, [open]);\n\n  useEffect(() => {\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    document.addEventListener(\"keydown\", handleKeyDown);\n    if (window.visualViewport) {\n      window.visualViewport.addEventListener(\"resize\", adjustForMobile);\n      adjustForMobile();\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      if (window.visualViewport) {\n        window.visualViewport.removeEventListener(\"resize\", adjustForMobile);\n      }\n    };\n  }, [adjustForMobile, handleClickOutside, handleKeyDown]);\n\n  return (\n    <div className={`copilotKitWindow${open ? \" open\" : \"\"}`} ref={windowRef}>\n      {children}\n    </div>\n  );\n};\n\nconst preventScroll = (event: TouchEvent): void => {\n  let targetElement = event.target as Element;\n\n  // Function to check if the target has the parent with a given class\n  const hasParentWithClass = (element: Element, className: string): boolean => {\n    while (element && element !== document.body) {\n      if (element.classList.contains(className)) {\n        return true;\n      }\n      element = element.parentElement!;\n    }\n    return false;\n  };\n\n  // Check if the target of the touch event is inside an element with the 'copilotKitMessages' class\n  if (!hasParentWithClass(targetElement, \"copilotKitMessages\")) {\n    event.preventDefault();\n  }\n};\n\nfunction isMacOS() {\n  return /Mac|iMac|Macintosh/i.test(navigator.userAgent);\n}\n"],"mappings":";;;;;AAAA,OAAO,SAAS,aAAa,iBAAiB;AA4H1C;AAxHG,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAmB;AACjB,QAAM,YAAY,MAAM,OAAuB,IAAI;AAEnD,QAAM,EAAE,MAAM,QAAQ,IAAI,eAAe;AAEzC,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAsB;AAf3B;AAgBM,UAAI,CAAC,qBAAqB;AACxB;AAAA,MACF;AAEA,YAAM,iBAAgB,eAAU,YAAV,mBAAmB;AAEzC,UAAI,YAAY;AAChB,UAAI,MAAM,kBAAkB,aAAa;AACvC,oBAAY,MAAM,OAAO;AAAA,MAC3B;AAEA,UACE,QACA,iBACA,CAAC,cAAc,SAAS,MAAM,MAAa;AAAA,MAE3C,CAAC,UAAU,SAAS,qBAAqB,GACzC;AACA,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB,MAAM,OAAO;AAAA,EACrC;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAAyB;AAzC9B;AA0CM,YAAM,SAAS,MAAM;AACrB,YAAM,UACJ,OAAO,YAAY,WACnB,OAAO,YAAY,YACnB,OAAO,YAAY,cACnB,OAAO;AAET,YAAM,yBAAwB,eAAU,YAAV,mBAAmB,SAAS;AAE1D,UACE,QACA,MAAM,QAAQ,aACb,CAAC,WAAW,0BACb,kBACA;AACA,gBAAQ,KAAK;AAAA,MACf,WACE,MAAM,QAAQ,aACZ,QAAQ,KAAK,MAAM,WAAa,CAAC,QAAQ,KAAK,MAAM,aACrD,CAAC,WAAW,wBACb;AACA,gBAAQ,CAAC,IAAI;AAAA,MACf;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,UAAU,MAAM,OAAO;AAAA,EAC5C;AAEA,QAAM,kBAAkB,YAAY,MAAM;AACxC,UAAM,mBAAmB,UAAU;AACnC,UAAM,KAAK,OAAO;AAClB,QAAI,CAAC,oBAAoB,CAAC,IAAI;AAC5B;AAAA,IACF;AAEA,QAAI,OAAO,aAAa,OAAO,MAAM;AACnC,uBAAiB,MAAM,SAAS,GAAG,GAAG;AACtC,uBAAiB,MAAM,OAAO,GAAG,GAAG;AACpC,uBAAiB,MAAM,MAAM,GAAG,GAAG;AAEnC,eAAS,KAAK,MAAM,WAAW;AAC/B,eAAS,KAAK,MAAM,QAAQ;AAC5B,eAAS,KAAK,MAAM,SAAS,GAAG,OAAO;AACvC,eAAS,KAAK,MAAM,WAAW;AAC/B,eAAS,KAAK,MAAM,cAAc;AAGlC,eAAS,KAAK,iBAAiB,aAAa,eAAe;AAAA,QACzD,SAAS;AAAA,MACX,CAAC;AAAA,IACH,OAAO;AACL,uBAAiB,MAAM,SAAS;AAChC,uBAAiB,MAAM,OAAO;AAC9B,uBAAiB,MAAM,MAAM;AAC7B,eAAS,KAAK,MAAM,WAAW;AAC/B,eAAS,KAAK,MAAM,SAAS;AAC7B,eAAS,KAAK,MAAM,QAAQ;AAC5B,eAAS,KAAK,MAAM,WAAW;AAC/B,eAAS,KAAK,MAAM,MAAM;AAC1B,eAAS,KAAK,MAAM,cAAc;AAElC,eAAS,KAAK,oBAAoB,aAAa,aAAa;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,aAAS,iBAAiB,aAAa,kBAAkB;AACzD,aAAS,iBAAiB,WAAW,aAAa;AAClD,QAAI,OAAO,gBAAgB;AACzB,aAAO,eAAe,iBAAiB,UAAU,eAAe;AAChE,sBAAgB;AAAA,IAClB;AAEA,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,kBAAkB;AAC5D,eAAS,oBAAoB,WAAW,aAAa;AACrD,UAAI,OAAO,gBAAgB;AACzB,eAAO,eAAe,oBAAoB,UAAU,eAAe;AAAA,MACrE;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,oBAAoB,aAAa,CAAC;AAEvD,SACE,oBAAC,SAAI,WAAW,mBAAmB,OAAO,UAAU,MAAM,KAAK,WAC5D,UACH;AAEJ;AAEA,IAAM,gBAAgB,CAAC,UAA4B;AACjD,MAAI,gBAAgB,MAAM;AAG1B,QAAM,qBAAqB,CAAC,SAAkB,cAA+B;AAC3E,WAAO,WAAW,YAAY,SAAS,MAAM;AAC3C,UAAI,QAAQ,UAAU,SAAS,SAAS,GAAG;AACzC,eAAO;AAAA,MACT;AACA,gBAAU,QAAQ;AAAA,IACpB;AACA,WAAO;AAAA,EACT;AAGA,MAAI,CAAC,mBAAmB,eAAe,oBAAoB,GAAG;AAC5D,UAAM,eAAe;AAAA,EACvB;AACF;AAEA,SAAS,UAAU;AACjB,SAAO,sBAAsB,KAAK,UAAU,SAAS;AACvD;","names":[]}