@aleph-alpha/chat-kit 2.3.0 → 3.0.0

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,aAAa,EACb,uBAAuB,EACvB,UAAU,EACV,UAAU,EACV,aAAa,GACd,MAAM,QAAQ,CAAC;AAChB,YAAY,EACV,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,6BAA6B,EAC7B,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAChE,YAAY,EACV,mBAAmB,EACnB,cAAc,EACd,cAAc,GACf,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,aAAa,EACb,uBAAuB,EACvB,UAAU,EACV,UAAU,EACV,aAAa,GACd,MAAM,QAAQ,CAAC;AAChB,YAAY,EACV,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,6BAA6B,EAC7B,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAChE,YAAY,EACV,mBAAmB,EACnB,cAAc,EACd,cAAc,GACf,MAAM,YAAY,CAAC"}

package/dist/components/index.js

@@ -1,4 +1,4 @@
-import { _, a, b, C, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t } from "../CkInput.vue_vue_type_script_setup_true_lang-DYTizPsB.js";
+import { _, a, b, C, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u } from "../CkInput.vue_vue_type_script_setup_true_lang-CwH5M5WD.js";
 export {
   _ as CkAgentMessage,
   a as CkConversation,
@@ -15,11 +15,12 @@ export {
   k as CkMarkdownRenderer,
   l as CkMessageActionButton,
   m as CkModelSelector,
-  n as CkPromptActionButton,
-  o as CkPromptInput,
-  p as CkPromptInputDisclaimer,
-  q as CkPromptStopButton,
-  r as CkSendIcon,
-  s as CkStopIcon,
-  t as CkUserMessage
+  n as CkPromptInput,
+  o as CkPromptInputDisclaimer,
+  p as CkPromptMenuButton,
+  q as CkPromptSendButton,
+  r as CkPromptStopButton,
+  s as CkSendIcon,
+  t as CkStopIcon,
+  u as CkUserMessage
 };

package/dist/index.d.ts

@@ -5,8 +5,8 @@ export { useChat, useConversationSessions, useConversations, } from './composabl
 export type { ChatActions, ChatState, ConversationSession, CreateConversationInput, MessageHandler, MutationOptions, UseChatReturn, UseConversationSessionsReturn, UseConversationsOptions, UseConversationsReturn, } from './composables';
 export { SdkError, createDocumentUploadProvider, defaultDocumentUploadConfig, defaultEndpoints, useDocumentUploadWithDefaultConfig, } from './composables/fileUpload';
 export type { DocumentUploadConfig, DocumentUploadProvider, FileEntry, FileStatus, } from './composables/fileUpload';
-export { CkAgentMessage, CkConversation, CkConversationLayout, CkCopyMessageActionButton, CkDropZoneOverlay, CkFeedbackButton, CkFeedbackDialog, CkFileItemsList, CkHistory, CkHistoryItem, CkHistoryWrapper, CkInput, CkMarkdownRenderer, CkMessageActionButton, CkModelSelector, CkPromptActionButton, CkPromptStopButton, CkPromptInput, CkPromptInputDisclaimer, CkSendIcon, CkStopIcon, CkUserMessage, } from './components';
-export type { CkConversationLayoutProps, CkConversationProps, CkDropZoneOverlayProps, CkDropZoneOverlayEmits, CkDropZoneRejection, CkDropZoneRejectionReason, CkFeedbackButtonProps, CkFeedbackDialogEmits, CkFeedbackDialogProps, CkFeedbackDialogSubmitPayload, CkFeedbackReason, CkFeedbackSentiment, CkFeedbackValue, CkFileEntry, CkFileItemsListEmits, CkFileItemsListProps, CkHistoryEmits, CkHistoryItemEmits, CkHistoryItemProps, CkHistoryProps, CkHistoryWrapperProps, CkMarkdownElementClasses, CkMarkdownRendererProps, CkModelOption, CkModelSelectorProps, CkModelSelectorEmits, CkUserMessageProps, } from './components';
+export { CkAgentMessage, CkConversation, CkConversationLayout, CkCopyMessageActionButton, CkDropZoneOverlay, CkFeedbackButton, CkFeedbackDialog, CkFileItemsList, CkHistory, CkHistoryItem, CkHistoryWrapper, CkInput, CkMarkdownRenderer, CkMessageActionButton, CkModelSelector, CkPromptSendButton, CkPromptMenuButton, CkPromptStopButton, CkPromptInput, CkPromptInputDisclaimer, CkSendIcon, CkStopIcon, CkUserMessage, } from './components';
+export type { CkConversationLayoutProps, CkConversationProps, CkDropZoneOverlayProps, CkDropZoneOverlayEmits, CkDropZoneRejection, CkDropZoneRejectionReason, CkFeedbackButtonProps, CkFeedbackDialogEmits, CkFeedbackDialogProps, CkFeedbackDialogSubmitPayload, CkFeedbackReason, CkFeedbackSentiment, CkFeedbackValue, CkFileEntry, CkFileItemsListEmits, CkFileItemsListProps, CkHistoryEmits, CkHistoryItemEmits, CkHistoryItemProps, CkHistoryProps, CkHistoryWrapperProps, CkMarkdownElementClasses, CkMarkdownRendererProps, CkModelOption, CkModelSelectorProps, CkModelSelectorEmits, CkPromptMenuButtonProps, CkUserMessageProps, } from './components';
 export { formatRelativeTime } from './helpers';
 export type { BaseMessage, Conversation, ConversationTree, MessageContent, MessageContentStatus, MessageMetadata, MessageReasoningContent, MessageRole, MessageStatus, MessageTextContent, MessageToolContent, TreeMessage, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AASpB,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,GAChB,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EACL,OAAO,EACP,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,aAAa,EACb,6BAA6B,EAC7B,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,QAAQ,EACR,4BAA4B,EAC5B,2BAA2B,EAC3B,gBAAgB,EAChB,kCAAkC,GACnC,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,oBAAoB,EACpB,sBAAsB,EACtB,SAAS,EACT,UAAU,GACX,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EACL,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,OAAO,EACP,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,aAAa,EACb,uBAAuB,EACvB,UAAU,EACV,UAAU,EACV,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,yBAAyB,EACzB,mBAAmB,EACnB,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,6BAA6B,EAC7B,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAG/C,YAAY,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,GACZ,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AASpB,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,GAChB,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EACL,OAAO,EACP,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,aAAa,EACb,6BAA6B,EAC7B,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,QAAQ,EACR,4BAA4B,EAC5B,2BAA2B,EAC3B,gBAAgB,EAChB,kCAAkC,GACnC,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,oBAAoB,EACpB,sBAAsB,EACtB,SAAS,EACT,UAAU,GACX,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EACL,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,OAAO,EACP,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,aAAa,EACb,uBAAuB,EACvB,UAAU,EACV,UAAU,EACV,aAAa,GACd,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,yBAAyB,EACzB,mBAAmB,EACnB,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,6BAA6B,EAC7B,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,WAAW,EACX,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAG/C,YAAY,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,GACZ,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,7 +1,7 @@
 import { u } from "./useMessageHandler-CMdy-lm0.js";
 import { C, d, p, u as u2, a } from "./useChatKitLabels-ZutacPad.js";
 import { S, c, d as d2, a as a2, u as u3, b, e, f } from "./index-THzZwfMU.js";
-import { _, a as a3, b as b2, C as C2, c as c2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4 } from "./CkInput.vue_vue_type_script_setup_true_lang-DYTizPsB.js";
+import { _, a as a3, b as b2, C as C2, c as c2, d as d3, e as e2, f as f2, g, h, i, j, k, l, m, n, o, p as p2, q, r, s, t, u as u4, v } from "./CkInput.vue_vue_type_script_setup_true_lang-CwH5M5WD.js";
 export {
   C as CHAT_KIT_LABELS,
   _ as CkAgentMessage,
@@ -19,19 +19,20 @@ export {
   k as CkMarkdownRenderer,
   l as CkMessageActionButton,
   m as CkModelSelector,
-  n as CkPromptActionButton,
-  o as CkPromptInput,
-  p2 as CkPromptInputDisclaimer,
-  q as CkPromptStopButton,
-  r as CkSendIcon,
-  s as CkStopIcon,
-  t as CkUserMessage,
+  n as CkPromptInput,
+  o as CkPromptInputDisclaimer,
+  p2 as CkPromptMenuButton,
+  q as CkPromptSendButton,
+  r as CkPromptStopButton,
+  s as CkSendIcon,
+  t as CkStopIcon,
+  u4 as CkUserMessage,
   S as SdkError,
   c as createDocumentUploadProvider,
   d as defaultChatKitLabels,
   d2 as defaultDocumentUploadConfig,
   a2 as defaultEndpoints,
-  u4 as formatRelativeTime,
+  v as formatRelativeTime,
   p as provideChatKitLabels,
   u3 as useChat,
   u2 as useChatKitLabels,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/chat-kit",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "description": "Chat kit package for building chat interfaces with Vue",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/base/CkDropZoneOverlay/CkDropZoneOverlay.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { formatFileSize } from '@aleph-alpha/ui-library';
 
 import CkDropZoneIllustration from './CkDropZoneIllustration.vue';
 import type {
@@ -76,12 +77,6 @@ function fileMatchesAccept(file: File): boolean {
   return false;
 }
 
-function formatBytes(bytes: number): string {
-  const mb = bytes / (1024 * 1024);
-  if (mb >= 1) return `${mb.toFixed(0)} MB`;
-  return `${Math.max(1, Math.round(bytes / 1024))} KB`;
-}
-
 const isSingle = computed(() => props.maxFiles === 1);
 
 const resolvedHeading = computed(
@@ -156,7 +151,7 @@ function onOverlayDrop(e: DragEvent) {
       rejected.push({
         file,
         reason: 'too-large',
-        message: `"${file.name}" — exceeds ${formatBytes(props.maxFileSizeBytes)} limit`,
+        message: `"${file.name}" — exceeds ${formatFileSize(props.maxFileSizeBytes)} limit`,
       });
       continue;
     }

package/src/components/base/CkModelSelector/types.ts

@@ -9,7 +9,7 @@
  * @category Actions
  * @useCases select model, choose LLM, model picker in prompt field, switch model mid-conversation
  * @keywords model, selector, picker, dropdown, llm, prompt, choose, switch
- * @related CkPromptInput, CkPromptActionButton
+ * @related CkPromptInput, CkPromptSendButton
  */
 export interface CkModelOption {
   /**

package/src/components/base/CkPromptInput/CkPromptInput.spec.ts

@@ -1,5 +1,29 @@
 import CkPromptInput from './CkPromptInput.vue';
 import { render, screen, fireEvent } from '@testing-library/vue';
+import { defineComponent, nextTick, ref } from 'vue';
+
+// Mock the textarea's scrollHeight (jsdom always returns 0). The auto-grow +
+// multi-line latch logic in CkPromptInput depends on scrollHeight; tests that
+// exercise that path call this helper to stage a measured value.
+function mockScrollHeight(value: number): void {
+  Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', {
+    configurable: true,
+    get() {
+      return value;
+    },
+  });
+}
+
+function restoreScrollHeight(): void {
+  // Re-installing a property descriptor with a getter returning 0 mirrors
+  // jsdom's default (`HTMLElement.scrollHeight` returns 0 by spec there).
+  Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', {
+    configurable: true,
+    get() {
+      return 0;
+    },
+  });
+}
 
 describe('CkPromptInput', () => {
   describe('rendering', () => {
@@ -122,13 +146,10 @@ describe('CkPromptInput', () => {
       expect(screen.getByText('Express')).toBeInTheDocument();
     });
 
-    it('does not render toolbar-left container when slot is not provided', () => {
+    it('renders no toolbar buttons when slots are not provided', () => {
       const { container } = render(CkPromptInput);
 
-      const toolbarDivs = container.querySelectorAll(
-        'form > div:last-child > div',
-      );
-      expect(toolbarDivs[0]?.children.length).toBe(0);
+      expect(container.querySelectorAll('button')).toHaveLength(0);
     });
 
     it('renders toolbar-right slot content', () => {
@@ -139,13 +160,12 @@ describe('CkPromptInput', () => {
       expect(screen.getByText('Custom Send')).toBeInTheDocument();
     });
 
-    it('renders nothing in toolbar-right by default', () => {
-      const { container } = render(CkPromptInput);
+    it('renders toolbar-top slot content', () => {
+      render(CkPromptInput, {
+        slots: { 'toolbar-top': '<span>Toolbar-top content</span>' },
+      });
 
-      const toolbarRight = container.querySelector(
-        'form > div:last-child > div.ml-auto',
-      );
-      expect(toolbarRight?.children.length).toBe(0);
+      expect(screen.getByText('Toolbar-top content')).toBeInTheDocument();
     });
 
     it('renders footer slot content', () => {
@@ -178,4 +198,179 @@ describe('CkPromptInput', () => {
       expect(screen.getByRole('textbox')).toBeDisabled();
     });
   });
+
+  // The form switches between compact (single-row, rounded-3xl) and stacked
+  // (multi-row, rounded-2xl) layouts based on (a) the presence of the
+  // `toolbar-top` slot and (b) whether the textarea content exceeds one line.
+  // These tests regression-guard the slot reactivity fix and the multi-line
+  // latch threshold.
+  describe('layout transitions', () => {
+    afterEach(() => {
+      restoreScrollHeight();
+    });
+
+    it('reacts to toolbar-top slot becoming available after mount', async () => {
+      const Parent = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { show: ref(false) };
+        },
+        template: `
+          <div>
+            <button data-testid="toggle" @click="show = !show">toggle</button>
+            <CkPromptInput model-value="">
+              <template v-if="show" #toolbar-top>
+                <span data-testid="top">attached files</span>
+              </template>
+            </CkPromptInput>
+          </div>
+        `,
+      });
+      const { container } = render(Parent);
+
+      expect(container.querySelector('[data-testid="top"]')).toBeNull();
+      expect(container.querySelector('form')?.className).toContain(
+        'rounded-3xl',
+      );
+
+      await fireEvent.click(screen.getByTestId('toggle'));
+
+      // Parent re-render → `useSlots()` flips → computed re-evaluates → top
+      // row renders AND the form swaps to the smaller multi-row radius.
+      expect(
+        container.querySelector('[data-testid="top"]'),
+      ).toBeInTheDocument();
+      expect(container.querySelector('form')?.className).toContain(
+        'rounded-2xl',
+      );
+    });
+
+    it('also reacts to toolbar-top slot becoming unavailable', async () => {
+      const Parent = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { show: ref(true) };
+        },
+        template: `
+          <div>
+            <button data-testid="toggle" @click="show = !show">toggle</button>
+            <CkPromptInput model-value="">
+              <template v-if="show" #toolbar-top>
+                <span data-testid="top">attached files</span>
+              </template>
+            </CkPromptInput>
+          </div>
+        `,
+      });
+      const { container } = render(Parent);
+
+      expect(container.querySelector('form')?.className).toContain(
+        'rounded-2xl',
+      );
+
+      await fireEvent.click(screen.getByTestId('toggle'));
+
+      expect(container.querySelector('[data-testid="top"]')).toBeNull();
+      expect(container.querySelector('form')?.className).toContain(
+        'rounded-3xl',
+      );
+    });
+
+    it('latches to multi-line layout when scrollHeight exceeds 2× line-height', async () => {
+      mockScrollHeight(48); // exactly 2 × LINE_HEIGHT
+      const Parent = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { text: ref('one') };
+        },
+        template: `
+          <CkPromptInput :model-value="text" @update:model-value="text = $event" />
+        `,
+      });
+      const { container, rerender } = render(Parent);
+      // Initial render mounted with scrollHeight=48 but modelValue='one' (no
+      // newline) — single line latches to multi when scrollHeight ≥ 48.
+      await nextTick();
+      // The grid template should now include the input-on-top + toolbar-row
+      // shape used for multi-line mode.
+      const form = container.querySelector('form');
+      expect(form?.style.gridTemplateAreas).toContain('"left . right"');
+
+      // Rerender to a different value to confirm the latch persists.
+      await rerender({});
+      await nextTick();
+      expect(form?.style.gridTemplateAreas).toContain('"left . right"');
+    });
+
+    it('does NOT latch on borderline scrollHeight (single emoji-line @ 36 px)', async () => {
+      mockScrollHeight(36); // 1.5 × LINE_HEIGHT — emoji/CJK sub-pixel rendering
+      const Parent = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { text: ref('hi 👋') };
+        },
+        template: `<CkPromptInput :model-value="text" />`,
+      });
+      const { container } = render(Parent);
+      await nextTick();
+      // Single-line layout: textarea + toolbars on the same row.
+      const form = container.querySelector('form');
+      expect(form?.style.gridTemplateAreas).toContain('"left input right"');
+      expect(form?.style.gridTemplateAreas).not.toContain('"left . right"');
+    });
+
+    it('latches when the user inserts an explicit newline (Shift+Enter)', async () => {
+      mockScrollHeight(24); // jsdom never reports >24 reliably; rely on \n
+      const Parent = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { text: ref('line one') };
+        },
+        template: `
+          <CkPromptInput :model-value="text" @update:model-value="text = $event" />
+        `,
+      });
+      const { container } = render(Parent);
+      await nextTick();
+      const form = container.querySelector('form');
+      expect(form?.style.gridTemplateAreas).toContain('"left input right"');
+
+      // Now the modelValue contains a newline.
+      const ParentTwoLines = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { text: ref('line one\nline two') };
+        },
+        template: `<CkPromptInput :model-value="text" />`,
+      });
+      const { container: c2 } = render(ParentTwoLines);
+      await nextTick();
+      expect(c2.querySelector('form')?.style.gridTemplateAreas).toContain(
+        '"left . right"',
+      );
+    });
+
+    it('un-latches multi-line state when the field is emptied', async () => {
+      mockScrollHeight(48);
+      const Parent = defineComponent({
+        components: { CkPromptInput },
+        setup() {
+          return { text: ref('something') };
+        },
+        template: `
+          <CkPromptInput :model-value="text" @update:model-value="text = $event" />
+        `,
+      });
+      const { container, getByRole } = render(Parent);
+      await nextTick();
+      const form = container.querySelector('form');
+      expect(form?.style.gridTemplateAreas).toContain('"left . right"');
+
+      mockScrollHeight(24);
+      await fireEvent.update(getByRole('textbox'), '');
+      await nextTick();
+
+      expect(form?.style.gridTemplateAreas).toContain('"left input right"');
+    });
+  });
 });