@aleph-alpha/chat-kit 3.3.0 → 5.0.0

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

@@ -1,191 +0,0 @@
-import CkInput from './CkInput.vue';
-import { render, screen, fireEvent } from '@testing-library/vue';
-
-describe('CkInput', () => {
-  describe('defaults', () => {
-    it('renders default placeholder', () => {
-      render(CkInput);
-
-      expect(
-        screen.getByPlaceholderText('Ask me anything'),
-      ).toBeInTheDocument();
-    });
-
-    it('renders default aria label', () => {
-      render(CkInput);
-
-      expect(screen.getByLabelText('Chat message input')).toBeInTheDocument();
-    });
-
-    it('renders default send button', () => {
-      render(CkInput);
-
-      expect(
-        screen.getByRole('button', { name: 'Send message' }),
-      ).toBeInTheDocument();
-    });
-  });
-
-  describe('disclaimer', () => {
-    it('renders disclaimer text when provided', () => {
-      render(CkInput, {
-        props: { disclaimer: 'AI may make mistakes' },
-      });
-
-      expect(screen.getByText('AI may make mistakes')).toBeInTheDocument();
-    });
-
-    it('does not render disclaimer when not provided', () => {
-      const { container } = render(CkInput);
-
-      expect(container.querySelector('p')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('v-model', () => {
-    it('displays the modelValue in the textarea', () => {
-      render(CkInput, { props: { modelValue: 'Hello world' } });
-
-      expect(screen.getByRole('textbox')).toHaveValue('Hello world');
-    });
-
-    it('emits update:modelValue on input', async () => {
-      const { emitted } = render(CkInput);
-
-      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(CkInput, {
-        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 when textarea is empty', async () => {
-      const { emitted } = render(CkInput, {
-        props: { modelValue: '' },
-      });
-
-      await fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' });
-
-      expect(emitted().submit).toBeFalsy();
-    });
-  });
-
-  describe('loading state', () => {
-    it('disables the textarea when loading', () => {
-      render(CkInput, { props: { loading: true } });
-
-      expect(screen.getByRole('textbox')).toBeDisabled();
-    });
-
-    it('does not emit submit when loading', async () => {
-      const { emitted } = render(CkInput, {
-        props: { modelValue: 'Hello', loading: true },
-      });
-
-      await fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' });
-
-      expect(emitted().submit).toBeFalsy();
-    });
-
-    it('shows stop control instead of send when loading', () => {
-      render(CkInput, { props: { modelValue: 'Hello', loading: true } });
-
-      expect(
-        screen.queryByRole('button', { name: 'Send message' }),
-      ).not.toBeInTheDocument();
-      expect(
-        screen.getByRole('button', { name: 'Stop generating' }),
-      ).toBeInTheDocument();
-    });
-
-    it('emits stop when stop control is clicked while loading', async () => {
-      const { emitted } = render(CkInput, {
-        props: { modelValue: 'Hello', loading: true },
-      });
-
-      await fireEvent.click(
-        screen.getByRole('button', { name: 'Stop generating' }),
-      );
-
-      expect(emitted().stop).toBeTruthy();
-    });
-  });
-
-  describe('disabled state', () => {
-    it('disables the textarea when disabled', () => {
-      render(CkInput, { props: { disabled: true } });
-
-      expect(screen.getByRole('textbox')).toBeDisabled();
-    });
-
-    it('disables the send button when textarea is empty', () => {
-      render(CkInput, { props: { modelValue: '' } });
-
-      expect(
-        screen.getByRole('button', { name: 'Send message' }),
-      ).toBeDisabled();
-    });
-
-    it('enables the send button when there is text and not disabled', () => {
-      render(CkInput, { props: { modelValue: 'Hello' } });
-
-      expect(
-        screen.getByRole('button', { name: 'Send message' }),
-      ).toBeEnabled();
-    });
-  });
-
-  describe('slots', () => {
-    it('renders toolbar-left slot content', () => {
-      render(CkInput, {
-        slots: { 'toolbar-left': '<button>Express</button>' },
-      });
-
-      expect(screen.getByText('Express')).toBeInTheDocument();
-    });
-
-    it('renders toolbar-right slot content instead of default send button', () => {
-      render(CkInput, {
-        slots: { 'toolbar-right': '<button>Custom Send</button>' },
-      });
-
-      expect(screen.getByText('Custom Send')).toBeInTheDocument();
-      expect(
-        screen.queryByRole('button', { name: 'Send message' }),
-      ).not.toBeInTheDocument();
-    });
-
-    it('renders footer slot content instead of disclaimer', () => {
-      render(CkInput, {
-        props: { disclaimer: 'Default disclaimer' },
-        slots: { footer: '<span>Custom footer</span>' },
-      });
-
-      expect(screen.getByText('Custom footer')).toBeInTheDocument();
-      expect(screen.queryByText('Default disclaimer')).not.toBeInTheDocument();
-    });
-
-    it('renders send-icon slot content inside default send button', () => {
-      render(CkInput, {
-        slots: { 'send-icon': '<span data-testid="custom-icon">Go</span>' },
-      });
-
-      expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
-      expect(
-        screen.getByRole('button', { name: 'Send message' }),
-      ).toBeInTheDocument();
-    });
-  });
-});

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

@@ -1,434 +0,0 @@
-import CkInput from './CkInput.vue';
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { ref } from 'vue';
-
-const DISCLAIMER =
-  'Assistant Chat may occasionally make mistakes. Please, make sure to double-check important information.';
-
-const meta: Meta<typeof CkInput> = {
-  title: 'Composed/CkInput',
-  component: CkInput,
-  tags: ['autodocs'],
-  argTypes: {
-    modelValue: {
-      control: 'text',
-      description: 'Current value of the input. Use with `v-model`.',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder shown when empty.',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disables the input and send button.',
-    },
-    loading: {
-      control: 'boolean',
-      description:
-        'Shows a spinner in the send button and blocks further input.',
-    },
-    ariaLabel: {
-      control: 'text',
-      description: 'Accessible label for the textarea.',
-    },
-    disclaimer: {
-      control: 'text',
-      description: 'Optional disclaimer text rendered below the input.',
-    },
-  },
-  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 { CkInput } from '@aleph-alpha/chat-kit';
-import { ref } from 'vue';
-
-const text = ref('');
-const disclaimer = 'Assistant Chat may occasionally make mistakes. Please double-check.';
-</script>
-
-<template>
-  <CkInput v-model="text" :disclaimer="disclaimer" />
-</template>`;
-
-const withModeToggleTemplateSource = `<script setup lang="ts">
-import { CkInput } from '@aleph-alpha/chat-kit';
-import { ref } from 'vue';
-
-const text = ref('');
-const mode = ref<'express' | 'smart'>('smart');
-</script>
-
-<template>
-  <CkInput v-model="text">
-    <template #toolbar-left>
-      <div class="flex items-center gap-1">
-        <button @click="mode = 'express'">Express</button>
-        <button @click="mode = 'smart'">Smart</button>
-      </div>
-    </template>
-  </CkInput>
-</template>`;
-
-const fullExampleTemplateSource = `<script setup lang="ts">
-import { CkInput } from '@aleph-alpha/chat-kit';
-import { ref } from 'vue';
-
-const text = ref('');
-const attachmentCount = ref(3);
-const disclaimer = 'Assistant Chat may occasionally make mistakes. Please double-check.';
-function onSubmit() { text.value = ''; }
-</script>
-
-<template>
-  <CkInput v-model="text" :disclaimer="disclaimer" @submit="onSubmit">
-    <template #toolbar-left>
-      <button>Mode</button>
-    </template>
-    <template #toolbar-right="{ submit, disabled }">
-      <button aria-label="Attach file">Attach ({{ attachmentCount }})</button>
-      <button type="submit" :disabled="disabled" @click="submit" aria-label="Send message">Send</button>
-    </template>
-  </CkInput>
-</template>`;
-
-const disabledTemplateSource = `<script setup lang="ts">
-import { CkInput } from '@aleph-alpha/chat-kit';
-import { ref } from 'vue';
-
-const text = ref('');
-</script>
-
-<template>
-  <CkInput v-model="text" disabled placeholder="Input is disabled" />
-</template>`;
-
-const loadingTemplateSource = `<script setup lang="ts">
-import { CkInput } from '@aleph-alpha/chat-kit';
-import { ref } from 'vue';
-
-const text = ref('Generating a response...');
-</script>
-
-<template>
-  <CkInput v-model="text" loading />
-</template>`;
-
-const withLongTextTemplateSource = `<script setup lang="ts">
-import { CkInput } from '@aleph-alpha/chat-kit';
-import { ref } from 'vue';
-
-const text = ref('This is a long multi-line message that demonstrates auto-grow behavior.');
-</script>
-
-<template>
-  <CkInput v-model="text" />
-</template>`;
-
-const mobileWidthTemplateSource = `<script setup lang="ts">
-import { CkInput } from '@aleph-alpha/chat-kit';
-import { ref } from 'vue';
-
-const text = ref('');
-</script>
-
-<template>
-  <div style="max-width: 320px;">
-    <CkInput v-model="text" />
-  </div>
-</template>`;
-
-/**
- * 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 const Default: Story = {
-  render: () => ({
-    components: { CkInput },
-    setup() {
-      const text = ref('');
-      return { text, DISCLAIMER };
-    },
-    template: `
-      <CkInput
-        v-model="text"
-        :disclaimer="DISCLAIMER"
-      />
-    `,
-  }),
-  parameters: { docs: { source: { code: defaultTemplateSource } } },
-};
-
-/**
- * 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 const WithModeToggle: Story = {
-  render: () => ({
-    components: { CkInput },
-    setup() {
-      const text = ref('');
-      const mode = ref<'express' | 'smart'>('smart');
-      return { text, mode };
-    },
-    template: `
-      <CkInput v-model="text">
-        <template #toolbar-left>
-          <div class="flex items-center">
-            <button
-              class="flex items-center justify-center rounded-l-md border border-solid h-9 px-2 text-sm font-medium shadow-sm transition-all duration-300 ease-in-out"
-              :style="mode === 'express'
-                ? 'background-color: #2888b8; border-color: rgba(183,180,164,0.3); color: #daf2f6;'
-                : 'background-color: #ebebe5; border-color: rgba(183,180,164,0.3); color: #1d1d1b;'"
-              @click="mode = 'express'"
-            >
-              <svg class="shrink-0" 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="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
-              <span
-                class="overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out"
-                :style="mode === 'express'
-                  ? 'max-width: 70px; opacity: 1; padding-left: 8px;'
-                  : 'max-width: 0; opacity: 0; padding-left: 0;'"
-              >Express</span>
-            </button>
-            <button
-              class="flex items-center justify-center rounded-r-md border-t border-r border-b border-solid h-9 px-2 text-sm font-medium shadow-sm transition-all duration-300 ease-in-out"
-              :style="mode === 'smart'
-                ? 'background-color: #2888b8; border-color: rgba(183,180,164,0.3); color: #daf2f6;'
-                : 'background-color: #ebebe5; border-color: rgba(183,180,164,0.3); color: #1d1d1b;'"
-              @click="mode = 'smart'"
-            >
-              <svg class="shrink-0" 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="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>
-              <span
-                class="overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out"
-                :style="mode === 'smart'
-                  ? 'max-width: 70px; opacity: 1; padding-left: 8px;'
-                  : 'max-width: 0; opacity: 0; padding-left: 0;'"
-              >Smart</span>
-            </button>
-          </div>
-        </template>
-      </CkInput>
-    `,
-  }),
-  parameters: { docs: { source: { code: withModeToggleTemplateSource } } },
-};
-
-/**
- * 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 const FullExample: Story = {
-  render: () => ({
-    components: { CkInput },
-    setup() {
-      const text = ref('');
-      const mode = ref<'express' | 'smart'>('smart');
-      const attachmentCount = ref(3);
-      const onSubmit = () => {
-        text.value = '';
-      };
-      return { text, mode, attachmentCount, onSubmit, DISCLAIMER };
-    },
-    template: `
-      <CkInput
-        v-model="text"
-        :disclaimer="DISCLAIMER"
-        @submit="onSubmit"
-      >
-        <template #toolbar-left>
-          <div class="flex items-center">
-            <button
-              class="flex items-center justify-center rounded-l-md border border-solid h-9 px-2 text-sm font-medium shadow-sm transition-all duration-300 ease-in-out"
-              :style="mode === 'express'
-                ? 'background-color: #2888b8; border-color: rgba(183,180,164,0.3); color: #daf2f6;'
-                : 'background-color: #ebebe5; border-color: rgba(183,180,164,0.3); color: #1d1d1b;'"
-              @click="mode = 'express'"
-            >
-              <svg class="shrink-0" 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="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
-              <span
-                class="overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out"
-                :style="mode === 'express'
-                  ? 'max-width: 70px; opacity: 1; padding-left: 8px;'
-                  : 'max-width: 0; opacity: 0; padding-left: 0;'"
-              >Express</span>
-            </button>
-            <button
-              class="flex items-center justify-center rounded-r-md border-t border-r border-b border-solid h-9 px-2 text-sm font-medium shadow-sm transition-all duration-300 ease-in-out"
-              :style="mode === 'smart'
-                ? 'background-color: #2888b8; border-color: rgba(183,180,164,0.3); color: #daf2f6;'
-                : 'background-color: #ebebe5; border-color: rgba(183,180,164,0.3); color: #1d1d1b;'"
-              @click="mode = 'smart'"
-            >
-              <svg class="shrink-0" 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="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>
-              <span
-                class="overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out"
-                :style="mode === 'smart'
-                  ? 'max-width: 70px; opacity: 1; padding-left: 8px;'
-                  : 'max-width: 0; opacity: 0; padding-left: 0;'"
-              >Smart</span>
-            </button>
-          </div>
-        </template>
-        <template #toolbar-right="{ submit, disabled }">
-          <div class="flex items-center gap-2">
-            <button
-              type="button"
-              class="flex items-center gap-2 rounded-md border border-solid px-4 py-2 h-9"
-              style="border-color: rgba(183, 180, 164, 0.3);"
-              aria-label="Attach file"
-            >
-              <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="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
-              <span
-                v-if="attachmentCount > 0"
-                class="flex items-center justify-center rounded-full min-w-5 h-4 px-1 text-xs"
-                style="background-color: #c9e400; color: #252422;"
-              >
-                {{ attachmentCount }}
-              </span>
-            </button>
-            <button
-              type="submit"
-              :disabled="disabled"
-              class="flex items-center justify-center size-9 rounded-md disabled:opacity-50"
-              style="background-color: #c9e400; color: #1d1d1b;"
-              aria-label="Send message"
-              @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>
-          </div>
-        </template>
-      </CkInput>
-    `,
-  }),
-  decorators: [
-    () => ({
-      template:
-        '<div style="max-width: 640px; margin: 0 auto; padding: 24px; background: #ebebe5; min-height: 300px; border-radius: 12px;"><story /></div>',
-    }),
-  ],
-  parameters: { docs: { source: { code: fullExampleTemplateSource } } },
-};
-
-/**
- * Disabled state — the textarea is read-only and the send button is inactive.
- * Use while waiting for an upstream action to resolve.
- */
-export const Disabled: Story = {
-  render: () => ({
-    components: { CkInput },
-    setup() {
-      const text = ref('');
-      return { text, DISCLAIMER };
-    },
-    template: `
-      <CkInput
-        v-model="text"
-        disabled
-        placeholder="Input is disabled"
-        :disclaimer="DISCLAIMER"
-      />
-    `,
-  }),
-  parameters: { docs: { source: { code: disabledTemplateSource } } },
-};
-
-/**
- * Loading state — shown while the assistant is generating a reply. The
- * send button displays a spinner and the input is blocked.
- */
-export const Loading: Story = {
-  render: () => ({
-    components: { CkInput },
-    setup() {
-      const text = ref('Generating a response...');
-      const loading = ref(true);
-      function onSubmit() {
-        text.value = 'Generating a response...';
-        loading.value = true;
-      }
-      function onStop() {
-        text.value = 'Response stopped';
-        loading.value = false;
-      }
-      return { text, loading, DISCLAIMER, onSubmit, onStop };
-    },
-    template: `
-      <CkInput
-        v-model="text"
-        :loading="loading"
-        :disclaimer="DISCLAIMER"
-        @submit="onSubmit"
-        @stop="onStop"
-      />
-    `,
-  }),
-  parameters: { docs: { source: { code: loadingTemplateSource } } },
-};
-
-/**
- * Demonstrates the textarea's auto-grow behavior with multi-paragraph content.
- * Use when validating how the input handles long prompts.
- */
-export const WithLongText: Story = {
-  render: () => ({
-    components: { CkInput },
-    setup() {
-      const text = ref(
-        'This is a long message that demonstrates the auto-grow behavior of the textarea. ' +
-          'As the content grows, the textarea expands up to the maximum height. ' +
-          'Once the max height is reached, the content becomes scrollable.\n\n' +
-          'Here is a second paragraph to show how multi-line content works. ' +
-          'The component handles newlines naturally with Shift+Enter.\n\n' +
-          'And a third paragraph for good measure. The auto-grow logic recalculates ' +
-          'the height on every input event and when the modelValue changes externally.',
-      );
-      return { text, DISCLAIMER };
-    },
-    template: `
-      <CkInput
-        v-model="text"
-        :disclaimer="DISCLAIMER"
-      />
-    `,
-  }),
-  parameters: { docs: { source: { code: withLongTextTemplateSource } } },
-};
-
-/**
- * Narrow viewport preview (≈320px). Use to verify the input stays usable on
- * small screens.
- */
-export const MobileWidth: Story = {
-  render: () => ({
-    components: { CkInput },
-    setup() {
-      const text = ref('');
-      return { text, DISCLAIMER };
-    },
-    template: `
-      <div style="max-width: 320px;">
-        <CkInput
-          v-model="text"
-          :disclaimer="DISCLAIMER"
-        />
-      </div>
-    `,
-  }),
-  decorators: [
-    () => ({
-      template: '<div style="padding: 16px;"><story /></div>',
-    }),
-  ],
-  parameters: { docs: { source: { code: mobileWidthTemplateSource } } },
-};