@aleph-alpha/chat-kit 1.0.0 → 1.1.0

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

@@ -0,0 +1,191 @@
+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

@@ -0,0 +1,438 @@
+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.',
+    },
+    maxHeight: {
+      control: 'number',
+      description: 'Max textarea height (px) before it becomes scrollable.',
+    },
+    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 } } },
+};