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

package/src/components/crew/DefaultStateRenderer.tsx

@@ -1,326 +0,0 @@
-/**
- * <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

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

package/src/components/crew/types.ts

@@ -1,398 +0,0 @@
-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;
-}