Fix chat timeline row height estimation

apps/web/src/components/chat/MessagesTimeline.logic.ts

@@ -1,3 +1,8 @@
+import { type MessageId } from "@t3tools/contracts";
+
+import { type TimelineEntry } from "../../session-logic";
+import { type TurnDiffSummary } from "../../types";
+
 export interface TimelineDurationMessage {
   id: string;
   role: "user" | "assistant" | "system";
@@ -27,3 +32,108 @@ export function computeMessageDurationStart(
 export function normalizeCompactToolLabel(value: string): string {
   return value.replace(/\s+(?:complete|completed)\s*$/i, "").trim();
 }
+
+type TimelineMessage = Extract<TimelineEntry, { kind: "message" }>["message"];
+type TimelineProposedPlan = Extract<TimelineEntry, { kind: "proposed-plan" }>["proposedPlan"];
+type TimelineWorkEntry = Extract<TimelineEntry, { kind: "work" }>["entry"];
+
+export type MessagesTimelineRow =
+  | {
+      kind: "work";
+      id: string;
+      createdAt: string;
+      groupedEntries: TimelineWorkEntry[];
+    }
+  | {
+      kind: "message";
+      id: string;
+      createdAt: string;
+      message: TimelineMessage;
+      assistantDiffSummary: TurnDiffSummary | null;
+      durationStart: string;
+      showCompletionDivider: boolean;
+    }
+  | {
+      kind: "proposed-plan";
+      id: string;
+      createdAt: string;
+      proposedPlan: TimelineProposedPlan;
+    }
+  | { kind: "working"; id: string; createdAt: string | null };
+
+export function resolveMessagesTimelineRows(options: {
+  timelineEntries: TimelineEntry[];
+  completionDividerBeforeEntryId: string | null;
+  turnDiffSummaryByAssistantMessageId: Map<MessageId, TurnDiffSummary>;
+  isWorking: boolean;
+  activeTurnStartedAt: string | null;
+}): MessagesTimelineRow[] {
+  const nextRows: MessagesTimelineRow[] = [];
+  const durationStartByMessageId = computeMessageDurationStart(
+    options.timelineEntries.flatMap((entry) => (entry.kind === "message" ? [entry.message] : [])),
+  );
+
+  for (let index = 0; index < options.timelineEntries.length; index += 1) {
+    const timelineEntry = options.timelineEntries[index];
+    if (!timelineEntry) {
+      continue;
+    }
+
+    if (timelineEntry.kind === "work") {
+      const groupedEntries = [timelineEntry.entry];
+      let cursor = index + 1;
+      while (cursor < options.timelineEntries.length) {
+        const nextEntry = options.timelineEntries[cursor];
+        if (!nextEntry || nextEntry.kind !== "work") {
+          break;
+        }
+        groupedEntries.push(nextEntry.entry);
+        cursor += 1;
+      }
+      nextRows.push({
+        kind: "work",
+        id: timelineEntry.id,
+        createdAt: timelineEntry.createdAt,
+        groupedEntries,
+      });
+      index = cursor - 1;
+      continue;
+    }
+
+    if (timelineEntry.kind === "proposed-plan") {
+      nextRows.push({
+        kind: "proposed-plan",
+        id: timelineEntry.id,
+        createdAt: timelineEntry.createdAt,
+        proposedPlan: timelineEntry.proposedPlan,
+      });
+      continue;
+    }
+
+    nextRows.push({
+      kind: "message",
+      id: timelineEntry.id,
+      createdAt: timelineEntry.createdAt,
+      message: timelineEntry.message,
+      assistantDiffSummary:
+        timelineEntry.message.role === "assistant"
+          ? (options.turnDiffSummaryByAssistantMessageId.get(timelineEntry.message.id) ?? null)
+          : null,
+      durationStart:
+        durationStartByMessageId.get(timelineEntry.message.id) ?? timelineEntry.message.createdAt,
+      showCompletionDivider:
+        timelineEntry.message.role === "assistant" &&
+        options.completionDividerBeforeEntryId === timelineEntry.id,
+    });
+  }
+
+  if (options.isWorking) {
+    nextRows.push({
+      kind: "working",
+      id: "working-indicator-row",
+      createdAt: options.activeTurnStartedAt,
+    });
+  }
+
+  return nextRows;
+}