@copilotkit/react-ui 1.7.2-next.2 → 1.8.0-next.4

package/src/components/help-modal/modal.tsx

@@ -1,73 +1,58 @@
-import React, { useMemo, useState } from "react";
-import { CloseIcon, LifeBuoyIcon, LoadingSpinnerIcon } from "./icons";
+import React, { useMemo, useState, useRef, useEffect } from "react";
+import { CloseIcon } from "./icons";
 
 export function CopilotKitHelpModal() {
   const [showHelpModal, setShowHelpModal] = useState(false);
-  const [issueDescription, setIssueDescription] = useState("");
-  const [email, setEmail] = useState("");
-  const [emailError, setEmailError] = useState("");
-  const [submitting, setSubmitting] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
 
-  const validateEmail = (email: string) => {
-    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-    return re.test(email);
-  };
+  // Close popover when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setShowHelpModal(false);
+      }
+    };
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (email?.length > 0 && !validateEmail(email)) {
-      setEmailError("Please enter a valid email address");
-      return;
+    if (showHelpModal) {
+      document.addEventListener("mousedown", handleClickOutside);
     }
-    setSubmitting(true);
-
-    await fetch("https://api.segment.io/v1/track", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        event: "oss.dev-console.help",
-        anonymousId: window.crypto.randomUUID(),
-        properties: { email, text: issueDescription },
-        writeKey: "q0gQqvGYyw9pNyhIocNzefSYKGO1aiwW",
-      }),
-    });
 
-    // Reset
-    setEmailError("");
-    setEmail("");
-    setIssueDescription("");
-    setSubmitting(false);
-    setShowHelpModal(false);
-  };
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showHelpModal]);
 
   const HelpButton = () => (
     <button
-      onClick={() => setShowHelpModal(true)}
-      style={{ width: "50px", height: "30px", marginRight: "0.25rem" }}
-      className="text-sm p-0 bg-transparent rounded border border-blue-500"
+      ref={buttonRef}
+      onClick={() => setShowHelpModal(!showHelpModal)}
+      className="copilotKitDebugMenuTriggerButton relative"
       aria-label="Open Help"
     >
       Help
     </button>
   );
 
-  const submitButtonDisabled = useMemo(
-    () => submitting || !!emailError || issueDescription == null || issueDescription?.length == 0,
-    [submitting, emailError, issueDescription],
-  );
-
   return (
-    <>
+    <div className="relative">
       <HelpButton />
       {showHelpModal && (
         <div
-          className="fixed inset-0 flex items-center justify-center p-4"
-          style={{ backgroundColor: "rgba(11, 15, 26, 0.5)", zIndex: 99 }}
+          ref={popoverRef}
+          className="absolute mt-2 z-50"
+          style={{
+            top: "100%",
+            right: "-120px",
+            width: "380px",
+          }}
         >
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-4 flex-col relative">
+          <div className="bg-white rounded-lg shadow-xl w-full p-4 flex-col relative">
             <button
               className="absolute text-gray-400 hover:text-gray-600 focus:outline-none"
               style={{ top: "10px", right: "10px" }}
@@ -80,7 +65,7 @@ export function CopilotKitHelpModal() {
               <h2 className="text-2xl font-bold">Help Options</h2>
             </div>
             <div className="space-y-4 mb-4">
-              <div className="block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm">
+              <div className="copilotKitHelpItemButton">
                 <a
                   href="https://docs.copilotkit.ai/coagents/troubleshooting/common-issues"
                   target="_blank"
@@ -89,7 +74,7 @@ export function CopilotKitHelpModal() {
                   Visit the Troubleshooting and FAQ section in the docs
                 </a>
               </div>
-              <div className="block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm">
+              <div className="copilotKitHelpItemButton">
                 <a
                   href="https://go.copilotkit.ai/dev-console-support-discord"
                   target="_blank"
@@ -98,7 +83,7 @@ export function CopilotKitHelpModal() {
                   Go to Discord Support Channel (Community Support)
                 </a>
               </div>
-              <div className="block w-full text-center py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 text-sm">
+              <div className="copilotKitHelpItemButton">
                 <a
                   href="https://go.copilotkit.ai/dev-console-support-slack"
                   target="_blank"
@@ -108,57 +93,9 @@ export function CopilotKitHelpModal() {
                 </a>
               </div>
             </div>
-            <form onSubmit={handleSubmit} className="flex flex-col space-y-2">
-              <div>
-                <label htmlFor="feedback" className="block text-sm font-medium text-gray-700 mb-1">
-                  Let us know what your issue is:
-                </label>
-                <textarea
-                  id="feedback"
-                  rows={4}
-                  className="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500"
-                  placeholder="A Loom link / screen recording is always great!"
-                  onChange={(e) => setIssueDescription(e.target.value)}
-                  value={issueDescription}
-                  required
-                ></textarea>
-              </div>
-              <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
-                  Email (optional):
-                </label>
-                <input
-                  type="email"
-                  id="email"
-                  className={`w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500 ${emailError ? "border-red-500" : ""}`}
-                  placeholder="Enter your email for follow-up"
-                  onChange={(e) => {
-                    setEmail(e.target.value);
-                    setEmailError("");
-                  }}
-                  value={email}
-                />
-                {emailError && <p className="text-red-500 text-sm mt-1">{emailError}</p>}
-              </div>
-              <div className="bg-gray-50 px-4 py-4 sm:px-6 sm:flex sm:flex-row-reverse rounded-b-lg">
-                <button
-                  type="submit"
-                  onClick={handleSubmit}
-                  disabled={submitButtonDisabled}
-                  style={
-                    submitButtonDisabled
-                      ? { backgroundColor: "rgb(216, 216, 216)", color: "rgb(129, 129, 129)" }
-                      : undefined
-                  }
-                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-500 text-base font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm disabled:shadow-none"
-                >
-                  {submitting ? <LoadingSpinnerIcon color="white" /> : "Submit"}
-                </button>
-              </div>
-            </form>
           </div>
         </div>
       )}
-    </>
+    </div>
   );
 }

package/src/css/button.css

@@ -5,22 +5,25 @@
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--copilot-kit-primary-color);
   outline: none;
   position: relative;
   transform: scale(1);
-  transition: transform 200ms;
+  transition: all 0.2s ease;
   background-color: var(--copilot-kit-primary-color);
   color: var(--copilot-kit-contrast-color);
   cursor: pointer;
+  box-shadow: var(--copilot-kit-shadow-sm);
 }
 
 .copilotKitButton:hover {
-  transform: scale(1.1);
+  transform: scale(1.05);
+  box-shadow: var(--copilot-kit-shadow-md);
 }
 
 .copilotKitButton:active {
-  transform: scale(0.75);
+  transform: scale(0.95);
+  box-shadow: var(--copilot-kit-shadow-sm);
 }
 
 .copilotKitButtonIcon {
@@ -31,6 +34,14 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.copilotKitButtonIcon svg {
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
 /* State when the chat is open */

package/src/css/colors.css

@@ -1,12 +1,58 @@
-html {
-  --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-secondary-contrast-color: rgb(0 0 0);
+/* 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);
+  /* Main page/container background color */
   --copilot-kit-background-color: rgb(255 255 255);
-  --copilot-kit-muted-color: rgb(106 106 106);
-  --copilot-kit-separator-color: rgba(0, 0, 0, 0.08);
-  --copilot-kit-scrollbar-color: rgba(0, 0, 0, 0.2);
-  --copilot-kit-response-button-color: #333;
-  --copilot-kit-response-button-background-color: #fff;
+  /* 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);
+  /* 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);
+
+    /* 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

@@ -1,12 +1,8 @@
 .copilotKitDevConsole {
-  background-color: #f3f4f6;
-  padding-left: 10px;
-  padding-right: 10px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #cecece;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  gap: 5px;
+  margin: 0 15px;
 }
 
 .copilotKitDevConsole.copilotKitDevConsoleWarnOutdated {
@@ -14,23 +10,20 @@
 }
 
 .copilotKitDevConsole .copilotKitVersionInfo {
-  flex: 1;
-  margin-left: 18px;
   display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.copilotKitDevConsole .copilotKitVersionInfo header {
-  font-size: 11px;
-  font-weight: bold;
-}
-
-.copilotKitDevConsole .copilotKitVersionInfo footer {
-  margin-top: 10px;
+  position: absolute;
+  bottom: -25px;
+  padding: 3px 5px;
+  left: 0;
+  width: 100%;
+  justify-content: center;
+  gap: 10px;
+  font-size: 0.8rem;
+  align-items: center;
+  background: #ebb305;
 }
 
-.copilotKitDevConsole .copilotKitVersionInfo footer button {
+.copilotKitDevConsole .copilotKitVersionInfo button {
   font-size: 11px;
   font-weight: normal;
   font-family: monospace;
@@ -47,37 +40,33 @@
   text-overflow: ellipsis;
 }
 
-.copilotKitDevConsole .copilotKitVersionInfo header aside {
+.copilotKitDevConsole .copilotKitVersionInfo aside {
   display: inline;
   font-weight: normal;
   color: #7f7a7a;
   margin-left: 5px;
 }
 
-.copilotKitDevConsole .copilotKitVersionInfo section {
-  font-size: 11px;
-}
-
-.copilotKitDevConsole .copilotKitVersionInfo section svg {
+.copilotKitDevConsole .copilotKitVersionInfo svg {
   margin-left: 3px;
   margin-top: -3px;
 }
 
-.copilotKitDevConsole .copilotKitDebugMenuButton {
+.copilotKitDevConsole .copilotKitDebugMenuTriggerButton {
   font-size: 11px;
   font-weight: bold;
   display: flex;
-  width: 90px;
+  padding: 0 10px;
   height: 30px;
-  background-color: #d8d8d8;
-  border: 1px solid #979797;
-  border-radius: 6px;
+  background-color: transparent;
+  border: 1px solid var(--copilot-kit-muted-color);
+  border-radius: 20px;
   align-items: center;
   justify-content: center;
   outline: none;
 }
 
-.copilotKitDebugMenuButton.compact {
+.copilotKitDebugMenuTriggerButton.compact {
   width: 35px;
   color: black;
   justify-content: center;
@@ -85,19 +74,21 @@
   font-size: 8px;
 }
 
-.copilotKitDevConsole .copilotKitDebugMenuButton:hover {
-  background-color: #c7c7c7;
+.copilotKitDevConsole .copilotKitDebugMenuTriggerButton:hover {
+  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 95%, black);
 }
 
-.copilotKitDevConsole .copilotKitDebugMenuButton > svg {
+.copilotKitDevConsole .copilotKitDebugMenuTriggerButton > svg {
   margin-left: 10px;
 }
 
 .copilotKitDebugMenu {
-  background-color: #d8d8d8;
+  --copilot-kit-dev-console-bg: #f8f8fa;
+  --copilot-kit-dev-console-border: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 80%, black);
   margin-top: 2px;
   border-radius: 6px;
-  border: 1px solid #979797;
+  background-color: var(--copilot-kit-dev-console-bg);
+  border: 1px solid var(--copilot-kit-dev-console-border);
   padding: 0.25rem;
   outline: none;
   font-size: 13px;
@@ -117,7 +108,7 @@
 }
 
 .copilotKitDebugMenuItem:hover {
-  background-color: #c7c7c7;
+  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 92%, black);
   border-radius: 4px;
 }
 
@@ -129,6 +120,22 @@
 .copilotKitDebugMenu hr {
   height: 1px;
   border: none; /* Remove 3D look */
-  background-color: #979797; /* Set color */
+  background-color: var(--copilot-kit-dev-console-border);
   margin: 0.25rem;
 }
+
+.copilotKitHelpItemButton {
+  display: block;
+  text-align: center;
+  width: 100%;
+  padding: 4px 6px;
+  border-radius: 15px;
+  font-size: 0.8rem;
+  border: 1px solid var(--copilot-kit-muted-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);
+}
+.copilotKitHelpItemButton:hover {
+  background-color: #f9f9f9;
+}

package/src/css/header.css

@@ -2,23 +2,29 @@
   height: 56px;
   font-weight: 500;
   display: flex;
-  justify-content: center;
   align-items: center;
   position: relative;
-  background-color: var(--copilot-kit-primary-color);
-  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-contrast-color);
+  justify-content: space-between;
+  z-index: 2;
 }
 
 .copilotKitSidebar .copilotKitHeader {
   border-radius: 0;
 }
 
+.copilotKitHeaderControls {
+  display: flex;
+}
+
 @media (min-width: 640px) {
   .copilotKitHeader {
-    padding-left: 24px;
+    padding-left: 1.5rem;
     padding-right: 24px;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
@@ -27,15 +33,26 @@
 
 .copilotKitHeader > button {
   border: 0;
-  padding: 0px;
+  padding: 8px;
   position: absolute;
   top: 50%;
   right: 16px;
   transform: translateY(-50%);
   outline: none;
-  color: var(--copilot-kit-contrast-color);
+  color: var(--copilot-kit-muted-color);
   background-color: transparent;
   cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+  width: 35px;
+  height: 35px;
+}
+
+.copilotKitHeader > button:hover {
+  color: color-mix(in srgb, var(--copilot-kit-muted-color) 80%, black);
 }
 
 .copilotKitHeader > button:focus {

package/src/css/input.css

@@ -1,20 +1,32 @@
 .copilotKitInput {
-  border-top: 1px solid var(--copilot-kit-separator-color);
-  padding-left: 2rem;
-  padding-right: 1rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   cursor: text;
   position: relative;
+  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: 100%;
+  padding: 0 0 15px 0;
+  background: var(--copilot-kit-background-color);
   border-bottom-left-radius: 0.75rem;
   border-bottom-right-radius: 0.75rem;
-  background-color: var(--copilot-kit-background-color);
 }
 
-.copilotKitInput > .copilotKitInputControls > button {
-  padding: 0.25rem;
+.copilotKitSidebar .copilotKitInputContainer {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.copilotKitInputControlButton {
+  padding: 0;
   cursor: pointer;
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -36,23 +48,27 @@
   text-shadow: none;
   display: inline-block;
   text-align: center;
-  margin-left: 0.5rem; /* Add margin to separate button from textarea */
+  width: 24px;
+  height: 24px;
 }
 
-.copilotKitInput > .copilotKitInputControls > button:not([disabled]) {
+.copilotKitInputControlButton:not([disabled]) {
   color: var(--copilot-kit-primary-color);
 }
 
-.copilotKitInput > .copilotKitInputControls > button:not([disabled]):hover {
-  transform: scale(1.1);
+.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;
 }
 
 .copilotKitInputControls {
   display: flex;
+  gap: 3px;
 }
 
 .copilotKitInput > textarea {
@@ -66,23 +82,23 @@
   -moz-osx-font-smoothing: grayscale;
   cursor: text;
   font-size: 0.875rem;
-  line-height: 1.25rem;
+  line-height: 1.5rem;
   margin: 0;
   padding: 0;
   font-family: inherit;
   font-weight: inherit;
   color: var(--copilot-kit-secondary-contrast-color);
   border: 0px;
-  background-color: var(--copilot-kit-background-color);
+  background-color: var(--copilot-kit-input-background-color);
 }
 
 .copilotKitInput > textarea::placeholder {
-  color: var(--copilot-kit-muted-color);
+  color: #808080;
   opacity: 1;
 }
 
-.copilotKitInput > .copilotKitInputControls > button.copilotKitPushToTalkRecording {
-  background-color: red;
+.copilotKitInputControlButton.copilotKitPushToTalkRecording {
+  background-color: #ec0000;
   color: white;
   border-radius: 50%;
   animation: copilotKitPulseAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

package/src/css/markdown.css

@@ -45,6 +45,8 @@
 .copilotKitMarkdown p {
   padding: 0px;
   margin: 0px;
+  line-height: 1.75;
+  font-size: 1rem;
 }
 
 .copilotKitMarkdown p:not(:last-child),
@@ -126,7 +128,6 @@
   line-height: 1.25rem;
   font-weight: 500;
   height: 2.5rem;
-  width: 2.5rem;
   padding: 3px;
   margin: 2px;
 }