@copilotkit/vue 2.0.0-rc.1 → 2.0.0-rc.11

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

@@ -8,12 +8,10 @@ import {
   useAttrs,
   watch,
 } from "vue";
-import { useCopilotChatConfiguration } from "../../providers/useCopilotChatConfiguration";
-import { CopilotChatDefaultLabels } from "../../providers/types";
+import { ɵcomposerButtonState, ɵresolveComposerKey } from "@copilotkit/core";
 import {
   IconArrowUp,
   IconCheck,
-  IconChevronRight,
   IconLoader2,
   IconMic,
   IconPlus,
@@ -21,8 +19,16 @@ import {
   IconX,
 } from "../icons";
 import CopilotChatAudioRecorder from "./CopilotChatAudioRecorder.vue";
+import CopilotTooltip from "../ui/CopilotTooltip.vue";
+import CopilotDropdownMenuContent from "../ui/CopilotDropdownMenuContent.vue";
+import type {
+  CopilotDropdownMenuDismissReason,
+  CopilotDropdownMenuItem,
+} from "../ui/dropdown-menu";
+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 });
 
@@ -101,14 +107,12 @@ 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);
 const addButtonContainerRef = ref<HTMLElement | null>(null);
 const actionsContainerRef = ref<HTMLElement | null>(null);
 const slashMenuRef = ref<HTMLElement | null>(null);
-const addMenuRef = ref<HTMLElement | null>(null);
 const audioRecorderRef = ref<CopilotChatAudioRecorderRef | null>(null);
 const localValue = ref(props.modelValue ?? "");
 const isComposing = ref(false);
@@ -117,6 +121,12 @@ const commandQuery = ref<string | null>(null);
 const slashHighlightIndex = ref(0);
 const previousCommandQuery = ref<string | null>(null);
 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.
+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,
@@ -132,22 +142,18 @@ const containerCacheRef = ref<{
 const didWarnMissingFontRef = ref(false);
 const didWarnMissingCanvasContextRef = ref(false);
 let resizeObserver: ResizeObserver | null = null;
-let documentPointerDownHandler: ((event: MouseEvent) => void) | null = null;
 
 const isControlled = computed(() => props.modelValue !== undefined);
 const inputValue = computed(() =>
   isControlled.value ? (props.modelValue ?? "") : localValue.value,
 );
-const labels = computed(() => config.value?.labels ?? CopilotChatDefaultLabels);
+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",
 );
@@ -167,20 +173,24 @@ 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(() => [
-  props.positioning === "absolute" &&
-    "cpk:absolute cpk:bottom-0 cpk:left-0 cpk:right-0 cpk:z-20 cpk:pointer-events-none",
+  "cpk-chat-input",
+  props.positioning === "absolute" && "cpk-chat-input-absolute",
   attrs.class,
 ]);
 
@@ -398,14 +408,16 @@ function handleInput(event: Event) {
   updateSlashState(nextValue);
 }
 
+// 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) {
@@ -463,35 +475,108 @@ function handleKeydown(event: KeyboardEvent) {
     }
   }
 
-  if (event.key === "Enter" && !event.shiftKey && props.mode === "input") {
+  if (props.mode !== "input") {
+    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 action = ɵresolveComposerKey(event, {
+    ...composerInput.value,
+    value: textareaRef.value?.value ?? inputValue.value,
+  });
+  if (event.key === "Enter" && !event.shiftKey) {
     event.preventDefault();
-    if (isProcessing.value) {
-      if (hasStopAction.value) {
-        emit("stop");
-      }
-      return;
-    }
+  }
+  if (action === "send") {
     submit();
+  } else if (action === "stop") {
+    emit("stop");
   }
 }
 
-function toggleAddMenu() {
+/** The add button, or the first button of a custom `add-menu-button` slot. */
+function getAddMenuTrigger(): HTMLElement | null {
+  const container = addButtonContainerRef.value;
+  return container?.querySelector<HTMLElement>("button") ?? container ?? null;
+}
+
+function toggleAddMenu(focus: "first" | "last" | "content" = "content") {
   if (!hasMenuItems.value || props.mode === "transcribe" || props.disabled) {
     return;
   }
-  addMenuOpen.value = !addMenuOpen.value;
+  if (addMenuOpen.value) {
+    closeAddMenu();
+    return;
+  }
+  addMenuAnchor.value = getAddMenuTrigger();
+  addMenuInitialFocus.value = focus;
+  addMenuOpen.value = true;
 }
 
-function closeAddMenu() {
+function closeAddMenu(options: { returnFocus?: boolean } = {}) {
+  if (!addMenuOpen.value) {
+    return;
+  }
   addMenuOpen.value = false;
+  if (options.returnFocus) {
+    getAddMenuTrigger()?.focus();
+  }
 }
 
 function handleMenuAction(action: () => void) {
+  // As Radix does, the menu closes and focus returns to its trigger first, so
+  // an action that moves focus (for example into the textarea) keeps it.
+  closeAddMenu({ returnFocus: true });
   action();
-  closeAddMenu();
-  nextTick(() => {
-    textareaRef.value?.focus();
-  });
+}
+
+function handleAddMenuSelect(item: CopilotDropdownMenuItem) {
+  if (item.action) {
+    handleMenuAction(item.action);
+  }
+}
+
+function handleAddMenuDismiss(reason: CopilotDropdownMenuDismissReason) {
+  // A pointer down outside leaves focus where the pointer put it.
+  closeAddMenu({ returnFocus: reason !== "outside" });
+}
+
+// A pointer down opens the menu, as Radix's trigger does; the click that
+// follows it then must not toggle it again. Keyboard and synthetic clicks
+// (detail 0) still toggle it from the click.
+let addMenuPointerToggled = false;
+
+function handleAddMenuPointerDown(event: PointerEvent) {
+  if (event.button !== 0 || event.ctrlKey) {
+    return;
+  }
+  addMenuPointerToggled = true;
+  if (!addMenuOpen.value) {
+    // Keep focus off the trigger, so the menu can take it.
+    event.preventDefault();
+  }
+  toggleAddMenu("content");
+}
+
+function handleAddMenuClick(event: MouseEvent) {
+  if (addMenuPointerToggled) {
+    addMenuPointerToggled = false;
+    return;
+  }
+  toggleAddMenu(event.detail === 0 ? "first" : "content");
+}
+
+function handleAddMenuTriggerKeydown(event: KeyboardEvent) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    toggleAddMenu("first");
+  } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+    event.preventDefault();
+    if (!addMenuOpen.value) {
+      toggleAddMenu(event.key === "ArrowDown" ? "first" : "last");
+    }
+  }
 }
 
 async function handleFinishTranscribe() {
@@ -909,32 +994,9 @@ onMounted(() => {
       resizeObserver.observe(actionsContainerRef.value);
     if (textareaRef.value) resizeObserver.observe(textareaRef.value);
   }
-
-  documentPointerDownHandler = (event: MouseEvent) => {
-    if (!addMenuOpen.value) {
-      return;
-    }
-    const target = event.target as Node | null;
-    if (!target) {
-      return;
-    }
-    if (
-      addMenuRef.value?.contains(target) ||
-      addButtonContainerRef.value?.contains(target)
-    ) {
-      return;
-    }
-    closeAddMenu();
-  };
-
-  document.addEventListener("mousedown", documentPointerDownHandler);
 });
 
 onBeforeUnmount(() => {
-  if (documentPointerDownHandler) {
-    document.removeEventListener("mousedown", documentPointerDownHandler);
-    documentPointerDownHandler = null;
-  }
   resizeObserver?.disconnect();
   resizeObserver = null;
   if (resizeEvaluationRafRef.value !== null) {
@@ -959,9 +1021,7 @@ onBeforeUnmount(() => {
     }"
     v-bind="rootAttrs"
   >
-    <div
-      class="cpk:pointer-events-auto cpk:mx-auto cpk:max-w-3xl cpk:px-4 cpk:py-0 cpk:@3xl:px-0 cpk:[div[data-sidebar-chat]_&]:px-8 cpk:[div[data-popup-chat]_&]:px-4"
-    >
+    <div class="cpk-chat-input-wrapper">
       <slot
         name="layout"
         :mode="mode"
@@ -973,7 +1033,7 @@ onBeforeUnmount(() => {
         :send-disabled="sendDisabled"
         :menu-open="addMenuOpen"
         :menu-items="menuDisplayItems"
-        :on-toggle-menu="toggleAddMenu"
+        :on-toggle-menu="() => toggleAddMenu()"
         :on-menu-action="handleMenuAction"
         :on-update-value="updateInputValue"
         :on-submit="submit"
@@ -986,99 +1046,81 @@ onBeforeUnmount(() => {
         <div
           ref="shellRef"
           data-testid="copilot-chat-input-shell"
-          class="cpk:flex cpk:w-full cpk:cursor-text cpk:flex-col cpk:items-center cpk:justify-center cpk:overflow-visible cpk:rounded-[28px] cpk:bg-white cpk:bg-clip-padding cpk:shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] cpk:contain-inline-size cpk:dark:bg-[#303030]"
+          class="copilotKitInput cpk-chat-input-pill"
           :data-layout="isExpanded ? 'expanded' : 'compact'"
           @click="handleContainerClick"
         >
           <div
             ref="gridRef"
-            :class="[
-              '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',
-            ]"
+            class="cpk-chat-input-grid"
             :data-layout="isExpanded ? 'expanded' : 'compact'"
           >
-            <div
-              ref="addButtonContainerRef"
-              :class="[
-                'cpk:relative cpk:flex cpk:items-center cpk:col-start-1',
-                isExpanded ? 'cpk:row-start-2' : 'cpk:row-start-1',
-              ]"
-            >
+            <div ref="addButtonContainerRef" class="cpk-chat-input-start">
               <slot
                 name="add-menu-button"
                 :disabled="disabled || mode === 'transcribe' || !hasMenuItems"
                 :menu-open="addMenuOpen"
-                :toggle-menu="toggleAddMenu"
+                :toggle-menu="() => toggleAddMenu()"
                 :labels="labels"
               >
-                <button
-                  type="button"
-                  data-testid="copilot-chat-input-add"
-                  :aria-label="labels.chatInputToolbarAddButtonLabel"
-                  :disabled="disabled || mode === 'transcribe' || !hasMenuItems"
-                  class="cpk:ml-1 cpk:inline-flex cpk:h-9 cpk:w-9 cpk:shrink-0 cpk:items-center cpk:justify-center cpk:rounded-full cpk:bg-transparent cpk:text-[#444444] cpk:transition-colors cpk:hover:bg-[#f8f8f8] cpk:hover:text-[#333333] cpk:disabled:cursor-not-allowed cpk:disabled:opacity-50 cpk:disabled:hover:bg-transparent cpk:disabled:hover:text-[#444444] cpk:dark:text-white cpk:dark:hover:bg-[#404040] cpk:dark:hover:text-[#FFFFFF] cpk:dark:disabled:hover:bg-transparent cpk:dark:disabled:hover:text-[#CCCCCC]"
-                  @click.stop="toggleAddMenu"
-                >
-                  <IconPlus class="cpk:size-[20px]" />
-                </button>
+                <CopilotTooltip side="bottom" :suppressed="addMenuOpen">
+                  <template #default="{ triggerProps }">
+                    <button
+                      v-bind="triggerProps"
+                      :id="addMenuTriggerId"
+                      type="button"
+                      data-testid="copilot-chat-input-add"
+                      :aria-label="labels.chatInputToolbarAddButtonLabel"
+                      aria-haspopup="menu"
+                      :aria-expanded="addMenuOpen"
+                      :aria-controls="addMenuOpen ? addMenuId : undefined"
+                      :data-state="addMenuOpen ? 'open' : 'closed'"
+                      :disabled="
+                        disabled || mode === 'transcribe' || !hasMenuItems
+                      "
+                      class="cpk-button cpk-button-chat-input-toolbar-secondary cpk-button-size-chat-input-toolbar-icon cpk-chat-input-add-menu-button"
+                      @pointerdown="handleAddMenuPointerDown"
+                      @click.stop="handleAddMenuClick"
+                      @keydown="handleAddMenuTriggerKeydown"
+                    >
+                      <IconPlus class="cpk-chat-input-add-menu-icon" />
+                    </button>
+                  </template>
+                  <template #content>
+                    <p class="cpk-chat-input-add-menu-tooltip">
+                      <span>{{ labels.chatInputToolbarAddButtonLabel }}</span>
+                      <code class="cpk-chat-input-add-menu-shortcut">/</code>
+                    </p>
+                  </template>
+                </CopilotTooltip>
               </slot>
 
-              <div
-                v-if="addMenuOpen && hasMenuItems"
-                ref="addMenuRef"
-                class="cpk:absolute cpk:bottom-full cpk:left-0 cpk:z-30 cpk:mb-2 cpk:min-w-[220px] cpk:overflow-hidden cpk:rounded-lg cpk:border cpk:border-border cpk:bg-white cpk:shadow-lg cpk:dark:border-[#3a3a3a] cpk:dark:bg-[#1f1f1f]"
+              <CopilotDropdownMenuContent
+                :id="addMenuId"
+                :open="addMenuOpen && hasMenuItems"
+                :anchor="addMenuAnchor"
+                :items="menuItems"
+                :menu-id="addMenuId"
+                :labelled-by="addMenuAnchor?.id || undefined"
+                side="top"
+                align="start"
+                :side-offset="4"
+                :initial-focus="addMenuInitialFocus"
                 data-testid="copilot-chat-input-add-menu"
-              >
-                <template v-for="entry in menuDisplayItems" :key="entry.key">
-                  <div
-                    v-if="entry.type === 'separator'"
-                    class="cpk:my-1 cpk:h-px cpk:bg-border cpk:dark:bg-[#333333]"
-                  />
-                  <div
-                    v-else-if="entry.type === 'label'"
-                    class="cpk:flex cpk:items-center cpk:gap-1 cpk:px-3 cpk:py-1.5 cpk:text-xs cpk:font-semibold cpk:text-muted-foreground"
-                    :style="{ paddingLeft: `${12 + entry.depth * 12}px` }"
-                  >
-                    <span>{{ entry.label }}</span>
-                    <IconChevronRight class="cpk:size-3" />
-                  </div>
-                  <button
-                    v-else
-                    type="button"
-                    role="menuitem"
-                    class="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]"
-                    :style="{ paddingLeft: `${12 + entry.depth * 12}px` }"
-                    @click="handleMenuAction(entry.action)"
-                  >
-                    {{ entry.label }}
-                  </button>
-                </template>
-              </div>
+                @select="handleAddMenuSelect"
+                @dismiss="handleAddMenuDismiss"
+              />
             </div>
 
-            <div
-              :class="[
-                'cpk:relative cpk:flex cpk:min-h-[50px] cpk:min-w-0 cpk:flex-col cpk:justify-center',
-                isExpanded
-                  ? 'cpk:col-span-3 cpk:row-start-1'
-                  : 'cpk:col-start-2 cpk:row-start-1',
-              ]"
-            >
+            <div class="cpk-chat-input-field">
               <template v-if="mode === 'transcribe'">
                 <slot name="audio-recorder">
                   <CopilotChatAudioRecorder ref="audioRecorderRef" />
                 </slot>
               </template>
               <template v-else-if="mode === 'processing'">
-                <div
-                  class="cpk:flex cpk:w-full cpk:items-center cpk:justify-center cpk:px-5 cpk:py-3"
-                >
-                  <IconLoader2
-                    class="cpk:size-[26px] cpk:animate-spin cpk:text-muted-foreground"
-                  />
+                <div class="cpk-chat-input-processing">
+                  <IconLoader2 class="cpk-chat-input-processing-spinner" />
                 </div>
               </template>
               <template v-else>
@@ -1102,8 +1144,10 @@ onBeforeUnmount(() => {
                     :disabled="disabled"
                     rows="1"
                     :class="[
-                      'cpk:w-full cpk:bg-transparent cpk:py-3 cpk:text-[16px] cpk:font-normal cpk:leading-relaxed cpk:text-foreground cpk:antialiased cpk:outline-none cpk:placeholder:text-[#00000077] cpk:dark:placeholder:text-[#fffc]',
-                      isExpanded ? 'cpk:px-5' : 'cpk:pr-5',
+                      'cpk-chat-input-textarea',
+                      isExpanded
+                        ? 'cpk-chat-input-textarea-expanded'
+                        : 'cpk-chat-input-textarea-compact',
                     ]"
                     style="overflow: auto; resize: none"
                     @input="handleInput"
@@ -1119,12 +1163,12 @@ onBeforeUnmount(() => {
                   data-testid="copilot-slash-menu"
                   role="listbox"
                   :aria-label="labels.chatInputSlashMenuLabel"
-                  class="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]"
+                  class="cpk-chat-input-slash-menu"
                   :style="{ maxHeight: `${5 * 40}px` }"
                 >
                   <div
                     v-if="filteredCommands.length === 0"
-                    class="cpk:px-3 cpk:py-2 cpk:text-sm cpk:text-muted-foreground"
+                    class="cpk-chat-input-slash-menu-empty"
                   >
                     {{ labels.chatInputSlashMenuEmptyText }}
                   </div>
@@ -1139,12 +1183,7 @@ onBeforeUnmount(() => {
                     :data-active="
                       index === slashHighlightIndex ? 'true' : undefined
                     "
-                    :class="[
-                      '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]',
-                      index === slashHighlightIndex
-                        ? 'cpk:bg-muted cpk:dark:bg-[#2f2f2f]'
-                        : 'cpk:bg-transparent',
-                    ]"
+                    class="cpk-chat-input-slash-menu-item"
                     @mouseenter="slashHighlightIndex = index"
                     @mousedown.prevent="runCommand(command)"
                   >
@@ -1154,15 +1193,7 @@ onBeforeUnmount(() => {
               </template>
             </div>
 
-            <div
-              ref="actionsContainerRef"
-              :class="[
-                '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',
-              ]"
-            >
+            <div ref="actionsContainerRef" class="cpk-chat-input-actions">
               <template v-if="mode === 'transcribe'">
                 <slot
                   v-if="
@@ -1174,18 +1205,28 @@ onBeforeUnmount(() => {
                   :on-click="() => emit('cancel-transcribe')"
                   :labels="labels"
                 >
-                  <button
-                    type="button"
-                    data-testid="copilot-chat-input-cancel-transcribe"
-                    :aria-label="
+                  <CopilotTooltip
+                    side="bottom"
+                    :content="
                       labels.chatInputToolbarCancelTranscribeButtonLabel
                     "
-                    :disabled="disabled"
-                    class="cpk:mr-2 cpk:inline-flex cpk:h-9 cpk:w-9 cpk:shrink-0 cpk:items-center cpk:justify-center cpk:rounded-full cpk:bg-transparent cpk:text-[#444444] cpk:transition-colors cpk:hover:bg-[#f8f8f8] cpk:hover:text-[#333333] cpk:disabled:cursor-not-allowed cpk:disabled:opacity-50 cpk:dark:text-white cpk:dark:hover:bg-[#404040] cpk:dark:hover:text-[#FFFFFF]"
-                    @click="emit('cancel-transcribe')"
                   >
-                    <IconX class="cpk:size-[18px]" />
-                  </button>
+                    <template #default="{ triggerProps }">
+                      <button
+                        v-bind="triggerProps"
+                        type="button"
+                        data-testid="copilot-chat-input-cancel-transcribe"
+                        :aria-label="
+                          labels.chatInputToolbarCancelTranscribeButtonLabel
+                        "
+                        :disabled="disabled"
+                        class="cpk-button cpk-button-chat-input-toolbar-secondary cpk-button-size-chat-input-toolbar-icon cpk-chat-input-cancel-transcribe-button"
+                        @click="emit('cancel-transcribe')"
+                      >
+                        <IconX class="cpk-chat-input-toolbar-icon" />
+                      </button>
+                    </template>
+                  </CopilotTooltip>
                 </slot>
                 <slot
                   v-if="
@@ -1197,18 +1238,28 @@ onBeforeUnmount(() => {
                   :on-click="handleFinishTranscribe"
                   :labels="labels"
                 >
-                  <button
-                    type="button"
-                    data-testid="copilot-chat-input-finish-transcribe"
-                    :aria-label="
+                  <CopilotTooltip
+                    side="bottom"
+                    :content="
                       labels.chatInputToolbarFinishTranscribeButtonLabel
                     "
-                    :disabled="disabled"
-                    class="cpk:mr-[10px] cpk:inline-flex cpk:h-9 cpk:w-9 cpk:shrink-0 cpk:items-center cpk:justify-center cpk:rounded-full cpk:bg-transparent cpk:text-[#444444] cpk:transition-colors cpk:hover:bg-[#f8f8f8] cpk:hover:text-[#333333] cpk:disabled:cursor-not-allowed cpk:disabled:opacity-50 cpk:dark:text-white cpk:dark:hover:bg-[#404040] cpk:dark:hover:text-[#FFFFFF]"
-                    @click="handleFinishTranscribe"
                   >
-                    <IconCheck class="cpk:size-[18px]" />
-                  </button>
+                    <template #default="{ triggerProps }">
+                      <button
+                        v-bind="triggerProps"
+                        type="button"
+                        data-testid="copilot-chat-input-finish-transcribe"
+                        :aria-label="
+                          labels.chatInputToolbarFinishTranscribeButtonLabel
+                        "
+                        :disabled="disabled"
+                        class="cpk-button cpk-button-chat-input-toolbar-secondary cpk-button-size-chat-input-toolbar-icon cpk-chat-input-finish-transcribe-button"
+                        @click="handleFinishTranscribe"
+                      >
+                        <IconCheck class="cpk-chat-input-toolbar-icon" />
+                      </button>
+                    </template>
+                  </CopilotTooltip>
                 </slot>
               </template>
               <template v-else>
@@ -1222,18 +1273,26 @@ onBeforeUnmount(() => {
                   :on-click="() => emit('start-transcribe')"
                   :labels="labels"
                 >
-                  <button
-                    type="button"
-                    data-testid="copilot-chat-input-start-transcribe"
-                    :aria-label="
-                      labels.chatInputToolbarStartTranscribeButtonLabel
-                    "
-                    :disabled="disabled"
-                    class="cpk:mr-2 cpk:inline-flex cpk:h-9 cpk:w-9 cpk:shrink-0 cpk:items-center cpk:justify-center cpk:rounded-full cpk:bg-transparent cpk:text-[#444444] cpk:transition-colors cpk:hover:bg-[#f8f8f8] cpk:hover:text-[#333333] cpk:disabled:cursor-not-allowed cpk:disabled:opacity-50 cpk:disabled:hover:bg-transparent cpk:disabled:hover:text-[#444444] cpk:dark:text-white cpk:dark:hover:bg-[#404040] cpk:dark:hover:text-[#FFFFFF] cpk:dark:disabled:hover:bg-transparent cpk:dark:disabled:hover:text-[#CCCCCC]"
-                    @click="emit('start-transcribe')"
+                  <CopilotTooltip
+                    side="bottom"
+                    :content="labels.chatInputToolbarStartTranscribeButtonLabel"
                   >
-                    <IconMic class="cpk:size-[18px]" />
-                  </button>
+                    <template #default="{ triggerProps }">
+                      <button
+                        v-bind="triggerProps"
+                        type="button"
+                        data-testid="copilot-chat-input-start-transcribe"
+                        :aria-label="
+                          labels.chatInputToolbarStartTranscribeButtonLabel
+                        "
+                        :disabled="disabled"
+                        class="cpk-button cpk-button-chat-input-toolbar-secondary cpk-button-size-chat-input-toolbar-icon cpk-chat-input-start-transcribe-button"
+                        @click="emit('start-transcribe')"
+                      >
+                        <IconMic class="cpk-chat-input-toolbar-icon" />
+                      </button>
+                    </template>
+                  </CopilotTooltip>
                 </slot>
                 <slot
                   name="send-button"
@@ -1241,24 +1300,24 @@ onBeforeUnmount(() => {
                   :is-processing="isProcessing"
                   :on-click="handleSendButtonClick"
                 >
-                  <div class="cpk:mr-[10px]">
+                  <div class="cpk-chat-input-send">
                     <button
                       type="button"
                       data-testid="copilot-chat-input-send"
                       :aria-label="
-                        isProcessing && hasStopAction
+                        showsStop
                           ? labels.chatInputToolbarStopButtonLabel
                           : labels.chatInputToolbarSendButtonLabel
                       "
                       :disabled="sendDisabled"
-                      class="cpk:inline-flex cpk:h-9 cpk:w-9 cpk:shrink-0 cpk:items-center cpk:justify-center cpk:rounded-full cpk:bg-black cpk:text-white cpk:transition-colors cpk:hover:opacity-70 cpk:disabled:cursor-not-allowed cpk:disabled:opacity-50 cpk:disabled:bg-[#00000014] cpk:disabled:text-[rgb(13,13,13)] cpk:disabled:hover:opacity-100 cpk:dark:bg-white cpk:dark:text-black cpk:dark:disabled:bg-[#454545] cpk:dark:disabled:text-white"
+                      class="cpk-button cpk-button-chat-input-toolbar-primary cpk-button-size-chat-input-toolbar-icon cpk-chat-input-send-button"
                       @click="handleSendButtonClick"
                     >
                       <IconSquare
-                        v-if="isProcessing && hasStopAction"
-                        class="cpk:size-[18px] cpk:fill-current"
+                        v-if="showsStop"
+                        class="cpk-chat-input-stop-icon"
                       />
-                      <IconArrowUp v-else class="cpk:size-[18px]" />
+                      <IconArrowUp v-else class="cpk-chat-input-send-icon" />
                     </button>
                   </div>
                 </slot>
@@ -1272,7 +1331,7 @@ onBeforeUnmount(() => {
     <slot v-if="shouldShowDisclaimer" name="disclaimer" :labels="labels">
       <p
         data-testid="copilot-chat-input-disclaimer"
-        class="cpk:mx-auto cpk:max-w-3xl cpk:px-4 cpk:py-3 cpk:text-center cpk:text-xs cpk:text-muted-foreground"
+        class="cpk-chat-input-disclaimer"
       >
         {{ labels.chatDisclaimerText }}
       </p>