@aleph-alpha/chat-kit 5.5.0 → 5.7.0

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

@@ -7,9 +7,15 @@ const props = defineProps<{
   messages: T[];
 }>();
 
-defineSlots<{
+const slots = defineSlots<{
   'user-message': (props: { message: T }) => void;
   'agent-message': (props: { message: T }) => void;
+  /**
+   * Extra content appended after the last message, inside the scroll flow and
+   * aligned like an agent turn. Use for a trailing element that continues the
+   * thread but isn't a tree message (e.g. an in-progress preference comparison).
+   */
+  'thread-footer': () => void;
 }>();
 
 const scrollContainerRef = ref<HTMLElement | null>(null);
@@ -188,12 +194,23 @@ watch(
 
 // Follow agent content: handles both new agent messages and streaming updates.
 // First shrinks the spacer to match the growing content, then scrolls when it overflows.
+//
+// The trailing content can also be the `thread-footer` slot (e.g. streaming
+// preference-comparison lanes), which continues the thread after a trunk whose
+// last message is the shared *user* prompt. That case must run the same
+// spacer-shrink/follow pass — otherwise the full-viewport spacer set by
+// `scrollUserMessageToTop` is never reduced, leaving a viewport-sized gap that
+// pushes the prompt and answers out of view. `updateSpacerHeight` already
+// measures the footer (it carries `data-message-row="agent"`, so it is the
+// `lastRow`); it just needs to be invoked here. The watch fires on every tree
+// mutation because the messages array is recreated per projection.
 watch(
   () => props.messages,
   () => {
     if (props.messages.length === 0) return;
     const lastMessage = props.messages[props.messages.length - 1];
-    if (lastMessage && lastMessage.role !== 'user') {
+    const hasFooter = Boolean(slots['thread-footer']);
+    if ((lastMessage && lastMessage.role !== 'user') || hasFooter) {
       nextTick(() => {
         updateSpacerHeight();
         if (isAutoScrollEnabled.value) {
@@ -233,6 +250,15 @@ watch(
           <slot name="agent-message" :message="message" />
         </div>
       </div>
+      <!-- Trailing non-message content (e.g. an open comparison), rendered as
+           the continuation of the thread inside the scroll flow. -->
+      <div
+        v-if="$slots['thread-footer']"
+        data-message-row="agent"
+        class="flex min-w-0 justify-start"
+      >
+        <slot name="thread-footer" />
+      </div>
       <!-- Bottom spacer: shrinks as agent content grows to keep viewport stable -->
       <div
         v-if="hasBottomSpacer"

package/src/components/composed/CkConversation/CkConversation.vue

@@ -58,6 +58,12 @@ const slots = defineSlots<{
     code: string;
     language: string;
   }) => void;
+  /**
+   * Trailing content appended after the last message, inside the scroll flow
+   * and aligned like an agent turn — e.g. an in-progress preference comparison
+   * that continues the thread but isn't a tree message.
+   */
+  'thread-footer': () => void;
 }>();
 
 const labels = useChatKitLabels();
@@ -229,5 +235,9 @@ function hasHeaderActivity(message: BaseMessage): boolean {
         </CkAgentMessage>
       </slot>
     </template>
+
+    <template v-if="$slots['thread-footer']" #thread-footer>
+      <slot name="thread-footer" />
+    </template>
   </CkConversationLayout>
 </template>

package/src/composables/useConversations.spec.ts

@@ -80,6 +80,7 @@ describe('useConversations', () => {
         title: 'hey again',
         createdAt: new Date(1_777_456_746 * 1000),
         updatedAt: new Date(1_777_456_750 * 1000),
+        metadata: { title: 'hey again' },
       });
     });
 
@@ -290,6 +291,7 @@ describe('useConversations', () => {
         title: 'far away',
         createdAt: new Date(1_777_456_700 * 1000),
         updatedAt: new Date(1_777_456_701 * 1000),
+        metadata: { title: 'far away' },
       });
     });
 

package/src/composables/useConversations.ts

@@ -332,6 +332,7 @@ function mapConversation(raw: RawConversation): ConversationSummary {
     title: raw.metadata?.title ?? '',
     createdAt: secondsToDate(raw.created_at),
     updatedAt: secondsToDate(raw.updated_at),
+    metadata: raw.metadata ?? null,
   };
 }
 

package/src/handlers/useMessageHandler.ts

@@ -4,12 +4,15 @@ import {
   createEmptyTree,
   cutBranchAfter as treeCutBranchAfter,
   cutBranchAt as treeCutBranchAt,
-  getLinearPath,
+  markComparison as treeMarkComparison,
   navigate as treeNavigate,
+  projectActivePath,
   updateNode,
   updateNodeId,
+  voteComparison as treeVoteComparison,
 } from '../helpers';
 import type {
+  ActiveComparison,
   BaseMessage,
   ConversationTree,
   MessageContent,
@@ -24,10 +27,20 @@ export const useMessageHandler = () => {
   const tree = reactive<ConversationTree>(createEmptyTree());
   const currentUserMessage = ref('');
 
-  const messages = computed<BaseMessage[]>(() => getLinearPath(tree));
+  // One walk produces the linear trunk and (at most) one active comparison, so
+  // the two projections can never drift.
+  const projection = computed(() => projectActivePath(tree));
+  const messages = computed<BaseMessage[]>(() => projection.value.trunk);
+  const activeComparison = computed<ActiveComparison | null>(
+    () => projection.value.activeComparison,
+  );
 
   const currentLeafId = computed<string | null>(() => {
-    const list = messages.value;
+    // No single leaf while a comparison is open at the tail — sending is gated
+    // on `activeComparison` and "continue with winner" passes an explicit
+    // parentId (the winner branch).
+    if (projection.value.activeComparison) return null;
+    const list = projection.value.trunk;
     return list.length > 0 ? list[list.length - 1].id : null;
   });
 
@@ -114,10 +127,18 @@ export const useMessageHandler = () => {
     status: MessageStatus;
     metadata?: MessageMetadata;
     parentId?: string;
+    comparing?: boolean;
   }) {
     const existing = tree.nodes[message.id];
 
     if (existing) {
+      // `parentId` is ignored for an already-present node (it is never
+      // re-linked), so resolve it only to mark a comparison — and use the node's
+      // *actual* parent, so a stale/unknown `parentId` on the patch is a safe
+      // no-op rather than an `Unknown parent message id` throw.
+      if (message.comparing && existing.parentId) {
+        treeMarkComparison(tree, existing.parentId);
+      }
       updateNode(tree, message.id, {
         content: message.content,
         role: message.role,
@@ -127,9 +148,13 @@ export const useMessageHandler = () => {
           : {}),
       });
     } else {
+      const parentId = resolveParentId(message.parentId);
+      if (message.comparing && parentId) {
+        treeMarkComparison(tree, parentId);
+      }
       const node: TreeMessage = {
         id: message.id,
-        parentId: resolveParentId(message.parentId),
+        parentId,
         childrenIds: [],
         activeChildIndex: 0,
         role: message.role,
@@ -187,9 +212,13 @@ export const useMessageHandler = () => {
   /**
    * Drop every message that comes after `messageId` on every branch beneath
    * it. The target message is kept and becomes the new leaf of its branch.
+   *
+   * Pass `keepChildId` (a direct child of `messageId`) to spare one branch: it
+   * survives as the target's sole, active child while its siblings are dropped
+   * — e.g. keeping a chosen comparison winner and discarding the rest.
    */
-  function cutBranchAfter(messageId: string) {
-    treeCutBranchAfter(tree, messageId);
+  function cutBranchAfter(messageId: string, keepChildId?: string) {
+    treeCutBranchAfter(tree, messageId, keepChildId);
   }
 
   /**
@@ -205,8 +234,18 @@ export const useMessageHandler = () => {
     return readonly(tree);
   }
 
+  /**
+   * Record the winner of the comparison rooted at `parentId` and reveal it.
+   * Does not collapse the comparison — it stays a labelled, revealed view
+   * until the user continues past the winner (appends a turn under it).
+   */
+  function voteComparison(parentId: string, winnerBranchId: string) {
+    treeVoteComparison(tree, parentId, winnerBranchId);
+  }
+
   return {
     messages: messages as Ref<BaseMessage[]>,
+    activeComparison,
     currentUserMessage: readonly(currentUserMessage),
     currentLeafId,
     updateMessage,
@@ -220,6 +259,7 @@ export const useMessageHandler = () => {
     navigate,
     cutBranchAfter,
     cutBranchAt,
+    voteComparison,
     getTree,
   };
 };

package/src/helpers/comparison.spec.ts

@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  addNode,
+  createEmptyTree,
+  markComparison,
+  projectActivePath,
+  voteComparison,
+} from './conversationTree';
+import type { ConversationTree, MessageContent, TreeMessage } from '../types';
+
+function node(
+  id: string,
+  parentId: string | null,
+  role: TreeMessage['role'],
+  text = id,
+): TreeMessage {
+  const content: MessageContent[] = [
+    { type: 'text', id: `${id}-t`, text, status: 'completed' },
+  ];
+  return {
+    id,
+    parentId,
+    childrenIds: [],
+    activeChildIndex: 0,
+    role,
+    content,
+    status: 'completed',
+    createdAt: new Date(0),
+  };
+}
+
+/** user U with two assistant children A/B, marked as a comparison. */
+function comparisonTree(): ConversationTree {
+  const tree = createEmptyTree();
+  addNode(tree, node('U', null, 'user', 'prompt'));
+  addNode(tree, node('A', 'U', 'assistant', 'answer A'), { activate: false });
+  addNode(tree, node('B', 'U', 'assistant', 'answer B'), { activate: false });
+  markComparison(tree, 'U');
+  return tree;
+}
+
+describe('projectActivePath', () => {
+  it('surfaces an unresolved comparison as blind lanes at the trunk tail', () => {
+    const { trunk, activeComparison } = projectActivePath(comparisonTree());
+
+    expect(trunk.map((m) => m.id)).toEqual(['U']);
+    expect(activeComparison).not.toBeNull();
+    expect(activeComparison!.resolved).toBe(false);
+    expect(activeComparison!.winnerBranchId).toBeNull();
+    expect(activeComparison!.lanes.map((l) => l.branchId)).toEqual(['A', 'B']);
+    expect(activeComparison!.lanes[0]!.path.map((m) => m.id)).toEqual(['A']);
+  });
+
+  it('keeps the comparison active + revealed after a vote (not yet continued)', () => {
+    const tree = comparisonTree();
+    voteComparison(tree, 'U', 'A');
+
+    const { trunk, activeComparison } = projectActivePath(tree);
+    expect(trunk.map((m) => m.id)).toEqual(['U']);
+    expect(activeComparison).not.toBeNull();
+    expect(activeComparison!.resolved).toBe(true);
+    expect(activeComparison!.winnerBranchId).toBe('A');
+  });
+
+  it('collapses to a linear winner chain once the winner is continued', () => {
+    const tree = comparisonTree();
+    voteComparison(tree, 'U', 'A');
+    // Continue past the winner: a follow-up turn under A.
+    addNode(tree, node('U2', 'A', 'user', 'follow up'));
+
+    const { trunk, activeComparison } = projectActivePath(tree);
+    expect(activeComparison).toBeNull();
+    // History: the fork is transparent, trunk flows through the winner.
+    expect(trunk.map((m) => m.id)).toEqual(['U', 'A', 'U2']);
+  });
+
+  it('does not treat ordinary regenerate siblings as a comparison', () => {
+    const tree = createEmptyTree();
+    addNode(tree, node('U', null, 'user'));
+    addNode(tree, node('A1', 'U', 'assistant'));
+    addNode(tree, node('A2', 'U', 'assistant')); // regenerate: latest active
+    const { trunk, activeComparison } = projectActivePath(tree);
+    expect(activeComparison).toBeNull();
+    expect(trunk.map((m) => m.id)).toEqual(['U', 'A2']);
+  });
+});
+
+describe('addNode activate flag', () => {
+  it('does not move activeChildIndex when activate:false', () => {
+    const tree = createEmptyTree();
+    addNode(tree, node('U', null, 'user'));
+    addNode(tree, node('A', 'U', 'assistant'), { activate: false });
+    addNode(tree, node('B', 'U', 'assistant'), { activate: false });
+    expect(tree.nodes['U']!.activeChildIndex).toBe(0);
+    expect(tree.nodes['U']!.childrenIds).toEqual(['A', 'B']);
+  });
+});
+
+describe('voteComparison', () => {
+  it('records the winner and points activeChildIndex at it', () => {
+    const tree = comparisonTree();
+    voteComparison(tree, 'U', 'B');
+    expect(tree.nodes['U']!.comparisonWinnerId).toBe('B');
+    expect(tree.nodes['U']!.activeChildIndex).toBe(1);
+    expect(tree.nodes['U']!.comparing).toBe(true); // stays a comparison
+  });
+
+  it('is a no-op for an unknown winner id', () => {
+    const tree = comparisonTree();
+    voteComparison(tree, 'U', 'nope');
+    expect(tree.nodes['U']!.comparisonWinnerId).toBeUndefined();
+  });
+});

package/src/helpers/conversationTree.spec.ts

@@ -518,6 +518,67 @@ describe('cutBranchAfter', () => {
 
     expect(Object.keys(tree.nodes).sort()).toEqual(before);
   });
+
+  it('clears comparison state on the target — no children left to compare', () => {
+    const tree = makeBranchingTree();
+    tree.nodes.u2.comparing = true;
+    tree.nodes.u2.comparisonWinnerId = 'a2';
+
+    cutBranchAfter(tree, 'u2');
+
+    expect(tree.nodes.u2.comparing).toBeUndefined();
+    expect(tree.nodes.u2.comparisonWinnerId).toBeUndefined();
+  });
+
+  it('spares the exempted child and makes it the sole active child', () => {
+    const tree = makeBranchingTree();
+    // u2 has children [a2, a3]; keep a3.
+    cutBranchAfter(tree, 'u2', 'a3');
+
+    expect(tree.nodes.a2).toBeUndefined();
+    expect(tree.nodes.a3).toBeDefined();
+    expect(tree.nodes.u2.childrenIds).toEqual(['a3']);
+    expect(tree.nodes.u2.activeChildIndex).toBe(0);
+    expect(getLinearPath(tree).map((m) => m.id)).toEqual([
+      'u1',
+      'a1',
+      'u2',
+      'a3',
+    ]);
+  });
+
+  it('keeps the exempted child subtree intact', () => {
+    const tree = makeBranchingTree();
+    // Give a3 a follow-up so we can confirm the whole branch survives.
+    addNode(tree, makeTreeMessage({ id: 'u4', parentId: 'a3', role: 'user' }));
+
+    cutBranchAfter(tree, 'u2', 'a3');
+
+    expect(tree.nodes.a3).toBeDefined();
+    expect(tree.nodes.u4).toBeDefined();
+  });
+
+  it('clears comparison state even when a child is spared (single lane left)', () => {
+    const tree = makeBranchingTree();
+    tree.nodes.u2.comparing = true;
+    tree.nodes.u2.comparisonWinnerId = 'a3';
+
+    cutBranchAfter(tree, 'u2', 'a3');
+
+    expect(tree.nodes.u2.childrenIds).toEqual(['a3']);
+    expect(tree.nodes.u2.comparing).toBeUndefined();
+    expect(tree.nodes.u2.comparisonWinnerId).toBeUndefined();
+  });
+
+  it('ignores an unknown or non-child keepChildId and removes every branch', () => {
+    const tree = makeBranchingTree();
+
+    cutBranchAfter(tree, 'u2', 'nonexistent');
+
+    expect(tree.nodes.a2).toBeUndefined();
+    expect(tree.nodes.a3).toBeUndefined();
+    expect(tree.nodes.u2.childrenIds).toEqual([]);
+  });
 });
 
 describe('cutBranchAt', () => {
@@ -637,6 +698,43 @@ describe('cutBranchAt', () => {
 
     expect(Object.keys(tree.nodes).sort()).toEqual(before);
   });
+
+  it('clears the parent comparison when fewer than two lanes remain', () => {
+    const tree = makeThreeSiblingTree();
+    tree.nodes.p.comparing = true;
+    // Down to [cA] after removing cB and cC: nothing left to compare.
+    cutBranchAt(tree, 'cB');
+    cutBranchAt(tree, 'cC');
+
+    expect(tree.nodes.p.childrenIds).toEqual(['cA']);
+    expect(tree.nodes.p.comparing).toBeUndefined();
+    expect(tree.nodes.p.comparisonWinnerId).toBeUndefined();
+  });
+
+  it('drops the dangling winner when the winning lane is removed but others remain', () => {
+    const tree = makeThreeSiblingTree();
+    tree.nodes.p.comparing = true;
+    tree.nodes.p.comparisonWinnerId = 'cA';
+
+    cutBranchAt(tree, 'cA');
+
+    // Still a comparison (cB, cC remain) but the recorded vote is gone.
+    expect(tree.nodes.p.childrenIds).toEqual(['cB', 'cC']);
+    expect(tree.nodes.p.comparing).toBe(true);
+    expect(tree.nodes.p.comparisonWinnerId).toBeUndefined();
+  });
+
+  it('keeps the comparison and winner when a losing lane is removed', () => {
+    const tree = makeThreeSiblingTree();
+    tree.nodes.p.comparing = true;
+    tree.nodes.p.comparisonWinnerId = 'cA';
+
+    cutBranchAt(tree, 'cB');
+
+    expect(tree.nodes.p.childrenIds).toEqual(['cA', 'cC']);
+    expect(tree.nodes.p.comparing).toBe(true);
+    expect(tree.nodes.p.comparisonWinnerId).toBe('cA');
+  });
 });
 
 describe('integration: full branching scenario', () => {