@aleph-alpha/chat-kit 3.3.0 → 5.0.0

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

@@ -1,6 +1,8 @@
-import CkAgentMessage from './CkAgentMessage.vue';
-import { CkMarkdownRenderer } from '../CkMarkdownRenderer';
+import { CkAgentMessageHeader } from '../CkAgentMessageHeader';
 import type { CkCitationSource } from '../CkCitation';
+import { CkHeaderActivityButton } from '../CkHeaderActivityButton';
+import { CkMarkdownRenderer } from '../CkMarkdownRenderer';
+import CkAgentMessage from './CkAgentMessage.vue';
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 const meta: Meta<typeof CkAgentMessage> = {
@@ -12,106 +14,111 @@ const meta: Meta<typeof CkAgentMessage> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+// Shared icon markup for the header slot (an agent avatar placeholder).
+const ICON = `<template #icon>
+          <div class="bg-background-surface-muted-subtle flex size-8 items-center justify-center rounded-2xl text-xs">AA</div>
+        </template>`;
+
 const defaultTemplateSource = `<script setup lang="ts">
-import { CkAgentMessage } from '@aleph-alpha/chat-kit';
+import { CkAgentMessage, CkAgentMessageHeader } 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 #header>
+      <CkAgentMessageHeader>
+        <template #icon>
+          <div class="bg-background-surface-muted-subtle flex size-8 items-center justify-center rounded-2xl text-xs">AA</div>
+        </template>
+        Thought about the lessons learned of the Digital Transformation Phase 1
+      </CkAgentMessageHeader>
     </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';
+const withActivityHeaderTemplateSource = `<script setup lang="ts">
+import {
+  CkAgentMessage,
+  CkAgentMessageHeader,
+  CkHeaderActivityButton,
+} 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 #header>
+      <CkAgentMessageHeader>
+        <template #icon>
+          <div class="bg-background-surface-muted-subtle flex size-8 items-center justify-center rounded-2xl text-xs">AA</div>
+        </template>
+        Thought about the lessons learned of the Digital Transformation Phase 1
+        <template #activity>
+          <CkHeaderActivityButton>1 tool, 42 sources</CkHeaderActivityButton>
+        </template>
+      </CkAgentMessageHeader>
     </template>
+    <p>Based on a review of internal documents, here are the key lessons learned.</p>
   </CkAgentMessage>
 </template>`;
 
-const withRichContentTemplateSource = `<script setup lang="ts">
-import { CkAgentMessage } from '@aleph-alpha/chat-kit';
+const withFooterActionsTemplateSource = `<script setup lang="ts">
+import { CkAgentMessage, CkAgentMessageHeader } 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 #header>
+      <CkAgentMessageHeader>
+        <template #icon>
+          <div class="bg-background-surface-muted-subtle flex size-8 items-center justify-center rounded-2xl text-xs">AA</div>
+        </template>
+        Thought about the lessons learned of the Digital Transformation Phase 1
+      </CkAgentMessageHeader>
     </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>
+    <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 withCustomHeaderTemplateSource = `<script setup lang="ts">
+const withoutHeaderTemplateSource = `<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>
+    <p>A message from an agent without a header.</p>
   </CkAgentMessage>
 </template>`;
 
-const withoutIconTemplateSource = `<script setup lang="ts">
+const withoutBottomSeparatorTemplateSource = `<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>
+  <!-- bottomSeparator is true by default; disable it for the last message -->
+  <CkAgentMessage :bottom-separator="false">
+    <p>The last message in a conversation has no trailing separator.</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.
+ * Standard agent reply: a full-width `CkAgentMessageHeader` (icon + text) in
+ * the `header` slot and the response body in the default slot.
  */
 export const Default: Story = {
   render: () => ({
-    components: { CkAgentMessage },
+    components: { CkAgentMessage, CkAgentMessageHeader },
     template: `
       <CkAgentMessage>
-        <template #icon>
-          <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
-            AI
-          </div>
+        <template #header>
+          <CkAgentMessageHeader>
+            ${ICON}
+            Thought about the lessons learned of the Digital Transformation Phase 1
+          </CkAgentMessageHeader>
         </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>
@@ -121,99 +128,99 @@ export const Default: Story = {
 };
 
 /**
- * Adds action buttons (copy, regenerate, etc.) via the `footer` slot.
- * Use when messages need post-response interactions.
+ * Header with an activity button. The activity slot adds vertical padding and a
+ * bottom border that separates the header from the message body.
  */
-export const WithFooterActions: Story = {
+export const WithActivityHeader: Story = {
   render: () => ({
-    components: { CkAgentMessage },
+    components: {
+      CkAgentMessage,
+      CkAgentMessageHeader,
+      CkHeaderActivityButton,
+    },
     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 #header>
+          <CkAgentMessageHeader>
+            ${ICON}
+            Thought about the lessons learned of the Digital Transformation Phase 1
+            <template #activity>
+              <CkHeaderActivityButton>1 tool, 42 sources</CkHeaderActivityButton>
+            </template>
+          </CkAgentMessageHeader>
         </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.</p>
       </CkAgentMessage>
     `,
   }),
-  parameters: { docs: { source: { code: withFooterActionsTemplateSource } } },
+  parameters: { docs: { source: { code: withActivityHeaderTemplateSource } } },
 };
 
 /**
- * Arbitrary rich content in the default slot — lists, bold text, etc.
- * Use when you are rendering structured answers directly (rather than via CkMarkdownRenderer).
+ * Adds action buttons (copy, regenerate, etc.) via the `footer` slot.
+ * Use when messages need post-response interactions.
  */
-export const WithRichContent: Story = {
+export const WithFooterActions: Story = {
   render: () => ({
-    components: { CkAgentMessage },
+    components: { CkAgentMessage, CkAgentMessageHeader },
     template: `
       <CkAgentMessage>
-        <template #icon>
-          <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
-            AI
-          </div>
+        <template #header>
+          <CkAgentMessageHeader>
+            ${ICON}
+            Thought about the lessons learned of the Digital Transformation Phase 1
+          </CkAgentMessageHeader>
         </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>
+        <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: withRichContentTemplateSource } } },
+  parameters: { docs: { source: { code: withFooterActionsTemplateSource } } },
 };
 
 /**
- * Replaces the default header row with a custom title/metadata block.
- * Use to label the assistant (agent name, version, model) above the message body.
+ * Omits the header entirely. Use for minimalist conversations or systems where
+ * the assistant identity is conveyed elsewhere.
  */
-export const WithCustomHeader: Story = {
+export const WithoutHeader: 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>
+        <p>A message from an agent without a header.</p>
       </CkAgentMessage>
     `,
   }),
-  parameters: { docs: { source: { code: withCustomHeaderTemplateSource } } },
+  parameters: { docs: { source: { code: withoutHeaderTemplateSource } } },
 };
 
 /**
- * Omits the icon slot. Use for minimalist conversations or systems where
- * the assistant identity is conveyed elsewhere.
+ * A bottom separator (border) is rendered by default to divide messages.
+ * `CkConversation` disables it on the last assistant message; set
+ * `:bottom-separator="false"` to do the same manually.
  */
-export const WithoutIcon: Story = {
+export const WithoutBottomSeparator: Story = {
   render: () => ({
-    components: { CkAgentMessage },
+    components: { CkAgentMessage, CkAgentMessageHeader },
     template: `
-      <CkAgentMessage>
-        <p>A message from an agent without a custom icon.</p>
+      <CkAgentMessage :bottom-separator="false">
+        <template #header>
+          <CkAgentMessageHeader>
+            ${ICON}
+            Thought about the lessons learned of the Digital Transformation Phase 1
+          </CkAgentMessageHeader>
+        </template>
+        <p>The last message in a conversation has no trailing separator.</p>
       </CkAgentMessage>
     `,
   }),
-  parameters: { docs: { source: { code: withoutIconTemplateSource } } },
+  parameters: {
+    docs: { source: { code: withoutBottomSeparatorTemplateSource } },
+  },
 };
 
 const CITATIONS: CkCitationSource[] = [
@@ -243,7 +250,7 @@ const CITED_MARKDOWN = [
 ].join('\n');
 
 const withCitationsTemplateSource = `<script setup lang="ts">
-import { CkAgentMessage, CkMarkdownRenderer } from '@aleph-alpha/chat-kit';
+import { CkAgentMessage, CkAgentMessageHeader, CkMarkdownRenderer } from '@aleph-alpha/chat-kit';
 import type { CkCitationSource } from '@aleph-alpha/chat-kit';
 
 // The reply body is markdown that contains inline [n] references.
@@ -280,10 +287,13 @@ function openSource(url: string) {
 
 <template>
   <CkAgentMessage>
-    <template #icon>
-      <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
-        AI
-      </div>
+    <template #header>
+      <CkAgentMessageHeader>
+        <template #icon>
+          <div class="bg-background-surface-muted-subtle flex size-8 items-center justify-center rounded-2xl text-xs">AA</div>
+        </template>
+        Thought about the lessons learned of the Digital Transformation Phase 1
+      </CkAgentMessageHeader>
     </template>
     <CkMarkdownRenderer
       :content="content"
@@ -301,7 +311,7 @@ function openSource(url: string) {
  */
 export const WithCitations: Story = {
   render: () => ({
-    components: { CkAgentMessage, CkMarkdownRenderer },
+    components: { CkAgentMessage, CkAgentMessageHeader, CkMarkdownRenderer },
     setup() {
       function openSource(url: string) {
         window.open(url, '_blank', 'noopener');
@@ -310,10 +320,11 @@ export const WithCitations: Story = {
     },
     template: `
       <CkAgentMessage>
-        <template #icon>
-          <div class="bg-core-bg-tertiary flex size-6 items-center justify-center rounded-full text-xs">
-            AI
-          </div>
+        <template #header>
+          <CkAgentMessageHeader>
+            ${ICON}
+            Thought about the lessons learned of the Digital Transformation Phase 1
+          </CkAgentMessageHeader>
         </template>
         <CkMarkdownRenderer
           :content="content"

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

@@ -1,24 +1,26 @@
 <script setup lang="ts">
+import type { CkAgentMessageProps } from './types';
+
 defineOptions({ name: 'CkAgentMessage' });
+
+withDefaults(defineProps<CkAgentMessageProps>(), {
+  bottomSeparator: true,
+});
 </script>
 
 <template>
-  <div class="flex w-full min-w-0 flex-col gap-6 pb-6">
-    <div v-if="$slots.icon || $slots.header" class="flex items-start gap-3">
-      <div
-        v-if="$slots.icon"
-        data-testid="ck-agent-message-icon"
-        class="flex flex-shrink-0 justify-center"
-      >
-        <slot name="icon" />
-      </div>
-      <span
-        v-if="$slots.header"
-        data-testid="ck-agent-message-header"
-        class="body-14-regular text-content-on-surface-muted min-w-0 flex-1 [word-break:break-word]"
-      >
-        <slot name="header" />
-      </span>
+  <div
+    :class="[
+      'flex w-full min-w-0 flex-col gap-6 pb-6',
+      bottomSeparator && 'border-border-surface-default border-b',
+    ]"
+  >
+    <div
+      v-if="$slots.header"
+      data-testid="ck-agent-message-header"
+      class="w-full min-w-0"
+    >
+      <slot name="header" />
     </div>
 
     <div class="text-content-on-surface-primary min-w-0 text-base leading-7">

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

@@ -1,11 +1,22 @@
 /**
- * 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.
+ * Layout for a single assistant (agent) turn in a conversation. Exposes a
+ * full-width `header`, default content and `footer` slots for full control over
+ * each section while keeping consistent spacing and alignment. The agent icon
+ * now lives inside the header (see `CkAgentMessageHeader`), so the `header` slot
+ * spans the entire width.
  *
  * @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
+ * @related CkUserMessage, CkConversation, CkAgentMessageHeader, CkMarkdownRenderer, CkCopyMessageButton
  */
-export type CkAgentMessageProps = Record<string, never>;
+export interface CkAgentMessageProps {
+  /**
+   * Whether to render a bottom border separating this message from the next
+   * one. `CkConversation` keeps this on for every message except the last
+   * assistant message, so it divides user/assistant pairs without a trailing
+   * line after the final pair.
+   * @default true
+   */
+  bottomSeparator?: boolean;
+}

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

@@ -0,0 +1,64 @@
+import CkAgentMessageHeader from './CkAgentMessageHeader.vue';
+import { render, screen } from '@testing-library/vue';
+import { describe, expect, it } from 'vitest';
+
+describe('CkAgentMessageHeader', () => {
+  it('renders the header text from the default slot', () => {
+    render(CkAgentMessageHeader, {
+      slots: { default: 'Thought about the lessons learned' },
+    });
+
+    expect(
+      screen.getByText('Thought about the lessons learned'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the icon slot when provided', () => {
+    render(CkAgentMessageHeader, {
+      slots: { icon: '<svg data-testid="agent-icon"></svg>' },
+    });
+
+    expect(screen.getByTestId('ck-agent-message-header-icon')).toContainElement(
+      screen.getByTestId('agent-icon'),
+    );
+  });
+
+  it('does not render the icon wrapper without an icon slot', () => {
+    render(CkAgentMessageHeader, { slots: { default: 'Header' } });
+
+    expect(
+      screen.queryByTestId('ck-agent-message-header-icon'),
+    ).not.toBeInTheDocument();
+  });
+
+  describe('with the activity slot', () => {
+    it('renders the activity slot and applies padding + bottom border', () => {
+      render(CkAgentMessageHeader, {
+        slots: {
+          default: 'Header',
+          activity: '<button data-testid="activity">Activity</button>',
+        },
+      });
+
+      expect(screen.getByTestId('activity')).toBeInTheDocument();
+
+      const header = screen.getByTestId('ck-agent-message-header-row');
+      expect(header.className).toContain('py-4');
+      expect(header.className).toContain('border-b');
+    });
+  });
+
+  describe('without the activity slot', () => {
+    it('omits the activity wrapper, padding and border', () => {
+      render(CkAgentMessageHeader, { slots: { default: 'Header' } });
+
+      expect(
+        screen.queryByTestId('ck-agent-message-header-activity'),
+      ).not.toBeInTheDocument();
+
+      const header = screen.getByTestId('ck-agent-message-header-row');
+      expect(header.className).not.toContain('py-4');
+      expect(header.className).not.toContain('border-b');
+    });
+  });
+});

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

@@ -0,0 +1,90 @@
+import { CkHeaderActivityButton } from '../CkHeaderActivityButton';
+import CkAgentMessageHeader from './CkAgentMessageHeader.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+const meta: Meta<typeof CkAgentMessageHeader> = {
+  title: 'Base/CkAgentMessageHeader',
+  component: CkAgentMessageHeader,
+  tags: ['autodocs'],
+  decorators: [
+    () => ({
+      template:
+        '<div style="max-width: 640px; margin: 0 auto; padding: 24px;"><story /></div>',
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ICON = `<template #icon>
+      <div class="bg-background-surface-muted-subtle flex size-8 items-center justify-center rounded-2xl text-xs">AA</div>
+    </template>`;
+
+const withActivityTemplateSource = `<script setup lang="ts">
+import { CkAgentMessageHeader, CkHeaderActivityButton } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkAgentMessageHeader>
+    <template #icon>
+      <div class="bg-background-surface-muted-subtle flex size-8 items-center justify-center rounded-2xl text-xs">AA</div>
+    </template>
+    Thought about the lessons learned of the Digital Transformation Phase 1
+    <template #activity>
+      <CkHeaderActivityButton @click="/* open activity panel */">
+        1 tool, 42 sources
+      </CkHeaderActivityButton>
+    </template>
+  </CkAgentMessageHeader>
+</template>`;
+
+const withoutActivityTemplateSource = `<script setup lang="ts">
+import { CkAgentMessageHeader } from '@aleph-alpha/chat-kit';
+</script>
+
+<template>
+  <CkAgentMessageHeader>
+    <template #icon>
+      <div class="bg-background-surface-muted-subtle flex size-8 items-center justify-center rounded-2xl text-xs">AA</div>
+    </template>
+    Thought about the lessons learned of the Digital Transformation Phase 1
+  </CkAgentMessageHeader>
+</template>`;
+
+/**
+ * Header with an activity button. The activity slot gives the row vertical
+ * padding and a bottom border separating it from the message body.
+ */
+export const WithActivityButton: Story = {
+  render: () => ({
+    components: { CkAgentMessageHeader, CkHeaderActivityButton },
+    template: `
+      <CkAgentMessageHeader>
+        ${ICON}
+        Thought about the lessons learned of the Digital Transformation Phase 1
+        <template #activity>
+          <CkHeaderActivityButton>1 tool, 42 sources</CkHeaderActivityButton>
+        </template>
+      </CkAgentMessageHeader>
+    `,
+  }),
+  parameters: { docs: { source: { code: withActivityTemplateSource } } },
+};
+
+/**
+ * Header without an activity button — a compact icon + text row with no
+ * padding or bottom border.
+ */
+export const WithoutActivityButton: Story = {
+  render: () => ({
+    components: { CkAgentMessageHeader },
+    template: `
+      <CkAgentMessageHeader>
+        ${ICON}
+        Thought about the lessons learned of the Digital Transformation Phase 1
+      </CkAgentMessageHeader>
+    `,
+  }),
+  parameters: { docs: { source: { code: withoutActivityTemplateSource } } },
+};

package/src/components/base/CkAgentMessageHeader/CkAgentMessageHeader.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+defineOptions({ name: 'CkAgentMessageHeader' });
+
+defineSlots<{
+  /** Leading agent avatar/icon. */
+  icon?: () => unknown;
+  /** Header text. Ellipsised on overflow (two lines on mobile, one on desktop). */
+  default?: () => unknown;
+  /**
+   * Optional activity control, typically a `CkHeaderActivityButton`. When
+   * present, the header gains vertical padding and a bottom border.
+   */
+  activity?: () => unknown;
+}>();
+</script>
+
+<template>
+  <div
+    data-testid="ck-agent-message-header-row"
+    :class="[
+      'flex w-full min-w-0 items-center gap-3',
+      $slots.activity && 'border-border-surface-default border-b py-4',
+    ]"
+  >
+    <div
+      v-if="$slots.icon"
+      data-testid="ck-agent-message-header-icon"
+      class="flex flex-shrink-0 items-center justify-center"
+    >
+      <slot name="icon" />
+    </div>
+
+    <span
+      class="body-14-regular text-content-on-surface-muted line-clamp-2 min-w-0 flex-1 md:line-clamp-1"
+    >
+      <slot />
+    </span>
+
+    <div
+      v-if="$slots.activity"
+      data-testid="ck-agent-message-header-activity"
+      class="flex flex-shrink-0 items-center"
+    >
+      <slot name="activity" />
+    </div>
+  </div>
+</template>

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

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