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

package/dist/index.js

@@ -85,11 +85,8 @@ __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
@@ -1423,7 +1420,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
         }
       ),
@@ -1434,6 +1431,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
         }
       )
@@ -2758,292 +2756,8 @@ 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 })
-    ) })
-  ] });
-};
-
 // src/hooks/use-copilot-chat-suggestions.tsx
-var import_react18 = require("react");
+var import_react16 = require("react");
 var import_react_core11 = require("@copilotkit/react-core");
 var import_shared4 = require("@copilotkit/shared");
 function useCopilotChatSuggestions({
@@ -3054,7 +2768,7 @@ function useCopilotChatSuggestions({
   maxSuggestions = 3
 }, dependencies = []) {
   const context = (0, import_react_core11.useCopilotContext)();
-  (0, import_react18.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (available === "disabled")
       return;
     const id = (0, import_shared4.randomId)();
@@ -3076,11 +2790,8 @@ function useCopilotChatSuggestions({
   CopilotDevConsole,
   CopilotPopup,
   CopilotSidebar,
-  DefaultResponseRenderer,
-  DefaultStateRenderer,
   Markdown,
   UserMessage,
-  createResponseCache,
   shouldShowDevConsole,
   useChatContext,
   useCopilotChatSuggestions