@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.31

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

@@ -5,11 +5,19 @@ import {
   onBeforeUnmount,
   onMounted,
   ref,
+  shallowRef,
   useAttrs,
   watch,
 } from "vue";
-import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
-import { CopilotChatDefaultLabels } from "../../providers/types";
+import {
+  ɵComposerController,
+  ɵcomposerButtonState,
+  ɵcreateComposerAutosize,
+  ɵflattenToolsMenuForDisplay,
+  ɵnormalizeToolsMenu,
+  ɵshowsComposerDisclaimer,
+  ɵsyncRecorderToMode,
+} from "@copilotkit/core";
 import {
   IconArrowUp,
   IconCheck,
@@ -29,20 +37,11 @@ import type {
 import { useCopilotId } from "../ui/use-id";
 import type { CopilotChatAudioRecorderRef } from "./audioRecorder";
 import type { CopilotChatInputMode, ToolsMenuItem } from "./types";
+import { useChatLabels } from "./use-chat-labels";
 
 defineOptions({ inheritAttrs: false });
 
 type MenuEntry = ToolsMenuItem | "-";
-type MenuDisplayEntry =
-  | { type: "separator"; key: string }
-  | { type: "label"; key: string; label: string; depth: number }
-  | {
-      type: "item";
-      key: string;
-      label: string;
-      depth: number;
-      action: () => void;
-    };
 
 const props = withDefaults(
   defineProps<{
@@ -107,7 +106,6 @@ const emit = defineEmits<{
 }>();
 
 const attrs = useAttrs();
-const config = useCopilotChatConfiguration();
 const shellRef = ref<HTMLElement | null>(null);
 const textareaRef = ref<HTMLTextAreaElement | null>(null);
 const gridRef = ref<HTMLElement | null>(null);
@@ -115,12 +113,31 @@ const addButtonContainerRef = ref<HTMLElement | null>(null);
 const actionsContainerRef = ref<HTMLElement | null>(null);
 const slashMenuRef = ref<HTMLElement | null>(null);
 const audioRecorderRef = ref<CopilotChatAudioRecorderRef | null>(null);
-const localValue = ref(props.modelValue ?? "");
 const isComposing = ref(false);
-const layout = ref<"compact" | "expanded">("compact");
-const commandQuery = ref<string | null>(null);
-const slashHighlightIndex = ref(0);
-const previousCommandQuery = ref<string | null>(null);
+// The text, controlled or not, and the slash-command menu: see core's
+// ɵComposerController.
+const composer = new ɵComposerController<ToolsMenuItem>({
+  initialValue: props.modelValue ?? "",
+  onChange: (value) => emit("update:modelValue", value),
+});
+const composerState = shallowRef(composer.getSnapshot());
+composer.subscribe(() => {
+  composerState.value = composer.getSnapshot();
+});
+// Sizes the text box and picks the compact or expanded layout.
+const autosize = ɵcreateComposerAutosize({
+  getElements: () => ({
+    textarea: textareaRef.value,
+    grid: gridRef.value,
+    start: addButtonContainerRef.value,
+    actions: actionsContainerRef.value,
+  }),
+  maxRows: props.maxRows,
+});
+const layout = shallowRef(autosize.getSnapshot());
+autosize.subscribe(() => {
+  layout.value = autosize.getSnapshot();
+});
 const addMenuOpen = ref(false);
 // Where focus goes as the add menu opens: its first or last item for the
 // keyboard, the menu itself for a pointer, as Radix's DropdownMenu does.
@@ -128,38 +145,27 @@ const addMenuInitialFocus = ref<"first" | "last" | "content">("content");
 const addMenuAnchor = ref<HTMLElement | null>(null);
 const addMenuId = useCopilotId("cpk-add-menu");
 const addMenuTriggerId = `${addMenuId}-trigger`;
-const measurements = ref({
-  singleLineHeight: 0,
-  maxHeight: 0,
-  paddingLeft: 0,
-  paddingRight: 0,
-});
-const resizeEvaluationRafRef = ref<number | null>(null);
-const ignoreResizeRef = ref(false);
-const measurementCanvasRef = ref<HTMLCanvasElement | null>(null);
-const containerCacheRef = ref<{
-  compactWidth: number;
-} | null>(null);
-const didWarnMissingFontRef = ref(false);
-const didWarnMissingCanvasContextRef = ref(false);
-let resizeObserver: ResizeObserver | null = null;
 
-const isControlled = computed(() => props.modelValue !== undefined);
-const inputValue = computed(() =>
-  isControlled.value ? (props.modelValue ?? "") : localValue.value,
+const inputValue = computed(() => composerState.value.value);
+const filteredCommands = computed(() => composerState.value.slashCommands);
+const slashHighlightIndex = computed(
+  () => composerState.value.slashHighlightIndex,
 );
-const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
+const slashMenuVisible = computed(
+  () => composerState.value.slashQuery !== null,
+);
+const labels = useChatLabels();
 const resolvedPlaceholder = computed(
   () => props.placeholder ?? labels.value.chatInputPlaceholder,
 );
 const isExpanded = computed(
   () => props.mode === "input" && layout.value === "expanded",
 );
-const isProcessing = computed(
-  () => props.mode !== "transcribe" && props.isRunning,
-);
-const shouldShowDisclaimer = computed(
-  () => props.showDisclaimer ?? props.positioning === "absolute",
+const shouldShowDisclaimer = computed(() =>
+  ɵshowsComposerDisclaimer({
+    showDisclaimer: props.showDisclaimer,
+    positioning: props.positioning,
+  }),
 );
 const hasSubmitAction = computed(
   () => typeof props.onSubmitMessage === "function",
@@ -177,16 +183,20 @@ const hasFinishTranscribeAction = computed(
     typeof props.onFinishTranscribe === "function" ||
     typeof props.onFinishTranscribeWithAudio === "function",
 );
-const canSend = computed(
-  () =>
-    props.mode === "input" &&
-    !props.disabled &&
-    hasSubmitAction.value &&
-    inputValue.value.trim().length > 0,
-);
-const sendDisabled = computed(() =>
-  isProcessing.value ? !hasStopAction.value : !canSend.value,
+const composerInput = computed(() => ({
+  mode: props.mode,
+  isRunning: props.isRunning,
+  value: inputValue.value,
+  canSubmit: hasSubmitAction.value,
+  canStop: hasStopAction.value,
+  disabled: props.disabled,
+}));
+const composerButton = computed(() =>
+  ɵcomposerButtonState(composerInput.value),
 );
+const isProcessing = computed(() => composerButton.value.isProcessing);
+const sendDisabled = computed(() => composerButton.value.disabled);
+const showsStop = computed(() => composerButton.value.action === "stop");
 
 const containerClass = computed(() => [
   "cpk-chat-input",
@@ -200,288 +210,98 @@ const rootAttrs = computed(() => {
   return rest;
 });
 
-function isMenuGroup(
-  item: ToolsMenuItem,
-): item is ToolsMenuItem & { items: MenuEntry[] } {
-  return Array.isArray((item as ToolsMenuItem).items);
-}
-
-function createDefaultAddItem(): ToolsMenuItem | null {
-  if (!hasAddFileAction.value) {
-    return null;
-  }
-  return {
-    label: labels.value.chatInputToolbarAddButtonLabel,
-    action: () => emit("add-file"),
-  };
-}
-
-function normalizeMenuItems() {
-  const items: MenuEntry[] = [];
-  const addItem = createDefaultAddItem();
-  if (addItem) {
-    items.push(addItem);
-  }
-
-  if (props.toolsMenu.length > 0) {
-    if (items.length > 0) {
-      items.push("-");
-    }
-
-    for (const menuEntry of props.toolsMenu) {
-      if (menuEntry === "-") {
-        if (items.length === 0 || items[items.length - 1] === "-") {
-          continue;
+const menuItems = computed(() =>
+  ɵnormalizeToolsMenu<ToolsMenuItem>(
+    props.toolsMenu,
+    hasAddFileAction.value
+      ? {
+          label: labels.value.chatInputToolbarAddButtonLabel,
+          action: () => emit("add-file"),
         }
-        items.push("-");
-        continue;
-      }
-
-      items.push(menuEntry);
-    }
-  }
-
-  while (items.length > 0 && items[items.length - 1] === "-") {
-    items.pop();
-  }
-
-  return items;
-}
-
-const menuItems = computed(() => normalizeMenuItems());
+      : undefined,
+  ),
+);
 const hasMenuItems = computed(() => menuItems.value.length > 0);
+const menuDisplayItems = computed(() =>
+  ɵflattenToolsMenuForDisplay(menuItems.value),
+);
 
-function flattenMenuForCommands(items: MenuEntry[]) {
-  const seen = new Set<string>();
-  const commands: ToolsMenuItem[] = [];
-
-  const walk = (entryList: MenuEntry[]) => {
-    for (const entry of entryList) {
-      if (entry === "-") {
-        continue;
-      }
-
-      if (isMenuGroup(entry) && entry.items.length > 0) {
-        walk(entry.items);
-        continue;
-      }
-
-      if (!entry.action || seen.has(entry.label)) {
-        continue;
-      }
-
-      seen.add(entry.label);
-      commands.push(entry);
-    }
-  };
-
-  walk(items);
-  return commands;
-}
-
-const commandItems = computed(() => flattenMenuForCommands(menuItems.value));
-
-function flattenMenuDisplay(items: MenuEntry[], depth = 0, prefix = "root") {
-  const entries: MenuDisplayEntry[] = [];
-  for (const [index, item] of items.entries()) {
-    const key = `${prefix}-${index}`;
-    if (item === "-") {
-      entries.push({ type: "separator", key: `sep-${key}` });
-      continue;
-    }
-    if (isMenuGroup(item) && item.items.length > 0) {
-      entries.push({
-        type: "label",
-        key: `label-${key}`,
-        label: item.label,
-        depth,
-      });
-      entries.push(...flattenMenuDisplay(item.items, depth + 1, key));
-      continue;
-    }
-    if (item.action) {
-      entries.push({
-        type: "item",
-        key: `item-${key}`,
-        label: item.label,
-        depth,
-        action: item.action,
-      });
-    }
-  }
-  return entries;
-}
-
-const menuDisplayItems = computed(() => flattenMenuDisplay(menuItems.value));
-
-const filteredCommands = computed(() => {
-  if (commandQuery.value === null || commandItems.value.length === 0) {
-    return [] as ToolsMenuItem[];
-  }
-
-  const normalized = commandQuery.value.trim().toLowerCase();
-  if (normalized.length === 0) {
-    return commandItems.value;
-  }
-
-  const startsWith: ToolsMenuItem[] = [];
-  const contains: ToolsMenuItem[] = [];
-
-  for (const command of commandItems.value) {
-    const label = command.label.toLowerCase();
-    if (label.startsWith(normalized)) {
-      startsWith.push(command);
-      continue;
-    }
-    if (label.includes(normalized)) {
-      contains.push(command);
-    }
-  }
-
-  return [...startsWith, ...contains];
-});
-
-const slashMenuVisible = computed(
-  () => commandQuery.value !== null && commandItems.value.length > 0,
+watch(
+  [() => props.modelValue, () => props.mode, menuItems],
+  ([value, mode, menu]) => composer.setInputs({ value, mode, menu }),
+  { immediate: true },
 );
 
 function updateInputValue(nextValue: string) {
-  if (!isControlled.value) {
-    localValue.value = nextValue;
-  }
-  emit("update:modelValue", nextValue);
-}
-
-function clearInputValue() {
-  updateInputValue("");
-}
-
-function updateSlashState(value: string) {
-  if (commandItems.value.length === 0) {
-    commandQuery.value = null;
-    return;
-  }
-
-  if (value.startsWith("/")) {
-    const firstLine = value.split(/\r?\n/, 1)[0] ?? "";
-    commandQuery.value = firstLine.slice(1);
-    return;
-  }
-
-  commandQuery.value = null;
+  composer.setValue(nextValue);
 }
 
-function runCommand(command: ToolsMenuItem) {
-  clearInputValue();
-  command.action?.();
-  commandQuery.value = null;
-  slashHighlightIndex.value = 0;
+function focusTextareaSoon() {
   requestAnimationFrame(() => {
     textareaRef.value?.focus();
   });
 }
 
+function runCommand(command: ToolsMenuItem) {
+  composer.runCommand(command);
+  focusTextareaSoon();
+}
+
 function submit() {
   if (props.mode !== "input" || props.disabled || !hasSubmitAction.value) {
     return;
   }
   // In controlled mode, parent-updated modelValue can lag one tick behind
   // the actual textarea value during intense runtime/connect churn.
-  const rawValue = textareaRef.value?.value ?? inputValue.value;
-  const trimmed = rawValue.trim();
-  if (!trimmed) {
-    return;
-  }
-
-  emit("submit-message", trimmed);
-
-  if (props.clearOnSubmit) {
-    clearInputValue();
-  }
-
-  textareaRef.value?.focus();
+  const sent = composer.submit((text) => emit("submit-message", text), {
+    value: textareaRef.value?.value ?? inputValue.value,
+    clear: props.clearOnSubmit,
+  });
+  if (sent) textareaRef.value?.focus();
 }
 
 function handleInput(event: Event) {
-  const nextValue = (event.target as HTMLTextAreaElement).value;
-  updateInputValue(nextValue);
-  updateSlashState(nextValue);
+  updateInputValue((event.target as HTMLTextAreaElement).value);
 }
 
+// The button stops a run whatever the input holds. Enter differs: see
+// handleKeydown.
 function handleSendButtonClick() {
-  if (isProcessing.value) {
-    if (hasStopAction.value) {
-      emit("stop");
-    }
+  if (showsStop.value) {
+    emit("stop");
     return;
   }
-  submit();
+  if (!isProcessing.value) {
+    submit();
+  }
 }
 
 function handleKeydown(event: KeyboardEvent) {
-  if (props.disabled) {
-    return;
-  }
-
-  if (isComposing.value || event.isComposing || event.keyCode === 229) {
+  if (props.disabled || props.mode !== "input") {
     return;
   }
 
-  if (commandQuery.value !== null && props.mode === "input") {
-    if (event.key === "ArrowDown") {
-      if (filteredCommands.value.length > 0) {
-        event.preventDefault();
-        slashHighlightIndex.value =
-          slashHighlightIndex.value < 0
-            ? 0
-            : (slashHighlightIndex.value + 1) % filteredCommands.value.length;
-      }
-      return;
-    }
-
-    if (event.key === "ArrowUp") {
-      if (filteredCommands.value.length > 0) {
-        event.preventDefault();
-        if (slashHighlightIndex.value < 0) {
-          slashHighlightIndex.value = filteredCommands.value.length - 1;
-        } else {
-          slashHighlightIndex.value =
-            slashHighlightIndex.value <= 0
-              ? filteredCommands.value.length - 1
-              : slashHighlightIndex.value - 1;
-        }
-      }
-      return;
-    }
-
-    if (event.key === "Enter") {
-      const selected =
-        slashHighlightIndex.value >= 0
-          ? filteredCommands.value[slashHighlightIndex.value]
-          : undefined;
-      if (selected) {
-        event.preventDefault();
-        runCommand(selected);
-        return;
-      }
-    }
-
-    if (event.key === "Escape") {
-      event.preventDefault();
-      commandQuery.value = null;
-      return;
-    }
-  }
-
-  if (event.key === "Enter" && !event.shiftKey && props.mode === "input") {
-    event.preventDefault();
-    if (isProcessing.value) {
-      if (hasStopAction.value) {
-        emit("stop");
-      }
-      return;
-    }
+  // Enter with text sends, also while a run is going. Enter in an empty input
+  // stops the run. Read the textarea: a controlled modelValue can lag a tick.
+  const { preventDefault, action } = composer.keyDown(
+    {
+      key: event.key,
+      shiftKey: event.shiftKey,
+      isComposing: isComposing.value || event.isComposing,
+      keyCode: event.keyCode,
+    },
+    {
+      ...composerInput.value,
+      value: textareaRef.value?.value ?? inputValue.value,
+    },
+  );
+  if (preventDefault) event.preventDefault();
+  if (action === "command") {
+    focusTextareaSoon();
+  } else if (action === "send") {
     submit();
+  } else if (action === "stop") {
+    emit("stop");
   }
 }
 
@@ -593,346 +413,39 @@ function handleContainerClick(event: MouseEvent) {
   textareaRef.value?.focus();
 }
 
-function ensureMeasurements() {
-  const textarea = textareaRef.value;
-  if (!textarea || isComposing.value) {
-    return;
-  }
-
-  const previousValue = textarea.value;
-  const previousHeight = textarea.style.height;
-  textarea.style.height = "auto";
-
-  const computedStyle = window.getComputedStyle(textarea);
-  const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
-  const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
-  const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
-  const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
-
-  textarea.value = "";
-  const singleLineHeight = textarea.scrollHeight;
-  textarea.value = previousValue;
-
-  const contentHeight = singleLineHeight - paddingTop - paddingBottom;
-  const maxHeight = contentHeight * props.maxRows + paddingTop + paddingBottom;
-
-  measurements.value = {
-    singleLineHeight,
-    maxHeight,
-    paddingLeft,
-    paddingRight,
-  };
-
-  textarea.style.height = previousHeight;
-  textarea.style.maxHeight = `${maxHeight}px`;
-}
-
-function adjustTextareaHeight() {
-  const textarea = textareaRef.value;
-  if (!textarea) {
-    return 0;
-  }
-
-  if (measurements.value.singleLineHeight === 0) {
-    ensureMeasurements();
-  }
-
-  const { maxHeight } = measurements.value;
-  if (maxHeight) {
-    textarea.style.maxHeight = `${maxHeight}px`;
-  }
-
-  textarea.style.height = "auto";
-  const scrollHeight = textarea.scrollHeight;
-  textarea.style.height = `${maxHeight ? Math.min(scrollHeight, maxHeight) : scrollHeight}px`;
-  return scrollHeight;
-}
-
-function updateLayout(nextLayout: "compact" | "expanded") {
-  if (layout.value === nextLayout) {
-    return;
-  }
-  ignoreResizeRef.value = true;
-  layout.value = nextLayout;
-}
-
-function resolveTextareaFont(textarea: HTMLTextAreaElement): string | null {
-  const textareaStyles = window.getComputedStyle(textarea);
-  if (textareaStyles.font?.trim()) {
-    return textareaStyles.font;
-  }
-
-  if (textareaStyles.fontSize && textareaStyles.fontFamily) {
-    const fallbackFont =
-      `${textareaStyles.fontStyle} ${textareaStyles.fontVariant} ` +
-      `${textareaStyles.fontWeight} ${textareaStyles.fontSize}/${textareaStyles.lineHeight} ` +
-      `${textareaStyles.fontFamily}`;
-    if (fallbackFont.trim()) {
-      return fallbackFont;
-    }
-  }
-
-  if (process.env.NODE_ENV !== "production" && !didWarnMissingFontRef.value) {
-    didWarnMissingFontRef.value = true;
-    console.warn(
-      "[CopilotChatInput] Could not resolve textarea font for layout measurement. " +
-        "Text-width-based expansion will be skipped until the next container resize.",
-    );
-  }
-  return null;
-}
-
-function updateContainerCache() {
-  const grid = gridRef.value;
-  const addContainer = addButtonContainerRef.value;
-  const actionsContainer = actionsContainerRef.value;
-  if (!grid || !addContainer || !actionsContainer) {
-    containerCacheRef.value = null;
-    return null;
-  }
-
-  const gridStyles = window.getComputedStyle(grid);
-  const paddingLeft = parseFloat(gridStyles.paddingLeft) || 0;
-  const paddingRight = parseFloat(gridStyles.paddingRight) || 0;
-  const columnGap = parseFloat(gridStyles.columnGap) || 0;
-  const gridAvailableWidth = grid.clientWidth - paddingLeft - paddingRight;
-  if (gridAvailableWidth <= 0) {
-    containerCacheRef.value = null;
-    return null;
-  }
-
-  const addWidth = addContainer.getBoundingClientRect().width;
-  const actionsWidth = actionsContainer.getBoundingClientRect().width;
-  const compactWidth = Math.max(
-    gridAvailableWidth - addWidth - actionsWidth - columnGap * 2,
-    0,
-  );
-  if (compactWidth <= 0) {
-    containerCacheRef.value = null;
-    return null;
-  }
-
-  const cache = { compactWidth };
-  containerCacheRef.value = cache;
-  return cache;
-}
-
-function evaluateLayout() {
-  if (props.mode !== "input") {
-    updateLayout("compact");
-    return;
-  }
-
-  if (
-    typeof window.matchMedia === "function" &&
-    window.matchMedia("(max-width: 767px)").matches
-  ) {
-    ensureMeasurements();
-    adjustTextareaHeight();
-    updateLayout("expanded");
-    return;
-  }
-
-  const textarea = textareaRef.value;
-  if (
-    !textarea ||
-    !gridRef.value ||
-    !addButtonContainerRef.value ||
-    !actionsContainerRef.value
-  ) {
-    return;
-  }
-
-  if (measurements.value.singleLineHeight === 0) {
-    ensureMeasurements();
-  }
-
-  const scrollHeight = adjustTextareaHeight();
-  const baseline = measurements.value.singleLineHeight;
-  const hasExplicitBreak = inputValue.value.includes("\n");
-  const renderedMultiline = baseline > 0 ? scrollHeight > baseline + 1 : false;
-  let shouldExpand = hasExplicitBreak || renderedMultiline;
-
-  if (!shouldExpand) {
-    const cache = containerCacheRef.value ?? updateContainerCache();
-    if (cache && cache.compactWidth > 0) {
-      const compactInnerWidth = Math.max(
-        cache.compactWidth -
-          measurements.value.paddingLeft -
-          measurements.value.paddingRight,
-        0,
-      );
-
-      if (compactInnerWidth > 0) {
-        const canvas =
-          measurementCanvasRef.value ?? document.createElement("canvas");
-        if (!measurementCanvasRef.value) {
-          measurementCanvasRef.value = canvas;
-        }
-
-        const context = canvas.getContext("2d");
-        if (context) {
-          const resolvedFont = resolveTextareaFont(textarea);
-          if (resolvedFont) {
-            context.font = resolvedFont;
-            const lines =
-              inputValue.value.length > 0 ? inputValue.value.split("\n") : [""];
-            let longestLine = 0;
-            for (const line of lines) {
-              const width = context.measureText(line || " ").width;
-              if (width > longestLine) {
-                longestLine = width;
-              }
-            }
-            if (longestLine > compactInnerWidth) {
-              shouldExpand = true;
-            }
-          }
-        } else if (
-          process.env.NODE_ENV !== "production" &&
-          !didWarnMissingCanvasContextRef.value
-        ) {
-          didWarnMissingCanvasContextRef.value = true;
-          console.warn(
-            "[CopilotChatInput] canvas.getContext('2d') returned null. " +
-              "Text-width-based expansion will be skipped.",
-          );
-        }
-      }
-    }
-  }
-
-  updateLayout(shouldExpand ? "expanded" : "compact");
-}
-
-function scheduleLayoutEvaluation(invalidateCache: boolean) {
-  if (ignoreResizeRef.value) {
-    ignoreResizeRef.value = false;
-    return;
-  }
-
-  if (invalidateCache) {
-    containerCacheRef.value = null;
-    didWarnMissingFontRef.value = false;
-    didWarnMissingCanvasContextRef.value = false;
-  }
-
-  if (resizeEvaluationRafRef.value !== null) {
-    cancelAnimationFrame(resizeEvaluationRafRef.value);
-  }
-
-  resizeEvaluationRafRef.value = requestAnimationFrame(() => {
-    resizeEvaluationRafRef.value = null;
-    evaluateLayout();
-  });
-}
-
 watch(
-  () => props.modelValue,
-  (next) => {
-    if (isControlled.value) {
-      localValue.value = next ?? "";
-    }
+  [inputValue, () => props.mode],
+  ([value, mode]) => {
+    autosize.evaluate(value, mode);
   },
+  { flush: "post" },
 );
 
-watch(inputValue, (value) => {
-  updateSlashState(value);
-  evaluateLayout();
-});
-
-watch(commandItems, () => {
-  if (commandItems.value.length === 0) {
-    commandQuery.value = null;
-  }
-});
-
 watch(
-  [commandQuery, () => filteredCommands.value.length],
-  ([query, filteredCount]) => {
-    if (
-      query !== null &&
-      query !== previousCommandQuery.value &&
-      filteredCount > 0
-    ) {
-      slashHighlightIndex.value = 0;
-    }
-
-    previousCommandQuery.value = query;
+  () => props.maxRows,
+  (maxRows) => {
+    autosize.setMaxRows(maxRows);
   },
-  { immediate: true },
-);
-
-watch(
-  [commandQuery, filteredCommands],
-  () => {
-    if (commandQuery.value === null) {
-      slashHighlightIndex.value = 0;
-      return;
-    }
-    if (filteredCommands.value.length === 0) {
-      slashHighlightIndex.value = -1;
-      return;
-    }
-    if (
-      slashHighlightIndex.value < 0 ||
-      slashHighlightIndex.value >= filteredCommands.value.length
-    ) {
-      slashHighlightIndex.value = 0;
-    }
-  },
-  { immediate: true },
 );
 
 watch(
   () => props.mode,
-  async (mode) => {
+  (mode) => {
     if (mode !== "input") {
-      layout.value = "compact";
-      commandQuery.value = null;
       closeAddMenu();
     }
-
-    const recorder = audioRecorderRef.value;
-    if (!recorder) {
-      return;
-    }
-
-    if (mode === "transcribe") {
-      try {
-        await recorder.start();
-      } catch (error) {
-        console.error(error);
-      }
-      return;
-    }
-
-    if (recorder.state === "recording") {
-      try {
-        await recorder.stop();
-      } catch {
-        // ignore transition stop failures
-      }
-    }
   },
-  { immediate: true },
 );
 
+// Recording follows the mode: it starts in transcribe mode and stops when the
+// mode changes. The recorder renders only in transcribe mode, so also sync
+// when it appears.
 watch(
-  audioRecorderRef,
-  async (recorder) => {
-    if (!recorder || props.mode !== "transcribe") {
-      return;
-    }
-    if (recorder.state === "idle") {
-      try {
-        await recorder.start();
-      } catch (error) {
-        console.error(error);
-      }
-    }
+  [audioRecorderRef, () => props.mode],
+  ([recorder, mode]) => {
+    void ɵsyncRecorderToMode(recorder, mode);
   },
-  { immediate: true },
+  { immediate: true, flush: "post" },
 );
 
 watch(slashHighlightIndex, async (index) => {
@@ -960,39 +473,11 @@ onMounted(() => {
     textareaRef.value?.focus();
   }
 
-  evaluateLayout();
-
-  if (typeof ResizeObserver !== "undefined") {
-    const containerTargets = new Set<HTMLElement>();
-    if (gridRef.value) containerTargets.add(gridRef.value);
-    if (addButtonContainerRef.value)
-      containerTargets.add(addButtonContainerRef.value);
-    if (actionsContainerRef.value)
-      containerTargets.add(actionsContainerRef.value);
-
-    resizeObserver = new ResizeObserver((entries) => {
-      const shouldInvalidate = entries.some((entry) =>
-        containerTargets.has(entry.target as HTMLElement),
-      );
-      scheduleLayoutEvaluation(shouldInvalidate);
-    });
-
-    if (gridRef.value) resizeObserver.observe(gridRef.value);
-    if (addButtonContainerRef.value)
-      resizeObserver.observe(addButtonContainerRef.value);
-    if (actionsContainerRef.value)
-      resizeObserver.observe(actionsContainerRef.value);
-    if (textareaRef.value) resizeObserver.observe(textareaRef.value);
-  }
+  autosize.evaluate(inputValue.value, props.mode);
 });
 
 onBeforeUnmount(() => {
-  resizeObserver?.disconnect();
-  resizeObserver = null;
-  if (resizeEvaluationRafRef.value !== null) {
-    cancelAnimationFrame(resizeEvaluationRafRef.value);
-    resizeEvaluationRafRef.value = null;
-  }
+  autosize.dispose();
 });
 </script>
 
@@ -1174,7 +659,7 @@ onBeforeUnmount(() => {
                       index === slashHighlightIndex ? 'true' : undefined
                     "
                     class="cpk-chat-input-slash-menu-item"
-                    @mouseenter="slashHighlightIndex = index"
+                    @mouseenter="composer.highlight(index)"
                     @mousedown.prevent="runCommand(command)"
                   >
                     {{ command.label }}
@@ -1295,7 +780,7 @@ onBeforeUnmount(() => {
                       type="button"
                       data-testid="copilot-chat-input-send"
                       :aria-label="
-                        isProcessing && hasStopAction
+                        showsStop
                           ? labels.chatInputToolbarStopButtonLabel
                           : labels.chatInputToolbarSendButtonLabel
                       "
@@ -1304,7 +789,7 @@ onBeforeUnmount(() => {
                       @click="handleSendButtonClick"
                     >
                       <IconSquare
-                        v-if="isProcessing && hasStopAction"
+                        v-if="showsStop"
                         class="cpk-chat-input-stop-icon"
                       />
                       <IconArrowUp v-else class="cpk-chat-input-send-icon" />