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

package/src/components/crew/DefaultResponseRenderer.tsx

@@ -0,0 +1,298 @@
+/**
+ * <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.
+ */
+
+import React, { useState } from "react";
+import {
+  Response,
+  ResponseRendererProps,
+  ContentRendererProps,
+  FeedbackButtonProps,
+  CompletedFeedbackProps,
+  ResponseRendererIconProps,
+} from "./types";
+
+/**
+ * Creates a cache for storing response feedback
+ */
+const createResponseCache = <T extends { id: string }>() => {
+  const responseCache = new Map<string, T>();
+
+  return {
+    getResponse: (id: string) => responseCache.get(id),
+    setResponse: (id: string, response: T) => responseCache.set(id, response),
+  };
+};
+
+/**
+ * Default global response cache instance
+ */
+const useResponseCache = createResponseCache<Response & { __feedback__?: string }>();
+
+/**
+ * Default expand icon component
+ */
+const DefaultExpandIcon: React.FC<ResponseRendererIconProps> = ({ className }) => (
+  <svg
+    className={className}
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="6 9 12 15 18 9"></polyline>
+  </svg>
+);
+
+/**
+ * Default collapse icon component
+ */
+const DefaultCollapseIcon: React.FC<ResponseRendererIconProps> = ({ className }) => (
+  <svg
+    className={className}
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="18 15 12 9 6 15"></polyline>
+  </svg>
+);
+
+/**
+ * Default content renderer that simply displays text
+ */
+const DefaultContentRenderer: React.FC<ContentRendererProps> = ({ content, className }) => (
+  <div className={className}>{content}</div>
+);
+
+/**
+ * Default feedback button component
+ */
+const DefaultFeedbackButton: React.FC<FeedbackButtonProps> = ({ label, onClick, className }) => (
+  <button onClick={onClick} className={className}>
+    {label}
+  </button>
+);
+
+/**
+ * Default completed feedback component
+ */
+const DefaultCompletedFeedback: React.FC<CompletedFeedbackProps> = ({ message, className }) => (
+  <div className={className}>
+    <span>{message}</span>
+  </div>
+);
+
+/**
+ * Default response renderer component that handles rendering responses
+ * and collecting user feedback
+ */
+export const DefaultResponseRenderer: React.FC<ResponseRendererProps> = ({
+  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] = useState(true);
+
+  // Default label values
+  const defaultLabels = {
+    responseLabel: "Response",
+    approveLabel: "Approve",
+    rejectLabel: "Reject",
+    approvedMessage: "Approved",
+    rejectedMessage: "Rejected",
+    feedbackSubmittedMessage: "Feedback submitted",
+  };
+
+  // Merge provided labels with defaults
+  const mergedLabels = { ...defaultLabels, ...labels };
+
+  // Function to render feedback UI based on status
+  const renderFeedback = () => {
+    if (status === "complete") {
+      const cachedResponse = useResponseCache.getResponse(response.id);
+      return (
+        <CompletedFeedback
+          message={
+            cachedResponse?.__feedback__
+              ? cachedResponse.__feedback__ === mergedLabels.approvedMessage
+                ? mergedLabels.approvedMessage
+                : mergedLabels.rejectedMessage
+              : mergedLabels.feedbackSubmittedMessage
+          }
+          className={completedFeedbackClassName}
+        />
+      );
+    }
+
+    if (status === "inProgress" || status === "executing") {
+      return (
+        <>
+          <FeedbackButton
+            label={mergedLabels.approveLabel}
+            onClick={() => {
+              setIsExpanded(false);
+              onRespond?.(mergedLabels.approveLabel);
+              useResponseCache.setResponse(response.id, {
+                ...response,
+                __feedback__: mergedLabels.approvedMessage,
+              });
+            }}
+            className={buttonClassName}
+          />
+          <FeedbackButton
+            label={mergedLabels.rejectLabel}
+            onClick={() => {
+              setIsExpanded(false);
+              useResponseCache.setResponse(response.id, {
+                ...response,
+                __feedback__: mergedLabels.rejectedMessage,
+              });
+              onRespond?.(mergedLabels.rejectLabel);
+            }}
+            className={buttonClassName}
+          />
+        </>
+      );
+    }
+
+    return null;
+  };
+
+  // Decide which icon to display
+  const ExpandIcon = icons?.expand || DefaultExpandIcon;
+  const CollapseIcon = icons?.collapse || DefaultCollapseIcon;
+
+  return (
+    <div className={className}>
+      {/* Response content - conditionally expanded */}
+      {isExpanded && <ContentRenderer content={response.content} className={contentClassName} />}
+
+      <div className={actionsClassName}>
+        <div className="copilotkit-response-label">
+          <button onClick={() => setIsExpanded(!isExpanded)} className="copilotkit-toggle-button">
+            {isExpanded ? (
+              <CollapseIcon className="copilotkit-icon" />
+            ) : (
+              <ExpandIcon className="copilotkit-icon" />
+            )}
+          </button>
+          <span>{mergedLabels.responseLabel}</span>
+        </div>
+
+        <div className="copilotkit-response-buttons">{renderFeedback()}</div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Export the response cache for reuse
+ */
+export { createResponseCache };

package/src/components/crew/DefaultStateRenderer.tsx

@@ -0,0 +1,326 @@
+/**
+ * <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.
+ */
+
+import React, { useState, useRef, useEffect, useMemo } from "react";
+import {
+  AgentState,
+  StateRendererProps,
+  StateItemRendererProps,
+  SkeletonLoaderProps,
+  ToolStateItem,
+  TaskStateItem,
+  ResponseRendererIconProps,
+} from "./types";
+
+/**
+ * Default expand icon component
+ */
+const DefaultExpandIcon: React.FC<ResponseRendererIconProps> = ({ className }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="6 9 12 15 18 9"></polyline>
+  </svg>
+);
+
+/**
+ * Default collapse icon component
+ */
+const DefaultCollapseIcon: React.FC<ResponseRendererIconProps> = ({ className }) => (
+  <svg
+    className={className}
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="18 15 12 9 6 15"></polyline>
+  </svg>
+);
+
+/**
+ * Default loader icon component
+ */
+const DefaultLoaderIcon: React.FC<ResponseRendererIconProps> = ({ className }) => (
+  <svg
+    className={`${className} copilotkit-spinner`}
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
+  </svg>
+);
+
+/**
+ * Helper to safely format content
+ */
+const formatContent = (result: unknown): string => {
+  if (result === null || result === undefined) return "";
+  return typeof result === "string" ? result : JSON.stringify(result, null, 2);
+};
+
+/**
+ * Default skeleton loader component
+ */
+const DefaultSkeletonLoader: React.FC<SkeletonLoaderProps> = ({ className }) => (
+  <div className={className || "copilotkit-skeleton"}>
+    <div className="copilotkit-skeleton-header">
+      <div className="copilotkit-skeleton-title"></div>
+      <div className="copilotkit-skeleton-subtitle"></div>
+    </div>
+    <div className="copilotkit-skeleton-content"></div>
+  </div>
+);
+
+/**
+ * Default state item renderer component
+ */
+const DefaultStateItemRenderer: React.FC<StateItemRendererProps> = ({
+  item,
+  isNewest,
+  className,
+}) => (
+  <div
+    className={`${className || "copilotkit-state-item"} ${isNewest ? "copilotkit-state-item-newest" : ""}`}
+  >
+    <div className="copilotkit-state-item-header">{"tool" in item ? item.tool : item.name}</div>
+
+    {"thought" in item && item.thought && (
+      <div className="copilotkit-state-item-thought">{item.thought}</div>
+    )}
+
+    {"result" in item && item.result !== undefined && item.result !== null && (
+      <div className="copilotkit-state-item-result">{formatContent(item.result)}</div>
+    )}
+
+    {"description" in item && item.description && (
+      <div className="copilotkit-state-item-description">{item.description}</div>
+    )}
+  </div>
+);
+
+/**
+ * Default state renderer component
+ */
+export const DefaultStateRenderer: React.FC<StateRendererProps> = ({
+  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] = useState(defaultCollapsed);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const prevItemsLengthRef = useRef<number>(0);
+  const [newestItemId, setNewestItemId] = useState<string | null>(null);
+
+  // Default label values
+  const defaultLabels = {
+    inProgressLabel: "Analyzing",
+    completeLabel: "Analyzed",
+    emptyLabel: "No activity",
+  };
+
+  // Merge provided labels with defaults
+  const mergedLabels = { ...defaultLabels, ...labels };
+
+  // Decide which icon to display
+  const ExpandIcon = icons?.expand || DefaultExpandIcon;
+  const CollapseIcon = icons?.collapse || DefaultCollapseIcon;
+
+  // Safely compute derived values using useMemo
+  const items = useMemo(() => {
+    return state
+      ? [...(state.steps?.filter((s) => s.tool) || []), ...(state.tasks || [])].sort(
+          (a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime(),
+        )
+      : [];
+  }, [state]);
+
+  // Determine if we should show skeleton UI (thinking but no items yet)
+  const isThinking = status === "inProgress" && items.length === 0;
+
+  // Track newest item and auto-scroll
+  useEffect(() => {
+    if (!state) return; // Skip effect if no state
+
+    // If new items were added
+    if (items.length > prevItemsLengthRef.current) {
+      // Get the newest item
+      if (items.length > 0) {
+        const newest = items[items.length - 1];
+        setNewestItemId(newest.id);
+
+        // Clear the animation after 1.5 seconds
+        setTimeout(() => {
+          setNewestItemId(null);
+        }, 1500);
+      }
+
+      // Auto-scroll to bottom
+      if (contentRef.current && !isCollapsed) {
+        contentRef.current.scrollTop = contentRef.current.scrollHeight;
+      }
+    }
+
+    prevItemsLengthRef.current = items.length;
+  }, [items, isCollapsed, state]);
+
+  // Early return for loading state with no state
+  if (!state) {
+    return (
+      <div className={className}>
+        <DefaultLoaderIcon className="copilotkit-loader" />
+      </div>
+    );
+  }
+
+  // Don't render anything if collapsed and empty and not thinking
+  if (isCollapsed && items.length === 0 && !isThinking) return null;
+
+  return (
+    <div className={className}>
+      {/* Header with toggle */}
+      <div className="copilotkit-state-header" onClick={() => setIsCollapsed(!isCollapsed)}>
+        {isCollapsed ? (
+          <ExpandIcon className="copilotkit-icon" />
+        ) : (
+          <CollapseIcon className="copilotkit-icon" />
+        )}
+        <div className="copilotkit-state-label">
+          {status === "inProgress" ? (
+            <span className="copilotkit-state-label-loading">{mergedLabels.inProgressLabel}</span>
+          ) : (
+            mergedLabels.completeLabel
+          )}
+        </div>
+      </div>
+
+      {/* Content area */}
+      {!isCollapsed && (
+        <div ref={contentRef} className={contentClassName} style={{ maxHeight }}>
+          {/* Render items if available */}
+          {items.length > 0 ? (
+            items.map((item) => (
+              <StateItemRenderer
+                key={item.id}
+                item={item}
+                isNewest={item.id === newestItemId}
+                className={itemClassName}
+              />
+            ))
+          ) : isThinking ? (
+            // Show skeleton loader while thinking
+            <>
+              <SkeletonLoader />
+              <SkeletonLoader />
+            </>
+          ) : (
+            // Empty state
+            <div className="copilotkit-state-empty">{mergedLabels.emptyLabel}</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/crew/index.ts

@@ -0,0 +1,3 @@
+export * from "./DefaultResponseRenderer";
+export * from "./DefaultStateRenderer";
+export * from "./types";