@lvce-editor/chat-debug-view 10.15.0 → 10.17.0

package/dist/chatDebugViewWorkerMain.js

@@ -2466,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) {
@@ -2725,6 +2713,9 @@ const getFilteredEvents = (events, filterValue, eventCategoryFilters, showInputE
 };
 
 const getDurationText = event => {
+  if (event.time) {
+    return event.time;
+  }
   const explicitDuration = event.durationMs ?? event.duration;
   if (typeof explicitDuration === 'number' && Number.isFinite(explicitDuration)) {
     return `${explicitDuration}ms`;
@@ -2879,15 +2870,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) => {
@@ -2977,7 +2991,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);
@@ -3000,7 +3014,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) {
@@ -3017,10 +3031,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;
@@ -3029,24 +3044,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);
@@ -3060,27 +3088,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);
@@ -3091,19 +3099,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
@@ -3135,8 +3159,7 @@ const withPreparedSelectedEventPreview = async event => {
   return setSelectedEventPreview(event, preview);
 };
 
-const getCurrentEvents$1 = state => getCurrentEvents$2(state);
-const selectEventAtIndex = async (state, selectedEventIndex, loadSelectedEvent$1 = loadSelectedEvent) => {
+const selectEventAtIndex = async (state, selectedEventIndex) => {
   const {
     databaseName,
     dataBaseVersion,
@@ -3164,7 +3187,9 @@ const selectEventAtIndex = async (state, selectedEventIndex, loadSelectedEvent$1
       selectedEventIndex
     };
   }
-  const selectedEventDetails = await loadSelectedEvent$1(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,
@@ -3181,7 +3206,7 @@ const selectEventAtIndex = async (state, selectedEventIndex, loadSelectedEvent$1
 };
 
 const focusIndex = async (state, index) => {
-  const currentEvents = getCurrentEvents$1(state);
+  const currentEvents = getCurrentEvents(state);
   if (currentEvents.length === 0 || state.selectedEventIndex === index) {
     return state;
   }
@@ -3349,6 +3374,26 @@ const getResponseMap = events => {
   return seen;
 };
 
+const getMergedRequestResponseEvent = (item, response) => {
+  const parsedStart = new Date(item.timestamp || '');
+  const parsedEnd = new Date(response.timestamp || '');
+  const durationMs = parsedEnd.getTime() - parsedStart.getTime();
+  if (Number.isFinite(durationMs) && durationMs >= 0) {
+    return {
+      durationMs,
+      eventEndId: response.eventId,
+      eventId: item.eventId,
+      method: 'POST',
+      type: 'ai-request-response'
+    };
+  }
+  return {
+    eventEndId: response.eventId,
+    eventId: item.eventId,
+    method: 'POST',
+    type: 'ai-request-response'
+  };
+};
 const toPrettyEvents = rawEvents => {
   if (rawEvents.type === 'error') {
     return [];
@@ -3359,10 +3404,7 @@ const toPrettyEvents = rawEvents => {
     if (item.type === 'ai-request' && 'requestId' in item && typeof item.requestId === 'string') {
       const response = map[item.requestId];
       if (response) {
-        pretty.push({
-          eventId: item.eventId,
-          type: 'ai-request-response'
-        });
+        pretty.push(getMergedRequestResponseEvent(item, response));
       } else {
         pretty.push(item);
       }
@@ -3573,7 +3615,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 {
@@ -3733,8 +3775,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);
 };
@@ -3807,7 +3847,7 @@ const handleEventCategoryFilter$1 = (state, value, ctrlKey = false, metaKey = fa
 const isPrimaryButton = button => {
   return button === 0;
 };
-const handleEventRowClick = async (state, index, button = 0, loadSelectedEvent) => {
+const handleEventRowClick = async (state, index, button = 0) => {
   const actual = typeof index === 'string' ? Number.parseInt(index, 10) : index;
   if (!isPrimaryButton(button)) {
     return state;
@@ -3815,12 +3855,12 @@ const handleEventRowClick = async (state, index, button = 0, loadSelectedEvent)
   if (actual === -1) {
     return state;
   }
-  return selectEventAtIndex(state, actual, loadSelectedEvent);
+  return selectEventAtIndex(state, actual);
 };
 
-const handleEventRowClickAt = async (state, eventX, eventY, button = 0, loadSelectedEvent) => {
+const handleEventRowClickAt = async (state, eventX, eventY, button = 0) => {
   const selectedEventIndex = getTableBodyEventIndex(state, eventX, eventY);
-  return handleEventRowClick(state, selectedEventIndex, button, loadSelectedEvent);
+  return handleEventRowClick(state, selectedEventIndex, button);
 };
 
 const getBoolean = value => {
@@ -3850,7 +3890,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;
@@ -3868,12 +3908,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;
@@ -4661,7 +4701,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) {
@@ -4685,7 +4725,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) {
@@ -5053,7 +5093,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);
@@ -7020,13 +7060,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,
@@ -7042,6 +7075,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 [{
@@ -7103,27 +7145,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];
@@ -7170,10 +7215,21 @@ const getDetailsDom = (previewEventNodes, payloadEventNodes = previewEventNodes,
   }, ...getDetailsTopVirtualDom(normalizedDetailTabs), ...getDetailContentDom(selectedDetailTab, safeSelectedDetailTab, contentNodes)];
 };
 
+const getCellDurationDom = event => {
+  return [{
+    childCount: 1,
+    className: mergeClassNames(TableCell, ChatDebugViewCellDuration),
+    type: Td
+  }, text(getEventTableDurationText(event))];
+};
+
 const getMethods = new Set(['list_dir', 'list_files', 'read_file']);
 const postMethods = new Set(['create_directory', 'create_file', 'mkdir', 'write_file']);
 const deleteMethods = new Set(['delete_directory', 'delete_file', 'delete_folder', 'remove_directory', 'remove_file', 'remove_folder']);
 const getEventTableMethodLabel = event => {
+  if (event.method) {
+    return event.method;
+  }
   const toolName = getToolName(event);
   if (!toolName) {
     return '';
@@ -7190,36 +7246,45 @@ const getEventTableMethodLabel = event => {
   return '';
 };
 
+const getCellMethodDom = event => {
+  return [{
+    childCount: 1,
+    className: TableCell,
+    type: Td
+  }, text(getEventTableMethodLabel(event))];
+};
+
+const getCellStatusDom = (event, isErrorStatus) => {
+  return [{
+    childCount: 1,
+    className: mergeClassNames(TableCell, isErrorStatus ? ChatDebugViewCellStatusError : ''),
+    type: Td
+  }, text(getStatusText(event))];
+};
+
+const getCellTypeDom = event => {
+  return [{
+    childCount: 1,
+    className: TableCell,
+    type: Td
+  }, text(getEventTableTypeLabel(event))];
+};
+
 const getTableCellDom = (column, event, isErrorStatus) => {
   switch (column) {
     case Duration:
-      return [{
-        childCount: 1,
-        className: mergeClassNames(TableCell, ChatDebugViewCellDuration),
-        type: Td
-      }, text(getEventTableDurationText(event))];
+      return getCellDurationDom(event);
     case Method:
-      return [{
-        childCount: 1,
-        className: TableCell,
-        type: Td
-      }, text(getEventTableMethodLabel(event))];
+      return getCellMethodDom(event);
     case Status$1:
-      return [{
-        childCount: 1,
-        className: mergeClassNames(TableCell, isErrorStatus ? ChatDebugViewCellStatusError : ''),
-        type: Td
-      }, text(getStatusText(event))];
+      return getCellStatusDom(event, isErrorStatus);
     case Type:
-      return [{
-        childCount: 1,
-        className: TableCell,
-        type: Td
-      }, text(getEventTableTypeLabel(event))];
+      return getCellTypeDom(event);
     default:
       return [];
   }
 };
+
 const getRowCellNodes = (event, isErrorStatus, visibleTableColumns) => {
   const orderedVisibleTableColumns = getOrderedVisibleTableColumns(visibleTableColumns);
   return orderedVisibleTableColumns.flatMap(column => {
@@ -7804,7 +7869,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.15.0",
+  "version": "10.17.0",
   "description": "Chat Debug View Worker",
   "repository": {
     "type": "git",