@lvce-editor/chat-debug-view 10.13.0 → 10.16.0

package/dist/chatDebugViewWorkerMain.js

@@ -2232,6 +2232,10 @@ const getEventsWithTime = events => {
   });
 };
 
+const clamp$1 = (value, minimum, maximum) => {
+  return Math.max(minimum, Math.min(value, maximum));
+};
+
 const parseTimelineSeconds = value => {
   const trimmed = value.trim();
   if (!trimmed) {
@@ -2260,8 +2264,10 @@ const getNormalizedRange = (durationSeconds, startValue, endValue) => {
   }
   const rawStart = parsedStart ?? 0;
   const rawEnd = parsedEnd ?? durationSeconds;
-  const normalizedStart = Math.max(0, Math.min(durationSeconds, Math.min(rawStart, rawEnd)));
-  const normalizedEnd = Math.max(0, Math.min(durationSeconds, Math.max(rawStart, rawEnd)));
+  const rangeStart = Math.min(rawStart, rawEnd);
+  const rangeEnd = Math.max(rawStart, rawEnd);
+  const normalizedStart = clamp$1(rangeStart, 0, durationSeconds);
+  const normalizedEnd = clamp$1(rangeEnd, 0, durationSeconds);
   return {
     endSeconds: roundSeconds(normalizedEnd),
     hasSelection: true,
@@ -2460,18 +2466,6 @@ const diff2 = uid => {
   return diff(oldState, newState);
 };
 
-const getSelectedDetailTab = detailTabs => {
-  const selectedDetailTab = detailTabs.find(detailTab => detailTab.isSelected);
-  if (selectedDetailTab) {
-    return selectedDetailTab.name;
-  }
-  const responseTab = detailTabs.find(detailTab => detailTab.name === Response$1);
-  if (responseTab) {
-    return responseTab.name;
-  }
-  return detailTabs[0]?.name ?? Response$1;
-};
-
 const filterEventsByTimelineRange = (events, startValue, endValue) => {
   const eventsWithTime = getEventsWithTime(events);
   if (eventsWithTime.length === 0) {
@@ -2873,15 +2867,38 @@ const sortEventsByTableColumn = (events, sortColumn, sortDescending) => {
   return sortableEvents.toSorted(compareEntries).map(item => item.event);
 };
 
-const getCurrentEvents$2 = state => {
+const getCurrentEvents$1 = state => {
   const eventCategoryFilters = getSelectedEventCategoryFilters(state.categoryFilters);
   const filteredEvents = getFilteredEvents(state.events, state.filterValue, eventCategoryFilters, state.showInputEvents, state.showResponsePartEvents, state.showEventStreamFinishedEvents);
   const timelineEvents = filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
   return sortEventsByTableColumn(timelineEvents, state.sortColumn, state.sortDescending);
 };
 
-const loadSelectedEvent = async (_databaseName, _dataBaseVersion, _eventStoreName, sessionId, _sessionIdIndexName, eventId, type) => {
-  return loadSelectedEvent$1(sessionId, eventId, type);
+const getCurrentEvents = state => getCurrentEvents$1(state);
+
+const getSelectedDetailTab = detailTabs => {
+  const selectedDetailTab = detailTabs.find(detailTab => detailTab.isSelected);
+  if (selectedDetailTab) {
+    return selectedDetailTab.name;
+  }
+  const responseTab = detailTabs.find(detailTab => detailTab.name === Response$1);
+  if (responseTab) {
+    return responseTab.name;
+  }
+  return detailTabs[0]?.name ?? Response$1;
+};
+
+const loadSelectedEvent = async (_databaseName, _dataBaseVersion, _eventStoreName, sessionId, _sessionIdIndexName, eventId, type, endEventId) => {
+  const raw = await loadSelectedEvent$1(sessionId, eventId, type);
+  if (endEventId && endEventId !== -1) {
+    const end = await loadSelectedEvent$1(sessionId, endEventId, type);
+    // @ts-ignore
+    return {
+      ...raw,
+      endValue: end
+    };
+  }
+  return raw;
 };
 
 const mergeSelectedEventDetails = (selectedEvent, selectedEventDetails) => {
@@ -2971,7 +2988,7 @@ const getScrollBarOffset = (deltaY, maxDeltaY, tableBodyHeight, scrollBarHeight)
   return Math.round(deltaY / maxDeltaY * (tableBodyHeight - scrollBarHeight));
 };
 const applyVirtualTableState = state => {
-  const currentEvents = getCurrentEvents$2(state);
+  const currentEvents = getCurrentEvents$1(state);
   const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
   const deltaY = clampTableDeltaY(state.tableDeltaY, currentEvents.length, tableBodyHeight);
   const minLineY = Math.floor(deltaY / devtoolsTableRowHeight);
@@ -2994,7 +3011,7 @@ const withSelectedEventVisible = state => {
   if (state.selectedEventIndex === null || state.selectedEventIndex < 0) {
     return applyVirtualTableState(state);
   }
-  const currentEvents = getCurrentEvents$2(state);
+  const currentEvents = getCurrentEvents$1(state);
   const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
   const visibleRowCount = getVisibleRowCount(tableBodyHeight);
   if (visibleRowCount === 0) {
@@ -3011,10 +3028,11 @@ const withSelectedEventVisible = state => {
   return applyVirtualTableState(state);
 };
 
-const svgWidthRegex = /\bwidth=["']([\d.]+)(?:px)?["']/i;
-const svgHeightRegex = /\bheight=["']([\d.]+)(?:px)?["']/i;
-const svgViewBoxRegex = /\bviewBox=["'][^"']*?([\d.]+)\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)["']/i;
-const getBlob = event => {
+const getAttachmentImagePreviewAltText = event => {
+  return typeof event.name === 'string' && event.name ? event.name : 'image preview';
+};
+
+const getAttachmentImagePreviewBlob = event => {
   const {
     blob
   } = event;
@@ -3023,24 +3041,37 @@ const getBlob = event => {
   }
   return undefined;
 };
-const getMimeType = event => {
+
+const getAttachmentImagePreviewMimeType = event => {
   return typeof event.mimeType === 'string' ? event.mimeType : undefined;
 };
-const getAltText = event => {
-  return typeof event.name === 'string' && event.name ? event.name : 'image preview';
-};
-const isImageMimeType = mimeType => {
-  return typeof mimeType === 'string' && mimeType.startsWith('image/');
-};
+
 const formatImageSize = size => {
   if (size < 1024) {
     return `${size} B`;
   }
   return `${(size / 1024).toFixed(1)} kB`;
 };
+
 const formatImageStats = (width, height, size) => {
   return `${width} × ${height} px · ${formatImageSize(size)}`;
 };
+
+const getRasterImageStats = async blob => {
+  if (typeof createImageBitmap !== 'function') {
+    throw new TypeError('image bitmap decoder is not available');
+  }
+  const bitmap = await createImageBitmap(blob);
+  try {
+    return formatImageStats(bitmap.width, bitmap.height, blob.size);
+  } finally {
+    bitmap.close?.();
+  }
+};
+
+const svgWidthRegex = /\bwidth=["']([\d.]+)(?:px)?["']/i;
+const svgHeightRegex = /\bheight=["']([\d.]+)(?:px)?["']/i;
+const svgViewBoxRegex = /\bviewBox=["'][^"']*?([\d.]+)\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)["']/i;
 const getSvgImageStats = async blob => {
   const text = await blob.text();
   const widthMatch = text.match(svgWidthRegex);
@@ -3054,27 +3085,7 @@ const getSvgImageStats = async blob => {
   }
   return undefined;
 };
-const readBlobAsPreviewUrl = blob => {
-  if (typeof FileReaderSync === 'function') {
-    const reader = new FileReaderSync();
-    return reader.readAsDataURL(blob);
-  }
-  if (typeof URL.createObjectURL === 'function') {
-    return URL.createObjectURL(blob);
-  }
-  throw new Error('image preview reader is not available');
-};
-const getRasterImageStats = async blob => {
-  if (typeof createImageBitmap !== 'function') {
-    throw new TypeError('image bitmap decoder is not available');
-  }
-  const bitmap = await createImageBitmap(blob);
-  try {
-    return formatImageStats(bitmap.width, bitmap.height, blob.size);
-  } finally {
-    bitmap.close?.();
-  }
-};
+
 const getImageStats = async (blob, mimeType) => {
   if (mimeType === 'image/svg+xml') {
     const svgStats = await getSvgImageStats(blob);
@@ -3085,19 +3096,35 @@ const getImageStats = async (blob, mimeType) => {
   }
   return getRasterImageStats(blob);
 };
+
+const isImageMimeType = mimeType => {
+  return typeof mimeType === 'string' && mimeType.startsWith('image/');
+};
+
+const readBlobAsPreviewUrl = blob => {
+  if (typeof FileReaderSync === 'function') {
+    const reader = new FileReaderSync();
+    return reader.readAsDataURL(blob);
+  }
+  if (typeof URL.createObjectURL === 'function') {
+    return URL.createObjectURL(blob);
+  }
+  throw new Error('image preview reader is not available');
+};
+
 const getAttachmentImagePreview = async event => {
   if (event.type !== 'chat-attachment-added' && event.type !== 'chat-attachment-removed') {
     return undefined;
   }
-  const blob = getBlob(event);
-  const mimeType = getMimeType(event);
+  const blob = getAttachmentImagePreviewBlob(event);
+  const mimeType = getAttachmentImagePreviewMimeType(event);
   if (!blob || !isImageMimeType(mimeType)) {
     return undefined;
   }
   try {
     const stats = await getImageStats(blob, mimeType);
     return {
-      alt: getAltText(event),
+      alt: getAttachmentImagePreviewAltText(event),
       previewType: 'image',
       src: readBlobAsPreviewUrl(blob),
       stats
@@ -3129,11 +3156,7 @@ const withPreparedSelectedEventPreview = async event => {
   return setSelectedEventPreview(event, preview);
 };
 
-const selectEventAtIndexDependencies = {
-  loadSelectedEvent: loadSelectedEvent
-};
-const getCurrentEvents$1 = state => getCurrentEvents$2(state);
-const selectEventAtIndex = async (state, selectedEventIndex, dependencies = selectEventAtIndexDependencies) => {
+const selectEventAtIndex = async (state, selectedEventIndex) => {
   const {
     databaseName,
     dataBaseVersion,
@@ -3161,7 +3184,9 @@ const selectEventAtIndex = async (state, selectedEventIndex, dependencies = sele
       selectedEventIndex
     };
   }
-  const selectedEventDetails = await dependencies.loadSelectedEvent(databaseName, dataBaseVersion, eventStoreName, sessionId, sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
+  const selectedEventDetails = await loadSelectedEvent(databaseName, dataBaseVersion, eventStoreName, sessionId, sessionIdIndexName, selectedEvent.eventId, selectedEvent.type,
+  // @ts-ignore
+  selectedEvent['eventEndId'] || 0);
   const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
   return withSelectedEventVisible({
     ...state,
@@ -3178,7 +3203,7 @@ const selectEventAtIndex = async (state, selectedEventIndex, dependencies = sele
 };
 
 const focusIndex = async (state, index) => {
-  const currentEvents = getCurrentEvents$1(state);
+  const currentEvents = getCurrentEvents(state);
   if (currentEvents.length === 0 || state.selectedEventIndex === index) {
     return state;
   }
@@ -3268,7 +3293,10 @@ const getMenuEntriesTableHeader = state => {
 
 const MenuChatDebugTableHeader = 2189;
 const handleHeaderContextMenu = async (state, eventX, eventY) => {
-  await showContextMenu2(state.uid, MenuChatDebugTableHeader, eventX, eventY, {
+  const {
+    uid
+  } = state;
+  await showContextMenu2(uid, MenuChatDebugTableHeader, eventX, eventY, {
     menuId: MenuChatDebugTableHeader
   });
   return state;
@@ -3354,6 +3382,7 @@ const toPrettyEvents = rawEvents => {
       const response = map[item.requestId];
       if (response) {
         pretty.push({
+          eventEndId: response.eventId,
           eventId: item.eventId,
           type: 'ai-request-response'
         });
@@ -3567,7 +3596,7 @@ const restoreSelectedEvent = async state => {
       selectedEventIndex: null
     };
   }
-  const currentEvents = getCurrentEvents$2(state);
+  const currentEvents = getCurrentEvents$1(state);
   const selectedEventIndex = currentEvents.findIndex(event => event.eventId === state.selectedEventId);
   if (selectedEventIndex === -1) {
     return {
@@ -3727,8 +3756,6 @@ const handleEscape = state => {
   return state;
 };
 
-const getCurrentEvents = state => getCurrentEvents$2(state);
-
 const getEventIndexByStableId$1 = (events, event) => {
   return events.findIndex(candidate => candidate.eventId === event.eventId);
 };
@@ -3798,9 +3825,6 @@ const handleEventCategoryFilter$1 = (state, value, ctrlKey = false, metaKey = fa
   return withPreservedSelection$1(state, nextState);
 };
 
-const handleEventRowClickDependencies = {
-  loadSelectedEvent: loadSelectedEvent
-};
 const isPrimaryButton = button => {
   return button === 0;
 };
@@ -3812,7 +3836,7 @@ const handleEventRowClick = async (state, index, button = 0) => {
   if (actual === -1) {
     return state;
   }
-  return selectEventAtIndex(state, actual, handleEventRowClickDependencies);
+  return selectEventAtIndex(state, actual);
 };
 
 const handleEventRowClickAt = async (state, eventX, eventY, button = 0) => {
@@ -3847,7 +3871,7 @@ const getSelectedEventIndex = state => {
   if (selectedEventIndex === null) {
     return null;
   }
-  const filteredEvents = getCurrentEvents$2(state);
+  const filteredEvents = getCurrentEvents$1(state);
   const selectedEvent = filteredEvents[selectedEventIndex];
   if (!selectedEvent) {
     return null;
@@ -3865,12 +3889,12 @@ const getPreservedSelectedEventIndex = (oldState, newState) => {
   if (selectedEventIndex === null) {
     return null;
   }
-  const oldFilteredEvents = getCurrentEvents$2(oldState);
+  const oldFilteredEvents = getCurrentEvents$1(oldState);
   const selectedEvent = oldFilteredEvents[selectedEventIndex];
   if (!selectedEvent) {
     return null;
   }
-  const newFilteredEvents = getCurrentEvents$2(newState);
+  const newFilteredEvents = getCurrentEvents$1(newState);
   const newIndex = getEventIndexByStableId(newFilteredEvents, selectedEvent);
   if (newIndex === -1) {
     return null;
@@ -4472,16 +4496,22 @@ const handlePreviewTextScrollBarPointerDown = (state, eventY) => {
 };
 
 const handlePreviewTextScrollBarPointerMove = (state, eventY) => {
-  if (!state.previewTextScrollBarPointerActive) {
+  const {
+    previewTextDeltaY,
+    previewTextScrollBarHandleOffset,
+    previewTextScrollBarPointerActive,
+    selectedEvent
+  } = state;
+  if (!previewTextScrollBarPointerActive) {
     return state;
   }
   const viewportHeight = getPreviewTextViewportHeight(state);
-  const virtualization = getPreviewVirtualizationState(state.selectedEvent, viewportHeight, state.previewTextDeltaY);
+  const virtualization = getPreviewVirtualizationState(selectedEvent, viewportHeight, previewTextDeltaY);
   if (viewportHeight === 0 || virtualization.scrollBarHeight === 0) {
     return state;
   }
   const relativeY = eventY - getPreviewTextBodyY(state);
-  const nextHandleTop = Math.max(0, Math.min(viewportHeight - virtualization.scrollBarHeight, relativeY - state.previewTextScrollBarHandleOffset));
+  const nextHandleTop = Math.max(0, Math.min(viewportHeight - virtualization.scrollBarHeight, relativeY - previewTextScrollBarHandleOffset));
   const percent = nextHandleTop / Math.max(1, viewportHeight - virtualization.scrollBarHeight);
   const nextState = setPreviewTextDeltaY(state, percent * virtualization.maxDeltaY);
   return {
@@ -4502,7 +4532,10 @@ const handlePreviewTextScrollBarPointerUp = state => {
 };
 
 const handlePreviewTextWheel = (state, deltaY) => {
-  return setPreviewTextDeltaY(state, state.previewTextDeltaY + deltaY);
+  const {
+    previewTextDeltaY
+  } = state;
+  return setPreviewTextDeltaY(state, previewTextDeltaY + deltaY);
 };
 
 const handleRootContextMenu = state => {
@@ -4649,7 +4682,7 @@ const getHandleOffsetAndPercent = (tableBodyHeight, scrollBarHeight, relativeY)
   };
 };
 const handleTableScrollBarPointerDown = (state, eventY) => {
-  const currentEvents = getCurrentEvents$2(state);
+  const currentEvents = getCurrentEvents$1(state);
   const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
   const scrollBarHeight = getScrollBarHeight(currentEvents.length, tableBodyHeight);
   if (tableBodyHeight === 0 || scrollBarHeight === 0) {
@@ -4673,7 +4706,7 @@ const handleTableScrollBarPointerMove = (state, eventY) => {
   if (!state.tableScrollBarPointerActive) {
     return state;
   }
-  const currentEvents = getCurrentEvents$2(state);
+  const currentEvents = getCurrentEvents$1(state);
   const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
   const scrollBarHeight = getScrollBarHeight(currentEvents.length, tableBodyHeight);
   if (tableBodyHeight === 0 || scrollBarHeight === 0) {
@@ -5041,7 +5074,7 @@ const getDetailsLineNumberWidth = state => {
 const getCss = state => {
   const hasSelectedEvent = !!state.selectedEvent;
   const tableWidth = hasSelectedEvent ? clampTableWidth(state, state.tableWidth) : getMainWidth(state);
-  const currentEvents = getCurrentEvents$2(state);
+  const currentEvents = getCurrentEvents$1(state);
   const tableBodyHeight = getTableBodyHeight(state, currentEvents.length);
   const scrollBarHeight = getScrollBarHeight(currentEvents.length, tableBodyHeight);
   const maxDeltaY = getMaxDeltaY(currentEvents.length, tableBodyHeight);
@@ -5782,6 +5815,7 @@ const getFilterInputDom = (filterValue, useDevtoolsLayout) => {
   };
 };
 
+const selectedClassName = mergeClassNames(ChatDebugViewQuickFilterPill, ChatDebugViewQuickFilterPillSelected);
 const getQuickFilterDom = categoryFilter => {
   const {
     isSelected,
@@ -5791,7 +5825,7 @@ const getQuickFilterDom = categoryFilter => {
   return [{
     ariaSelected: isSelected,
     childCount: 1,
-    className: mergeClassNames(ChatDebugViewQuickFilterPill, isSelected ? ChatDebugViewQuickFilterPillSelected : ''),
+    className: isSelected ? selectedClassName : ChatDebugViewQuickFilterPill,
     name,
     onClick: HandleEventCategoryFilter,
     role: Option,
@@ -5841,6 +5875,19 @@ const getDebugViewTopDom = (filterValue, useDevtoolsLayout, categoryFilters) =>
   }, getFilterInputDom(filterValue, false), ...refreshButtonDom];
 };
 
+const createDevtoolsRows = (events, selectedEventIndex, startIndex = 0) => {
+  return events.map((event, index) => {
+    const actualIndex = startIndex + index;
+    return {
+      event,
+      index: actualIndex,
+      isErrorStatus: hasErrorStatus(event),
+      isEven: actualIndex % 2 === 1,
+      isSelected: selectedEventIndex === actualIndex
+    };
+  });
+};
+
 const getNextSiblingIndex$2 = (nodes, index) => {
   let nextSiblingIndex = index + 1;
   const childCount = nodes[index]?.childCount || 0;
@@ -6910,12 +6957,15 @@ const getTextNode = (value, showLineNumbers = true, cursor = null, tokenSegments
   return getEditorDom(lineData, showLineNumbers, cursor, showLineNumbers ? HandlePreviewTextPointerDown : undefined);
 };
 
+const getTextEvent = (previewEvent, selectedEvent, previewTextCursor, virtualization) => {
+  const isInvalidImageMessage = previewEvent === ImageCouldNotBeLoaded;
+  const isChatMessageUpdatedPreview = !!selectedEvent && isChatMessageUpdatedEvent(selectedEvent);
+  const showLineNumbers = !isInvalidImageMessage && !isChatMessageUpdatedPreview;
+  return getTextNode(previewEvent, showLineNumbers, showLineNumbers ? previewTextCursor ?? null : null, undefined, virtualization);
+};
 const getPreviewEventNodes = (previewEvent, selectedEvent, previewTextCursor, virtualization) => {
   if (typeof previewEvent === 'string') {
-    const isInvalidImageMessage = previewEvent === ImageCouldNotBeLoaded;
-    const isChatMessageUpdatedPreview = !!selectedEvent && isChatMessageUpdatedEvent(selectedEvent);
-    const showLineNumbers = !isInvalidImageMessage && !isChatMessageUpdatedPreview;
-    return getTextNode(previewEvent, showLineNumbers, showLineNumbers ? previewTextCursor ?? null : null, undefined, virtualization);
+    return getTextEvent(previewEvent, selectedEvent, previewTextCursor, virtualization);
   }
   if (isWriteFilePreview(previewEvent)) {
     const language = getLanguageFromFileExtension(previewEvent.uri);
@@ -6991,13 +7041,6 @@ const getStartText = event => {
   return getTimestampText(event.started ?? event.startTime ?? event.startTimestamp ?? event.timestamp);
 };
 
-const getTimingPreviewSegments = event => {
-  return [{
-    endPercent: 100,
-    label: getDurationText(event),
-    startPercent: 0
-  }];
-};
 const getTimingPreviewSegmentNodes = segments => {
   return [{
     childCount: segments.length,
@@ -7013,6 +7056,15 @@ const getTimingPreviewSegmentNodes = segments => {
     }, text(segment.label)];
   })];
 };
+
+const getTimingPreviewSegments = event => {
+  return [{
+    endPercent: 100,
+    label: getDurationText(event),
+    startPercent: 0
+  }];
+};
+
 const getTimingPreviewDom = event => {
   const segments = getTimingPreviewSegments(event);
   return [{
@@ -7074,27 +7126,30 @@ const getTimingContentNodes = (responseEventNodes, selectedEvent) => {
   return getTimingDetailsDom(selectedEvent);
 };
 
-const getTokenUsageDetailsDom = event => {
+const getRowViewModels = event => {
   const usageDetails = getTokenUsageDetails(event);
   if (!usageDetails) {
     return [];
   }
-  const rows = [];
-  let rowCount = 0;
-  if (usageDetails.inputTokens !== undefined) {
-    rows.push(...getTimingRowDom(inputTokens(), String(usageDetails.inputTokens)));
-    rowCount++;
-  }
-  if (usageDetails.outputTokens !== undefined) {
-    rows.push(...getTimingRowDom(outputTokens(), String(usageDetails.outputTokens)));
-    rowCount++;
-  }
-  if (usageDetails.cachedTokens !== undefined) {
-    rows.push(...getTimingRowDom(cachedTokens(), String(usageDetails.cachedTokens)));
-    rowCount++;
+  return [{
+    key: inputTokens(),
+    value: usageDetails.inputTokens
+  }, {
+    key: outputTokens(),
+    value: usageDetails.outputTokens
+  }, {
+    key: cachedTokens(),
+    value: usageDetails.cachedTokens
+  }].filter(row => row.value !== undefined);
+};
+const getTokenUsageDetailsDom = event => {
+  const rowViewModels = getRowViewModels(event);
+  if (rowViewModels.length === 0) {
+    return [];
   }
+  const rows = rowViewModels.flatMap(row => getTimingRowDom(row.key, String(row.value)));
   return [{
-    childCount: rowCount,
+    childCount: rowViewModels.length,
     className: ChatDebugViewTiming,
     type: Div
   }, ...rows];
@@ -7161,52 +7216,51 @@ const getEventTableMethodLabel = event => {
   return '';
 };
 
+const getTableCellDom = (column, event, isErrorStatus) => {
+  switch (column) {
+    case Duration:
+      return [{
+        childCount: 1,
+        className: mergeClassNames(TableCell, ChatDebugViewCellDuration),
+        type: Td
+      }, text(getEventTableDurationText(event))];
+    case Method:
+      return [{
+        childCount: 1,
+        className: TableCell,
+        type: Td
+      }, text(getEventTableMethodLabel(event))];
+    case Status$1:
+      return [{
+        childCount: 1,
+        className: mergeClassNames(TableCell, isErrorStatus ? ChatDebugViewCellStatusError : ''),
+        type: Td
+      }, text(getStatusText(event))];
+    case Type:
+      return [{
+        childCount: 1,
+        className: TableCell,
+        type: Td
+      }, text(getEventTableTypeLabel(event))];
+    default:
+      return [];
+  }
+};
 const getRowCellNodes = (event, isErrorStatus, visibleTableColumns) => {
   const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns);
-  return orderedVisibleTableColumns.flatMap((column, index) => {
-    switch (column) {
-      case Duration:
-        return [{
-          childCount: 1,
-          className: mergeClassNames(TableCell, ChatDebugViewCellDuration),
-          type: Td
-        }, text(getEventTableDurationText(event))];
-      case Method:
-        return [{
-          childCount: 1,
-          className: TableCell,
-          type: Td
-        }, text(getEventTableMethodLabel(event))];
-      case Status$1:
-        return [{
-          childCount: 1,
-          className: mergeClassNames(TableCell, isErrorStatus ? ChatDebugViewCellStatusError : ''),
-          type: Td
-        }, text(getStatusText(event))];
-      case Type:
-        return [{
-          childCount: 1,
-          className: TableCell,
-          type: Td
-        }, text(getEventTableTypeLabel(event))];
-      default:
-        return [];
-    }
+  return orderedVisibleTableColumns.flatMap(column => {
+    return getTableCellDom(column, event, isErrorStatus);
   });
 };
 
-const getDevtoolsRows = (events, selectedEventIndex, visibleTableColumns = defaultVisibleTableColumns, startIndex = 0) => {
-  return events.flatMap((event, i) => {
-    const actualIndex = startIndex + i;
-    const isEvenRow = actualIndex % 2 === 1;
-    const rowClassName = isEvenRow ? TableRowEven : TableRowOdd;
-    const isSelected = selectedEventIndex === actualIndex;
-    const isErrorStatus = hasErrorStatus(event);
-    const rowCellNodes = getRowCellNodes(event, isErrorStatus, visibleTableColumns);
+const getDevtoolsRows = (rows, visibleTableColumns = defaultVisibleTableColumns) => {
+  return rows.flatMap(row => {
+    const rowClassName = row.isEven ? TableRowEven : TableRowOdd;
+    const rowCellNodes = getRowCellNodes(row.event, row.isErrorStatus, visibleTableColumns);
     return [{
       childCount: visibleTableColumns.length,
-      className: mergeClassNames(TableRow, rowClassName, isSelected ? TableRowSelected : ''),
-      'data-index': `${actualIndex}`,
+      className: mergeClassNames(TableRow, rowClassName, row.isSelected ? TableRowSelected : ''),
+      'data-index': `${row.index}`,
       type: Tr
     }, ...rowCellNodes];
   });
@@ -7529,6 +7583,20 @@ const formatPercent = value => {
   return `${Number(value.toFixed(3))}%`;
 };
 
+const startHandle = {
+  childCount: 0,
+  className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionHandleStart, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerStart),
+  name: Start,
+  role: None,
+  type: Button$1
+};
+const endHandle = {
+  childCount: 0,
+  className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionHandleEnd, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerEnd),
+  name: End,
+  role: None,
+  type: Button$1
+};
 const getSelectionNodesDom = (hasSelection, selectionStartPercent, selectionEndPercent) => {
   if (!hasSelection || selectionStartPercent === null || selectionEndPercent === null) {
     return [];
@@ -7538,19 +7606,7 @@ const getSelectionNodesDom = (hasSelection, selectionStartPercent, selectionEndP
     className: ChatDebugViewTimelineSelectionRange,
     style: `left:${formatPercent(selectionStartPercent)};width:${formatPercent(selectionEndPercent - selectionStartPercent)};`,
     type: Div
-  }, {
-    childCount: 0,
-    className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionHandleStart, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerStart),
-    name: Start,
-    role: None,
-    type: Button$1
-  }, {
-    childCount: 0,
-    className: mergeClassNames(ChatDebugViewTimelineSelectionHandle, ChatDebugViewTimelineSelectionHandleEnd, ChatDebugViewTimelineSelectionMarker, ChatDebugViewTimelineSelectionMarkerEnd),
-    name: End,
-    role: None,
-    type: Button$1
-  }];
+  }, startHandle, endHandle];
 };
 
 const getTimelineBadgeValues = durationSeconds => {
@@ -7639,7 +7695,8 @@ const getTimelineDom = (timelineInfo, hoverPercent = null) => {
 
 const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvents, timelineStartSeconds, timelineEndSeconds, emptyMessage = noEventsFound(), timelineSelectionActive = false, timelineSelectionAnchorSeconds = '', timelineSelectionFocusSeconds = '', detailTabs = createDetailTabs(), visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), timelineInfo, timelineHoverPercent = null, focus = 0, previewTextCursorRowIndex = null, previewTextCursorColumnIndex = null, previewTextDeltaY = 0, previewTextViewportHeight = 0, minLineY = 0, maxLineY = events.length) => {
   const visibleEvents = events.slice(minLineY, maxLineY);
-  const rowNodes = getDevtoolsRows(visibleEvents, selectedEventIndex, visibleTableColumns, minLineY);
+  const rows = createDevtoolsRows(visibleEvents, selectedEventIndex, minLineY);
+  const rowNodes = getDevtoolsRows(rows, visibleTableColumns);
   const effectiveRange = getEffectiveTimelineRange(timelineStartSeconds, timelineEndSeconds, timelineSelectionActive, timelineSelectionAnchorSeconds, timelineSelectionFocusSeconds);
   const resolvedTimelineInfo = timelineInfo || getTimelineInfo(timelineEvents, effectiveRange.startSeconds, effectiveRange.endSeconds);
   const timelineNodes = getTimelineDom(resolvedTimelineInfo, timelineHoverPercent);
@@ -7773,7 +7830,7 @@ const renderItems = (oldState, newState) => {
   if (newState.initial) {
     return [SetDom2, newState.uid, []];
   }
-  const filteredEvents = getCurrentEvents$2(newState);
+  const filteredEvents = getCurrentEvents$1(newState);
   const previewTextViewportHeight = getPreviewTextViewportHeight(newState);
   const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, getSelectedEventCategoryFilters(newState.categoryFilters), newState.categoryFilters, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, newState.useDevtoolsLayout, newState.selectedEvent, newState.selectedEventIndex, newState.timelineStartSeconds, newState.timelineEndSeconds, newState.timelineFilterDescription, withSessionEventIds(newState.timelineEvents), withSessionEventIds(filteredEvents), newState.timelineSelectionActive, newState.timelineSelectionAnchorSeconds, newState.timelineSelectionFocusSeconds, getVisibleTableColumns(newState.tableColumns), newState.detailTabs, newState.tableColumns, newState.timelineInfo, newState.timelineHoverPercent, newState.focus, newState.previewTextCursorRowIndex, newState.previewTextCursorColumnIndex, newState.tableMinLineY, newState.tableMaxLineY, newState.previewTextDeltaY, previewTextViewportHeight);
   return [SetDom2, newState.uid, dom];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/chat-debug-view",
-  "version": "10.13.0",
+  "version": "10.16.0",
   "description": "Chat Debug View Worker",
   "repository": {
     "type": "git",