@aleph-alpha/chat-kit 3.2.0 → 4.0.0

package/src/components/base/{CkMessageActionButton/CkMessageActionButton.vue → CkMessageButton/CkMessageButton.vue}

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { CkMessageActionButtonProps } from './types';
+import type { CkMessageButtonProps } from './types';
 import { UiButton } from '@aleph-alpha/ui-library';
 
 defineOptions({
-  name: 'CkMessageActionButton',
+  name: 'CkMessageButton',
 });
 
-withDefaults(defineProps<CkMessageActionButtonProps>(), {
+withDefaults(defineProps<CkMessageButtonProps>(), {
   disabled: false,
 });
 </script>

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

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

package/src/components/base/{CkMessageActionButton → CkMessageButton}/types.ts

@@ -5,9 +5,9 @@
  * @category Actions
  * @useCases message footer action, like/dislike reaction, share button on reply, secondary message action
  * @keywords icon button, action, message, ghost, accessible, aria-label
- * @related CkCopyMessageActionButton, CkAgentMessage, CkConversation
+ * @related CkCopyMessageButton, CkAgentMessage, CkConversation
  */
-export interface CkMessageActionButtonProps {
+export interface CkMessageButtonProps {
   /**
    * Accessible label for the button. **Required** because the button only
    * renders an icon.

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

@@ -0,0 +1,49 @@
+import CkRegenerateMessageButton from './CkRegenerateMessageButton.vue';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/vue';
+import { describe, expect, it } from 'vitest';
+
+describe('CkRegenerateMessageButton', () => {
+  it('renders an accessible button with the default label', () => {
+    render(CkRegenerateMessageButton);
+
+    expect(
+      screen.getByRole('button', { name: 'Regenerate response' }),
+    ).toBeInTheDocument();
+  });
+
+  it('uses a custom aria-label when provided', () => {
+    render(CkRegenerateMessageButton, {
+      props: { ariaLabel: 'Try again' },
+    });
+
+    expect(
+      screen.getByRole('button', { name: 'Try again' }),
+    ).toBeInTheDocument();
+  });
+
+  it('emits regenerate when clicked', async () => {
+    const user = userEvent.setup();
+    const { emitted } = render(CkRegenerateMessageButton);
+
+    await user.click(
+      screen.getByRole('button', { name: 'Regenerate response' }),
+    );
+
+    expect(emitted('regenerate')).toEqual([[]]);
+  });
+
+  it('does not emit regenerate when disabled', async () => {
+    const user = userEvent.setup();
+    const { emitted } = render(CkRegenerateMessageButton, {
+      props: { disabled: true },
+    });
+
+    const button = screen.getByRole('button', { name: 'Regenerate response' });
+    expect(button).toBeDisabled();
+
+    await user.click(button);
+
+    expect(emitted('regenerate')).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,63 @@
+import CkRegenerateMessageButton from './CkRegenerateMessageButton.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+const meta: Meta<typeof CkRegenerateMessageButton> = {
+  title: 'Base/CkRegenerateMessageButton',
+  component: CkRegenerateMessageButton,
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled and ignores clicks.',
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Accessible label and tooltip content for the button.',
+    },
+  },
+  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 { CkRegenerateMessageButton } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkRegenerateMessageButton @regenerate="() => {}" />
+</template>`;
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { CkRegenerateMessageButton } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkRegenerateMessageButton disabled />
+</template>`;
+
+/**
+ * Default regenerate action. Clicking emits a `regenerate` event so the host
+ * can request a new response for the message.
+ */
+export const Default: Story = {
+  args: {},
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * Disabled state — clicks are ignored and the button appears inactive.
+ * Use while a message is still streaming or in an error state.
+ */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  parameters: { docs: { source: { code: disabledTemplateSource } } },
+};

package/src/components/base/CkRegenerateMessageButton/CkRegenerateMessageButton.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { CkMessageButton } from '../CkMessageButton';
+import type { CkRegenerateMessageButtonProps } from './types';
+import { UiIcon, UiTooltip } from '@aleph-alpha/ui-library';
+
+defineOptions({
+  name: 'CkRegenerateMessageButton',
+});
+
+const props = withDefaults(defineProps<CkRegenerateMessageButtonProps>(), {
+  disabled: false,
+  ariaLabel: 'Regenerate response',
+});
+
+const emit = defineEmits<{
+  regenerate: [];
+}>();
+
+function handleClick() {
+  if (props.disabled) {
+    return;
+  }
+
+  emit('regenerate');
+}
+</script>
+
+<template>
+  <UiTooltip
+    :content="ariaLabel"
+    side="bottom"
+    align="center"
+    :delay-duration="0"
+  >
+    <CkMessageButton
+      v-bind="{ ariaLabel }"
+      :disabled="disabled"
+      @click="handleClick"
+    >
+      <UiIcon name="repeat" :size="16" aria-hidden="true" />
+    </CkMessageButton>
+  </UiTooltip>
+</template>

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

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

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

@@ -0,0 +1,27 @@
+/**
+ * Regenerate action button for chat messages. Lets the user request a new
+ * response for an assistant message. Renders an icon-only button with an
+ * accessible label and tooltip.
+ *
+ * @category Actions
+ * @useCases regenerate assistant reply, retry message, request new response, chat message action
+ * @keywords regenerate, retry, repeat, action, message, button, icon
+ * @related CkMessageButton, CkCopyMessageButton, CkAgentMessage, CkConversation
+ */
+export interface CkRegenerateMessageButtonProps {
+  /**
+   * Whether the button is disabled and ignores clicks.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Accessible label and tooltip content for the button.
+   * @default 'Regenerate response'
+   */
+  ariaLabel?: string;
+}
+
+export interface CkRegenerateMessageButtonEmits {
+  /** Emitted when the button is pressed and not disabled. */
+  (e: 'regenerate'): void;
+}

package/src/components/base/index.ts

@@ -1,8 +1,19 @@
 export { CkSendIcon, CkStopIcon } from './icons';
 export { CkAgentMessage } from './CkAgentMessage';
+export { CkCitation } from './CkCitation';
+export type {
+  CkCitationProps,
+  CkCitationEmits,
+  CkCitationSource,
+} from './CkCitation';
+export { CkCitationCard } from './CkCitationCard';
+export type {
+  CkCitationCardProps,
+  CkCitationCardEmits,
+} from './CkCitationCard';
 export { CkConversationLayout } from './CkConversationLayout';
 export type { CkConversationLayoutProps } from './CkConversationLayout';
-export { CkCopyMessageActionButton } from './CkCopyMessageActionButton';
+export { CkCopyMessageButton } from './CkCopyMessageButton';
 export { CkDropZoneOverlay } from './CkDropZoneOverlay';
 export type {
   CkDropZoneOverlayProps,
@@ -36,9 +47,10 @@ export type { CkHistoryWrapperProps } from './CkHistoryWrapper';
 export { CkMarkdownRenderer } from './CkMarkdownRenderer';
 export type {
   CkMarkdownRendererProps,
+  CkMarkdownRendererEmits,
   CkMarkdownElementClasses,
 } from './CkMarkdownRenderer';
-export { CkMessageActionButton } from './CkMessageActionButton';
+export { CkMessageButton } from './CkMessageButton';
 export { CkModelSelector } from './CkModelSelector';
 export type {
   CkModelOption,
@@ -51,5 +63,6 @@ export type { CkPromptMenuButtonProps } from './CkPromptMenuButton';
 export { CkPromptStopButton } from './CkPromptStopButton';
 export { CkPromptInput } from './CkPromptInput';
 export { CkPromptInputDisclaimer } from './CkPromptInputDisclaimer';
+export { CkRegenerateMessageButton } from './CkRegenerateMessageButton';
 export { CkUserMessage } from './CkUserMessage';
 export type { CkUserMessageProps } from './CkUserMessage';

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

@@ -1,4 +1,4 @@
-import { CkCopyMessageActionButton } from '../../base/CkCopyMessageActionButton';
+import { CkCopyMessageButton } from '../../base/CkCopyMessageButton';
 import { CkFeedbackButton } from '../../base/CkFeedbackButton';
 import type { CkFeedbackValue } from '../../base/CkFeedbackButton';
 import type {
@@ -292,7 +292,7 @@ const withFooterActionsTemplateSource = `<script setup lang="ts">
 import { ref } from 'vue';
 import {
   CkConversation,
-  CkCopyMessageActionButton,
+  CkCopyMessageButton,
   CkFeedbackButton,
 } from '@aleph-alpha/chat-kit';
 import type { BaseMessage, CkFeedbackValue } from '@aleph-alpha/chat-kit';
@@ -315,7 +315,7 @@ function onFeedback(messageId: string, value: CkFeedbackValue) {
 <template>
   <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
     <template #agent-message-footer="{ message }">
-      <CkCopyMessageActionButton :text="getMessageText(message)" />
+      <CkCopyMessageButton :text="getMessageText(message)" />
       <CkFeedbackButton
         :value="feedback[message.id]?.value ?? null"
         :locked="feedback[message.id]?.locked ?? false"
@@ -590,7 +590,7 @@ export const WithCustomIcon: Story = {
 
 /**
  * Overrides `#agent-message-footer` to add real action buttons next to each
- * assistant reply: `CkCopyMessageActionButton` for clipboard copy and
+ * assistant reply: `CkCopyMessageButton` for clipboard copy and
  * `CkFeedbackButton` for binary thumbs up / thumbs down feedback. The
  * feedback state is owned by the host and locked once submitted.
  */
@@ -598,7 +598,7 @@ export const WithFooterActions: Story = {
   render: () => ({
     components: {
       CkConversation,
-      CkCopyMessageActionButton,
+      CkCopyMessageButton,
       CkFeedbackButton,
     },
     setup() {
@@ -618,7 +618,7 @@ export const WithFooterActions: Story = {
     template: `
       <CkConversation :messages="messages" agent-avatar-fallback="AI" style="height: 100%;">
         <template #agent-message-footer="{ message }">
-          <CkCopyMessageActionButton :text="getMessageText(message)" />
+          <CkCopyMessageButton :text="getMessageText(message)" />
           <CkFeedbackButton
             :value="feedback[message.id]?.value ?? null"
             :locked="feedback[message.id]?.locked ?? false"

package/src/components/composed/CkConversation/CkConversation.vue

@@ -3,7 +3,7 @@ import { useChatKitLabels } from '../../../handlers/useChatKitLabels';
 import type { BaseMessage, MessageTextContent } from '../../../types';
 import CkAgentMessage from '../../base/CkAgentMessage/CkAgentMessage.vue';
 import CkConversationLayout from '../../base/CkConversationLayout/CkConversationLayout.vue';
-import CkCopyMessageActionButton from '../../base/CkCopyMessageActionButton/CkCopyMessageActionButton.vue';
+import CkCopyMessageButton from '../../base/CkCopyMessageButton/CkCopyMessageButton.vue';
 import CkMarkdownRenderer from '../../base/CkMarkdownRenderer/CkMarkdownRenderer.vue';
 import CkUserMessage from '../../base/CkUserMessage/CkUserMessage.vue';
 import type { CkConversationProps } from './types';
@@ -143,7 +143,7 @@ function getMessageText(message: BaseMessage): string {
 
           <template #footer>
             <slot name="agent-message-footer" :message="message">
-              <CkCopyMessageActionButton
+              <CkCopyMessageButton
                 v-if="getMessageText(message) && !isLoading(message)"
                 :text="getMessageText(message)"
                 :aria-label-copy="labels.copyMessageAction"

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

@@ -10,7 +10,7 @@ import type { CkMarkdownElementClasses } from '../../base/CkMarkdownRenderer';
  * @category Messages
  * @useCases complete chat conversation ui, streaming chat with markdown, assistant chat view, llm conversation component, drop-in chat surface
  * @keywords conversation, chat, messages, assistant, agent, user, markdown, streaming, avatar
- * @related CkConversationLayout, CkAgentMessage, CkUserMessage, CkMarkdownRenderer, CkCopyMessageActionButton, CkInput
+ * @related CkConversationLayout, CkAgentMessage, CkUserMessage, CkMarkdownRenderer, CkCopyMessageButton, CkInput
  */
 export interface CkConversationProps {
   /** List of messages to display, in chronological order. */

package/src/components/index.ts

@@ -1,8 +1,10 @@
 // Base (presentational) components
 export {
   CkAgentMessage,
+  CkCitation,
+  CkCitationCard,
   CkConversationLayout,
-  CkCopyMessageActionButton,
+  CkCopyMessageButton,
   CkDropZoneOverlay,
   CkFeedbackButton,
   CkFeedbackDialog,
@@ -10,18 +12,24 @@ export {
   CkHistoryItem,
   CkHistoryWrapper,
   CkMarkdownRenderer,
-  CkMessageActionButton,
+  CkMessageButton,
   CkModelSelector,
   CkPromptSendButton,
   CkPromptMenuButton,
   CkPromptStopButton,
   CkPromptInput,
   CkPromptInputDisclaimer,
+  CkRegenerateMessageButton,
   CkSendIcon,
   CkStopIcon,
   CkUserMessage,
 } from './base';
 export type {
+  CkCitationProps,
+  CkCitationEmits,
+  CkCitationSource,
+  CkCitationCardProps,
+  CkCitationCardEmits,
   CkConversationLayoutProps,
   CkDropZoneOverlayProps,
   CkDropZoneOverlayEmits,
@@ -42,6 +50,7 @@ export type {
   CkHistoryWrapperProps,
   CkMarkdownElementClasses,
   CkMarkdownRendererProps,
+  CkMarkdownRendererEmits,
   CkModelOption,
   CkModelSelectorProps,
   CkModelSelectorEmits,

package/src/composables/fileUpload/useFileUpload.spec.ts

@@ -199,33 +199,7 @@ describe('useFileUpload maxFilesPerUpload', () => {
     });
   });
 
-  it('throws MAX_FILES_EXCEEDED when active files plus new batch exceeds limit', async () => {
-    const client = createUploadMockClient();
-    (client.post as ReturnType<typeof vi.fn>).mockResolvedValue([
-      { id: 'remote-1' },
-    ]);
-
-    const upload = useFileUpload({
-      client,
-      workflowId: 'wf',
-      storeId: 'ss-1',
-      maxFilesPerUpload: 3,
-    });
-
-    upload.files.value.set('existing-1', makeSuccessEntry('existing-1', 'r-1'));
-    upload.files.value.set('existing-2', makeSuccessEntry('existing-2', 'r-2'));
-
-    await expect(
-      upload.upload({
-        id: 'g2',
-        files: [createFile('a.pdf'), createFile('b.pdf')],
-      }),
-    ).rejects.toMatchObject({
-      code: 'MAX_FILES_EXCEEDED',
-    });
-  });
-
-  it('allows upload when active files plus new batch is within limit', async () => {
+  it('allows upload when batch is within limit regardless of existing active files', async () => {
     const client = createUploadMockClient();
     (client.post as ReturnType<typeof vi.fn>).mockResolvedValue([
       { id: 'remote-new' },
@@ -239,6 +213,7 @@ describe('useFileUpload maxFilesPerUpload', () => {
     });
 
     upload.files.value.set('existing-1', makeSuccessEntry('existing-1', 'r-1'));
+    upload.files.value.set('existing-2', makeSuccessEntry('existing-2', 'r-2'));
 
     const result = await upload.upload({
       id: 'g3',
@@ -247,38 +222,4 @@ describe('useFileUpload maxFilesPerUpload', () => {
 
     expect(result.results).toHaveLength(2);
   });
-
-  it('does not count failed/cancelled/removed files towards active count', async () => {
-    const client = createUploadMockClient();
-    (client.post as ReturnType<typeof vi.fn>).mockResolvedValue([
-      { id: 'remote-new' },
-    ]);
-
-    const upload = useFileUpload({
-      client,
-      workflowId: 'wf',
-      storeId: 'ss-1',
-      maxFilesPerUpload: 2,
-    });
-
-    const failedEntry: FileEntry = {
-      ...makeEntry('failed-1', 'r-f1'),
-      status: 'failed',
-      error: { code: 'UPLOAD_FAILED', message: 'err', occurredAt: 'now' },
-    };
-    const cancelledEntry: FileEntry = {
-      ...makeEntry('cancelled-1', 'r-c1'),
-      status: 'cancelled',
-    };
-
-    upload.files.value.set('failed-1', failedEntry);
-    upload.files.value.set('cancelled-1', cancelledEntry);
-
-    const result = await upload.upload({
-      id: 'g4',
-      files: [createFile('a.pdf'), createFile('b.pdf')],
-    });
-
-    expect(result.results).toHaveLength(2);
-  });
 });

package/src/composables/fileUpload/useFileUpload.ts

@@ -707,17 +707,10 @@ export function useFileUpload(
       ? params.files
       : [params.files];
 
-    const activeFileCount = [...files.value.values()].filter(
-      (e) =>
-        e.status !== 'failed' &&
-        e.status !== 'cancelled' &&
-        e.status !== 'removed',
-    ).length;
-
-    if (activeFileCount + fileList.length > constraints.maxFilesPerUpload) {
+    if (fileList.length > constraints.maxFilesPerUpload) {
       throw new SdkError(
         'MAX_FILES_EXCEEDED',
-        `Cannot upload ${fileList.length} file(s) — ${activeFileCount} already active, maximum is ${constraints.maxFilesPerUpload}.`,
+        `Cannot upload ${fileList.length} file(s) — maximum per selection is ${constraints.maxFilesPerUpload}.`,
       );
     }