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

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

package/src/components/crew/types.ts

@@ -0,0 +1,398 @@
+import { ReactNode } from "react";
+
+/**
+ * Status of a response or action that requires user input
+ */
+export type ResponseStatus = "inProgress" | "complete" | "executing";
+
+/**
+ * Response data structure for the ResponseRenderer
+ */
+export interface Response {
+  /**
+   * Unique identifier for the response
+   */
+  id: string;
+
+  /**
+   * The content of the response to display
+   */
+  content: string;
+
+  /**
+   * Optional metadata for the response
+   */
+  metadata?: Record<string, any>;
+}
+
+/**
+ * Optional cache for storing user feedback
+ */
+export interface ResponseCache<T extends { id: string }> {
+  /**
+   * Get feedback for a specific ID
+   */
+  getResponse: (id: string) => T | undefined;
+
+  /**
+   * Set feedback for a specific ID
+   */
+  setResponse: (id: string, response: T) => void;
+}
+
+/**
+ * Props for custom icon components
+ */
+export interface ResponseRendererIconProps {
+  className?: string;
+}
+
+/**
+ * Icons for the ResponseRenderer component
+ */
+export interface ResponseRendererIcons {
+  /**
+   * Icon for expanding content
+   */
+  expand?: React.ComponentType<ResponseRendererIconProps>;
+
+  /**
+   * Icon for collapsing content
+   */
+  collapse?: React.ComponentType<ResponseRendererIconProps>;
+}
+
+/**
+ * Labels for the ResponseRenderer component
+ */
+export interface ResponseRendererLabels {
+  /**
+   * Label for the response section
+   */
+  responseLabel?: string;
+
+  /**
+   * Label for the approve button
+   */
+  approveLabel?: string;
+
+  /**
+   * Label for the reject button
+   */
+  rejectLabel?: string;
+
+  /**
+   * Message shown when approved
+   */
+  approvedMessage?: string;
+
+  /**
+   * Message shown when rejected
+   */
+  rejectedMessage?: string;
+
+  /**
+   * Message shown when feedback is submitted
+   */
+  feedbackSubmittedMessage?: string;
+}
+
+/**
+ * Props for the content renderer component
+ */
+export interface ContentRendererProps {
+  /**
+   * Content to render
+   */
+  content: string;
+
+  /**
+   * CSS class name for styling
+   */
+  className?: string;
+}
+
+/**
+ * Props for the feedback button component
+ */
+export interface FeedbackButtonProps {
+  /**
+   * The text to display on the button
+   */
+  label: string;
+
+  /**
+   * Function to call when the button is clicked
+   */
+  onClick: () => void;
+
+  /**
+   * CSS class name for styling
+   */
+  className?: string;
+}
+
+/**
+ * Props for the completed feedback display component
+ */
+export interface CompletedFeedbackProps {
+  /**
+   * The message to display
+   */
+  message: string;
+
+  /**
+   * CSS class name for styling
+   */
+  className?: string;
+}
+
+/**
+ * Props for the ResponseRenderer component
+ */
+export interface ResponseRendererProps {
+  /**
+   * The response data to render
+   */
+  response: Response;
+
+  /**
+   * The current status of the response
+   */
+  status: ResponseStatus;
+
+  /**
+   * Function to call when a response is given
+   */
+  onRespond?: (input: string) => void;
+
+  /**
+   * Custom icons for the component
+   */
+  icons?: ResponseRendererIcons;
+
+  /**
+   * Custom labels for the component
+   */
+  labels?: ResponseRendererLabels;
+
+  /**
+   * Custom component for rendering content
+   */
+  ContentRenderer?: React.ComponentType<ContentRendererProps>;
+
+  /**
+   * Custom component for rendering feedback buttons
+   */
+  FeedbackButton?: React.ComponentType<FeedbackButtonProps>;
+
+  /**
+   * Custom component for rendering completed feedback
+   */
+  CompletedFeedback?: React.ComponentType<CompletedFeedbackProps>;
+
+  /**
+   * CSS class for the root element
+   */
+  className?: string;
+
+  /**
+   * CSS class for the content element
+   */
+  contentClassName?: string;
+
+  /**
+   * CSS class for the actions container
+   */
+  actionsClassName?: string;
+
+  /**
+   * CSS class for feedback buttons
+   */
+  buttonClassName?: string;
+
+  /**
+   * CSS class for completed feedback
+   */
+  completedFeedbackClassName?: string;
+
+  /**
+   * Children nodes
+   */
+  children?: ReactNode;
+}
+
+/**
+ * Base state item interface for agent state items
+ */
+export interface StateItem {
+  /**
+   * Unique identifier for the item
+   */
+  id: string;
+
+  /**
+   * Timestamp when the item was created
+   */
+  timestamp: string;
+}
+
+/**
+ * Tool execution state item
+ */
+export interface ToolStateItem extends StateItem {
+  /**
+   * Name of the tool that was executed
+   */
+  tool: string;
+
+  /**
+   * Optional thought process for the tool execution
+   */
+  thought?: string;
+
+  /**
+   * Result of the tool execution
+   */
+  result?: any;
+}
+
+/**
+ * Task state item
+ */
+export interface TaskStateItem extends StateItem {
+  /**
+   * Name of the task
+   */
+  name: string;
+
+  /**
+   * Description of the task
+   */
+  description?: string;
+}
+
+/**
+ * AgentState containing information about steps and tasks
+ */
+export interface AgentState {
+  /**
+   * Array of tool execution steps
+   */
+  steps?: ToolStateItem[];
+
+  /**
+   * Array of tasks
+   */
+  tasks?: TaskStateItem[];
+}
+
+/**
+ * Props for the item renderer component
+ */
+export interface StateItemRendererProps {
+  /**
+   * The item to render
+   */
+  item: ToolStateItem | TaskStateItem;
+
+  /**
+   * Whether the item is the newest
+   */
+  isNewest: boolean;
+
+  /**
+   * CSS class for the item container
+   */
+  className?: string;
+}
+
+/**
+ * Props for the skeleton loader component
+ */
+export interface SkeletonLoaderProps {
+  /**
+   * CSS class for the skeleton
+   */
+  className?: string;
+}
+
+/**
+ * Props for the DefaultStateRenderer component
+ */
+export interface StateRendererProps {
+  /**
+   * The state to render
+   */
+  state?: AgentState;
+
+  /**
+   * The current status
+   */
+  status: ResponseStatus;
+
+  /**
+   * Custom component for rendering individual state items
+   */
+  StateItemRenderer?: React.ComponentType<StateItemRendererProps>;
+
+  /**
+   * Custom component for showing a loading skeleton
+   */
+  SkeletonLoader?: React.ComponentType<SkeletonLoaderProps>;
+
+  /**
+   * Custom labels for the component
+   */
+  labels?: {
+    /**
+     * Label shown when in progress
+     */
+    inProgressLabel?: string;
+
+    /**
+     * Label shown when complete
+     */
+    completeLabel?: string;
+
+    /**
+     * Label shown when no items are present
+     */
+    emptyLabel?: string;
+  };
+
+  /**
+   * Custom icons for the component
+   */
+  icons?: ResponseRendererIcons;
+
+  /**
+   * CSS class for the root element
+   */
+  className?: string;
+
+  /**
+   * CSS class for the content container
+   */
+  contentClassName?: string;
+
+  /**
+   * CSS class for state items
+   */
+  itemClassName?: string;
+
+  /**
+   * Maximum height for the content area
+   */
+  maxHeight?: string;
+
+  /**
+   * Initial collapsed state
+   */
+  defaultCollapsed?: boolean;
+
+  /**
+   * Children nodes
+   */
+  children?: ReactNode;
+}