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

package/dist/components/chat/index.mjs

@@ -1,37 +1,37 @@
 import "../../chunk-SQMEPWVT.mjs";
 import {
   CopilotSidebar
-} from "../../chunk-LKCAF2HG.mjs";
+} from "../../chunk-FFNESJSG.mjs";
 import "../../chunk-WB3YULQ4.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 "../../chunk-QGK5GOSC.mjs";
+import "../../chunk-GBXUOB6L.mjs";
+import "../../chunk-6TCUJ3B7.mjs";
 import "../../chunk-KXE2JCUH.mjs";
 import "../../chunk-YC4NBUGE.mjs";
-import "../../chunk-OTPAZXVR.mjs";
-import "../../chunk-6TCUJ3B7.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

package/dist/components/dev-console/console.mjs

@@ -2,12 +2,12 @@
 import {
   CopilotDevConsole,
   DebugMenuButton
-} from "../../chunk-QGK5GOSC.mjs";
+} from "../../chunk-GBXUOB6L.mjs";
+import "../../chunk-6TCUJ3B7.mjs";
 import "../../chunk-KXE2JCUH.mjs";
 import "../../chunk-YC4NBUGE.mjs";
-import "../../chunk-OTPAZXVR.mjs";
-import "../../chunk-6TCUJ3B7.mjs";
 import "../../chunk-BH6PCAAL.mjs";
+import "../../chunk-OTPAZXVR.mjs";
 import "../../chunk-ORSMX3SE.mjs";
 import "../../chunk-MRXNTQOX.mjs";
 export {

package/dist/components/dev-console/index.mjs

@@ -1,14 +1,14 @@
 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-ORSMX3SE.mjs";
 import "../../chunk-MRXNTQOX.mjs";
 export {

package/dist/components/index.d.ts

@@ -8,9 +8,6 @@ export { UserMessage } from './chat/messages/UserMessage.js';
 export { useChatContext } from './chat/ChatContext.js';
 export { shouldShowDevConsole } from './dev-console/utils.js';
 export { CopilotDevConsole } from './dev-console/console.js';
-export { DefaultResponseRenderer, createResponseCache } from './crew/DefaultResponseRenderer.js';
-export { DefaultStateRenderer } from './crew/DefaultStateRenderer.js';
-export { AgentState, CompletedFeedbackProps, ContentRendererProps, FeedbackButtonProps, Response, ResponseCache, ResponseRendererIconProps, ResponseRendererIcons, ResponseRendererLabels, ResponseRendererProps, ResponseStatus, SkeletonLoaderProps, StateItem, StateItemRendererProps, StateRendererProps, TaskStateItem, ToolStateItem } from './crew/types.js';
 import '@copilotkit/runtime-client-gql';
 import 'react/jsx-runtime';
 import './chat/Modal.js';

package/dist/components/index.js

@@ -84,11 +84,8 @@ __export(components_exports, {
   CopilotDevConsole: () => CopilotDevConsole,
   CopilotPopup: () => CopilotPopup,
   CopilotSidebar: () => CopilotSidebar,
-  DefaultResponseRenderer: () => DefaultResponseRenderer,
-  DefaultStateRenderer: () => DefaultStateRenderer,
   Markdown: () => Markdown,
   UserMessage: () => UserMessage,
-  createResponseCache: () => createResponseCache,
   shouldShowDevConsole: () => shouldShowDevConsole,
   useChatContext: () => useChatContext
 });
@@ -1421,7 +1418,7 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
         "button",
         {
           onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
-          className: pushToTalkState === "recording" ? "copilotKitPushToTalkRecording" : "",
+          className: pushToTalkState === "recording" ? "copilotKitInputControlButton copilotKitPushToTalkRecording" : "copilotKitInputControlButton",
           children: context.icons.pushToTalkIcon
         }
       ),
@@ -1432,6 +1429,7 @@ var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
           onClick: isInProgress ? onStop : send,
           "data-copilotkit-in-progress": inProgress,
           "data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
+          className: "copilotKitInputControlButton",
           children: buttonIcon
         }
       )
@@ -2755,290 +2753,6 @@ 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/components/crew/DefaultResponseRenderer.tsx
-var import_react16 = 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_react16.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_react17 = 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_react17.useState)(defaultCollapsed);
-  const contentRef = (0, import_react17.useRef)(null);
-  const prevItemsLengthRef = (0, import_react17.useRef)(0);
-  const [newestItemId, setNewestItemId] = (0, import_react17.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_react17.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_react17.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 })
-    ) })
-  ] });
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AssistantMessage,
@@ -3046,11 +2760,8 @@ var DefaultStateRenderer = ({
   CopilotDevConsole,
   CopilotPopup,
   CopilotSidebar,
-  DefaultResponseRenderer,
-  DefaultStateRenderer,
   Markdown,
   UserMessage,
-  createResponseCache,
   shouldShowDevConsole,
   useChatContext
 });