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

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

@@ -1,1412 +0,0 @@
-import React, {
-  useState,
-  useRef,
-  KeyboardEvent,
-  ChangeEvent,
-  useEffect,
-  useLayoutEffect,
-  forwardRef,
-  useImperativeHandle,
-  useCallback,
-  useMemo,
-} from "react";
-import { twMerge } from "tailwind-merge";
-import { Plus, Mic, ArrowUp, X, Check, Square, Loader2 } from "lucide-react";
-
-import {
-  CopilotChatLabels,
-  useCopilotChatConfiguration,
-  CopilotChatDefaultLabels,
-} from "../../providers/CopilotChatConfigurationProvider";
-import { Button } from "../../components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../../components/ui/tooltip";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-  DropdownMenuSeparator,
-} from "../../components/ui/dropdown-menu";
-
-import { CopilotChatAudioRecorder } from "./CopilotChatAudioRecorder";
-import { renderSlot, WithSlots } from "../../lib/slots";
-import { cn } from "../../lib/utils";
-
-export type CopilotChatInputMode = "input" | "transcribe" | "processing";
-
-export type ToolsMenuItem = {
-  label: string;
-} & (
-  | {
-      action: () => void;
-      items?: never;
-    }
-  | {
-      action?: never;
-      items: (ToolsMenuItem | "-")[];
-    }
-);
-
-type CopilotChatInputSlots = {
-  textArea: typeof CopilotChatInput.TextArea;
-  sendButton: typeof CopilotChatInput.SendButton;
-  startTranscribeButton: typeof CopilotChatInput.StartTranscribeButton;
-  cancelTranscribeButton: typeof CopilotChatInput.CancelTranscribeButton;
-  finishTranscribeButton: typeof CopilotChatInput.FinishTranscribeButton;
-  addMenuButton: typeof CopilotChatInput.AddMenuButton;
-  audioRecorder: typeof CopilotChatAudioRecorder;
-  disclaimer: typeof CopilotChatInput.Disclaimer;
-};
-
-type CopilotChatInputRestProps = {
-  mode?: CopilotChatInputMode;
-  toolsMenu?: (ToolsMenuItem | "-")[];
-  autoFocus?: boolean;
-  onSubmitMessage?: (value: string) => void;
-  onStop?: () => void;
-  isRunning?: boolean;
-  onStartTranscribe?: () => void;
-  onCancelTranscribe?: () => void;
-  onFinishTranscribe?: () => void;
-  onFinishTranscribeWithAudio?: (audioBlob: Blob) => Promise<void>;
-  onAddFile?: () => void;
-  value?: string;
-  onChange?: (value: string) => void;
-  /** Positioning mode for the input container. Default: 'static' */
-  positioning?: "static" | "absolute";
-  /** Keyboard height in pixels for mobile keyboard handling */
-  keyboardHeight?: number;
-  /** Ref for the outer positioning container */
-  containerRef?: React.Ref<HTMLDivElement>;
-  /** Whether to show the disclaimer. Default: true for absolute positioning, false for static */
-  showDisclaimer?: boolean;
-  /**
-   * Set to `true` when the input sits at the bottom of its container as a
-   * flex-last-child (visible position is driven by layout, not CSS
-   * positioning). Triggers reservation of bottom space for the fixed
-   * CopilotKit license banner via the
-   * `--copilotkit-license-banner-offset` CSS var so the two don't overlap.
-   *
-   * Not needed when `positioning === "absolute"`; that mode already pins the
-   * input to the bottom and picks up the same reservation automatically.
-   * Leave unset (default `false`) for inputs rendered mid-layout such as the
-   * welcome screen, where the banner offset would push the input off-center.
-   */
-  bottomAnchored?: boolean;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">;
-
-type CopilotChatInputBaseProps = WithSlots<
-  CopilotChatInputSlots,
-  CopilotChatInputRestProps
->;
-
-type CopilotChatInputChildrenArgs = CopilotChatInputBaseProps extends {
-  children?: infer C;
-}
-  ? C extends (props: infer P) => React.ReactNode
-    ? P
-    : never
-  : never;
-
-export type CopilotChatInputProps = Omit<
-  CopilotChatInputBaseProps,
-  "children"
-> & {
-  children?: (props: CopilotChatInputChildrenArgs) => React.ReactNode;
-};
-
-const SLASH_MENU_MAX_VISIBLE_ITEMS = 5;
-const SLASH_MENU_ITEM_HEIGHT_PX = 40;
-
-export function CopilotChatInput({
-  mode = "input",
-  onSubmitMessage,
-  onStop,
-  isRunning = false,
-  onStartTranscribe,
-  onCancelTranscribe,
-  onFinishTranscribe,
-  onFinishTranscribeWithAudio,
-  onAddFile,
-  onChange,
-  value,
-  toolsMenu,
-  autoFocus = false,
-  positioning = "static",
-  keyboardHeight = 0,
-  containerRef,
-  showDisclaimer,
-  bottomAnchored = false,
-  textArea,
-  sendButton,
-  startTranscribeButton,
-  cancelTranscribeButton,
-  finishTranscribeButton,
-  addMenuButton,
-  audioRecorder,
-  disclaimer,
-  children,
-  className,
-  ...props
-}: CopilotChatInputProps) {
-  const isControlled = value !== undefined;
-  const [internalValue, setInternalValue] = useState<string>(() => value ?? "");
-
-  useEffect(() => {
-    if (!isControlled && value !== undefined) {
-      setInternalValue(value);
-    }
-  }, [isControlled, value]);
-
-  const resolvedValue = isControlled ? (value ?? "") : internalValue;
-
-  const [layout, setLayout] = useState<"compact" | "expanded">("compact");
-  const ignoreResizeRef = useRef(false);
-  const resizeEvaluationRafRef = useRef<number | null>(null);
-  const isExpanded = mode === "input" && layout === "expanded";
-  const [commandQuery, setCommandQuery] = useState<string | null>(null);
-  const [slashHighlightIndex, setSlashHighlightIndex] = useState(0);
-
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const gridRef = useRef<HTMLDivElement>(null);
-  const addButtonContainerRef = useRef<HTMLDivElement>(null);
-  const actionsContainerRef = useRef<HTMLDivElement>(null);
-  const audioRecorderRef =
-    useRef<React.ElementRef<typeof CopilotChatAudioRecorder>>(null);
-  const slashMenuRef = useRef<HTMLDivElement>(null);
-  const config = useCopilotChatConfiguration();
-  const labels = config?.labels ?? CopilotChatDefaultLabels;
-
-  const previousModalStateRef = useRef<boolean | undefined>(undefined);
-  const measurementCanvasRef = useRef<HTMLCanvasElement | null>(null);
-  const measurementsRef = useRef({
-    singleLineHeight: 0,
-    maxHeight: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
-  });
-
-  // Cached container dimensions — invalidated on resize, lazily repopulated on next layout pass.
-  // Eliminates getComputedStyle(grid) + 2x getBoundingClientRect per compact-layout evaluation.
-  const containerCacheRef = useRef<{
-    compactWidth: number;
-  } | null>(null);
-
-  const commandItems = useMemo(() => {
-    const entries: ToolsMenuItem[] = [];
-    const seen = new Set<string>();
-
-    const pushItem = (item: ToolsMenuItem | "-") => {
-      if (item === "-") {
-        return;
-      }
-
-      if (item.items && item.items.length > 0) {
-        for (const nested of item.items) {
-          pushItem(nested);
-        }
-        return;
-      }
-
-      if (!seen.has(item.label)) {
-        seen.add(item.label);
-        entries.push(item);
-      }
-    };
-
-    if (onAddFile) {
-      pushItem({
-        label: labels.chatInputToolbarAddButtonLabel,
-        action: onAddFile,
-      });
-    }
-
-    if (toolsMenu && toolsMenu.length > 0) {
-      for (const item of toolsMenu) {
-        pushItem(item);
-      }
-    }
-
-    return entries;
-  }, [labels.chatInputToolbarAddButtonLabel, onAddFile, toolsMenu]);
-
-  const filteredCommands = useMemo(() => {
-    if (commandQuery === null) {
-      return [] as ToolsMenuItem[];
-    }
-
-    if (commandItems.length === 0) {
-      return [] as ToolsMenuItem[];
-    }
-
-    const query = commandQuery.trim().toLowerCase();
-    if (query.length === 0) {
-      return commandItems;
-    }
-
-    const startsWith: ToolsMenuItem[] = [];
-    const contains: ToolsMenuItem[] = [];
-    for (const item of commandItems) {
-      const label = item.label.toLowerCase();
-      if (label.startsWith(query)) {
-        startsWith.push(item);
-      } else if (label.includes(query)) {
-        contains.push(item);
-      }
-    }
-
-    return [...startsWith, ...contains];
-  }, [commandItems, commandQuery]);
-
-  useEffect(() => {
-    if (!autoFocus) {
-      previousModalStateRef.current = config?.isModalOpen;
-      return;
-    }
-
-    if (config?.isModalOpen && !previousModalStateRef.current) {
-      inputRef.current?.focus({ preventScroll: true });
-    }
-
-    previousModalStateRef.current = config?.isModalOpen;
-  }, [config?.isModalOpen, autoFocus]);
-
-  useEffect(() => {
-    if (commandItems.length === 0 && commandQuery !== null) {
-      setCommandQuery(null);
-    }
-  }, [commandItems.length, commandQuery]);
-
-  const previousCommandQueryRef = useRef<string | null>(null);
-
-  useEffect(() => {
-    if (
-      commandQuery !== null &&
-      commandQuery !== previousCommandQueryRef.current &&
-      filteredCommands.length > 0
-    ) {
-      setSlashHighlightIndex(0);
-    }
-
-    previousCommandQueryRef.current = commandQuery;
-  }, [commandQuery, filteredCommands.length]);
-
-  useEffect(() => {
-    if (commandQuery === null) {
-      setSlashHighlightIndex(0);
-      return;
-    }
-
-    if (filteredCommands.length === 0) {
-      setSlashHighlightIndex(-1);
-    } else if (
-      slashHighlightIndex < 0 ||
-      slashHighlightIndex >= filteredCommands.length
-    ) {
-      setSlashHighlightIndex(0);
-    }
-  }, [commandQuery, filteredCommands, slashHighlightIndex]);
-
-  // Handle recording based on mode changes
-  useEffect(() => {
-    const recorder = audioRecorderRef.current;
-    if (!recorder) {
-      return;
-    }
-
-    if (mode === "transcribe") {
-      // Start recording when entering transcribe mode
-      recorder.start().catch(console.error);
-    } else {
-      // Stop recording when leaving transcribe mode
-      if (recorder.state === "recording") {
-        recorder.stop().catch(console.error);
-      }
-    }
-  }, [mode]);
-
-  useEffect(() => {
-    if (mode !== "input") {
-      setLayout("compact");
-      setCommandQuery(null);
-    }
-  }, [mode]);
-
-  const updateSlashState = useCallback(
-    (value: string) => {
-      if (commandItems.length === 0) {
-        setCommandQuery((prev) => (prev === null ? prev : null));
-        return;
-      }
-
-      if (value.startsWith("/")) {
-        const firstLine = value.split(/\r?\n/, 1)[0] ?? "";
-        const query = firstLine.slice(1);
-        setCommandQuery((prev) => (prev === query ? prev : query));
-      } else {
-        setCommandQuery((prev) => (prev === null ? prev : null));
-      }
-    },
-    [commandItems.length],
-  );
-
-  useEffect(() => {
-    updateSlashState(resolvedValue);
-  }, [resolvedValue, updateSlashState]);
-
-  // Handlers
-  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    const nextValue = e.target.value;
-    if (!isControlled) {
-      setInternalValue(nextValue);
-    }
-    onChange?.(nextValue);
-    updateSlashState(nextValue);
-  };
-
-  const clearInputValue = useCallback(() => {
-    if (!isControlled) {
-      setInternalValue("");
-    }
-
-    if (onChange) {
-      onChange("");
-    }
-  }, [isControlled, onChange]);
-
-  const runCommand = useCallback(
-    (item: ToolsMenuItem) => {
-      clearInputValue();
-
-      item.action?.();
-
-      setCommandQuery(null);
-      setSlashHighlightIndex(0);
-
-      requestAnimationFrame(() => {
-        inputRef.current?.focus();
-      });
-    },
-    [clearInputValue],
-  );
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
-    // Skip key handling during IME composition (e.g. CJK input).
-    // The compositionend event will fire separately when composition ends.
-    if (e.nativeEvent.isComposing || e.keyCode === 229) {
-      return;
-    }
-
-    if (commandQuery !== null && mode === "input") {
-      if (e.key === "ArrowDown") {
-        if (filteredCommands.length > 0) {
-          e.preventDefault();
-          setSlashHighlightIndex((prev) => {
-            if (filteredCommands.length === 0) {
-              return prev;
-            }
-            const next = prev === -1 ? 0 : (prev + 1) % filteredCommands.length;
-            return next;
-          });
-        }
-        return;
-      }
-
-      if (e.key === "ArrowUp") {
-        if (filteredCommands.length > 0) {
-          e.preventDefault();
-          setSlashHighlightIndex((prev) => {
-            if (filteredCommands.length === 0) {
-              return prev;
-            }
-            if (prev === -1) {
-              return filteredCommands.length - 1;
-            }
-            return prev <= 0 ? filteredCommands.length - 1 : prev - 1;
-          });
-        }
-        return;
-      }
-
-      if (e.key === "Enter") {
-        const selected =
-          slashHighlightIndex >= 0
-            ? filteredCommands[slashHighlightIndex]
-            : undefined;
-        if (selected) {
-          e.preventDefault();
-          runCommand(selected);
-          return;
-        }
-      }
-
-      if (e.key === "Escape") {
-        e.preventDefault();
-        setCommandQuery(null);
-        return;
-      }
-    }
-
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      if (isProcessing) {
-        onStop?.();
-      } else {
-        send();
-      }
-    }
-  };
-
-  const send = () => {
-    if (!onSubmitMessage) {
-      return;
-    }
-    const trimmed = resolvedValue.trim();
-    if (!trimmed) {
-      return;
-    }
-
-    onSubmitMessage(trimmed);
-
-    // Always clear the input after sending, including controlled mode.
-    // In controlled mode, onChange("") notifies the parent to reset its state.
-    if (!isControlled) {
-      setInternalValue("");
-    }
-    onChange?.("");
-
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  };
-
-  const BoundTextArea = renderSlot(textArea, CopilotChatInput.TextArea, {
-    ref: inputRef,
-    value: resolvedValue,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown,
-    onCompositionStart: () => {
-      isComposingRef.current = true;
-    },
-    onCompositionEnd: () => {
-      isComposingRef.current = false;
-    },
-    autoFocus: autoFocus,
-    className: twMerge(
-      "cpk:w-full cpk:py-3",
-      isExpanded ? "cpk:px-5" : "cpk:pr-5",
-    ),
-  });
-
-  const isProcessing = mode !== "transcribe" && isRunning;
-  const canSend = resolvedValue.trim().length > 0 && !!onSubmitMessage;
-  const canStop = !!onStop;
-
-  const handleSendButtonClick = () => {
-    if (isProcessing) {
-      onStop?.();
-      return;
-    }
-    send();
-  };
-
-  const BoundAudioRecorder = renderSlot(
-    audioRecorder,
-    CopilotChatAudioRecorder,
-    {
-      ref: audioRecorderRef,
-    },
-  );
-
-  const BoundSendButton = renderSlot(sendButton, CopilotChatInput.SendButton, {
-    onClick: handleSendButtonClick,
-    disabled: isProcessing ? !canStop : !canSend,
-    children:
-      isProcessing && canStop ? (
-        <Square className="cpk:size-[18px] cpk:fill-current" />
-      ) : undefined,
-  });
-
-  const BoundStartTranscribeButton = renderSlot(
-    startTranscribeButton,
-    CopilotChatInput.StartTranscribeButton,
-    {
-      onClick: onStartTranscribe,
-    },
-  );
-
-  const BoundCancelTranscribeButton = renderSlot(
-    cancelTranscribeButton,
-    CopilotChatInput.CancelTranscribeButton,
-    {
-      onClick: onCancelTranscribe,
-    },
-  );
-
-  // Handler for finish button - stops recording and passes audio blob
-  const handleFinishTranscribe = useCallback(async () => {
-    const recorder = audioRecorderRef.current;
-    if (recorder && recorder.state === "recording") {
-      try {
-        const audioBlob = await recorder.stop();
-        if (onFinishTranscribeWithAudio) {
-          await onFinishTranscribeWithAudio(audioBlob);
-        }
-      } catch (error) {
-        console.error("Failed to stop recording:", error);
-      }
-    }
-    // Always call the original handler to reset mode
-    onFinishTranscribe?.();
-  }, [onFinishTranscribe, onFinishTranscribeWithAudio]);
-
-  const BoundFinishTranscribeButton = renderSlot(
-    finishTranscribeButton,
-    CopilotChatInput.FinishTranscribeButton,
-    {
-      onClick: handleFinishTranscribe,
-    },
-  );
-
-  const BoundAddMenuButton = renderSlot(
-    addMenuButton,
-    CopilotChatInput.AddMenuButton,
-    {
-      disabled: mode === "transcribe",
-      onAddFile,
-      toolsMenu,
-    },
-  );
-
-  const BoundDisclaimer = renderSlot(
-    disclaimer,
-    CopilotChatInput.Disclaimer,
-    {},
-  );
-
-  // Determine whether to show disclaimer based on prop or positioning default
-  const shouldShowDisclaimer = showDisclaimer ?? positioning === "absolute";
-
-  if (children) {
-    const childProps = {
-      textArea: BoundTextArea,
-      audioRecorder: BoundAudioRecorder,
-      sendButton: BoundSendButton,
-      startTranscribeButton: BoundStartTranscribeButton,
-      cancelTranscribeButton: BoundCancelTranscribeButton,
-      finishTranscribeButton: BoundFinishTranscribeButton,
-      addMenuButton: BoundAddMenuButton,
-      disclaimer: BoundDisclaimer,
-      onSubmitMessage,
-      onStop,
-      isRunning,
-      onStartTranscribe,
-      onCancelTranscribe,
-      onFinishTranscribe,
-      onAddFile,
-      mode,
-      toolsMenu,
-      autoFocus,
-      positioning,
-      keyboardHeight,
-      showDisclaimer: shouldShowDisclaimer,
-      containerRef,
-    } as CopilotChatInputChildrenArgs;
-
-    return (
-      <div data-copilotkit style={{ display: "contents" }}>
-        {children(childProps)}
-      </div>
-    );
-  }
-
-  const handleContainerClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    // Don't focus if clicking on buttons or other interactive elements
-    const target = e.target as HTMLElement;
-    if (
-      target.tagName !== "BUTTON" &&
-      !target.closest("button") &&
-      inputRef.current &&
-      mode === "input"
-    ) {
-      inputRef.current.focus();
-    }
-  };
-
-  // Track whether an IME composition is active so we can avoid
-  // resetting textarea.value during measurement (which would break
-  // the composition session).
-  const isComposingRef = useRef(false);
-
-  const ensureMeasurements = useCallback(() => {
-    const textarea = inputRef.current;
-    if (!textarea || isComposingRef.current) {
-      return;
-    }
-
-    const previousValue = textarea.value;
-    const previousHeight = textarea.style.height;
-
-    textarea.style.height = "auto";
-
-    const computedStyle = window.getComputedStyle(textarea);
-    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
-    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
-    const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
-    const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
-
-    textarea.value = "";
-    const singleLineHeight = textarea.scrollHeight;
-    textarea.value = previousValue;
-
-    const contentHeight = singleLineHeight - paddingTop - paddingBottom;
-    const maxHeight = contentHeight * 5 + paddingTop + paddingBottom;
-
-    measurementsRef.current = {
-      singleLineHeight,
-      maxHeight,
-      paddingLeft,
-      paddingRight,
-    };
-
-    textarea.style.height = previousHeight;
-    textarea.style.maxHeight = `${maxHeight}px`;
-  }, []);
-
-  const adjustTextareaHeight = useCallback(() => {
-    const textarea = inputRef.current;
-    if (!textarea) {
-      return 0;
-    }
-
-    if (measurementsRef.current.singleLineHeight === 0) {
-      ensureMeasurements();
-    }
-
-    const { maxHeight } = measurementsRef.current;
-    if (maxHeight) {
-      textarea.style.maxHeight = `${maxHeight}px`;
-    }
-
-    textarea.style.height = "auto";
-    const scrollHeight = textarea.scrollHeight;
-    if (maxHeight) {
-      textarea.style.height = `${Math.min(scrollHeight, maxHeight)}px`;
-    } else {
-      textarea.style.height = `${scrollHeight}px`;
-    }
-
-    return scrollHeight;
-  }, [ensureMeasurements]);
-
-  const updateLayout = useCallback((nextLayout: "compact" | "expanded") => {
-    setLayout((prev) => {
-      if (prev === nextLayout) {
-        return prev;
-      }
-      ignoreResizeRef.current = true;
-      return nextLayout;
-    });
-  }, []);
-
-  const updateContainerCache = useCallback((): {
-    compactWidth: number;
-  } | null => {
-    const grid = gridRef.current;
-    const addContainer = addButtonContainerRef.current;
-    const actionsContainer = actionsContainerRef.current;
-    if (!grid || !addContainer || !actionsContainer) return null;
-
-    const gridStyles = window.getComputedStyle(grid);
-    const paddingLeft = parseFloat(gridStyles.paddingLeft) || 0;
-    const paddingRight = parseFloat(gridStyles.paddingRight) || 0;
-    const columnGap = parseFloat(gridStyles.columnGap) || 0;
-    const gridAvailableWidth = grid.clientWidth - paddingLeft - paddingRight;
-
-    if (gridAvailableWidth <= 0) return null;
-
-    const addWidth = addContainer.getBoundingClientRect().width;
-    const actionsWidth = actionsContainer.getBoundingClientRect().width;
-    const compactWidth = Math.max(
-      gridAvailableWidth - addWidth - actionsWidth - columnGap * 2,
-      0,
-    );
-
-    if (compactWidth <= 0) return null;
-
-    const result = { compactWidth };
-    containerCacheRef.current = result;
-    return result;
-  }, []);
-
-  const evaluateLayout = useCallback(() => {
-    if (mode !== "input") {
-      updateLayout("compact");
-      return;
-    }
-
-    if (
-      typeof window !== "undefined" &&
-      typeof window.matchMedia === "function"
-    ) {
-      const isMobileViewport = window.matchMedia("(max-width: 767px)").matches;
-      if (isMobileViewport) {
-        ensureMeasurements();
-        adjustTextareaHeight();
-        updateLayout("expanded");
-        return;
-      }
-    }
-
-    const textarea = inputRef.current;
-    const grid = gridRef.current;
-    const addContainer = addButtonContainerRef.current;
-    const actionsContainer = actionsContainerRef.current;
-
-    if (!textarea || !grid || !addContainer || !actionsContainer) {
-      return;
-    }
-
-    if (measurementsRef.current.singleLineHeight === 0) {
-      ensureMeasurements();
-    }
-
-    const scrollHeight = adjustTextareaHeight();
-    const baseline = measurementsRef.current.singleLineHeight;
-    const hasExplicitBreak = resolvedValue.includes("\n");
-    const renderedMultiline =
-      baseline > 0 ? scrollHeight > baseline + 1 : false;
-    let shouldExpand = hasExplicitBreak || renderedMultiline;
-
-    if (!shouldExpand) {
-      // Use cached container dimensions (lazily populated on first access, invalidated on resize).
-      const cache = containerCacheRef.current ?? updateContainerCache();
-
-      if (cache && cache.compactWidth > 0) {
-        const compactInnerWidth = Math.max(
-          cache.compactWidth -
-            (measurementsRef.current.paddingLeft || 0) -
-            (measurementsRef.current.paddingRight || 0),
-          0,
-        );
-
-        if (compactInnerWidth > 0) {
-          // Read font fresh each evaluation — getComputedStyle for style-only
-          // properties is cheap and avoids stale values after CSS/theme changes.
-          const textareaStyles = window.getComputedStyle(textarea);
-          let font = textareaStyles.font;
-          if (!font) {
-            const {
-              fontStyle,
-              fontVariant,
-              fontWeight,
-              fontSize,
-              lineHeight,
-              fontFamily,
-            } = textareaStyles;
-            if (fontSize && fontFamily) {
-              font = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`;
-            }
-          }
-
-          if (font?.trim()) {
-            const canvas =
-              measurementCanvasRef.current ?? document.createElement("canvas");
-            if (!measurementCanvasRef.current) {
-              measurementCanvasRef.current = canvas;
-            }
-
-            const context = canvas.getContext("2d");
-            if (context) {
-              context.font = font;
-
-              const lines =
-                resolvedValue.length > 0 ? resolvedValue.split("\n") : [""];
-              let longestWidth = 0;
-              for (const line of lines) {
-                const metrics = context.measureText(line || " ");
-                if (metrics.width > longestWidth) {
-                  longestWidth = metrics.width;
-                }
-              }
-
-              if (longestWidth > compactInnerWidth) {
-                shouldExpand = true;
-              }
-            } else if (process.env.NODE_ENV !== "production") {
-              console.warn(
-                "[CopilotChatInput] canvas.getContext('2d') returned null. " +
-                  "Text-width-based expansion will be unavailable.",
-              );
-            }
-          } else if (process.env.NODE_ENV !== "production") {
-            console.warn(
-              "[CopilotChatInput] Could not resolve textarea font for layout measurement. " +
-                "Text-width-based expansion will be skipped until the next evaluation.",
-            );
-          }
-        }
-      }
-    }
-
-    const nextLayout = shouldExpand ? "expanded" : "compact";
-    updateLayout(nextLayout);
-  }, [
-    adjustTextareaHeight,
-    ensureMeasurements,
-    mode,
-    resolvedValue,
-    updateContainerCache,
-    updateLayout,
-  ]);
-
-  useLayoutEffect(() => {
-    evaluateLayout();
-  }, [evaluateLayout]);
-
-  useEffect(() => {
-    if (typeof ResizeObserver === "undefined") {
-      return;
-    }
-
-    const textarea = inputRef.current;
-    const grid = gridRef.current;
-    const addContainer = addButtonContainerRef.current;
-    const actionsContainer = actionsContainerRef.current;
-
-    if (!textarea || !grid || !addContainer || !actionsContainer) {
-      return;
-    }
-
-    const containerTargets = new Set<Element>([
-      grid,
-      addContainer,
-      actionsContainer,
-    ]);
-
-    const scheduleEvaluation = (invalidateCache: boolean) => {
-      if (ignoreResizeRef.current) {
-        ignoreResizeRef.current = false;
-        // Self-inflicted resize from a layout toggle — container dimensions
-        // are unchanged, so keep the cache warm.
-        return;
-      }
-
-      if (invalidateCache) {
-        containerCacheRef.current = null;
-      }
-
-      if (typeof window === "undefined") {
-        evaluateLayout();
-        return;
-      }
-
-      if (resizeEvaluationRafRef.current !== null) {
-        cancelAnimationFrame(resizeEvaluationRafRef.current);
-      }
-
-      resizeEvaluationRafRef.current = window.requestAnimationFrame(() => {
-        resizeEvaluationRafRef.current = null;
-        evaluateLayout();
-      });
-    };
-
-    // Single observer for all elements — inspect entry.target to decide
-    // whether to invalidate the container dimension cache.  Container
-    // targets (grid, buttons) changing size means compactWidth may have
-    // changed; textarea height changes (typing) do not affect it.
-    const observer = new ResizeObserver((entries) => {
-      let shouldInvalidate = false;
-      for (const entry of entries) {
-        if (containerTargets.has(entry.target)) {
-          shouldInvalidate = true;
-          break;
-        }
-      }
-      scheduleEvaluation(shouldInvalidate);
-    });
-
-    observer.observe(grid);
-    observer.observe(addContainer);
-    observer.observe(actionsContainer);
-    observer.observe(textarea);
-
-    return () => {
-      observer.disconnect();
-      if (
-        typeof window !== "undefined" &&
-        resizeEvaluationRafRef.current !== null
-      ) {
-        cancelAnimationFrame(resizeEvaluationRafRef.current);
-        resizeEvaluationRafRef.current = null;
-      }
-    };
-  }, [evaluateLayout]);
-
-  const slashMenuVisible = commandQuery !== null && commandItems.length > 0;
-
-  useEffect(() => {
-    if (!slashMenuVisible || slashHighlightIndex < 0) {
-      return;
-    }
-
-    const active = slashMenuRef.current?.querySelector<HTMLElement>(
-      `[data-slash-index="${slashHighlightIndex}"]`,
-    );
-    active?.scrollIntoView({ block: "nearest" });
-  }, [slashMenuVisible, slashHighlightIndex]);
-
-  const slashMenu = slashMenuVisible ? (
-    <div
-      data-testid="copilot-slash-menu"
-      role="listbox"
-      aria-label="Slash commands"
-      ref={slashMenuRef}
-      className="cpk:absolute cpk:bottom-full cpk:left-0 cpk:right-0 cpk:z-30 cpk:mb-2 cpk:max-h-64 cpk:overflow-y-auto cpk:rounded-lg cpk:border cpk:border-border cpk:bg-white cpk:shadow-lg cpk:dark:border-[#3a3a3a] cpk:dark:bg-[#1f1f1f]"
-      style={{
-        maxHeight: `${SLASH_MENU_MAX_VISIBLE_ITEMS * SLASH_MENU_ITEM_HEIGHT_PX}px`,
-      }}
-    >
-      {filteredCommands.length === 0 ? (
-        <div className="cpk:px-3 cpk:py-2 cpk:text-sm cpk:text-muted-foreground">
-          No commands found
-        </div>
-      ) : (
-        filteredCommands.map((item, index) => {
-          const isActive = index === slashHighlightIndex;
-          return (
-            <button
-              key={`${item.label}-${index}`}
-              type="button"
-              role="option"
-              aria-selected={isActive}
-              data-active={isActive ? "true" : undefined}
-              data-slash-index={index}
-              className={twMerge(
-                "cpk:w-full cpk:px-3 cpk:py-2 cpk:text-left cpk:text-sm cpk:transition-colors",
-                "cpk:hover:bg-muted cpk:dark:hover:bg-[#2f2f2f]",
-                isActive
-                  ? "cpk:bg-muted cpk:dark:bg-[#2f2f2f]"
-                  : "cpk:bg-transparent",
-              )}
-              onMouseEnter={() => setSlashHighlightIndex(index)}
-              onMouseDown={(event) => {
-                event.preventDefault();
-                runCommand(item);
-              }}
-            >
-              {item.label}
-            </button>
-          );
-        })
-      )}
-    </div>
-  ) : null;
-
-  // The input pill (inner component)
-  const inputPill = (
-    <div
-      data-testid="copilot-chat-input"
-      className={twMerge(
-        // V1 compatibility class for custom styling
-        "copilotKitInput",
-        // Layout
-        "cpk:flex cpk:w-full cpk:flex-col cpk:items-center cpk:justify-center",
-        // Interaction
-        "cpk:cursor-text",
-        // Overflow and clipping
-        "cpk:overflow-visible cpk:bg-clip-padding cpk:contain-inline-size",
-        // Background
-        "cpk:bg-white cpk:dark:bg-[#303030]",
-        // Visual effects
-        "cpk:shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] cpk:rounded-[28px]",
-      )}
-      onClick={handleContainerClick}
-      data-layout={isExpanded ? "expanded" : "compact"}
-    >
-      <div
-        ref={gridRef}
-        className={twMerge(
-          "cpk:grid cpk:w-full cpk:gap-x-3 cpk:gap-y-3 cpk:px-3 cpk:py-2",
-          isExpanded
-            ? "cpk:grid-cols-[auto_minmax(0,1fr)_auto] cpk:grid-rows-[auto_auto]"
-            : "cpk:grid-cols-[auto_minmax(0,1fr)_auto] cpk:items-center",
-        )}
-        data-layout={isExpanded ? "expanded" : "compact"}
-      >
-        <div
-          ref={addButtonContainerRef}
-          className={twMerge(
-            "cpk:flex cpk:items-center",
-            isExpanded ? "cpk:row-start-2" : "cpk:row-start-1",
-            "cpk:col-start-1",
-          )}
-        >
-          {BoundAddMenuButton}
-        </div>
-        <div
-          className={twMerge(
-            "cpk:relative cpk:flex cpk:min-w-0 cpk:flex-col cpk:min-h-[50px] cpk:justify-center",
-            isExpanded
-              ? "cpk:col-span-3 cpk:row-start-1"
-              : "cpk:col-start-2 cpk:row-start-1",
-          )}
-        >
-          {mode === "transcribe" ? (
-            BoundAudioRecorder
-          ) : mode === "processing" ? (
-            <div className="cpk:flex cpk:w-full cpk:items-center cpk:justify-center cpk:py-3 cpk:px-5">
-              <Loader2 className="cpk:size-[26px] cpk:animate-spin cpk:text-muted-foreground" />
-            </div>
-          ) : (
-            <>
-              {BoundTextArea}
-              {slashMenu}
-            </>
-          )}
-        </div>
-        <div
-          ref={actionsContainerRef}
-          className={twMerge(
-            "cpk:flex cpk:items-center cpk:justify-end cpk:gap-2",
-            isExpanded
-              ? "cpk:col-start-3 cpk:row-start-2"
-              : "cpk:col-start-3 cpk:row-start-1",
-          )}
-        >
-          {mode === "transcribe" ? (
-            <>
-              {onCancelTranscribe && BoundCancelTranscribeButton}
-              {onFinishTranscribe && BoundFinishTranscribeButton}
-            </>
-          ) : (
-            <>
-              {onStartTranscribe && BoundStartTranscribeButton}
-              {BoundSendButton}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-
-  return (
-    <div
-      data-copilotkit
-      ref={containerRef}
-      className={cn(
-        "cpk:pointer-events-none cpk:relative cpk:z-20",
-        positioning === "absolute" &&
-          "cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0",
-        className,
-      )}
-      style={{
-        transform:
-          keyboardHeight > 0 ? `translateY(-${keyboardHeight}px)` : undefined,
-        transition: "transform 0.2s ease-out",
-        // Reserve room when the fixed license banner is visible so it doesn't
-        // overlap the input. Applied only for bottom-anchored inputs (either
-        // `positioning === "absolute"`, or an explicitly-flagged flex-last-child
-        // input in run state). The welcome-screen input sits mid-layout and
-        // must stay still when the banner is present.
-        ...(positioning === "absolute" || bottomAnchored
-          ? { paddingBottom: "var(--copilotkit-license-banner-offset, 0px)" }
-          : {}),
-      }}
-      {...props}
-    >
-      <div className="cpk:max-w-3xl cpk:mx-auto cpk:py-0 cpk:px-4 cpk:sm:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-4 cpk:pointer-events-auto">
-        {inputPill}
-      </div>
-      {shouldShowDisclaimer && BoundDisclaimer}
-    </div>
-  );
-}
-
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace CopilotChatInput {
-  export const SendButton: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  > = ({ className, children, ...props }) => (
-    <div className="cpk:mr-[10px]">
-      <Button
-        type="button"
-        data-testid="copilot-send-button"
-        variant="chatInputToolbarPrimary"
-        size="chatInputToolbarIcon"
-        className={className}
-        {...props}
-      >
-        {children ?? <ArrowUp className="cpk:size-[18px]" />}
-      </Button>
-    </div>
-  );
-
-  export const ToolbarButton: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement> & {
-      icon: React.ReactNode;
-      labelKey: keyof CopilotChatLabels;
-      defaultClassName?: string;
-    }
-  > = ({ icon, labelKey, defaultClassName, className, ...props }) => {
-    const config = useCopilotChatConfiguration();
-    const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            type="button"
-            variant="chatInputToolbarSecondary"
-            size="chatInputToolbarIcon"
-            className={twMerge(defaultClassName, className)}
-            {...props}
-          >
-            {icon}
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side="bottom">
-          <p>{labels[labelKey]}</p>
-        </TooltipContent>
-      </Tooltip>
-    );
-  };
-
-  export const StartTranscribeButton: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  > = (props) => (
-    <ToolbarButton
-      data-testid="copilot-start-transcribe-button"
-      icon={<Mic className="cpk:size-[18px]" />}
-      labelKey="chatInputToolbarStartTranscribeButtonLabel"
-      defaultClassName="cpk:mr-2"
-      {...props}
-    />
-  );
-
-  export const CancelTranscribeButton: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  > = (props) => (
-    <ToolbarButton
-      data-testid="copilot-cancel-transcribe-button"
-      icon={<X className="cpk:size-[18px]" />}
-      labelKey="chatInputToolbarCancelTranscribeButtonLabel"
-      defaultClassName="cpk:mr-2"
-      {...props}
-    />
-  );
-
-  export const FinishTranscribeButton: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement>
-  > = (props) => (
-    <ToolbarButton
-      data-testid="copilot-finish-transcribe-button"
-      icon={<Check className="cpk:size-[18px]" />}
-      labelKey="chatInputToolbarFinishTranscribeButtonLabel"
-      defaultClassName="cpk:mr-[10px]"
-      {...props}
-    />
-  );
-
-  export const AddMenuButton: React.FC<
-    React.ButtonHTMLAttributes<HTMLButtonElement> & {
-      toolsMenu?: (ToolsMenuItem | "-")[];
-      onAddFile?: () => void;
-    }
-  > = ({ className, toolsMenu, onAddFile, disabled, ...props }) => {
-    const config = useCopilotChatConfiguration();
-    const labels = config?.labels ?? CopilotChatDefaultLabels;
-
-    // Defer Radix UI rendering until after hydration to avoid ID mismatches
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => setMounted(true), []);
-
-    const menuItems = useMemo<(ToolsMenuItem | "-")[]>(() => {
-      const items: (ToolsMenuItem | "-")[] = [];
-
-      if (onAddFile) {
-        items.push({
-          label: labels.chatInputToolbarAddButtonLabel,
-          action: onAddFile,
-        });
-      }
-
-      if (toolsMenu && toolsMenu.length > 0) {
-        if (items.length > 0) {
-          items.push("-");
-        }
-
-        for (const item of toolsMenu) {
-          if (item === "-") {
-            if (items.length === 0 || items[items.length - 1] === "-") {
-              continue;
-            }
-            items.push(item);
-          } else {
-            items.push(item);
-          }
-        }
-
-        while (items.length > 0 && items[items.length - 1] === "-") {
-          items.pop();
-        }
-      }
-
-      return items;
-    }, [onAddFile, toolsMenu, labels.chatInputToolbarAddButtonLabel]);
-
-    const renderMenuItems = useCallback(
-      (items: (ToolsMenuItem | "-")[]): React.ReactNode =>
-        items.map((item, index) => {
-          if (item === "-") {
-            return <DropdownMenuSeparator key={`separator-${index}`} />;
-          }
-
-          if (item.items && item.items.length > 0) {
-            return (
-              <DropdownMenuSub key={`group-${index}`}>
-                <DropdownMenuSubTrigger>{item.label}</DropdownMenuSubTrigger>
-                <DropdownMenuSubContent>
-                  {renderMenuItems(item.items)}
-                </DropdownMenuSubContent>
-              </DropdownMenuSub>
-            );
-          }
-
-          return (
-            <DropdownMenuItem key={`item-${index}`} onClick={item.action}>
-              {item.label}
-            </DropdownMenuItem>
-          );
-        }),
-      [],
-    );
-
-    const hasMenuItems = menuItems.length > 0;
-    const isDisabled = disabled || !hasMenuItems;
-
-    const button = (
-      <Button
-        type="button"
-        data-testid="copilot-add-menu-button"
-        variant="chatInputToolbarSecondary"
-        size="chatInputToolbarIcon"
-        className={twMerge("cpk:ml-1", className)}
-        disabled={isDisabled}
-        {...props}
-      >
-        <Plus className="cpk:size-[20px]" />
-      </Button>
-    );
-
-    // Render plain button during SSR; Radix wrappers only after hydration
-    if (!mounted) return button;
-
-    return (
-      <DropdownMenu>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <DropdownMenuTrigger asChild>{button}</DropdownMenuTrigger>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">
-            <p className="cpk:flex cpk:items-center cpk:gap-1 cpk:text-xs cpk:font-medium">
-              <span>Add attachments</span>
-              <code className="cpk:rounded cpk:bg-[#4a4a4a] cpk:px-1 cpk:py-[1px] cpk:font-mono cpk:text-[11px] cpk:text-white cpk:dark:bg-[#e0e0e0] cpk:dark:text-black">
-                /
-              </code>
-            </p>
-          </TooltipContent>
-        </Tooltip>
-        {hasMenuItems && (
-          <DropdownMenuContent side="top" align="start">
-            {renderMenuItems(menuItems)}
-          </DropdownMenuContent>
-        )}
-      </DropdownMenu>
-    );
-  };
-
-  export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-
-  export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-    function TextArea(
-      { style, className, autoFocus, placeholder, ...props },
-      ref,
-    ) {
-      const internalTextareaRef = useRef<HTMLTextAreaElement>(null);
-      const config = useCopilotChatConfiguration();
-      const labels = config?.labels ?? CopilotChatDefaultLabels;
-
-      useImperativeHandle(
-        ref,
-        () => internalTextareaRef.current as HTMLTextAreaElement,
-      );
-
-      useEffect(() => {
-        if (autoFocus) {
-          internalTextareaRef.current?.focus({ preventScroll: true });
-        }
-      }, [autoFocus]);
-
-      return (
-        <textarea
-          ref={internalTextareaRef}
-          data-testid="copilot-chat-textarea"
-          placeholder={placeholder ?? labels.chatInputPlaceholder}
-          className={twMerge(
-            "cpk:bg-transparent cpk:outline-none cpk:antialiased cpk:font-regular cpk:leading-relaxed cpk:text-[16px] cpk:placeholder:text-[#00000077] cpk:dark:placeholder:text-[#fffc]",
-            className,
-          )}
-          style={{
-            overflow: "auto",
-            resize: "none",
-            ...style,
-          }}
-          rows={1}
-          {...props}
-        />
-      );
-    },
-  );
-
-  export const AudioRecorder = CopilotChatAudioRecorder;
-
-  export const Disclaimer: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-    className,
-    ...props
-  }) => {
-    const config = useCopilotChatConfiguration();
-    const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return (
-      <div
-        className={cn(
-          "cpk:text-center cpk:text-xs cpk:text-muted-foreground cpk:py-3 cpk:px-4 cpk:max-w-3xl cpk:mx-auto",
-          className,
-        )}
-        {...props}
-      >
-        {labels.chatDisclaimerText}
-      </div>
-    );
-  };
-}
-
-CopilotChatInput.TextArea.displayName = "CopilotChatInput.TextArea";
-CopilotChatInput.SendButton.displayName = "CopilotChatInput.SendButton";
-CopilotChatInput.ToolbarButton.displayName = "CopilotChatInput.ToolbarButton";
-CopilotChatInput.StartTranscribeButton.displayName =
-  "CopilotChatInput.StartTranscribeButton";
-CopilotChatInput.CancelTranscribeButton.displayName =
-  "CopilotChatInput.CancelTranscribeButton";
-CopilotChatInput.FinishTranscribeButton.displayName =
-  "CopilotChatInput.FinishTranscribeButton";
-CopilotChatInput.AddMenuButton.displayName = "CopilotChatInput.AddMenuButton";
-CopilotChatInput.Disclaimer.displayName = "CopilotChatInput.Disclaimer";
-
-export default CopilotChatInput;