@aleph-alpha/chat-kit 1.0.0 → 1.2.0

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

@@ -0,0 +1,52 @@
+import CkPromptActionButton from './CkPromptActionButton.vue';
+import { render, screen } from '@testing-library/vue';
+
+describe('CkPromptActionButton', () => {
+  it('renders icon slot content', () => {
+    render(CkPromptActionButton, {
+      props: { ariaLabel: 'Send' },
+      slots: { default: '<svg data-testid="icon"></svg>' },
+    });
+
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('passes ariaLabel to the underlying button', () => {
+    render(CkPromptActionButton, {
+      props: { ariaLabel: 'Send message' },
+    });
+
+    expect(
+      screen.getByRole('button', { name: 'Send message' }),
+    ).toBeInTheDocument();
+  });
+
+  it('passes disabled state to the underlying button', () => {
+    render(CkPromptActionButton, {
+      props: { ariaLabel: 'Send', disabled: true },
+    });
+
+    expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled();
+  });
+
+  it('defaults type to button', () => {
+    render(CkPromptActionButton, {
+      props: { ariaLabel: 'Send' },
+    });
+
+    expect(screen.getByRole('button', { name: 'Send' })).toHaveAttribute(
+      'type',
+      'button',
+    );
+  });
+
+  it('applies brand styling classes', () => {
+    render(CkPromptActionButton, {
+      props: { ariaLabel: 'Send' },
+    });
+
+    const button = screen.getByRole('button', { name: 'Send' });
+    expect(button.className).toContain('!bg-brand-bg-brand');
+    expect(button.className).toContain('!rounded-md');
+  });
+});

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

@@ -0,0 +1,126 @@
+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/CkPromptActionButton.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { CkPromptActionButtonProps } from './types';
+import { UiButton } from '@aleph-alpha/ui-library';
+
+defineOptions({ name: 'CkPromptActionButton' });
+
+withDefaults(defineProps<CkPromptActionButtonProps>(), {
+  disabled: false,
+  loading: false,
+  type: 'button',
+});
+</script>
+
+<template>
+  <UiButton
+    v-bind="{ ariaLabel }"
+    size="icon"
+    :type="type"
+    :disabled="disabled"
+    :loading="loading"
+    class="!bg-brand-bg-brand hover:!bg-brand-bg-brand-hover !text-brand-content-default !rounded-md"
+  >
+    <slot />
+  </UiButton>
+</template>

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

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

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

@@ -0,0 +1,32 @@
+/**
+ * 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';
+}

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

@@ -0,0 +1,181 @@
+import CkPromptInput from './CkPromptInput.vue';
+import { render, screen, fireEvent } from '@testing-library/vue';
+
+describe('CkPromptInput', () => {
+  describe('rendering', () => {
+    it('renders with custom placeholder', () => {
+      render(CkPromptInput, { props: { placeholder: 'Type here...' } });
+
+      expect(screen.getByPlaceholderText('Type here...')).toBeInTheDocument();
+    });
+
+    it('renders without placeholder when not provided', () => {
+      const { container } = render(CkPromptInput);
+
+      const textarea = container.querySelector('textarea');
+      expect(textarea).not.toHaveAttribute('placeholder');
+    });
+
+    it('renders a form element', () => {
+      const { container } = render(CkPromptInput);
+
+      expect(container.querySelector('form')).toBeInTheDocument();
+    });
+
+    it('does not render a label when ariaLabel is not provided', () => {
+      const { container } = render(CkPromptInput);
+
+      expect(container.querySelector('label')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('v-model', () => {
+    it('displays the modelValue in the textarea', () => {
+      render(CkPromptInput, { props: { modelValue: 'Hello world' } });
+
+      expect(screen.getByRole('textbox')).toHaveValue('Hello world');
+    });
+
+    it('emits update:modelValue on input', async () => {
+      const { emitted } = render(CkPromptInput);
+
+      await fireEvent.update(screen.getByRole('textbox'), 'New text');
+
+      expect(emitted()['update:modelValue']).toBeTruthy();
+      expect(emitted()['update:modelValue'][0]).toEqual(['New text']);
+    });
+  });
+
+  describe('submit', () => {
+    it('emits submit with trimmed text on Enter key', async () => {
+      const { emitted } = render(CkPromptInput, {
+        props: { modelValue: '  Hello  ' },
+      });
+
+      await fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' });
+
+      expect(emitted().submit).toBeTruthy();
+      expect(emitted().submit[0]).toEqual(['Hello']);
+    });
+
+    it('does not emit submit on Shift+Enter', async () => {
+      const { emitted } = render(CkPromptInput, {
+        props: { modelValue: 'Hello' },
+      });
+
+      await fireEvent.keyDown(screen.getByRole('textbox'), {
+        key: 'Enter',
+        shiftKey: true,
+      });
+
+      expect(emitted().submit).toBeFalsy();
+    });
+
+    it('does not emit submit when textarea is empty', async () => {
+      const { emitted } = render(CkPromptInput, {
+        props: { modelValue: '' },
+      });
+
+      await fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' });
+
+      expect(emitted().submit).toBeFalsy();
+    });
+
+    it('does not emit submit when textarea contains only whitespace', async () => {
+      const { emitted } = render(CkPromptInput, {
+        props: { modelValue: '   ' },
+      });
+
+      await fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' });
+
+      expect(emitted().submit).toBeFalsy();
+    });
+
+    it('does not emit submit when disabled', async () => {
+      const { emitted } = render(CkPromptInput, {
+        props: { modelValue: 'Hello', disabled: true },
+      });
+
+      await fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' });
+
+      expect(emitted().submit).toBeFalsy();
+    });
+
+    it('emits submit on form submission', async () => {
+      const { container, emitted } = render(CkPromptInput, {
+        props: { modelValue: 'Hello' },
+      });
+
+      await fireEvent.submit(container.querySelector('form')!);
+
+      expect(emitted().submit).toBeTruthy();
+      expect(emitted().submit[0]).toEqual(['Hello']);
+    });
+  });
+
+  describe('slots', () => {
+    it('renders toolbar-left slot content when provided', () => {
+      render(CkPromptInput, {
+        slots: { 'toolbar-left': '<button>Express</button>' },
+      });
+
+      expect(screen.getByText('Express')).toBeInTheDocument();
+    });
+
+    it('does not render toolbar-left container when slot is not provided', () => {
+      const { container } = render(CkPromptInput);
+
+      const toolbarDivs = container.querySelectorAll(
+        'form > div:last-child > div',
+      );
+      expect(toolbarDivs[0]?.children.length).toBe(0);
+    });
+
+    it('renders toolbar-right slot content', () => {
+      render(CkPromptInput, {
+        slots: { 'toolbar-right': '<button>Custom Send</button>' },
+      });
+
+      expect(screen.getByText('Custom Send')).toBeInTheDocument();
+    });
+
+    it('renders nothing in toolbar-right by default', () => {
+      const { container } = render(CkPromptInput);
+
+      const toolbarRight = container.querySelector(
+        'form > div:last-child > div.ml-auto',
+      );
+      expect(toolbarRight?.children.length).toBe(0);
+    });
+
+    it('renders footer slot content', () => {
+      render(CkPromptInput, {
+        slots: { footer: '<span>Custom footer</span>' },
+      });
+
+      expect(screen.getByText('Custom footer')).toBeInTheDocument();
+    });
+
+    it('renders nothing in footer by default', () => {
+      const { container } = render(CkPromptInput);
+
+      expect(container.querySelector('p')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('has a visually hidden label linked to the textarea', () => {
+      render(CkPromptInput, { props: { ariaLabel: 'Message input' } });
+
+      expect(screen.getByLabelText('Message input')).toBeInTheDocument();
+    });
+  });
+
+  describe('disabled state', () => {
+    it('disables the textarea when disabled prop is true', () => {
+      render(CkPromptInput, { props: { disabled: true } });
+
+      expect(screen.getByRole('textbox')).toBeDisabled();
+    });
+  });
+});

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

@@ -0,0 +1,224 @@
+import CkPromptInput from './CkPromptInput.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+
+const meta: Meta<typeof CkPromptInput> = {
+  title: 'Base/CkPromptInput',
+  component: CkPromptInput,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'Current value of the textarea. Use with `v-model`.',
+    },
+    placeholder: {
+      control: 'text',
+      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.',
+    },
+  },
+  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 { CkPromptInput } from '@aleph-alpha/chat-kit';
+import { ref } from 'vue';
+
+const text = ref('');
+</script>
+
+<template>
+  <CkPromptInput
+    v-model="text"
+    placeholder="Type a message..."
+    aria-label="Message input"
+  />
+</template>`;
+
+const withToolbarSlotsTemplateSource = `<script setup lang="ts">
+import { CkPromptInput } from '@aleph-alpha/chat-kit';
+import { ref } from 'vue';
+
+const text = ref('');
+</script>
+
+<template>
+  <CkPromptInput
+    v-model="text"
+    placeholder="Type a message..."
+    aria-label="Message input"
+  >
+    <template #toolbar-left>
+      <button class="h-9 rounded-md border px-3 text-sm">Options</button>
+    </template>
+    <template #toolbar-right="{ submit, disabled }">
+      <button :disabled="disabled" class="size-9 rounded-md bg-brand-bg-brand" @click="submit">
+        Send
+      </button>
+    </template>
+  </CkPromptInput>
+</template>`;
+
+const withFooterSlotTemplateSource = `<script setup lang="ts">
+import { CkPromptInput } from '@aleph-alpha/chat-kit';
+import { ref } from 'vue';
+
+const text = ref('');
+</script>
+
+<template>
+  <CkPromptInput v-model="text" placeholder="Type a message..." aria-label="Message input">
+    <template #footer>
+      <p class="text-center text-xs text-core-content-tertiary">
+        Custom footer content via slot
+      </p>
+    </template>
+  </CkPromptInput>
+</template>`;
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { CkPromptInput } from '@aleph-alpha/chat-kit';
+import { ref } from 'vue';
+
+const text = ref('');
+</script>
+
+<template>
+  <CkPromptInput
+    v-model="text"
+    disabled
+    placeholder="Input is disabled"
+    aria-label="Disabled input"
+  />
+</template>`;
+
+/**
+ * Minimal auto-growing prompt textarea with `v-model` and Enter-to-submit.
+ * Use as the building block when composing a custom prompt input layout.
+ */
+export const Default: Story = {
+  render: () => ({
+    components: { CkPromptInput },
+    setup() {
+      const text = ref('');
+      return { text };
+    },
+    template: `
+      <CkPromptInput
+        v-model="text"
+        placeholder="Type a message..."
+        aria-label="Message input"
+      />
+    `,
+  }),
+  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.
+ */
+export const WithToolbarSlots: Story = {
+  render: () => ({
+    components: { CkPromptInput },
+    setup() {
+      const text = ref('');
+      return { text };
+    },
+    template: `
+      <CkPromptInput
+        v-model="text"
+        placeholder="Type a message..."
+        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>
+        </template>
+        <template #toolbar-right="{ submit, disabled }">
+          <button
+            :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>
+        </template>
+      </CkPromptInput>
+    `,
+  }),
+  parameters: { docs: { source: { code: withToolbarSlotsTemplateSource } } },
+};
+
+/**
+ * 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`.
+ */
+export const WithFooterSlot: Story = {
+  render: () => ({
+    components: { CkPromptInput },
+    setup() {
+      const text = ref('');
+      return { text };
+    },
+    template: `
+      <CkPromptInput
+        v-model="text"
+        placeholder="Type a message..."
+        aria-label="Message input"
+      >
+        <template #footer>
+          <p class="text-core-content-tertiary text-center text-xs leading-3.5">
+            Custom footer content via slot
+          </p>
+        </template>
+      </CkPromptInput>
+    `,
+  }),
+  parameters: { docs: { source: { code: withFooterSlotTemplateSource } } },
+};
+
+/**
+ * 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 },
+    setup() {
+      const text = ref('');
+      return { text };
+    },
+    template: `
+      <CkPromptInput
+        v-model="text"
+        disabled
+        placeholder="Input is disabled"
+        aria-label="Disabled input"
+      />
+    `,
+  }),
+  parameters: { docs: { source: { code: disabledTemplateSource } } },
+};