@aleph-alpha/chat-kit 5.2.0 → 5.4.0

package/src/components/base/CkConversationLayout/CkConversationLayout.vue

@@ -18,6 +18,11 @@ const isAutoScrollEnabled = ref(true);
 const hasBottomSpacer = ref(false);
 const spacerHeight = ref(0);
 
+// Whether there is scrollable content above / below the current viewport.
+// Drives the top / bottom fade overlays that hint at more content to scroll to.
+const showTopFade = ref(false);
+const showBottomFade = ref(false);
+
 let resizeObserver: ResizeObserver | null = null;
 
 onMounted(() => {
@@ -28,12 +33,14 @@ onMounted(() => {
       for (const entry of entries) {
         containerHeight.value = entry.contentRect.height;
       }
+      updateFades();
     });
     resizeObserver.observe(container);
 
     // Initially scroll to the bottom of the conversation without any spacer
     nextTick(() => {
       container.scrollTop = container.scrollHeight;
+      updateFades();
     });
   }
 });
@@ -60,6 +67,24 @@ function isFollowingContent(): boolean {
 
 function handleScroll(): void {
   isAutoScrollEnabled.value = isFollowingContent();
+  updateFades();
+}
+
+/**
+ * Update the visibility of the top / bottom fade overlays based on the current
+ * scroll position. The top fade appears once the user has scrolled away from
+ * the start; the bottom fade appears while there is still content below the
+ * viewport. When the content fits entirely, both fades stay hidden.
+ */
+function updateFades(): void {
+  const container = scrollContainerRef.value;
+  if (!container) return;
+
+  const { scrollTop, scrollHeight, clientHeight } = container;
+  const maxScroll = scrollHeight - clientHeight;
+
+  showTopFade.value = scrollTop > 1;
+  showBottomFade.value = scrollTop < maxScroll - 1;
 }
 
 /**
@@ -153,7 +178,10 @@ watch(
     if (newLen <= (oldLen ?? 0)) return;
     const lastMessage = props.messages[newLen - 1];
     if (lastMessage?.role === 'user') {
-      nextTick(() => scrollUserMessageToTop());
+      nextTick(() => {
+        scrollUserMessageToTop();
+        updateFades();
+      });
     }
   },
 );
@@ -171,6 +199,7 @@ watch(
         if (isAutoScrollEnabled.value) {
           scrollToEndOfContent();
         }
+        updateFades();
       });
     }
   },
@@ -179,29 +208,43 @@ watch(
 </script>
 
 <template>
-  <div
-    ref="scrollContainerRef"
-    class="relative flex flex-col gap-8 overflow-y-auto"
-    @scroll="handleScroll"
-  >
+  <div class="relative flex min-h-0 flex-col overflow-hidden">
+    <!-- Top fade: hints that there is more content above the viewport -->
     <div
-      v-for="message in messages"
-      :key="message.id"
-      :data-message-row="message.role"
-      class="min-w-0"
+      aria-hidden="true"
+      class="pointer-events-none absolute inset-x-0 top-0 z-10 h-8 bg-gradient-to-b from-background-surface-primary to-transparent transition-opacity duration-200"
+      :class="showTopFade ? 'opacity-100' : 'opacity-0'"
+    />
+    <div
+      ref="scrollContainerRef"
+      class="relative flex min-h-0 flex-1 flex-col gap-8 overflow-y-auto"
+      @scroll="handleScroll"
     >
-      <div v-if="message.role === 'user'" class="flex min-w-0 justify-end">
-        <slot name="user-message" :message="message" />
-      </div>
-      <div v-else class="flex min-w-0 justify-start">
-        <slot name="agent-message" :message="message" />
+      <div
+        v-for="message in messages"
+        :key="message.id"
+        :data-message-row="message.role"
+        class="min-w-0"
+      >
+        <div v-if="message.role === 'user'" class="flex min-w-0 justify-end">
+          <slot name="user-message" :message="message" />
+        </div>
+        <div v-else class="flex min-w-0 justify-start">
+          <slot name="agent-message" :message="message" />
+        </div>
       </div>
+      <!-- Bottom spacer: shrinks as agent content grows to keep viewport stable -->
+      <div
+        v-if="hasBottomSpacer"
+        aria-hidden="true"
+        :style="{ minHeight: `${spacerHeight}px` }"
+      />
     </div>
-    <!-- Bottom spacer: shrinks as agent content grows to keep viewport stable -->
+    <!-- Bottom fade: hints that there is more content below the viewport -->
     <div
-      v-if="hasBottomSpacer"
       aria-hidden="true"
-      :style="{ minHeight: `${spacerHeight}px` }"
+      class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8 bg-gradient-to-t from-background-surface-primary to-transparent transition-opacity duration-200"
+      :class="showBottomFade ? 'opacity-100' : 'opacity-0'"
     />
   </div>
 </template>

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

@@ -0,0 +1,53 @@
+import CkEditableUserMessage from './CkEditableUserMessage.vue';
+import { fireEvent, render, screen } from '@testing-library/vue';
+
+const FLOAT_ANCHOR_SELECTOR = '[data-slot="float-anchor"]';
+const EDIT_ACTION_NAME = 'Edit message';
+
+describe('CkEditableUserMessage', () => {
+  it('renders the message text inside a floating anchor', () => {
+    const { container } = render(CkEditableUserMessage, {
+      props: { message: 'Editable message' },
+    });
+
+    const anchor = container.querySelector(FLOAT_ANCHOR_SELECTOR);
+    expect(anchor).not.toBeNull();
+    expect(anchor).toHaveTextContent('Editable message');
+  });
+
+  it('forwards default slot content to the message', () => {
+    render(CkEditableUserMessage, {
+      props: { message: 'Fallback text' },
+      slots: { default: 'Custom slot content' },
+    });
+
+    expect(screen.getByText('Custom slot content')).toBeInTheDocument();
+    expect(screen.queryByText('Fallback text')).not.toBeInTheDocument();
+  });
+
+  it('does not render the edit action until opened', () => {
+    render(CkEditableUserMessage, { props: { message: 'Editable message' } });
+
+    expect(
+      screen.queryByRole('button', { name: EDIT_ACTION_NAME }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('emits `edit` when the edit action is activated', async () => {
+    const { container, emitted } = render(CkEditableUserMessage, {
+      props: { message: 'Editable message' },
+    });
+
+    const anchor = container.querySelector<HTMLElement>(FLOAT_ANCHOR_SELECTOR);
+    expect(anchor).not.toBeNull();
+    await fireEvent.focus(anchor!);
+
+    const editButton = await screen.findByRole('button', {
+      name: EDIT_ACTION_NAME,
+    });
+    await fireEvent.click(editButton);
+
+    expect(emitted()).toHaveProperty('edit');
+    expect(emitted().edit).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,53 @@
+import CkEditableUserMessage from './CkEditableUserMessage.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+const meta: Meta<typeof CkEditableUserMessage> = {
+  title: 'Base/CkEditableUserMessage',
+  component: CkEditableUserMessage,
+  tags: ['autodocs'],
+  argTypes: {
+    message: {
+      control: 'text',
+      description:
+        'The message text to display. Can also be provided via the default slot.',
+    },
+    collapsedLines: {
+      control: { type: 'number', min: 0 },
+      description:
+        'When > 0, clamp the message to this many lines with a "Show more" / "Show less" toggle. Forwarded to the underlying CkUserMessage.',
+    },
+  },
+  decorators: [
+    () => ({
+      template:
+        '<div style="display: flex; flex-direction: column; align-items: flex-end; width: 100%; padding-left: 64px;"><story /></div>',
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { CkEditableUserMessage } from '@aleph-alpha/chat-kit';
+
+function onEdit() {
+  // open your inline editor / start the edit flow
+}
+</script>
+
+<template>
+  <CkEditableUserMessage message="..." @edit="onEdit" />
+</template>`;
+
+/**
+ * Editable message. Hover or keyboard-focus the message to reveal a floating
+ * toolbar with an edit action; activating it emits `edit`. The consumer owns
+ * the editing flow (e.g. swapping in an inline editor).
+ */
+export const Default: Story = {
+  args: {
+    message: 'Summarize the Q3 revenue report and highlight the top risks.',
+  },
+  parameters: { docs: { source: { code: defaultTemplateSource } } },
+};

package/src/components/base/CkEditableUserMessage/CkEditableUserMessage.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useChatKitLabels } from '../../../handlers/useChatKitLabels';
+import { CkUserMessage } from '../CkUserMessage';
+import type {
+  CkEditableUserMessageEmits,
+  CkEditableUserMessageProps,
+} from './types';
+import {
+  UiFloatActionItems,
+  UiFloatActions,
+  UiIcon,
+} from '@aleph-alpha/ui-library';
+import { computed, useSlots } from 'vue';
+
+defineOptions({ name: 'CkEditableUserMessage' });
+
+withDefaults(defineProps<CkEditableUserMessageProps>(), {
+  message: undefined,
+  collapsedLines: 0,
+});
+
+const emit = defineEmits<CkEditableUserMessageEmits>();
+
+const slots = useSlots();
+
+const labels = useChatKitLabels();
+
+const actionsLabel = computed(() => labels.value.userMessageActions);
+const editActionLabel = computed(() => labels.value.userMessageEditAction);
+</script>
+
+<template>
+  <UiFloatActions
+    trigger="hover"
+    placement="left"
+    :offset="4"
+    class="max-w-full"
+  >
+    <template #container>
+      <CkUserMessage :message="message" :collapsed-lines="collapsedLines">
+        <!-- Only forward the default slot when the consumer actually provides
+             one, so an empty wrapper still falls back to the `message` prop. -->
+        <template v-if="slots.default" #default><slot /></template>
+      </CkUserMessage>
+    </template>
+    <template #action>
+      <UiFloatActionItems :aria-label="actionsLabel">
+        <UiFloatActionItems
+          type="button"
+          :aria-label="editActionLabel"
+          @click="emit('edit')"
+        >
+          <UiIcon name="pencil" :size="16" aria-hidden="true" />
+        </UiFloatActionItems>
+      </UiFloatActionItems>
+    </template>
+  </UiFloatActions>
+</template>

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

@@ -0,0 +1,5 @@
+export { default as CkEditableUserMessage } from './CkEditableUserMessage.vue';
+export type {
+  CkEditableUserMessageEmits,
+  CkEditableUserMessageProps,
+} from './types';

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

@@ -0,0 +1,30 @@
+/**
+ * Editable variant of {@link CkUserMessage}. Wraps the plain user message in a
+ * floating actions toolbar (via `UiFloatActions`) that reveals an edit button on
+ * hover and keyboard focus. Activating it emits the `edit` event; the consumer
+ * owns the actual editing flow (e.g. swapping in an inline editor).
+ *
+ * Use this instead of `CkUserMessage` only when a turn needs the edit
+ * affordance — plain, non-interactive turns should keep using `CkUserMessage`.
+ *
+ * @category Messages
+ * @useCases edit user message, revise prompt, editable conversation turn, message hover actions
+ * @keywords user, message, edit, editable, chat, conversation, turn
+ * @related CkUserMessage, CkAgentMessage, CkConversation
+ */
+export interface CkEditableUserMessageProps {
+  /** Text content of the user message. Rendered inside the bubble when no default slot is provided. */
+  message?: string;
+  /**
+   * When greater than `0`, collapse the message to at most this many lines with
+   * a fade and a "Show more" / "Show less" toggle. Forwarded to the underlying
+   * {@link CkUserMessage}. Omit or pass `0` (the default) to disable clamping.
+   */
+  collapsedLines?: number;
+}
+
+/** Events emitted by {@link CkEditableUserMessage}. */
+export interface CkEditableUserMessageEmits {
+  /** Emitted when the edit action is activated. */
+  edit: [];
+}

package/src/components/base/CkHistoryWrapper/CkHistoryWrapper.vue

@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<CkHistoryWrapperProps>(), {
 
 const attrs = useAttrs();
 
-const baseClass = 'flex w-full min-w-0 flex-col p-2';
+const baseClass = 'flex w-full min-w-0 flex-col py-2';
 
 const rootClass = computed(() => {
   const consumerClass =

package/src/components/base/CkUserMessage/CkUserMessage.vue

@@ -1,17 +1,7 @@
 <script setup lang="ts">
-import {
-  defaultChatKitLabels,
-  useChatKitLabels,
-} from '../../../handlers/useChatKitLabels';
+import { useChatKitLabels } from '../../../handlers/useChatKitLabels';
 import type { CkUserMessageProps } from './types';
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 
 defineOptions({ name: 'CkUserMessage' });
 
@@ -22,17 +12,8 @@ const props = withDefaults(defineProps<CkUserMessageProps>(), {
 
 const labels = useChatKitLabels();
 
-// Resolution order: injected label, English default.
-const showMoreLabel = computed(
-  () =>
-    labels.value.userMessageShowMore ??
-    defaultChatKitLabels.userMessageShowMore!,
-);
-const showLessLabel = computed(
-  () =>
-    labels.value.userMessageShowLess ??
-    defaultChatKitLabels.userMessageShowLess!,
-);
+const showMoreLabel = computed(() => labels.value.userMessageShowMore);
+const showLessLabel = computed(() => labels.value.userMessageShowLess);
 
 /** Clamping is opt-in: only active when a positive `collapsedLines` is given. */
 const clampEnabled = computed(() => (props.collapsedLines ?? 0) > 0);
@@ -53,13 +34,21 @@ function toggle() {
 
 let resizeObserver: ResizeObserver | undefined;
 
-onMounted(() => {
-  nextTick(measure);
-  if (typeof ResizeObserver !== 'undefined') {
-    resizeObserver = new ResizeObserver(() => measure());
-    if (contentRef.value) resizeObserver.observe(contentRef.value);
-  }
-});
+function observeContent(el: HTMLElement | null) {
+  if (typeof ResizeObserver === 'undefined') return;
+  if (!resizeObserver) resizeObserver = new ResizeObserver(() => measure());
+  resizeObserver.disconnect();
+  if (el) resizeObserver.observe(el);
+}
+
+watch(
+  contentRef,
+  (el) => {
+    observeContent(el);
+    nextTick(measure);
+  },
+  { flush: 'post' },
+);
 
 onBeforeUnmount(() => resizeObserver?.disconnect());
 

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

@@ -4,10 +4,13 @@
  * default slot for custom inline content. When `collapsedLines` is set, long
  * messages are clamped with a fade and a "Show more" / "Show less" toggle.
  *
+ * For an editable variant (hover/focus edit toolbar), see
+ * {@link CkEditableUserMessage}, which wraps this component.
+ *
  * @category Messages
  * @useCases render user message, conversation turn from user, chat input preview, right-aligned message, collapsible long message
  * @keywords user, message, chat, conversation, turn, collapse, show more
- * @related CkAgentMessage, CkConversation
+ * @related CkEditableUserMessage, CkAgentMessage, CkConversation
  */
 export interface CkUserMessageProps {
   /** Text content of the user message. Rendered inside the bubble when no default slot is provided. */

package/src/components/base/index.ts

@@ -73,3 +73,8 @@ export { CkPromptInputDisclaimer } from './CkPromptInputDisclaimer';
 export { CkRegenerateMessageButton } from './CkRegenerateMessageButton';
 export { CkUserMessage } from './CkUserMessage';
 export type { CkUserMessageProps } from './CkUserMessage';
+export { CkEditableUserMessage } from './CkEditableUserMessage';
+export type {
+  CkEditableUserMessageEmits,
+  CkEditableUserMessageProps,
+} from './CkEditableUserMessage';

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

@@ -433,4 +433,34 @@ describe('CkHistory', () => {
       expect(emitted().select).toBeUndefined();
     });
   });
+
+  describe('contentClass', () => {
+    it('applies contentClass to the inner history wrapper', () => {
+      const { container } = render(CkHistory, {
+        props: {
+          conversations: [makeConversation({ id: 'c-1' })],
+          hrefResolver,
+          contentClass: 'px-2 custom-content',
+        },
+      });
+
+      const wrapper = container.querySelector('[data-slot="chat-history"]');
+      expect(wrapper).toBeTruthy();
+      expect(wrapper?.className).toMatch(/px-2/);
+      expect(wrapper?.className).toMatch(/custom-content/);
+    });
+
+    it('does not add any content class to the wrapper by default', () => {
+      const { container } = render(CkHistory, {
+        props: {
+          conversations: [makeConversation({ id: 'c-1' })],
+          hrefResolver,
+        },
+      });
+
+      const wrapper = container.querySelector('[data-slot="chat-history"]');
+      expect(wrapper).toBeTruthy();
+      expect(wrapper?.className).not.toMatch(/px-2/);
+    });
+  });
 });

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

@@ -22,6 +22,7 @@ const props = withDefaults(defineProps<CkHistoryProps>(), {
   timeFormatter: formatRelativeTime,
   collapsedLimit: 5,
   maxHeight: undefined,
+  contentClass: undefined,
 });
 
 const emit = defineEmits<CkHistoryEmits>();
@@ -106,7 +107,10 @@ function handleRowClick(c: Conversation, event: MouseEvent) {
 <template>
   <div>
     <CkHistoryWrapper
-      :class="isExpanded && props.maxHeight ? 'overflow-y-auto' : undefined"
+      :class="[
+        isExpanded && props.maxHeight ? 'overflow-y-auto' : undefined,
+        props.contentClass,
+      ]"
       :style="
         isExpanded && props.maxHeight
           ? { maxHeight: props.maxHeight }

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

@@ -70,7 +70,7 @@ export interface CkHistoryProps {
    * 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
+   * Set to `0` to disable collapsing — all conversations
    * are shown and the list is always scrollable.
    *
    * @default 5
@@ -83,6 +83,14 @@ export interface CkHistoryProps {
    * @default undefined — no max-height constraint
    */
   maxHeight?: string;
+  /**
+   * Additional CSS class(es) applied to the inner `CkHistoryWrapper` that
+   * wraps the conversation rows. Useful for adjusting padding, spacing, or
+   * other layout concerns of the list container.
+   *
+   * @default undefined
+   */
+  contentClass?: string;
 }
 
 /**

package/src/components/index.ts

@@ -25,6 +25,7 @@ export {
   CkSendIcon,
   CkStopIcon,
   CkUserMessage,
+  CkEditableUserMessage,
 } from './base';
 export type {
   CkAgentMessageHeaderProps,
@@ -61,6 +62,8 @@ export type {
   CkModelSelectorEmits,
   CkPromptMenuButtonProps,
   CkUserMessageProps,
+  CkEditableUserMessageProps,
+  CkEditableUserMessageEmits,
 } from './base';
 
 // Composed (pattern) components

package/src/handlers/useChatKitLabels.ts

@@ -71,6 +71,10 @@ export type ChatKitLabels = {
   userMessageShowMore?: string;
   /** Label for the `CkUserMessage` toggle when the message is expanded. */
   userMessageShowLess?: string;
+  /** Accessible label for the `CkEditableUserMessage` floating actions toolbar. */
+  userMessageActions?: string;
+  /** Accessible label / tooltip for the edit action in the `CkEditableUserMessage` toolbar. */
+  userMessageEditAction?: string;
   /** Accessible label for the `CkModelSelector` trigger button. */
   modelSelectorAriaLabel?: string;
   /** Accessible label for the `CkModelSelector` options list. */
@@ -133,6 +137,8 @@ export const defaultChatKitLabels: ChatKitLabels = {
   feedbackDialogSubmitLabel: 'Submit',
   userMessageShowMore: 'Show more',
   userMessageShowLess: 'Show less',
+  userMessageActions: 'Message actions',
+  userMessageEditAction: 'Edit message',
   modelSelectorAriaLabel: 'Select model',
   modelSelectorListAriaLabel: 'Models',
   modelSelectorPlaceholder: 'Select model',

package/src/index.ts

@@ -89,6 +89,7 @@ export {
   CkSendIcon,
   CkStopIcon,
   CkUserMessage,
+  CkEditableUserMessage,
 } from './components';
 export type {
   CkAgentMessageHeaderProps,
@@ -128,6 +129,8 @@ export type {
   CkModelSelectorEmits,
   CkPromptMenuButtonProps,
   CkUserMessageProps,
+  CkEditableUserMessageProps,
+  CkEditableUserMessageEmits,
 } from './components';
 
 // Helpers