@aleph-alpha/chat-kit 1.0.0 → 1.2.0

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

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { CkPromptInputProps } from './types';
+import { computed, nextTick, useId, useTemplateRef, watch } from 'vue';
+
+defineOptions({ name: 'CkPromptInput' });
+
+const props = withDefaults(defineProps<CkPromptInputProps>(), {
+  modelValue: '',
+  placeholder: undefined,
+  disabled: false,
+  maxHeight: 200,
+  ariaLabel: undefined,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'submit', value: string): void;
+}>();
+
+const textareaId = useId();
+const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef');
+
+const isEmpty = computed(() => props.modelValue.trim() === '');
+const isSubmitDisabled = computed(() => props.disabled || isEmpty.value);
+
+function adjustHeight(): void {
+  const el = textareaRef.value;
+  if (!el) return;
+  el.style.height = 'auto';
+  el.style.height = `${Math.min(el.scrollHeight, props.maxHeight)}px`;
+}
+
+function onInput(event: Event): void {
+  const value = (event.target as HTMLTextAreaElement).value;
+  emit('update:modelValue', value);
+  adjustHeight();
+}
+
+function submit(): void {
+  if (isSubmitDisabled.value) return;
+  const trimmed = props.modelValue.trim();
+  if (!trimmed) return;
+  emit('submit', trimmed);
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault();
+    submit();
+  }
+}
+
+function focus(): void {
+  textareaRef.value?.focus();
+}
+
+watch(
+  () => props.modelValue,
+  () => {
+    nextTick(adjustHeight);
+  },
+);
+
+defineExpose({ focus, submit });
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <form
+      class="border-core-border-default bg-core-bg-primary [&:has(textarea:focus)]:ring-core-border-focus flex flex-col gap-3 rounded-xl border px-4 pt-3 pb-3 shadow-sm [&:has(textarea:focus)]:ring-2"
+      @submit.prevent="submit"
+    >
+      <label v-if="ariaLabel" :for="textareaId" class="sr-only">{{
+        ariaLabel
+      }}</label>
+      <textarea
+        :id="textareaId"
+        ref="textareaRef"
+        rows="2"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        class="text-core-content-primary placeholder-core-content-placeholder min-h-10 w-full resize-none bg-transparent text-sm leading-5 focus:outline-none"
+        @input="onInput"
+        @keydown="onKeydown"
+      />
+      <div class="flex items-center justify-between">
+        <div v-if="$slots['toolbar-left']">
+          <slot name="toolbar-left" />
+        </div>
+        <div v-else />
+        <div class="ml-auto">
+          <slot
+            name="toolbar-right"
+            :submit="submit"
+            :disabled="isSubmitDisabled"
+            :is-empty="isEmpty"
+          />
+        </div>
+      </div>
+    </form>
+    <slot name="footer" />
+  </div>
+</template>

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

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

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

@@ -0,0 +1,39 @@
+/**
+ * Low-level prompt input: a single auto-growing textarea with left/right toolbar
+ * slots, a footer slot, and keyboard submission (Enter to submit, Shift+Enter
+ * for newline). Use when you need full control over the prompt layout; for a
+ * turnkey chat input use `CkInput` instead.
+ *
+ * @category Form Inputs
+ * @useCases raw chat prompt textarea, custom prompt toolbar, auto-growing textarea, compose box, keyboard submit
+ * @keywords prompt, input, textarea, chat, auto-grow, compose, submit, v-model
+ * @related CkInput, CkPromptActionButton, CkPromptInputDisclaimer
+ */
+export interface CkPromptInputProps {
+  /**
+   * Current value of the textarea. Supports `v-model`.
+   * @default ''
+   */
+  modelValue?: string;
+  /** Placeholder shown when the textarea is empty. */
+  placeholder?: string;
+  /**
+   * Whether the textarea is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Maximum height (in px) before the textarea becomes scrollable.
+   * @default 200
+   */
+  maxHeight?: number;
+  /** Accessible label for the textarea, hidden visually but read by assistive tech. */
+  ariaLabel?: string;
+}
+
+export interface CkPromptInputEmits {
+  /** Emitted on every keystroke. */
+  (e: 'update:modelValue', value: string): void;
+  /** Emitted when the user submits via Enter (without Shift). */
+  (e: 'submit', value: string): void;
+}

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

@@ -0,0 +1,40 @@
+import CkPromptInputDisclaimer from './CkPromptInputDisclaimer.vue';
+import { render, screen } from '@testing-library/vue';
+
+describe('CkPromptInputDisclaimer', () => {
+  it('renders text from the text prop', () => {
+    render(CkPromptInputDisclaimer, {
+      props: { text: 'AI may make mistakes' },
+    });
+
+    expect(screen.getByText('AI may make mistakes')).toBeInTheDocument();
+  });
+
+  it('renders nothing when no text and no slot provided', () => {
+    const { container } = render(CkPromptInputDisclaimer);
+
+    expect(container.querySelector('p')).not.toBeInTheDocument();
+  });
+
+  it('renders slot content and overrides text prop', () => {
+    render(CkPromptInputDisclaimer, {
+      props: { text: 'Prop text' },
+      slots: { default: '<span>Slot content</span>' },
+    });
+
+    expect(screen.getByText('Slot content')).toBeInTheDocument();
+    expect(screen.queryByText('Prop text')).not.toBeInTheDocument();
+  });
+
+  it('applies correct styling classes', () => {
+    render(CkPromptInputDisclaimer, {
+      props: { text: 'Disclaimer' },
+    });
+
+    const el = screen.getByText('Disclaimer');
+    expect(el.tagName).toBe('P');
+    expect(el.className).toContain('text-core-content-tertiary');
+    expect(el.className).toContain('text-center');
+    expect(el.className).toContain('text-xs');
+  });
+});

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

@@ -0,0 +1,103 @@
+import CkPromptInputDisclaimer from './CkPromptInputDisclaimer.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+const meta: Meta<typeof CkPromptInputDisclaimer> = {
+  title: 'Base/CkPromptInputDisclaimer',
+  component: CkPromptInputDisclaimer,
+  tags: ['autodocs'],
+  argTypes: {
+    text: {
+      control: 'text',
+      description:
+        'Disclaimer text to display. When omitted and the default slot is empty, nothing renders.',
+    },
+  },
+  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 { CkPromptInputDisclaimer } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkPromptInputDisclaimer
+    text="Assistant Chat may occasionally make mistakes. Please, make sure to double-check important information."
+  />
+</template>`;
+
+const withSlotTemplateSource = `<script setup lang="ts">
+import { CkPromptInputDisclaimer } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkPromptInputDisclaimer>
+    <span>Custom disclaimer with <strong>rich</strong> content</span>
+  </CkPromptInputDisclaimer>
+</template>`;
+
+const emptyTemplateSource = `<script setup lang="ts">
+import { CkPromptInputDisclaimer } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkPromptInputDisclaimer />
+</template>`;
+
+/**
+ * Standard disclaimer rendered via the `text` prop. Use the default copy
+ * pattern for chat surfaces that rely on an LLM backend.
+ */
+export const Default: Story = {
+  render: () => ({
+    components: { CkPromptInputDisclaimer },
+    template: `
+      <CkPromptInputDisclaimer
+        text="Assistant Chat may occasionally make mistakes. Please, make sure to double-check important information."
+      />
+    `,
+  }),
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * Uses the default slot to embed rich content (links, bold, icons) inside the
+ * disclaimer. Use when plain `text` isn't expressive enough.
+ */
+export const WithSlot: Story = {
+  render: () => ({
+    components: { CkPromptInputDisclaimer },
+    template: `
+      <CkPromptInputDisclaimer>
+        <span>Custom disclaimer with <strong>rich</strong> content</span>
+      </CkPromptInputDisclaimer>
+    `,
+  }),
+  parameters: { docs: { source: { code: withSlotTemplateSource } } },
+};
+
+/**
+ * When no `text` and no slot content are provided the component renders nothing.
+ * Use to safely include the disclaimer conditionally without template branches.
+ */
+export const Empty: Story = {
+  render: () => ({
+    components: { CkPromptInputDisclaimer },
+    template: `
+      <div>
+        <p style="color: gray; font-size: 12px; margin-bottom: 8px;">
+          (Nothing renders below when no text or slot is provided)
+        </p>
+        <CkPromptInputDisclaimer />
+      </div>
+    `,
+  }),
+  parameters: { docs: { source: { code: emptyTemplateSource } } },
+};

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { CkPromptInputDisclaimerProps } from './types';
+
+defineOptions({ name: 'CkPromptInputDisclaimer' });
+
+defineProps<CkPromptInputDisclaimerProps>();
+</script>
+
+<template>
+  <p
+    v-if="$slots.default || text"
+    class="text-core-content-tertiary text-center text-xs leading-3.5"
+  >
+    <slot>{{ text }}</slot>
+  </p>
+</template>

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * Small helper/disclaimer line typically rendered under a chat input ("AI may
+ * produce incorrect answers"). Renders nothing when there is no text and no
+ * default slot content, making it safe to always include.
+ *
+ * @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
+ */
+export interface CkPromptInputDisclaimerProps {
+  /**
+   * Disclaimer text to display. If omitted, content is read from the default
+   * slot; if neither is provided, nothing renders.
+   */
+  text?: string;
+}

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

@@ -0,0 +1,64 @@
+import CkPromptStopButton from './CkPromptStopButton.vue';
+import { render, screen, fireEvent } from '@testing-library/vue';
+
+describe('CkPromptStopButton', () => {
+  it('renders icon slot content', () => {
+    render(CkPromptStopButton, {
+      slots: { default: '<span data-testid="icon"></span>' },
+    });
+
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('uses default accessible name', () => {
+    render(CkPromptStopButton);
+
+    expect(
+      screen.getByRole('button', { name: 'Stop generating' }),
+    ).toBeInTheDocument();
+  });
+
+  it('allows overriding ariaLabel', () => {
+    render(CkPromptStopButton, {
+      props: { ariaLabel: 'Stop' },
+    });
+
+    expect(screen.getByRole('button', { name: 'Stop' })).toBeInTheDocument();
+  });
+
+  it('is type button so it does not submit a parent form', () => {
+    render(CkPromptStopButton);
+
+    expect(
+      screen.getByRole('button', { name: 'Stop generating' }),
+    ).toHaveAttribute('type', 'button');
+  });
+
+  it('emits click when pressed', async () => {
+    const { emitted } = render(CkPromptStopButton);
+
+    await fireEvent.click(
+      screen.getByRole('button', { name: 'Stop generating' }),
+    );
+
+    expect(emitted().click).toBeTruthy();
+  });
+
+  it('respects disabled prop', () => {
+    render(CkPromptStopButton, { props: { disabled: true } });
+
+    expect(
+      screen.getByRole('button', { name: 'Stop generating' }),
+    ).toBeDisabled();
+  });
+
+  it('applies brand styling classes', () => {
+    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');
+  });
+});

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

@@ -0,0 +1,81 @@
+import CkStopIcon from '../icons/CkStopIcon.vue';
+import CkPromptStopButton from './CkPromptStopButton.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+const meta: Meta<typeof CkPromptStopButton> = {
+  title: 'Base/CkPromptStopButton',
+  component: CkPromptStopButton,
+  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.',
+    },
+  },
+  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 { CkPromptStopButton, CkStopIcon } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkPromptStopButton ariaLabel="Stop generating">
+    <CkStopIcon />
+  </CkPromptStopButton>
+</template>`;
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { CkPromptStopButton, CkStopIcon } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkPromptStopButton ariaLabel="Stop generating" disabled>
+    <CkStopIcon />
+  </CkPromptStopButton>
+</template>`;
+
+/**
+ * Default stop button. Swap it in for `CkPromptActionButton` while an
+ * assistant reply is streaming so users can cancel the response.
+ */
+export const Default: Story = {
+  render: () => ({
+    components: { CkPromptStopButton, CkStopIcon },
+    template: `
+      <CkPromptStopButton ariaLabel="Stop generating">
+        <CkStopIcon />
+      </CkPromptStopButton>
+    `,
+  }),
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * Disabled state — clicks are ignored. Use briefly during the request
+ * teardown to indicate the cancel was acknowledged.
+ */
+export const Disabled: Story = {
+  render: () => ({
+    components: { CkPromptStopButton, CkStopIcon },
+    template: `
+      <CkPromptStopButton ariaLabel="Stop generating" disabled>
+        <CkStopIcon />
+      </CkPromptStopButton>
+    `,
+  }),
+  parameters: { docs: { source: { code: disabledTemplateSource } } },
+};

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { UiButton } from '@aleph-alpha/ui-library';
+import type { CkPromptStopButtonProps } from './types';
+
+defineOptions({ name: 'CkPromptStopButton' });
+
+const props = withDefaults(defineProps<CkPromptStopButtonProps>(), {
+  ariaLabel: 'Stop generating',
+  disabled: false,
+});
+
+defineEmits<{
+  (e: 'click', event: MouseEvent): void;
+}>();
+</script>
+
+<template>
+  <UiButton
+    v-bind="{ ariaLabel }"
+    size="icon-sm"
+    :disabled="props.disabled"
+    class="!bg-brand-bg-brand hover:!bg-brand-bg-brand-hover !text-brand-content-default !rounded-md"
+    @click="$emit('click', $event)"
+  >
+    <slot />
+  </UiButton>
+</template>

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * 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
+ * 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
+ */
+export interface CkPromptStopButtonProps {
+  /**
+   * Accessible label for the button. Required because the button only renders
+   * an icon.
+   * @default 'Stop generating'
+   */
+  ariaLabel?: string;
+  /**
+   * Whether the button is disabled and ignores clicks.
+   * @default false
+   */
+  disabled?: boolean;
+}
+
+export interface CkPromptStopButtonEmits {
+  /** Emitted when the user clicks the stop button. */
+  (e: 'click', event: MouseEvent): void;
+}

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

@@ -0,0 +1,20 @@
+import CkUserMessage from './CkUserMessage.vue';
+import { render, screen } from '@testing-library/vue';
+
+describe('CkUserMessage', () => {
+  it('displays the message text from prop', () => {
+    render(CkUserMessage, { props: { message: 'Hello from tests' } });
+
+    expect(screen.getByText('Hello from tests')).toBeInTheDocument();
+  });
+
+  it('displays custom slot content instead of the prop', () => {
+    render(CkUserMessage, {
+      props: { message: 'Fallback text' },
+      slots: { default: 'Custom slot content' },
+    });
+
+    expect(screen.getByText('Custom slot content')).toBeInTheDocument();
+    expect(screen.queryByText('Fallback text')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,112 @@
+import CkUserMessage from './CkUserMessage.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+const meta: Meta<typeof CkUserMessage> = {
+  title: 'Base/CkUserMessage',
+  component: CkUserMessage,
+  tags: ['autodocs'],
+  argTypes: {
+    message: {
+      control: 'text',
+      description:
+        'The message text to display. Can also be provided via the default slot.',
+    },
+  },
+  decorators: [
+    () => ({
+      template:
+        '<div style="display: flex; flex-direction: column; align-items: flex-end; width: 100%;"><story /></div>',
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { CkUserMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkUserMessage message="Hello! This is a user message." />
+</template>`;
+
+const longMessageTemplateSource = `<script setup lang="ts">
+import { CkUserMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkUserMessage
+    message="Find the lessons learned and best practices from the 'Digital Transformation Phase 1' project."
+  />
+</template>`;
+
+const multilineMessageTemplateSource = `<script setup lang="ts">
+import { CkUserMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkUserMessage
+    :message="\`First line of the message.\nSecond line of the message.\nThird line with more detail.\`"
+  />
+</template>`;
+
+const withSlotContentTemplateSource = `<script setup lang="ts">
+import { CkUserMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkUserMessage message="">
+    <strong>Bold slot content</strong> with <em>rich formatting</em>.
+  </CkUserMessage>
+</template>`;
+
+/**
+ * Standard user message bubble populated via the `message` prop. Use as the
+ * default way to render the user turn in a conversation.
+ */
+export const Default: Story = {
+  args: {
+    message: 'Hello! This is a user message.',
+  },
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * Longer text — demonstrates the bubble's max-width and line-wrapping behavior.
+ */
+export const LongMessage: Story = {
+  args: {
+    message:
+      "Find the lessons learned and best practices from the 'Digital Transformation Phase 1' project, specifically focusing on process optimization and digital tool integration.",
+  },
+  parameters: { docs: { source: { code: longMessageTemplateSource } } },
+};
+
+/**
+ * Message containing explicit newlines. Use when the source content already
+ * includes line breaks.
+ */
+export const MultilineMessage: Story = {
+  args: {
+    message:
+      'First line of the message.\nSecond line of the message.\nThird line with more detail.',
+  },
+  parameters: { docs: { source: { code: multilineMessageTemplateSource } } },
+};
+
+/**
+ * Replaces the message body with arbitrary slot content (rich text, links,
+ * attachments). Use when a plain string is not sufficient.
+ */
+export const WithSlotContent: Story = {
+  render: () => ({
+    components: { CkUserMessage },
+    template: `
+      <CkUserMessage message="">
+        <strong>Bold slot content</strong> with <em>rich formatting</em>.
+      </CkUserMessage>
+    `,
+  }),
+  parameters: { docs: { source: { code: withSlotContentTemplateSource } } },
+};