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

package/dist/index.mjs

@@ -1,53 +1,44 @@
 "use client";
 import "./chunk-EFZPSZWO.mjs";
-import "./chunk-MWC5OV7Z.mjs";
-import "./chunk-UCVCAGU7.mjs";
-import "./chunk-N7LTE54T.mjs";
+import "./chunk-MMVDU6DF.mjs";
 import "./chunk-SQMEPWVT.mjs";
 import {
   CopilotSidebar
-} from "./chunk-LKCAF2HG.mjs";
+} from "./chunk-FFNESJSG.mjs";
 import "./chunk-WB3YULQ4.mjs";
-import {
-  DefaultResponseRenderer,
-  createResponseCache
-} from "./chunk-EJG6RRSX.mjs";
-import {
-  DefaultStateRenderer
-} from "./chunk-MCO235PS.mjs";
 import {
   CopilotPopup
-} from "./chunk-LXCH2BIB.mjs";
-import "./chunk-KG6DW6R2.mjs";
+} from "./chunk-6H7IQRIU.mjs";
+import "./chunk-DFHFPZQD.mjs";
 import "./chunk-CGVOCLHN.mjs";
-import "./chunk-GDJAAFIK.mjs";
+import "./chunk-QS7UFQFD.mjs";
 import "./chunk-V7W6IM2V.mjs";
 import {
   CopilotDevConsole
-} from "./chunk-QGK5GOSC.mjs";
-import "./chunk-KXE2JCUH.mjs";
-import "./chunk-YC4NBUGE.mjs";
-import "./chunk-OTPAZXVR.mjs";
+} from "./chunk-GBXUOB6L.mjs";
 import {
   shouldShowDevConsole
 } from "./chunk-6TCUJ3B7.mjs";
+import "./chunk-KXE2JCUH.mjs";
+import "./chunk-YC4NBUGE.mjs";
 import "./chunk-BH6PCAAL.mjs";
+import "./chunk-OTPAZXVR.mjs";
 import "./chunk-VC4NO5QZ.mjs";
 import {
   CopilotChat
-} from "./chunk-5GNYGURH.mjs";
-import {
-  AssistantMessage
-} from "./chunk-FBYETUFL.mjs";
-import "./chunk-XB6QCUPB.mjs";
+} from "./chunk-Z6YOBQUJ.mjs";
 import "./chunk-UWWMAJ7R.mjs";
 import "./chunk-WEYDZBT7.mjs";
 import "./chunk-7RIBDD4K.mjs";
 import {
   UserMessage
 } from "./chunk-HEIDCT7I.mjs";
+import {
+  AssistantMessage
+} from "./chunk-FBYETUFL.mjs";
+import "./chunk-XB6QCUPB.mjs";
 import "./chunk-TOQ7P4DO.mjs";
-import "./chunk-2LRE4W6A.mjs";
+import "./chunk-LYHZXHTJ.mjs";
 import "./chunk-YQFVRDNC.mjs";
 import {
   Markdown
@@ -73,11 +64,8 @@ export {
   CopilotDevConsole,
   CopilotPopup,
   CopilotSidebar,
-  DefaultResponseRenderer,
-  DefaultStateRenderer,
   Markdown,
   UserMessage,
-  createResponseCache,
   shouldShowDevConsole,
   useChatContext,
   useCopilotChatSuggestions

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-background-color\"?: string;\n  \"--copilot-kit-input-background-color\"?: string;\n  \"--copilot-kit-secondary-color\"?: string;\n  \"--copilot-kit-secondary-contrast-color\"?: string;\n  \"--copilot-kit-separator-color\"?: string;\n  \"--copilot-kit-muted-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":[]}

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.0-next.3",
+  "version": "1.8.0-next.5",
   "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.5",
+    "@copilotkit/runtime-client-gql": "1.8.0-next.5",
+    "@copilotkit/shared": "1.8.0-next.5"
   },
   "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/components/index.ts

@@ -1,3 +1,2 @@
 export * from "./chat";
 export * from "./dev-console";
-export * from "./crew";

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,89 @@
-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);
   }
 }
+
+.dark,
+html.dark,
+body.dark,
+[data-theme="dark"],
+html[style*="color-scheme: dark"],
+body[style*="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

@@ -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/panel.css

@@ -5,7 +5,7 @@
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
-  background: white;
+  background: var(--copilot-kit-background-color);
   font-family:
     ui-sans-serif,
     system-ui,

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;
 }

package/dist/chunk-EJG6RRSX.mjs

@@ -1,138 +0,0 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-MRXNTQOX.mjs";
-
-// src/components/crew/DefaultResponseRenderer.tsx
-import { useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var createResponseCache = () => {
-  const responseCache = /* @__PURE__ */ new Map();
-  return {
-    getResponse: (id) => responseCache.get(id),
-    setResponse: (id, response) => responseCache.set(id, response)
-  };
-};
-var useResponseCache = createResponseCache();
-var DefaultExpandIcon = ({ className }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className,
-    width: "12",
-    height: "12",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
-  }
-);
-var DefaultCollapseIcon = ({ className }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className,
-    width: "12",
-    height: "12",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
-  }
-);
-var DefaultContentRenderer = ({ content, className }) => /* @__PURE__ */ jsx("div", { className, children: content });
-var DefaultFeedbackButton = ({ label, onClick, className }) => /* @__PURE__ */ jsx("button", { onClick, className, children: label });
-var DefaultCompletedFeedback = ({ message, className }) => /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("span", { children: message }) });
-var DefaultResponseRenderer = ({
-  response,
-  status,
-  onRespond,
-  icons,
-  labels,
-  ContentRenderer = DefaultContentRenderer,
-  FeedbackButton = DefaultFeedbackButton,
-  CompletedFeedback = DefaultCompletedFeedback,
-  className = "copilotkit-response",
-  contentClassName = "copilotkit-response-content",
-  actionsClassName = "copilotkit-response-actions",
-  buttonClassName = "copilotkit-response-button",
-  completedFeedbackClassName = "copilotkit-response-completed-feedback"
-}) => {
-  const [isExpanded, setIsExpanded] = useState(true);
-  const defaultLabels = {
-    responseLabel: "Response",
-    approveLabel: "Approve",
-    rejectLabel: "Reject",
-    approvedMessage: "Approved",
-    rejectedMessage: "Rejected",
-    feedbackSubmittedMessage: "Feedback submitted"
-  };
-  const mergedLabels = __spreadValues(__spreadValues({}, defaultLabels), labels);
-  const renderFeedback = () => {
-    if (status === "complete") {
-      const cachedResponse = useResponseCache.getResponse(response.id);
-      return /* @__PURE__ */ jsx(
-        CompletedFeedback,
-        {
-          message: (cachedResponse == null ? void 0 : cachedResponse.__feedback__) ? cachedResponse.__feedback__ === mergedLabels.approvedMessage ? mergedLabels.approvedMessage : mergedLabels.rejectedMessage : mergedLabels.feedbackSubmittedMessage,
-          className: completedFeedbackClassName
-        }
-      );
-    }
-    if (status === "inProgress" || status === "executing") {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          FeedbackButton,
-          {
-            label: mergedLabels.approveLabel,
-            onClick: () => {
-              setIsExpanded(false);
-              onRespond == null ? void 0 : onRespond(mergedLabels.approveLabel);
-              useResponseCache.setResponse(response.id, __spreadProps(__spreadValues({}, response), {
-                __feedback__: mergedLabels.approvedMessage
-              }));
-            },
-            className: buttonClassName
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          FeedbackButton,
-          {
-            label: mergedLabels.rejectLabel,
-            onClick: () => {
-              setIsExpanded(false);
-              useResponseCache.setResponse(response.id, __spreadProps(__spreadValues({}, response), {
-                __feedback__: mergedLabels.rejectedMessage
-              }));
-              onRespond == null ? void 0 : onRespond(mergedLabels.rejectLabel);
-            },
-            className: buttonClassName
-          }
-        )
-      ] });
-    }
-    return null;
-  };
-  const ExpandIcon = (icons == null ? void 0 : icons.expand) || DefaultExpandIcon;
-  const CollapseIcon = (icons == null ? void 0 : icons.collapse) || DefaultCollapseIcon;
-  return /* @__PURE__ */ jsxs("div", { className, children: [
-    isExpanded && /* @__PURE__ */ jsx(ContentRenderer, { content: response.content, className: contentClassName }),
-    /* @__PURE__ */ jsxs("div", { className: actionsClassName, children: [
-      /* @__PURE__ */ jsxs("div", { className: "copilotkit-response-label", children: [
-        /* @__PURE__ */ jsx("button", { onClick: () => setIsExpanded(!isExpanded), className: "copilotkit-toggle-button", children: isExpanded ? /* @__PURE__ */ jsx(CollapseIcon, { className: "copilotkit-icon" }) : /* @__PURE__ */ jsx(ExpandIcon, { className: "copilotkit-icon" }) }),
-        /* @__PURE__ */ jsx("span", { children: mergedLabels.responseLabel })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "copilotkit-response-buttons", children: renderFeedback() })
-    ] })
-  ] });
-};
-
-export {
-  createResponseCache,
-  DefaultResponseRenderer
-};
-//# sourceMappingURL=chunk-EJG6RRSX.mjs.map

package/dist/chunk-EJG6RRSX.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/crew/DefaultResponseRenderer.tsx"],"sourcesContent":["/**\n * <br/>\n * A response renderer component for the CopilotKit framework. This component displays\n * a response that may require user feedback, such as approving or rejecting a suggestion.\n * It provides a flexible, customizable interface for rendering responses with user interaction.\n *\n * ## Install Dependencies\n *\n * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.\n *\n * ```shell npm2yarn \\\"@copilotkit/react-ui\"\\\n * npm install @copilotkit/react-core @copilotkit/react-ui\n * ```\n *\n * ## Usage\n *\n * ```tsx\n * import { DefaultResponseRenderer } from \"@copilotkit/react-ui\";\n * import \"@copilotkit/react-ui/styles.css\";\n *\n * // Basic usage\n * <DefaultResponseRenderer\n *   response={{\n *     id: \"response-1\",\n *     content: \"I've analyzed your data and found these insights...\"\n *   }}\n *   status=\"inProgress\"\n *   onRespond={(input) => console.log(`User responded: ${input}`)}\n * />\n * ```\n *\n * ## Customization\n *\n * You can customize the appearance and behavior of the component:\n *\n * ```tsx\n * // Custom labels and styling\n * <DefaultResponseRenderer\n *   response={{\n *     id: \"task-123\",\n *     content: \"Would you like to proceed with this recommendation?\"\n *   }}\n *   status=\"inProgress\"\n *   onRespond={handleResponse}\n *   labels={{\n *     responseLabel: \"AI Recommendation\",\n *     approveLabel: \"Yes, proceed\",\n *     rejectLabel: \"No, cancel\",\n *     approvedMessage: \"Proceeding with recommendation\",\n *     rejectedMessage: \"Recommendation cancelled\"\n *   }}\n *   className=\"my-custom-response\"\n *   contentClassName=\"my-custom-content\"\n *   buttonClassName=\"my-custom-button\"\n * />\n *\n * // Custom components\n * <DefaultResponseRenderer\n *   response={{\n *     id: \"task-456\",\n *     content: \"# Important Decision\\nThis requires your approval\"\n *   }}\n *   status=\"inProgress\"\n *   onRespond={handleResponse}\n *   ContentRenderer={({ content, className }) => (\n *     <MyMarkdownRenderer content={content} className={className} />\n *   )}\n *   FeedbackButton={({ label, onClick, className }) => (\n *     <MyCustomButton label={label} onClick={onClick} className={className} />\n *   )}\n * />\n * ```\n *\n * ### Look & Feel\n *\n * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:\n * ```tsx title=\"YourRootComponent.tsx\"\n * ...\n * import \"@copilotkit/react-ui/styles.css\"; // [!code highlight]\n *\n * export function YourRootComponent() {\n *   return (\n *     <CopilotKit>\n *       ...\n *     </CopilotKit>\n *   );\n * }\n * ```\n * For more information about how to customize the styles, check out the [Customize Look & Feel](/guides/custom-look-and-feel/customize-built-in-ui-components) guide.\n */\n\nimport React, { useState } from \"react\";\nimport {\n  Response,\n  ResponseRendererProps,\n  ContentRendererProps,\n  FeedbackButtonProps,\n  CompletedFeedbackProps,\n  ResponseRendererIconProps,\n} from \"./types\";\n\n/**\n * Creates a cache for storing response feedback\n */\nconst createResponseCache = <T extends { id: string }>() => {\n  const responseCache = new Map<string, T>();\n\n  return {\n    getResponse: (id: string) => responseCache.get(id),\n    setResponse: (id: string, response: T) => responseCache.set(id, response),\n  };\n};\n\n/**\n * Default global response cache instance\n */\nconst useResponseCache = createResponseCache<Response & { __feedback__?: string }>();\n\n/**\n * Default expand icon component\n */\nconst DefaultExpandIcon: React.FC<ResponseRendererIconProps> = ({ className }) => (\n  <svg\n    className={className}\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <polyline points=\"6 9 12 15 18 9\"></polyline>\n  </svg>\n);\n\n/**\n * Default collapse icon component\n */\nconst DefaultCollapseIcon: React.FC<ResponseRendererIconProps> = ({ className }) => (\n  <svg\n    className={className}\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <polyline points=\"18 15 12 9 6 15\"></polyline>\n  </svg>\n);\n\n/**\n * Default content renderer that simply displays text\n */\nconst DefaultContentRenderer: React.FC<ContentRendererProps> = ({ content, className }) => (\n  <div className={className}>{content}</div>\n);\n\n/**\n * Default feedback button component\n */\nconst DefaultFeedbackButton: React.FC<FeedbackButtonProps> = ({ label, onClick, className }) => (\n  <button onClick={onClick} className={className}>\n    {label}\n  </button>\n);\n\n/**\n * Default completed feedback component\n */\nconst DefaultCompletedFeedback: React.FC<CompletedFeedbackProps> = ({ message, className }) => (\n  <div className={className}>\n    <span>{message}</span>\n  </div>\n);\n\n/**\n * Default response renderer component that handles rendering responses\n * and collecting user feedback\n */\nexport const DefaultResponseRenderer: React.FC<ResponseRendererProps> = ({\n  response,\n  status,\n  onRespond,\n  icons,\n  labels,\n  ContentRenderer = DefaultContentRenderer,\n  FeedbackButton = DefaultFeedbackButton,\n  CompletedFeedback = DefaultCompletedFeedback,\n  className = \"copilotkit-response\",\n  contentClassName = \"copilotkit-response-content\",\n  actionsClassName = \"copilotkit-response-actions\",\n  buttonClassName = \"copilotkit-response-button\",\n  completedFeedbackClassName = \"copilotkit-response-completed-feedback\",\n}) => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  // Default label values\n  const defaultLabels = {\n    responseLabel: \"Response\",\n    approveLabel: \"Approve\",\n    rejectLabel: \"Reject\",\n    approvedMessage: \"Approved\",\n    rejectedMessage: \"Rejected\",\n    feedbackSubmittedMessage: \"Feedback submitted\",\n  };\n\n  // Merge provided labels with defaults\n  const mergedLabels = { ...defaultLabels, ...labels };\n\n  // Function to render feedback UI based on status\n  const renderFeedback = () => {\n    if (status === \"complete\") {\n      const cachedResponse = useResponseCache.getResponse(response.id);\n      return (\n        <CompletedFeedback\n          message={\n            cachedResponse?.__feedback__\n              ? cachedResponse.__feedback__ === mergedLabels.approvedMessage\n                ? mergedLabels.approvedMessage\n                : mergedLabels.rejectedMessage\n              : mergedLabels.feedbackSubmittedMessage\n          }\n          className={completedFeedbackClassName}\n        />\n      );\n    }\n\n    if (status === \"inProgress\" || status === \"executing\") {\n      return (\n        <>\n          <FeedbackButton\n            label={mergedLabels.approveLabel}\n            onClick={() => {\n              setIsExpanded(false);\n              onRespond?.(mergedLabels.approveLabel);\n              useResponseCache.setResponse(response.id, {\n                ...response,\n                __feedback__: mergedLabels.approvedMessage,\n              });\n            }}\n            className={buttonClassName}\n          />\n          <FeedbackButton\n            label={mergedLabels.rejectLabel}\n            onClick={() => {\n              setIsExpanded(false);\n              useResponseCache.setResponse(response.id, {\n                ...response,\n                __feedback__: mergedLabels.rejectedMessage,\n              });\n              onRespond?.(mergedLabels.rejectLabel);\n            }}\n            className={buttonClassName}\n          />\n        </>\n      );\n    }\n\n    return null;\n  };\n\n  // Decide which icon to display\n  const ExpandIcon = icons?.expand || DefaultExpandIcon;\n  const CollapseIcon = icons?.collapse || DefaultCollapseIcon;\n\n  return (\n    <div className={className}>\n      {/* Response content - conditionally expanded */}\n      {isExpanded && <ContentRenderer content={response.content} className={contentClassName} />}\n\n      <div className={actionsClassName}>\n        <div className=\"copilotkit-response-label\">\n          <button onClick={() => setIsExpanded(!isExpanded)} className=\"copilotkit-toggle-button\">\n            {isExpanded ? (\n              <CollapseIcon className=\"copilotkit-icon\" />\n            ) : (\n              <ExpandIcon className=\"copilotkit-icon\" />\n            )}\n          </button>\n          <span>{mergedLabels.responseLabel}</span>\n        </div>\n\n        <div className=\"copilotkit-response-buttons\">{renderFeedback()}</div>\n      </div>\n    </div>\n  );\n};\n\n/**\n * Export the response cache for reuse\n */\nexport { createResponseCache };\n"],"mappings":"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","names":[]}