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

package/dist/index.js

@@ -85,8 +85,11 @@ __export(src_exports, {
   CopilotDevConsole: () => CopilotDevConsole,
   CopilotPopup: () => CopilotPopup,
   CopilotSidebar: () => CopilotSidebar,
+  DefaultResponseRenderer: () => DefaultResponseRenderer,
+  DefaultStateRenderer: () => DefaultStateRenderer,
   Markdown: () => Markdown,
   UserMessage: () => UserMessage,
+  createResponseCache: () => createResponseCache,
   shouldShowDevConsole: () => shouldShowDevConsole,
   useChatContext: () => useChatContext,
   useCopilotChatSuggestions: () => useCopilotChatSuggestions
@@ -2796,8 +2799,292 @@ function CopilotSidebar(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `copilotKitSidebarContentWrapper ${expandedClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CopilotModal, __spreadProps(__spreadValues(__spreadValues({}, props), { onSetOpen }), { children: props.children })) });
 }
 
-// src/hooks/use-copilot-chat-suggestions.tsx
+// src/components/crew/DefaultResponseRenderer.tsx
 var import_react15 = require("react");
+var import_jsx_runtime27 = 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_runtime27.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_runtime27.jsx)("polyline", { points: "6 9 12 15 18 9" })
+  }
+);
+var DefaultCollapseIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsx)("polyline", { points: "18 15 12 9 6 15" })
+  }
+);
+var DefaultContentRenderer = ({ content, className }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className, children: content });
+var DefaultFeedbackButton = ({ label, onClick, className }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { onClick, className, children: label });
+var DefaultCompletedFeedback = ({ message, className }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime27.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_react15.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_runtime27.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_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.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_runtime27.jsxs)("div", { className, children: [
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ContentRenderer, { content: response.content, className: contentClassName }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: actionsClassName, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "copilotkit-response-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", { onClick: () => setIsExpanded(!isExpanded), className: "copilotkit-toggle-button", children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CollapseIcon, { className: "copilotkit-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ExpandIcon, { className: "copilotkit-icon" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: mergedLabels.responseLabel })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "copilotkit-response-buttons", children: renderFeedback() })
+    ] })
+  ] });
+};
+
+// src/components/crew/DefaultStateRenderer.tsx
+var import_react16 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var DefaultExpandIcon2 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)("polyline", { points: "6 9 12 15 18 9" })
+  }
+);
+var DefaultCollapseIcon2 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)("polyline", { points: "18 15 12 9 6 15" })
+  }
+);
+var DefaultLoaderIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.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_runtime28.jsxs)("div", { className: className || "copilotkit-skeleton", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "copilotkit-skeleton-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-skeleton-title" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-skeleton-subtitle" })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-skeleton-content" })
+] });
+var DefaultStateItemRenderer = ({
+  item,
+  isNewest,
+  className
+}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  "div",
+  {
+    className: `${className || "copilotkit-state-item"} ${isNewest ? "copilotkit-state-item-newest" : ""}`,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-state-item-header", children: "tool" in item ? item.tool : item.name }),
+      "thought" in item && item.thought && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-state-item-thought", children: item.thought }),
+      "result" in item && item.result !== void 0 && item.result !== null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-state-item-result", children: formatContent(item.result) }),
+      "description" in item && item.description && /* @__PURE__ */ (0, import_jsx_runtime28.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_react16.useState)(defaultCollapsed);
+  const contentRef = (0, import_react16.useRef)(null);
+  const prevItemsLengthRef = (0, import_react16.useRef)(0);
+  const [newestItemId, setNewestItemId] = (0, import_react16.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) || DefaultExpandIcon2;
+  const CollapseIcon = (icons == null ? void 0 : icons.collapse) || DefaultCollapseIcon2;
+  const items = (0, import_react16.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_react16.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_runtime28.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DefaultLoaderIcon, { className: "copilotkit-loader" }) });
+  }
+  if (isCollapsed && items.length === 0 && !isThinking)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "copilotkit-state-header", onClick: () => setIsCollapsed(!isCollapsed), children: [
+      isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ExpandIcon, { className: "copilotkit-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CollapseIcon, { className: "copilotkit-icon" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-state-label", children: status === "inProgress" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "copilotkit-state-label-loading", children: mergedLabels.inProgressLabel }) : mergedLabels.completeLabel })
+    ] }),
+    !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: contentRef, className: contentClassName, style: { maxHeight }, children: items.length > 0 ? items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      StateItemRenderer,
+      {
+        item,
+        isNewest: item.id === newestItemId,
+        className: itemClassName
+      },
+      item.id
+    )) : isThinking ? (
+      // Show skeleton loader while thinking
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonLoader, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonLoader, {})
+      ] })
+    ) : (
+      // Empty state
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "copilotkit-state-empty", children: mergedLabels.emptyLabel })
+    ) })
+  ] });
+};
+
+// src/hooks/use-copilot-chat-suggestions.tsx
+var import_react17 = require("react");
 var import_react_core11 = require("@copilotkit/react-core");
 var import_shared4 = require("@copilotkit/shared");
 function useCopilotChatSuggestions({
@@ -2808,7 +3095,7 @@ function useCopilotChatSuggestions({
   maxSuggestions = 3
 }, dependencies = []) {
   const context = (0, import_react_core11.useCopilotContext)();
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (available === "disabled")
       return;
     const id = (0, import_shared4.randomId)();
@@ -2830,8 +3117,11 @@ function useCopilotChatSuggestions({
   CopilotDevConsole,
   CopilotPopup,
   CopilotSidebar,
+  DefaultResponseRenderer,
+  DefaultStateRenderer,
   Markdown,
   UserMessage,
+  createResponseCache,
   shouldShowDevConsole,
   useChatContext,
   useCopilotChatSuggestions