@aleph-alpha/chat-kit 2.2.0 → 3.0.0

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

@@ -1,6 +1,26 @@
 import CkPromptInput from './CkPromptInput.vue';
+import CkPromptSendButton from '../CkPromptSendButton/CkPromptSendButton.vue';
+import CkPromptStopButton from '../CkPromptStopButton/CkPromptStopButton.vue';
+import CkPromptMenuButton from '../CkPromptMenuButton/CkPromptMenuButton.vue';
+import CkPromptInputDisclaimer from '../CkPromptInputDisclaimer/CkPromptInputDisclaimer.vue';
+import CkModelSelector from '../CkModelSelector/CkModelSelector.vue';
+import CkFileItemsList from '../CkFileItemsList/CkFileItemsList.vue';
+import CkDropZoneOverlay from '../CkDropZoneOverlay/CkDropZoneOverlay.vue';
+import CkSendIcon from '../icons/CkSendIcon.vue';
+import CkStopIcon from '../icons/CkStopIcon.vue';
+import {
+  UiDropdownMenu,
+  UiDropdownMenuTrigger,
+  UiDropdownMenuContent,
+  UiDropdownMenuItem,
+  UiIcon,
+  formatFileSize,
+} from '@aleph-alpha/ui-library';
+import type { CkFileEntry } from '../CkFileItemsList/types';
+import type { CkModelOption } from '../CkModelSelector/types';
+import type { CkDropZoneRejection } from '../CkDropZoneOverlay/types';
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { ref } from 'vue';
+import { computed, ref, useTemplateRef } from 'vue';
 
 const meta: Meta<typeof CkPromptInput> = {
   title: 'Base/CkPromptInput',
@@ -16,10 +36,6 @@ const meta: Meta<typeof CkPromptInput> = {
       description: 'Placeholder shown when the textarea is empty.',
     },
     disabled: { control: 'boolean', description: 'Disables the textarea.' },
-    maxHeight: {
-      control: 'number',
-      description: 'Max height (px) before the textarea becomes scrollable.',
-    },
     ariaLabel: {
       control: 'text',
       description: 'Accessible label for the textarea.',
@@ -37,7 +53,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const defaultTemplateSource = `<script setup lang="ts">
-import { CkPromptInput } from '@aleph-alpha/chat-kit';
+import { CkPromptInput, CkPromptSendButton, CkSendIcon } from '@aleph-alpha/chat-kit';
 import { ref } from 'vue';
 
 const text = ref('');
@@ -48,11 +64,33 @@ const text = ref('');
     v-model="text"
     placeholder="Type a message..."
     aria-label="Message input"
-  />
+  >
+    <template #toolbar-right="{ submit, disabled }">
+      <CkPromptSendButton
+        aria-label="Send message"
+        :disabled="disabled"
+        @click="submit"
+      >
+        <CkSendIcon />
+      </CkPromptSendButton>
+    </template>
+  </CkPromptInput>
 </template>`;
 
 const withToolbarSlotsTemplateSource = `<script setup lang="ts">
-import { CkPromptInput } from '@aleph-alpha/chat-kit';
+import {
+  CkPromptInput,
+  CkPromptSendButton,
+  CkPromptMenuButton,
+  CkSendIcon,
+} from '@aleph-alpha/chat-kit';
+import {
+  UiDropdownMenu,
+  UiDropdownMenuTrigger,
+  UiDropdownMenuContent,
+  UiDropdownMenuItem,
+  UiIcon,
+} from '@aleph-alpha/ui-library';
 import { ref } from 'vue';
 
 const text = ref('');
@@ -65,18 +103,41 @@ const text = ref('');
     aria-label="Message input"
   >
     <template #toolbar-left>
-      <button class="h-9 rounded-md border px-3 text-sm">Options</button>
+      <UiDropdownMenu>
+        <UiDropdownMenuTrigger as-child>
+          <CkPromptMenuButton aria-label="Open prompt menu" />
+        </UiDropdownMenuTrigger>
+        <UiDropdownMenuContent side="top" align="start" :side-offset="8">
+          <UiDropdownMenuItem>
+            <UiIcon name="file" :size="16" />
+            Add documents
+          </UiDropdownMenuItem>
+          <UiDropdownMenuItem>
+            <UiIcon name="folder" :size="16" />
+            Add folders
+          </UiDropdownMenuItem>
+        </UiDropdownMenuContent>
+      </UiDropdownMenu>
     </template>
     <template #toolbar-right="{ submit, disabled }">
-      <button :disabled="disabled" class="size-9 rounded-md bg-brand-bg-brand" @click="submit">
-        Send
-      </button>
+      <CkPromptSendButton
+        aria-label="Send message"
+        :disabled="disabled"
+        @click="submit"
+      >
+        <CkSendIcon />
+      </CkPromptSendButton>
     </template>
   </CkPromptInput>
 </template>`;
 
 const withFooterSlotTemplateSource = `<script setup lang="ts">
-import { CkPromptInput } from '@aleph-alpha/chat-kit';
+import {
+  CkPromptInput,
+  CkPromptSendButton,
+  CkPromptInputDisclaimer,
+  CkSendIcon,
+} from '@aleph-alpha/chat-kit';
 import { ref } from 'vue';
 
 const text = ref('');
@@ -84,16 +145,101 @@ const text = ref('');
 
 <template>
   <CkPromptInput v-model="text" placeholder="Type a message..." aria-label="Message input">
+    <template #toolbar-right="{ submit, disabled }">
+      <CkPromptSendButton
+        aria-label="Send message"
+        :disabled="disabled"
+        @click="submit"
+      >
+        <CkSendIcon />
+      </CkPromptSendButton>
+    </template>
     <template #footer>
-      <p class="text-center text-xs text-core-content-tertiary">
-        Custom footer content via slot
-      </p>
+      <CkPromptInputDisclaimer
+        text="AI can hallucinate confident-sounding but false information. Verify before you act on it."
+      />
+    </template>
+  </CkPromptInput>
+</template>`;
+
+const withFooterControlsTemplateSource = `<script setup lang="ts">
+import { CkPromptInput, CkPromptSendButton, CkSendIcon } from '@aleph-alpha/chat-kit';
+import { ref, computed } from 'vue';
+
+const text = ref('');
+const maxChars = 500;
+const charsLeft = computed(() => maxChars - text.value.length);
+</script>
+
+<template>
+  <CkPromptInput v-model="text" placeholder="Type a message..." aria-label="Message input">
+    <template #toolbar-right="{ submit, disabled }">
+      <CkPromptSendButton
+        aria-label="Send message"
+        :disabled="disabled"
+        @click="submit"
+      >
+        <CkSendIcon />
+      </CkPromptSendButton>
+    </template>
+    <template #footer>
+      <div class="flex items-center justify-between text-xs text-content-on-surface-muted">
+        <span>
+          Press <kbd class="rounded border px-1 py-0.5">Shift</kbd>
+          + <kbd class="rounded border px-1 py-0.5">Enter</kbd> for newline
+        </span>
+        <span :class="{ 'text-red-500': charsLeft < 0 }">
+          {{ charsLeft }} / {{ maxChars }}
+        </span>
+      </div>
+    </template>
+  </CkPromptInput>
+</template>`;
+
+const withToolbarTopSlotTemplateSource = `<script setup lang="ts">
+import {
+  CkPromptInput,
+  CkPromptSendButton,
+  CkFileItemsList,
+  CkSendIcon,
+  type CkFileEntry,
+} from '@aleph-alpha/chat-kit';
+import { ref } from 'vue';
+
+const text = ref('');
+const files = ref<CkFileEntry[]>([
+  { id: 'a', filename: 'Invoice.pdf', typeLabel: 'PDF', sizeLabel: '12 MB' },
+  { id: 'b', filename: 'Data.csv', typeLabel: 'CSV', sizeLabel: '10 MB' },
+]);
+function removeFile(id: CkFileEntry['id']) {
+  files.value = files.value.filter((f) => f.id !== id);
+}
+</script>
+
+<template>
+  <CkPromptInput v-model="text" placeholder="Type a message..." aria-label="Message input">
+    <template #toolbar-top>
+      <CkFileItemsList
+        :files="files"
+        is-removable
+        list-label="Attached files"
+        @remove="removeFile"
+      />
+    </template>
+    <template #toolbar-right="{ submit, disabled }">
+      <CkPromptSendButton
+        aria-label="Send message"
+        :disabled="disabled"
+        @click="submit"
+      >
+        <CkSendIcon />
+      </CkPromptSendButton>
     </template>
   </CkPromptInput>
 </template>`;
 
 const disabledTemplateSource = `<script setup lang="ts">
-import { CkPromptInput } from '@aleph-alpha/chat-kit';
+import { CkPromptInput, CkPromptSendButton, CkSendIcon } from '@aleph-alpha/chat-kit';
 import { ref } from 'vue';
 
 const text = ref('');
@@ -105,7 +251,17 @@ const text = ref('');
     disabled
     placeholder="Input is disabled"
     aria-label="Disabled input"
-  />
+  >
+    <template #toolbar-right="{ submit, disabled }">
+      <CkPromptSendButton
+        aria-label="Send message"
+        :disabled="disabled"
+        @click="submit"
+      >
+        <CkSendIcon />
+      </CkPromptSendButton>
+    </template>
+  </CkPromptInput>
 </template>`;
 
 /**
@@ -114,7 +270,7 @@ const text = ref('');
  */
 export const Default: Story = {
   render: () => ({
-    components: { CkPromptInput },
+    components: { CkPromptInput, CkPromptSendButton, CkSendIcon },
     setup() {
       const text = ref('');
       return { text };
@@ -124,19 +280,41 @@ export const Default: Story = {
         v-model="text"
         placeholder="Type a message..."
         aria-label="Message input"
-      />
+      >
+        <template #toolbar-right="{ submit, disabled }">
+          <CkPromptSendButton
+            aria-label="Send message"
+            :disabled="disabled"
+            @click="submit"
+          >
+            <CkSendIcon />
+          </CkPromptSendButton>
+        </template>
+      </CkPromptInput>
     `,
   }),
   parameters: { docs: { source: { code: defaultTemplateSource } } },
 };
 
 /**
- * Demonstrates both `toolbar-left` and `toolbar-right` slots. The right slot
- * receives `{ submit, disabled, isEmpty }` to wire up a custom send button.
+ * Both toolbar slots filled with the real chat-kit primitives: the left slot
+ * hosts a `CkPromptMenuButton` wrapped in `UiDropdownMenu` (the canonical "+"
+ * trigger pattern with file/folder actions), the right slot a
+ * `CkPromptSendButton`. Mirrors Figma's "Drawer to add resources or tools".
  */
 export const WithToolbarSlots: Story = {
   render: () => ({
-    components: { CkPromptInput },
+    components: {
+      CkPromptInput,
+      CkPromptSendButton,
+      CkPromptMenuButton,
+      CkSendIcon,
+      UiDropdownMenu,
+      UiDropdownMenuTrigger,
+      UiDropdownMenuContent,
+      UiDropdownMenuItem,
+      UiIcon,
+    },
     setup() {
       const text = ref('');
       return { text };
@@ -148,22 +326,30 @@ export const WithToolbarSlots: Story = {
         aria-label="Message input"
       >
         <template #toolbar-left>
-          <button
-            class="flex items-center gap-1 rounded-md border border-solid px-3 h-9 text-sm"
-            style="border-color: rgba(183, 180, 164, 0.3);"
-          >
-            Options
-          </button>
+          <UiDropdownMenu>
+            <UiDropdownMenuTrigger as-child>
+              <CkPromptMenuButton aria-label="Open prompt menu" />
+            </UiDropdownMenuTrigger>
+            <UiDropdownMenuContent side="top" align="start" :side-offset="8">
+              <UiDropdownMenuItem>
+                <UiIcon name="file" :size="16" />
+                Add documents
+              </UiDropdownMenuItem>
+              <UiDropdownMenuItem>
+                <UiIcon name="folder" :size="16" />
+                Add folders
+              </UiDropdownMenuItem>
+            </UiDropdownMenuContent>
+          </UiDropdownMenu>
         </template>
         <template #toolbar-right="{ submit, disabled }">
-          <button
+          <CkPromptSendButton
+            aria-label="Send message"
             :disabled="disabled"
-            class="flex items-center justify-center size-9 rounded-md disabled:opacity-50"
-            style="background-color: #c9e400; color: #1d1d1b;"
             @click="submit"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z"/><path d="M6 12h16"/></svg>
-          </button>
+            <CkSendIcon />
+          </CkPromptSendButton>
         </template>
       </CkPromptInput>
     `,
@@ -172,13 +358,19 @@ export const WithToolbarSlots: Story = {
 };
 
 /**
- * Uses the `footer` slot to render helper text (disclaimer, keyboard hint,
- * etc.) directly below the input form. Use when you want a custom footer
- * instead of `CkPromptInputDisclaimer`.
+ * `footer` slot filled with the canonical `CkPromptInputDisclaimer` —
+ * the AI-hallucination warning matching the Figma design system. For
+ * arbitrary custom footer content (helpers, counters, etc.) see the
+ * `WithFooterControls` story below.
  */
 export const WithFooterSlot: Story = {
   render: () => ({
-    components: { CkPromptInput },
+    components: {
+      CkPromptInput,
+      CkPromptSendButton,
+      CkPromptInputDisclaimer,
+      CkSendIcon,
+    },
     setup() {
       const text = ref('');
       return { text };
@@ -189,10 +381,19 @@ export const WithFooterSlot: Story = {
         placeholder="Type a message..."
         aria-label="Message input"
       >
+        <template #toolbar-right="{ submit, disabled }">
+          <CkPromptSendButton
+            aria-label="Send message"
+            :disabled="disabled"
+            @click="submit"
+          >
+            <CkSendIcon />
+          </CkPromptSendButton>
+        </template>
         <template #footer>
-          <p class="text-core-content-tertiary text-center text-xs leading-3.5">
-            Custom footer content via slot
-          </p>
+          <CkPromptInputDisclaimer
+            text="AI can hallucinate confident-sounding but false information. Verify before you act on it."
+          />
         </template>
       </CkPromptInput>
     `,
@@ -200,13 +401,827 @@ export const WithFooterSlot: Story = {
   parameters: { docs: { source: { code: withFooterSlotTemplateSource } } },
 };
 
+/**
+ * Footer slot used for interactive helpers — keyboard hint on the left and a
+ * live character counter on the right. Demonstrates that the footer can hold
+ * structured content, not just disclaimer text.
+ */
+export const WithFooterControls: Story = {
+  render: () => ({
+    components: { CkPromptInput, CkPromptSendButton, CkSendIcon },
+    setup() {
+      const text = ref('');
+      const maxChars = 500;
+      const charsLeft = computed(() => maxChars - text.value.length);
+      return { text, maxChars, charsLeft };
+    },
+    template: `
+      <CkPromptInput
+        v-model="text"
+        placeholder="Type a message..."
+        aria-label="Message input"
+      >
+        <template #toolbar-right="{ submit, disabled }">
+          <CkPromptSendButton
+            aria-label="Send message"
+            :disabled="disabled"
+            @click="submit"
+          >
+            <CkSendIcon />
+          </CkPromptSendButton>
+        </template>
+        <template #footer>
+          <div class="text-content-on-surface-muted flex items-center justify-between text-xs">
+            <span>
+              Press
+              <kbd class="border-border-surface-default rounded border px-1 py-0.5 font-mono">Shift</kbd>
+              +
+              <kbd class="border-border-surface-default rounded border px-1 py-0.5 font-mono">Enter</kbd>
+              for newline
+            </span>
+            <span :class="{ 'text-red-500': charsLeft < 0 }">
+              {{ charsLeft }} / {{ maxChars }}
+            </span>
+          </div>
+        </template>
+      </CkPromptInput>
+    `,
+  }),
+  parameters: { docs: { source: { code: withFooterControlsTemplateSource } } },
+};
+
+/**
+ * `toolbar-top` slot rendered with the canonical `CkFileItemsList` primitive.
+ * Two attached files visible as inline chips. Adding the top row also flips
+ * the form to the multi-row layout (corner radius drops from 3xl to 2xl).
+ */
+export const WithToolbarTopSlot: Story = {
+  render: () => ({
+    components: {
+      CkPromptInput,
+      CkPromptSendButton,
+      CkFileItemsList,
+      CkSendIcon,
+    },
+    setup() {
+      const text = ref('');
+      const files = ref<CkFileEntry[]>([
+        {
+          id: 'a',
+          filename: 'Invoice.pdf',
+          typeLabel: 'PDF',
+          sizeLabel: '12 MB',
+        },
+        { id: 'b', filename: 'Data.csv', typeLabel: 'CSV', sizeLabel: '10 MB' },
+      ]);
+      function removeFile(id: CkFileEntry['id']) {
+        files.value = files.value.filter((f) => f.id !== id);
+      }
+      return { text, files, removeFile };
+    },
+    template: `
+      <CkPromptInput
+        v-model="text"
+        placeholder="Type a message..."
+        aria-label="Message input"
+      >
+        <template #toolbar-top>
+          <CkFileItemsList
+            :files="files"
+            is-removable
+            list-label="Attached files"
+            @remove="removeFile"
+          />
+        </template>
+        <template #toolbar-right="{ submit, disabled }">
+          <CkPromptSendButton
+            aria-label="Send message"
+            :disabled="disabled"
+            @click="submit"
+          >
+            <CkSendIcon />
+          </CkPromptSendButton>
+        </template>
+      </CkPromptInput>
+    `,
+  }),
+  parameters: { docs: { source: { code: withToolbarTopSlotTemplateSource } } },
+};
+
+const withUploadAndModelSelectionTemplateSource = `<script setup lang="ts">
+import {
+  CkPromptInput,
+  CkPromptSendButton,
+  CkPromptMenuButton,
+  CkPromptInputDisclaimer,
+  CkModelSelector,
+  CkFileItemsList,
+  CkDropZoneOverlay,
+  CkSendIcon,
+  type CkFileEntry,
+  type CkModelOption,
+  type CkDropZoneRejection,
+} from '@aleph-alpha/chat-kit';
+import {
+  UiDropdownMenu,
+  UiDropdownMenuTrigger,
+  UiDropdownMenuContent,
+  UiDropdownMenuItem,
+  UiIcon,
+  formatFileSize,
+} from '@aleph-alpha/ui-library';
+import { ref, useTemplateRef } from 'vue';
+
+const text = ref('');
+const files = ref<CkFileEntry[]>([]);
+const selectedModelId = ref<string | null>('phoenix');
+const fileInputRef = useTemplateRef<HTMLInputElement>('fileInputRef');
+const folderInputRef = useTemplateRef<HTMLInputElement>('folderInputRef');
+
+const models: CkModelOption[] = [
+  { id: 'phoenix', label: 'Phoenix' },
+  { id: 'pharia-1-llm-7b', label: 'Pharia 1 LLM 7B' },
+  { id: 'pharia-1-llm-13b', label: 'Pharia 1 LLM 13B' },
+];
+
+function appendFiles(picked: File[]): void {
+  const next = picked.map((file) => ({
+    id: \`\${file.name}-\${file.size}-\${file.lastModified}\`,
+    filename: file.name,
+    typeLabel: file.name.split('.').pop()?.toUpperCase() ?? 'FILE',
+    sizeLabel: formatFileSize(file.size),
+  }));
+  files.value = [...files.value, ...next];
+}
+
+function onFilePick(event: Event): void {
+  const input = event.target as HTMLInputElement;
+  appendFiles(Array.from(input.files ?? []));
+  input.value = '';
+}
+
+function onRemoveFile(id: CkFileEntry['id']): void {
+  files.value = files.value.filter((file) => file.id !== id);
+}
+
+function onRejected(rejections: CkDropZoneRejection[]): void {
+  console.warn('Rejected files', rejections);
+}
+
+function onSubmit(value: string): void {
+  console.log('submit', { text: value, files: files.value, model: selectedModelId.value });
+  text.value = '';
+  files.value = [];
+}
+</script>
+
+<template>
+  <CkDropZoneOverlay
+    accept=".pdf,.txt,.md,.csv,.docx"
+    :max-files="10"
+    :max-file-size-bytes="20 * 1024 * 1024"
+    @files="appendFiles"
+    @rejected="onRejected"
+  />
+  <input
+    ref="fileInputRef"
+    type="file"
+    multiple
+    accept=".pdf,.txt,.md,.csv,.docx"
+    class="sr-only"
+    @change="onFilePick"
+  />
+  <input
+    ref="folderInputRef"
+    type="file"
+    multiple
+    webkitdirectory
+    class="sr-only"
+    @change="onFilePick"
+  />
+  <CkPromptInput
+    v-model="text"
+    placeholder="Ask me anything"
+    aria-label="Chat message input"
+    @submit="onSubmit"
+  >
+    <template v-if="files.length" #toolbar-top>
+      <CkFileItemsList
+        :files="files"
+        is-removable
+        list-label="Attached files"
+        @remove="onRemoveFile"
+      />
+    </template>
+    <template #toolbar-left>
+      <UiDropdownMenu>
+        <UiDropdownMenuTrigger as-child>
+          <CkPromptMenuButton aria-label="Open prompt menu" />
+        </UiDropdownMenuTrigger>
+        <UiDropdownMenuContent side="top" align="start" :side-offset="8">
+          <UiDropdownMenuItem @select="fileInputRef?.click()">
+            <UiIcon name="file" :size="16" />
+            Add documents
+          </UiDropdownMenuItem>
+          <UiDropdownMenuItem @select="folderInputRef?.click()">
+            <UiIcon name="folder" :size="16" />
+            Add folders
+          </UiDropdownMenuItem>
+        </UiDropdownMenuContent>
+      </UiDropdownMenu>
+    </template>
+    <template #toolbar-right="{ submit, disabled }">
+      <div class="flex items-center gap-3">
+        <CkModelSelector
+          :models="models"
+          v-model:selected-model-id="selectedModelId"
+        />
+        <CkPromptSendButton
+          aria-label="Send message"
+          :disabled="disabled"
+          @click="submit"
+        >
+          <CkSendIcon />
+        </CkPromptSendButton>
+      </div>
+    </template>
+    <template #footer>
+      <CkPromptInputDisclaimer
+        text="AI can hallucinate confident-sounding but false information. Verify before you act on it."
+      />
+    </template>
+  </CkPromptInput>
+</template>`;
+
+/**
+ * End-to-end composition matching the Figma "Prompt field" spec: file
+ * attachments via the `+` button and drag-and-drop, model selection next to
+ * the send button, and a hallucination disclaimer in the footer. File chips
+ * collapse to a popover once more than three are attached (`CkFileItemsList`
+ * default).
+ */
+export const WithUploadAndModelSelection: Story = {
+  render: () => ({
+    components: {
+      CkPromptInput,
+      CkPromptSendButton,
+      CkPromptMenuButton,
+      CkPromptInputDisclaimer,
+      CkModelSelector,
+      CkFileItemsList,
+      CkDropZoneOverlay,
+      CkSendIcon,
+      UiDropdownMenu,
+      UiDropdownMenuTrigger,
+      UiDropdownMenuContent,
+      UiDropdownMenuItem,
+      UiIcon,
+    },
+    setup() {
+      const text = ref('');
+      const files = ref<CkFileEntry[]>([]);
+      const selectedModelId = ref<string | null>('phoenix');
+      const fileInputRef = useTemplateRef<HTMLInputElement>('fileInputRef');
+      const folderInputRef = useTemplateRef<HTMLInputElement>('folderInputRef');
+
+      const models: CkModelOption[] = [
+        { id: 'phoenix', label: 'Phoenix' },
+        { id: 'pharia-1-llm-7b', label: 'Pharia 1 LLM 7B' },
+        { id: 'pharia-1-llm-13b', label: 'Pharia 1 LLM 13B' },
+      ];
+
+      function appendFiles(picked: File[]): void {
+        const next: CkFileEntry[] = picked.map((file) => ({
+          id: `${file.name}-${file.size}-${file.lastModified}`,
+          filename: file.name,
+          typeLabel: file.name.split('.').pop()?.toUpperCase() ?? 'FILE',
+          sizeLabel: formatFileSize(file.size),
+        }));
+        files.value = [...files.value, ...next];
+      }
+
+      function onFilePick(event: Event): void {
+        const input = event.target as HTMLInputElement;
+        appendFiles(Array.from(input.files ?? []));
+        input.value = '';
+      }
+
+      function onRemoveFile(id: CkFileEntry['id']): void {
+        files.value = files.value.filter((file) => file.id !== id);
+      }
+
+      function onRejected(rejections: CkDropZoneRejection[]): void {
+        // Surfaced by the built-in toast; consumer-side logging only.
+        // eslint-disable-next-line no-console
+        console.warn('Rejected files', rejections);
+      }
+
+      function onSubmit(value: string): void {
+        // eslint-disable-next-line no-console
+        console.log('submit', {
+          text: value,
+          files: files.value,
+          model: selectedModelId.value,
+        });
+        text.value = '';
+        files.value = [];
+      }
+
+      return {
+        text,
+        files,
+        models,
+        selectedModelId,
+        fileInputRef,
+        folderInputRef,
+        appendFiles,
+        onFilePick,
+        onRemoveFile,
+        onRejected,
+        onSubmit,
+      };
+    },
+    template: `
+      <CkDropZoneOverlay
+        accept=".pdf,.txt,.md,.csv,.docx"
+        :max-files="10"
+        :max-file-size-bytes="20 * 1024 * 1024"
+        @files="appendFiles"
+        @rejected="onRejected"
+      />
+      <input
+        ref="fileInputRef"
+        type="file"
+        multiple
+        accept=".pdf,.txt,.md,.csv,.docx"
+        class="sr-only"
+        @change="onFilePick"
+      />
+      <input
+        ref="folderInputRef"
+        type="file"
+        multiple
+        webkitdirectory
+        class="sr-only"
+        @change="onFilePick"
+      />
+      <CkPromptInput
+        v-model="text"
+        placeholder="Ask me anything"
+        aria-label="Chat message input"
+        @submit="onSubmit"
+      >
+        <template v-if="files.length" #toolbar-top>
+          <CkFileItemsList
+            :files="files"
+            is-removable
+            list-label="Attached files"
+            @remove="onRemoveFile"
+          />
+        </template>
+        <template #toolbar-left>
+          <UiDropdownMenu>
+            <UiDropdownMenuTrigger as-child>
+              <CkPromptMenuButton aria-label="Open prompt menu" />
+            </UiDropdownMenuTrigger>
+            <UiDropdownMenuContent side="top" align="start" :side-offset="8">
+              <UiDropdownMenuItem @select="fileInputRef?.click()">
+                <UiIcon name="file" :size="16" />
+                Add documents
+              </UiDropdownMenuItem>
+              <UiDropdownMenuItem @select="folderInputRef?.click()">
+                <UiIcon name="folder" :size="16" />
+                Add folders
+              </UiDropdownMenuItem>
+            </UiDropdownMenuContent>
+          </UiDropdownMenu>
+        </template>
+        <template #toolbar-right="{ submit, disabled }">
+          <div class="flex items-center gap-3">
+            <CkModelSelector
+              :models="models"
+              v-model:selected-model-id="selectedModelId"
+            />
+            <CkPromptSendButton
+              aria-label="Send message"
+              :disabled="disabled"
+              @click="submit"
+            >
+              <CkSendIcon />
+            </CkPromptSendButton>
+          </div>
+        </template>
+        <template #footer>
+          <CkPromptInputDisclaimer
+            text="AI can hallucinate confident-sounding but false information. Verify before you act on it."
+          />
+        </template>
+      </CkPromptInput>
+    `,
+  }),
+  parameters: {
+    docs: { source: { code: withUploadAndModelSelectionTemplateSource } },
+  },
+};
+
+const withMultiLineContentTemplateSource = `<script setup lang="ts">
+import { CkPromptInput, CkPromptSendButton, CkSendIcon } from '@aleph-alpha/chat-kit';
+import { ref } from 'vue';
+
+const text = ref(
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.\\n' +
+    'Second line forces the layout to stack: textarea spans the full width,\\n' +
+    'toolbar drops to a dedicated row, form radius shrinks to 2xl.'
+);
+</script>
+
+<template>
+  <CkPromptInput v-model="text" aria-label="Message input">
+    <template #toolbar-right="{ submit, disabled }">
+      <CkPromptSendButton
+        aria-label="Send message"
+        :disabled="disabled"
+        @click="submit"
+      >
+        <CkSendIcon />
+      </CkPromptSendButton>
+    </template>
+  </CkPromptInput>
+</template>`;
+
+/**
+ * Pre-filled with multi-line text so the multi-row layout is visible at
+ * mount: textarea spans the full width on its own row, toolbar drops below,
+ * and the form's corner radius shrinks from `rounded-3xl` to `rounded-2xl`.
+ */
+export const WithMultiLineContent: Story = {
+  render: () => ({
+    components: { CkPromptInput, CkPromptSendButton, CkSendIcon },
+    setup() {
+      const text = ref(
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n' +
+          'Second line forces the layout to stack: textarea spans the full width,\n' +
+          'toolbar drops to a dedicated row, form radius shrinks to 2xl.',
+      );
+      return { text };
+    },
+    template: `
+      <CkPromptInput v-model="text" aria-label="Message input">
+        <template #toolbar-right="{ submit, disabled }">
+          <CkPromptSendButton
+            aria-label="Send message"
+            :disabled="disabled"
+            @click="submit"
+          >
+            <CkSendIcon />
+          </CkPromptSendButton>
+        </template>
+      </CkPromptInput>
+    `,
+  }),
+  parameters: {
+    docs: { source: { code: withMultiLineContentTemplateSource } },
+  },
+};
+
+const withCollapsedFileChipsTemplateSource = `<script setup lang="ts">
+import {
+  CkPromptInput,
+  CkPromptSendButton,
+  CkPromptMenuButton,
+  CkFileItemsList,
+  CkSendIcon,
+  type CkFileEntry,
+} from '@aleph-alpha/chat-kit';
+import {
+  UiDropdownMenu,
+  UiDropdownMenuTrigger,
+  UiDropdownMenuContent,
+  UiDropdownMenuItem,
+  UiIcon,
+} from '@aleph-alpha/ui-library';
+import { ref } from 'vue';
+
+const text = ref('');
+const files = ref<CkFileEntry[]>([
+  { id: '1', filename: 'Invoice.pdf',   typeLabel: 'PDF',  sizeLabel: '12 MB' },
+  { id: '2', filename: 'Data.csv',      typeLabel: 'CSV',  sizeLabel: '10 MB' },
+  { id: '3', filename: 'Report.docx',   typeLabel: 'DOCX', sizeLabel: '4 MB'  },
+  { id: '4', filename: 'Notes.md',      typeLabel: 'MD',   sizeLabel: '76 KB' },
+  { id: '5', filename: 'schema.json',   typeLabel: 'JSON', sizeLabel: '36 KB' },
+]);
+function removeFile(id: CkFileEntry['id']) {
+  files.value = files.value.filter((f) => f.id !== id);
+}
+</script>
+
+<template>
+  <CkPromptInput v-model="text" aria-label="Message input">
+    <template #toolbar-top>
+      <CkFileItemsList
+        :files="files"
+        is-removable
+        list-label="Attached files"
+        @remove="removeFile"
+      />
+    </template>
+    <template #toolbar-left>
+      <UiDropdownMenu>
+        <UiDropdownMenuTrigger as-child>
+          <CkPromptMenuButton aria-label="Open prompt menu" />
+        </UiDropdownMenuTrigger>
+        <UiDropdownMenuContent side="top" align="start" :side-offset="8">
+          <UiDropdownMenuItem>
+            <UiIcon name="file" :size="16" />
+            Add documents
+          </UiDropdownMenuItem>
+          <UiDropdownMenuItem>
+            <UiIcon name="folder" :size="16" />
+            Add folders
+          </UiDropdownMenuItem>
+        </UiDropdownMenuContent>
+      </UiDropdownMenu>
+    </template>
+    <template #toolbar-right="{ submit, disabled }">
+      <CkPromptSendButton
+        aria-label="Send message"
+        :disabled="disabled"
+        @click="submit"
+      >
+        <CkSendIcon />
+      </CkPromptSendButton>
+    </template>
+  </CkPromptInput>
+</template>`;
+
+/**
+ * Five attached files — past the default `maxInline=3` threshold of
+ * `CkFileItemsList`, so the list collapses to a single popover trigger
+ * labeled "5 files". Click it to inspect / remove the individual items.
+ * The toolbar-left `+` menu stays available so users can keep adding more.
+ */
+export const WithCollapsedFileChips: Story = {
+  render: () => ({
+    components: {
+      CkPromptInput,
+      CkPromptSendButton,
+      CkPromptMenuButton,
+      CkFileItemsList,
+      CkSendIcon,
+      UiDropdownMenu,
+      UiDropdownMenuTrigger,
+      UiDropdownMenuContent,
+      UiDropdownMenuItem,
+      UiIcon,
+    },
+    setup() {
+      const text = ref('');
+      const files = ref<CkFileEntry[]>([
+        {
+          id: '1',
+          filename: 'Invoice.pdf',
+          typeLabel: 'PDF',
+          sizeLabel: '12 MB',
+        },
+        { id: '2', filename: 'Data.csv', typeLabel: 'CSV', sizeLabel: '10 MB' },
+        {
+          id: '3',
+          filename: 'Report.docx',
+          typeLabel: 'DOCX',
+          sizeLabel: '4 MB',
+        },
+        { id: '4', filename: 'Notes.md', typeLabel: 'MD', sizeLabel: '76 KB' },
+        {
+          id: '5',
+          filename: 'schema.json',
+          typeLabel: 'JSON',
+          sizeLabel: '36 KB',
+        },
+      ]);
+      function removeFile(id: CkFileEntry['id']) {
+        files.value = files.value.filter((f) => f.id !== id);
+      }
+      return { text, files, removeFile };
+    },
+    template: `
+      <CkPromptInput v-model="text" aria-label="Message input">
+        <template #toolbar-top>
+          <CkFileItemsList
+            :files="files"
+            is-removable
+            list-label="Attached files"
+            @remove="removeFile"
+          />
+        </template>
+        <template #toolbar-left>
+          <UiDropdownMenu>
+            <UiDropdownMenuTrigger as-child>
+              <CkPromptMenuButton aria-label="Open prompt menu" />
+            </UiDropdownMenuTrigger>
+            <UiDropdownMenuContent side="top" align="start" :side-offset="8">
+              <UiDropdownMenuItem>
+                <UiIcon name="file" :size="16" />
+                Add documents
+              </UiDropdownMenuItem>
+              <UiDropdownMenuItem>
+                <UiIcon name="folder" :size="16" />
+                Add folders
+              </UiDropdownMenuItem>
+            </UiDropdownMenuContent>
+          </UiDropdownMenu>
+        </template>
+        <template #toolbar-right="{ submit, disabled }">
+          <CkPromptSendButton
+            aria-label="Send message"
+            :disabled="disabled"
+            @click="submit"
+          >
+            <CkSendIcon />
+          </CkPromptSendButton>
+        </template>
+      </CkPromptInput>
+    `,
+  }),
+  parameters: {
+    docs: { source: { code: withCollapsedFileChipsTemplateSource } },
+  },
+};
+
+const withUploadAndModelSelectionStreamingTemplateSource = `<script setup lang="ts">
+import {
+  CkPromptInput,
+  CkPromptStopButton,
+  CkPromptMenuButton,
+  CkPromptInputDisclaimer,
+  CkModelSelector,
+  CkFileItemsList,
+  CkStopIcon,
+  type CkFileEntry,
+  type CkModelOption,
+} from '@aleph-alpha/chat-kit';
+import {
+  UiDropdownMenu,
+  UiDropdownMenuTrigger,
+  UiDropdownMenuContent,
+  UiDropdownMenuItem,
+  UiIcon,
+} from '@aleph-alpha/ui-library';
+import { ref } from 'vue';
+
+const text = ref('Explain the difference between supervised and unsupervised learning.');
+const files = ref<CkFileEntry[]>([
+  { id: 'a', filename: 'Invoice.pdf', typeLabel: 'PDF', sizeLabel: '12 MB' },
+  { id: 'b', filename: 'Data.csv', typeLabel: 'CSV', sizeLabel: '10 MB' },
+]);
+const selectedModelId = ref<string | null>('phoenix');
+const models: CkModelOption[] = [
+  { id: 'phoenix', label: 'Phoenix' },
+  { id: 'pharia-1-llm-7b', label: 'Pharia 1 LLM 7B' },
+];
+function onStop() { /* abort streaming */ }
+</script>
+
+<template>
+  <CkPromptInput
+    v-model="text"
+    placeholder="Ask me anything"
+    aria-label="Chat message input"
+    disabled
+  >
+    <template #toolbar-top>
+      <CkFileItemsList :files="files" list-label="Attached files" />
+    </template>
+    <template #toolbar-left>
+      <UiDropdownMenu>
+        <UiDropdownMenuTrigger as-child>
+          <CkPromptMenuButton aria-label="Open prompt menu" disabled />
+        </UiDropdownMenuTrigger>
+        <UiDropdownMenuContent side="top" align="start" :side-offset="8">
+          <UiDropdownMenuItem disabled>
+            <UiIcon name="file" :size="16" />
+            Add documents
+          </UiDropdownMenuItem>
+        </UiDropdownMenuContent>
+      </UiDropdownMenu>
+    </template>
+    <template #toolbar-right>
+      <div class="flex items-center gap-3">
+        <CkModelSelector v-model:selected-model-id="selectedModelId" :models="models" />
+        <CkPromptStopButton aria-label="Stop generating" @click="onStop">
+          <CkStopIcon />
+        </CkPromptStopButton>
+      </div>
+    </template>
+    <template #footer>
+      <CkPromptInputDisclaimer
+        text="AI can hallucinate confident-sounding but false information. Verify before you act on it."
+      />
+    </template>
+  </CkPromptInput>
+</template>`;
+
+/**
+ * Streaming state mirroring the Figma "While Streaming" variant: the input
+ * is `disabled`, the file chips and model selector remain visible (for
+ * context), and `CkPromptStopButton` replaces `CkPromptSendButton` on the
+ * right. Click the stop button to abort the in-flight assistant reply.
+ */
+export const WithUploadAndModelSelectionStreaming: Story = {
+  render: () => ({
+    components: {
+      CkPromptInput,
+      CkPromptStopButton,
+      CkPromptMenuButton,
+      CkPromptInputDisclaimer,
+      CkModelSelector,
+      CkFileItemsList,
+      CkStopIcon,
+      UiDropdownMenu,
+      UiDropdownMenuTrigger,
+      UiDropdownMenuContent,
+      UiDropdownMenuItem,
+      UiIcon,
+    },
+    setup() {
+      const text = ref(
+        'Explain the difference between supervised and unsupervised learning.',
+      );
+      const files = ref<CkFileEntry[]>([
+        {
+          id: 'a',
+          filename: 'Invoice.pdf',
+          typeLabel: 'PDF',
+          sizeLabel: '12 MB',
+        },
+        { id: 'b', filename: 'Data.csv', typeLabel: 'CSV', sizeLabel: '10 MB' },
+      ]);
+      const selectedModelId = ref<string | null>('phoenix');
+      const models: CkModelOption[] = [
+        { id: 'phoenix', label: 'Phoenix' },
+        { id: 'pharia-1-llm-7b', label: 'Pharia 1 LLM 7B' },
+      ];
+      function onStop() {
+        // eslint-disable-next-line no-console
+        console.log('stop');
+      }
+      return { text, files, selectedModelId, models, onStop };
+    },
+    template: `
+      <CkPromptInput
+        v-model="text"
+        placeholder="Ask me anything"
+        aria-label="Chat message input"
+        disabled
+      >
+        <template #toolbar-top>
+          <CkFileItemsList :files="files" list-label="Attached files" />
+        </template>
+        <template #toolbar-left>
+          <UiDropdownMenu>
+            <UiDropdownMenuTrigger as-child>
+              <CkPromptMenuButton aria-label="Open prompt menu" disabled />
+            </UiDropdownMenuTrigger>
+            <UiDropdownMenuContent side="top" align="start" :side-offset="8">
+              <UiDropdownMenuItem disabled>
+                <UiIcon name="file" :size="16" />
+                Add documents
+              </UiDropdownMenuItem>
+            </UiDropdownMenuContent>
+          </UiDropdownMenu>
+        </template>
+        <template #toolbar-right>
+          <div class="flex items-center gap-3">
+            <CkModelSelector
+              v-model:selected-model-id="selectedModelId"
+              :models="models"
+            />
+            <CkPromptStopButton aria-label="Stop generating" @click="onStop">
+              <CkStopIcon />
+            </CkPromptStopButton>
+          </div>
+        </template>
+        <template #footer>
+          <CkPromptInputDisclaimer
+            text="AI can hallucinate confident-sounding but false information. Verify before you act on it."
+          />
+        </template>
+      </CkPromptInput>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: { code: withUploadAndModelSelectionStreamingTemplateSource },
+    },
+  },
+};
+
 /**
  * Disabled state — the textarea cannot be edited and Enter does not submit.
  * Use while the server is processing the previous message.
  */
 export const Disabled: Story = {
   render: () => ({
-    components: { CkPromptInput },
+    components: { CkPromptInput, CkPromptSendButton, CkSendIcon },
     setup() {
       const text = ref('');
       return { text };
@@ -217,7 +1232,17 @@ export const Disabled: Story = {
         disabled
         placeholder="Input is disabled"
         aria-label="Disabled input"
-      />
+      >
+        <template #toolbar-right="{ submit, disabled }">
+          <CkPromptSendButton
+            aria-label="Send message"
+            :disabled="disabled"
+            @click="submit"
+          >
+            <CkSendIcon />
+          </CkPromptSendButton>
+        </template>
+      </CkPromptInput>
     `,
   }),
   parameters: { docs: { source: { code: disabledTemplateSource } } },