@aleph-alpha/chat-kit 1.0.0 → 1.2.0

package/src/components/base/CkUserMessage/CkUserMessage.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { CkUserMessageProps } from './types';
+
+defineOptions({ name: 'CkUserMessage' });
+
+defineProps<CkUserMessageProps>();
+</script>
+
+<template>
+  <div
+    class="bg-background-surface-primary inline-flex max-w-[600px] flex-col items-end justify-start gap-4 rounded-xl p-6"
+  >
+    <div
+      class="text-content-on-surface-primary justify-start self-stretch text-base leading-6 font-normal"
+    >
+      <slot>{{ message }}</slot>
+    </div>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,14 @@
+/**
+ * Bubble layout for a single user turn in a conversation. Renders the message
+ * text on the right side with a tokenized background and max-width; supports
+ * a default slot for custom inline content.
+ *
+ * @category Messages
+ * @useCases render user message bubble, conversation turn from user, chat input preview, right-aligned message
+ * @keywords user, message, bubble, chat, conversation, turn
+ * @related CkAgentMessage, CkConversation
+ */
+export interface CkUserMessageProps {
+  /** Text content of the user message. Rendered inside the bubble when no default slot is provided. */
+  message?: string;
+}

package/src/components/base/icons/CkSendIcon.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineOptions({ name: 'CkSendIcon' });
+</script>
+
+<template>
+  <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>
+</template>

package/src/components/base/icons/CkStopIcon.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineOptions({ name: 'CkStopIcon' });
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <path
+      d="M13.3335 3.33301C13.3335 2.96482 13.035 2.66634 12.6668 2.66634H3.3335C2.96531 2.66634 2.66683 2.96482 2.66683 3.33301V12.6663C2.66683 13.0345 2.96531 13.333 3.3335 13.333H12.6668C13.035 13.333 13.3335 13.0345 13.3335 12.6663V3.33301ZM14.6668 12.6663C14.6668 13.7709 13.7714 14.6663 12.6668 14.6663H3.3335C2.22893 14.6663 1.3335 13.7709 1.3335 12.6663V3.33301C1.3335 2.22844 2.22893 1.33301 3.3335 1.33301H12.6668C13.7714 1.33301 14.6668 2.22844 14.6668 3.33301V12.6663Z"
+      fill="#1D1D1B"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,2 @@
+export { default as CkSendIcon } from './CkSendIcon.vue';
+export { default as CkStopIcon } from './CkStopIcon.vue';

package/src/components/base/index.ts

@@ -0,0 +1,21 @@
+export { CkSendIcon, CkStopIcon } from './icons';
+export { CkAgentMessage } from './CkAgentMessage';
+export { CkConversationLayout } from './CkConversationLayout';
+export type { CkConversationLayoutProps } from './CkConversationLayout';
+export { CkCopyMessageActionButton } from './CkCopyMessageActionButton';
+export { CkHistoryItem } from './CkHistoryItem';
+export type { CkHistoryItemProps, CkHistoryItemEmits } from './CkHistoryItem';
+export { CkHistoryWrapper } from './CkHistoryWrapper';
+export type { CkHistoryWrapperProps } from './CkHistoryWrapper';
+export { CkMarkdownRenderer } from './CkMarkdownRenderer';
+export type {
+  CkMarkdownRendererProps,
+  CkMarkdownElementClasses,
+} from './CkMarkdownRenderer';
+export { CkMessageActionButton } from './CkMessageActionButton';
+export { CkPromptActionButton } from './CkPromptActionButton';
+export { CkPromptStopButton } from './CkPromptStopButton';
+export { CkPromptInput } from './CkPromptInput';
+export { CkPromptInputDisclaimer } from './CkPromptInputDisclaimer';
+export { CkUserMessage } from './CkUserMessage';
+export type { CkUserMessageProps } from './CkUserMessage';

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

@@ -0,0 +1,439 @@
+import type { BaseMessage } from '../../../types';
+import CkConversation from './CkConversation.vue';
+import { defaultMarkdownClasses } from '../../base/CkMarkdownRenderer/defaultMarkdownClasses';
+import { render, screen } from '@testing-library/vue';
+import { h } from 'vue';
+
+const now = new Date();
+
+const messages: BaseMessage[] = [
+  {
+    id: '1',
+    role: 'user',
+    content: 'Hello there',
+    createdAt: now,
+    status: 'completed',
+  },
+  {
+    id: '2',
+    role: 'assistant',
+    content: 'Hi! How can I help?',
+    createdAt: now,
+    status: 'completed',
+  },
+  {
+    id: '3',
+    role: 'user',
+    content: 'Tell me a joke',
+    createdAt: now,
+    status: 'completed',
+  },
+  {
+    id: '4',
+    role: 'assistant',
+    content: 'Why did the chicken cross the road?',
+    createdAt: now,
+    status: 'completed',
+  },
+];
+
+function agentMessage(overrides: Partial<BaseMessage> = {}): BaseMessage {
+  return {
+    id: '1',
+    role: 'assistant',
+    content: 'Hello',
+    createdAt: now,
+    status: 'completed',
+    ...overrides,
+  };
+}
+
+describe('CkConversation', () => {
+  describe('default rendering', () => {
+    it('displays all user messages', () => {
+      render(CkConversation, { props: { messages } });
+
+      expect(screen.getByText('Hello there')).toBeInTheDocument();
+      expect(screen.getByText('Tell me a joke')).toBeInTheDocument();
+    });
+
+    it('displays all agent messages', () => {
+      render(CkConversation, { props: { messages } });
+
+      expect(screen.getByText('Hi! How can I help?')).toBeInTheDocument();
+      expect(
+        screen.getByText('Why did the chicken cross the road?'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('agent icon', () => {
+    it('displays avatar fallback when agentAvatarFallback is provided', () => {
+      render(CkConversation, {
+        props: { messages: [agentMessage()], agentAvatarFallback: 'WB' },
+      });
+
+      expect(screen.getByText('WB')).toBeInTheDocument();
+    });
+
+    it('hides the icon area when no agentAvatarImage, no agentAvatarFallback, and no agent-message-icon slot', () => {
+      const { container } = render(CkConversation, {
+        props: { messages: [agentMessage()] },
+      });
+
+      // The icon container inside CkAgentMessage should not be rendered
+      const agentMessageEl = container.querySelector(
+        '.flex.w-full.items-start.gap-2',
+      );
+      expect(agentMessageEl).toBeInTheDocument();
+      // The flex-shrink-0 icon wrapper should not exist
+      expect(
+        agentMessageEl?.querySelector(
+          '.flex.flex-shrink-0.items-center.justify-center',
+        ),
+      ).not.toBeInTheDocument();
+    });
+
+    it('shows the icon area when agentAvatarFallback is provided', () => {
+      const { container } = render(CkConversation, {
+        props: { messages: [agentMessage()], agentAvatarFallback: 'AI' },
+      });
+
+      const agentMessageEl = container.querySelector(
+        '.flex.w-full.items-start.gap-2',
+      );
+      expect(
+        agentMessageEl?.querySelector(
+          '.flex.flex-shrink-0.items-center.justify-center',
+        ),
+      ).toBeInTheDocument();
+    });
+
+    it('shows the icon area when agentAvatarImage URL is provided', () => {
+      const { container } = render(CkConversation, {
+        props: {
+          messages: [agentMessage()],
+          agentAvatarImage: 'https://example.com/icon.png',
+        },
+      });
+
+      const agentMessageEl = container.querySelector(
+        '.flex.w-full.items-start.gap-2',
+      );
+      expect(
+        agentMessageEl?.querySelector(
+          '.flex.flex-shrink-0.items-center.justify-center',
+        ),
+      ).toBeInTheDocument();
+    });
+
+    it('shows the icon area when agent-message-icon slot is provided', () => {
+      const { container } = render(CkConversation, {
+        props: { messages: [agentMessage()] },
+        slots: {
+          'agent-message-icon': '<span data-testid="custom-icon">🤖</span>',
+        },
+      });
+
+      expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+      const agentMessageEl = container.querySelector(
+        '.flex.w-full.items-start.gap-2',
+      );
+      expect(
+        agentMessageEl?.querySelector(
+          '.flex.flex-shrink-0.items-center.justify-center',
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('loading icon', () => {
+    it('shows UiSpinner by default when message is loading and icon area is visible', () => {
+      render(CkConversation, {
+        props: {
+          messages: [agentMessage({ status: 'started' })],
+          agentAvatarImage: 'avatar.png',
+        },
+      });
+
+      expect(screen.getByLabelText('Agent loading')).toBeInTheDocument();
+      expect(screen.queryByAltText('Agent avatar')).not.toBeInTheDocument();
+    });
+
+    it('shows agentLoadingImage instead of UiSpinner when provided', () => {
+      render(CkConversation, {
+        props: {
+          messages: [agentMessage({ status: 'started' })],
+          agentAvatarImage: 'avatar.png',
+          agentLoadingImage: 'loading.png',
+        },
+      });
+
+      const img = screen.getByAltText('Agent loading');
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('src', 'loading.png');
+    });
+
+    it('shows custom slot content instead of agentLoadingImage or UiSpinner', () => {
+      render(CkConversation, {
+        props: {
+          messages: [agentMessage({ status: 'sending' })],
+          agentAvatarImage: 'avatar.png',
+          agentLoadingImage: 'loading.png',
+        },
+        slots: {
+          'agent-message-loading-icon':
+            '<span data-testid="custom-loader">Loading…</span>',
+        },
+      });
+
+      expect(screen.getByTestId('custom-loader')).toBeInTheDocument();
+      expect(screen.queryByAltText('Agent loading')).not.toBeInTheDocument();
+    });
+
+    it('shows the normal avatar icon when message is completed', () => {
+      render(CkConversation, {
+        props: {
+          messages: [agentMessage({ status: 'completed' })],
+          agentAvatarImage: 'avatar.png',
+          agentLoadingImage: 'loading.png',
+        },
+      });
+
+      expect(screen.getByAltText('Agent avatar')).toBeInTheDocument();
+      expect(screen.queryByAltText('Agent loading')).not.toBeInTheDocument();
+    });
+
+    it('shows UiSpinner for "sending" status as well', () => {
+      render(CkConversation, {
+        props: {
+          messages: [agentMessage({ status: 'sending' })],
+          agentAvatarImage: 'avatar.png',
+        },
+      });
+
+      expect(screen.getByLabelText('Agent loading')).toBeInTheDocument();
+    });
+  });
+
+  describe('slot overrides', () => {
+    it('allows replacing user message content via user-message-content slot', () => {
+      render(CkConversation, {
+        props: {
+          messages: [
+            {
+              id: '1',
+              role: 'user',
+              content: 'Original',
+              createdAt: now,
+              status: 'completed',
+            } as BaseMessage,
+          ],
+        },
+        slots: { 'user-message-content': 'Custom user content' },
+      });
+
+      expect(screen.getByText('Custom user content')).toBeInTheDocument();
+      expect(screen.queryByText('Original')).not.toBeInTheDocument();
+    });
+
+    it('allows replacing the entire user message via user-message slot', () => {
+      render(CkConversation, {
+        props: {
+          messages: [
+            {
+              id: '1',
+              role: 'user',
+              content: 'Original',
+              createdAt: now,
+              status: 'completed',
+            } as BaseMessage,
+          ],
+        },
+        slots: {
+          'user-message': '<div data-testid="custom-user">Totally custom</div>',
+        },
+      });
+
+      expect(screen.getByTestId('custom-user')).toBeInTheDocument();
+    });
+
+    it('allows replacing agent content via agent-message-content slot', () => {
+      render(CkConversation, {
+        props: { messages: [agentMessage({ content: 'Original' })] },
+        slots: { 'agent-message-content': 'Rich agent content' },
+      });
+
+      expect(screen.getByText('Rich agent content')).toBeInTheDocument();
+      expect(screen.queryByText('Original')).not.toBeInTheDocument();
+    });
+
+    it('allows replacing the entire agent message via agent-message slot', () => {
+      render(CkConversation, {
+        props: { messages: [agentMessage({ content: 'Original' })] },
+        slots: {
+          'agent-message':
+            '<div data-testid="custom-agent">Fully replaced</div>',
+        },
+      });
+
+      expect(screen.getByTestId('custom-agent')).toBeInTheDocument();
+    });
+
+    it('allows replacing the agent icon via agent-message-icon slot', () => {
+      render(CkConversation, {
+        props: { messages: [agentMessage()] },
+        slots: { 'agent-message-icon': '<img alt="custom-bot" />' },
+      });
+
+      expect(screen.getByAltText('custom-bot')).toBeInTheDocument();
+    });
+
+    it('allows adding a header via agent-message-header slot', () => {
+      render(CkConversation, {
+        props: { messages: [agentMessage()] },
+        slots: { 'agent-message-header': 'Custom Header' },
+      });
+
+      expect(screen.getByText('Custom Header')).toBeInTheDocument();
+    });
+
+    it('allows adding footer actions via agent-message-footer slot', () => {
+      render(CkConversation, {
+        props: { messages: [agentMessage()] },
+        slots: { 'agent-message-footer': '<button>Copy</button>' },
+      });
+
+      expect(screen.getByText('Copy')).toBeInTheDocument();
+    });
+  });
+
+  describe('empty conversation', () => {
+    it('renders nothing when messages array is empty', () => {
+      const { container } = render(CkConversation, { props: { messages: [] } });
+
+      // Only the scroll container should exist, with no message content
+      expect(container.querySelectorAll('[data-message-row]')).toHaveLength(0);
+    });
+  });
+
+  describe('markdown rendering', () => {
+    it('renders agent message content as markdown by default', () => {
+      const { container } = render(CkConversation, {
+        props: {
+          messages: [agentMessage({ content: 'This has **bold** text' })],
+        },
+      });
+
+      expect(container.querySelector('strong')?.textContent).toBe('bold');
+    });
+
+    it('renders markdown headings and lists', () => {
+      const { container } = render(CkConversation, {
+        props: {
+          messages: [
+            agentMessage({ content: '## Title\n\n- item one\n- item two' }),
+          ],
+        },
+      });
+
+      expect(container.querySelector('h2')?.textContent).toBe('Title');
+      expect(container.querySelectorAll('li')).toHaveLength(2);
+    });
+
+    it('applies default markdown classes to elements', () => {
+      const { container } = render(CkConversation, {
+        props: {
+          messages: [agentMessage({ content: 'A paragraph' })],
+        },
+      });
+
+      const p = container.querySelector('.markdown-renderer p');
+      expect(p).not.toBeNull();
+      expect(p?.className).toContain(defaultMarkdownClasses.p);
+    });
+
+    it('merges agentMarkdownClasses prop with defaults', () => {
+      const { container } = render(CkConversation, {
+        props: {
+          messages: [agentMessage({ content: 'A paragraph' })],
+          agentMarkdownClasses: { p: 'custom-paragraph' },
+        },
+      });
+
+      const p = container.querySelector('.markdown-renderer p');
+      expect(p?.className).toContain('custom-paragraph');
+      expect(p?.className).not.toContain(defaultMarkdownClasses.p);
+    });
+
+    it('preserves default classes for elements not overridden', () => {
+      const { container } = render(CkConversation, {
+        props: {
+          messages: [
+            agentMessage({
+              content:
+                '## Heading\n\nParagraph with [link](https://example.com)',
+            }),
+          ],
+          agentMarkdownClasses: { p: 'custom-paragraph' },
+        },
+      });
+
+      const h2 = container.querySelector('.markdown-renderer h2');
+      expect(h2?.className).toContain(defaultMarkdownClasses.h2);
+
+      const a = container.querySelector('.markdown-renderer a');
+      expect(a?.className).toContain(defaultMarkdownClasses.a);
+    });
+
+    it('does not render CkMarkdownRenderer when agent-message-content slot is provided', () => {
+      const { container } = render(CkConversation, {
+        props: { messages: [agentMessage({ content: '**bold**' })] },
+        slots: {
+          'agent-message-content':
+            '<div data-testid="custom-content">Custom</div>',
+        },
+      });
+
+      expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+      expect(container.querySelector('.markdown-renderer')).toBeNull();
+    });
+
+    it('forwards agent-message-code-block slot to CkMarkdownRenderer', () => {
+      const markdown = '```python\nprint("hello")\n```';
+
+      const { container } = render(CkConversation, {
+        props: { messages: [agentMessage({ content: markdown })] },
+        slots: {
+          'agent-message-code-block': (props: {
+            code: string;
+            language: string;
+          }) =>
+            h(
+              'div',
+              { class: 'custom-code', 'data-lang': props.language },
+              props.code,
+            ),
+        },
+      });
+
+      const custom = container.querySelector('.custom-code');
+      expect(custom).not.toBeNull();
+      expect(custom?.textContent).toContain('print("hello")');
+      expect(custom?.getAttribute('data-lang')).toBe('python');
+      expect(container.querySelector('pre > code')).toBeNull();
+    });
+
+    it('renders default code block when agent-message-code-block slot is not provided', () => {
+      const markdown = '```javascript\nconsole.log("hi");\n```';
+
+      const { container } = render(CkConversation, {
+        props: { messages: [agentMessage({ content: markdown })] },
+      });
+
+      const codeEl = container.querySelector('pre > code');
+      expect(codeEl).not.toBeNull();
+      expect(codeEl?.textContent).toContain('console.log("hi");');
+    });
+  });
+});