@aleph-alpha/chat-kit 4.0.0 → 5.0.1

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 } } },
-};

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

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-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';
-import CkSendIcon from '../../base/icons/CkSendIcon.vue';
-import CkStopIcon from '../../base/icons/CkStopIcon.vue';
-import type { CkInputProps } from './types';
-import { computed, useTemplateRef } from 'vue';
-
-defineOptions({ name: 'CkInput' });
-
-const props = withDefaults(defineProps<CkInputProps>(), {
-  modelValue: '',
-  placeholder: 'Ask me anything',
-  disabled: false,
-  loading: false,
-  ariaLabel: 'Chat message input',
-  stopAriaLabel: 'Stop generating',
-  disclaimer: undefined,
-});
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void;
-  (e: 'submit', value: string): void;
-  (e: 'stop'): void;
-}>();
-
-const promptInputRef =
-  useTemplateRef<InstanceType<typeof CkPromptInput>>('promptInputRef');
-
-const isDisabled = computed(() => props.disabled || props.loading);
-
-function onUpdateModelValue(value: string): void {
-  emit('update:modelValue', value);
-}
-
-function onSubmit(value: string): void {
-  emit('submit', value);
-}
-
-function onStop(): void {
-  emit('stop');
-}
-
-function focus(): void {
-  promptInputRef.value?.focus();
-}
-
-function submit(): void {
-  promptInputRef.value?.submit();
-}
-
-defineExpose({ focus, submit });
-</script>
-
-<template>
-  <CkPromptInput
-    ref="promptInputRef"
-    :model-value="modelValue"
-    :placeholder="placeholder"
-    :disabled="isDisabled"
-    :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>
-
-    <template #toolbar-right="scope">
-      <slot name="toolbar-right" v-bind="scope">
-        <CkPromptStopButton
-          v-if="loading"
-          :aria-label="stopAriaLabel"
-          :disabled="disabled"
-          @click="onStop"
-        >
-          <slot name="stop-icon">
-            <CkStopIcon />
-          </slot>
-        </CkPromptStopButton>
-        <CkPromptSendButton
-          v-else
-          v-bind="{ ariaLabel: 'Send message' }"
-          type="submit"
-          :disabled="scope.disabled"
-        >
-          <slot name="send-icon">
-            <CkSendIcon />
-          </slot>
-        </CkPromptSendButton>
-      </slot>
-    </template>
-
-    <template #footer>
-      <slot name="footer">
-        <CkPromptInputDisclaimer v-if="disclaimer" :text="disclaimer" />
-      </slot>
-    </template>
-  </CkPromptInput>
-</template>

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

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

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

@@ -1,55 +0,0 @@
-/**
- * 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, CkPromptSendButton, CkPromptInputDisclaimer, CkConversation
- */
-export interface CkInputProps {
-  /**
-   * Current value of the input. Supports `v-model`.
-   * @default ''
-   */
-  modelValue?: string;
-  /**
-   * Placeholder shown when the input is empty.
-   * @default 'Ask me anything'
-   */
-  placeholder?: string;
-  /**
-   * Whether the input is disabled. Also implied when `loading` is `true`.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * Shows a spinner in the send button and disables the input while a reply
-   * is being generated.
-   * @default false
-   */
-  loading?: boolean;
-  /**
-   * Accessible label for the input.
-   * @default 'Chat message input'
-   */
-  ariaLabel?: string;
-  /**
-   * Accessible label for the stop generating button.
-   * @default 'Stop generating'
-   */
-  stopAriaLabel?: string;
-  /**
-   * Optional disclaimer text rendered below the input via
-   * `CkPromptInputDisclaimer`. Omit to render no disclaimer.
-   */
-  disclaimer?: string;
-}
-
-export interface CkInputEmits {
-  /** Emitted on every keystroke. */
-  (e: 'update:modelValue', value: string): void;
-  /** Emitted when the user submits via Enter or the send button. */
-  (e: 'submit', value: string): void;
-}