@aleph-alpha/chat-kit 4.0.0 → 5.0.0

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

@@ -657,8 +657,8 @@ function onSubmit(value: string): void {
  * 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).
+ * collapse to a popover once they no longer fit the prompt field's width
+ * (`CkFileItemsList` keeps each chip at least `minItemWidth` wide).
  */
 export const WithUploadAndModelSelection: Story = {
   render: () => ({
@@ -955,10 +955,10 @@ function removeFile(id: CkFileEntry['id']) {
 </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.
+ * Five attached files — more than fit inline at the prompt field's width, so
+ * `CkFileItemsList` 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: () => ({

package/src/components/base/CkPromptInput/CkPromptInput.vue

@@ -14,13 +14,8 @@ import {
 
 defineOptions({ name: 'CkPromptInput' });
 
-// Pixel height of one rendered line — must match the textarea's `leading-6`
-// (24 px). Used to derive how many lines the current content occupies.
-const LINE_HEIGHT = 24;
-
 // Cap the textarea at 6 visible lines; content beyond that scrolls inside.
 const MAX_LINES = 6;
-const MAX_HEIGHT = LINE_HEIGHT * MAX_LINES;
 
 const props = withDefaults(defineProps<CkPromptInputProps>(), {
   modelValue: '',
@@ -84,19 +79,25 @@ function adjustHeight(): void {
     return;
   }
 
+  // Line height is fluid (it scales with the container via `clamp()`), so read
+  // the resolved px value from the DOM instead of a hard-coded constant — the
+  // 6-line cap and the 2-line latch threshold both depend on it.
+  const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 24;
+  const maxHeight = lineHeight * MAX_LINES;
+
   // Collapse to natural content height first so the next scrollHeight read
   // reflects what the content needs, not what the inline height is forcing.
   el.style.height = 'auto';
   const measured = el.scrollHeight;
-  el.style.height = `${Math.min(measured, MAX_HEIGHT)}px`;
+  el.style.height = `${Math.min(measured, maxHeight)}px`;
 
   // Latch only on a *real* second line: either explicit newline OR scrollHeight
-  // ≥ 2 × line-height. Using `Math.round` on a borderline 36 px (sub-pixel
-  // emoji/CJK rendering on Chromium/Linux) would falsely latch a single line.
+  // ≥ 2 × line-height. Using `Math.round` on a borderline single line (sub-pixel
+  // emoji/CJK rendering on Chromium/Linux) would falsely latch it.
   const hasExplicitNewline = props.modelValue.includes('\n');
   if (
     !isMultiLine.value &&
-    (hasExplicitNewline || measured >= LINE_HEIGHT * 2)
+    (hasExplicitNewline || measured >= lineHeight * 2)
   ) {
     isMultiLine.value = true;
   }
@@ -124,6 +125,28 @@ function focus(): void {
   textareaRef.value?.focus();
 }
 
+// Highlight (border + ring) should appear for keyboard navigation only, not
+// mouse clicks. `:focus-visible` can't express this on a textarea — browsers
+// always treat text fields as focus-visible since they take keyboard input —
+// so we track the focus origin ourselves: a pointerdown immediately preceding
+// a focus means the mouse caused it, so suppress the highlight.
+const isKeyboardFocused = ref(false);
+let focusedByPointer = false;
+
+function onPointerDown(): void {
+  focusedByPointer = true;
+}
+
+function onFocus(): void {
+  isKeyboardFocused.value = !focusedByPointer;
+  focusedByPointer = false;
+}
+
+function onBlur(): void {
+  isKeyboardFocused.value = false;
+  focusedByPointer = false;
+}
+
 watch(
   () => props.modelValue,
   () => nextTick(adjustHeight),
@@ -134,11 +157,14 @@ defineExpose({ focus, submit });
 </script>
 
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="ck-prompt-root flex flex-col gap-2">
     <form
       :class="[
-        'ck-prompt-form border-border-surface-default bg-background-input-strong [&:has(textarea:focus)]:border-border-surface-focus-ring [&:has(textarea:focus)]:ring-border-surface-focus-ring/40 min-h-17 grid items-center gap-x-0 gap-y-5 border p-4 transition-[border-radius] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] [&:has(textarea:focus)]:ring-2',
+        'border-border-surface-default bg-background-input-strong  min-h-17 grid items-center gap-x-0 gap-y-5 border p-4 transition-[border-radius] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] ',
         hasMultipleRows ? 'rounded-2xl' : 'rounded-3xl',
+        isKeyboardFocused
+          ? 'border-border-surface-focus-ring ring-border-surface-focus-ring/40 ring-2'
+          : 'ck-prompt-form',
       ]"
       :style="{
         gridTemplateColumns: 'auto 1fr auto',
@@ -164,11 +190,14 @@ defineExpose({ focus, submit });
         :disabled="disabled"
         style="grid-area: input"
         :class="[
-          'ck-prompt-textarea text-content-on-surface-primary placeholder-content-on-surface-muted w-full min-w-0 resize-none overflow-y-auto bg-transparent py-0 font-sans text-base font-normal leading-6 max-h-36 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60',
+          'ck-prompt-textarea text-content-on-surface-primary placeholder-content-on-surface-muted w-full min-w-0 resize-none overflow-y-auto bg-transparent py-0 font-sans font-normal focus:outline-none disabled:cursor-not-allowed disabled:opacity-60',
           isMultiLine ? 'pl-3 pr-3' : 'px-0',
         ]"
         @input="onInput"
         @keydown="onKeydown"
+        @pointerdown="onPointerDown"
+        @focus="onFocus"
+        @blur="onBlur"
       />
       <div :class="[!isMultiLine && 'pl-4']" style="grid-area: right">
         <slot
@@ -184,15 +213,37 @@ defineExpose({ focus, submit });
 </template>
 
 <style scoped>
+/* Fluid mobile↔desktop sizing. Sizes interpolate against the component's own
+   container width (`cqw`), gradually transforming between the Figma Mobile
+   variant (≤320px container) and the Desktop variant (≥768px container) rather
+   than snapping at a breakpoint. Range = 768 − 320 = 448; each term is
+   `clamp(mobile, calc(mobile + (100cqw − 320px) × span / 448), desktop)`. */
+.ck-prompt-root {
+  container-type: inline-size;
+}
+
 /* Solea two-layer drop shadow — warm grey + subtle orange tint. Matches the
    `shadow/md/{1,2}` tokens from the design system; the generic `shadow-md`
    utility from preset-wind4 uses a cold black-based shadow instead. */
 .ck-prompt-form {
+  /* 8px (mobile) → 16px (desktop) */
+  padding: clamp(8px, calc(8px + (100cqw - 320px) * 8 / 448), 16px);
+  /* 52px → 68px (= 36px button + 2× padding) */
+  min-height: clamp(52px, calc(52px + (100cqw - 320px) * 16 / 448), 68px);
   box-shadow:
     0 4px 6px -2px rgba(112, 95, 90, 0.1),
     0 6px 14px -2px rgba(248, 94, 43, 0.05);
 }
 
+/* 14px → 16px font, 20px → 24px line-height, 120px → 144px (6 lines) cap.
+   `adjustHeight` reads the resolved line-height from the DOM so the auto-grow
+   math tracks these fluid values. */
+.ck-prompt-textarea {
+  font-size: clamp(14px, calc(14px + (100cqw - 320px) * 2 / 448), 16px);
+  line-height: clamp(20px, calc(20px + (100cqw - 320px) * 4 / 448), 24px);
+  max-height: clamp(120px, calc(120px + (100cqw - 320px) * 24 / 448), 144px);
+}
+
 /* Slim styled scrollbar for the multi-line textarea — matches Figma's 4 px
    muted-default track. Firefox uses the native `scrollbar-*` properties;
    Chromium/WebKit needs the `::-webkit-scrollbar` pseudo-elements. */

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

@@ -4,14 +4,14 @@
  * slots and keyboard submission (Enter to submit, Shift+Enter for newline).
  * The form layout adapts between a compact single-row variant (large 3xl
  * radius) and a stacked multi-row variant (2xl radius) automatically — driven
- * by content height and whether `toolbar-top` is filled. Use when you need
- * full control over the prompt layout; for a turnkey chat input use `CkInput`
- * instead.
+ * by content height and whether `toolbar-top` is filled. Compose it with
+ * `CkPromptSendButton`, `CkPromptStopButton`, and `CkPromptInputDisclaimer`
+ * to build a complete chat input.
  *
  * @category Form Inputs
  * @useCases raw chat prompt textarea, custom prompt toolbar, auto-growing compose box, file-attachment chip row, multi-line chat input, keyboard submit
  * @keywords prompt, input, textarea, chat, compose, submit, v-model, auto-grow, multi-line, toolbar
- * @related CkInput, CkPromptSendButton, CkPromptStopButton, CkPromptMenuButton, CkPromptInputDisclaimer, CkFileItemsList
+ * @related CkPromptSendButton, CkPromptStopButton, CkPromptMenuButton, CkPromptInputDisclaimer, CkFileItemsList
  */
 export interface CkPromptInputProps {
   /**

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

@@ -33,7 +33,7 @@ describe('CkPromptInputDisclaimer', () => {
 
     const el = screen.getByText('Disclaimer');
     expect(el.tagName).toBe('P');
-    expect(el.className).toContain('text-core-content-tertiary');
+    expect(el.className).toContain('text-content-on-surface-muted');
     expect(el.className).toContain('text-center');
     expect(el.className).toContain('text-xs');
   });

package/src/components/base/CkPromptInputDisclaimer/CkPromptInputDisclaimer.vue

@@ -9,7 +9,7 @@ defineProps<CkPromptInputDisclaimerProps>();
 <template>
   <p
     v-if="$slots.default || text"
-    class="text-core-content-tertiary text-center text-xs leading-3.5"
+    class="text-center text-content-on-surface-muted text-xs font-normal leading-4"
   >
     <slot>{{ text }}</slot>
   </p>

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

@@ -6,7 +6,7 @@
  * @category Feedback
  * @useCases chat disclaimer, ai may make mistakes, prompt footnote, small help text under input
  * @keywords disclaimer, notice, footer, help text, ai, prompt
- * @related CkInput, CkPromptInput
+ * @related CkPromptInput, CkPromptSendButton
  */
 export interface CkPromptInputDisclaimerProps {
   /**

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

@@ -7,7 +7,7 @@
  * @category Actions
  * @useCases send message button, submit prompt, primary chat send action, loading send button, disabled send button
  * @keywords prompt, send, submit, button, icon, loading, brand
- * @related CkPromptInput, CkPromptStopButton, CkInput, CkSendIcon
+ * @related CkPromptInput, CkPromptStopButton, CkSendIcon
  */
 export interface CkPromptSendButtonProps {
   /**

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

@@ -8,7 +8,7 @@
  * @category Actions
  * @useCases stop assistant generation, cancel streaming reply, abort in-flight request, halt llm response
  * @keywords stop, cancel, abort, prompt, button, icon, streaming, secondary
- * @related CkPromptSendButton, CkPromptMenuButton, CkPromptInput, CkInput, CkStopIcon
+ * @related CkPromptSendButton, CkPromptMenuButton, CkPromptInput, CkStopIcon
  */
 export interface CkPromptStopButtonProps {
   /**

package/src/components/base/index.ts

@@ -1,5 +1,12 @@
 export { CkSendIcon, CkStopIcon } from './icons';
 export { CkAgentMessage } from './CkAgentMessage';
+export { CkAgentMessageHeader } from './CkAgentMessageHeader';
+export type { CkAgentMessageHeaderProps } from './CkAgentMessageHeader';
+export { CkHeaderActivityButton } from './CkHeaderActivityButton';
+export type {
+  CkHeaderActivityButtonProps,
+  CkHeaderActivityButtonEmits,
+} from './CkHeaderActivityButton';
 export { CkCitation } from './CkCitation';
 export type {
   CkCitationProps,

package/src/components/composed/CkConversation/CkConversation.spec.ts

@@ -137,7 +137,7 @@ describe('CkConversation', () => {
       });
 
       expect(
-        screen.queryByTestId('ck-agent-message-icon'),
+        screen.queryByTestId('ck-agent-message-header-icon'),
       ).not.toBeInTheDocument();
     });
 
@@ -146,7 +146,9 @@ describe('CkConversation', () => {
         props: { messages: [agentMessage()], agentAvatarFallback: 'AI' },
       });
 
-      expect(screen.getByTestId('ck-agent-message-icon')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('ck-agent-message-header-icon'),
+      ).toBeInTheDocument();
     });
 
     it('shows the icon area when agentAvatarImage URL is provided', () => {
@@ -157,7 +159,9 @@ describe('CkConversation', () => {
         },
       });
 
-      expect(screen.getByTestId('ck-agent-message-icon')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('ck-agent-message-header-icon'),
+      ).toBeInTheDocument();
     });
 
     it('shows the icon area when agent-message-icon slot is provided', () => {
@@ -169,7 +173,9 @@ describe('CkConversation', () => {
       });
 
       expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
-      expect(screen.getByTestId('ck-agent-message-icon')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('ck-agent-message-header-icon'),
+      ).toBeInTheDocument();
     });
   });
 
@@ -360,15 +366,44 @@ describe('CkConversation', () => {
       expect(screen.getByAltText('custom-bot')).toBeInTheDocument();
     });
 
-    it('allows adding a header via agent-message-header slot', () => {
+    it('allows replacing the entire header via agent-message-header slot', () => {
+      render(CkConversation, {
+        // An avatar fallback would normally render the default header icon...
+        props: { messages: [agentMessage()], agentAvatarFallback: 'AI' },
+        slots: {
+          'agent-message-header':
+            '<div data-testid="custom-header">Custom Header</div>',
+        },
+      });
+
+      expect(screen.getByTestId('custom-header')).toBeInTheDocument();
+      // ...but the whole default header (and its icon) is replaced.
+      expect(
+        screen.queryByTestId('ck-agent-message-header-icon'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('allows setting the header text via agent-message-header-content slot', () => {
       render(CkConversation, {
         props: { messages: [agentMessage()] },
-        slots: { 'agent-message-header': 'Custom Header' },
+        slots: { 'agent-message-header-content': 'Custom Header' },
       });
 
       expect(screen.getByText('Custom Header')).toBeInTheDocument();
     });
 
+    it('allows adding a header activity control via agent-message-header-activity slot', () => {
+      render(CkConversation, {
+        props: { messages: [agentMessage()] },
+        slots: {
+          'agent-message-header-activity':
+            '<button data-testid="activity">1 tool</button>',
+        },
+      });
+
+      expect(screen.getByTestId('activity')).toBeInTheDocument();
+    });
+
     it('allows adding footer actions via agent-message-footer slot', () => {
       render(CkConversation, {
         props: { messages: [agentMessage()] },
@@ -429,6 +464,46 @@ describe('CkConversation', () => {
     });
   });
 
+  describe('bottom separator', () => {
+    function agentRowBorders(container: Element): boolean[] {
+      const rows = container.querySelectorAll<HTMLElement>(
+        '[data-message-row="assistant"]',
+      );
+      return Array.from(rows).map((row) => {
+        const message = row.querySelector<HTMLElement>('[class*="pb-6"]');
+        return Boolean(message?.className.includes('border-b'));
+      });
+    }
+
+    it('keeps the separator on every assistant message except the last', () => {
+      const { container } = render(CkConversation, {
+        props: {
+          messages: [
+            { ...agentMessage(), id: 'a1' },
+            {
+              id: 'u1',
+              role: 'user',
+              content: [text('Hi')],
+              createdAt: now,
+              status: 'completed',
+            },
+            { ...agentMessage(), id: 'a2' },
+          ],
+        },
+      });
+
+      expect(agentRowBorders(container)).toEqual([true, false]);
+    });
+
+    it('hides the separator on the only assistant message', () => {
+      const { container } = render(CkConversation, {
+        props: { messages: [{ ...agentMessage(), id: 'solo' }] },
+      });
+
+      expect(agentRowBorders(container)).toEqual([false]);
+    });
+  });
+
   describe('empty conversation', () => {
     it('renders nothing when messages array is empty', () => {
       const { container } = render(CkConversation, { props: { messages: [] } });

package/src/components/composed/CkConversation/CkConversation.vue

@@ -2,6 +2,7 @@
 import { useChatKitLabels } from '../../../handlers/useChatKitLabels';
 import type { BaseMessage, MessageTextContent } from '../../../types';
 import CkAgentMessage from '../../base/CkAgentMessage/CkAgentMessage.vue';
+import CkAgentMessageHeader from '../../base/CkAgentMessageHeader/CkAgentMessageHeader.vue';
 import CkConversationLayout from '../../base/CkConversationLayout/CkConversationLayout.vue';
 import CkCopyMessageButton from '../../base/CkCopyMessageButton/CkCopyMessageButton.vue';
 import CkMarkdownRenderer from '../../base/CkMarkdownRenderer/CkMarkdownRenderer.vue';
@@ -34,8 +35,16 @@ const slots = defineSlots<{
   'agent-message-icon': (props: { message: BaseMessage }) => void;
   /** Replace the agent loading icon shown while a message is being generated */
   'agent-message-loading-icon': (props: { message: BaseMessage }) => void;
-  /** Replace the agent message header */
+  /** Replace the entire agent message header (the whole `CkAgentMessageHeader`) */
   'agent-message-header': (props: { message: BaseMessage }) => void;
+  /** Replace the agent message header text (rendered inside the header row) */
+  'agent-message-header-content': (props: { message: BaseMessage }) => void;
+  /**
+   * Provide an activity control for the agent message header (rendered on the
+   * right of the header, typically a `CkHeaderActivityButton`). When provided,
+   * the header gains vertical padding and a bottom border.
+   */
+  'agent-message-header-activity': (props: { message: BaseMessage }) => void;
   /**
    * Replace the agent message body. Receives the full `BaseMessage` so the
    * consumer can inspect every content part (text, tool calls, reasoning)
@@ -64,6 +73,18 @@ const hasIcon = computed(
 const isLoading = (message: BaseMessage) =>
   message.status === 'started' || message.status === 'sending';
 
+/**
+ * Id of the last assistant message. Its bottom separator is hidden so the
+ * border divides user/assistant pairs without a trailing line after the final
+ * pair.
+ */
+const lastAgentMessageId = computed(() => {
+  for (let i = props.messages.length - 1; i >= 0; i--) {
+    if (props.messages[i].role !== 'user') return props.messages[i].id;
+  }
+  return undefined;
+});
+
 /** Concatenated text from every text content part in a message. */
 function getMessageText(message: BaseMessage): string {
   return message.content
@@ -89,42 +110,64 @@ function getMessageText(message: BaseMessage): string {
 
     <template #agent-message="{ message }">
       <slot name="agent-message" :message="message">
-        <CkAgentMessage>
-          <template v-if="hasIcon" #icon>
-            <template v-if="isLoading(message)">
-              <slot name="agent-message-loading-icon" :message="message">
-                <UiAvatar v-if="agentLoadingImage" class="size-6">
-                  <UiAvatarImage
-                    :src="agentLoadingImage"
-                    :alt="labels.agentLoadingAvatarAlt"
-                  />
-                </UiAvatar>
-                <UiSpinner
-                  v-else
-                  class="size-6"
-                  :aria-label="labels.agentLoadingAvatarAlt"
-                />
-              </slot>
-            </template>
+        <CkAgentMessage :bottom-separator="message.id !== lastAgentMessageId">
+          <template
+            v-if="
+              hasIcon ||
+              $slots['agent-message-header'] ||
+              $slots['agent-message-header-content'] ||
+              $slots['agent-message-header-activity']
+            "
+            #header
+          >
+            <slot name="agent-message-header" :message="message">
+              <CkAgentMessageHeader>
+                <template v-if="hasIcon" #icon>
+                  <template v-if="isLoading(message)">
+                    <slot name="agent-message-loading-icon" :message="message">
+                      <UiAvatar v-if="agentLoadingImage" class="size-8">
+                        <UiAvatarImage
+                          :src="agentLoadingImage"
+                          :alt="labels.agentLoadingAvatarAlt"
+                        />
+                      </UiAvatar>
+                      <UiSpinner
+                        v-else
+                        class="size-8"
+                        :aria-label="labels.agentLoadingAvatarAlt"
+                      />
+                    </slot>
+                  </template>
 
-            <template v-else>
-              <slot name="agent-message-icon" :message="message">
-                <UiAvatar class="size-6">
-                  <UiAvatarImage
-                    v-if="agentAvatarImage"
-                    :src="agentAvatarImage"
-                    :alt="labels.agentAvatarAlt"
-                  />
-                  <UiAvatarFallback v-if="agentAvatarFallback">{{
-                    agentAvatarFallback
-                  }}</UiAvatarFallback>
-                </UiAvatar>
-              </slot>
-            </template>
-          </template>
+                  <template v-else>
+                    <slot name="agent-message-icon" :message="message">
+                      <UiAvatar class="size-8">
+                        <UiAvatarImage
+                          v-if="agentAvatarImage"
+                          :src="agentAvatarImage"
+                          :alt="labels.agentAvatarAlt"
+                        />
+                        <UiAvatarFallback v-if="agentAvatarFallback">{{
+                          agentAvatarFallback
+                        }}</UiAvatarFallback>
+                      </UiAvatar>
+                    </slot>
+                  </template>
+                </template>
+
+                <slot name="agent-message-header-content" :message="message" />
 
-          <template v-if="$slots['agent-message-header']" #header>
-            <slot name="agent-message-header" :message="message" />
+                <template
+                  v-if="$slots['agent-message-header-activity']"
+                  #activity
+                >
+                  <slot
+                    name="agent-message-header-activity"
+                    :message="message"
+                  />
+                </template>
+              </CkAgentMessageHeader>
+            </slot>
           </template>
 
           <slot name="agent-message-content" :message="message">

package/src/components/composed/CkConversation/types.ts

@@ -10,7 +10,7 @@ import type { CkMarkdownElementClasses } from '../../base/CkMarkdownRenderer';
  * @category Messages
  * @useCases complete chat conversation ui, streaming chat with markdown, assistant chat view, llm conversation component, drop-in chat surface
  * @keywords conversation, chat, messages, assistant, agent, user, markdown, streaming, avatar
- * @related CkConversationLayout, CkAgentMessage, CkUserMessage, CkMarkdownRenderer, CkCopyMessageButton, CkInput
+ * @related CkConversationLayout, CkAgentMessage, CkUserMessage, CkMarkdownRenderer, CkCopyMessageButton, CkPromptInput
  */
 export interface CkConversationProps {
   /** List of messages to display, in chronological order. */

package/src/components/composed/index.ts

@@ -2,4 +2,3 @@ export { CkConversation } from './CkConversation';
 export type { CkConversationProps } from './CkConversation';
 export { CkHistory } from './CkHistory';
 export type { CkHistoryEmits, CkHistoryProps } from './CkHistory';
-export { CkInput } from './CkInput';

package/src/components/index.ts

@@ -1,6 +1,8 @@
 // Base (presentational) components
 export {
   CkAgentMessage,
+  CkAgentMessageHeader,
+  CkHeaderActivityButton,
   CkCitation,
   CkCitationCard,
   CkConversationLayout,
@@ -25,6 +27,9 @@ export {
   CkUserMessage,
 } from './base';
 export type {
+  CkAgentMessageHeaderProps,
+  CkHeaderActivityButtonProps,
+  CkHeaderActivityButtonEmits,
   CkCitationProps,
   CkCitationEmits,
   CkCitationSource,
@@ -59,7 +64,7 @@ export type {
 } from './base';
 
 // Composed (pattern) components
-export { CkConversation, CkHistory, CkInput } from './composed';
+export { CkConversation, CkHistory } from './composed';
 export type {
   CkConversationProps,
   CkHistoryEmits,

package/src/index.ts

@@ -63,6 +63,8 @@ export type {
 // Components
 export {
   CkAgentMessage,
+  CkAgentMessageHeader,
+  CkHeaderActivityButton,
   CkCitation,
   CkCitationCard,
   CkConversation,
@@ -75,7 +77,6 @@ export {
   CkHistory,
   CkHistoryItem,
   CkHistoryWrapper,
-  CkInput,
   CkMarkdownRenderer,
   CkMessageButton,
   CkModelSelector,
@@ -90,6 +91,9 @@ export {
   CkUserMessage,
 } from './components';
 export type {
+  CkAgentMessageHeaderProps,
+  CkHeaderActivityButtonProps,
+  CkHeaderActivityButtonEmits,
   CkCitationProps,
   CkCitationEmits,
   CkCitationSource,

package/dist/components/composed/CkInput/CkInput.stories.d.ts

@@ -1,43 +0,0 @@
-import CkInput from './CkInput.vue';
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-declare const meta: Meta<typeof CkInput>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-/**
- * Default chat input with disclaimer and the built-in send button.
- * Use as the primary way to let users submit a prompt to the assistant.
- */
-export declare const Default: Story;
-/**
- * Adds a mode toggle (Express/Smart) to the left side of the toolbar via
- * `#toolbar-left`. Use when the user needs to switch between assistant
- * presets or capabilities before submitting.
- */
-export declare const WithModeToggle: Story;
-/**
- * End-to-end example: mode toggle on the left, attachment button + custom
- * send button on the right, and a disclaimer underneath. Use as a reference
- * for a production-ready chat compose UI.
- */
-export declare const FullExample: Story;
-/**
- * Disabled state — the textarea is read-only and the send button is inactive.
- * Use while waiting for an upstream action to resolve.
- */
-export declare const Disabled: Story;
-/**
- * Loading state — shown while the assistant is generating a reply. The
- * send button displays a spinner and the input is blocked.
- */
-export declare const Loading: Story;
-/**
- * Demonstrates the textarea's auto-grow behavior with multi-paragraph content.
- * Use when validating how the input handles long prompts.
- */
-export declare const WithLongText: Story;
-/**
- * Narrow viewport preview (≈320px). Use to verify the input stays usable on
- * small screens.
- */
-export declare const MobileWidth: Story;
-//# sourceMappingURL=CkInput.stories.d.ts.map

package/dist/components/composed/CkInput/CkInput.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CkInput.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/composed/CkInput/CkInput.stories.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,eAAe,CAAC;AACpC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAM3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAqC9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqGnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,KAgD5B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KA2FzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KA2BrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAuB1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAsBzB,CAAC"}