@lvce-editor/chat-debug-view 10.2.0 → 10.4.0

package/dist/chatDebugViewWorkerMain.js

@@ -2245,6 +2245,7 @@ const createDefaultState = () => {
     timelineEndSeconds: '',
     timelineEvents: [],
     timelineFilterDescription: '',
+    timelineHeight: 81,
     timelineHoverPercent: null,
     timelineHoverSeconds: '',
     timelineInfo: emptyTimelineInfo,
@@ -2292,7 +2293,7 @@ const RenderFocusContext = 4;
 const RenderFocus = 5;
 
 const diff = (oldState, newState) => {
-  if (oldState.categoryFilters !== newState.categoryFilters || oldState.detailTabs !== newState.detailTabs || oldState.errorMessage !== newState.errorMessage || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.previewTextCursorColumnIndex !== newState.previewTextCursorColumnIndex || oldState.previewTextCursorRowIndex !== newState.previewTextCursorRowIndex || oldState.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.sortColumn !== newState.sortColumn || oldState.sortDescending !== newState.sortDescending || oldState.tableColumnWidths !== newState.tableColumnWidths || oldState.tableDeltaY !== newState.tableDeltaY || oldState.tableMaxLineY !== newState.tableMaxLineY || oldState.tableMinLineY !== newState.tableMinLineY || oldState.tableWidth !== newState.tableWidth || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineHoverPercent !== newState.timelineHoverPercent || oldState.timelineHoverSeconds !== newState.timelineHoverSeconds || oldState.timelineSelectionActive !== newState.timelineSelectionActive || oldState.timelineSelectionAnchorSeconds !== newState.timelineSelectionAnchorSeconds || oldState.timelineSelectionFocusSeconds !== newState.timelineSelectionFocusSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.tableColumns !== newState.tableColumns || oldState.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.focus !== newState.focus || oldState.width !== newState.width || oldState.uid !== newState.uid) {
+  if (oldState.categoryFilters !== newState.categoryFilters || oldState.detailTabs !== newState.detailTabs || oldState.errorMessage !== newState.errorMessage || oldState.events !== newState.events || oldState.filterValue !== newState.filterValue || oldState.previewTextCursorColumnIndex !== newState.previewTextCursorColumnIndex || oldState.previewTextCursorRowIndex !== newState.previewTextCursorRowIndex || oldState.sessionId !== newState.sessionId || oldState.showEventStreamFinishedEvents !== newState.showEventStreamFinishedEvents || oldState.showInputEvents !== newState.showInputEvents || oldState.showResponsePartEvents !== newState.showResponsePartEvents || oldState.sortColumn !== newState.sortColumn || oldState.sortDescending !== newState.sortDescending || oldState.tableColumnWidths !== newState.tableColumnWidths || oldState.tableDeltaY !== newState.tableDeltaY || oldState.tableMaxLineY !== newState.tableMaxLineY || oldState.tableMinLineY !== newState.tableMinLineY || oldState.tableWidth !== newState.tableWidth || oldState.timelineEndSeconds !== newState.timelineEndSeconds || oldState.timelineHeight !== newState.timelineHeight || oldState.timelineHoverPercent !== newState.timelineHoverPercent || oldState.timelineHoverSeconds !== newState.timelineHoverSeconds || oldState.timelineSelectionActive !== newState.timelineSelectionActive || oldState.timelineSelectionAnchorSeconds !== newState.timelineSelectionAnchorSeconds || oldState.timelineSelectionFocusSeconds !== newState.timelineSelectionFocusSeconds || oldState.timelineStartSeconds !== newState.timelineStartSeconds || oldState.useDevtoolsLayout !== newState.useDevtoolsLayout || oldState.tableColumns !== newState.tableColumns || oldState.selectedEvent !== newState.selectedEvent || oldState.selectedEventIndex !== newState.selectedEventIndex || oldState.focus !== newState.focus || oldState.width !== newState.width || oldState.uid !== newState.uid) {
     return [RenderIncremental, RenderCss];
   }
   return [];
@@ -2383,6 +2384,76 @@ const mergeToolExecutionEvents = (startedEvent, finishedEvent, type = mergedEven
   return mergedEvent;
 };
 
+const requestEventTypes = new Set(['request', 'ai-request']);
+const responseEventTypes = new Set(['response', 'ai-response-success']);
+const getPairId = event => {
+  const {
+    request_id: requestIdSnake,
+    requestId,
+    requestID,
+    turn_id: turnIdSnake,
+    turnId
+  } = event;
+  if (typeof requestId === 'string' || typeof requestId === 'number') {
+    return requestId;
+  }
+  if (typeof requestIdSnake === 'string' || typeof requestIdSnake === 'number') {
+    return requestIdSnake;
+  }
+  if (typeof requestID === 'string' || typeof requestID === 'number') {
+    return requestID;
+  }
+  if (typeof turnId === 'string' || typeof turnId === 'number') {
+    return turnId;
+  }
+  if (typeof turnIdSnake === 'string' || typeof turnIdSnake === 'number') {
+    return turnIdSnake;
+  }
+  const {
+    body,
+    request,
+    response,
+    value
+  } = event;
+  const bodyPairId = body?.requestId ?? body?.request_id ?? body?.requestID ?? body?.turnId ?? body?.turn_id;
+  if (typeof bodyPairId === 'string' || typeof bodyPairId === 'number') {
+    return bodyPairId;
+  }
+  const requestPairId = request?.requestId ?? request?.request_id ?? request?.requestID ?? request?.turnId ?? request?.turn_id;
+  if (typeof requestPairId === 'string' || typeof requestPairId === 'number') {
+    return requestPairId;
+  }
+  const valuePairId = value?.requestId ?? value?.request_id ?? value?.requestID ?? value?.turnId ?? value?.turn_id;
+  if (typeof valuePairId === 'string' || typeof valuePairId === 'number') {
+    return valuePairId;
+  }
+  const responsePairId = response?.requestId ?? response?.request_id ?? response?.requestID ?? response?.turnId ?? response?.turn_id;
+  if (typeof responsePairId === 'string' || typeof responsePairId === 'number') {
+    return responsePairId;
+  }
+  return undefined;
+};
+const mergeRequestResponseEvents = (startedEvent, finishedEvent) => {
+  return {
+    ...mergeToolExecutionEvents(startedEvent, finishedEvent, startedEvent.type),
+    requestEvent: startedEvent,
+    responseEvent: finishedEvent
+  };
+};
+const isMatchingRequestResponsePair = (startedEvent, finishedEvent) => {
+  if (!requestEventTypes.has(startedEvent.type) || !responseEventTypes.has(finishedEvent.type)) {
+    return false;
+  }
+  if (startedEvent.sessionId !== finishedEvent.sessionId) {
+    return false;
+  }
+  const startedPairId = getPairId(startedEvent);
+  const finishedPairId = getPairId(finishedEvent);
+  if (startedPairId !== undefined && finishedPairId !== undefined) {
+    return startedPairId === finishedPairId;
+  }
+  return startedEvent.type === 'ai-request' && finishedEvent.type === 'ai-response-success';
+};
 const isMatchingHandleSubmitPair = (startedEvent, finishedEvent) => {
   return startedEvent.type === handleSubmitEventType && finishedEvent.type === sseResponseCompletedEventType && startedEvent.sessionId === finishedEvent.sessionId;
 };
@@ -2396,6 +2467,11 @@ const collapseToolExecutionEvents = events => {
       i++;
       continue;
     }
+    if (nextEvent && isMatchingRequestResponsePair(event, nextEvent)) {
+      collapsedEvents.push(mergeRequestResponseEvents(event, nextEvent));
+      i++;
+      continue;
+    }
     if (nextEvent && isMatchingHandleSubmitPair(event, nextEvent)) {
       collapsedEvents.push(mergeToolExecutionEvents(event, nextEvent, handleSubmitEventType));
       i++;
@@ -2644,6 +2720,30 @@ const loadSelectedEvent = async (_databaseName, _dataBaseVersion, _eventStoreNam
   return loadSelectedEvent$1(sessionId, eventId, type);
 };
 
+const mergeSelectedEventDetails = (selectedEvent, selectedEventDetails) => {
+  if (!selectedEventDetails) {
+    return selectedEvent;
+  }
+  const {
+    requestEvent,
+    responseEvent
+  } = selectedEvent;
+  if (!requestEvent || !responseEvent || typeof requestEvent !== 'object' || typeof responseEvent !== 'object') {
+    return selectedEventDetails;
+  }
+  const selectedEventDetailsType = selectedEventDetails.type;
+  const resolvedResponseEvent = selectedEventDetailsType === 'response' || selectedEventDetailsType === 'ai-response-success' ? selectedEventDetails : responseEvent;
+  return {
+    ...selectedEventDetails,
+    ...selectedEvent,
+    requestEvent: {
+      ...requestEvent,
+      ...selectedEventDetails
+    },
+    responseEvent: resolvedResponseEvent
+  };
+};
+
 const devtoolsTableHeaderHeight = 24;
 const devtoolsTableRowHeight = 24;
 const devtoolsTableScrollBarWidth = 12;
@@ -2654,7 +2754,10 @@ const devtoolsRootGap = 4;
 const devtoolsTopHeight = 28;
 const devtoolsTimelineHeight = 88;
 const getTableBodyY = (state, hasTimeline) => {
-  return state.y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
+  const {
+    y
+  } = state;
+  return y + viewPadding + devtoolsTopHeight + devtoolsRootGap + (hasTimeline ? devtoolsTimelineHeight : 0) + devtoolsTableHeaderHeight;
 };
 
 const getTableBodyHeight = (state, eventCount) => {
@@ -2883,7 +2986,7 @@ const selectEventAtIndex = async (state, selectedEventIndex, dependencies = sele
     };
   }
   const selectedEventDetails = await dependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
-  const resolvedSelectedEvent = await withPreparedSelectedEventPreview(selectedEventDetails ?? selectedEvent);
+  const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
   return withSelectedEventVisible({
     ...state,
     detailTabs: createDetailTabs(selectedDetailTab, resolvedSelectedEvent),
@@ -2991,24 +3094,32 @@ const show2 = async (uid, menuId, x, y, args) => {
 };
 
 const getTableBodyEventIndex = (state, eventX, eventY) => {
-  if (!state.useDevtoolsLayout) {
+  const {
+    tableMaxLineY,
+    tableMinLineY,
+    tableWidth,
+    useDevtoolsLayout,
+    width,
+    x
+  } = state;
+  if (!useDevtoolsLayout) {
     return -1;
   }
   const currentEvents = getCurrentEvents$1(state);
   if (currentEvents.length === 0) {
     return -1;
   }
-  const tableX = state.x + leftPadding;
-  const tableWidth = clampTableWidth(state.width, state.tableWidth);
+  const tableX = x + leftPadding;
+  const tableWidthNew = clampTableWidth(width, tableWidth);
   const hasTimeline = currentEvents.length > 0;
   const tableBodyY = getTableBodyY(state, hasTimeline);
   const relativeX = eventX - tableX;
   const relativeY = eventY - tableBodyY;
-  if (relativeX < 0 || relativeX >= tableWidth || relativeY < 0) {
+  if (relativeX < 0 || relativeX >= tableWidthNew || relativeY < 0) {
     return -1;
   }
-  const eventIndex = state.tableMinLineY + Math.floor(relativeY / devtoolsTableRowHeight);
-  if (eventIndex < state.tableMinLineY || eventIndex >= state.tableMaxLineY || eventIndex >= currentEvents.length) {
+  const eventIndex = tableMinLineY + Math.floor(relativeY / devtoolsTableRowHeight);
+  if (eventIndex < tableMinLineY || eventIndex >= tableMaxLineY || eventIndex >= currentEvents.length) {
     return -1;
   }
   return eventIndex;
@@ -3251,7 +3362,7 @@ const restoreSelectedEvent = async state => {
     };
   }
   const selectedEventDetails = await loadEventsDependencies.loadSelectedEvent(state.databaseName, state.dataBaseVersion, state.eventStoreName, state.sessionId, state.sessionIdIndexName, selectedEvent.eventId, selectedEvent.type);
-  const resolvedSelectedEvent = selectedEventDetails ? await withPreparedSelectedEventPreview(selectedEventDetails) : null;
+  const resolvedSelectedEvent = await withPreparedSelectedEventPreview(mergeSelectedEventDetails(selectedEvent, selectedEventDetails));
   return {
     ...state,
     previewTextCursorColumnIndex: null,
@@ -3699,6 +3810,22 @@ const shouldIncludeArguments = (event, name) => {
 };
 
 const getPayloadEvent = event => {
+  const {
+    requestEvent
+  } = event;
+  if (requestEvent && typeof requestEvent === 'object' && typeof requestEvent.type === 'string') {
+    const mergedRequestEvent = requestEvent;
+    if (mergedRequestEvent.body !== undefined) {
+      return mergedRequestEvent.body;
+    }
+    if (mergedRequestEvent.value !== undefined) {
+      return mergedRequestEvent.value;
+    }
+    if (hasOwn(mergedRequestEvent, 'arguments')) {
+      return mergedRequestEvent.arguments;
+    }
+    return requestEvent;
+  }
   const name = getPreviewName(event);
   if (name === 'list_files' && hasOwn(event, 'arguments')) {
     return event.arguments;
@@ -3951,14 +4078,18 @@ const handleTableFocus = state => {
 };
 
 const handleTableHeaderClick = (state, value) => {
+  const {
+    sortColumn,
+    sortDescending
+  } = state;
   if (!isTableColumn(value)) {
     return state;
   }
-  const sortDescending = state.sortColumn === value ? !state.sortDescending : false;
+  const newSortDescending = sortColumn === value ? !sortDescending : false;
   const nextState = {
     ...state,
     sortColumn: value,
-    sortDescending
+    sortDescending: newSortDescending
   };
   return withPreservedSelection$1(state, nextState);
 };
@@ -4345,6 +4476,87 @@ const loadContent = async (state, savedState) => {
   });
 };
 
+const isAttachmentImagePreview = value => {
+  return typeof value === 'object' && value !== null && value.previewType === 'image';
+};
+
+const getResponseEvent = event => {
+  const {
+    responseEvent
+  } = event;
+  if (responseEvent && typeof responseEvent === 'object' && typeof responseEvent.type === 'string') {
+    const mergedResponseEvent = responseEvent;
+    if (mergedResponseEvent.value !== undefined) {
+      return mergedResponseEvent.value;
+    }
+    return responseEvent;
+  }
+  return event;
+};
+
+const getStringLineCount = value => {
+  return value.split('\n').length;
+};
+const isChatViewEvent$1 = value => {
+  return typeof value === 'object' && value !== null && typeof value.type === 'string';
+};
+const getJsonLineCount = value => {
+  const renderedValue = isChatViewEvent$1(value) ? {
+    ...value,
+    type: getEventTypeLabel(value)
+  } : value;
+  const json = JSON.stringify(renderedValue, null, 2);
+  if (!json) {
+    return 1;
+  }
+  let lineCount = 1;
+  for (let i = 0; i < json.length; i++) {
+    if (json[i] === '\n') {
+      lineCount++;
+    }
+  }
+  return lineCount;
+};
+const getPreviewLineCount = selectedEvent => {
+  const previewEvent = getPreviewEvent(selectedEvent);
+  if (previewEvent === undefined || isAttachmentImagePreview(previewEvent)) {
+    return 0;
+  }
+  if (typeof previewEvent === 'string') {
+    if (previewEvent === ImageCouldNotBeLoaded || isChatMessageUpdatedEvent(selectedEvent)) {
+      return 0;
+    }
+    return getStringLineCount(previewEvent);
+  }
+  return getJsonLineCount(previewEvent);
+};
+const getLineCount = state => {
+  const {
+    selectedEvent
+  } = state;
+  if (!selectedEvent) {
+    return 0;
+  }
+  const selectedDetailTab = getSelectedDetailTab(state.detailTabs);
+  if (selectedDetailTab === Timing) {
+    return 0;
+  }
+  if (selectedDetailTab === Preview) {
+    return getPreviewLineCount(selectedEvent);
+  }
+  if (selectedDetailTab === Payload) {
+    return getJsonLineCount(getPayloadEvent(selectedEvent));
+  }
+  return getJsonLineCount(getResponseEvent(selectedEvent));
+};
+const getDetailsLineNumberWidth = state => {
+  const lineCount = getLineCount(state);
+  if (lineCount === 0) {
+    return 0;
+  }
+  return String(lineCount).length * defaultPreviewTextColumnWidth;
+};
+
 // cspell:ignore liga calt
 
 const getCss = state => {
@@ -4358,6 +4570,7 @@ const getCss = state => {
   const scrollBarOffset = getScrollBarOffset(state.tableDeltaY, maxDeltaY, tableBodyHeight, scrollBarHeight);
   const tableContentWidth = Math.max(0, tableWidth - (showScrollBar ? devtoolsTableScrollBarWidth : 0));
   const detailsWidth = hasSelectedEvent ? getDetailsWidth(state.width, state.tableWidth) : 0;
+  const detailsLineNumberWidth = getDetailsLineNumberWidth(state);
   const topSize = state.width >= state.largeBreakpoint ? 30 : state.width >= state.mediumBreakpoint ? 60 : 60;
   const tableColumnLayout = getTableColumnLayout(tableContentWidth, getVisibleTableColumns(state.tableColumns), state.tableColumnWidths);
   const [tableColZeroWidth = 0, tableColOneWidth = 0, tableColTwoWidth = 0] = tableColumnLayout.visibleColumnWidths;
@@ -4374,6 +4587,7 @@ const getCss = state => {
   --ChatDebugViewTableColZeroWidth: ${tableColZeroWidth}px;
   --ChatDebugViewTableColOneWidth: ${tableColOneWidth}px;
   --ChatDebugViewTableColTwoWidth: ${tableColTwoWidth}px;
+  --ChatDebugViewDetailsLineNumberWidth: ${detailsLineNumberWidth}px;
   --ChatDebugViewDetailsWidth: ${detailsWidth}px;
   --ChatDebugViewDurationColumnWidth: ${state.tableColumnWidths.duration}px;
   --ChatDebugViewTableRowHeight: ${devtoolsTableRowHeight}px;
@@ -4384,12 +4598,14 @@ const getCss = state => {
   --ResizerTwoLeft: ${resizerTwoLeft}px;
   --ChatDebugViewSashWidth: ${sashWidth}px;
   --ChatDebugViewTableWidth: ${tableWidth}px;
+  --ChatDebugViewTimelineHeight: ${state.timelineHeight}px;
   --ChatDebugViewTimelineCursorGuideLeft: ${state.timelineHoverPercent ?? 0}%;
   --ChatDebugViewTimelineSelectionEndLeft: ${selectionEndPercent ?? 0}%;
   --ChatDebugViewTimelineSelectionStartLeft: ${selectionStartPercent ?? 0}%;
   --ChatDebugViewTopSize: ${topSize}px;
   --ChatDebugViewTypeColumnWidth: ${state.tableColumnWidths.type}px;
   padding: ${viewPadding}px;
+  padding-right: 0;
 }
 
 .TableWrapper {
@@ -4402,6 +4618,31 @@ const getCss = state => {
   width: calc(100% - var(--ChatDebugViewTableScrollBarWidth));
 }
 
+.ChatDebugViewTimeline {
+  contain: strict;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: var(--ChatDebugViewTimelineHeight);
+}
+
+.ChatDebugViewTimelineInteractive {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+.ChatDebugViewDetailsBottom .Gutter {
+  flex: 0 0 var(--ChatDebugViewDetailsLineNumberWidth);
+  width: var(--ChatDebugViewDetailsLineNumberWidth);
+}
+
+.ChatDebugViewDetailsBottom .ChatDebugViewEventLineNumber {
+  display: inline-block;
+  min-width: var(--ChatDebugViewDetailsLineNumberWidth);
+  width: var(--ChatDebugViewDetailsLineNumberWidth);
+}
+
 .TableScrollBar {
   background: rgba(255, 255, 255, 0.06);
   border-radius: 999px;
@@ -5222,10 +5463,6 @@ const getPanelId = detailTab => {
   return `ChatDebugViewDetailsPanel-${detailTab}`;
 };
 
-const isAttachmentImagePreview = value => {
-  return typeof value === 'object' && value !== null && value.previewType === 'image';
-};
-
 const getImagePreviewLabelDom = preview => {
   if (preview.stats === undefined) {
     return [{
@@ -5806,7 +6043,6 @@ const getTableScrollBarDom = visible => {
 
 const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = '', showScrollBar = false) => {
   const tableWrapperClassName = mergeClassNames(TableWrapper, focus === FocusChatDebugTable ? FocusOutline : '', className);
-  const scrollBarNodes = getTableScrollBarDom(showScrollBar);
   const tableWrapperNode = {
     childCount: showScrollBar ? 3 : 2,
     className: tableWrapperClassName,
@@ -5816,7 +6052,7 @@ const getTableWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultV
       role
     } : {})
   };
-  return [tableWrapperNode, ...getTableDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summary, focus), ...getTableResizersDom(visibleTableColumns), ...scrollBarNodes];
+  return [tableWrapperNode, ...getTableDom(rowNodes, eventCount, visibleTableColumns, tableColumns, summary, focus), ...getTableResizersDom(visibleTableColumns), ...getTableScrollBarDom(showScrollBar)];
 };
 
 const getTableWrapperWrapperDom = (rowNodes, eventCount, visibleTableColumns = defaultVisibleTableColumns, tableColumns = createTableColumns(), summary = '', focus = 0, className = '', role = '', showScrollBar = false) => {
@@ -6008,7 +6244,7 @@ const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvent
     rowIndex: previewTextCursorRowIndex
   });
   const payloadEventNodes = selectedEvent ? getEventNode(getPayloadEvent(selectedEvent)) : [];
-  const responseEventNodes = selectedEvent ? getEventNode(selectedEvent) : [];
+  const responseEventNodes = selectedEvent ? getEventNode(getResponseEvent(selectedEvent)) : [];
   const hasSelectedEvent = responseEventNodes.length > 0;
   const eventsClassName = getEventsClassName(hasSelectedEvent);
   const summary = getTableSummary(events);

package/package.json

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