@aleph-alpha/chat-kit 0.9.0 → 1.1.0

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

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { useChatKitLabels } from '../../../handlers/useChatKitLabels';
+import type { BaseMessage } from '../../../types';
+import CkAgentMessage from '../../base/CkAgentMessage/CkAgentMessage.vue';
+import CkConversationLayout from '../../base/CkConversationLayout/CkConversationLayout.vue';
+import CkCopyMessageActionButton from '../../base/CkCopyMessageActionButton/CkCopyMessageActionButton.vue';
+import CkMarkdownRenderer from '../../base/CkMarkdownRenderer/CkMarkdownRenderer.vue';
+import CkUserMessage from '../../base/CkUserMessage/CkUserMessage.vue';
+import type { CkConversationProps } from './types';
+import {
+  UiAvatar,
+  UiAvatarFallback,
+  UiAvatarImage,
+  UiSpinner,
+} from '@aleph-alpha/ui-library';
+import { computed } from 'vue';
+
+defineOptions({ name: 'CkConversation' });
+
+const props = withDefaults(defineProps<CkConversationProps>(), {
+  agentAvatarImage: '',
+  agentAvatarFallback: '',
+  agentLoadingImage: '',
+});
+
+const slots = defineSlots<{
+  /** Replace the entire user message rendering */
+  'user-message': (props: { message: BaseMessage }) => void;
+  /** Replace the user message content inside the bubble */
+  'user-message-content': (props: { message: BaseMessage }) => void;
+  /** Replace the entire agent message rendering */
+  'agent-message': (props: { message: BaseMessage }) => void;
+  /** Replace the agent avatar icon */
+  'agent-message-icon': (props: { message: BaseMessage }) => void;
+  /** Replace the agent loading icon shown while a message is being generated */
+  'agent-message-loading-icon': (props: { message: BaseMessage }) => void;
+  /** Replace the agent message header */
+  'agent-message-header': (props: { message: BaseMessage }) => void;
+  /** Replace the agent message body */
+  'agent-message-content': (props: { message: BaseMessage }) => void;
+  /** Provide footer actions for the agent message */
+  'agent-message-footer': (props: { message: BaseMessage }) => void;
+  /** Replace the default code block rendering inside agent markdown */
+  'agent-message-code-block': (props: {
+    code: string;
+    language: string;
+  }) => void;
+}>();
+
+const labels = useChatKitLabels();
+
+/** Whether the icon area should be rendered at all */
+const hasIcon = computed(
+  () =>
+    Boolean(props.agentAvatarImage) ||
+    Boolean(props.agentAvatarFallback) ||
+    Boolean(slots['agent-message-icon']),
+);
+
+const isLoading = (message: BaseMessage) =>
+  message.status === 'started' || message.status === 'sending';
+</script>
+
+<template>
+  <CkConversationLayout :messages="messages">
+    <template #user-message="{ message }">
+      <div :class="{ 'ml-8': hasIcon }">
+        <slot name="user-message" :message="message">
+          <CkUserMessage :message="message.content">
+            <slot name="user-message-content" :message="message">
+              {{ message.content }}
+            </slot>
+          </CkUserMessage>
+        </slot>
+      </div>
+    </template>
+
+    <template #agent-message="{ message }">
+      <slot name="agent-message" :message="message">
+        <CkAgentMessage>
+          <template v-if="hasIcon" #icon>
+            <template v-if="isLoading(message)">
+              <slot name="agent-message-loading-icon" :message="message">
+                <UiAvatar v-if="agentLoadingImage" class="size-6">
+                  <UiAvatarImage
+                    :src="agentLoadingImage"
+                    :alt="labels.agentLoadingAvatarAlt"
+                  />
+                </UiAvatar>
+                <UiSpinner
+                  v-else
+                  class="size-6"
+                  :aria-label="labels.agentLoadingAvatarAlt"
+                />
+              </slot>
+            </template>
+
+            <template v-else>
+              <slot name="agent-message-icon" :message="message">
+                <UiAvatar class="size-6">
+                  <UiAvatarImage
+                    v-if="agentAvatarImage"
+                    :src="agentAvatarImage"
+                    :alt="labels.agentAvatarAlt"
+                  />
+                  <UiAvatarFallback v-if="agentAvatarFallback">{{
+                    agentAvatarFallback
+                  }}</UiAvatarFallback>
+                </UiAvatar>
+              </slot>
+            </template>
+          </template>
+
+          <template v-if="$slots['agent-message-header']" #header>
+            <slot name="agent-message-header" :message="message" />
+          </template>
+
+          <slot name="agent-message-content" :message="message">
+            <CkMarkdownRenderer
+              :content="message.content"
+              :classes="agentMarkdownClasses"
+            >
+              <template
+                v-if="$slots['agent-message-code-block']"
+                #code-block="codeBlockProps"
+              >
+                <slot name="agent-message-code-block" v-bind="codeBlockProps" />
+              </template>
+            </CkMarkdownRenderer>
+          </slot>
+
+          <template #footer>
+            <slot name="agent-message-footer" :message="message">
+              <CkCopyMessageActionButton
+                v-if="message.content && !isLoading(message)"
+                :text="message.content"
+                :aria-label-copy="labels.copyMessageAction"
+                :aria-label-copied="labels.copyMessageActionCopied"
+              />
+            </slot>
+          </template>
+        </CkAgentMessage>
+      </slot>
+    </template>
+  </CkConversationLayout>
+</template>

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

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

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

@@ -0,0 +1,37 @@
+import type { BaseMessage } from '../../../types';
+import type { CkMarkdownElementClasses } from '../../base/CkMarkdownRenderer';
+
+/**
+ * High-level chat conversation: renders user and agent messages, Markdown for
+ * assistant replies, an avatar, copy-to-clipboard action, streaming viewport,
+ * and slots for overriding any part of the rendering. Use as the drop-in
+ * conversation surface for most chat-kit integrations.
+ *
+ * @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
+ */
+export interface CkConversationProps {
+  /** List of messages to display, in chronological order. */
+  messages: BaseMessage[];
+  /**
+   * URL of the agent avatar image, shared across all agent messages.
+   * @default ''
+   */
+  agentAvatarImage?: string;
+  /**
+   * Fallback text rendered inside the default agent avatar when no image is
+   * available.
+   * @default ''
+   */
+  agentAvatarFallback?: string;
+  /**
+   * URL of the loading avatar image shown while an agent message is being
+   * generated. When omitted a spinner is used instead.
+   * @default ''
+   */
+  agentLoadingImage?: string;
+  /** Override default CSS classes applied to Markdown elements in agent messages. */
+  agentMarkdownClasses?: CkMarkdownElementClasses;
+}

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

@@ -0,0 +1,327 @@
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { h } from 'vue';
+import CkHistory from './CkHistory.vue';
+import type { Conversation } from '../../../types';
+
+const NOW = 1_700_000_000;
+
+function makeConversation(overrides: Partial<Conversation> = {}): Conversation {
+  return {
+    id: 'c-1',
+    title: 'Project Proposal Overview',
+    createdAt: NOW - 60 * 60 * 24,
+    updatedAt: NOW,
+    ...overrides,
+  };
+}
+
+const hrefResolver = (id: string) => `/chat/${id}`;
+
+describe('CkHistory', () => {
+  it('renders one row per conversation with the metadata title', () => {
+    const conversations = [
+      makeConversation({ id: 'c-1', title: 'Thread A' }),
+      makeConversation({ id: 'c-2', title: 'Thread B' }),
+    ];
+
+    render(CkHistory, {
+      props: { conversations, hrefResolver },
+    });
+
+    expect(screen.getByText('Thread A')).toBeInTheDocument();
+    expect(screen.getByText('Thread B')).toBeInTheDocument();
+  });
+
+  it('falls back to the historyItemUntitled label when title is missing or blank', () => {
+    const conversations = [
+      makeConversation({ id: 'c-x', title: undefined }),
+      makeConversation({ id: 'c-y', title: '   ' }),
+    ];
+
+    render(CkHistory, {
+      props: { conversations, hrefResolver },
+    });
+
+    const fallbacks = screen.getAllByText('Untitled conversation');
+    expect(fallbacks).toHaveLength(2);
+  });
+
+  it('builds href via the supplied hrefResolver', () => {
+    const conversations = [
+      makeConversation({ id: 'abc' }),
+      makeConversation({ id: 'def' }),
+    ];
+
+    const { container } = render(CkHistory, {
+      props: {
+        conversations,
+        hrefResolver: (id: string) => `/conversations/${id}?source=ui`,
+      },
+    });
+
+    const links = container.querySelectorAll('a[href]');
+    const hrefs = Array.from(links).map((a) => a.getAttribute('href'));
+    expect(hrefs).toContain('/conversations/abc?source=ui');
+    expect(hrefs).toContain('/conversations/def?source=ui');
+  });
+
+  it('marks the row matching activeId as active', () => {
+    const conversations = [
+      makeConversation({ id: 'c-1' }),
+      makeConversation({ id: 'c-2' }),
+    ];
+
+    const { container } = render(CkHistory, {
+      props: { conversations, hrefResolver, activeId: 'c-2' },
+    });
+
+    const activeRows = container.querySelectorAll(
+      '[data-active="true"] > a[href="/chat/c-2"]',
+    );
+    expect(activeRows.length).toBeGreaterThan(0);
+
+    const inactiveRows = container.querySelectorAll(
+      '[data-active="false"] > a[href="/chat/c-1"]',
+    );
+    expect(inactiveRows.length).toBeGreaterThan(0);
+  });
+
+  it('emits select with conversation + event on plain left-click and prevents default', async () => {
+    const conversation = makeConversation({ id: 'c-1' });
+    const { container, emitted } = render(CkHistory, {
+      props: { conversations: [conversation], hrefResolver },
+    });
+
+    const link = container.querySelector('a[href="/chat/c-1"]') as HTMLElement;
+    expect(link).toBeTruthy();
+
+    const event = new MouseEvent('click', {
+      button: 0,
+      bubbles: true,
+      cancelable: true,
+    });
+    link.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+    const events = emitted().select as unknown[][];
+    expect(events).toHaveLength(1);
+    expect(events[0][0]).toStrictEqual(conversation);
+    expect(events[0][1]).toBeInstanceOf(MouseEvent);
+  });
+
+  it('does not emit select for middle-click or cmd-click and lets the browser handle them natively', () => {
+    const conversation = makeConversation({ id: 'c-1' });
+    const { container, emitted } = render(CkHistory, {
+      props: { conversations: [conversation], hrefResolver },
+    });
+
+    const link = container.querySelector('a[href="/chat/c-1"]') as HTMLElement;
+
+    const middleClick = new MouseEvent('click', {
+      button: 1,
+      bubbles: true,
+      cancelable: true,
+    });
+    const cmdClick = new MouseEvent('click', {
+      button: 0,
+      metaKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+
+    link.dispatchEvent(middleClick);
+    link.dispatchEvent(cmdClick);
+
+    expect(middleClick.defaultPrevented).toBe(false);
+    expect(cmdClick.defaultPrevented).toBe(false);
+    expect(emitted().select).toBeUndefined();
+  });
+
+  it('emits edit and delete from the popover menu without firing select', async () => {
+    const user = userEvent.setup();
+    const conversation = makeConversation({ id: 'c-edit' });
+
+    const { emitted } = render(CkHistory, {
+      props: {
+        conversations: [conversation],
+        hrefResolver,
+        showActionOnHover: false,
+      },
+    });
+
+    await user.click(
+      screen.getByRole('button', { name: 'Conversation options' }),
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Edit' }));
+    await user.click(screen.getByRole('button', { name: 'Delete' }));
+
+    const editEvents = emitted().edit as unknown[][];
+    const deleteEvents = emitted().delete as unknown[][];
+
+    expect(editEvents).toHaveLength(1);
+    expect(editEvents[0][0]).toStrictEqual(conversation);
+
+    expect(deleteEvents).toHaveLength(1);
+    expect(deleteEvents[0][0]).toStrictEqual(conversation);
+
+    expect(emitted().select).toBeUndefined();
+  });
+
+  describe('#item slot', () => {
+    interface ItemSlotProps {
+      conversation: Conversation;
+      href: string;
+      isActive: boolean;
+      title: string;
+      select: (event: MouseEvent) => void;
+      edit: () => void;
+      delete: () => void;
+    }
+
+    it('exposes resolved row data (conversation, href, isActive, title) to the slot', () => {
+      const conversations = [
+        makeConversation({
+          id: 'c-1',
+          title: 'Thread A',
+        }),
+        makeConversation({
+          id: 'c-2',
+          title: undefined,
+        }),
+      ];
+
+      const { container } = render(CkHistory, {
+        props: {
+          conversations,
+          hrefResolver: (id: string) => `/c/${id}`,
+          activeId: 'c-1',
+        },
+        slots: {
+          item: ({ conversation, href, isActive, title }: ItemSlotProps) =>
+            h(
+              'a',
+              {
+                class: 'custom-row',
+                href,
+                'data-id': conversation.id,
+                'data-active': String(isActive),
+              },
+              [h('span', { class: 'custom-title' }, title)],
+            ),
+        },
+      });
+
+      const rows = container.querySelectorAll('a.custom-row');
+      expect(rows).toHaveLength(2);
+
+      expect(rows[0].getAttribute('href')).toBe('/c/c-1');
+      expect(rows[0].getAttribute('data-id')).toBe('c-1');
+      expect(rows[0].getAttribute('data-active')).toBe('true');
+      expect(rows[0].querySelector('.custom-title')?.textContent).toBe(
+        'Thread A',
+      );
+
+      expect(rows[1].getAttribute('href')).toBe('/c/c-2');
+      expect(rows[1].getAttribute('data-id')).toBe('c-2');
+      expect(rows[1].getAttribute('data-active')).toBe('false');
+      expect(rows[1].querySelector('.custom-title')?.textContent).toBe(
+        'Untitled conversation',
+      );
+    });
+
+    it('slot `select` helper applies the click guard and emits select for plain left-clicks only', () => {
+      const conversation = makeConversation({ id: 'c-1' });
+
+      const { container, emitted } = render(CkHistory, {
+        props: { conversations: [conversation], hrefResolver },
+        slots: {
+          item: ({ href, select }: ItemSlotProps) =>
+            h(
+              'a',
+              {
+                class: 'custom-row',
+                href,
+                onClick: (event: MouseEvent) => select(event),
+              },
+              'row',
+            ),
+        },
+      });
+
+      const link = container.querySelector('a.custom-row') as HTMLElement;
+      expect(link).toBeTruthy();
+
+      const cmdClick = new MouseEvent('click', {
+        button: 0,
+        metaKey: true,
+        bubbles: true,
+        cancelable: true,
+      });
+      link.dispatchEvent(cmdClick);
+      expect(cmdClick.defaultPrevented).toBe(false);
+      expect(emitted().select).toBeUndefined();
+
+      const plainClick = new MouseEvent('click', {
+        button: 0,
+        bubbles: true,
+        cancelable: true,
+      });
+      link.dispatchEvent(plainClick);
+      expect(plainClick.defaultPrevented).toBe(true);
+
+      const events = emitted().select as unknown[][];
+      expect(events).toHaveLength(1);
+      expect(events[0][0]).toStrictEqual(conversation);
+      expect(events[0][1]).toBe(plainClick);
+    });
+
+    it('slot `edit` and `delete` helpers emit the matching events with the conversation', async () => {
+      const user = userEvent.setup();
+      const conversation = makeConversation({ id: 'c-1' });
+
+      const { emitted } = render(CkHistory, {
+        props: { conversations: [conversation], hrefResolver },
+        slots: {
+          item: ({ edit, delete: del }: ItemSlotProps) =>
+            h('div', null, [
+              h(
+                'button',
+                {
+                  type: 'button',
+                  'data-testid': 'custom-edit',
+                  onClick: () => edit(),
+                },
+                'edit',
+              ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  'data-testid': 'custom-delete',
+                  onClick: () => del(),
+                },
+                'delete',
+              ),
+            ]),
+        },
+      });
+
+      await user.click(screen.getByTestId('custom-edit'));
+      await user.click(screen.getByTestId('custom-delete'));
+
+      const editEvents = emitted().edit as unknown[][];
+      const deleteEvents = emitted().delete as unknown[][];
+
+      expect(editEvents).toHaveLength(1);
+      expect(editEvents[0][0]).toStrictEqual(conversation);
+
+      expect(deleteEvents).toHaveLength(1);
+      expect(deleteEvents[0][0]).toStrictEqual(conversation);
+
+      expect(emitted().select).toBeUndefined();
+    });
+  });
+});