@copilotkit/react-ui 1.7.2-next.1 → 1.8.0-next.3

package/dist/components/chat/messages/RenderTextMessage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/chat/messages/RenderTextMessage.tsx"],"sourcesContent":["import { RenderMessageProps } from \"../props\";\n\nexport function RenderTextMessage(props: RenderMessageProps) {\n  const { message, inProgress, index, isCurrentMessage, UserMessage, AssistantMessage } = props;\n\n  if (message.isTextMessage()) {\n    if (message.role === \"user\") {\n      return (\n        <UserMessage\n          key={index}\n          data-message-role=\"user\"\n          message={message.content}\n          rawData={message}\n        />\n      );\n    } else if (message.role == \"assistant\") {\n      return (\n        <AssistantMessage\n          key={index}\n          data-message-role=\"assistant\"\n          message={message.content}\n          rawData={message}\n          isLoading={inProgress && isCurrentMessage && !message.content}\n          isGenerating={inProgress && isCurrentMessage && !!message.content}\n        />\n      );\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQQ;AAND,SAAS,kBAAkB,OAA2B;AAC3D,QAAM,EAAE,SAAS,YAAY,OAAO,kBAAkB,aAAa,iBAAiB,IAAI;AAExF,MAAI,QAAQ,cAAc,GAAG;AAC3B,QAAI,QAAQ,SAAS,QAAQ;AAC3B,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,qBAAkB;AAAA,UAClB,SAAS,QAAQ;AAAA,UACjB,SAAS;AAAA;AAAA,QAHJ;AAAA,MAIP;AAAA,IAEJ,WAAW,QAAQ,QAAQ,aAAa;AACtC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,qBAAkB;AAAA,UAClB,SAAS,QAAQ;AAAA,UACjB,SAAS;AAAA,UACT,WAAW,cAAc,oBAAoB,CAAC,QAAQ;AAAA,UACtD,cAAc,cAAc,oBAAoB,CAAC,CAAC,QAAQ;AAAA;AAAA,QALrD;AAAA,MAMP;AAAA,IAEJ;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/chat/messages/RenderTextMessage.tsx"],"sourcesContent":["import { RenderMessageProps } from \"../props\";\n\nexport function RenderTextMessage(props: RenderMessageProps) {\n  const {\n    message,\n    inProgress,\n    index,\n    isCurrentMessage,\n    UserMessage,\n    AssistantMessage,\n    onRegenerate,\n    onCopy,\n    onThumbsUp,\n    onThumbsDown,\n  } = props;\n\n  if (message.isTextMessage()) {\n    if (message.role === \"user\") {\n      return (\n        <UserMessage\n          key={index}\n          data-message-role=\"user\"\n          message={message.content}\n          rawData={message}\n        />\n      );\n    } else if (message.role == \"assistant\") {\n      return (\n        <AssistantMessage\n          key={index}\n          data-message-role=\"assistant\"\n          message={message.content}\n          rawData={message}\n          isLoading={inProgress && isCurrentMessage && !message.content}\n          isGenerating={inProgress && isCurrentMessage && !!message.content}\n          isCurrentMessage={isCurrentMessage}\n          onRegenerate={onRegenerate}\n          onCopy={onCopy}\n          onThumbsUp={onThumbsUp}\n          onThumbsDown={onThumbsDown}\n        />\n      );\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBQ;AAjBD,SAAS,kBAAkB,OAA2B;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,MAAI,QAAQ,cAAc,GAAG;AAC3B,QAAI,QAAQ,SAAS,QAAQ;AAC3B,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,qBAAkB;AAAA,UAClB,SAAS,QAAQ;AAAA,UACjB,SAAS;AAAA;AAAA,QAHJ;AAAA,MAIP;AAAA,IAEJ,WAAW,QAAQ,QAAQ,aAAa;AACtC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,qBAAkB;AAAA,UAClB,SAAS,QAAQ;AAAA,UACjB,SAAS;AAAA,UACT,WAAW,cAAc,oBAAoB,CAAC,QAAQ;AAAA,UACtD,cAAc,cAAc,oBAAoB,CAAC,CAAC,QAAQ;AAAA,UAC1D;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QAVK;AAAA,MAWP;AAAA,IAEJ;AAAA,EACF;AACF;","names":[]}

package/dist/components/chat/messages/RenderTextMessage.mjs

@@ -1,6 +1,6 @@
 import {
   RenderTextMessage
-} from "../../../chunk-OFYI4UU4.mjs";
+} from "../../../chunk-7RIBDD4K.mjs";
 import "../../../chunk-MRXNTQOX.mjs";
 export {
   RenderTextMessage

package/dist/components/chat/props.d.ts

@@ -27,6 +27,22 @@ interface MessagesProps {
     RenderActionExecutionMessage: React.ComponentType<RenderMessageProps>;
     RenderAgentStateMessage: React.ComponentType<RenderMessageProps>;
     RenderResultMessage: React.ComponentType<RenderMessageProps>;
+    /**
+     * Callback function to regenerate the assistant's response
+     */
+    onRegenerate?: () => void;
+    /**
+     * Callback function when the message is copied
+     */
+    onCopy?: (message: string) => void;
+    /**
+     * Callback function for thumbs up feedback
+     */
+    onThumbsUp?: (message: string) => void;
+    /**
+     * Callback function for thumbs down feedback
+     */
+    onThumbsDown?: (message: string) => void;
 }
 interface Renderer {
     content: string;
@@ -40,6 +56,10 @@ interface AssistantMessageProps {
      * The message content from the assistant
      */
     message?: string;
+    /**
+     * Indicates if this is the last message
+     */
+    isCurrentMessage?: boolean;
     /**
      * The raw data from the assistant's response
      */
@@ -58,6 +78,22 @@ interface AssistantMessageProps {
      * Whether a response is generating, this is when the LLM is actively generating and streaming content.
      */
     isGenerating: boolean;
+    /**
+     * Callback function to regenerate the assistant's response
+     */
+    onRegenerate?: () => void;
+    /**
+     * Callback function when the message is copied
+     */
+    onCopy?: (message: string) => void;
+    /**
+     * Callback function for thumbs up feedback
+     */
+    onThumbsUp?: (message: string) => void;
+    /**
+     * Callback function for thumbs down feedback
+     */
+    onThumbsDown?: (message: string) => void;
 }
 interface RenderMessageProps {
     message: Message;
@@ -67,11 +103,28 @@ interface RenderMessageProps {
     actionResult?: string;
     AssistantMessage: React.ComponentType<AssistantMessageProps>;
     UserMessage: React.ComponentType<UserMessageProps>;
+    /**
+     * Callback function to regenerate the assistant's response
+     */
+    onRegenerate?: () => void;
+    /**
+     * Callback function when the message is copied
+     */
+    onCopy?: (message: string) => void;
+    /**
+     * Callback function for thumbs up feedback
+     */
+    onThumbsUp?: (message: string) => void;
+    /**
+     * Callback function for thumbs down feedback
+     */
+    onThumbsDown?: (message: string) => void;
 }
 interface InputProps {
     inProgress: boolean;
     onSend: (text: string) => Promise<Message>;
     isVisible?: boolean;
+    onStop?: () => void;
 }
 interface ResponseButtonProps {
     onClick: () => void;

package/dist/components/chat/props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/chat/props.ts"],"sourcesContent":["import { Message } from \"@copilotkit/runtime-client-gql\";\n\nexport interface ButtonProps {}\n\nexport interface WindowProps {\n  clickOutsideToClose: boolean;\n  hitEscapeToClose: boolean;\n  shortcut: string;\n  children?: React.ReactNode;\n}\n\nexport interface HeaderProps {}\n\nexport interface SuggestionsProps {\n  title: string;\n  message: string;\n  partial?: boolean;\n  className?: string;\n  onClick: (message: string) => void;\n}\n\nexport interface MessagesProps {\n  messages: Message[];\n  inProgress: boolean;\n  children?: React.ReactNode;\n  AssistantMessage: React.ComponentType<AssistantMessageProps>;\n  UserMessage: React.ComponentType<UserMessageProps>;\n  RenderTextMessage: React.ComponentType<RenderMessageProps>;\n  RenderActionExecutionMessage: React.ComponentType<RenderMessageProps>;\n  RenderAgentStateMessage: React.ComponentType<RenderMessageProps>;\n  RenderResultMessage: React.ComponentType<RenderMessageProps>;\n}\n\nexport interface Renderer {\n  content: string;\n}\n\nexport interface UserMessageProps {\n  message?: string;\n  rawData: any;\n}\n\nexport interface AssistantMessageProps {\n  /**\n   * The message content from the assistant\n   */\n\n  message?: string;\n\n  /**\n   * The raw data from the assistant's response\n   */\n  rawData: any;\n\n  /**\n   * A component that was decided to render by the LLM.\n   * When working with useCopilotActions and useCoAgentStateRender, this will be\n   * the render component that was specified.\n   */\n  subComponent?: React.JSX.Element;\n\n  /**\n   * Whether a response is loading, this is when the LLM is thinking of a response but hasn't finished yet.\n   */\n  isLoading: boolean;\n\n  /**\n   * Whether a response is generating, this is when the LLM is actively generating and streaming content.\n   */\n  isGenerating: boolean;\n}\n\nexport interface RenderMessageProps {\n  message: Message;\n  inProgress: boolean;\n  index: number;\n  isCurrentMessage: boolean;\n  actionResult?: string;\n  AssistantMessage: React.ComponentType<AssistantMessageProps>;\n  UserMessage: React.ComponentType<UserMessageProps>;\n}\n\nexport interface InputProps {\n  inProgress: boolean;\n  onSend: (text: string) => Promise<Message>;\n  isVisible?: boolean;\n}\n\nexport interface ResponseButtonProps {\n  onClick: () => void;\n  inProgress: boolean;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../../src/components/chat/props.ts"],"sourcesContent":["import { Message } from \"@copilotkit/runtime-client-gql\";\n\nexport interface ButtonProps {}\n\nexport interface WindowProps {\n  clickOutsideToClose: boolean;\n  hitEscapeToClose: boolean;\n  shortcut: string;\n  children?: React.ReactNode;\n}\n\nexport interface HeaderProps {}\n\nexport interface SuggestionsProps {\n  title: string;\n  message: string;\n  partial?: boolean;\n  className?: string;\n  onClick: (message: string) => void;\n}\n\nexport interface MessagesProps {\n  messages: Message[];\n  inProgress: boolean;\n  children?: React.ReactNode;\n  AssistantMessage: React.ComponentType<AssistantMessageProps>;\n  UserMessage: React.ComponentType<UserMessageProps>;\n  RenderTextMessage: React.ComponentType<RenderMessageProps>;\n  RenderActionExecutionMessage: React.ComponentType<RenderMessageProps>;\n  RenderAgentStateMessage: React.ComponentType<RenderMessageProps>;\n  RenderResultMessage: React.ComponentType<RenderMessageProps>;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: () => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs down feedback\n   */\n  onThumbsDown?: (message: string) => void;\n}\n\nexport interface Renderer {\n  content: string;\n}\n\nexport interface UserMessageProps {\n  message?: string;\n  rawData: any;\n}\n\nexport interface AssistantMessageProps {\n  /**\n   * The message content from the assistant\n   */\n\n  message?: string;\n\n  /**\n   * Indicates if this is the last message\n   */\n  isCurrentMessage?: boolean;\n\n  /**\n   * The raw data from the assistant's response\n   */\n  rawData: any;\n\n  /**\n   * A component that was decided to render by the LLM.\n   * When working with useCopilotActions and useCoAgentStateRender, this will be\n   * the render component that was specified.\n   */\n  subComponent?: React.JSX.Element;\n\n  /**\n   * Whether a response is loading, this is when the LLM is thinking of a response but hasn't finished yet.\n   */\n  isLoading: boolean;\n\n  /**\n   * Whether a response is generating, this is when the LLM is actively generating and streaming content.\n   */\n  isGenerating: boolean;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: () => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs down feedback\n   */\n  onThumbsDown?: (message: string) => void;\n}\n\nexport interface RenderMessageProps {\n  message: Message;\n  inProgress: boolean;\n  index: number;\n  isCurrentMessage: boolean;\n  actionResult?: string;\n  AssistantMessage: React.ComponentType<AssistantMessageProps>;\n  UserMessage: React.ComponentType<UserMessageProps>;\n\n  /**\n   * Callback function to regenerate the assistant's response\n   */\n  onRegenerate?: () => void;\n\n  /**\n   * Callback function when the message is copied\n   */\n  onCopy?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs up feedback\n   */\n  onThumbsUp?: (message: string) => void;\n\n  /**\n   * Callback function for thumbs down feedback\n   */\n  onThumbsDown?: (message: string) => void;\n}\n\nexport interface InputProps {\n  inProgress: boolean;\n  onSend: (text: string) => Promise<Message>;\n  isVisible?: boolean;\n  onStop?: () => void;\n}\n\nexport interface ResponseButtonProps {\n  onClick: () => void;\n  inProgress: boolean;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/components/crew/DefaultResponseRenderer.d.ts

@@ -0,0 +1,110 @@
+import React__default from 'react';
+import { ResponseRendererProps } from './types.js';
+
+/**
+ * <br/>
+ * A response renderer component for the CopilotKit framework. This component displays
+ * a response that may require user feedback, such as approving or rejecting a suggestion.
+ * It provides a flexible, customizable interface for rendering responses with user interaction.
+ *
+ * ## Install Dependencies
+ *
+ * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
+ *
+ * ```shell npm2yarn \"@copilotkit/react-ui"\
+ * npm install @copilotkit/react-core @copilotkit/react-ui
+ * ```
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { DefaultResponseRenderer } from "@copilotkit/react-ui";
+ * import "@copilotkit/react-ui/styles.css";
+ *
+ * // Basic usage
+ * <DefaultResponseRenderer
+ *   response={{
+ *     id: "response-1",
+ *     content: "I've analyzed your data and found these insights..."
+ *   }}
+ *   status="inProgress"
+ *   onRespond={(input) => console.log(`User responded: ${input}`)}
+ * />
+ * ```
+ *
+ * ## Customization
+ *
+ * You can customize the appearance and behavior of the component:
+ *
+ * ```tsx
+ * // Custom labels and styling
+ * <DefaultResponseRenderer
+ *   response={{
+ *     id: "task-123",
+ *     content: "Would you like to proceed with this recommendation?"
+ *   }}
+ *   status="inProgress"
+ *   onRespond={handleResponse}
+ *   labels={{
+ *     responseLabel: "AI Recommendation",
+ *     approveLabel: "Yes, proceed",
+ *     rejectLabel: "No, cancel",
+ *     approvedMessage: "Proceeding with recommendation",
+ *     rejectedMessage: "Recommendation cancelled"
+ *   }}
+ *   className="my-custom-response"
+ *   contentClassName="my-custom-content"
+ *   buttonClassName="my-custom-button"
+ * />
+ *
+ * // Custom components
+ * <DefaultResponseRenderer
+ *   response={{
+ *     id: "task-456",
+ *     content: "# Important Decision\nThis requires your approval"
+ *   }}
+ *   status="inProgress"
+ *   onRespond={handleResponse}
+ *   ContentRenderer={({ content, className }) => (
+ *     <MyMarkdownRenderer content={content} className={className} />
+ *   )}
+ *   FeedbackButton={({ label, onClick, className }) => (
+ *     <MyCustomButton label={label} onClick={onClick} className={className} />
+ *   )}
+ * />
+ * ```
+ *
+ * ### Look & Feel
+ *
+ * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
+ * ```tsx title="YourRootComponent.tsx"
+ * ...
+ * import "@copilotkit/react-ui/styles.css"; // [!code highlight]
+ *
+ * export function YourRootComponent() {
+ *   return (
+ *     <CopilotKit>
+ *       ...
+ *     </CopilotKit>
+ *   );
+ * }
+ * ```
+ * 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.
+ */
+
+/**
+ * Creates a cache for storing response feedback
+ */
+declare const createResponseCache: <T extends {
+    id: string;
+}>() => {
+    getResponse: (id: string) => T | undefined;
+    setResponse: (id: string, response: T) => Map<string, T>;
+};
+/**
+ * Default response renderer component that handles rendering responses
+ * and collecting user feedback
+ */
+declare const DefaultResponseRenderer: React__default.FC<ResponseRendererProps>;
+
+export { DefaultResponseRenderer, createResponseCache };

package/dist/components/crew/DefaultResponseRenderer.js

@@ -0,0 +1,175 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/crew/DefaultResponseRenderer.tsx
+var DefaultResponseRenderer_exports = {};
+__export(DefaultResponseRenderer_exports, {
+  DefaultResponseRenderer: () => DefaultResponseRenderer,
+  createResponseCache: () => createResponseCache
+});
+module.exports = __toCommonJS(DefaultResponseRenderer_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    className,
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "6 9 12 15 18 9" })
+  }
+);
+var DefaultCollapseIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    className,
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "18 15 12 9 6 15" })
+  }
+);
+var DefaultContentRenderer = ({ content, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: content });
+var DefaultFeedbackButton = ({ label, onClick, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick, className, children: label });
+var DefaultCompletedFeedback = ({ message, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.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] = (0, import_react.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentRenderer, { content: response.content, className: contentClassName }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: actionsClassName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "copilotkit-response-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => setIsExpanded(!isExpanded), className: "copilotkit-toggle-button", children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapseIcon, { className: "copilotkit-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExpandIcon, { className: "copilotkit-icon" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: mergedLabels.responseLabel })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "copilotkit-response-buttons", children: renderFeedback() })
+    ] })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DefaultResponseRenderer,
+  createResponseCache
+});
+//# sourceMappingURL=DefaultResponseRenderer.js.map

package/dist/components/crew/DefaultResponseRenderer.js.map

@@ -0,0 +1 @@
+{"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":[]}

package/dist/components/crew/DefaultResponseRenderer.mjs

@@ -0,0 +1,10 @@
+import {
+  DefaultResponseRenderer,
+  createResponseCache
+} from "../../chunk-EJG6RRSX.mjs";
+import "../../chunk-MRXNTQOX.mjs";
+export {
+  DefaultResponseRenderer,
+  createResponseCache
+};
+//# sourceMappingURL=DefaultResponseRenderer.mjs.map

package/dist/components/crew/DefaultResponseRenderer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/crew/DefaultStateRenderer.d.ts

@@ -0,0 +1,88 @@
+import React__default from 'react';
+import { StateRendererProps } from './types.js';
+
+/**
+ * <br/>
+ * A state renderer component for the CopilotKit framework. This component displays
+ * the internal state of an agent, such as the steps it has taken and the tasks it has performed.
+ * It provides a collapsible UI that shows the agent's thought process and actions.
+ *
+ * ## Install Dependencies
+ *
+ * This component is part of the [@copilotkit/react-ui](https://npmjs.com/package/@copilotkit/react-ui) package.
+ *
+ * ```shell npm2yarn \"@copilotkit/react-ui"\
+ * npm install @copilotkit/react-core @copilotkit/react-ui
+ * ```
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { DefaultStateRenderer } from "@copilotkit/react-ui";
+ * import "@copilotkit/react-ui/styles.css";
+ *
+ * // Basic usage
+ * <DefaultStateRenderer
+ *   state={agentState}
+ *   status="inProgress"
+ * />
+ * ```
+ *
+ * ## Customization
+ *
+ * You can customize the appearance and behavior of the component:
+ *
+ * ```tsx
+ * // Custom labels and styling
+ * <DefaultStateRenderer
+ *   state={agentState}
+ *   status="inProgress"
+ *   labels={{
+ *     inProgressLabel: "Thinking...",
+ *     completeLabel: "Finished processing",
+ *     emptyLabel: "Nothing to show"
+ *   }}
+ *   className="my-custom-state"
+ *   contentClassName="my-custom-content"
+ *   itemClassName="my-custom-item"
+ *   maxHeight="300px"
+ *   defaultCollapsed={false}
+ * />
+ *
+ * // Custom renderers
+ * <DefaultStateRenderer
+ *   state={agentState}
+ *   status="inProgress"
+ *   StateItemRenderer={({ item, isNewest, className }) => (
+ *     <MyCustomItemRenderer item={item} isNewest={isNewest} className={className} />
+ *   )}
+ *   SkeletonLoader={({ className }) => (
+ *     <MyCustomSkeletonLoader className={className} />
+ *   )}
+ * />
+ * ```
+ *
+ * ### Look & Feel
+ *
+ * By default, CopilotKit components do not have any styles. You can import CopilotKit's stylesheet at the root of your project:
+ * ```tsx title="YourRootComponent.tsx"
+ * ...
+ * import "@copilotkit/react-ui/styles.css"; // [!code highlight]
+ *
+ * export function YourRootComponent() {
+ *   return (
+ *     <CopilotKit>
+ *       ...
+ *     </CopilotKit>
+ *   );
+ * }
+ * ```
+ * 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.
+ */
+
+/**
+ * Default state renderer component
+ */
+declare const DefaultStateRenderer: React__default.FC<StateRendererProps>;
+
+export { DefaultStateRenderer };