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

package/dist/components/index.mjs

@@ -1,11 +1,16 @@
 import "../chunk-MWC5OV7Z.mjs";
-import "../chunk-UCVCAGU7.mjs";
-import "../chunk-N7LTE54T.mjs";
 import "../chunk-SQMEPWVT.mjs";
 import {
   CopilotSidebar
-} from "../chunk-DLG7BZTA.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
@@ -13,50 +18,45 @@ import {
 import {
   DefaultStateRenderer
 } from "../chunk-MCO235PS.mjs";
-import {
-  CopilotPopup
-} from "../chunk-R2O33F44.mjs";
-import "../chunk-AELKLZSG.mjs";
-import "../chunk-YAGE7RCE.mjs";
-import "../chunk-VEC45H6Q.mjs";
-import "../chunk-RQNJNK2W.mjs";
+import "../chunk-N7LTE54T.mjs";
+import "../chunk-VC4NO5QZ.mjs";
 import {
   CopilotChat
-} from "../chunk-QXQDIFOC.mjs";
+} from "../chunk-H24B7QWO.mjs";
 import {
   AssistantMessage
-} from "../chunk-3VNMQWGT.mjs";
+} from "../chunk-FBYETUFL.mjs";
 import "../chunk-XB6QCUPB.mjs";
 import "../chunk-UWWMAJ7R.mjs";
 import "../chunk-WEYDZBT7.mjs";
-import "../chunk-OFYI4UU4.mjs";
+import "../chunk-7RIBDD4K.mjs";
 import {
   UserMessage
 } from "../chunk-HEIDCT7I.mjs";
+import "../chunk-UZTZXMYS.mjs";
+import "../chunk-TOQ7P4DO.mjs";
+import "../chunk-LYHZXHTJ.mjs";
+import "../chunk-YQFVRDNC.mjs";
+import {
+  Markdown
+} from "../chunk-XNQO5AZZ.mjs";
+import "../chunk-PCTCOQK2.mjs";
+import "../chunk-GJME6MK4.mjs";
+import {
+  useChatContext
+} from "../chunk-5JY5QJ2W.mjs";
 import "../chunk-V7W6IM2V.mjs";
 import {
   CopilotDevConsole
-} from "../chunk-ZIF5JJCH.mjs";
+} from "../chunk-QQ4FBIGN.mjs";
 import "../chunk-KXE2JCUH.mjs";
-import "../chunk-TI7SY2RI.mjs";
-import "../chunk-OTPAZXVR.mjs";
+import "../chunk-YC4NBUGE.mjs";
+import "../chunk-BH6PCAAL.mjs";
 import {
   shouldShowDevConsole
 } from "../chunk-6TCUJ3B7.mjs";
-import "../chunk-BH6PCAAL.mjs";
-import "../chunk-WGAZXTUA.mjs";
-import "../chunk-QXTRFMPM.mjs";
-import "../chunk-YQFVRDNC.mjs";
-import {
-  Markdown
-} from "../chunk-YQ3D5IQV.mjs";
-import "../chunk-6FTRYYR5.mjs";
-import "../chunk-3XAXY2Z3.mjs";
-import {
-  useChatContext
-} from "../chunk-CBBFRI3Q.mjs";
-import "../chunk-UPTB2MVO.mjs";
-import "../chunk-FZC7X5PK.mjs";
+import "../chunk-ORSMX3SE.mjs";
+import "../chunk-OTPAZXVR.mjs";
 import "../chunk-54JAUBUJ.mjs";
 import "../chunk-S5MBUNGN.mjs";
 import "../chunk-MRXNTQOX.mjs";

package/dist/index.css

@@ -1,15 +1,31 @@
 /* src/css/colors.css */
-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);
+:root {
+  --copilot-kit-primary-color: rgb(28, 28, 28);
+  --copilot-kit-contrast-color: rgb(255, 255, 255);
   --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;
+  --copilot-kit-input-background-color: #fbfbfb;
+  --copilot-kit-secondary-color: rgb(255 255 255);
+  --copilot-kit-secondary-contrast-color: rgb(28, 28, 28);
+  --copilot-kit-separator-color: rgb(200 200 200);
+  --copilot-kit-muted-color: rgb(200 200 200);
+  --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);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --copilot-kit-primary-color: rgb(255, 255, 255);
+    --copilot-kit-contrast-color: rgb(28, 28, 28);
+    --copilot-kit-background-color: rgb(17, 17, 17);
+    --copilot-kit-input-background-color: #2c2c2c;
+    --copilot-kit-secondary-color: rgb(28, 28, 28);
+    --copilot-kit-secondary-contrast-color: rgb(255, 255, 255);
+    --copilot-kit-separator-color: rgb(45, 45, 45);
+    --copilot-kit-muted-color: rgb(45, 45, 45);
+    --copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    --copilot-kit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+    --copilot-kit-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+  }
 }
 
 /* src/css/popup.css */
@@ -100,20 +116,23 @@ html {
   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 {
   transition: opacity 100ms, transform 300ms;
@@ -121,6 +140,13 @@ html {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.copilotKitButtonIcon svg {
+  width: 1.5rem;
+  height: 1.5rem;
 }
 .copilotKitButton.open .copilotKitButtonIconOpen {
   transform: translate(-50%, -50%) scale(0) rotate(90deg);
@@ -144,21 +170,26 @@ html {
   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;
@@ -166,15 +197,25 @@ html {
 }
 .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 {
   outline: none;
@@ -182,21 +223,31 @@ html {
 
 /* src/css/input.css */
 .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);
@@ -218,19 +269,23 @@ html {
   text-shadow: none;
   display: inline-block;
   text-align: center;
-  margin-left: 0.5rem;
+  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 {
   flex: 1;
@@ -243,21 +298,21 @@ html {
   -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;
@@ -267,16 +322,30 @@ html {
 .copilotKitMessages {
   overflow-y: scroll;
   flex: 1;
-  padding: 1rem 2rem;
   display: flex;
   flex-direction: column;
   background-color: var(--copilot-kit-background-color);
+  justify-content: space-between;
+  z-index: 1;
+}
+.copilotKitMessagesContainer {
+  padding: 1rem 24px;
+  display: flex;
+  flex-direction: column;
+}
+.copilotKitMessagesFooter {
+  display: flex;
+  padding: 0;
+  margin: 0 auto 8px auto;
+  justify-content: flex-start;
+  flex-direction: column;
+  width: 90%;
 }
 .copilotKitMessages::-webkit-scrollbar {
-  width: 9px;
+  width: 6px;
 }
 .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);
 }
@@ -287,10 +356,10 @@ html {
   background: transparent;
 }
 .copilotKitMessage {
-  border-radius: 0.5rem;
-  padding: 1rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  border-radius: 15px;
+  padding: 8px 12px;
+  font-size: 1rem;
+  line-height: 1.5;
   overflow-wrap: break-word;
   max-width: 80%;
   margin-bottom: 0.5rem;
@@ -300,14 +369,64 @@ html {
   color: var(--copilot-kit-contrast-color);
   margin-left: auto;
   white-space: pre-wrap;
+  line-height: 1.75;
+  font-size: 1rem;
 }
 .copilotKitMessage.copilotKitAssistantMessage {
-  background: var(--copilot-kit-secondary-color);
-  color: var(--copilot-kit-secondary-contrast-color);
+  background: transparent;
   margin-right: auto;
+  padding-left: 0;
+  position: relative;
+  max-width: 100%;
+  color: var(--copilot-kit-secondary-contrast-color);
 }
-.copilotKitMessage.copilotKitUserMessage + .copilotKitMessage.copilotKitAssistantMessage {
-  margin-top: 1.5rem;
+.copilotKitMessage.copilotKitAssistantMessage .copilotKitMessageControls {
+  position: absolute;
+  left: 0;
+  display: flex;
+  gap: 1rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  padding: 5px 0 0 0;
+}
+.copilotKitMessageControls.currentMessage {
+  opacity: 1 !important;
+}
+.copilotKitMessage.copilotKitAssistantMessage:hover .copilotKitMessageControls {
+  opacity: 1;
+}
+@media (max-width: 768px) {
+  .copilotKitMessage.copilotKitAssistantMessage .copilotKitMessageControls {
+    opacity: 1;
+  }
+}
+.copilotKitMessageControlButton {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  border-radius: 0.5rem;
+  justify-content: center;
+  color: var(--copilot-kit-primary-color);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+  z-index: 10;
+  margin: 0;
+}
+.copilotKitMessageControlButton:hover {
+  color: color-mix(in srgb, var(--copilot-kit-primary-color) 80%, black);
+  transform: scale(1.05);
+}
+.copilotKitMessageControlButton:active {
+  color: color-mix(in srgb, var(--copilot-kit-primary-color) 80%, black);
+  transform: scale(1.05);
+}
+.copilotKitMessageControlButton svg {
+  width: 1rem;
+  height: 1rem;
+  display: block;
+  pointer-events: none;
 }
 .copilotKitMessage.copilotKitAssistantMessage + .copilotKitMessage.copilotKitUserMessage {
   margin-top: 1.5rem;
@@ -318,12 +437,43 @@ html {
 }
 .copilotKitMessage .inProgressLabel {
   margin-left: 10px;
+  opacity: 0.7;
 }
-.copilotKitMessages footer {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
+@keyframes copilotKitSpinAnimation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.copilotKitSpinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--copilot-kit-contrast-color);
+  border-radius: 50%;
+  border-top-color: var(--copilot-kit-primary-color);
+  animation: copilotKitSpinAnimation 1s linear infinite;
+  margin-left: 8px;
+}
+@keyframes copilotKitActivityDotAnimation {
+  0%, 80%, 100% {
+    transform: scale(0.5);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.copilotKitActivityDot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--copilot-kit-primary-color);
+  animation: copilotKitActivityDotAnimation 1.4s infinite ease-in-out both;
 }
 
 /* src/css/window.css */
@@ -481,6 +631,8 @@ html {
 .copilotKitMarkdown p {
   padding: 0px;
   margin: 0px;
+  line-height: 1.75;
+  font-size: 1rem;
 }
 .copilotKitMarkdown p:not(:last-child),
 .copilotKitMarkdown pre:not(:last-child),
@@ -552,7 +704,6 @@ html {
   line-height: 1.25rem;
   font-weight: 500;
   height: 2.5rem;
-  width: 2.5rem;
   padding: 3px;
   margin: 2px;
 }
@@ -564,7 +715,7 @@ html {
 .copilotKitMessages footer .suggestions {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 6px;
 }
 .copilotKitMessages footer h6 {
   font-weight: 500;
@@ -572,17 +723,24 @@ html {
   margin-bottom: 8px;
 }
 .copilotKitMessages footer .suggestions .suggestion {
-  padding: 8px 12px;
+  padding: 6px 10px;
   font-size: 0.7rem;
-  border-radius: 0.5rem;
-  background: var(--copilot-kit-primary-color);
-  color: var(--copilot-kit-contrast-color);
+  border-radius: 15px;
+  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);
+}
+.copilotKitMessages footer .suggestions .suggestion.loading {
+  padding: 0;
+  font-size: 0.7rem;
+  border: none;
+  color: var(--copilot-kit-secondary-contrast-color);
 }
 .copilotKitMessages footer .suggestions button {
   transition: transform 0.3s ease;
 }
 .copilotKitMessages footer .suggestions button:not(:disabled):hover {
-  transform: scale(1.05);
+  transform: scale(1.03);
 }
 .copilotKitMessages footer .suggestions button:disabled {
   cursor: wait;
@@ -599,6 +757,7 @@ html {
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
+  background: white;
   font-family:
     ui-sans-serif,
     system-ui,
@@ -630,33 +789,28 @@ html {
 
 /* src/css/console.css */
 .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 {
   background-color: #f9caca;
 }
 .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;
@@ -672,50 +826,49 @@ html {
   width: 260px;
   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;
   outline: none;
   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;
@@ -733,7 +886,7 @@ html {
   cursor: pointer;
 }
 .copilotKitDebugMenuItem:hover {
-  background-color: #c7c7c7;
+  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 92%, black);
   border-radius: 4px;
 }
 .copilotKitDebugMenu[data-closed] {
@@ -743,9 +896,24 @@ html {
 .copilotKitDebugMenu hr {
   height: 1px;
   border: none;
-  background-color: #979797;
+  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;
+}
 
 /* src/css/crew.css */
 .copilotkit-response {