@aleph-alpha/chat-kit 0.9.0 → 1.1.0

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

@@ -0,0 +1,91 @@
+import CkAgentMessage from './CkAgentMessage.vue';
+import { render, screen } from '@testing-library/vue';
+
+describe('CkAgentMessage', () => {
+  describe('header', () => {
+    it('displays custom header slot content', () => {
+      render(CkAgentMessage, {
+        slots: { header: 'Custom Header' },
+      });
+
+      expect(screen.getByText('Custom Header')).toBeInTheDocument();
+    });
+
+    it('hides the header section when no header slot is provided', () => {
+      const { container } = render(CkAgentMessage, {
+        slots: { default: 'Some content' },
+      });
+
+      expect(
+        container.querySelector('.text-sm.font-bold'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('content', () => {
+    it('displays message content from the default slot', () => {
+      render(CkAgentMessage, {
+        slots: { default: '<p>Agent response content</p>' },
+      });
+
+      expect(screen.getByText('Agent response content')).toBeInTheDocument();
+    });
+  });
+
+  describe('icon', () => {
+    it('displays the icon when provided via slot', () => {
+      render(CkAgentMessage, {
+        slots: { icon: '<img src="" alt="bot-icon" />' },
+      });
+
+      expect(screen.getByAltText('bot-icon')).toBeInTheDocument();
+    });
+
+    it('renders the icon container only when the icon slot is provided', () => {
+      const { container } = render(CkAgentMessage, {
+        slots: { icon: '<img src="" alt="bot-icon" />' },
+      });
+
+      expect(
+        container.querySelector(
+          '.flex.flex-shrink-0.items-center.justify-center',
+        ),
+      ).toBeInTheDocument();
+    });
+
+    it('does not render the icon container when no icon slot is provided', () => {
+      const { container } = render(CkAgentMessage, {
+        slots: { default: 'Some content' },
+      });
+
+      expect(
+        container.querySelector(
+          '.flex.flex-shrink-0.items-center.justify-center',
+        ),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe('footer', () => {
+    it('displays footer actions when the footer slot is provided', () => {
+      render(CkAgentMessage, {
+        slots: { footer: '<button>Copy</button><button>Retry</button>' },
+      });
+
+      expect(screen.getByText('Copy')).toBeInTheDocument();
+      expect(screen.getByText('Retry')).toBeInTheDocument();
+    });
+
+    it('does not display a footer area when no footer slot is provided', () => {
+      const { container } = render(CkAgentMessage, {
+        slots: { default: 'Some content' },
+      });
+
+      expect(screen.getByText('Some content')).toBeInTheDocument();
+      // Footer buttons should not exist
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      // The container should not have empty footer wrappers
+      expect(container.textContent).not.toBe('');
+    });
+  });
+});

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

@@ -0,0 +1,215 @@
+import CkAgentMessage from './CkAgentMessage.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+const meta: Meta<typeof CkAgentMessage> = {
+  title: 'Base/CkAgentMessage',
+  component: CkAgentMessage,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { CkAgentMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkAgentMessage>
+    <template #icon>
+      <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+        AI
+      </div>
+    </template>
+    <p>Based on a review of internal documents, here are the key lessons learned.</p>
+  </CkAgentMessage>
+</template>`;
+
+const withFooterActionsTemplateSource = `<script setup lang="ts">
+import { CkAgentMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkAgentMessage>
+    <template #icon>
+      <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+        AI
+      </div>
+    </template>
+    <p>Research completed. Ask any follow-up questions as needed.</p>
+    <template #footer>
+      <button class="p-1 opacity-60 hover:opacity-100">Copy</button>
+      <button class="p-1 opacity-60 hover:opacity-100">Regenerate</button>
+    </template>
+  </CkAgentMessage>
+</template>`;
+
+const withRichContentTemplateSource = `<script setup lang="ts">
+import { CkAgentMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkAgentMessage>
+    <template #icon>
+      <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+        AI
+      </div>
+    </template>
+    <div>
+      <p>Key lessons learned from the project:</p>
+      <ul class="mt-1 list-disc pl-4">
+        <li><strong>Stakeholder Involvement:</strong> Early and continuous stakeholder involvement.</li>
+        <li><strong>User Training:</strong> Hands-on training beats generic sessions.</li>
+      </ul>
+    </div>
+    <template #footer>
+      <button class="p-1 opacity-60 hover:opacity-100">Copy</button>
+    </template>
+  </CkAgentMessage>
+</template>`;
+
+const withCustomHeaderTemplateSource = `<script setup lang="ts">
+import { CkAgentMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkAgentMessage>
+    <template #icon>
+      <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+        AI
+      </div>
+    </template>
+    <template #header>
+      <span>Custom Agent</span>
+      <span class="text-core-content-quaternary ml-2 text-xs font-normal">v2.1</span>
+    </template>
+    <p>Hello! How can I assist you today?</p>
+  </CkAgentMessage>
+</template>`;
+
+const withoutIconTemplateSource = `<script setup lang="ts">
+import { CkAgentMessage } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkAgentMessage>
+    <p>A message from an agent without a custom icon.</p>
+  </CkAgentMessage>
+</template>`;
+
+/**
+ * Standard agent reply with an icon slot and a body slot. Use as the default
+ * layout for assistant messages in a conversation.
+ */
+export const Default: Story = {
+  render: () => ({
+    components: { CkAgentMessage },
+    template: `
+      <CkAgentMessage>
+        <template #icon>
+          <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+            AI
+          </div>
+        </template>
+        <p>Based on a review of internal documents, here are the key lessons learned and best practices from the 'Digital Transformation Phase 1' project, broken down by category.</p>
+      </CkAgentMessage>
+    `,
+  }),
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};
+
+/**
+ * Adds action buttons (copy, regenerate, etc.) via the `footer` slot.
+ * Use when messages need post-response interactions.
+ */
+export const WithFooterActions: Story = {
+  render: () => ({
+    components: { CkAgentMessage },
+    template: `
+      <CkAgentMessage>
+        <template #icon>
+          <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+            AI
+          </div>
+        </template>
+        <p>Research completed. Ask any follow-up questions as needed.</p>
+        <template #footer>
+          <button class="p-1 opacity-60 hover:opacity-100">Copy</button>
+          <button class="p-1 opacity-60 hover:opacity-100">Regenerate</button>
+        </template>
+      </CkAgentMessage>
+    `,
+  }),
+  parameters: { docs: { source: { code: withFooterActionsTemplateSource } } },
+};
+
+/**
+ * Arbitrary rich content in the default slot — lists, bold text, etc.
+ * Use when you are rendering structured answers directly (rather than via CkMarkdownRenderer).
+ */
+export const WithRichContent: Story = {
+  render: () => ({
+    components: { CkAgentMessage },
+    template: `
+      <CkAgentMessage>
+        <template #icon>
+          <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+            AI
+          </div>
+        </template>
+        <div>
+          <p>Based on a review of internal documents, here are the key lessons learned:</p>
+          <ul class="mt-1 list-disc pl-4">
+            <li><strong>Stakeholder Involvement:</strong> Early and continuous stakeholder involvement.</li>
+            <li><strong>User Training:</strong> Hands-on training was far more effective than generic sessions.</li>
+          </ul>
+        </div>
+        <template #footer>
+          <button class="p-1 opacity-60 hover:opacity-100">Copy</button>
+        </template>
+      </CkAgentMessage>
+    `,
+  }),
+  parameters: { docs: { source: { code: withRichContentTemplateSource } } },
+};
+
+/**
+ * Replaces the default header row with a custom title/metadata block.
+ * Use to label the assistant (agent name, version, model) above the message body.
+ */
+export const WithCustomHeader: Story = {
+  render: () => ({
+    components: { CkAgentMessage },
+    template: `
+      <CkAgentMessage>
+        <template #icon>
+          <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
+            AI
+          </div>
+        </template>
+        <template #header>
+          <span>Custom Agent</span>
+          <span class="text-core-content-quaternary ml-2 text-xs font-normal">v2.1</span>
+        </template>
+        <p>Hello! How can I assist you today?</p>
+      </CkAgentMessage>
+    `,
+  }),
+  parameters: { docs: { source: { code: withCustomHeaderTemplateSource } } },
+};
+
+/**
+ * Omits the icon slot. Use for minimalist conversations or systems where
+ * the assistant identity is conveyed elsewhere.
+ */
+export const WithoutIcon: Story = {
+  render: () => ({
+    components: { CkAgentMessage },
+    template: `
+      <CkAgentMessage>
+        <p>A message from an agent without a custom icon.</p>
+      </CkAgentMessage>
+    `,
+  }),
+  parameters: { docs: { source: { code: withoutIconTemplateSource } } },
+};

package/src/components/base/CkAgentMessage/CkAgentMessage.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineOptions({ name: 'CkAgentMessage' });
+</script>
+
+<template>
+  <div class="flex w-full items-start gap-2">
+    <div
+      v-if="$slots.icon"
+      class="flex flex-shrink-0 items-center justify-center"
+    >
+      <slot name="icon" />
+    </div>
+    <div class="text-core-content-primary flex min-w-0 flex-1 flex-col gap-2">
+      <span v-if="$slots.header" class="text-sm font-bold">
+        <slot name="header" />
+      </span>
+      <div>
+        <slot />
+      </div>
+      <div v-if="$slots.footer" class="flex items-center">
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,11 @@
+/**
+ * Layout for a single assistant (agent) turn in a conversation. Exposes
+ * `icon`, `header`, default content and `footer` slots for full control over
+ * each section while keeping consistent spacing and alignment.
+ *
+ * @category Messages
+ * @useCases render assistant reply, AI message layout, conversation turn, streaming message container
+ * @keywords agent, assistant, message, bubble, reply, ai, conversation
+ * @related CkUserMessage, CkConversation, CkMarkdownRenderer, CkCopyMessageActionButton
+ */
+export type CkAgentMessageProps = Record<string, never>;

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

@@ -0,0 +1,129 @@
+import CkConversationLayout from './CkConversationLayout.vue';
+import { render, screen } from '@testing-library/vue';
+import { type Component, defineComponent, h } from 'vue';
+
+const messages = [
+  { role: 'user', content: 'Hello there' },
+  { role: 'agent', content: 'Hi! How can I help?' },
+  { role: 'user', content: 'Tell me a joke' },
+  { role: 'agent', content: 'Why did the chicken cross the road?' },
+];
+
+/**
+ * Helper to render CkConversationLayout with standard slot markup.
+ * Each message is rendered as a <p> with its content as text and a test-id
+ * indicating the slot it was routed through (user-msg or agent-msg).
+ */
+function renderLayout(
+  msgs: Array<{ role: string; content: string }> = messages,
+) {
+  // eslint-disable-next-line vue/one-component-per-file
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(
+          CkConversationLayout as unknown as Component,
+          { messages: msgs },
+          {
+            'user-message': ({ message }: { message: (typeof msgs)[0] }) =>
+              h('p', { 'data-testid': 'user-msg' }, message.content),
+            'agent-message': ({ message }: { message: (typeof msgs)[0] }) =>
+              h('p', { 'data-testid': 'agent-msg' }, message.content),
+          },
+        );
+    },
+  });
+
+  return render(Wrapper);
+}
+
+describe('CkConversationLayout', () => {
+  describe('message display', () => {
+    it('displays all provided messages', () => {
+      renderLayout();
+
+      for (const msg of messages) {
+        expect(screen.getByText(msg.content)).toBeInTheDocument();
+      }
+    });
+
+    it('shows no messages when the conversation is empty', () => {
+      renderLayout([]);
+
+      expect(screen.queryAllByTestId('user-msg')).toHaveLength(0);
+      expect(screen.queryAllByTestId('agent-msg')).toHaveLength(0);
+    });
+  });
+
+  describe('message routing', () => {
+    it('renders user messages through the user-message slot', () => {
+      renderLayout();
+
+      const userMessages = screen.getAllByTestId('user-msg');
+      expect(userMessages).toHaveLength(2);
+      expect(userMessages[0]).toHaveTextContent('Hello there');
+      expect(userMessages[1]).toHaveTextContent('Tell me a joke');
+    });
+
+    it('renders agent messages through the agent-message slot', () => {
+      renderLayout();
+
+      const agentMessages = screen.getAllByTestId('agent-msg');
+      expect(agentMessages).toHaveLength(2);
+      expect(agentMessages[0]).toHaveTextContent('Hi! How can I help?');
+      expect(agentMessages[1]).toHaveTextContent(
+        'Why did the chicken cross the road?',
+      );
+    });
+  });
+
+  describe('message order', () => {
+    it('preserves the order of messages from the input array', () => {
+      renderLayout();
+
+      const allMessages = screen.getAllByTestId(/msg$/);
+      expect(allMessages).toHaveLength(4);
+      expect(allMessages[0]).toHaveTextContent('Hello there');
+      expect(allMessages[1]).toHaveTextContent('Hi! How can I help?');
+      expect(allMessages[2]).toHaveTextContent('Tell me a joke');
+      expect(allMessages[3]).toHaveTextContent(
+        'Why did the chicken cross the road?',
+      );
+    });
+  });
+
+  describe('slot data', () => {
+    const customMessages = [
+      { role: 'user', content: 'Hi', id: '42', timestamp: '2026-02-13' },
+    ];
+
+    function renderCustomSlotWrapper() {
+      return h(
+        CkConversationLayout as unknown as Component,
+        { messages: customMessages },
+        {
+          'user-message': ({
+            message,
+          }: {
+            message: (typeof customMessages)[0];
+          }) =>
+            h(
+              'p',
+              null,
+              `${message.id}|${message.timestamp}|${message.content}`,
+            ),
+          'agent-message': () => null,
+        },
+      );
+    }
+
+    it('provides the full message object including custom fields to scoped slots', () => {
+      // eslint-disable-next-line vue/one-component-per-file
+      const Wrapper = defineComponent({ setup: () => renderCustomSlotWrapper });
+
+      render(Wrapper);
+
+      expect(screen.getByText('42|2026-02-13|Hi')).toBeInTheDocument();
+    });
+  });
+});