@copilotkit/react-ui 1.7.2-next.1 → 1.7.2-next.2

package/dist/components/chat/index.mjs

@@ -1,18 +1,22 @@
 import "../../chunk-SQMEPWVT.mjs";
 import {
   CopilotSidebar
-} from "../../chunk-3PJA5MFR.mjs";
+} from "../../chunk-DLG7BZTA.mjs";
 import "../../chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "../../chunk-ADTTDBLB.mjs";
-import "../../chunk-AZU4QOV5.mjs";
+} from "../../chunk-R2O33F44.mjs";
+import "../../chunk-AELKLZSG.mjs";
 import "../../chunk-YAGE7RCE.mjs";
 import "../../chunk-VEC45H6Q.mjs";
 import "../../chunk-RQNJNK2W.mjs";
 import {
   CopilotChat
-} from "../../chunk-2C3ANQCY.mjs";
+} from "../../chunk-QXQDIFOC.mjs";
+import {
+  AssistantMessage
+} from "../../chunk-3VNMQWGT.mjs";
+import "../../chunk-XB6QCUPB.mjs";
 import "../../chunk-UWWMAJ7R.mjs";
 import "../../chunk-WEYDZBT7.mjs";
 import "../../chunk-OFYI4UU4.mjs";
@@ -20,17 +24,13 @@ import {
   UserMessage
 } from "../../chunk-HEIDCT7I.mjs";
 import "../../chunk-V7W6IM2V.mjs";
-import {
-  AssistantMessage
-} from "../../chunk-3VNMQWGT.mjs";
-import "../../chunk-XB6QCUPB.mjs";
-import "../../chunk-WGAZXTUA.mjs";
-import "../../chunk-22K5DDPF.mjs";
-import "../../chunk-6TCUJ3B7.mjs";
+import "../../chunk-ZIF5JJCH.mjs";
 import "../../chunk-KXE2JCUH.mjs";
 import "../../chunk-TI7SY2RI.mjs";
-import "../../chunk-BH6PCAAL.mjs";
 import "../../chunk-OTPAZXVR.mjs";
+import "../../chunk-6TCUJ3B7.mjs";
+import "../../chunk-BH6PCAAL.mjs";
+import "../../chunk-WGAZXTUA.mjs";
 import "../../chunk-QXTRFMPM.mjs";
 import "../../chunk-YQFVRDNC.mjs";
 import {

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

package/dist/components/crew/DefaultStateRenderer.js

@@ -0,0 +1,198 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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 __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/DefaultStateRenderer.tsx
+var DefaultStateRenderer_exports = {};
+__export(DefaultStateRenderer_exports, {
+  DefaultStateRenderer: () => DefaultStateRenderer
+});
+module.exports = __toCommonJS(DefaultStateRenderer_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DefaultExpandIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    className,
+    width: "16",
+    height: "16",
+    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: "16",
+    height: "16",
+    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 DefaultLoaderIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    className: `${className} copilotkit-spinner`,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+  }
+);
+var formatContent = (result) => {
+  if (result === null || result === void 0)
+    return "";
+  return typeof result === "string" ? result : JSON.stringify(result, null, 2);
+};
+var DefaultSkeletonLoader = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: className || "copilotkit-skeleton", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "copilotkit-skeleton-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "copilotkit-skeleton-title" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "copilotkit-skeleton-subtitle" })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "copilotkit-skeleton-content" })
+] });
+var DefaultStateItemRenderer = ({
+  item,
+  isNewest,
+  className
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "div",
+  {
+    className: `${className || "copilotkit-state-item"} ${isNewest ? "copilotkit-state-item-newest" : ""}`,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "copilotkit-state-item-header", children: "tool" in item ? item.tool : item.name }),
+      "thought" in item && item.thought && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "copilotkit-state-item-thought", children: item.thought }),
+      "result" in item && item.result !== void 0 && item.result !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "copilotkit-state-item-result", children: formatContent(item.result) }),
+      "description" in item && item.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "copilotkit-state-item-description", children: item.description })
+    ]
+  }
+);
+var DefaultStateRenderer = ({
+  state,
+  status,
+  StateItemRenderer = DefaultStateItemRenderer,
+  SkeletonLoader = DefaultSkeletonLoader,
+  labels,
+  icons,
+  className = "copilotkit-state",
+  contentClassName = "copilotkit-state-content",
+  itemClassName = "copilotkit-state-item",
+  maxHeight = "250px",
+  defaultCollapsed = true
+}) => {
+  const [isCollapsed, setIsCollapsed] = (0, import_react.useState)(defaultCollapsed);
+  const contentRef = (0, import_react.useRef)(null);
+  const prevItemsLengthRef = (0, import_react.useRef)(0);
+  const [newestItemId, setNewestItemId] = (0, import_react.useState)(null);
+  const defaultLabels = {
+    inProgressLabel: "Analyzing",
+    completeLabel: "Analyzed",
+    emptyLabel: "No activity"
+  };
+  const mergedLabels = __spreadValues(__spreadValues({}, defaultLabels), labels);
+  const ExpandIcon = (icons == null ? void 0 : icons.expand) || DefaultExpandIcon;
+  const CollapseIcon = (icons == null ? void 0 : icons.collapse) || DefaultCollapseIcon;
+  const items = (0, import_react.useMemo)(() => {
+    var _a;
+    return state ? [...((_a = state.steps) == null ? void 0 : _a.filter((s) => s.tool)) || [], ...state.tasks || []].sort(
+      (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+    ) : [];
+  }, [state]);
+  const isThinking = status === "inProgress" && items.length === 0;
+  (0, import_react.useEffect)(() => {
+    if (!state)
+      return;
+    if (items.length > prevItemsLengthRef.current) {
+      if (items.length > 0) {
+        const newest = items[items.length - 1];
+        setNewestItemId(newest.id);
+        setTimeout(() => {
+          setNewestItemId(null);
+        }, 1500);
+      }
+      if (contentRef.current && !isCollapsed) {
+        contentRef.current.scrollTop = contentRef.current.scrollHeight;
+      }
+    }
+    prevItemsLengthRef.current = items.length;
+  }, [items, isCollapsed, state]);
+  if (!state) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultLoaderIcon, { className: "copilotkit-loader" }) });
+  }
+  if (isCollapsed && items.length === 0 && !isThinking)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "copilotkit-state-header", onClick: () => setIsCollapsed(!isCollapsed), children: [
+      isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExpandIcon, { className: "copilotkit-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapseIcon, { className: "copilotkit-icon" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "copilotkit-state-label", children: status === "inProgress" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "copilotkit-state-label-loading", children: mergedLabels.inProgressLabel }) : mergedLabels.completeLabel })
+    ] }),
+    !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: contentRef, className: contentClassName, style: { maxHeight }, children: items.length > 0 ? items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StateItemRenderer,
+      {
+        item,
+        isNewest: item.id === newestItemId,
+        className: itemClassName
+      },
+      item.id
+    )) : isThinking ? (
+      // Show skeleton loader while thinking
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonLoader, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SkeletonLoader, {})
+      ] })
+    ) : (
+      // Empty state
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "copilotkit-state-empty", children: mergedLabels.emptyLabel })
+    ) })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DefaultStateRenderer
+});
+//# sourceMappingURL=DefaultStateRenderer.js.map