@copilotkit/react-core 1.57.3 → 1.58.0-canary.thread-id-propagation

package/src/v2/hooks/use-keyboard-height.tsx

@@ -1,67 +0,0 @@
-import { useState, useEffect } from "react";
-
-export interface KeyboardState {
-  isKeyboardOpen: boolean;
-  keyboardHeight: number;
-  availableHeight: number;
-  viewportHeight: number;
-}
-
-/**
- * Hook to detect mobile keyboard appearance and calculate available viewport height.
- * Uses the Visual Viewport API to track keyboard state on mobile devices.
- *
- * @returns KeyboardState object with keyboard information
- */
-export function useKeyboardHeight(): KeyboardState {
-  const [keyboardState, setKeyboardState] = useState<KeyboardState>({
-    isKeyboardOpen: false,
-    keyboardHeight: 0,
-    availableHeight: typeof window !== "undefined" ? window.innerHeight : 0,
-    viewportHeight: typeof window !== "undefined" ? window.innerHeight : 0,
-  });
-
-  useEffect(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
-
-    // Check if Visual Viewport API is available
-    const visualViewport = window.visualViewport;
-    if (!visualViewport) {
-      return;
-    }
-
-    const updateKeyboardState = () => {
-      const layoutHeight = window.innerHeight;
-      const visualHeight = visualViewport.height;
-
-      // Calculate keyboard height (difference between layout and visual viewport)
-      const keyboardHeight = Math.max(0, layoutHeight - visualHeight);
-
-      // Keyboard is considered open if the height difference is significant (> 150px)
-      const isKeyboardOpen = keyboardHeight > 150;
-
-      setKeyboardState({
-        isKeyboardOpen,
-        keyboardHeight,
-        availableHeight: visualHeight,
-        viewportHeight: layoutHeight,
-      });
-    };
-
-    // Initial state
-    updateKeyboardState();
-
-    // Listen for viewport changes
-    visualViewport.addEventListener("resize", updateKeyboardState);
-    visualViewport.addEventListener("scroll", updateKeyboardState);
-
-    return () => {
-      visualViewport.removeEventListener("resize", updateKeyboardState);
-      visualViewport.removeEventListener("scroll", updateKeyboardState);
-    };
-  }, []);
-
-  return keyboardState;
-}

package/src/v2/hooks/use-pin-to-send.ts

@@ -1,94 +0,0 @@
-import { useContext, useEffect, useRef } from "react";
-import { LastUserMessageContext } from "../components/chat/last-user-message-context";
-
-export type UsePinToSendOptions = {
-  scrollRef: React.RefObject<HTMLElement | null>;
-  contentRef: React.RefObject<HTMLElement | null>;
-  spacerRef: React.RefObject<HTMLElement | null>;
-  topOffset?: number;
-};
-
-export function usePinToSend({
-  scrollRef,
-  contentRef,
-  spacerRef,
-  topOffset = 16,
-}: UsePinToSendOptions): void {
-  const { id, sendNonce } = useContext(LastUserMessageContext);
-  const lastNonceRef = useRef<number>(-1);
-  const currentSpacerHeightRef = useRef<number>(0);
-
-  useEffect(() => {
-    if (sendNonce === lastNonceRef.current) return;
-    lastNonceRef.current = sendNonce;
-
-    if (!id) return;
-    const scrollEl = scrollRef.current;
-    const contentEl = contentRef.current;
-    const spacerEl = spacerRef.current;
-    if (!scrollEl || !contentEl || !spacerEl) return;
-
-    const escaped =
-      typeof CSS !== "undefined" && CSS.escape
-        ? CSS.escape(id)
-        : id.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
-    const targetEl = contentEl.querySelector<HTMLElement>(
-      `[data-message-id="${escaped}"]`,
-    );
-    if (!targetEl) return;
-
-    // The target message's element has a top padding (e.g. `pt-10`) that
-    // creates breathing room above the visible bubble. When we "anchor at
-    // the top", we mean anchor the *bubble*, not the element's padded box.
-    // So we scroll past the padding (it goes above the viewport, hiding
-    // whatever was above the element too — including the previous message's
-    // trailing copy button).
-    const viewportHeight = scrollEl.clientHeight;
-    const userMessageHeight = targetEl.getBoundingClientRect().height;
-    const paddingTop = parseFloat(getComputedStyle(targetEl).paddingTop) || 0;
-    const bubbleHeight = Math.max(0, userMessageHeight - paddingTop);
-    const spacerHeight = Math.max(0, viewportHeight - bubbleHeight - topOffset);
-
-    spacerEl.style.height = `${spacerHeight}px`;
-    currentSpacerHeightRef.current = spacerHeight;
-
-    const raf = requestAnimationFrame(() => {
-      // Scroll so the BUBBLE is `topOffset` from the viewport top — the
-      // padding above the bubble ends up scrolled off-screen.
-      const targetTop =
-        computeOffsetTop(targetEl, scrollEl) + paddingTop - topOffset;
-      scrollEl.scrollTo({ top: Math.max(0, targetTop), behavior: "smooth" });
-    });
-
-    // Shrink-only ResizeObserver: as the assistant response grows below the
-    // anchored user message, collapse the spacer by the same amount so total
-    // scrollable space below the bubble stays constant (and the bubble stays
-    // pinned). Never grow the spacer after initial sizing.
-    const ro = new ResizeObserver(() => {
-      if (!contentEl || !spacerEl || !scrollEl) return;
-      const contentHeight = contentEl.getBoundingClientRect().height;
-      const targetOffsetWithinContent = computeOffsetTop(targetEl, contentEl);
-      const consumedBelow =
-        contentHeight - targetOffsetWithinContent - userMessageHeight;
-      const remaining = Math.max(0, spacerHeight - consumedBelow);
-      if (remaining < currentSpacerHeightRef.current) {
-        spacerEl.style.height = `${remaining}px`;
-        currentSpacerHeightRef.current = remaining;
-      }
-    });
-    ro.observe(contentEl);
-
-    return () => {
-      cancelAnimationFrame(raf);
-      ro.disconnect();
-    };
-  }, [id, sendNonce, scrollRef, contentRef, spacerRef, topOffset]);
-}
-
-// Compute the offset of el relative to stopAt, accounting for stopAt's current scrollTop.
-// Uses getBoundingClientRect so it works regardless of CSS positioning (including position:static).
-function computeOffsetTop(el: HTMLElement, stopAt: HTMLElement): number {
-  const elRect = el.getBoundingClientRect();
-  const stopRect = stopAt.getBoundingClientRect();
-  return elRect.top - stopRect.top + stopAt.scrollTop;
-}

package/src/v2/hooks/use-render-activity-message.tsx

@@ -1,72 +0,0 @@
-import { ActivityMessage } from "@ag-ui/core";
-import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
-import { useCopilotKit, useCopilotChatConfiguration } from "../providers";
-import { useCallback, useMemo } from "react";
-import { ReactActivityMessageRenderer } from "../types";
-
-export function useRenderActivityMessage() {
-  const { copilotkit } = useCopilotKit();
-  const agentId = useCopilotChatConfiguration()?.agentId ?? DEFAULT_AGENT_ID;
-
-  const renderers = copilotkit.renderActivityMessages;
-
-  // Find the renderer for a given activity type
-  const findRenderer = useCallback(
-    (activityType: string): ReactActivityMessageRenderer<unknown> | null => {
-      if (!renderers.length) {
-        return null;
-      }
-
-      const matches = renderers.filter(
-        (renderer) => renderer.activityType === activityType,
-      );
-
-      return (
-        matches.find((candidate) => candidate.agentId === agentId) ??
-        matches.find((candidate) => candidate.agentId === undefined) ??
-        renderers.find((candidate) => candidate.activityType === "*") ??
-        null
-      );
-    },
-    [agentId, renderers],
-  );
-
-  const renderActivityMessage = useCallback(
-    (message: ActivityMessage): React.ReactElement | null => {
-      const renderer = findRenderer(message.activityType);
-
-      if (!renderer) {
-        return null;
-      }
-
-      const parseResult = renderer.content.safeParse(message.content);
-
-      if (!parseResult.success) {
-        console.warn(
-          `Failed to parse content for activity message '${message.activityType}':`,
-          parseResult.error,
-        );
-        return null;
-      }
-
-      const Component = renderer.render;
-      const agent = copilotkit.getAgent(agentId);
-
-      return (
-        <Component
-          key={message.id}
-          activityType={message.activityType}
-          content={parseResult.data}
-          message={message}
-          agent={agent}
-        />
-      );
-    },
-    [agentId, copilotkit, findRenderer],
-  );
-
-  return useMemo(
-    () => ({ renderActivityMessage, findRenderer }),
-    [renderActivityMessage, findRenderer],
-  );
-}

package/src/v2/hooks/use-render-custom-messages.tsx

@@ -1,93 +0,0 @@
-import { useCopilotChatConfiguration, useCopilotKit } from "../providers";
-import { ReactCustomMessageRendererPosition } from "../types/react-custom-message-renderer";
-import { Message } from "@ag-ui/core";
-
-interface UseRenderCustomMessagesParams {
-  message: Message;
-  position: ReactCustomMessageRendererPosition;
-}
-
-export function useRenderCustomMessages() {
-  const { copilotkit } = useCopilotKit();
-  const config = useCopilotChatConfiguration();
-
-  if (!config) {
-    return null;
-  }
-
-  const { agentId, threadId } = config;
-
-  const customMessageRenderers = copilotkit.renderCustomMessages
-    .filter(
-      (renderer) =>
-        renderer.agentId === undefined || renderer.agentId === agentId,
-    )
-    .sort((a, b) => {
-      const aHasAgent = a.agentId !== undefined;
-      const bHasAgent = b.agentId !== undefined;
-      if (aHasAgent === bHasAgent) return 0;
-      return aHasAgent ? -1 : 1;
-    });
-
-  return function (params: UseRenderCustomMessagesParams) {
-    if (!customMessageRenderers.length) {
-      return null;
-    }
-    const { message, position } = params;
-    const resolvedRunId =
-      copilotkit.getRunIdForMessage(agentId, threadId, message.id) ??
-      copilotkit.getRunIdsForThread(agentId, threadId).slice(-1)[0];
-    const runId = resolvedRunId ?? `missing-run-id:${message.id}`;
-    const agent = copilotkit.getAgent(agentId);
-    if (!agent) {
-      return null;
-    }
-
-    const messagesIdsInRun = resolvedRunId
-      ? agent.messages
-          .filter(
-            (msg) =>
-              copilotkit.getRunIdForMessage(agentId, threadId, msg.id) ===
-              resolvedRunId,
-          )
-          .map((msg) => msg.id)
-      : [message.id];
-
-    const rawMessageIndex = agent.messages.findIndex(
-      (msg) => msg.id === message.id,
-    );
-    const messageIndex = rawMessageIndex >= 0 ? rawMessageIndex : 0;
-    const messageIndexInRun = resolvedRunId
-      ? Math.max(messagesIdsInRun.indexOf(message.id), 0)
-      : 0;
-    const numberOfMessagesInRun = resolvedRunId ? messagesIdsInRun.length : 1;
-    const stateSnapshot = resolvedRunId
-      ? copilotkit.getStateByRun(agentId, threadId, resolvedRunId)
-      : undefined;
-
-    let result = null;
-    for (const renderer of customMessageRenderers) {
-      if (!renderer.render) {
-        continue;
-      }
-      const Component = renderer.render;
-      result = (
-        <Component
-          key={`${runId}-${message.id}-${position}`}
-          message={message}
-          position={position}
-          runId={runId}
-          messageIndex={messageIndex}
-          messageIndexInRun={messageIndexInRun}
-          numberOfMessagesInRun={numberOfMessagesInRun}
-          agentId={agentId}
-          stateSnapshot={stateSnapshot}
-        />
-      );
-      if (result) {
-        break;
-      }
-    }
-    return result;
-  };
-}

package/src/v2/hooks/use-render-tool-call.tsx

@@ -1,208 +0,0 @@
-import React, { useCallback, useMemo, useSyncExternalStore } from "react";
-import { ToolCall, ToolMessage } from "@ag-ui/core";
-import { ToolCallStatus } from "@copilotkit/core";
-import { useCopilotKit } from "../context";
-import { useCopilotChatConfiguration } from "../providers/CopilotChatConfigurationProvider";
-import { DEFAULT_AGENT_ID } from "@copilotkit/shared";
-import { partialJSONParse } from "@copilotkit/shared";
-import { ReactToolCallRenderer } from "../types/react-tool-call-renderer";
-import { DefaultToolCallRenderer } from "./use-default-render-tool";
-
-export interface UseRenderToolCallProps {
-  toolCall: ToolCall;
-  toolMessage?: ToolMessage;
-}
-
-/**
- * Props for the memoized ToolCallRenderer component
- */
-interface ToolCallRendererProps {
-  toolCall: ToolCall;
-  toolMessage?: ToolMessage;
-  RenderComponent: ReactToolCallRenderer<unknown>["render"];
-  isExecuting: boolean;
-}
-
-/**
- * Memoized component that renders a single tool call.
- * This prevents unnecessary re-renders when parent components update
- * but the tool call data hasn't changed.
- */
-const ToolCallRenderer = React.memo(
-  function ToolCallRenderer({
-    toolCall,
-    toolMessage,
-    RenderComponent,
-    isExecuting,
-  }: ToolCallRendererProps) {
-    // Memoize args based on the arguments string to maintain stable reference
-    const args = useMemo(
-      () => partialJSONParse(toolCall.function.arguments),
-      [toolCall.function.arguments],
-    );
-
-    const toolName = toolCall.function.name;
-
-    // Render based on status to preserve discriminated union type inference
-    if (toolMessage) {
-      return (
-        <RenderComponent
-          name={toolName}
-          toolCallId={toolCall.id}
-          args={args}
-          status={ToolCallStatus.Complete}
-          result={toolMessage.content}
-        />
-      );
-    } else if (isExecuting) {
-      return (
-        <RenderComponent
-          name={toolName}
-          toolCallId={toolCall.id}
-          args={args}
-          status={ToolCallStatus.Executing}
-          result={undefined}
-        />
-      );
-    } else {
-      return (
-        <RenderComponent
-          name={toolName}
-          toolCallId={toolCall.id}
-          args={args}
-          status={ToolCallStatus.InProgress}
-          result={undefined}
-        />
-      );
-    }
-  },
-  // Custom comparison function to prevent re-renders when tool call data hasn't changed
-  (prevProps, nextProps) => {
-    // Compare tool call identity and content
-    if (prevProps.toolCall.id !== nextProps.toolCall.id) return false;
-    if (prevProps.toolCall.function.name !== nextProps.toolCall.function.name)
-      return false;
-    if (
-      prevProps.toolCall.function.arguments !==
-      nextProps.toolCall.function.arguments
-    )
-      return false;
-
-    // Compare tool message (result)
-    const prevResult = prevProps.toolMessage?.content;
-    const nextResult = nextProps.toolMessage?.content;
-    if (prevResult !== nextResult) return false;
-
-    // Compare executing state
-    if (prevProps.isExecuting !== nextProps.isExecuting) return false;
-
-    // Compare render component reference
-    if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
-
-    return true;
-  },
-);
-
-/**
- * Hook that returns a function to render tool calls based on the render functions
- * defined in CopilotKitProvider.
- *
- * @returns A function that takes a tool call and optional tool message and returns the rendered component
- */
-export function useRenderToolCall() {
-  const { copilotkit, executingToolCallIds } = useCopilotKit();
-  const config = useCopilotChatConfiguration();
-  const agentId = config?.agentId ?? DEFAULT_AGENT_ID;
-
-  // Subscribe to render tool calls changes using useSyncExternalStore
-  // This ensures we always have the latest value, even if subscriptions run in any order
-  const renderToolCalls = useSyncExternalStore(
-    (callback) => {
-      return copilotkit.subscribe({
-        onRenderToolCallsChanged: callback,
-      }).unsubscribe;
-    },
-    () => copilotkit.renderToolCalls,
-    () => copilotkit.renderToolCalls,
-  );
-
-  // Note: executingToolCallIds is now provided by CopilotKitProvider context.
-  // This is critical for HITL reconnection: when connecting to a thread with
-  // pending tool calls, the onToolExecutionStart event fires before child components
-  // mount. By tracking at the provider level, the executing state is already
-  // available when this hook first runs.
-
-  const renderToolCall = useCallback(
-    ({
-      toolCall,
-      toolMessage,
-    }: UseRenderToolCallProps): React.ReactElement | null => {
-      // Find the render config for this tool call by name
-      // For rendering, we show all tool calls regardless of agentId
-      // The agentId scoping only affects handler execution (in core)
-      // Priority order:
-      // 1. Exact match by name (prefer agent-specific if multiple exist)
-      // 2. Wildcard (*) renderer
-      const exactMatches = renderToolCalls.filter(
-        (rc) => rc.name === toolCall.function.name,
-      );
-
-      // If multiple renderers with same name exist, prefer the one matching our agentId
-      const renderConfig =
-        exactMatches.find((rc) => rc.agentId === agentId) ||
-        exactMatches.find((rc) => !rc.agentId) ||
-        exactMatches[0] ||
-        renderToolCalls.find((rc) => rc.name === "*");
-
-      // Fall back to the framework's built-in default tool-call renderer
-      // when neither a per-tool nor a wildcard renderer has been
-      // registered. This makes "zero custom renderers" demos paint tool
-      // calls out-of-the-box instead of going invisible.
-      const RenderComponent = (renderConfig?.render ??
-        defaultToolCallRenderAdapter) as ReactToolCallRenderer<unknown>["render"];
-      const isExecuting = executingToolCallIds.has(toolCall.id);
-
-      // Use the memoized ToolCallRenderer component to prevent unnecessary re-renders
-      return (
-        <ToolCallRenderer
-          key={toolCall.id}
-          toolCall={toolCall}
-          toolMessage={toolMessage}
-          RenderComponent={RenderComponent}
-          isExecuting={isExecuting}
-        />
-      );
-    },
-    [renderToolCalls, executingToolCallIds, agentId],
-  );
-
-  return renderToolCall;
-}
-
-// Adapter that bridges the ReactToolCallRenderer signature
-// (`{ name, args, status, result, toolCallId }`) to the
-// `DefaultToolCallRenderer` signature (`{ name, parameters, status,
-// result }`) so the latter can be used as a zero-config fallback when
-// no `*` renderer is registered.
-function defaultToolCallRenderAdapter(props: {
-  name: string;
-  args: unknown;
-  status: ToolCallStatus;
-  result: string | undefined;
-  toolCallId: string;
-}): React.ReactElement {
-  const status =
-    props.status === ToolCallStatus.Complete
-      ? "complete"
-      : props.status === ToolCallStatus.Executing
-        ? "executing"
-        : "inProgress";
-  return (
-    <DefaultToolCallRenderer
-      name={props.name}
-      parameters={props.args}
-      status={status}
-      result={props.result}
-    />
-  );
-}