@aleph-alpha/chat-kit 1.14.0 → 1.15.1

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,