@copilotkit/react-ui 1.8.0-next.3 → 1.8.0-next.4

package/dist/index.mjs

@@ -1,13 +1,18 @@
 "use client";
 import "./chunk-EFZPSZWO.mjs";
 import "./chunk-MWC5OV7Z.mjs";
-import "./chunk-UCVCAGU7.mjs";
-import "./chunk-N7LTE54T.mjs";
 import "./chunk-SQMEPWVT.mjs";
 import {
   CopilotSidebar
-} from "./chunk-LKCAF2HG.mjs";
+} from "./chunk-CZUP2N4J.mjs";
 import "./chunk-WB3YULQ4.mjs";
+import {
+  CopilotPopup
+} from "./chunk-TFIQA2P5.mjs";
+import "./chunk-AIR3MXUU.mjs";
+import "./chunk-CGVOCLHN.mjs";
+import "./chunk-GIPO7UB2.mjs";
+import "./chunk-UCVCAGU7.mjs";
 import {
   DefaultResponseRenderer,
   createResponseCache
@@ -15,27 +20,11 @@ import {
 import {
   DefaultStateRenderer
 } from "./chunk-MCO235PS.mjs";
-import {
-  CopilotPopup
-} from "./chunk-LXCH2BIB.mjs";
-import "./chunk-KG6DW6R2.mjs";
-import "./chunk-CGVOCLHN.mjs";
-import "./chunk-GDJAAFIK.mjs";
-import "./chunk-V7W6IM2V.mjs";
-import {
-  CopilotDevConsole
-} from "./chunk-QGK5GOSC.mjs";
-import "./chunk-KXE2JCUH.mjs";
-import "./chunk-YC4NBUGE.mjs";
-import "./chunk-OTPAZXVR.mjs";
-import {
-  shouldShowDevConsole
-} from "./chunk-6TCUJ3B7.mjs";
-import "./chunk-BH6PCAAL.mjs";
+import "./chunk-N7LTE54T.mjs";
 import "./chunk-VC4NO5QZ.mjs";
 import {
   CopilotChat
-} from "./chunk-5GNYGURH.mjs";
+} from "./chunk-H24B7QWO.mjs";
 import {
   AssistantMessage
 } from "./chunk-FBYETUFL.mjs";
@@ -46,19 +35,30 @@ import "./chunk-7RIBDD4K.mjs";
 import {
   UserMessage
 } from "./chunk-HEIDCT7I.mjs";
+import "./chunk-UZTZXMYS.mjs";
 import "./chunk-TOQ7P4DO.mjs";
-import "./chunk-2LRE4W6A.mjs";
+import "./chunk-LYHZXHTJ.mjs";
 import "./chunk-YQFVRDNC.mjs";
 import {
   Markdown
 } from "./chunk-XNQO5AZZ.mjs";
+import "./chunk-PCTCOQK2.mjs";
 import "./chunk-GJME6MK4.mjs";
-import "./chunk-UZTZXMYS.mjs";
 import {
   useChatContext
 } from "./chunk-5JY5QJ2W.mjs";
-import "./chunk-PCTCOQK2.mjs";
+import "./chunk-V7W6IM2V.mjs";
+import {
+  CopilotDevConsole
+} from "./chunk-QQ4FBIGN.mjs";
+import "./chunk-KXE2JCUH.mjs";
+import "./chunk-YC4NBUGE.mjs";
+import "./chunk-BH6PCAAL.mjs";
+import {
+  shouldShowDevConsole
+} from "./chunk-6TCUJ3B7.mjs";
 import "./chunk-ORSMX3SE.mjs";
+import "./chunk-OTPAZXVR.mjs";
 import "./chunk-IU3WTXLQ.mjs";
 import "./chunk-T26KLXLH.mjs";
 import {

package/dist/types/css.d.ts

@@ -3,20 +3,15 @@ import { CSSProperties } from 'react';
 interface CopilotKitCSSProperties extends CSSProperties {
     "--copilot-kit-primary-color"?: string;
     "--copilot-kit-contrast-color"?: string;
-    "--copilot-kit-secondary-color"?: string;
     "--copilot-kit-background-color"?: string;
-    "--copilot-kit-muted-color"?: string;
-    "--copilot-kit-text-light-color"?: string;
-    "--copilot-kit-text-dark-color"?: string;
+    "--copilot-kit-input-background-color"?: string;
+    "--copilot-kit-secondary-color"?: string;
+    "--copilot-kit-secondary-contrast-color"?: string;
     "--copilot-kit-separator-color"?: string;
-    "--copilot-kit-scrollbar-color"?: string;
-    "--copilot-kit-header-color"?: string;
-    "--copilot-kit-response-button-color"?: string;
-    "--copilot-kit-response-button-background-color"?: string;
+    "--copilot-kit-muted-color"?: string;
     "--copilot-kit-shadow-sm"?: string;
     "--copilot-kit-shadow-md"?: string;
     "--copilot-kit-shadow-lg"?: string;
-    "--copilot-kit-text-color"?: string;
 }
 
 export { CopilotKitCSSProperties };

package/dist/types/css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types/css.ts"],"sourcesContent":["// autogenerated (see postcss.config.js) - do not edit\nimport { CSSProperties } from \"react\";\n\nexport interface CopilotKitCSSProperties extends CSSProperties {\n  \"--copilot-kit-primary-color\"?: string;\n  \"--copilot-kit-contrast-color\"?: string;\n  \"--copilot-kit-secondary-color\"?: string;\n  \"--copilot-kit-background-color\"?: string;\n  \"--copilot-kit-muted-color\"?: string;\n  \"--copilot-kit-text-color\"?: string;\n  \"--copilot-kit-separator-color\"?: string;\n  \"--copilot-kit-scrollbar-color\"?: string;\n  \"--copilot-kit-response-button-color\"?: string;\n  \"--copilot-kit-response-button-background-color\"?: string;\n  \"--copilot-kit-shadow-sm\"?: string;\n  \"--copilot-kit-shadow-md\"?: string;\n  \"--copilot-kit-shadow-lg\"?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../src/types/css.ts"],"sourcesContent":["// autogenerated (see postcss.config.js) - do not edit\nimport { CSSProperties } from \"react\";\n\nexport interface CopilotKitCSSProperties extends CSSProperties {\n  \"--copilot-kit-primary-color\"?: string;\n  \"--copilot-kit-contrast-color\"?: string;\n  \"--copilot-kit-secondary-color\"?: string;\n  \"--copilot-kit-background-color\"?: string;\n  \"--copilot-kit-muted-color\"?: string;\n  \"--copilot-kit-text-light-color\"?: string;\n  \"--copilot-kit-text-dark-color\"?: string;\n  \"--copilot-kit-separator-color\"?: string;\n  \"--copilot-kit-scrollbar-color\"?: string;\n  \"--copilot-kit-header-color\"?: string;\n  \"--copilot-kit-response-button-color\"?: string;\n  \"--copilot-kit-response-button-background-color\"?: string;\n  \"--copilot-kit-shadow-sm\"?: string;\n  \"--copilot-kit-shadow-md\"?: string;\n  \"--copilot-kit-shadow-lg\"?: string;\n  \"--copilot-kit-text-color\"?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.0-next.3",
+  "version": "1.8.0-next.4",
   "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.0-next.3",
-    "@copilotkit/runtime-client-gql": "1.8.0-next.3",
-    "@copilotkit/shared": "1.8.0-next.3"
+    "@copilotkit/react-core": "1.8.0-next.4",
+    "@copilotkit/runtime-client-gql": "1.8.0-next.4",
+    "@copilotkit/shared": "1.8.0-next.4"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Input.tsx

@@ -89,7 +89,11 @@ export const Input = ({ inProgress, onSend, isVisible = false, onStop }: InputPr
               onClick={() =>
                 setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing")
               }
-              className={pushToTalkState === "recording" ? "copilotKitPushToTalkRecording" : ""}
+              className={
+                pushToTalkState === "recording"
+                  ? "copilotKitInputControlButton copilotKitPushToTalkRecording"
+                  : "copilotKitInputControlButton"
+              }
             >
               {context.icons.pushToTalkIcon}
             </button>
@@ -99,6 +103,7 @@ export const Input = ({ inProgress, onSend, isVisible = false, onStop }: InputPr
             onClick={isInProgress ? onStop : send}
             data-copilotkit-in-progress={inProgress}
             data-test-id={inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready"}
+            className="copilotKitInputControlButton"
           >
             {buttonIcon}
           </button>

package/src/css/button.css

@@ -5,7 +5,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  border: 1px solid var(--copilot-kit-contrast-color);
+  border: 1px solid var(--copilot-kit-primary-color);
   outline: none;
   position: relative;
   transform: scale(1);

package/src/css/colors.css

@@ -1,33 +1,58 @@
-html {
+/* Base theme variables (light mode) */
+:root {
+  /* Semantic color tokens */
+  /* Main brand/action color - used for buttons, interactive elements */
   --copilot-kit-primary-color: rgb(28, 28, 28);
+  /* Color that contrasts with primary - used for text on primary elements */
   --copilot-kit-contrast-color: rgb(255, 255, 255);
-  --copilot-kit-secondary-color: rgb(83, 83, 83);
+  /* Main page/container background color */
   --copilot-kit-background-color: rgb(255 255 255);
-  --copilot-kit-muted-color: rgb(200 200 200);
-  --copilot-kit-text-light-color: rgb(255 255 255);
-  --copilot-kit-text-dark-color: rgb(28, 28, 28);
+  /* Input box background color */
+  --copilot-kit-input-background-color: #fbfbfb;
+  /* Secondary background - used for cards, panels, elevated surfaces */
+  --copilot-kit-secondary-color: rgb(255 255 255);
+  /* Primary text color for main content */
+  --copilot-kit-secondary-contrast-color: rgb(28, 28, 28);
+  /* Border color for dividers and containers */
   --copilot-kit-separator-color: rgb(200 200 200);
-  --copilot-kit-scrollbar-color: rgba(0, 0, 0, 0.2);
-  --copilot-kit-header-color: rgb(255 255 255);
-  --copilot-kit-response-button-color: #333;
-  --copilot-kit-response-button-background-color: #fff;
+  /* Muted color for disabled/inactive states */
+  --copilot-kit-muted-color: rgb(200 200 200);
+
+  /* Shadow tokens */
+  /* Small shadow for subtle elevation */
   --copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  /* Medium shadow for cards */
   --copilot-kit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  /* Large shadow for modals */
   --copilot-kit-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Dark theme - based on system preference */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Main brand/action color - used for buttons, interactive elements */
+    --copilot-kit-primary-color: rgb(255, 255, 255);
+    /* Color that contrasts with primary - used for text on primary elements */
+    --copilot-kit-contrast-color: rgb(28, 28, 28);
+    /* Main page/container background color */
+    --copilot-kit-background-color: rgb(17, 17, 17);
+    /* Input box background color */
+    --copilot-kit-input-background-color: #2c2c2c;
+    /* Secondary background - used for cards, panels, elevated surfaces */
+    --copilot-kit-secondary-color: rgb(28, 28, 28);
+    /* Primary text color for main content */
+    --copilot-kit-secondary-contrast-color: rgb(255, 255, 255);
+    /* Border color for dividers and containers */
+    --copilot-kit-separator-color: rgb(45, 45, 45);
+    /* Muted color for disabled/inactive states */
+    --copilot-kit-muted-color: rgb(45, 45, 45);
 
-  .variant-blue {
-    --copilot-kit-primary-color: rgb(59 130 246);
-    --copilot-kit-contrast-color: rgb(255 255 255);
-    --copilot-kit-secondary-color: rgb(243 244 246);
-    --copilot-kit-background-color: rgb(255 255 255);
-    --copilot-kit-muted-color: rgb(200 200 200);
-    --copilot-kit-text-color: rgb(106 106 106);
-    --copilot-kit-separator-color: rgb(200 200 200);
-    --copilot-kit-scrollbar-color: rgba(0, 0, 0, 0.2);
-    --copilot-kit-response-button-color: #333;
-    --copilot-kit-response-button-background-color: #fff;
-    --copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --copilot-kit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    --copilot-kit-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    /* Small shadow for subtle elevation */
+    --copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    /* Medium shadow for cards */
+    --copilot-kit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+    /* Large shadow for modals */
+    --copilot-kit-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
   }
 }
+

package/src/css/console.css

@@ -132,7 +132,7 @@
   border-radius: 15px;
   font-size: 0.8rem;
   border: 1px solid var(--copilot-kit-muted-color);
-  color: var(--copilot-kit-text-color);
+  color: var(--copilot-kit-secondary-contrast-color);
   box-shadow: 0 5px 5px 0px rgba(0,0,0,.01),0 2px 3px 0px rgba(0,0,0,.02);
   background-color: var(--copilot-kit-dev-console-bg);
 }

package/src/css/header.css

@@ -4,12 +4,12 @@
   display: flex;
   align-items: center;
   position: relative;
-  color: var(--copilot-kit-contrast-color);
+  color: var(--copilot-kit-primary-color);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-bottom: 1px solid var(--copilot-kit-separator-color);
   padding-left: 1.5rem;
-  background-color: var(--copilot-kit-header-color); /* Adjust opacity to your preference */
+  background-color: var(--copilot-kit-contrast-color);
   justify-content: space-between;
   z-index: 2;
 }

package/src/css/input.css

@@ -3,20 +3,29 @@
   flex-direction: column;
   cursor: text;
   position: relative;
-  background-color: #fbfbfb;
+  background-color: var(--copilot-kit-input-background-color);
   border-radius: 20px;
   border: 1px solid var(--copilot-kit-separator-color);
   padding: 12px 14px;
   height: 75px;
+  margin: 0 auto;
+  width: 95%;
 }
 
 .copilotKitInputContainer {
-  width: 95%;
-  margin: 0 auto;
+  width: 100%;
   padding: 0 0 15px 0;
+  background: var(--copilot-kit-background-color);
+  border-bottom-left-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+}
+
+.copilotKitSidebar .copilotKitInputContainer {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-.copilotKitInput > .copilotKitInputControls > button {
+.copilotKitInputControlButton {
   padding: 0;
   cursor: pointer;
   transition-property: transform;
@@ -43,16 +52,16 @@
   height: 24px;
 }
 
-.copilotKitInput > .copilotKitInputControls > button:not([disabled]) {
+.copilotKitInputControlButton:not([disabled]) {
   color: var(--copilot-kit-primary-color);
 }
 
-.copilotKitInput > .copilotKitInputControls > button:not([disabled]):hover {
+.copilotKitInputControlButton:not([disabled]):hover {
   color: color-mix(in srgb, var(--copilot-kit-primary-color) 80%, black);
   transform: scale(1.05);
 }
 
-.copilotKitInput > .copilotKitInputControls > button[disabled] {
+.copilotKitInputControlButton[disabled] {
   color: var(--copilot-kit-muted-color);
   cursor: default;
 }
@@ -78,9 +87,9 @@
   padding: 0;
   font-family: inherit;
   font-weight: inherit;
-  color: var(--copilot-kit-text-color);
+  color: var(--copilot-kit-secondary-contrast-color);
   border: 0px;
-  background-color: #fbfbfb;
+  background-color: var(--copilot-kit-input-background-color);
 }
 
 .copilotKitInput > textarea::placeholder {
@@ -88,7 +97,7 @@
   opacity: 1;
 }
 
-.copilotKitInput > .copilotKitInputControls > button.copilotKitPushToTalkRecording {
+.copilotKitInputControlButton.copilotKitPushToTalkRecording {
   background-color: #ec0000;
   color: white;
   border-radius: 50%;

package/src/css/messages.css

@@ -30,7 +30,7 @@
 }
 
 .copilotKitMessages::-webkit-scrollbar-thumb {
-  background-color: var(--copilot-kit-scrollbar-color);
+  background-color: var(--copilot-kit-separator-color);
   border-radius: 10rem;
   border: 2px solid var(--copilot-kit-background-color);
 }
@@ -51,7 +51,6 @@
   overflow-wrap: break-word;
   max-width: 80%;
   margin-bottom: 0.5rem;
-  color: var(--copilot-kit-text-color);
 }
 
 .copilotKitMessage.copilotKitUserMessage {
@@ -69,6 +68,7 @@
   padding-left: 0;
   position: relative;
   max-width: 100%;
+  color: var(--copilot-kit-secondary-contrast-color);
 }
 
 .copilotKitMessage.copilotKitAssistantMessage .copilotKitMessageControls {

package/src/css/suggestions.css

@@ -15,7 +15,7 @@
   font-size: 0.7rem;
   border-radius: 15px;
   border: 1px solid var(--copilot-kit-muted-color);
-  color: var(--copilot-kit-text-color);
+  color: var(--copilot-kit-secondary-contrast-color);
   box-shadow: 0 5px 5px 0px rgba(0,0,0,.01),0 2px 3px 0px rgba(0,0,0,.02);
 }
 
@@ -23,7 +23,7 @@
   padding: 0;
   font-size: 0.7rem;
   border: none;
-  color: var(--copilot-kit-text-color);
+  color: var(--copilot-kit-secondary-contrast-color);
 }
 
 .copilotKitMessages footer .suggestions button {

package/src/types/css.ts

@@ -4,18 +4,13 @@ import { CSSProperties } from "react";
 export interface CopilotKitCSSProperties extends CSSProperties {
   "--copilot-kit-primary-color"?: string;
   "--copilot-kit-contrast-color"?: string;
-  "--copilot-kit-secondary-color"?: string;
   "--copilot-kit-background-color"?: string;
-  "--copilot-kit-muted-color"?: string;
-  "--copilot-kit-text-light-color"?: string;
-  "--copilot-kit-text-dark-color"?: string;
+  "--copilot-kit-input-background-color"?: string;
+  "--copilot-kit-secondary-color"?: string;
+  "--copilot-kit-secondary-contrast-color"?: string;
   "--copilot-kit-separator-color"?: string;
-  "--copilot-kit-scrollbar-color"?: string;
-  "--copilot-kit-header-color"?: string;
-  "--copilot-kit-response-button-color"?: string;
-  "--copilot-kit-response-button-background-color"?: string;
+  "--copilot-kit-muted-color"?: string;
   "--copilot-kit-shadow-sm"?: string;
   "--copilot-kit-shadow-md"?: string;
   "--copilot-kit-shadow-lg"?: string;
-  "--copilot-kit-text-color"?: string;
 }