@copilotkit/react-core 1.54.1 → 1.55.0-next.7

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

@@ -0,0 +1,252 @@
+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
+  const [isOpen, setIsOpen] = useState(isStreaming);
+
+  useEffect(() => {
+    if (isStreaming) {
+      setIsOpen(true);
+    } else {
+      // Auto-collapse when reasoning finishes
+      setIsOpen(false);
+    }
+  }, [isStreaming]);
+
+  const label = isStreaming
+    ? "Thinking…"
+    : `Thought for ${formatDuration(elapsed)}`;
+
+  const boundHeader = renderSlot(header, CopilotChatReasoningMessage.Header, {
+    isOpen,
+    label,
+    hasContent,
+    isStreaming,
+    onClick: hasContent ? () => setIsOpen((prev) => !prev) : undefined,
+  });
+
+  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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,133 @@
+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,
+      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

@@ -0,0 +1,171 @@
+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

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