@copilotkitnext/react 1.52.0-next.5 → 1.52.0-next.7

package/dist/components/chat/CopilotChatInput.mjs

@@ -213,7 +213,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		onChange: handleChange,
 		onKeyDown: handleKeyDown,
 		autoFocus,
-		className: twMerge("w-full py-3", isExpanded ? "px-5" : "pr-5")
+		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;
@@ -229,7 +229,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	const BoundSendButton = renderSlot(sendButton, CopilotChatInput.SendButton, {
 		onClick: handleSendButtonClick,
 		disabled: isProcessing ? !canStop : !canSend,
-		children: isProcessing && canStop ? /* @__PURE__ */ jsx(Square, { className: "size-[18px] fill-current" }) : void 0
+		children: isProcessing && canStop ? /* @__PURE__ */ jsx(Square, { className: "cpk:size-[18px] cpk:fill-current" }) : void 0
 	});
 	const BoundStartTranscribeButton = renderSlot(startTranscribeButton, CopilotChatInput.StartTranscribeButton, { onClick: onStartTranscribe });
 	const BoundCancelTranscribeButton = renderSlot(cancelTranscribeButton, CopilotChatInput.CancelTranscribeButton, { onClick: onCancelTranscribe });
@@ -251,29 +251,36 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	});
 	const BoundDisclaimer = renderSlot(disclaimer, CopilotChatInput.Disclaimer, {});
 	const shouldShowDisclaimer = showDisclaimer ?? positioning === "absolute";
-	if (children) return /* @__PURE__ */ jsx(Fragment, { children: children({
-		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
-	}) });
+	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
+		};
+		return /* @__PURE__ */ jsx("div", {
+			"data-copilotkit": true,
+			style: { display: "contents" },
+			children: children(childProps)
+		});
+	}
 	const handleContainerClick = (e) => {
 		const target = e.target;
 		if (target.tagName !== "BUTTON" && !target.closest("button") && inputRef.current && mode === "input") inputRef.current.focus();
@@ -432,10 +439,10 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		role: "listbox",
 		"aria-label": "Slash commands",
 		ref: slashMenuRef,
-		className: "absolute bottom-full left-0 right-0 z-30 mb-2 max-h-64 overflow-y-auto rounded-lg border border-border bg-white shadow-lg dark:border-[#3a3a3a] dark:bg-[#1f1f1f]",
+		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` },
 		children: filteredCommands.length === 0 ? /* @__PURE__ */ jsx("div", {
-			className: "px-3 py-2 text-sm text-muted-foreground",
+			className: "cpk:px-3 cpk:py-2 cpk:text-sm cpk:text-muted-foreground",
 			children: "No commands found"
 		}) : filteredCommands.map((item, index) => {
 			const isActive = index === slashHighlightIndex;
@@ -445,7 +452,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 				"aria-selected": isActive,
 				"data-active": isActive ? "true" : void 0,
 				"data-slash-index": index,
-				className: twMerge("w-full px-3 py-2 text-left text-sm transition-colors", "hover:bg-muted dark:hover:bg-[#2f2f2f]", isActive ? "bg-muted dark:bg-[#2f2f2f]" : "bg-transparent"),
+				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();
@@ -456,58 +463,59 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		})
 	}) : null;
 	const inputPill = /* @__PURE__ */ jsx("div", {
-		className: twMerge("flex w-full flex-col items-center justify-center", "cursor-text", "overflow-visible bg-clip-padding contain-inline-size", "bg-white dark:bg-[#303030]", "shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] rounded-[28px]"),
+		className: twMerge("cpk:flex cpk:w-full cpk:flex-col cpk:items-center cpk:justify-center", "cpk:cursor-text", "cpk:overflow-visible cpk:bg-clip-padding cpk:contain-inline-size", "cpk:bg-white cpk:dark:bg-[#303030]", "cpk:shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] cpk:rounded-[28px]"),
 		onClick: handleContainerClick,
 		"data-layout": isExpanded ? "expanded" : "compact",
 		children: /* @__PURE__ */ jsxs("div", {
 			ref: gridRef,
-			className: twMerge("grid w-full gap-x-3 gap-y-3 px-3 py-2", isExpanded ? "grid-cols-[auto_minmax(0,1fr)_auto] grid-rows-[auto_auto]" : "grid-cols-[auto_minmax(0,1fr)_auto] items-center"),
+			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",
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					ref: addButtonContainerRef,
-					className: twMerge("flex items-center", isExpanded ? "row-start-2" : "row-start-1", "col-start-1"),
+					className: twMerge("cpk:flex cpk:items-center", isExpanded ? "cpk:row-start-2" : "cpk:row-start-1", "cpk:col-start-1"),
 					children: BoundAddMenuButton
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: twMerge("relative flex min-w-0 flex-col min-h-[50px] justify-center", isExpanded ? "col-span-3 row-start-1" : "col-start-2 row-start-1"),
+					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"),
 					children: mode === "transcribe" ? BoundAudioRecorder : mode === "processing" ? /* @__PURE__ */ jsx("div", {
-						className: "flex w-full items-center justify-center py-3 px-5",
-						children: /* @__PURE__ */ jsx(Loader2, { className: "size-[26px] animate-spin text-muted-foreground" })
+						className: "cpk:flex cpk:w-full cpk:items-center cpk:justify-center cpk:py-3 cpk:px-5",
+						children: /* @__PURE__ */ jsx(Loader2, { className: "cpk:size-[26px] cpk:animate-spin cpk:text-muted-foreground" })
 					}) : /* @__PURE__ */ jsxs(Fragment, { children: [BoundTextArea, slashMenu] })
 				}),
 				/* @__PURE__ */ jsx("div", {
 					ref: actionsContainerRef,
-					className: twMerge("flex items-center justify-end gap-2", isExpanded ? "col-start-3 row-start-2" : "col-start-3 row-start-1"),
+					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"),
 					children: mode === "transcribe" ? /* @__PURE__ */ jsxs(Fragment, { children: [onCancelTranscribe && BoundCancelTranscribeButton, onFinishTranscribe && BoundFinishTranscribeButton] }) : /* @__PURE__ */ jsxs(Fragment, { children: [onStartTranscribe && BoundStartTranscribeButton, BoundSendButton] })
 				})
 			]
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
+		"data-copilotkit": true,
 		ref: containerRef,
-		className: cn(positioning === "absolute" && "absolute bottom-0 left-0 right-0 z-20 pointer-events-none", className),
+		className: cn(positioning === "absolute" && "cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0 cpk:z-20 cpk:pointer-events-none", className),
 		style: {
 			transform: keyboardHeight > 0 ? `translateY(-${keyboardHeight}px)` : void 0,
 			transition: "transform 0.2s ease-out"
 		},
 		...props,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "max-w-3xl mx-auto py-0 px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-4 pointer-events-auto",
+			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",
 			children: inputPill
 		}), shouldShowDisclaimer && BoundDisclaimer]
 	});
 }
 (function(_CopilotChatInput) {
 	_CopilotChatInput.SendButton = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", {
-		className: "mr-[10px]",
+		className: "cpk:mr-[10px]",
 		children: /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "chatInputToolbarPrimary",
 			size: "chatInputToolbarIcon",
 			className,
 			...props,
-			children: children ?? /* @__PURE__ */ jsx(ArrowUp, { className: "size-[18px]" })
+			children: children ?? /* @__PURE__ */ jsx(ArrowUp, { className: "cpk:size-[18px]" })
 		})
 	});
 	const ToolbarButton = _CopilotChatInput.ToolbarButton = ({ icon, labelKey, defaultClassName, className, ...props }) => {
@@ -528,21 +536,21 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		})] });
 	};
 	_CopilotChatInput.StartTranscribeButton = (props) => /* @__PURE__ */ jsx(ToolbarButton, {
-		icon: /* @__PURE__ */ jsx(Mic, { className: "size-[18px]" }),
+		icon: /* @__PURE__ */ jsx(Mic, { className: "cpk:size-[18px]" }),
 		labelKey: "chatInputToolbarStartTranscribeButtonLabel",
-		defaultClassName: "mr-2",
+		defaultClassName: "cpk:mr-2",
 		...props
 	});
 	_CopilotChatInput.CancelTranscribeButton = (props) => /* @__PURE__ */ jsx(ToolbarButton, {
-		icon: /* @__PURE__ */ jsx(X, { className: "size-[18px]" }),
+		icon: /* @__PURE__ */ jsx(X, { className: "cpk:size-[18px]" }),
 		labelKey: "chatInputToolbarCancelTranscribeButtonLabel",
-		defaultClassName: "mr-2",
+		defaultClassName: "cpk:mr-2",
 		...props
 	});
 	_CopilotChatInput.FinishTranscribeButton = (props) => /* @__PURE__ */ jsx(ToolbarButton, {
-		icon: /* @__PURE__ */ jsx(Check, { className: "size-[18px]" }),
+		icon: /* @__PURE__ */ jsx(Check, { className: "cpk:size-[18px]" }),
 		labelKey: "chatInputToolbarFinishTranscribeButtonLabel",
-		defaultClassName: "mr-[10px]",
+		defaultClassName: "cpk:mr-[10px]",
 		...props
 	});
 	_CopilotChatInput.AddMenuButton = ({ className, toolsMenu, onAddFile, disabled, ...props }) => {
@@ -585,18 +593,18 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 					type: "button",
 					variant: "chatInputToolbarSecondary",
 					size: "chatInputToolbarIcon",
-					className: twMerge("ml-1", className),
+					className: twMerge("cpk:ml-1", className),
 					disabled: isDisabled,
 					...props,
-					children: /* @__PURE__ */ jsx(Plus, { className: "size-[20px]" })
+					children: /* @__PURE__ */ jsx(Plus, { className: "cpk:size-[20px]" })
 				})
 			})
 		}), /* @__PURE__ */ jsx(TooltipContent, {
 			side: "bottom",
 			children: /* @__PURE__ */ jsxs("p", {
-				className: "flex items-center gap-1 text-xs font-medium",
+				className: "cpk:flex cpk:items-center cpk:gap-1 cpk:text-xs cpk:font-medium",
 				children: [/* @__PURE__ */ jsx("span", { children: "Add files and more" }), /* @__PURE__ */ jsx("code", {
-					className: "rounded bg-[#4a4a4a] px-1 py-[1px] font-mono text-[11px] text-white dark:bg-[#e0e0e0] dark:text-black",
+					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",
 					children: "/"
 				})]
 			})
@@ -630,7 +638,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 		return /* @__PURE__ */ jsx("textarea", {
 			ref: internalTextareaRef,
 			placeholder: placeholder ?? labels.chatInputPlaceholder,
-			className: twMerge("bg-transparent outline-none antialiased font-regular leading-relaxed text-[16px] placeholder:text-[#00000077] dark:placeholder:text-[#fffc]", className),
+			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",
@@ -644,7 +652,7 @@ function CopilotChatInput({ mode = "input", onSubmitMessage, onStop, isRunning =
 	_CopilotChatInput.Disclaimer = ({ className, ...props }) => {
 		const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
 		return /* @__PURE__ */ jsx("div", {
-			className: cn("text-center text-xs text-muted-foreground py-3 px-4 max-w-3xl mx-auto", className),
+			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,
 			children: labels.chatDisclaimerText
 		});

package/dist/components/chat/CopilotChatInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CopilotChatInput.mjs","names":[],"sources":["../../../src/components/chat/CopilotChatInput.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  KeyboardEvent,\n  ChangeEvent,\n  useEffect,\n  useLayoutEffect,\n  forwardRef,\n  useImperativeHandle,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Plus, Mic, ArrowUp, X, Check, Square, Loader2 } from \"lucide-react\";\n\nimport {\n  CopilotChatLabels,\n  useCopilotChatConfiguration,\n  CopilotChatDefaultLabels,\n} from \"@/providers/CopilotChatConfigurationProvider\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  DropdownMenuSeparator,\n} from \"@/components/ui/dropdown-menu\";\n\nimport { CopilotChatAudioRecorder } from \"./CopilotChatAudioRecorder\";\nimport { renderSlot, WithSlots } from \"@/lib/slots\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CopilotChatInputMode = \"input\" | \"transcribe\" | \"processing\";\n\nexport type ToolsMenuItem = {\n  label: string;\n} & (\n  | {\n      action: () => void;\n      items?: never;\n    }\n  | {\n      action?: never;\n      items: (ToolsMenuItem | \"-\")[];\n    }\n);\n\ntype CopilotChatInputSlots = {\n  textArea: typeof CopilotChatInput.TextArea;\n  sendButton: typeof CopilotChatInput.SendButton;\n  startTranscribeButton: typeof CopilotChatInput.StartTranscribeButton;\n  cancelTranscribeButton: typeof CopilotChatInput.CancelTranscribeButton;\n  finishTranscribeButton: typeof CopilotChatInput.FinishTranscribeButton;\n  addMenuButton: typeof CopilotChatInput.AddMenuButton;\n  audioRecorder: typeof CopilotChatAudioRecorder;\n  disclaimer: typeof CopilotChatInput.Disclaimer;\n};\n\ntype CopilotChatInputRestProps = {\n  mode?: CopilotChatInputMode;\n  toolsMenu?: (ToolsMenuItem | \"-\")[];\n  autoFocus?: boolean;\n  onSubmitMessage?: (value: string) => void;\n  onStop?: () => void;\n  isRunning?: boolean;\n  onStartTranscribe?: () => void;\n  onCancelTranscribe?: () => void;\n  onFinishTranscribe?: () => void;\n  onFinishTranscribeWithAudio?: (audioBlob: Blob) => Promise<void>;\n  onAddFile?: () => void;\n  value?: string;\n  onChange?: (value: string) => void;\n  /** Positioning mode for the input container. Default: 'static' */\n  positioning?: \"static\" | \"absolute\";\n  /** Keyboard height in pixels for mobile keyboard handling */\n  keyboardHeight?: number;\n  /** Ref for the outer positioning container */\n  containerRef?: React.Ref<HTMLDivElement>;\n  /** Whether to show the disclaimer. Default: true for absolute positioning, false for static */\n  showDisclaimer?: boolean;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\">;\n\ntype CopilotChatInputBaseProps = WithSlots<\n  CopilotChatInputSlots,\n  CopilotChatInputRestProps\n>;\n\ntype CopilotChatInputChildrenArgs = CopilotChatInputBaseProps extends {\n  children?: infer C;\n}\n  ? C extends (props: infer P) => React.ReactNode\n    ? P\n    : never\n  : never;\n\nexport type CopilotChatInputProps = Omit<\n  CopilotChatInputBaseProps,\n  \"children\"\n> & {\n  children?: (props: CopilotChatInputChildrenArgs) => React.ReactNode;\n};\n\nconst SLASH_MENU_MAX_VISIBLE_ITEMS = 5;\nconst SLASH_MENU_ITEM_HEIGHT_PX = 40;\n\nexport function CopilotChatInput({\n  mode = \"input\",\n  onSubmitMessage,\n  onStop,\n  isRunning = false,\n  onStartTranscribe,\n  onCancelTranscribe,\n  onFinishTranscribe,\n  onFinishTranscribeWithAudio,\n  onAddFile,\n  onChange,\n  value,\n  toolsMenu,\n  autoFocus = true,\n  positioning = \"static\",\n  keyboardHeight = 0,\n  containerRef,\n  showDisclaimer,\n  textArea,\n  sendButton,\n  startTranscribeButton,\n  cancelTranscribeButton,\n  finishTranscribeButton,\n  addMenuButton,\n  audioRecorder,\n  disclaimer,\n  children,\n  className,\n  ...props\n}: CopilotChatInputProps) {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState<string>(() => value ?? \"\");\n\n  useEffect(() => {\n    if (!isControlled && value !== undefined) {\n      setInternalValue(value);\n    }\n  }, [isControlled, value]);\n\n  const resolvedValue = isControlled ? (value ?? \"\") : internalValue;\n\n  const [layout, setLayout] = useState<\"compact\" | \"expanded\">(\"compact\");\n  const ignoreResizeRef = useRef(false);\n  const resizeEvaluationRafRef = useRef<number | null>(null);\n  const isExpanded = mode === \"input\" && layout === \"expanded\";\n  const [commandQuery, setCommandQuery] = useState<string | null>(null);\n  const [slashHighlightIndex, setSlashHighlightIndex] = useState(0);\n\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n  const gridRef = useRef<HTMLDivElement>(null);\n  const addButtonContainerRef = useRef<HTMLDivElement>(null);\n  const actionsContainerRef = useRef<HTMLDivElement>(null);\n  const audioRecorderRef =\n    useRef<React.ElementRef<typeof CopilotChatAudioRecorder>>(null);\n  const slashMenuRef = useRef<HTMLDivElement>(null);\n  const config = useCopilotChatConfiguration();\n  const labels = config?.labels ?? CopilotChatDefaultLabels;\n\n  const previousModalStateRef = useRef<boolean | undefined>(undefined);\n  const measurementCanvasRef = useRef<HTMLCanvasElement | null>(null);\n  const measurementsRef = useRef({\n    singleLineHeight: 0,\n    maxHeight: 0,\n    paddingLeft: 0,\n    paddingRight: 0,\n  });\n\n  const commandItems = useMemo(() => {\n    const entries: ToolsMenuItem[] = [];\n    const seen = new Set<string>();\n\n    const pushItem = (item: ToolsMenuItem | \"-\") => {\n      if (item === \"-\") {\n        return;\n      }\n\n      if (item.items && item.items.length > 0) {\n        for (const nested of item.items) {\n          pushItem(nested);\n        }\n        return;\n      }\n\n      if (!seen.has(item.label)) {\n        seen.add(item.label);\n        entries.push(item);\n      }\n    };\n\n    if (onAddFile) {\n      pushItem({\n        label: labels.chatInputToolbarAddButtonLabel,\n        action: onAddFile,\n      });\n    }\n\n    if (toolsMenu && toolsMenu.length > 0) {\n      for (const item of toolsMenu) {\n        pushItem(item);\n      }\n    }\n\n    return entries;\n  }, [labels.chatInputToolbarAddButtonLabel, onAddFile, toolsMenu]);\n\n  const filteredCommands = useMemo(() => {\n    if (commandQuery === null) {\n      return [] as ToolsMenuItem[];\n    }\n\n    if (commandItems.length === 0) {\n      return [] as ToolsMenuItem[];\n    }\n\n    const query = commandQuery.trim().toLowerCase();\n    if (query.length === 0) {\n      return commandItems;\n    }\n\n    const startsWith: ToolsMenuItem[] = [];\n    const contains: ToolsMenuItem[] = [];\n    for (const item of commandItems) {\n      const label = item.label.toLowerCase();\n      if (label.startsWith(query)) {\n        startsWith.push(item);\n      } else if (label.includes(query)) {\n        contains.push(item);\n      }\n    }\n\n    return [...startsWith, ...contains];\n  }, [commandItems, commandQuery]);\n\n  useEffect(() => {\n    if (!autoFocus) {\n      previousModalStateRef.current = config?.isModalOpen;\n      return;\n    }\n\n    if (config?.isModalOpen && !previousModalStateRef.current) {\n      inputRef.current?.focus();\n    }\n\n    previousModalStateRef.current = config?.isModalOpen;\n  }, [config?.isModalOpen, autoFocus]);\n\n  useEffect(() => {\n    if (commandItems.length === 0 && commandQuery !== null) {\n      setCommandQuery(null);\n    }\n  }, [commandItems.length, commandQuery]);\n\n  const previousCommandQueryRef = useRef<string | null>(null);\n\n  useEffect(() => {\n    if (\n      commandQuery !== null &&\n      commandQuery !== previousCommandQueryRef.current &&\n      filteredCommands.length > 0\n    ) {\n      setSlashHighlightIndex(0);\n    }\n\n    previousCommandQueryRef.current = commandQuery;\n  }, [commandQuery, filteredCommands.length]);\n\n  useEffect(() => {\n    if (commandQuery === null) {\n      setSlashHighlightIndex(0);\n      return;\n    }\n\n    if (filteredCommands.length === 0) {\n      setSlashHighlightIndex(-1);\n    } else if (\n      slashHighlightIndex < 0 ||\n      slashHighlightIndex >= filteredCommands.length\n    ) {\n      setSlashHighlightIndex(0);\n    }\n  }, [commandQuery, filteredCommands, slashHighlightIndex]);\n\n  // Handle recording based on mode changes\n  useEffect(() => {\n    const recorder = audioRecorderRef.current;\n    if (!recorder) {\n      return;\n    }\n\n    if (mode === \"transcribe\") {\n      // Start recording when entering transcribe mode\n      recorder.start().catch(console.error);\n    } else {\n      // Stop recording when leaving transcribe mode\n      if (recorder.state === \"recording\") {\n        recorder.stop().catch(console.error);\n      }\n    }\n  }, [mode]);\n\n  useEffect(() => {\n    if (mode !== \"input\") {\n      setLayout(\"compact\");\n      setCommandQuery(null);\n    }\n  }, [mode]);\n\n  const updateSlashState = useCallback(\n    (value: string) => {\n      if (commandItems.length === 0) {\n        setCommandQuery((prev) => (prev === null ? prev : null));\n        return;\n      }\n\n      if (value.startsWith(\"/\")) {\n        const firstLine = value.split(/\\r?\\n/, 1)[0] ?? \"\";\n        const query = firstLine.slice(1);\n        setCommandQuery((prev) => (prev === query ? prev : query));\n      } else {\n        setCommandQuery((prev) => (prev === null ? prev : null));\n      }\n    },\n    [commandItems.length],\n  );\n\n  useEffect(() => {\n    updateSlashState(resolvedValue);\n  }, [resolvedValue, updateSlashState]);\n\n  // Handlers\n  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n    const nextValue = e.target.value;\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    onChange?.(nextValue);\n    updateSlashState(nextValue);\n  };\n\n  const clearInputValue = useCallback(() => {\n    if (!isControlled) {\n      setInternalValue(\"\");\n    }\n\n    if (onChange) {\n      onChange(\"\");\n    }\n  }, [isControlled, onChange]);\n\n  const runCommand = useCallback(\n    (item: ToolsMenuItem) => {\n      clearInputValue();\n\n      item.action?.();\n\n      setCommandQuery(null);\n      setSlashHighlightIndex(0);\n\n      requestAnimationFrame(() => {\n        inputRef.current?.focus();\n      });\n    },\n    [clearInputValue],\n  );\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (commandQuery !== null && mode === \"input\") {\n      if (e.key === \"ArrowDown\") {\n        if (filteredCommands.length > 0) {\n          e.preventDefault();\n          setSlashHighlightIndex((prev) => {\n            if (filteredCommands.length === 0) {\n              return prev;\n            }\n            const next = prev === -1 ? 0 : (prev + 1) % filteredCommands.length;\n            return next;\n          });\n        }\n        return;\n      }\n\n      if (e.key === \"ArrowUp\") {\n        if (filteredCommands.length > 0) {\n          e.preventDefault();\n          setSlashHighlightIndex((prev) => {\n            if (filteredCommands.length === 0) {\n              return prev;\n            }\n            if (prev === -1) {\n              return filteredCommands.length - 1;\n            }\n            return prev <= 0 ? filteredCommands.length - 1 : prev - 1;\n          });\n        }\n        return;\n      }\n\n      if (e.key === \"Enter\") {\n        const selected =\n          slashHighlightIndex >= 0\n            ? filteredCommands[slashHighlightIndex]\n            : undefined;\n        if (selected) {\n          e.preventDefault();\n          runCommand(selected);\n          return;\n        }\n      }\n\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        setCommandQuery(null);\n        return;\n      }\n    }\n\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      if (isProcessing) {\n        onStop?.();\n      } else {\n        send();\n      }\n    }\n  };\n\n  const send = () => {\n    if (!onSubmitMessage) {\n      return;\n    }\n    const trimmed = resolvedValue.trim();\n    if (!trimmed) {\n      return;\n    }\n\n    onSubmitMessage(trimmed);\n\n    if (!isControlled) {\n      setInternalValue(\"\");\n      onChange?.(\"\");\n    }\n\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  const BoundTextArea = renderSlot(textArea, CopilotChatInput.TextArea, {\n    ref: inputRef,\n    value: resolvedValue,\n    onChange: handleChange,\n    onKeyDown: handleKeyDown,\n    autoFocus: autoFocus,\n    className: twMerge(\"w-full py-3\", isExpanded ? \"px-5\" : \"pr-5\"),\n  });\n\n  const isProcessing = mode !== \"transcribe\" && isRunning;\n  const canSend = resolvedValue.trim().length > 0 && !!onSubmitMessage;\n  const canStop = !!onStop;\n\n  const handleSendButtonClick = () => {\n    if (isProcessing) {\n      onStop?.();\n      return;\n    }\n    send();\n  };\n\n  const BoundAudioRecorder = renderSlot(\n    audioRecorder,\n    CopilotChatAudioRecorder,\n    {\n      ref: audioRecorderRef,\n    },\n  );\n\n  const BoundSendButton = renderSlot(sendButton, CopilotChatInput.SendButton, {\n    onClick: handleSendButtonClick,\n    disabled: isProcessing ? !canStop : !canSend,\n    children:\n      isProcessing && canStop ? (\n        <Square className=\"size-[18px] fill-current\" />\n      ) : undefined,\n  });\n\n  const BoundStartTranscribeButton = renderSlot(\n    startTranscribeButton,\n    CopilotChatInput.StartTranscribeButton,\n    {\n      onClick: onStartTranscribe,\n    },\n  );\n\n  const BoundCancelTranscribeButton = renderSlot(\n    cancelTranscribeButton,\n    CopilotChatInput.CancelTranscribeButton,\n    {\n      onClick: onCancelTranscribe,\n    },\n  );\n\n  // Handler for finish button - stops recording and passes audio blob\n  const handleFinishTranscribe = useCallback(async () => {\n    const recorder = audioRecorderRef.current;\n    if (recorder && recorder.state === \"recording\") {\n      try {\n        const audioBlob = await recorder.stop();\n        if (onFinishTranscribeWithAudio) {\n          await onFinishTranscribeWithAudio(audioBlob);\n        }\n      } catch (error) {\n        console.error(\"Failed to stop recording:\", error);\n      }\n    }\n    // Always call the original handler to reset mode\n    onFinishTranscribe?.();\n  }, [onFinishTranscribe, onFinishTranscribeWithAudio]);\n\n  const BoundFinishTranscribeButton = renderSlot(\n    finishTranscribeButton,\n    CopilotChatInput.FinishTranscribeButton,\n    {\n      onClick: handleFinishTranscribe,\n    },\n  );\n\n  const BoundAddMenuButton = renderSlot(\n    addMenuButton,\n    CopilotChatInput.AddMenuButton,\n    {\n      disabled: mode === \"transcribe\",\n      onAddFile,\n      toolsMenu,\n    },\n  );\n\n  const BoundDisclaimer = renderSlot(\n    disclaimer,\n    CopilotChatInput.Disclaimer,\n    {},\n  );\n\n  // Determine whether to show disclaimer based on prop or positioning default\n  const shouldShowDisclaimer = showDisclaimer ?? positioning === \"absolute\";\n\n  if (children) {\n    const childProps = {\n      textArea: BoundTextArea,\n      audioRecorder: BoundAudioRecorder,\n      sendButton: BoundSendButton,\n      startTranscribeButton: BoundStartTranscribeButton,\n      cancelTranscribeButton: BoundCancelTranscribeButton,\n      finishTranscribeButton: BoundFinishTranscribeButton,\n      addMenuButton: BoundAddMenuButton,\n      disclaimer: BoundDisclaimer,\n      onSubmitMessage,\n      onStop,\n      isRunning,\n      onStartTranscribe,\n      onCancelTranscribe,\n      onFinishTranscribe,\n      onAddFile,\n      mode,\n      toolsMenu,\n      autoFocus,\n      positioning,\n      keyboardHeight,\n      showDisclaimer: shouldShowDisclaimer,\n    } as CopilotChatInputChildrenArgs;\n\n    return <>{children(childProps)}</>;\n  }\n\n  const handleContainerClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    // Don't focus if clicking on buttons or other interactive elements\n    const target = e.target as HTMLElement;\n    if (\n      target.tagName !== \"BUTTON\" &&\n      !target.closest(\"button\") &&\n      inputRef.current &&\n      mode === \"input\"\n    ) {\n      inputRef.current.focus();\n    }\n  };\n\n  const ensureMeasurements = useCallback(() => {\n    const textarea = inputRef.current;\n    if (!textarea) {\n      return;\n    }\n\n    const previousValue = textarea.value;\n    const previousHeight = textarea.style.height;\n\n    textarea.style.height = \"auto\";\n\n    const computedStyle = window.getComputedStyle(textarea);\n    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n    const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n    const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n\n    textarea.value = \"\";\n    const singleLineHeight = textarea.scrollHeight;\n    textarea.value = previousValue;\n\n    const contentHeight = singleLineHeight - paddingTop - paddingBottom;\n    const maxHeight = contentHeight * 5 + paddingTop + paddingBottom;\n\n    measurementsRef.current = {\n      singleLineHeight,\n      maxHeight,\n      paddingLeft,\n      paddingRight,\n    };\n\n    textarea.style.height = previousHeight;\n    textarea.style.maxHeight = `${maxHeight}px`;\n  }, []);\n\n  const adjustTextareaHeight = useCallback(() => {\n    const textarea = inputRef.current;\n    if (!textarea) {\n      return 0;\n    }\n\n    if (measurementsRef.current.singleLineHeight === 0) {\n      ensureMeasurements();\n    }\n\n    const { maxHeight } = measurementsRef.current;\n    if (maxHeight) {\n      textarea.style.maxHeight = `${maxHeight}px`;\n    }\n\n    textarea.style.height = \"auto\";\n    const scrollHeight = textarea.scrollHeight;\n    if (maxHeight) {\n      textarea.style.height = `${Math.min(scrollHeight, maxHeight)}px`;\n    } else {\n      textarea.style.height = `${scrollHeight}px`;\n    }\n\n    return scrollHeight;\n  }, [ensureMeasurements]);\n\n  const updateLayout = useCallback((nextLayout: \"compact\" | \"expanded\") => {\n    setLayout((prev) => {\n      if (prev === nextLayout) {\n        return prev;\n      }\n      ignoreResizeRef.current = true;\n      return nextLayout;\n    });\n  }, []);\n\n  const evaluateLayout = useCallback(() => {\n    if (mode !== \"input\") {\n      updateLayout(\"compact\");\n      return;\n    }\n\n    if (\n      typeof window !== \"undefined\" &&\n      typeof window.matchMedia === \"function\"\n    ) {\n      const isMobileViewport = window.matchMedia(\"(max-width: 767px)\").matches;\n      if (isMobileViewport) {\n        ensureMeasurements();\n        adjustTextareaHeight();\n        updateLayout(\"expanded\");\n        return;\n      }\n    }\n\n    const textarea = inputRef.current;\n    const grid = gridRef.current;\n    const addContainer = addButtonContainerRef.current;\n    const actionsContainer = actionsContainerRef.current;\n\n    if (!textarea || !grid || !addContainer || !actionsContainer) {\n      return;\n    }\n\n    if (measurementsRef.current.singleLineHeight === 0) {\n      ensureMeasurements();\n    }\n\n    const scrollHeight = adjustTextareaHeight();\n    const baseline = measurementsRef.current.singleLineHeight;\n    const hasExplicitBreak = resolvedValue.includes(\"\\n\");\n    const renderedMultiline =\n      baseline > 0 ? scrollHeight > baseline + 1 : false;\n    let shouldExpand = hasExplicitBreak || renderedMultiline;\n\n    if (!shouldExpand) {\n      const gridStyles = window.getComputedStyle(grid);\n      const paddingLeft = parseFloat(gridStyles.paddingLeft) || 0;\n      const paddingRight = parseFloat(gridStyles.paddingRight) || 0;\n      const columnGap = parseFloat(gridStyles.columnGap) || 0;\n      const gridAvailableWidth = grid.clientWidth - paddingLeft - paddingRight;\n\n      if (gridAvailableWidth > 0) {\n        const addWidth = addContainer.getBoundingClientRect().width;\n        const actionsWidth = actionsContainer.getBoundingClientRect().width;\n        const compactWidth = Math.max(\n          gridAvailableWidth - addWidth - actionsWidth - columnGap * 2,\n          0,\n        );\n\n        const canvas =\n          measurementCanvasRef.current ?? document.createElement(\"canvas\");\n        if (!measurementCanvasRef.current) {\n          measurementCanvasRef.current = canvas;\n        }\n\n        const context = canvas.getContext(\"2d\");\n        if (context) {\n          const textareaStyles = window.getComputedStyle(textarea);\n          const font =\n            textareaStyles.font ||\n            `${textareaStyles.fontStyle} ${textareaStyles.fontVariant} ${textareaStyles.fontWeight} ${textareaStyles.fontSize}/${textareaStyles.lineHeight} ${textareaStyles.fontFamily}`;\n          context.font = font;\n\n          const compactInnerWidth = Math.max(\n            compactWidth -\n              (measurementsRef.current.paddingLeft || 0) -\n              (measurementsRef.current.paddingRight || 0),\n            0,\n          );\n\n          if (compactInnerWidth > 0) {\n            const lines =\n              resolvedValue.length > 0 ? resolvedValue.split(\"\\n\") : [\"\"];\n            let longestWidth = 0;\n            for (const line of lines) {\n              const metrics = context.measureText(line || \" \");\n              if (metrics.width > longestWidth) {\n                longestWidth = metrics.width;\n              }\n            }\n\n            if (longestWidth > compactInnerWidth) {\n              shouldExpand = true;\n            }\n          }\n        }\n      }\n    }\n\n    const nextLayout = shouldExpand ? \"expanded\" : \"compact\";\n    updateLayout(nextLayout);\n  }, [\n    adjustTextareaHeight,\n    ensureMeasurements,\n    mode,\n    resolvedValue,\n    updateLayout,\n  ]);\n\n  useLayoutEffect(() => {\n    evaluateLayout();\n  }, [evaluateLayout]);\n\n  useEffect(() => {\n    if (typeof ResizeObserver === \"undefined\") {\n      return;\n    }\n\n    const textarea = inputRef.current;\n    const grid = gridRef.current;\n    const addContainer = addButtonContainerRef.current;\n    const actionsContainer = actionsContainerRef.current;\n\n    if (!textarea || !grid || !addContainer || !actionsContainer) {\n      return;\n    }\n\n    const scheduleEvaluation = () => {\n      if (ignoreResizeRef.current) {\n        ignoreResizeRef.current = false;\n        return;\n      }\n\n      if (typeof window === \"undefined\") {\n        evaluateLayout();\n        return;\n      }\n\n      if (resizeEvaluationRafRef.current !== null) {\n        cancelAnimationFrame(resizeEvaluationRafRef.current);\n      }\n\n      resizeEvaluationRafRef.current = window.requestAnimationFrame(() => {\n        resizeEvaluationRafRef.current = null;\n        evaluateLayout();\n      });\n    };\n\n    const observer = new ResizeObserver(() => {\n      scheduleEvaluation();\n    });\n\n    observer.observe(grid);\n    observer.observe(addContainer);\n    observer.observe(actionsContainer);\n    observer.observe(textarea);\n\n    return () => {\n      observer.disconnect();\n      if (\n        typeof window !== \"undefined\" &&\n        resizeEvaluationRafRef.current !== null\n      ) {\n        cancelAnimationFrame(resizeEvaluationRafRef.current);\n        resizeEvaluationRafRef.current = null;\n      }\n    };\n  }, [evaluateLayout]);\n\n  const slashMenuVisible = commandQuery !== null && commandItems.length > 0;\n\n  useEffect(() => {\n    if (!slashMenuVisible || slashHighlightIndex < 0) {\n      return;\n    }\n\n    const active = slashMenuRef.current?.querySelector<HTMLElement>(\n      `[data-slash-index=\"${slashHighlightIndex}\"]`,\n    );\n    active?.scrollIntoView({ block: \"nearest\" });\n  }, [slashMenuVisible, slashHighlightIndex]);\n\n  const slashMenu = slashMenuVisible ? (\n    <div\n      data-testid=\"copilot-slash-menu\"\n      role=\"listbox\"\n      aria-label=\"Slash commands\"\n      ref={slashMenuRef}\n      className=\"absolute bottom-full left-0 right-0 z-30 mb-2 max-h-64 overflow-y-auto rounded-lg border border-border bg-white shadow-lg dark:border-[#3a3a3a] dark:bg-[#1f1f1f]\"\n      style={{\n        maxHeight: `${SLASH_MENU_MAX_VISIBLE_ITEMS * SLASH_MENU_ITEM_HEIGHT_PX}px`,\n      }}\n    >\n      {filteredCommands.length === 0 ? (\n        <div className=\"px-3 py-2 text-sm text-muted-foreground\">\n          No commands found\n        </div>\n      ) : (\n        filteredCommands.map((item, index) => {\n          const isActive = index === slashHighlightIndex;\n          return (\n            <button\n              key={`${item.label}-${index}`}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={isActive}\n              data-active={isActive ? \"true\" : undefined}\n              data-slash-index={index}\n              className={twMerge(\n                \"w-full px-3 py-2 text-left text-sm transition-colors\",\n                \"hover:bg-muted dark:hover:bg-[#2f2f2f]\",\n                isActive ? \"bg-muted dark:bg-[#2f2f2f]\" : \"bg-transparent\",\n              )}\n              onMouseEnter={() => setSlashHighlightIndex(index)}\n              onMouseDown={(event) => {\n                event.preventDefault();\n                runCommand(item);\n              }}\n            >\n              {item.label}\n            </button>\n          );\n        })\n      )}\n    </div>\n  ) : null;\n\n  // The input pill (inner component)\n  const inputPill = (\n    <div\n      className={twMerge(\n        // Layout\n        \"flex w-full flex-col items-center justify-center\",\n        // Interaction\n        \"cursor-text\",\n        // Overflow and clipping\n        \"overflow-visible bg-clip-padding contain-inline-size\",\n        // Background\n        \"bg-white dark:bg-[#303030]\",\n        // Visual effects\n        \"shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] rounded-[28px]\",\n      )}\n      onClick={handleContainerClick}\n      data-layout={isExpanded ? \"expanded\" : \"compact\"}\n    >\n      <div\n        ref={gridRef}\n        className={twMerge(\n          \"grid w-full gap-x-3 gap-y-3 px-3 py-2\",\n          isExpanded\n            ? \"grid-cols-[auto_minmax(0,1fr)_auto] grid-rows-[auto_auto]\"\n            : \"grid-cols-[auto_minmax(0,1fr)_auto] items-center\",\n        )}\n        data-layout={isExpanded ? \"expanded\" : \"compact\"}\n      >\n        <div\n          ref={addButtonContainerRef}\n          className={twMerge(\n            \"flex items-center\",\n            isExpanded ? \"row-start-2\" : \"row-start-1\",\n            \"col-start-1\",\n          )}\n        >\n          {BoundAddMenuButton}\n        </div>\n        <div\n          className={twMerge(\n            \"relative flex min-w-0 flex-col min-h-[50px] justify-center\",\n            isExpanded ? \"col-span-3 row-start-1\" : \"col-start-2 row-start-1\",\n          )}\n        >\n          {mode === \"transcribe\" ? (\n            BoundAudioRecorder\n          ) : mode === \"processing\" ? (\n            <div className=\"flex w-full items-center justify-center py-3 px-5\">\n              <Loader2 className=\"size-[26px] animate-spin text-muted-foreground\" />\n            </div>\n          ) : (\n            <>\n              {BoundTextArea}\n              {slashMenu}\n            </>\n          )}\n        </div>\n        <div\n          ref={actionsContainerRef}\n          className={twMerge(\n            \"flex items-center justify-end gap-2\",\n            isExpanded ? \"col-start-3 row-start-2\" : \"col-start-3 row-start-1\",\n          )}\n        >\n          {mode === \"transcribe\" ? (\n            <>\n              {onCancelTranscribe && BoundCancelTranscribeButton}\n              {onFinishTranscribe && BoundFinishTranscribeButton}\n            </>\n          ) : (\n            <>\n              {onStartTranscribe && BoundStartTranscribeButton}\n              {BoundSendButton}\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        positioning === \"absolute\" &&\n          \"absolute bottom-0 left-0 right-0 z-20 pointer-events-none\",\n        className,\n      )}\n      style={{\n        transform:\n          keyboardHeight > 0 ? `translateY(-${keyboardHeight}px)` : undefined,\n        transition: \"transform 0.2s ease-out\",\n      }}\n      {...props}\n    >\n      <div className=\"max-w-3xl mx-auto py-0 px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-4 pointer-events-auto\">\n        {inputPill}\n      </div>\n      {shouldShowDisclaimer && BoundDisclaimer}\n    </div>\n  );\n}\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport namespace CopilotChatInput {\n  export const SendButton: React.FC<\n    React.ButtonHTMLAttributes<HTMLButtonElement>\n  > = ({ className, children, ...props }) => (\n    <div className=\"mr-[10px]\">\n      <Button\n        type=\"button\"\n        variant=\"chatInputToolbarPrimary\"\n        size=\"chatInputToolbarIcon\"\n        className={className}\n        {...props}\n      >\n        {children ?? <ArrowUp className=\"size-[18px]\" />}\n      </Button>\n    </div>\n  );\n\n  export const ToolbarButton: React.FC<\n    React.ButtonHTMLAttributes<HTMLButtonElement> & {\n      icon: React.ReactNode;\n      labelKey: keyof CopilotChatLabels;\n      defaultClassName?: string;\n    }\n  > = ({ icon, labelKey, defaultClassName, className, ...props }) => {\n    const config = useCopilotChatConfiguration();\n    const labels = config?.labels ?? CopilotChatDefaultLabels;\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button\n            type=\"button\"\n            variant=\"chatInputToolbarSecondary\"\n            size=\"chatInputToolbarIcon\"\n            className={twMerge(defaultClassName, className)}\n            {...props}\n          >\n            {icon}\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent side=\"bottom\">\n          <p>{labels[labelKey]}</p>\n        </TooltipContent>\n      </Tooltip>\n    );\n  };\n\n  export const StartTranscribeButton: React.FC<\n    React.ButtonHTMLAttributes<HTMLButtonElement>\n  > = (props) => (\n    <ToolbarButton\n      icon={<Mic className=\"size-[18px]\" />}\n      labelKey=\"chatInputToolbarStartTranscribeButtonLabel\"\n      defaultClassName=\"mr-2\"\n      {...props}\n    />\n  );\n\n  export const CancelTranscribeButton: React.FC<\n    React.ButtonHTMLAttributes<HTMLButtonElement>\n  > = (props) => (\n    <ToolbarButton\n      icon={<X className=\"size-[18px]\" />}\n      labelKey=\"chatInputToolbarCancelTranscribeButtonLabel\"\n      defaultClassName=\"mr-2\"\n      {...props}\n    />\n  );\n\n  export const FinishTranscribeButton: React.FC<\n    React.ButtonHTMLAttributes<HTMLButtonElement>\n  > = (props) => (\n    <ToolbarButton\n      icon={<Check className=\"size-[18px]\" />}\n      labelKey=\"chatInputToolbarFinishTranscribeButtonLabel\"\n      defaultClassName=\"mr-[10px]\"\n      {...props}\n    />\n  );\n\n  export const AddMenuButton: React.FC<\n    React.ButtonHTMLAttributes<HTMLButtonElement> & {\n      toolsMenu?: (ToolsMenuItem | \"-\")[];\n      onAddFile?: () => void;\n    }\n  > = ({ className, toolsMenu, onAddFile, disabled, ...props }) => {\n    const config = useCopilotChatConfiguration();\n    const labels = config?.labels ?? CopilotChatDefaultLabels;\n\n    const menuItems = useMemo<(ToolsMenuItem | \"-\")[]>(() => {\n      const items: (ToolsMenuItem | \"-\")[] = [];\n\n      if (onAddFile) {\n        items.push({\n          label: labels.chatInputToolbarAddButtonLabel,\n          action: onAddFile,\n        });\n      }\n\n      if (toolsMenu && toolsMenu.length > 0) {\n        if (items.length > 0) {\n          items.push(\"-\");\n        }\n\n        for (const item of toolsMenu) {\n          if (item === \"-\") {\n            if (items.length === 0 || items[items.length - 1] === \"-\") {\n              continue;\n            }\n            items.push(item);\n          } else {\n            items.push(item);\n          }\n        }\n\n        while (items.length > 0 && items[items.length - 1] === \"-\") {\n          items.pop();\n        }\n      }\n\n      return items;\n    }, [onAddFile, toolsMenu, labels.chatInputToolbarAddButtonLabel]);\n\n    const renderMenuItems = useCallback(\n      (items: (ToolsMenuItem | \"-\")[]): React.ReactNode =>\n        items.map((item, index) => {\n          if (item === \"-\") {\n            return <DropdownMenuSeparator key={`separator-${index}`} />;\n          }\n\n          if (item.items && item.items.length > 0) {\n            return (\n              <DropdownMenuSub key={`group-${index}`}>\n                <DropdownMenuSubTrigger>{item.label}</DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  {renderMenuItems(item.items)}\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            );\n          }\n\n          return (\n            <DropdownMenuItem key={`item-${index}`} onClick={item.action}>\n              {item.label}\n            </DropdownMenuItem>\n          );\n        }),\n      [],\n    );\n\n    const hasMenuItems = menuItems.length > 0;\n    const isDisabled = disabled || !hasMenuItems;\n\n    return (\n      <DropdownMenu>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <DropdownMenuTrigger asChild>\n              <Button\n                type=\"button\"\n                variant=\"chatInputToolbarSecondary\"\n                size=\"chatInputToolbarIcon\"\n                className={twMerge(\"ml-1\", className)}\n                disabled={isDisabled}\n                {...props}\n              >\n                <Plus className=\"size-[20px]\" />\n              </Button>\n            </DropdownMenuTrigger>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">\n            <p className=\"flex items-center gap-1 text-xs font-medium\">\n              <span>Add files and more</span>\n              <code className=\"rounded bg-[#4a4a4a] px-1 py-[1px] font-mono text-[11px] text-white dark:bg-[#e0e0e0] dark:text-black\">\n                /\n              </code>\n            </p>\n          </TooltipContent>\n        </Tooltip>\n        {hasMenuItems && (\n          <DropdownMenuContent side=\"top\" align=\"start\">\n            {renderMenuItems(menuItems)}\n          </DropdownMenuContent>\n        )}\n      </DropdownMenu>\n    );\n  };\n\n  export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\n  export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    function TextArea(\n      { style, className, autoFocus, placeholder, ...props },\n      ref,\n    ) {\n      const internalTextareaRef = useRef<HTMLTextAreaElement>(null);\n      const config = useCopilotChatConfiguration();\n      const labels = config?.labels ?? CopilotChatDefaultLabels;\n\n      useImperativeHandle(\n        ref,\n        () => internalTextareaRef.current as HTMLTextAreaElement,\n      );\n\n      // Auto-scroll input into view on mobile when focused\n      useEffect(() => {\n        const textarea = internalTextareaRef.current;\n        if (!textarea) return;\n\n        const handleFocus = () => {\n          // Small delay to let the keyboard start appearing\n          setTimeout(() => {\n            textarea.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n          }, 300);\n        };\n\n        textarea.addEventListener(\"focus\", handleFocus);\n        return () => textarea.removeEventListener(\"focus\", handleFocus);\n      }, []);\n\n      useEffect(() => {\n        if (autoFocus) {\n          internalTextareaRef.current?.focus();\n        }\n      }, [autoFocus]);\n\n      return (\n        <textarea\n          ref={internalTextareaRef}\n          placeholder={placeholder ?? labels.chatInputPlaceholder}\n          className={twMerge(\n            \"bg-transparent outline-none antialiased font-regular leading-relaxed text-[16px] placeholder:text-[#00000077] dark:placeholder:text-[#fffc]\",\n            className,\n          )}\n          style={{\n            overflow: \"auto\",\n            resize: \"none\",\n            ...style,\n          }}\n          rows={1}\n          {...props}\n        />\n      );\n    },\n  );\n\n  export const AudioRecorder = CopilotChatAudioRecorder;\n\n  export const Disclaimer: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\n    className,\n    ...props\n  }) => {\n    const config = useCopilotChatConfiguration();\n    const labels = config?.labels ?? CopilotChatDefaultLabels;\n    return (\n      <div\n        className={cn(\n          \"text-center text-xs text-muted-foreground py-3 px-4 max-w-3xl mx-auto\",\n          className,\n        )}\n        {...props}\n      >\n        {labels.chatDisclaimerText}\n      </div>\n    );\n  };\n}\n\nCopilotChatInput.TextArea.displayName = \"CopilotChatInput.TextArea\";\nCopilotChatInput.SendButton.displayName = \"CopilotChatInput.SendButton\";\nCopilotChatInput.ToolbarButton.displayName = \"CopilotChatInput.ToolbarButton\";\nCopilotChatInput.StartTranscribeButton.displayName =\n  \"CopilotChatInput.StartTranscribeButton\";\nCopilotChatInput.CancelTranscribeButton.displayName =\n  \"CopilotChatInput.CancelTranscribeButton\";\nCopilotChatInput.FinishTranscribeButton.displayName =\n  \"CopilotChatInput.FinishTranscribeButton\";\nCopilotChatInput.AddMenuButton.displayName = \"CopilotChatInput.AddMenuButton\";\nCopilotChatInput.Disclaimer.displayName = \"CopilotChatInput.Disclaimer\";\n\nexport default CopilotChatInput;\n"],"mappings":"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"}
+{"version":3,"file":"CopilotChatInput.mjs","names":[],"sources":["../../../src/components/chat/CopilotChatInput.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  KeyboardEvent,\n  ChangeEvent,\n  useEffect,\n  useLayoutEffect,\n  forwardRef,\n  useImperativeHandle,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Plus, Mic, ArrowUp, X, Check, Square, Loader2 } from \"lucide-react\";\n\nimport {\n  CopilotChatLabels,\n  useCopilotChatConfiguration,\n  CopilotChatDefaultLabels,\n} from \"@/providers/CopilotChatConfigurationProvider\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  DropdownMenuSeparator,\n} from \"@/components/ui/dropdown-menu\";\n\nimport { CopilotChatAudioRecorder } from \"./CopilotChatAudioRecorder\";\nimport { renderSlot, WithSlots } from \"@/lib/slots\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CopilotChatInputMode = \"input\" | \"transcribe\" | \"processing\";\n\nexport type ToolsMenuItem = {\n  label: string;\n} & (\n  | {\n      action: () => void;\n      items?: never;\n    }\n  | {\n      action?: never;\n      items: (ToolsMenuItem | \"-\")[];\n    }\n);\n\ntype CopilotChatInputSlots = {\n  textArea: typeof CopilotChatInput.TextArea;\n  sendButton: typeof CopilotChatInput.SendButton;\n  startTranscribeButton: typeof CopilotChatInput.StartTranscribeButton;\n  cancelTranscribeButton: typeof CopilotChatInput.CancelTranscribeButton;\n  finishTranscribeButton: typeof CopilotChatInput.FinishTranscribeButton;\n  addMenuButton: typeof CopilotChatInput.AddMenuButton;\n  audioRecorder: typeof CopilotChatAudioRecorder;\n  disclaimer: typeof CopilotChatInput.Disclaimer;\n};\n\ntype CopilotChatInputRestProps = {\n  mode?: CopilotChatInputMode;\n  toolsMenu?: (ToolsMenuItem | \"-\")[];\n  autoFocus?: boolean;\n  onSubmitMessage?: (value: string) => void;\n  onStop?: () => void;\n  isRunning?: boolean;\n  onStartTranscribe?: () => void;\n  onCancelTranscribe?: () => void;\n  onFinishTranscribe?: () => void;\n  onFinishTranscribeWithAudio?: (audioBlob: Blob) => Promise<void>;\n  onAddFile?: () => void;\n  value?: string;\n  onChange?: (value: string) => void;\n  /** Positioning mode for the input container. Default: 'static' */\n  positioning?: \"static\" | \"absolute\";\n  /** Keyboard height in pixels for mobile keyboard handling */\n  keyboardHeight?: number;\n  /** Ref for the outer positioning container */\n  containerRef?: React.Ref<HTMLDivElement>;\n  /** Whether to show the disclaimer. Default: true for absolute positioning, false for static */\n  showDisclaimer?: boolean;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\">;\n\ntype CopilotChatInputBaseProps = WithSlots<\n  CopilotChatInputSlots,\n  CopilotChatInputRestProps\n>;\n\ntype CopilotChatInputChildrenArgs = CopilotChatInputBaseProps extends {\n  children?: infer C;\n}\n  ? C extends (props: infer P) => React.ReactNode\n    ? P\n    : never\n  : never;\n\nexport type CopilotChatInputProps = Omit<\n  CopilotChatInputBaseProps,\n  \"children\"\n> & {\n  children?: (props: CopilotChatInputChildrenArgs) => React.ReactNode;\n};\n\nconst SLASH_MENU_MAX_VISIBLE_ITEMS = 5;\nconst SLASH_MENU_ITEM_HEIGHT_PX = 40;\n\nexport function CopilotChatInput({\n  mode = \"input\",\n  onSubmitMessage,\n  onStop,\n  isRunning = false,\n  onStartTranscribe,\n  onCancelTranscribe,\n  onFinishTranscribe,\n  onFinishTranscribeWithAudio,\n  onAddFile,\n  onChange,\n  value,\n  toolsMenu,\n  autoFocus = true,\n  positioning = \"static\",\n  keyboardHeight = 0,\n  containerRef,\n  showDisclaimer,\n  textArea,\n  sendButton,\n  startTranscribeButton,\n  cancelTranscribeButton,\n  finishTranscribeButton,\n  addMenuButton,\n  audioRecorder,\n  disclaimer,\n  children,\n  className,\n  ...props\n}: CopilotChatInputProps) {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState<string>(() => value ?? \"\");\n\n  useEffect(() => {\n    if (!isControlled && value !== undefined) {\n      setInternalValue(value);\n    }\n  }, [isControlled, value]);\n\n  const resolvedValue = isControlled ? (value ?? \"\") : internalValue;\n\n  const [layout, setLayout] = useState<\"compact\" | \"expanded\">(\"compact\");\n  const ignoreResizeRef = useRef(false);\n  const resizeEvaluationRafRef = useRef<number | null>(null);\n  const isExpanded = mode === \"input\" && layout === \"expanded\";\n  const [commandQuery, setCommandQuery] = useState<string | null>(null);\n  const [slashHighlightIndex, setSlashHighlightIndex] = useState(0);\n\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n  const gridRef = useRef<HTMLDivElement>(null);\n  const addButtonContainerRef = useRef<HTMLDivElement>(null);\n  const actionsContainerRef = useRef<HTMLDivElement>(null);\n  const audioRecorderRef =\n    useRef<React.ElementRef<typeof CopilotChatAudioRecorder>>(null);\n  const slashMenuRef = useRef<HTMLDivElement>(null);\n  const config = useCopilotChatConfiguration();\n  const labels = config?.labels ?? CopilotChatDefaultLabels;\n\n  const previousModalStateRef = useRef<boolean | undefined>(undefined);\n  const measurementCanvasRef = useRef<HTMLCanvasElement | null>(null);\n  const measurementsRef = useRef({\n    singleLineHeight: 0,\n    maxHeight: 0,\n    paddingLeft: 0,\n    paddingRight: 0,\n  });\n\n  const commandItems = useMemo(() => {\n    const entries: ToolsMenuItem[] = [];\n    const seen = new Set<string>();\n\n    const pushItem = (item: ToolsMenuItem | \"-\") => {\n      if (item === \"-\") {\n        return;\n      }\n\n      if (item.items && item.items.length > 0) {\n        for (const nested of item.items) {\n          pushItem(nested);\n        }\n        return;\n      }\n\n      if (!seen.has(item.label)) {\n        seen.add(item.label);\n        entries.push(item);\n      }\n    };\n\n    if (onAddFile) {\n      pushItem({\n        label: labels.chatInputToolbarAddButtonLabel,\n        action: onAddFile,\n      });\n    }\n\n    if (toolsMenu && toolsMenu.length > 0) {\n      for (const item of toolsMenu) {\n        pushItem(item);\n      }\n    }\n\n    return entries;\n  }, [labels.chatInputToolbarAddButtonLabel, onAddFile, toolsMenu]);\n\n  const filteredCommands = useMemo(() => {\n    if (commandQuery === null) {\n      return [] as ToolsMenuItem[];\n    }\n\n    if (commandItems.length === 0) {\n      return [] as ToolsMenuItem[];\n    }\n\n    const query = commandQuery.trim().toLowerCase();\n    if (query.length === 0) {\n      return commandItems;\n    }\n\n    const startsWith: ToolsMenuItem[] = [];\n    const contains: ToolsMenuItem[] = [];\n    for (const item of commandItems) {\n      const label = item.label.toLowerCase();\n      if (label.startsWith(query)) {\n        startsWith.push(item);\n      } else if (label.includes(query)) {\n        contains.push(item);\n      }\n    }\n\n    return [...startsWith, ...contains];\n  }, [commandItems, commandQuery]);\n\n  useEffect(() => {\n    if (!autoFocus) {\n      previousModalStateRef.current = config?.isModalOpen;\n      return;\n    }\n\n    if (config?.isModalOpen && !previousModalStateRef.current) {\n      inputRef.current?.focus();\n    }\n\n    previousModalStateRef.current = config?.isModalOpen;\n  }, [config?.isModalOpen, autoFocus]);\n\n  useEffect(() => {\n    if (commandItems.length === 0 && commandQuery !== null) {\n      setCommandQuery(null);\n    }\n  }, [commandItems.length, commandQuery]);\n\n  const previousCommandQueryRef = useRef<string | null>(null);\n\n  useEffect(() => {\n    if (\n      commandQuery !== null &&\n      commandQuery !== previousCommandQueryRef.current &&\n      filteredCommands.length > 0\n    ) {\n      setSlashHighlightIndex(0);\n    }\n\n    previousCommandQueryRef.current = commandQuery;\n  }, [commandQuery, filteredCommands.length]);\n\n  useEffect(() => {\n    if (commandQuery === null) {\n      setSlashHighlightIndex(0);\n      return;\n    }\n\n    if (filteredCommands.length === 0) {\n      setSlashHighlightIndex(-1);\n    } else if (\n      slashHighlightIndex < 0 ||\n      slashHighlightIndex >= filteredCommands.length\n    ) {\n      setSlashHighlightIndex(0);\n    }\n  }, [commandQuery, filteredCommands, slashHighlightIndex]);\n\n  // Handle recording based on mode changes\n  useEffect(() => {\n    const recorder = audioRecorderRef.current;\n    if (!recorder) {\n      return;\n    }\n\n    if (mode === \"transcribe\") {\n      // Start recording when entering transcribe mode\n      recorder.start().catch(console.error);\n    } else {\n      // Stop recording when leaving transcribe mode\n      if (recorder.state === \"recording\") {\n        recorder.stop().catch(console.error);\n      }\n    }\n  }, [mode]);\n\n  useEffect(() => {\n    if (mode !== \"input\") {\n      setLayout(\"compact\");\n      setCommandQuery(null);\n    }\n  }, [mode]);\n\n  const updateSlashState = useCallback(\n    (value: string) => {\n      if (commandItems.length === 0) {\n        setCommandQuery((prev) => (prev === null ? prev : null));\n        return;\n      }\n\n      if (value.startsWith(\"/\")) {\n        const firstLine = value.split(/\\r?\\n/, 1)[0] ?? \"\";\n        const query = firstLine.slice(1);\n        setCommandQuery((prev) => (prev === query ? prev : query));\n      } else {\n        setCommandQuery((prev) => (prev === null ? prev : null));\n      }\n    },\n    [commandItems.length],\n  );\n\n  useEffect(() => {\n    updateSlashState(resolvedValue);\n  }, [resolvedValue, updateSlashState]);\n\n  // Handlers\n  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n    const nextValue = e.target.value;\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n    onChange?.(nextValue);\n    updateSlashState(nextValue);\n  };\n\n  const clearInputValue = useCallback(() => {\n    if (!isControlled) {\n      setInternalValue(\"\");\n    }\n\n    if (onChange) {\n      onChange(\"\");\n    }\n  }, [isControlled, onChange]);\n\n  const runCommand = useCallback(\n    (item: ToolsMenuItem) => {\n      clearInputValue();\n\n      item.action?.();\n\n      setCommandQuery(null);\n      setSlashHighlightIndex(0);\n\n      requestAnimationFrame(() => {\n        inputRef.current?.focus();\n      });\n    },\n    [clearInputValue],\n  );\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (commandQuery !== null && mode === \"input\") {\n      if (e.key === \"ArrowDown\") {\n        if (filteredCommands.length > 0) {\n          e.preventDefault();\n          setSlashHighlightIndex((prev) => {\n            if (filteredCommands.length === 0) {\n              return prev;\n            }\n            const next = prev === -1 ? 0 : (prev + 1) % filteredCommands.length;\n            return next;\n          });\n        }\n        return;\n      }\n\n      if (e.key === \"ArrowUp\") {\n        if (filteredCommands.length > 0) {\n          e.preventDefault();\n          setSlashHighlightIndex((prev) => {\n            if (filteredCommands.length === 0) {\n              return prev;\n            }\n            if (prev === -1) {\n              return filteredCommands.length - 1;\n            }\n            return prev <= 0 ? filteredCommands.length - 1 : prev - 1;\n          });\n        }\n        return;\n      }\n\n      if (e.key === \"Enter\") {\n        const selected =\n          slashHighlightIndex >= 0\n            ? filteredCommands[slashHighlightIndex]\n            : undefined;\n        if (selected) {\n          e.preventDefault();\n          runCommand(selected);\n          return;\n        }\n      }\n\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        setCommandQuery(null);\n        return;\n      }\n    }\n\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      if (isProcessing) {\n        onStop?.();\n      } else {\n        send();\n      }\n    }\n  };\n\n  const send = () => {\n    if (!onSubmitMessage) {\n      return;\n    }\n    const trimmed = resolvedValue.trim();\n    if (!trimmed) {\n      return;\n    }\n\n    onSubmitMessage(trimmed);\n\n    if (!isControlled) {\n      setInternalValue(\"\");\n      onChange?.(\"\");\n    }\n\n    if (inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  const BoundTextArea = renderSlot(textArea, CopilotChatInput.TextArea, {\n    ref: inputRef,\n    value: resolvedValue,\n    onChange: handleChange,\n    onKeyDown: handleKeyDown,\n    autoFocus: autoFocus,\n    className: twMerge(\n      \"cpk:w-full cpk:py-3\",\n      isExpanded ? \"cpk:px-5\" : \"cpk:pr-5\",\n    ),\n  });\n\n  const isProcessing = mode !== \"transcribe\" && isRunning;\n  const canSend = resolvedValue.trim().length > 0 && !!onSubmitMessage;\n  const canStop = !!onStop;\n\n  const handleSendButtonClick = () => {\n    if (isProcessing) {\n      onStop?.();\n      return;\n    }\n    send();\n  };\n\n  const BoundAudioRecorder = renderSlot(\n    audioRecorder,\n    CopilotChatAudioRecorder,\n    {\n      ref: audioRecorderRef,\n    },\n  );\n\n  const BoundSendButton = renderSlot(sendButton, CopilotChatInput.SendButton, {\n    onClick: handleSendButtonClick,\n    disabled: isProcessing ? !canStop : !canSend,\n    children:\n      isProcessing && canStop ? (\n        <Square className=\"cpk:size-[18px] cpk:fill-current\" />\n      ) : undefined,\n  });\n\n  const BoundStartTranscribeButton = renderSlot(\n    startTranscribeButton,\n    CopilotChatInput.StartTranscribeButton,\n    {\n      onClick: onStartTranscribe,\n    },\n  );\n\n  const BoundCancelTranscribeButton = renderSlot(\n    cancelTranscribeButton,\n    CopilotChatInput.CancelTranscribeButton,\n    {\n      onClick: onCancelTranscribe,\n    },\n  );\n\n  // Handler for finish button - stops recording and passes audio blob\n  const handleFinishTranscribe = useCallback(async () => {\n    const recorder = audioRecorderRef.current;\n    if (recorder && recorder.state === \"recording\") {\n      try {\n        const audioBlob = await recorder.stop();\n        if (onFinishTranscribeWithAudio) {\n          await onFinishTranscribeWithAudio(audioBlob);\n        }\n      } catch (error) {\n        console.error(\"Failed to stop recording:\", error);\n      }\n    }\n    // Always call the original handler to reset mode\n    onFinishTranscribe?.();\n  }, [onFinishTranscribe, onFinishTranscribeWithAudio]);\n\n  const BoundFinishTranscribeButton = renderSlot(\n    finishTranscribeButton,\n    CopilotChatInput.FinishTranscribeButton,\n    {\n      onClick: handleFinishTranscribe,\n    },\n  );\n\n  const BoundAddMenuButton = renderSlot(\n    addMenuButton,\n    CopilotChatInput.AddMenuButton,\n    {\n      disabled: mode === \"transcribe\",\n      onAddFile,\n      toolsMenu,\n    },\n  );\n\n  const BoundDisclaimer = renderSlot(\n    disclaimer,\n    CopilotChatInput.Disclaimer,\n    {},\n  );\n\n  // Determine whether to show disclaimer based on prop or positioning default\n  const shouldShowDisclaimer = showDisclaimer ?? positioning === \"absolute\";\n\n  if (children) {\n    const childProps = {\n      textArea: BoundTextArea,\n      audioRecorder: BoundAudioRecorder,\n      sendButton: BoundSendButton,\n      startTranscribeButton: BoundStartTranscribeButton,\n      cancelTranscribeButton: BoundCancelTranscribeButton,\n      finishTranscribeButton: BoundFinishTranscribeButton,\n      addMenuButton: BoundAddMenuButton,\n      disclaimer: BoundDisclaimer,\n      onSubmitMessage,\n      onStop,\n      isRunning,\n      onStartTranscribe,\n      onCancelTranscribe,\n      onFinishTranscribe,\n      onAddFile,\n      mode,\n      toolsMenu,\n      autoFocus,\n      positioning,\n      keyboardHeight,\n      showDisclaimer: shouldShowDisclaimer,\n    } as CopilotChatInputChildrenArgs;\n\n    return (\n      <div data-copilotkit style={{ display: \"contents\" }}>\n        {children(childProps)}\n      </div>\n    );\n  }\n\n  const handleContainerClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    // Don't focus if clicking on buttons or other interactive elements\n    const target = e.target as HTMLElement;\n    if (\n      target.tagName !== \"BUTTON\" &&\n      !target.closest(\"button\") &&\n      inputRef.current &&\n      mode === \"input\"\n    ) {\n      inputRef.current.focus();\n    }\n  };\n\n  const ensureMeasurements = useCallback(() => {\n    const textarea = inputRef.current;\n    if (!textarea) {\n      return;\n    }\n\n    const previousValue = textarea.value;\n    const previousHeight = textarea.style.height;\n\n    textarea.style.height = \"auto\";\n\n    const computedStyle = window.getComputedStyle(textarea);\n    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n    const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n    const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n\n    textarea.value = \"\";\n    const singleLineHeight = textarea.scrollHeight;\n    textarea.value = previousValue;\n\n    const contentHeight = singleLineHeight - paddingTop - paddingBottom;\n    const maxHeight = contentHeight * 5 + paddingTop + paddingBottom;\n\n    measurementsRef.current = {\n      singleLineHeight,\n      maxHeight,\n      paddingLeft,\n      paddingRight,\n    };\n\n    textarea.style.height = previousHeight;\n    textarea.style.maxHeight = `${maxHeight}px`;\n  }, []);\n\n  const adjustTextareaHeight = useCallback(() => {\n    const textarea = inputRef.current;\n    if (!textarea) {\n      return 0;\n    }\n\n    if (measurementsRef.current.singleLineHeight === 0) {\n      ensureMeasurements();\n    }\n\n    const { maxHeight } = measurementsRef.current;\n    if (maxHeight) {\n      textarea.style.maxHeight = `${maxHeight}px`;\n    }\n\n    textarea.style.height = \"auto\";\n    const scrollHeight = textarea.scrollHeight;\n    if (maxHeight) {\n      textarea.style.height = `${Math.min(scrollHeight, maxHeight)}px`;\n    } else {\n      textarea.style.height = `${scrollHeight}px`;\n    }\n\n    return scrollHeight;\n  }, [ensureMeasurements]);\n\n  const updateLayout = useCallback((nextLayout: \"compact\" | \"expanded\") => {\n    setLayout((prev) => {\n      if (prev === nextLayout) {\n        return prev;\n      }\n      ignoreResizeRef.current = true;\n      return nextLayout;\n    });\n  }, []);\n\n  const evaluateLayout = useCallback(() => {\n    if (mode !== \"input\") {\n      updateLayout(\"compact\");\n      return;\n    }\n\n    if (\n      typeof window !== \"undefined\" &&\n      typeof window.matchMedia === \"function\"\n    ) {\n      const isMobileViewport = window.matchMedia(\"(max-width: 767px)\").matches;\n      if (isMobileViewport) {\n        ensureMeasurements();\n        adjustTextareaHeight();\n        updateLayout(\"expanded\");\n        return;\n      }\n    }\n\n    const textarea = inputRef.current;\n    const grid = gridRef.current;\n    const addContainer = addButtonContainerRef.current;\n    const actionsContainer = actionsContainerRef.current;\n\n    if (!textarea || !grid || !addContainer || !actionsContainer) {\n      return;\n    }\n\n    if (measurementsRef.current.singleLineHeight === 0) {\n      ensureMeasurements();\n    }\n\n    const scrollHeight = adjustTextareaHeight();\n    const baseline = measurementsRef.current.singleLineHeight;\n    const hasExplicitBreak = resolvedValue.includes(\"\\n\");\n    const renderedMultiline =\n      baseline > 0 ? scrollHeight > baseline + 1 : false;\n    let shouldExpand = hasExplicitBreak || renderedMultiline;\n\n    if (!shouldExpand) {\n      const gridStyles = window.getComputedStyle(grid);\n      const paddingLeft = parseFloat(gridStyles.paddingLeft) || 0;\n      const paddingRight = parseFloat(gridStyles.paddingRight) || 0;\n      const columnGap = parseFloat(gridStyles.columnGap) || 0;\n      const gridAvailableWidth = grid.clientWidth - paddingLeft - paddingRight;\n\n      if (gridAvailableWidth > 0) {\n        const addWidth = addContainer.getBoundingClientRect().width;\n        const actionsWidth = actionsContainer.getBoundingClientRect().width;\n        const compactWidth = Math.max(\n          gridAvailableWidth - addWidth - actionsWidth - columnGap * 2,\n          0,\n        );\n\n        const canvas =\n          measurementCanvasRef.current ?? document.createElement(\"canvas\");\n        if (!measurementCanvasRef.current) {\n          measurementCanvasRef.current = canvas;\n        }\n\n        const context = canvas.getContext(\"2d\");\n        if (context) {\n          const textareaStyles = window.getComputedStyle(textarea);\n          const font =\n            textareaStyles.font ||\n            `${textareaStyles.fontStyle} ${textareaStyles.fontVariant} ${textareaStyles.fontWeight} ${textareaStyles.fontSize}/${textareaStyles.lineHeight} ${textareaStyles.fontFamily}`;\n          context.font = font;\n\n          const compactInnerWidth = Math.max(\n            compactWidth -\n              (measurementsRef.current.paddingLeft || 0) -\n              (measurementsRef.current.paddingRight || 0),\n            0,\n          );\n\n          if (compactInnerWidth > 0) {\n            const lines =\n              resolvedValue.length > 0 ? resolvedValue.split(\"\\n\") : [\"\"];\n            let longestWidth = 0;\n            for (const line of lines) {\n              const metrics = context.measureText(line || \" \");\n              if (metrics.width > longestWidth) {\n                longestWidth = metrics.width;\n              }\n            }\n\n            if (longestWidth > compactInnerWidth) {\n              shouldExpand = true;\n            }\n          }\n        }\n      }\n    }\n\n    const nextLayout = shouldExpand ? \"expanded\" : \"compact\";\n    updateLayout(nextLayout);\n  }, [\n    adjustTextareaHeight,\n    ensureMeasurements,\n    mode,\n    resolvedValue,\n    updateLayout,\n  ]);\n\n  useLayoutEffect(() => {\n    evaluateLayout();\n  }, [evaluateLayout]);\n\n  useEffect(() => {\n    if (typeof ResizeObserver === \"undefined\") {\n      return;\n    }\n\n    const textarea = inputRef.current;\n    const grid = gridRef.current;\n    const addContainer = addButtonContainerRef.current;\n    const actionsContainer = actionsContainerRef.current;\n\n    if (!textarea || !grid || !addContainer || !actionsContainer) {\n      return;\n    }\n\n    const scheduleEvaluation = () => {\n      if (ignoreResizeRef.current) {\n        ignoreResizeRef.current = false;\n        return;\n      }\n\n      if (typeof window === \"undefined\") {\n        evaluateLayout();\n        return;\n      }\n\n      if (resizeEvaluationRafRef.current !== null) {\n        cancelAnimationFrame(resizeEvaluationRafRef.current);\n      }\n\n      resizeEvaluationRafRef.current = window.requestAnimationFrame(() => {\n        resizeEvaluationRafRef.current = null;\n        evaluateLayout();\n      });\n    };\n\n    const observer = new ResizeObserver(() => {\n      scheduleEvaluation();\n    });\n\n    observer.observe(grid);\n    observer.observe(addContainer);\n    observer.observe(actionsContainer);\n    observer.observe(textarea);\n\n    return () => {\n      observer.disconnect();\n      if (\n        typeof window !== \"undefined\" &&\n        resizeEvaluationRafRef.current !== null\n      ) {\n        cancelAnimationFrame(resizeEvaluationRafRef.current);\n        resizeEvaluationRafRef.current = null;\n      }\n    };\n  }, [evaluateLayout]);\n\n  const slashMenuVisible = commandQuery !== null && commandItems.length > 0;\n\n  useEffect(() => {\n    if (!slashMenuVisible || slashHighlightIndex < 0) {\n      return;\n    }\n\n    const active = slashMenuRef.current?.querySelector<HTMLElement>(\n      `[data-slash-index=\"${slashHighlightIndex}\"]`,\n    );\n    active?.scrollIntoView({ block: \"nearest\" });\n  }, [slashMenuVisible, slashHighlightIndex]);\n\n  const slashMenu = slashMenuVisible ? (\n    <div\n      data-testid=\"copilot-slash-menu\"\n      role=\"listbox\"\n      aria-label=\"Slash commands\"\n      ref={slashMenuRef}\n      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]\"\n      style={{\n        maxHeight: `${SLASH_MENU_MAX_VISIBLE_ITEMS * SLASH_MENU_ITEM_HEIGHT_PX}px`,\n      }}\n    >\n      {filteredCommands.length === 0 ? (\n        <div className=\"cpk:px-3 cpk:py-2 cpk:text-sm cpk:text-muted-foreground\">\n          No commands found\n        </div>\n      ) : (\n        filteredCommands.map((item, index) => {\n          const isActive = index === slashHighlightIndex;\n          return (\n            <button\n              key={`${item.label}-${index}`}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={isActive}\n              data-active={isActive ? \"true\" : undefined}\n              data-slash-index={index}\n              className={twMerge(\n                \"cpk:w-full cpk:px-3 cpk:py-2 cpk:text-left cpk:text-sm cpk:transition-colors\",\n                \"cpk:hover:bg-muted cpk:dark:hover:bg-[#2f2f2f]\",\n                isActive\n                  ? \"cpk:bg-muted cpk:dark:bg-[#2f2f2f]\"\n                  : \"cpk:bg-transparent\",\n              )}\n              onMouseEnter={() => setSlashHighlightIndex(index)}\n              onMouseDown={(event) => {\n                event.preventDefault();\n                runCommand(item);\n              }}\n            >\n              {item.label}\n            </button>\n          );\n        })\n      )}\n    </div>\n  ) : null;\n\n  // The input pill (inner component)\n  const inputPill = (\n    <div\n      className={twMerge(\n        // Layout\n        \"cpk:flex cpk:w-full cpk:flex-col cpk:items-center cpk:justify-center\",\n        // Interaction\n        \"cpk:cursor-text\",\n        // Overflow and clipping\n        \"cpk:overflow-visible cpk:bg-clip-padding cpk:contain-inline-size\",\n        // Background\n        \"cpk:bg-white cpk:dark:bg-[#303030]\",\n        // Visual effects\n        \"cpk:shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] cpk:rounded-[28px]\",\n      )}\n      onClick={handleContainerClick}\n      data-layout={isExpanded ? \"expanded\" : \"compact\"}\n    >\n      <div\n        ref={gridRef}\n        className={twMerge(\n          \"cpk:grid cpk:w-full cpk:gap-x-3 cpk:gap-y-3 cpk:px-3 cpk:py-2\",\n          isExpanded\n            ? \"cpk:grid-cols-[auto_minmax(0,1fr)_auto] cpk:grid-rows-[auto_auto]\"\n            : \"cpk:grid-cols-[auto_minmax(0,1fr)_auto] cpk:items-center\",\n        )}\n        data-layout={isExpanded ? \"expanded\" : \"compact\"}\n      >\n        <div\n          ref={addButtonContainerRef}\n          className={twMerge(\n            \"cpk:flex cpk:items-center\",\n            isExpanded ? \"cpk:row-start-2\" : \"cpk:row-start-1\",\n            \"cpk:col-start-1\",\n          )}\n        >\n          {BoundAddMenuButton}\n        </div>\n        <div\n          className={twMerge(\n            \"cpk:relative cpk:flex cpk:min-w-0 cpk:flex-col cpk:min-h-[50px] cpk:justify-center\",\n            isExpanded\n              ? \"cpk:col-span-3 cpk:row-start-1\"\n              : \"cpk:col-start-2 cpk:row-start-1\",\n          )}\n        >\n          {mode === \"transcribe\" ? (\n            BoundAudioRecorder\n          ) : mode === \"processing\" ? (\n            <div className=\"cpk:flex cpk:w-full cpk:items-center cpk:justify-center cpk:py-3 cpk:px-5\">\n              <Loader2 className=\"cpk:size-[26px] cpk:animate-spin cpk:text-muted-foreground\" />\n            </div>\n          ) : (\n            <>\n              {BoundTextArea}\n              {slashMenu}\n            </>\n          )}\n        </div>\n        <div\n          ref={actionsContainerRef}\n          className={twMerge(\n            \"cpk:flex cpk:items-center cpk:justify-end cpk:gap-2\",\n            isExpanded\n              ? \"cpk:col-start-3 cpk:row-start-2\"\n              : \"cpk:col-start-3 cpk:row-start-1\",\n          )}\n        >\n          {mode === \"transcribe\" ? (\n            <>\n              {onCancelTranscribe && BoundCancelTranscribeButton}\n              {onFinishTranscribe && BoundFinishTranscribeButton}\n            </>\n          ) : (\n            <>\n              {onStartTranscribe && BoundStartTranscribeButton}\n              {BoundSendButton}\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  return (\n    <div\n      data-copilotkit\n      ref={containerRef}\n      className={cn(\n        positioning === \"absolute\" &&\n          \"cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0 cpk:z-20 cpk:pointer-events-none\",\n        className,\n      )}\n      style={{\n        transform:\n          keyboardHeight > 0 ? `translateY(-${keyboardHeight}px)` : undefined,\n        transition: \"transform 0.2s ease-out\",\n      }}\n      {...props}\n    >\n      <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\">\n        {inputPill}\n      </div>\n      {shouldShowDisclaimer && BoundDisclaimer}\n    </div>\n  );\n}\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport namespace CopilotChatInput {\n  export const SendButton: React.FC<\n    React.ButtonHTMLAttributes<HTMLButtonElement>\n  > = ({ className, children, ...props }) => (\n    <div className=\"cpk:mr-[10px]\">\n      <Button\n        type=\"button\"\n        variant=\"chatInputToolbarPrimary\"\n        size=\"chatInputToolbarIcon\"\n        className={className}\n        {...props}\n      >\n        {children ?? <ArrowUp className=\"cpk:size-[18px]\" />}\n      </Button>\n    </div>\n  );\n\n  export const ToolbarButton: React.FC<\n    React.ButtonHTMLAttributes<HTMLButtonElement> & {\n      icon: React.ReactNode;\n      labelKey: keyof CopilotChatLabels;\n      defaultClassName?: string;\n    }\n  > = ({ icon, labelKey, defaultClassName, className, ...props }) => {\n    const config = useCopilotChatConfiguration();\n    const labels = config?.labels ?? CopilotChatDefaultLabels;\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button\n            type=\"button\"\n            variant=\"chatInputToolbarSecondary\"\n            size=\"chatInputToolbarIcon\"\n            className={twMerge(defaultClassName, className)}\n            {...props}\n          >\n            {icon}\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent side=\"bottom\">\n          <p>{labels[labelKey]}</p>\n        </TooltipContent>\n      </Tooltip>\n    );\n  };\n\n  export const StartTranscribeButton: React.FC<\n    React.ButtonHTMLAttributes<HTMLButtonElement>\n  > = (props) => (\n    <ToolbarButton\n      icon={<Mic className=\"cpk:size-[18px]\" />}\n      labelKey=\"chatInputToolbarStartTranscribeButtonLabel\"\n      defaultClassName=\"cpk:mr-2\"\n      {...props}\n    />\n  );\n\n  export const CancelTranscribeButton: React.FC<\n    React.ButtonHTMLAttributes<HTMLButtonElement>\n  > = (props) => (\n    <ToolbarButton\n      icon={<X className=\"cpk:size-[18px]\" />}\n      labelKey=\"chatInputToolbarCancelTranscribeButtonLabel\"\n      defaultClassName=\"cpk:mr-2\"\n      {...props}\n    />\n  );\n\n  export const FinishTranscribeButton: React.FC<\n    React.ButtonHTMLAttributes<HTMLButtonElement>\n  > = (props) => (\n    <ToolbarButton\n      icon={<Check className=\"cpk:size-[18px]\" />}\n      labelKey=\"chatInputToolbarFinishTranscribeButtonLabel\"\n      defaultClassName=\"cpk:mr-[10px]\"\n      {...props}\n    />\n  );\n\n  export const AddMenuButton: React.FC<\n    React.ButtonHTMLAttributes<HTMLButtonElement> & {\n      toolsMenu?: (ToolsMenuItem | \"-\")[];\n      onAddFile?: () => void;\n    }\n  > = ({ className, toolsMenu, onAddFile, disabled, ...props }) => {\n    const config = useCopilotChatConfiguration();\n    const labels = config?.labels ?? CopilotChatDefaultLabels;\n\n    const menuItems = useMemo<(ToolsMenuItem | \"-\")[]>(() => {\n      const items: (ToolsMenuItem | \"-\")[] = [];\n\n      if (onAddFile) {\n        items.push({\n          label: labels.chatInputToolbarAddButtonLabel,\n          action: onAddFile,\n        });\n      }\n\n      if (toolsMenu && toolsMenu.length > 0) {\n        if (items.length > 0) {\n          items.push(\"-\");\n        }\n\n        for (const item of toolsMenu) {\n          if (item === \"-\") {\n            if (items.length === 0 || items[items.length - 1] === \"-\") {\n              continue;\n            }\n            items.push(item);\n          } else {\n            items.push(item);\n          }\n        }\n\n        while (items.length > 0 && items[items.length - 1] === \"-\") {\n          items.pop();\n        }\n      }\n\n      return items;\n    }, [onAddFile, toolsMenu, labels.chatInputToolbarAddButtonLabel]);\n\n    const renderMenuItems = useCallback(\n      (items: (ToolsMenuItem | \"-\")[]): React.ReactNode =>\n        items.map((item, index) => {\n          if (item === \"-\") {\n            return <DropdownMenuSeparator key={`separator-${index}`} />;\n          }\n\n          if (item.items && item.items.length > 0) {\n            return (\n              <DropdownMenuSub key={`group-${index}`}>\n                <DropdownMenuSubTrigger>{item.label}</DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  {renderMenuItems(item.items)}\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            );\n          }\n\n          return (\n            <DropdownMenuItem key={`item-${index}`} onClick={item.action}>\n              {item.label}\n            </DropdownMenuItem>\n          );\n        }),\n      [],\n    );\n\n    const hasMenuItems = menuItems.length > 0;\n    const isDisabled = disabled || !hasMenuItems;\n\n    return (\n      <DropdownMenu>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <DropdownMenuTrigger asChild>\n              <Button\n                type=\"button\"\n                variant=\"chatInputToolbarSecondary\"\n                size=\"chatInputToolbarIcon\"\n                className={twMerge(\"cpk:ml-1\", className)}\n                disabled={isDisabled}\n                {...props}\n              >\n                <Plus className=\"cpk:size-[20px]\" />\n              </Button>\n            </DropdownMenuTrigger>\n          </TooltipTrigger>\n          <TooltipContent side=\"bottom\">\n            <p className=\"cpk:flex cpk:items-center cpk:gap-1 cpk:text-xs cpk:font-medium\">\n              <span>Add files and more</span>\n              <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\">\n                /\n              </code>\n            </p>\n          </TooltipContent>\n        </Tooltip>\n        {hasMenuItems && (\n          <DropdownMenuContent side=\"top\" align=\"start\">\n            {renderMenuItems(menuItems)}\n          </DropdownMenuContent>\n        )}\n      </DropdownMenu>\n    );\n  };\n\n  export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\n  export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    function TextArea(\n      { style, className, autoFocus, placeholder, ...props },\n      ref,\n    ) {\n      const internalTextareaRef = useRef<HTMLTextAreaElement>(null);\n      const config = useCopilotChatConfiguration();\n      const labels = config?.labels ?? CopilotChatDefaultLabels;\n\n      useImperativeHandle(\n        ref,\n        () => internalTextareaRef.current as HTMLTextAreaElement,\n      );\n\n      // Auto-scroll input into view on mobile when focused\n      useEffect(() => {\n        const textarea = internalTextareaRef.current;\n        if (!textarea) return;\n\n        const handleFocus = () => {\n          // Small delay to let the keyboard start appearing\n          setTimeout(() => {\n            textarea.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n          }, 300);\n        };\n\n        textarea.addEventListener(\"focus\", handleFocus);\n        return () => textarea.removeEventListener(\"focus\", handleFocus);\n      }, []);\n\n      useEffect(() => {\n        if (autoFocus) {\n          internalTextareaRef.current?.focus();\n        }\n      }, [autoFocus]);\n\n      return (\n        <textarea\n          ref={internalTextareaRef}\n          placeholder={placeholder ?? labels.chatInputPlaceholder}\n          className={twMerge(\n            \"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]\",\n            className,\n          )}\n          style={{\n            overflow: \"auto\",\n            resize: \"none\",\n            ...style,\n          }}\n          rows={1}\n          {...props}\n        />\n      );\n    },\n  );\n\n  export const AudioRecorder = CopilotChatAudioRecorder;\n\n  export const Disclaimer: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\n    className,\n    ...props\n  }) => {\n    const config = useCopilotChatConfiguration();\n    const labels = config?.labels ?? CopilotChatDefaultLabels;\n    return (\n      <div\n        className={cn(\n          \"cpk:text-center cpk:text-xs cpk:text-muted-foreground cpk:py-3 cpk:px-4 cpk:max-w-3xl cpk:mx-auto\",\n          className,\n        )}\n        {...props}\n      >\n        {labels.chatDisclaimerText}\n      </div>\n    );\n  };\n}\n\nCopilotChatInput.TextArea.displayName = \"CopilotChatInput.TextArea\";\nCopilotChatInput.SendButton.displayName = \"CopilotChatInput.SendButton\";\nCopilotChatInput.ToolbarButton.displayName = \"CopilotChatInput.ToolbarButton\";\nCopilotChatInput.StartTranscribeButton.displayName =\n  \"CopilotChatInput.StartTranscribeButton\";\nCopilotChatInput.CancelTranscribeButton.displayName =\n  \"CopilotChatInput.CancelTranscribeButton\";\nCopilotChatInput.FinishTranscribeButton.displayName =\n  \"CopilotChatInput.FinishTranscribeButton\";\nCopilotChatInput.AddMenuButton.displayName = \"CopilotChatInput.AddMenuButton\";\nCopilotChatInput.Disclaimer.displayName = \"CopilotChatInput.Disclaimer\";\n\nexport default CopilotChatInput;\n"],"mappings":"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"}

package/dist/components/chat/CopilotChatMessageView.cjs

@@ -129,6 +129,14 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		copilotkit,
 		forceUpdate
 	]);
+	const [interruptElement, setInterruptElement] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		setInterruptElement(copilotkit.interruptElement);
+		const subscription = copilotkit.subscribe({ onInterruptElementChanged: ({ interruptElement }) => {
+			setInterruptElement(interruptElement);
+		} });
+		return () => subscription.unsubscribe();
+	}, [copilotkit]);
 	const getStateSnapshotForMessage = (messageId) => {
 		if (!config) return void 0;
 		const resolvedRunId = copilotkit.getRunIdForMessage(config.agentId, config.threadId, messageId) ?? copilotkit.getRunIdsForThread(config.agentId, config.threadId).slice(-1)[0];
@@ -196,25 +204,35 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		}, `${message.id}-custom-after`));
 		return elements;
 	}).filter(Boolean);
-	if (children) return children({
-		messageElements,
-		messages,
-		isRunning
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-copilotkit": true,
+		style: { display: "contents" },
+		children: children({
+			messageElements,
+			messages,
+			isRunning,
+			interruptElement
+		})
 	});
 	const lastMessage = messages[messages.length - 1];
 	const showCursor = isRunning && lastMessage?.role !== "reasoning";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, tailwind_merge.twMerge)("flex flex-col", className),
+		"data-copilotkit": true,
+		className: (0, tailwind_merge.twMerge)("cpk:flex cpk:flex-col", className),
 		...props,
-		children: [messageElements, showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "mt-2",
-			children: require_slots.renderSlot(cursor, CopilotChatMessageView.Cursor, {})
-		})]
+		children: [
+			messageElements,
+			interruptElement,
+			showCursor && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cpk:mt-2",
+				children: require_slots.renderSlot(cursor, CopilotChatMessageView.Cursor, {})
+			})
+		]
 	});
 }
 CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, tailwind_merge.twMerge)("w-[11px] h-[11px] rounded-full bg-foreground animate-pulse-cursor ml-1", className),
+		className: (0, tailwind_merge.twMerge)("cpk:w-[11px] cpk:h-[11px] cpk:rounded-full cpk:bg-foreground cpk:animate-pulse-cursor cpk:ml-1", className),
 		...props
 	});
 };