@aleph-alpha/chat-kit 1.14.0 → 1.15.1

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

@@ -3,23 +3,32 @@ 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">
+  <div
+    class="border-border-surface-default flex w-full flex-col gap-6 border-b pb-6"
+  >
+    <div v-if="$slots.icon || $slots.header" class="flex items-center gap-3">
+      <div
+        v-if="$slots.icon"
+        data-testid="ck-agent-message-icon"
+        class="flex flex-shrink-0 items-center 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>
-        <slot />
-      </div>
-      <div v-if="$slots.footer" class="flex items-center">
-        <slot name="footer" />
-      </div>
+    </div>
+
+    <div class="text-content-on-surface-primary text-base leading-7">
+      <slot />
+    </div>
+
+    <div v-if="$slots.footer" class="flex items-center gap-4">
+      <slot name="footer" />
     </div>
   </div>
 </template>

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

@@ -9,13 +9,11 @@ describe('CkHistoryItem', () => {
       props: {
         title: 'Thread A',
         metaStart: 'Mon',
-        metaEnd: 'Berlin',
       },
     });
 
     expect(screen.getByText('Thread A')).toBeInTheDocument();
     expect(screen.getByText('Mon')).toBeInTheDocument();
-    expect(screen.getByText('Berlin')).toBeInTheDocument();
   });
 
   it('emits action-click when the action button is clicked', async () => {

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

@@ -18,7 +18,6 @@ const meta: Meta<typeof CkHistoryItem> = {
   args: {
     title: 'Project Proposal Overview',
     metaStart: 'Today',
-    metaEnd: 'Innsbruck',
     actionTooltip: 'More actions',
   },
   argTypes: {
@@ -58,7 +57,6 @@ function handleActionClick() {
   <CkHistoryItem
     title="Project Proposal Overview"
     meta-start="Today"
-    meta-end="Innsbruck"
     action-tooltip="More actions"
     @action-click="handleActionClick"
   />
@@ -72,7 +70,6 @@ import { CkHistoryItem } from '@aleph-alpha/chat-kit';
   <CkHistoryItem
     title="Project Proposal Overview"
     meta-start="Today"
-    meta-end="Innsbruck"
     action-tooltip="More actions"
     is-active
   />
@@ -86,7 +83,6 @@ import { CkHistoryItem } from '@aleph-alpha/chat-kit';
   <CkHistoryItem
     title="Project Proposal Overview"
     meta-start="Today"
-    meta-end="Innsbruck"
     action-tooltip="More actions"
     :show-action-on-hover="false"
   />
@@ -108,7 +104,6 @@ import { CkHistoryItem } from '@aleph-alpha/chat-kit';
   <CkHistoryItem
     title="Project Proposal Overview"
     meta-start="Today"
-    meta-end="Innsbruck"
     action-popover
     action-aria-label="Chat options"
   >
@@ -182,7 +177,6 @@ export const AlwaysShowAction: Story = {
 export const NoMeta: Story = {
   args: {
     metaStart: '',
-    metaEnd: '',
   },
   render: renderStory,
   parameters: { docs: { source: { code: noMetaTemplateSource } } },

package/src/components/base/CkHistoryItem/CkHistoryItem.vue

@@ -122,11 +122,10 @@ const actionColumnClass = computed(() => [
  * underneath the icon.
  */
 const actionButtonClass = computed(() => [
-  'relative z-10 inline-flex size-8 shrink-0 items-center justify-center rounded-sm border border-transparent text-content-on-surface-primary outline-hidden transition-colors',
+  'relative z-10 inline-flex size-8 shrink-0 items-center justify-center rounded-sm border-0 text-content-on-surface-primary outline-hidden transition-colors',
   '[&_svg]:size-4 [&_svg]:shrink-0',
   'focus-visible:ring-0 focus-visible:outline-none',
-  pointerOnAction.value &&
-    'bg-background-surface-muted-subtle border-border-button-outlined',
+  pointerOnAction.value && 'bg-background-surface-muted-subtle',
 ]);
 
 // Popover panel surface is `background/surface/secondary` to match the

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

@@ -33,10 +33,14 @@ import { CkHistoryWrapper, CkHistoryItem } from '@aleph-alpha/chat-kit';
 
 <template>
   <CkHistoryWrapper>
-    <CkHistoryItem title="Project Proposal Overview" meta-start="Today" meta-end="Innsbruck" />
-    <CkHistoryItem title="Project Proposal Overview" meta-start="Today" meta-end="Innsbruck" is-active />
-    <CkHistoryItem title="Project Proposal Overview" meta-start="Today" meta-end="Innsbruck" />
-    <CkHistoryItem title="Project Proposal Overview" meta-start="Today" meta-end="Innsbruck" />
+    <CkHistoryItem title="Project Proposal Overview" meta-start="Today" is-active />
+    <CkHistoryItem title="Customer onboarding flow" meta-start="Yesterday" />
+    <CkHistoryItem title="Refactor notes" meta-start="2 days ago" />
+    <CkHistoryItem title="Quarterly review prep" meta-start="3 days ago" />
+    <CkHistoryItem title="Sprint retro notes" meta-start="4 days ago" />
+    <CkHistoryItem title="Travel plans 2026" meta-start="1 week ago" />
+    <CkHistoryItem title="API design review" meta-start="2 weeks ago" />
+    <CkHistoryItem title="Bug triage session" meta-start="3 weeks ago" />
   </CkHistoryWrapper>
 </template>`;
 
@@ -48,7 +52,10 @@ import { CkHistoryWrapper, CkHistoryItem } from '@aleph-alpha/chat-kit';
   <CkHistoryWrapper :with-gap="false">
     <CkHistoryItem title="Thread A" meta-start="Today" />
     <CkHistoryItem title="Thread B" meta-start="Yesterday" />
-    <CkHistoryItem title="Thread C" meta-start="Last week" />
+    <CkHistoryItem title="Thread C" meta-start="2 days ago" />
+    <CkHistoryItem title="Thread D" meta-start="3 days ago" />
+    <CkHistoryItem title="Thread E" meta-start="4 days ago" />
+    <CkHistoryItem title="Thread F" meta-start="1 week ago" />
   </CkHistoryWrapper>
 </template>`;
 
@@ -65,24 +72,15 @@ export const Default: Story = {
         {
           title: 'Project Proposal Overview',
           metaStart: 'Today',
-          metaEnd: 'Innsbruck',
-        },
-        {
-          title: 'Project Proposal Overview',
-          metaStart: 'Today',
-          metaEnd: 'Innsbruck',
           isActive: true,
         },
-        {
-          title: 'Project Proposal Overview',
-          metaStart: 'Today',
-          metaEnd: 'Innsbruck',
-        },
-        {
-          title: 'Project Proposal Overview',
-          metaStart: 'Today',
-          metaEnd: 'Innsbruck',
-        },
+        { title: 'Customer onboarding flow', metaStart: 'Yesterday' },
+        { title: 'Refactor notes', metaStart: '2 days ago' },
+        { title: 'Quarterly review prep', metaStart: '3 days ago' },
+        { title: 'Sprint retro notes', metaStart: '4 days ago' },
+        { title: 'Travel plans 2026', metaStart: '1 week ago' },
+        { title: 'API design review', metaStart: '2 weeks ago' },
+        { title: 'Bug triage session', metaStart: '3 weeks ago' },
       ];
 
       function handleActionClick() {
@@ -99,7 +97,6 @@ export const Default: Story = {
             :key="index"
             :title="item.title"
             :meta-start="item.metaStart"
-            :meta-end="item.metaEnd"
             :is-active="item.isActive"
             action-tooltip="More actions"
             @action-click="handleActionClick"
@@ -128,7 +125,10 @@ export const WithoutGap: Story = {
       const items = [
         { title: 'Thread A', metaStart: 'Today' },
         { title: 'Thread B', metaStart: 'Yesterday' },
-        { title: 'Thread C', metaStart: 'Last week' },
+        { title: 'Thread C', metaStart: '2 days ago' },
+        { title: 'Thread D', metaStart: '3 days ago' },
+        { title: 'Thread E', metaStart: '4 days ago' },
+        { title: 'Thread F', metaStart: '1 week ago' },
       ];
       return { args, items };
     },

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

@@ -132,56 +132,36 @@ describe('CkConversation', () => {
     });
 
     it('hides the icon area when no agentAvatarImage, no agentAvatarFallback, and no agent-message-icon slot', () => {
-      const { container } = render(CkConversation, {
+      render(CkConversation, {
         props: { messages: [agentMessage()] },
       });
 
-      const agentMessageEl = container.querySelector(
-        '.flex.w-full.items-start.gap-2',
-      );
-      expect(agentMessageEl).toBeInTheDocument();
       expect(
-        agentMessageEl?.querySelector(
-          '.flex.flex-shrink-0.items-center.justify-center',
-        ),
+        screen.queryByTestId('ck-agent-message-icon'),
       ).not.toBeInTheDocument();
     });
 
     it('shows the icon area when agentAvatarFallback is provided', () => {
-      const { container } = render(CkConversation, {
+      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();
+      expect(screen.getByTestId('ck-agent-message-icon')).toBeInTheDocument();
     });
 
     it('shows the icon area when agentAvatarImage URL is provided', () => {
-      const { container } = render(CkConversation, {
+      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();
+      expect(screen.getByTestId('ck-agent-message-icon')).toBeInTheDocument();
     });
 
     it('shows the icon area when agent-message-icon slot is provided', () => {
-      const { container } = render(CkConversation, {
+      render(CkConversation, {
         props: { messages: [agentMessage()] },
         slots: {
           'agent-message-icon': '<span data-testid="custom-icon">🤖</span>',
@@ -189,14 +169,7 @@ describe('CkConversation', () => {
       });
 
       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();
+      expect(screen.getByTestId('ck-agent-message-icon')).toBeInTheDocument();
     });
   });
 

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

@@ -170,12 +170,119 @@ describe('CkHistory', () => {
     expect(emitted().select).toBeUndefined();
   });
 
+  it('renders a relative time label under each row by default', () => {
+    const conversations = [
+      makeConversation({ id: 'c-1', updatedAt: NOW - 60 * 60 * 24 }),
+      makeConversation({ id: 'c-2', updatedAt: NOW - 60 * 60 * 24 * 3 }),
+    ];
+
+    render(CkHistory, {
+      props: {
+        conversations,
+        hrefResolver,
+        timeFormatter: (s: number) => {
+          const days = Math.round((NOW - s) / (60 * 60 * 24));
+          return days === 1 ? 'Yesterday' : `${days} days ago`;
+        },
+      },
+    });
+
+    expect(screen.getByText('Yesterday')).toBeInTheDocument();
+    expect(screen.getByText('3 days ago')).toBeInTheDocument();
+  });
+
+  it('hides the time label when timeFormatter returns an empty string', () => {
+    const conversations = [makeConversation({ id: 'c-1', updatedAt: NOW })];
+
+    const { container } = render(CkHistory, {
+      props: {
+        conversations,
+        hrefResolver,
+        timeFormatter: () => '',
+      },
+    });
+
+    const metaElements = container.querySelectorAll('.label-12-medium');
+    expect(metaElements).toHaveLength(0);
+  });
+
+  describe('collapsed limit / Show all', () => {
+    const manyConversations = Array.from({ length: 8 }, (_, i) =>
+      makeConversation({ id: `c-${i + 1}`, title: `Thread ${i + 1}` }),
+    );
+
+    it('shows only collapsedLimit rows and a "Show all" button when there are more conversations', () => {
+      render(CkHistory, {
+        props: {
+          conversations: manyConversations,
+          hrefResolver,
+          collapsedLimit: 5,
+        },
+      });
+
+      const links = screen.getAllByRole('link');
+      expect(links).toHaveLength(5);
+      expect(screen.getByTestId('ck-history-show-all')).toBeInTheDocument();
+    });
+
+    it('does not show the "Show all" button when conversations fit within the limit', () => {
+      render(CkHistory, {
+        props: {
+          conversations: manyConversations.slice(0, 3),
+          hrefResolver,
+          collapsedLimit: 5,
+        },
+      });
+
+      expect(
+        screen.queryByTestId('ck-history-show-all'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('reveals all conversations when "Show all" is clicked', async () => {
+      const user = userEvent.setup();
+
+      render(CkHistory, {
+        props: {
+          conversations: manyConversations,
+          hrefResolver,
+          collapsedLimit: 5,
+        },
+      });
+
+      expect(screen.getAllByRole('link')).toHaveLength(5);
+
+      await user.click(screen.getByTestId('ck-history-show-all'));
+
+      expect(screen.getAllByRole('link')).toHaveLength(8);
+      expect(
+        screen.queryByTestId('ck-history-show-all'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('shows all conversations when collapsedLimit is 0', () => {
+      render(CkHistory, {
+        props: {
+          conversations: manyConversations,
+          hrefResolver,
+          collapsedLimit: 0,
+        },
+      });
+
+      expect(screen.getAllByRole('link')).toHaveLength(8);
+      expect(
+        screen.queryByTestId('ck-history-show-all'),
+      ).not.toBeInTheDocument();
+    });
+  });
+
   describe('#item slot', () => {
     interface ItemSlotProps {
       conversation: Conversation;
       href: string;
       isActive: boolean;
       title: string;
+      time: string | undefined;
       select: (event: MouseEvent) => void;
       edit: () => void;
       delete: () => void;

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

@@ -35,14 +35,38 @@ const sampleConversations: Conversation[] = [
     id: 'c-5',
     title: 'Quarterly review prep',
     createdAt: NOW - ONE_DAY * 30,
-    updatedAt: NOW - ONE_DAY * 5,
+    updatedAt: NOW - ONE_DAY * 3,
   },
   {
     id: 'c-6',
     title: 'Travel plans 2026',
     createdAt: NOW - ONE_DAY * 60,
+    updatedAt: NOW - ONE_DAY * 4,
+  },
+  {
+    id: 'c-7',
+    title: 'Sprint retro notes',
+    createdAt: NOW - ONE_DAY * 20,
+    updatedAt: NOW - ONE_DAY * 5,
+  },
+  {
+    id: 'c-8',
+    title: 'API design review',
+    createdAt: NOW - ONE_DAY * 25,
+    updatedAt: NOW - ONE_DAY * 7,
+  },
+  {
+    id: 'c-9',
+    title: 'Bug triage session',
+    createdAt: NOW - ONE_DAY * 40,
     updatedAt: NOW - ONE_DAY * 14,
   },
+  {
+    id: 'c-10',
+    title: 'Team standup summary',
+    createdAt: NOW - ONE_DAY * 50,
+    updatedAt: NOW - ONE_DAY * 21,
+  },
 ];
 
 const defaultHrefResolver = (id: string) => `/chat/${id}`;
@@ -66,6 +90,8 @@ const meta: Meta<typeof CkHistory> = {
     activeId: { control: 'text' },
     showAction: { control: 'boolean' },
     showActionOnHover: { control: 'boolean' },
+    collapsedLimit: { control: 'number' },
+    maxHeight: { control: 'text' },
   },
 };
 
@@ -184,7 +210,7 @@ function onDelete(c: Conversation) { /* confirm + delete */ }
     @delete="onDelete"
   >
     <template
-      #item="{ conversation, isActive, title, edit, delete: del }"
+      #item="{ conversation, isActive, title, time, edit, delete: del }"
     >
       <RouterLink
         :to="{ name: 'chat', params: { id: conversation.id } }"
@@ -196,6 +222,7 @@ function onDelete(c: Conversation) { /* confirm + delete */ }
           :href="href"
           :is-active="isActive"
           :title="title"
+          :meta-start="time"
           action-popover
           @click="navigate"
         >
@@ -209,6 +236,22 @@ function onDelete(c: Conversation) { /* confirm + delete */ }
   </CkHistory>
 </template>`;
 
+const withoutTimeTemplateSource = `<script setup lang="ts">
+import { CkHistory, type Conversation } from '@aleph-alpha/chat-kit';
+
+const conversations: Conversation[] = [/* ... */];
+const hrefResolver = (id: string) => \`/chat/\${id}\`;
+</script>
+
+<template>
+  <CkHistory
+    :conversations="conversations"
+    :href-resolver="hrefResolver"
+    active-id="c-2"
+    :time-formatter="undefined"
+  />
+</template>`;
+
 const renderStory = (args: Story['args']) => ({
   components: { CkHistory },
   setup() {
@@ -329,13 +372,14 @@ export const WithCustomItem: Story = {
           @select="onSelect"
         >
           <template
-            #item="{ href, isActive, title, select, edit, delete: del }"
+            #item="{ href, isActive, title, time, select, edit, delete: del }"
           >
             <CkHistoryItem
               as="a"
               :href="href"
               :is-active="isActive"
               :title="title"
+              :meta-start="time"
               action-popover
               action-aria-label="Conversation options"
               @click="select($event)"
@@ -371,3 +415,47 @@ export const WithCustomItem: Story = {
     docs: { source: { code: withCustomItemTemplateSource } },
   },
 };
+
+/**
+ * Hides the relative time label by setting `time-formatter` to `undefined`.
+ * Rows display only the title (the pre-v1.14 default).
+ */
+export const WithoutTime: Story = {
+  args: {
+    conversations: sampleConversations,
+    hrefResolver: defaultHrefResolver,
+    activeId: 'c-2',
+    timeFormatter: undefined,
+  },
+  render: renderStory,
+  parameters: { docs: { source: { code: withoutTimeTemplateSource } } },
+};
+
+/**
+ * With 10 conversations and a `collapsedLimit` of 5, only the first 5 rows
+ * are shown initially. A "Show all" button at the bottom reveals the rest
+ * and makes the list scrollable (capped at `maxHeight`).
+ */
+export const CollapsedWithShowAll: Story = {
+  args: {
+    conversations: sampleConversations,
+    hrefResolver: defaultHrefResolver,
+    activeId: 'c-2',
+    collapsedLimit: 5,
+    maxHeight: '24rem',
+  },
+  render: renderStory,
+};
+
+/**
+ * All conversations visible without collapse — set `collapsedLimit` to `0`.
+ */
+export const NoCollapse: Story = {
+  args: {
+    conversations: sampleConversations,
+    hrefResolver: defaultHrefResolver,
+    activeId: 'c-2',
+    collapsedLimit: 0,
+  },
+  render: renderStory,
+};