@aleph-alpha/chat-kit 2.3.0 → 3.0.0

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

@@ -0,0 +1,33 @@
+/**
+ * Icon-only send button styled for the chat prompt area (brand color, pill
+ * shape). Sits in `CkPromptInput`'s `toolbar-right` slot as the submit
+ * trigger. Shows a spinner via `loading` while the previous request is in
+ * flight; pair with `CkPromptStopButton` to expose an abort control.
+ *
+ * @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
+ */
+export interface CkPromptSendButtonProps {
+  /**
+   * Accessible label for the button. **Required** because the button only
+   * renders an icon.
+   */
+  ariaLabel: string;
+  /**
+   * Whether the button is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Whether to show a loading spinner instead of the slotted icon.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Native button `type`. Set `'submit'` when placed inside a `<form>`.
+   * @default 'button'
+   */
+  type?: 'button' | 'submit';
+}

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

@@ -52,13 +52,13 @@ describe('CkPromptStopButton', () => {
     ).toBeDisabled();
   });
 
-  it('applies brand styling classes', () => {
+  it('applies secondary pill styling per Figma spec', () => {
     render(CkPromptStopButton);
 
     const button = screen.getByRole('button', { name: 'Stop generating' });
-    expect(button.className).toContain('!bg-brand-bg-brand');
-    expect(button.className).toContain('hover:!bg-brand-bg-brand-hover');
-    expect(button.className).toContain('!text-brand-content-default');
-    expect(button.className).toContain('!rounded-md');
+    // Secondary variant + icon size from UiButton + Figma pill override.
+    expect(button.className).toContain('bg-background-button-secondary-button');
+    expect(button.className).toContain('size-9');
+    expect(button.className).toContain('!rounded-full');
   });
 });

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

@@ -49,7 +49,7 @@ import { CkPromptStopButton, CkStopIcon } from '@aleph-alpha/chat-kit';
 </template>`;
 
 /**
- * Default stop button. Swap it in for `CkPromptActionButton` while an
+ * Default stop button. Swap it in for `CkPromptSendButton` while an
  * assistant reply is streaming so users can cancel the response.
  */
 export const Default: Story = {

package/src/components/base/CkPromptStopButton/CkPromptStopButton.vue

@@ -17,9 +17,10 @@ defineEmits<{
 <template>
   <UiButton
     v-bind="{ ariaLabel }"
-    size="icon-sm"
+    variant="secondary"
+    size="icon"
     :disabled="props.disabled"
-    class="!bg-brand-bg-brand hover:!bg-brand-bg-brand-hover !text-brand-content-default !rounded-md"
+    class="!rounded-full"
     @click="$emit('click', $event)"
   >
     <slot />

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

@@ -1,12 +1,14 @@
 /**
- * Icon-only button used to stop an in-flight assistant generation. Shares the
- * brand styling of `CkPromptActionButton` but is intended to replace it in the
+ * Icon-only button used to stop an in-flight assistant generation. Visually
+ * de-emphasized counterpart to `CkPromptSendButton` — uses UiButton's `secondary`
+ * variant (muted background) per Figma spec, so the user's eye doesn't read it
+ * as a primary call-to-action. Swap it in for `CkPromptSendButton` in the
  * prompt toolbar while a response is streaming.
  *
  * @category Actions
  * @useCases stop assistant generation, cancel streaming reply, abort in-flight request, halt llm response
- * @keywords stop, cancel, abort, prompt, action, button, icon, streaming
- * @related CkPromptActionButton, CkPromptInput, CkInput
+ * @keywords stop, cancel, abort, prompt, button, icon, streaming, secondary
+ * @related CkPromptSendButton, CkPromptMenuButton, CkPromptInput, CkInput, CkStopIcon
  */
 export interface CkPromptStopButtonProps {
   /**

package/src/components/base/icons/CkSendIcon.vue

@@ -1,22 +1,9 @@
 <script setup lang="ts">
+import { UiIcon } from '@aleph-alpha/ui-library';
+
 defineOptions({ name: 'CkSendIcon' });
 </script>
 
 <template>
-  <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>
+  <UiIcon name="arrow-up-right" />
 </template>

package/src/components/base/icons/CkStopIcon.vue

@@ -12,7 +12,7 @@ defineOptions({ name: 'CkStopIcon' });
   >
     <path
       d="M13.3335 3.33301C13.3335 2.96482 13.035 2.66634 12.6668 2.66634H3.3335C2.96531 2.66634 2.66683 2.96482 2.66683 3.33301V12.6663C2.66683 13.0345 2.96531 13.333 3.3335 13.333H12.6668C13.035 13.333 13.3335 13.0345 13.3335 12.6663V3.33301ZM14.6668 12.6663C14.6668 13.7709 13.7714 14.6663 12.6668 14.6663H3.3335C2.22893 14.6663 1.3335 13.7709 1.3335 12.6663V3.33301C1.3335 2.22844 2.22893 1.33301 3.3335 1.33301H12.6668C13.7714 1.33301 14.6668 2.22844 14.6668 3.33301V12.6663Z"
-      fill="#1D1D1B"
+      fill="currentColor"
     />
   </svg>
 </template>

package/src/components/base/index.ts

@@ -45,7 +45,9 @@ export type {
   CkModelSelectorProps,
   CkModelSelectorEmits,
 } from './CkModelSelector';
-export { CkPromptActionButton } from './CkPromptActionButton';
+export { CkPromptSendButton } from './CkPromptSendButton';
+export { CkPromptMenuButton } from './CkPromptMenuButton';
+export type { CkPromptMenuButtonProps } from './CkPromptMenuButton';
 export { CkPromptStopButton } from './CkPromptStopButton';
 export { CkPromptInput } from './CkPromptInput';
 export { CkPromptInputDisclaimer } from './CkPromptInputDisclaimer';

package/src/components/composed/CkInput/CkInput.stories.ts

@@ -27,10 +27,6 @@ const meta: Meta<typeof CkInput> = {
       description:
         'Shows a spinner in the send button and blocks further input.',
     },
-    maxHeight: {
-      control: 'number',
-      description: 'Max textarea height (px) before it becomes scrollable.',
-    },
     ariaLabel: {
       control: 'text',
       description: 'Accessible label for the textarea.',

package/src/components/composed/CkInput/CkInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import CkPromptActionButton from '../../base/CkPromptActionButton/CkPromptActionButton.vue';
+import CkPromptSendButton from '../../base/CkPromptSendButton/CkPromptSendButton.vue';
 import CkPromptStopButton from '../../base/CkPromptStopButton/CkPromptStopButton.vue';
 import CkPromptInput from '../../base/CkPromptInput/CkPromptInput.vue';
 import CkPromptInputDisclaimer from '../../base/CkPromptInputDisclaimer/CkPromptInputDisclaimer.vue';
@@ -15,7 +15,6 @@ const props = withDefaults(defineProps<CkInputProps>(), {
   placeholder: 'Ask me anything',
   disabled: false,
   loading: false,
-  maxHeight: 200,
   ariaLabel: 'Chat message input',
   stopAriaLabel: 'Stop generating',
   disclaimer: undefined,
@@ -61,11 +60,14 @@ defineExpose({ focus, submit });
     :model-value="modelValue"
     :placeholder="placeholder"
     :disabled="isDisabled"
-    :max-height="maxHeight"
     :aria-label="ariaLabel"
     @update:model-value="onUpdateModelValue"
     @submit="onSubmit"
   >
+    <template v-if="$slots['toolbar-top']" #toolbar-top>
+      <slot name="toolbar-top" />
+    </template>
+
     <template v-if="$slots['toolbar-left']" #toolbar-left>
       <slot name="toolbar-left" />
     </template>
@@ -82,7 +84,7 @@ defineExpose({ focus, submit });
             <CkStopIcon />
           </slot>
         </CkPromptStopButton>
-        <CkPromptActionButton
+        <CkPromptSendButton
           v-else
           v-bind="{ ariaLabel: 'Send message' }"
           type="submit"
@@ -91,7 +93,7 @@ defineExpose({ focus, submit });
           <slot name="send-icon">
             <CkSendIcon />
           </slot>
-        </CkPromptActionButton>
+        </CkPromptSendButton>
       </slot>
     </template>
 

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

@@ -1,12 +1,12 @@
 /**
- * Drop-in chat input: combines `CkPromptInput`, a `CkPromptActionButton` send
+ * Drop-in chat input: combines `CkPromptInput`, a `CkPromptSendButton` send
  * button, and a `CkPromptInputDisclaimer`. Supports `v-model`, loading and
  * disabled states, and slots to customize the toolbar and footer.
  *
  * @category Form Inputs
  * @useCases chat compose input, prompt box with send button, llm input with disclaimer, quick-start chat input, turnkey chat input
  * @keywords input, prompt, chat, send, compose, disclaimer, loading, v-model, textarea
- * @related CkPromptInput, CkPromptActionButton, CkPromptInputDisclaimer, CkConversation
+ * @related CkPromptInput, CkPromptSendButton, CkPromptInputDisclaimer, CkConversation
  */
 export interface CkInputProps {
   /**
@@ -30,11 +30,6 @@ export interface CkInputProps {
    * @default false
    */
   loading?: boolean;
-  /**
-   * Max height (in px) of the underlying textarea before it becomes scrollable.
-   * @default 200
-   */
-  maxHeight?: number;
   /**
    * Accessible label for the input.
    * @default 'Chat message input'

package/src/components/index.ts

@@ -12,7 +12,8 @@ export {
   CkMarkdownRenderer,
   CkMessageActionButton,
   CkModelSelector,
-  CkPromptActionButton,
+  CkPromptSendButton,
+  CkPromptMenuButton,
   CkPromptStopButton,
   CkPromptInput,
   CkPromptInputDisclaimer,
@@ -44,6 +45,7 @@ export type {
   CkModelOption,
   CkModelSelectorProps,
   CkModelSelectorEmits,
+  CkPromptMenuButtonProps,
   CkUserMessageProps,
 } from './base';
 

package/src/index.ts

@@ -77,7 +77,8 @@ export {
   CkMarkdownRenderer,
   CkMessageActionButton,
   CkModelSelector,
-  CkPromptActionButton,
+  CkPromptSendButton,
+  CkPromptMenuButton,
   CkPromptStopButton,
   CkPromptInput,
   CkPromptInputDisclaimer,
@@ -112,6 +113,7 @@ export type {
   CkModelOption,
   CkModelSelectorProps,
   CkModelSelectorEmits,
+  CkPromptMenuButtonProps,
   CkUserMessageProps,
 } from './components';
 

package/dist/components/base/CkPromptActionButton/CkPromptActionButton.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CkPromptActionButton.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkPromptActionButton/CkPromptActionButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CA+B3C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAiCnC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC"}

package/dist/components/base/CkPromptActionButton/CkPromptActionButton.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CkPromptActionButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkPromptActionButton/CkPromptActionButton.vue"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAkEzD,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU;;;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/base/CkPromptActionButton/index.d.ts

@@ -1,3 +0,0 @@
-export { default as CkPromptActionButton } from './CkPromptActionButton.vue';
-export type * from './types';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkPromptActionButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,mBAAmB,SAAS,CAAC"}

package/dist/components/base/CkPromptActionButton/types.d.ts

@@ -1,33 +0,0 @@
-/**
- * Icon-only call-to-action button styled for the chat prompt area (brand color).
- * Typically used as the "send" button inside a prompt input toolbar, but works
- * for any primary prompt-level action.
- *
- * @category Actions
- * @useCases send message button, submit prompt, primary chat action, loading send button, disabled send button
- * @keywords prompt, send, action, button, icon, submit, loading, brand
- * @related CkPromptInput, CkInput, CkMessageActionButton
- */
-export interface CkPromptActionButtonProps {
-    /**
-     * Accessible label for the button. **Required** because the button only
-     * renders an icon.
-     */
-    ariaLabel: string;
-    /**
-     * Whether the button is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Whether to show a loading spinner instead of the slotted icon.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Native button `type`. Set `'submit'` when placed inside a `<form>`.
-     * @default 'button'
-     */
-    type?: 'button' | 'submit';
-}
-//# sourceMappingURL=types.d.ts.map

package/dist/components/base/CkPromptActionButton/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/CkPromptActionButton/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC5B"}

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

@@ -1,126 +0,0 @@
-import CkPromptActionButton from './CkPromptActionButton.vue';
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-
-const meta: Meta<typeof CkPromptActionButton> = {
-  title: 'Base/CkPromptActionButton',
-  component: CkPromptActionButton,
-  tags: ['autodocs'],
-  argTypes: {
-    ariaLabel: {
-      control: 'text',
-      description:
-        'Accessible label for the button. Required because the button is icon-only.',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the button is disabled.',
-    },
-    loading: {
-      control: 'boolean',
-      description:
-        'Shows a spinner instead of the slotted icon and blocks clicks.',
-    },
-    type: {
-      control: 'radio',
-      options: ['button', 'submit'],
-      description: 'Native button type. Use `submit` inside a <form>.',
-    },
-  },
-  decorators: [
-    () => ({
-      template:
-        '<div style="max-width: 640px; margin: 0 auto; padding: 24px;"><story /></div>',
-    }),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const defaultTemplateSource = `<script setup lang="ts">
-import { CkPromptActionButton } from '@aleph-alpha/chat-kit';
-import { CkSendIcon } from '@aleph-alpha/chat-kit';
-</script>
-
-<template>
-  <CkPromptActionButton ariaLabel="Send message">
-    <CkSendIcon />
-  </CkPromptActionButton>
-</template>`;
-
-const disabledTemplateSource = `<script setup lang="ts">
-import { CkPromptActionButton, CkSendIcon } from '@aleph-alpha/chat-kit';
-</script>
-
-<template>
-  <CkPromptActionButton ariaLabel="Send message" disabled>
-    <CkSendIcon />
-  </CkPromptActionButton>
-</template>`;
-
-const loadingTemplateSource = `<script setup lang="ts">
-import { CkPromptActionButton, CkSendIcon } from '@aleph-alpha/chat-kit';
-</script>
-
-<template>
-  <CkPromptActionButton ariaLabel="Send message" loading>
-    <CkSendIcon />
-  </CkPromptActionButton>
-</template>`;
-
-/**
- * Default send-style button. Use in a prompt input toolbar to submit a message
- * or trigger a primary chat action.
- */
-export const Default: Story = {
-  render: () => ({
-    components: { CkPromptActionButton },
-    template: `
-      <CkPromptActionButton ariaLabel="Send message">
-        <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>
-      </CkPromptActionButton>
-    `,
-  }),
-  parameters: { docs: { source: { code: defaultTemplateSource } } },
-};
-
-/**
- * Disabled state — use when the input is empty or a submit is otherwise
- * blocked (e.g. rate-limited).
- */
-export const Disabled: Story = {
-  render: () => ({
-    components: { CkPromptActionButton },
-    template: `
-      <CkPromptActionButton ariaLabel="Send message" disabled>
-        <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>
-      </CkPromptActionButton>
-    `,
-  }),
-  parameters: { docs: { source: { code: disabledTemplateSource } } },
-};
-
-/**
- * Loading state — shows a spinner and blocks clicks. Use while the previous
- * message is still streaming or the request is in flight.
- */
-export const Loading: Story = {
-  render: () => ({
-    components: { CkPromptActionButton },
-    template: `
-      <CkPromptActionButton ariaLabel="Send message" loading>
-        <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>
-      </CkPromptActionButton>
-    `,
-  }),
-  parameters: { docs: { source: { code: loadingTemplateSource } } },
-};

package/src/components/base/CkPromptActionButton/index.ts

@@ -1,2 +0,0 @@
-export { default as CkPromptActionButton } from './CkPromptActionButton.vue';
-export type * from './types';

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

@@ -1,32 +0,0 @@
-/**
- * Icon-only call-to-action button styled for the chat prompt area (brand color).
- * Typically used as the "send" button inside a prompt input toolbar, but works
- * for any primary prompt-level action.
- *
- * @category Actions
- * @useCases send message button, submit prompt, primary chat action, loading send button, disabled send button
- * @keywords prompt, send, action, button, icon, submit, loading, brand
- * @related CkPromptInput, CkInput, CkMessageActionButton
- */
-export interface CkPromptActionButtonProps {
-  /**
-   * Accessible label for the button. **Required** because the button only
-   * renders an icon.
-   */
-  ariaLabel: string;
-  /**
-   * Whether the button is disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Whether to show a loading spinner instead of the slotted icon.
-   * @default false
-   */
-  loading?: boolean;
-  /**
-   * Native button `type`. Set `'submit'` when placed inside a `<form>`.
-   * @default 'button'
-   */
-  type?: 'button' | 'submit';
-}