@copilotkit/react-core 1.57.3 → 1.58.0

package/src/v2/components/chat/CopilotChatReasoningMessage.tsx

@@ -1,265 +0,0 @@
-import { ReasoningMessage, Message } from "@ag-ui/core";
-import { useState, useEffect, useRef } from "react";
-import { ChevronRight } from "lucide-react";
-import { twMerge } from "tailwind-merge";
-import { Streamdown } from "streamdown";
-import { WithSlots, renderSlot } from "../../lib/slots";
-
-export type CopilotChatReasoningMessageProps = WithSlots<
-  {
-    header: typeof CopilotChatReasoningMessage.Header;
-    contentView: typeof CopilotChatReasoningMessage.Content;
-    toggle: typeof CopilotChatReasoningMessage.Toggle;
-  },
-  {
-    message: ReasoningMessage;
-    messages?: Message[];
-    isRunning?: boolean;
-  } & React.HTMLAttributes<HTMLDivElement>
->;
-
-/**
- * Formats an elapsed duration (in seconds) to a human-readable string.
- */
-function formatDuration(seconds: number): string {
-  if (seconds < 1) return "a few seconds";
-  if (seconds < 60) return `${Math.round(seconds)} seconds`;
-  const mins = Math.floor(seconds / 60);
-  const secs = Math.round(seconds % 60);
-  if (secs === 0) return `${mins} minute${mins > 1 ? "s" : ""}`;
-  return `${mins}m ${secs}s`;
-}
-
-export function CopilotChatReasoningMessage({
-  message,
-  messages,
-  isRunning,
-  header,
-  contentView,
-  toggle,
-  children,
-  className,
-  ...props
-}: CopilotChatReasoningMessageProps) {
-  const isLatest = messages?.[messages.length - 1]?.id === message.id;
-  const isStreaming = !!(isRunning && isLatest);
-  const hasContent = !!(message.content && message.content.length > 0);
-
-  // Track elapsed time while streaming
-  const startTimeRef = useRef<number | null>(null);
-  const [elapsed, setElapsed] = useState(0);
-
-  useEffect(() => {
-    if (isStreaming && startTimeRef.current === null) {
-      startTimeRef.current = Date.now();
-    }
-
-    if (!isStreaming && startTimeRef.current !== null) {
-      // Final snapshot of elapsed time
-      setElapsed((Date.now() - startTimeRef.current) / 1000);
-      return;
-    }
-
-    if (!isStreaming) return;
-
-    // Tick every second while streaming
-    const timer = setInterval(() => {
-      if (startTimeRef.current !== null) {
-        setElapsed((Date.now() - startTimeRef.current) / 1000);
-      }
-    }, 1000);
-    return () => clearInterval(timer);
-  }, [isStreaming]);
-
-  // Default to open while streaming, auto-collapse when streaming ends.
-  // Track whether the user has manually toggled so auto-collapse doesn't
-  // override their explicit intent (prevents flaky test failures on CI
-  // where async forceUpdate timing can race with click handlers).
-  const [isOpen, setIsOpen] = useState(isStreaming);
-  const userToggledRef = useRef(false);
-
-  useEffect(() => {
-    if (isStreaming) {
-      // Reset user-toggle tracking when a new streaming session starts
-      userToggledRef.current = false;
-      setIsOpen(true);
-    } else if (!userToggledRef.current) {
-      // Auto-collapse only if the user hasn't manually toggled
-      setIsOpen(false);
-    }
-  }, [isStreaming]);
-
-  const handleToggle = hasContent
-    ? () => {
-        userToggledRef.current = true;
-        setIsOpen((prev) => !prev);
-      }
-    : undefined;
-
-  const label = isStreaming
-    ? "Thinking…"
-    : `Thought for ${formatDuration(elapsed)}`;
-
-  const boundHeader = renderSlot(header, CopilotChatReasoningMessage.Header, {
-    isOpen,
-    label,
-    hasContent,
-    isStreaming,
-    onClick: handleToggle,
-  });
-
-  const boundContent = renderSlot(
-    contentView,
-    CopilotChatReasoningMessage.Content,
-    {
-      isStreaming,
-      hasContent,
-      children: message.content,
-    },
-  );
-
-  const boundToggle = renderSlot(toggle, CopilotChatReasoningMessage.Toggle, {
-    isOpen,
-    children: boundContent,
-  });
-
-  if (children) {
-    return (
-      <div data-copilotkit style={{ display: "contents" }}>
-        {children({
-          header: boundHeader,
-          contentView: boundContent,
-          toggle: boundToggle,
-          message,
-          messages,
-          isRunning,
-        })}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={twMerge("cpk:my-1", className)}
-      data-message-id={message.id}
-      {...props}
-    >
-      {boundHeader}
-      {boundToggle}
-    </div>
-  );
-}
-
-export namespace CopilotChatReasoningMessage {
-  export const Header: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement> & {
-      isOpen?: boolean;
-      label?: string;
-      hasContent?: boolean;
-      isStreaming?: boolean;
-    }
-  > = ({
-    isOpen,
-    label = "Thoughts",
-    hasContent,
-    isStreaming,
-    className,
-    children: headerChildren,
-    ...headerProps
-  }) => {
-    const isExpandable = !!hasContent;
-
-    return (
-      <button
-        type="button"
-        className={twMerge(
-          "cpk:inline-flex cpk:items-center cpk:gap-1 cpk:py-1 cpk:text-sm cpk:text-muted-foreground cpk:transition-colors cpk:select-none",
-          isExpandable
-            ? "cpk:hover:text-foreground cpk:cursor-pointer"
-            : "cpk:cursor-default",
-          className,
-        )}
-        aria-expanded={isExpandable ? isOpen : undefined}
-        {...headerProps}
-      >
-        <span className="cpk:font-medium">{label}</span>
-        {isStreaming && !hasContent && (
-          <span className="cpk:inline-flex cpk:items-center cpk:ml-1">
-            <span className="cpk:w-1.5 cpk:h-1.5 cpk:rounded-full cpk:bg-muted-foreground cpk:animate-pulse" />
-          </span>
-        )}
-        {headerChildren}
-        {isExpandable && (
-          <ChevronRight
-            className={twMerge(
-              "cpk:size-3.5 cpk:shrink-0 cpk:transition-transform cpk:duration-200",
-              isOpen && "cpk:rotate-90",
-            )}
-          />
-        )}
-      </button>
-    );
-  };
-
-  export const Content: React.FC<
-    React.HTMLAttributes<HTMLDivElement> & {
-      isStreaming?: boolean;
-      hasContent?: boolean;
-    }
-  > = ({
-    isStreaming,
-    hasContent,
-    className,
-    children: contentChildren,
-    ...contentProps
-  }) => {
-    // Don't render the content area at all when there's nothing to show
-    if (!hasContent && !isStreaming) return null;
-
-    return (
-      <div
-        className={twMerge("cpk:pb-2 cpk:pt-1", className)}
-        {...contentProps}
-      >
-        <div className="cpk:text-sm cpk:text-muted-foreground">
-          <Streamdown>
-            {typeof contentChildren === "string" ? contentChildren : ""}
-          </Streamdown>
-          {isStreaming && hasContent && (
-            <span className="cpk:inline-flex cpk:items-center cpk:ml-1 cpk:align-middle">
-              <span className="cpk:w-2 cpk:h-2 cpk:rounded-full cpk:bg-muted-foreground cpk:animate-pulse-cursor" />
-            </span>
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  export const Toggle: React.FC<
-    React.HTMLAttributes<HTMLDivElement> & {
-      isOpen?: boolean;
-    }
-  > = ({ isOpen, className, children: toggleChildren, ...toggleProps }) => {
-    return (
-      <div
-        className={twMerge(
-          "cpk:grid cpk:transition-[grid-template-rows] cpk:duration-200 cpk:ease-in-out",
-          className,
-        )}
-        style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}
-        {...toggleProps}
-      >
-        <div className="cpk:overflow-hidden">{toggleChildren}</div>
-      </div>
-    );
-  };
-}
-
-CopilotChatReasoningMessage.Header.displayName =
-  "CopilotChatReasoningMessage.Header";
-CopilotChatReasoningMessage.Content.displayName =
-  "CopilotChatReasoningMessage.Content";
-CopilotChatReasoningMessage.Toggle.displayName =
-  "CopilotChatReasoningMessage.Toggle";
-
-export default CopilotChatReasoningMessage;

package/src/v2/components/chat/CopilotChatSuggestionPill.tsx

@@ -1,59 +0,0 @@
-import React from "react";
-import { Loader2 } from "lucide-react";
-import { cn } from "../../lib/utils";
-
-export interface CopilotChatSuggestionPillProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Optional icon to render on the left side when not loading. */
-  icon?: React.ReactNode;
-  /** Whether the pill should display a loading spinner. */
-  isLoading?: boolean;
-}
-
-const baseClasses =
-  "group cpk:inline-flex cpk:h-7 cpk:sm:h-8 cpk:items-center cpk:gap-1 cpk:sm:gap-1.5 cpk:rounded-full cpk:border cpk:border-border/60 cpk:bg-background cpk:px-2.5 cpk:sm:px-3 cpk:text-[11px] cpk:sm:text-xs cpk:leading-none cpk:text-foreground cpk:transition-colors cpk:cursor-pointer cpk:hover:bg-accent/60 cpk:hover:text-foreground cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-ring cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background cpk:disabled:cursor-not-allowed cpk:disabled:text-muted-foreground cpk:disabled:hover:bg-background cpk:disabled:hover:text-muted-foreground cpk:pointer-events-auto";
-
-const labelClasses = "cpk:whitespace-nowrap cpk:font-medium cpk:leading-none";
-
-export const CopilotChatSuggestionPill = React.forwardRef<
-  HTMLButtonElement,
-  CopilotChatSuggestionPillProps
->(function CopilotChatSuggestionPill(
-  { className, children, icon, isLoading, type, ...props },
-  ref,
-) {
-  const showIcon = !isLoading && icon;
-
-  return (
-    <button
-      ref={ref}
-      data-copilotkit
-      data-testid="copilot-suggestion"
-      data-slot="suggestion-pill"
-      className={cn(baseClasses, className)}
-      type={type ?? "button"}
-      aria-busy={isLoading || undefined}
-      disabled={isLoading || props.disabled}
-      {...props}
-    >
-      {isLoading ? (
-        <span className="cpk:flex cpk:h-3.5 cpk:sm:h-4 cpk:w-3.5 cpk:sm:w-4 cpk:items-center cpk:justify-center cpk:text-muted-foreground">
-          <Loader2
-            className="cpk:h-3.5 cpk:sm:h-4 cpk:w-3.5 cpk:sm:w-4 cpk:animate-spin"
-            aria-hidden="true"
-          />
-        </span>
-      ) : (
-        showIcon && (
-          <span className="cpk:flex cpk:h-3.5 cpk:sm:h-4 cpk:w-3.5 cpk:sm:w-4 cpk:items-center cpk:justify-center cpk:text-muted-foreground">
-            {icon}
-          </span>
-        )
-      )}
-      <span className={labelClasses}>{children}</span>
-    </button>
-  );
-});
-
-CopilotChatSuggestionPill.displayName = "CopilotChatSuggestionPill";
-
-export default CopilotChatSuggestionPill;

package/src/v2/components/chat/CopilotChatSuggestionView.tsx

@@ -1,134 +0,0 @@
-import React from "react";
-import { Suggestion } from "@copilotkit/core";
-import { renderSlot, WithSlots } from "../../lib/slots";
-import { cn } from "../../lib/utils";
-import CopilotChatSuggestionPill, {
-  CopilotChatSuggestionPillProps,
-} from "./CopilotChatSuggestionPill";
-
-const DefaultContainer = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(function DefaultContainer({ className, ...props }, ref) {
-  return (
-    <div
-      ref={ref}
-      data-copilotkit
-      data-testid="copilot-suggestions"
-      className={cn(
-        "cpk:flex cpk:flex-wrap cpk:items-center cpk:gap-1.5 cpk:sm:gap-2 cpk:pl-0 cpk:pr-4 cpk:sm:px-0 cpk:pointer-events-none",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-
-export type CopilotChatSuggestionViewProps = WithSlots<
-  {
-    container: typeof DefaultContainer;
-    suggestion: typeof CopilotChatSuggestionPill;
-  },
-  {
-    suggestions: Suggestion[];
-    onSelectSuggestion?: (suggestion: Suggestion, index: number) => void;
-    loadingIndexes?: ReadonlyArray<number>;
-  } & React.HTMLAttributes<HTMLDivElement>
->;
-
-export const CopilotChatSuggestionView = React.forwardRef<
-  HTMLDivElement,
-  CopilotChatSuggestionViewProps
->(function CopilotChatSuggestionView(
-  {
-    suggestions,
-    onSelectSuggestion,
-    loadingIndexes,
-    container,
-    suggestion: suggestionSlot,
-    className,
-    children,
-    ...restProps
-  },
-  ref,
-) {
-  const loadingSet = React.useMemo(() => {
-    if (!loadingIndexes || loadingIndexes.length === 0) {
-      return new Set<number>();
-    }
-    return new Set(loadingIndexes);
-  }, [loadingIndexes]);
-
-  const ContainerElement = renderSlot(container, DefaultContainer, {
-    ref,
-    className,
-    ...restProps,
-  });
-
-  const suggestionElements = suggestions.map((suggestion, index) => {
-    const isLoading = loadingSet.has(index) || suggestion.isLoading === true;
-    const pill = renderSlot<
-      typeof CopilotChatSuggestionPill,
-      CopilotChatSuggestionPillProps
-    >(suggestionSlot, CopilotChatSuggestionPill, {
-      children: suggestion.title,
-      className: suggestion.className,
-      isLoading,
-      type: "button",
-      onClick: () => onSelectSuggestion?.(suggestion, index),
-    });
-
-    return React.cloneElement(pill, {
-      key: `${suggestion.title}-${index}`,
-    });
-  });
-
-  const boundContainer = React.cloneElement(
-    ContainerElement,
-    undefined,
-    suggestionElements,
-  );
-
-  if (typeof children === "function") {
-    const sampleSuggestion = renderSlot<
-      typeof CopilotChatSuggestionPill,
-      CopilotChatSuggestionPillProps
-    >(suggestionSlot, CopilotChatSuggestionPill, {
-      children: suggestions[0]?.title ?? "",
-      isLoading:
-        suggestions.length > 0
-          ? loadingSet.has(0) || suggestions[0]?.isLoading === true
-          : false,
-      type: "button",
-    });
-
-    return (
-      <div data-copilotkit style={{ display: "contents" }}>
-        {children({
-          container: boundContainer,
-          suggestion: sampleSuggestion,
-          suggestions,
-          onSelectSuggestion,
-          loadingIndexes,
-          className,
-          ...restProps,
-        })}
-      </div>
-    );
-  }
-
-  if (children) {
-    return (
-      <div data-copilotkit style={{ display: "contents" }}>
-        {boundContainer}
-        {children}
-      </div>
-    );
-  }
-
-  return boundContainer;
-});
-
-CopilotChatSuggestionView.displayName = "CopilotChatSuggestionView";
-
-export default CopilotChatSuggestionView;

package/src/v2/components/chat/CopilotChatToggleButton.tsx

@@ -1,171 +0,0 @@
-import React, { useState, MouseEvent } from "react";
-import { MessageCircle, X } from "lucide-react";
-
-import { renderSlot, SlotValue } from "../../lib/slots";
-import { cn } from "../../lib/utils";
-import {
-  CopilotChatDefaultLabels,
-  useCopilotChatConfiguration,
-} from "../../providers/CopilotChatConfigurationProvider";
-
-const DefaultOpenIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({
-  className,
-  ...props
-}) => (
-  <MessageCircle
-    className={cn("cpk:h-6 cpk:w-6", className)}
-    strokeWidth={1.75}
-    fill="currentColor"
-    {...props}
-  />
-);
-
-const DefaultCloseIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({
-  className,
-  ...props
-}) => (
-  <X
-    className={cn("cpk:h-6 cpk:w-6", className)}
-    strokeWidth={1.75}
-    {...props}
-  />
-);
-
-DefaultOpenIcon.displayName = "CopilotChatToggleButton.OpenIcon";
-DefaultCloseIcon.displayName = "CopilotChatToggleButton.CloseIcon";
-
-export interface CopilotChatToggleButtonProps extends Omit<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  "children"
-> {
-  /** Optional slot override for the chat (closed) icon. */
-  openIcon?: SlotValue<typeof DefaultOpenIcon>;
-  /** Optional slot override for the close icon. */
-  closeIcon?: SlotValue<typeof DefaultCloseIcon>;
-}
-
-const ICON_TRANSITION_STYLE: React.CSSProperties = Object.freeze({
-  transition:
-    "opacity 120ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1)",
-});
-
-const ICON_WRAPPER_BASE =
-  "cpk:pointer-events-none cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:will-change-transform";
-
-const BUTTON_BASE_CLASSES = cn(
-  "copilotKitButton",
-  "cpk:fixed cpk:bottom-6 cpk:right-6 cpk:z-[1100] cpk:flex cpk:h-14 cpk:w-14 cpk:items-center cpk:justify-center",
-  "cpk:rounded-full cpk:border cpk:border-primary cpk:bg-primary cpk:text-primary-foreground",
-  "cpk:shadow-sm cpk:transition-all cpk:duration-200 cpk:ease-out",
-  "cpk:hover:scale-[1.04] cpk:hover:shadow-md",
-  "cpk:cursor-pointer",
-  "cpk:active:scale-[0.96]",
-  "cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-primary/50 cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background",
-  "cpk:disabled:pointer-events-none cpk:disabled:opacity-60",
-);
-
-export const CopilotChatToggleButton = React.forwardRef<
-  HTMLButtonElement,
-  CopilotChatToggleButtonProps
->(function CopilotChatToggleButton(
-  { openIcon, closeIcon, className, ...buttonProps },
-  ref,
-) {
-  const { onClick, type, disabled, ...restProps } = buttonProps;
-
-  const configuration = useCopilotChatConfiguration();
-  const labels = configuration?.labels ?? CopilotChatDefaultLabels;
-
-  const [fallbackOpen, setFallbackOpen] = useState(false);
-
-  const isOpen = configuration?.isModalOpen ?? fallbackOpen;
-  const setModalOpen = configuration?.setModalOpen ?? setFallbackOpen;
-
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-    if (disabled) {
-      return;
-    }
-
-    if (onClick) {
-      onClick(event);
-    }
-
-    if (event.defaultPrevented) {
-      return;
-    }
-
-    const nextOpen = !isOpen;
-    setModalOpen(nextOpen);
-  };
-
-  const renderedOpenIcon = renderSlot(openIcon, DefaultOpenIcon, {
-    className: "cpk:h-6 cpk:w-6",
-    "aria-hidden": true,
-    focusable: false,
-  });
-
-  const renderedCloseIcon = renderSlot(closeIcon, DefaultCloseIcon, {
-    className: "cpk:h-6 cpk:w-6",
-    "aria-hidden": true,
-    focusable: false,
-  });
-
-  const openIconElement = (
-    <span
-      aria-hidden="true"
-      data-slot="chat-toggle-button-open-icon"
-      className={ICON_WRAPPER_BASE}
-      style={{
-        ...ICON_TRANSITION_STYLE,
-        opacity: isOpen ? 0 : 1,
-        transform: `scale(${isOpen ? 0.75 : 1}) rotate(${isOpen ? 90 : 0}deg)`,
-      }}
-    >
-      {renderedOpenIcon}
-    </span>
-  );
-
-  const closeIconElement = (
-    <span
-      aria-hidden="true"
-      data-slot="chat-toggle-button-close-icon"
-      className={ICON_WRAPPER_BASE}
-      style={{
-        ...ICON_TRANSITION_STYLE,
-        opacity: isOpen ? 1 : 0,
-        transform: `scale(${isOpen ? 1 : 0.75}) rotate(${isOpen ? 0 : -90}deg)`,
-      }}
-    >
-      {renderedCloseIcon}
-    </span>
-  );
-
-  return (
-    <button
-      ref={ref}
-      type={type ?? "button"}
-      data-copilotkit
-      data-testid="copilot-chat-toggle"
-      data-slot="chat-toggle-button"
-      data-state={isOpen ? "open" : "closed"}
-      className={cn(BUTTON_BASE_CLASSES, className)}
-      aria-label={
-        isOpen ? labels.chatToggleCloseLabel : labels.chatToggleOpenLabel
-      }
-      aria-pressed={isOpen}
-      disabled={disabled}
-      onClick={handleClick}
-      {...restProps}
-    >
-      {openIconElement}
-      {closeIconElement}
-    </button>
-  );
-});
-CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
-export default CopilotChatToggleButton;
-
-export {
-  DefaultOpenIcon as CopilotChatToggleButtonOpenIcon,
-  DefaultCloseIcon as CopilotChatToggleButtonCloseIcon,
-};

package/src/v2/components/chat/CopilotChatToolCallsView.tsx

@@ -1,40 +0,0 @@
-import { useRenderToolCall } from "../../hooks";
-import type { AssistantMessage, Message, ToolMessage } from "@ag-ui/core";
-import React from "react";
-
-export type CopilotChatToolCallsViewProps = {
-  message: AssistantMessage;
-  messages?: Message[];
-};
-
-export function CopilotChatToolCallsView({
-  message,
-  messages = [],
-}: CopilotChatToolCallsViewProps) {
-  const renderToolCall = useRenderToolCall();
-
-  if (!message.toolCalls || message.toolCalls.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      {message.toolCalls.map((toolCall) => {
-        const toolMessage = messages.find(
-          (m) => m.role === "tool" && m.toolCallId === toolCall.id,
-        ) as ToolMessage | undefined;
-
-        return (
-          <React.Fragment key={toolCall.id}>
-            {renderToolCall({
-              toolCall,
-              toolMessage,
-            })}
-          </React.Fragment>
-        );
-      })}
-    </>
-  );
-}
-
-export default CopilotChatToolCallsView;