@aleph-alpha/chat-kit 1.15.0 → 1.15.1

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/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,
+};

package/src/components/composed/CkHistory/CkHistory.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue';
 import {
   UiIcon,
   UiSidebarPopoverMenu,
@@ -7,6 +8,7 @@ import {
 import CkHistoryItem from '../../base/CkHistoryItem/CkHistoryItem.vue';
 import CkHistoryWrapper from '../../base/CkHistoryWrapper/CkHistoryWrapper.vue';
 import { useChatKitLabels } from '../../../handlers/useChatKitLabels';
+import { formatRelativeTime } from '../../../helpers/formatRelativeTime';
 import type { Conversation } from '../../../types';
 import type { CkHistoryEmits, CkHistoryProps } from './types';
 
@@ -16,6 +18,9 @@ const props = withDefaults(defineProps<CkHistoryProps>(), {
   activeId: undefined,
   showAction: true,
   showActionOnHover: true,
+  timeFormatter: formatRelativeTime,
+  collapsedLimit: 5,
+  maxHeight: undefined,
 });
 
 const emit = defineEmits<CkHistoryEmits>();
@@ -31,6 +36,8 @@ defineSlots<{
    *  - `href` — URL produced by `hrefResolver(conversation.id)`
    *  - `isActive` — whether this row matches `activeId`
    *  - `title` — resolved title (falls back to `historyItemUntitled` label)
+   *  - `time` — formatted relative time string from `timeFormatter`, or
+   *    `undefined` when no formatter is set
    *  - `select(event)` — RouterLink-style click guard: `preventDefault()`
    *    and emit `select` for plain left-clicks; ignores middle/modifier
    *    clicks so native browser affordances still work.
@@ -41,6 +48,7 @@ defineSlots<{
     href: string;
     isActive: boolean;
     title: string;
+    time: string | undefined;
     select: (event: MouseEvent) => void;
     edit: () => void;
     delete: () => void;
@@ -49,6 +57,23 @@ defineSlots<{
 
 const labels = useChatKitLabels();
 
+const isExpanded = ref(false);
+
+const canCollapse = computed(
+  () =>
+    props.collapsedLimit > 0 &&
+    props.conversations.length > props.collapsedLimit,
+);
+
+const visibleConversations = computed(() => {
+  if (!canCollapse.value || isExpanded.value) return props.conversations;
+  return props.conversations.slice(0, props.collapsedLimit);
+});
+
+function toggleExpanded() {
+  isExpanded.value = !isExpanded.value;
+}
+
 function hrefFor(c: Conversation) {
   return props.hrefResolver(c.id);
 }
@@ -58,6 +83,10 @@ function titleFor(c: Conversation) {
   return title ? title : labels.value.historyItemUntitled;
 }
 
+function timeFor(c: Conversation): string | undefined {
+  return props.timeFormatter?.(c.updatedAt);
+}
+
 /**
  * RouterLink-style click guard: only emit `select` for plain left-clicks.
  * Middle-click, modifier-clicks, and right-click fall through to the
@@ -74,53 +103,74 @@ function handleRowClick(c: Conversation, event: MouseEvent) {
 </script>
 
 <template>
-  <CkHistoryWrapper>
-    <template
-      v-for="conversation in props.conversations"
-      :key="conversation.id"
+  <div>
+    <CkHistoryWrapper
+      :class="isExpanded && props.maxHeight ? 'overflow-y-auto' : undefined"
+      :style="
+        isExpanded && props.maxHeight
+          ? { maxHeight: props.maxHeight }
+          : undefined
+      "
     >
-      <slot
-        name="item"
-        :conversation="conversation"
-        :href="hrefFor(conversation)"
-        :is-active="conversation.id === props.activeId"
-        :title="titleFor(conversation)"
-        :select="(event: MouseEvent) => handleRowClick(conversation, event)"
-        :edit="() => emit('edit', conversation)"
-        :delete="() => emit('delete', conversation)"
+      <template
+        v-for="conversation in visibleConversations"
+        :key="conversation.id"
       >
-        <CkHistoryItem
-          as="a"
+        <slot
+          name="item"
+          :conversation="conversation"
           :href="hrefFor(conversation)"
           :is-active="conversation.id === props.activeId"
           :title="titleFor(conversation)"
-          :show-action="props.showAction"
-          :show-action-on-hover="props.showActionOnHover"
-          :action-popover="props.showAction"
-          :action-aria-label="labels.historyItemActionAriaLabel"
-          @click="handleRowClick(conversation, $event)"
-          ><template #action-popover>
-            <UiSidebarPopoverMenu :show-footer-separator="false">
-              <UiSidebarPopoverMenuItem
-                :label="labels.historyItemEditAction"
-                @click="emit('edit', conversation)"
-              >
-                <template #icon>
-                  <UiIcon name="pencil" size="s" />
-                </template>
-              </UiSidebarPopoverMenuItem>
-              <UiSidebarPopoverMenuItem
-                :label="labels.historyItemDeleteAction"
-                @click="emit('delete', conversation)"
-              >
-                <template #icon>
-                  <UiIcon name="trash" size="s" />
-                </template>
-              </UiSidebarPopoverMenuItem>
-            </UiSidebarPopoverMenu>
-          </template>
-        </CkHistoryItem>
-      </slot>
-    </template>
-  </CkHistoryWrapper>
+          :time="timeFor(conversation)"
+          :select="(event: MouseEvent) => handleRowClick(conversation, event)"
+          :edit="() => emit('edit', conversation)"
+          :delete="() => emit('delete', conversation)"
+        >
+          <CkHistoryItem
+            as="a"
+            :href="hrefFor(conversation)"
+            :is-active="conversation.id === props.activeId"
+            :title="titleFor(conversation)"
+            :meta-start="timeFor(conversation)"
+            :show-action="props.showAction"
+            :show-action-on-hover="props.showActionOnHover"
+            :action-popover="props.showAction"
+            :action-aria-label="labels.historyItemActionAriaLabel"
+            @click="handleRowClick(conversation, $event)"
+            ><template #action-popover>
+              <UiSidebarPopoverMenu :show-footer-separator="false">
+                <UiSidebarPopoverMenuItem
+                  :label="labels.historyItemEditAction"
+                  @click="emit('edit', conversation)"
+                >
+                  <template #icon>
+                    <UiIcon name="pencil" size="s" />
+                  </template>
+                </UiSidebarPopoverMenuItem>
+                <UiSidebarPopoverMenuItem
+                  :label="labels.historyItemDeleteAction"
+                  @click="emit('delete', conversation)"
+                >
+                  <template #icon>
+                    <UiIcon name="trash" size="s" />
+                  </template>
+                </UiSidebarPopoverMenuItem>
+              </UiSidebarPopoverMenu>
+            </template>
+          </CkHistoryItem>
+        </slot>
+      </template>
+    </CkHistoryWrapper>
+
+    <button
+      v-if="canCollapse && !isExpanded"
+      type="button"
+      data-testid="ck-history-show-all"
+      class="mt-1 w-full rounded-lg px-2 py-2 text-center body-14-medium text-content-on-surface-muted transition-colors hover:bg-background-surface-muted-subtle"
+      @click="toggleExpanded"
+    >
+      {{ labels.historyShowAll }}
+    </button>
+  </div>
 </template>

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

@@ -50,6 +50,39 @@ export interface CkHistoryProps {
    * @default true
    */
   showActionOnHover?: boolean;
+  /**
+   * Formats a conversation's `updatedAt` timestamp (Unix seconds) into a
+   * human-readable relative time string displayed under the title.
+   *
+   * Defaults to the built-in `formatRelativeTime` which produces English
+   * labels like "Just now", "Yesterday", "3 days ago". Pass your own
+   * function for locale-aware formatting (e.g. via `Intl.RelativeTimeFormat`
+   * or your i18n library).
+   *
+   * To hide the time label entirely, pass `() => ''`.
+   *
+   * @default formatRelativeTime
+   */
+  timeFormatter?: (updatedAtSeconds: number) => string;
+  /**
+   * Maximum number of conversations shown in collapsed mode. When the
+   * array has more items than this limit a "Show all" button is rendered
+   * below the visible rows. Clicking it expands the list and makes it
+   * scrollable (capped at `maxHeight`).
+   *
+   * Set to `0` or `undefined` to disable collapsing — all conversations
+   * are shown and the list is always scrollable.
+   *
+   * @default 5
+   */
+  collapsedLimit?: number;
+  /**
+   * Maximum height (CSS value) of the list when expanded. Allows the list
+   * to scroll when conversations exceed the available space.
+   *
+   * @default undefined — no max-height constraint
+   */
+  maxHeight?: string;
 }
 
 /**

package/src/handlers/useChatKitLabels.spec.ts

@@ -60,6 +60,7 @@ describe('useChatKitLabels', () => {
       historyItemActionAriaLabel: 'Konversationsoptionen',
       historyItemEditAction: 'Bearbeiten',
       historyItemDeleteAction: 'Löschen',
+      historyShowAll: 'Alle anzeigen',
     });
 
     let result: ComputedRef<ChatKitLabels> | undefined;

package/src/handlers/useChatKitLabels.ts

@@ -77,6 +77,11 @@ export type ChatKitLabels = {
   historyItemEditAction: string;
   /** Label for the "Delete" action in the `CkHistory` row popover menu. */
   historyItemDeleteAction: string;
+  /**
+   * Label for the "Show all" button that appears when `collapsedLimit` is
+   * set and more conversations exist than the limit.
+   */
+  historyShowAll?: string;
 };
 
 /** English defaults used when no labels are provided by the consumer. */
@@ -106,6 +111,7 @@ export const defaultChatKitLabels: ChatKitLabels = {
   historyItemActionAriaLabel: 'Conversation options',
   historyItemEditAction: 'Edit',
   historyItemDeleteAction: 'Delete',
+  historyShowAll: 'Show all',
 };
 
 /** Vue injection key for ChatKit labels. */

package/src/helpers/formatRelativeTime.ts

@@ -0,0 +1,49 @@
+const MINUTE = 60;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
+
+/**
+ * Convert a Unix-seconds timestamp to a human-readable relative time string.
+ *
+ * Uses simple threshold-based bucketing (not `Intl.RelativeTimeFormat`) so the
+ * output is deterministic and easy to snapshot-test. Consumers who need
+ * locale-aware formatting can supply their own formatter via the
+ * `timeFormatter` prop on `CkHistory`.
+ */
+export function formatRelativeTime(
+  unixSeconds: number,
+  nowSeconds: number = Math.floor(Date.now() / 1000),
+): string {
+  const delta = Math.max(0, nowSeconds - unixSeconds);
+
+  if (delta < MINUTE) return 'Just now';
+  if (delta < HOUR) {
+    const mins = Math.floor(delta / MINUTE);
+    return mins === 1 ? '1 minute ago' : `${mins} minutes ago`;
+  }
+  if (delta < DAY) {
+    const hrs = Math.floor(delta / HOUR);
+    return hrs === 1 ? '1 hour ago' : `${hrs} hours ago`;
+  }
+  if (delta < 2 * DAY) return 'Yesterday';
+  if (delta < WEEK) {
+    const days = Math.floor(delta / DAY);
+    return `${days} days ago`;
+  }
+  if (delta < 2 * WEEK) return '1 week ago';
+  if (delta < MONTH) {
+    const weeks = Math.floor(delta / WEEK);
+    return `${weeks} weeks ago`;
+  }
+  if (delta < 2 * MONTH) return '1 month ago';
+  if (delta < YEAR) {
+    const months = Math.floor(delta / MONTH);
+    return `${months} months ago`;
+  }
+
+  const years = Math.floor(delta / YEAR);
+  return years === 1 ? '1 year ago' : `${years} years ago`;
+}

package/src/helpers/index.ts

@@ -1,4 +1,5 @@
 export * from './conversationTree';
+export * from './formatRelativeTime';
 export * from './generateId';
 export * from './secondsToDate';
 export * from './toError';

package/src/index.ts

@@ -106,6 +106,9 @@ export type {
   CkUserMessageProps,
 } from './components';
 
+// Helpers
+export { formatRelativeTime } from './helpers';
+
 // Shared Types
 export type {
   BaseMessage,