@lvce-editor/chat-debug-view 7.0.0 → 7.2.0

package/dist/chatDebugViewWorkerMain.js

@@ -1128,6 +1128,7 @@ const Text = 12;
 const Th = 13;
 const THead = 14;
 const Tr = 15;
+const Section = 41;
 const Search = 42;
 const Label = 66;
 const Reference = 100;
@@ -1286,6 +1287,41 @@ const terminate = () => {
   globalThis.close();
 };
 
+const appendEvent = async event => {
+  return invoke$1('ChatStorage.appendEvent', event);
+};
+const listChatViewEvents$1 = async sessionId => {
+  return invoke$1('ChatStorage.listChatViewEvents', sessionId);
+};
+const loadSelectedEvent$1 = async (sessionId, eventId, type) => {
+  return invoke$1('ChatStorage.loadSelectedEvent', sessionId, eventId, type);
+};
+
+const appendStoredEventForTestDependencies = {
+  appendEvent: appendEvent
+};
+const appendStoredEventForTest = async (state, event) => {
+  await appendStoredEventForTestDependencies.appendEvent(event);
+  return state;
+};
+
+const Response = 'response';
+const Preview = 'preview';
+const Timing = 'timing';
+const detailTabs = [Preview, Response, Timing];
+const isDetailTab = value => {
+  return value === Response || value === Preview || value === Timing;
+};
+const getDetailTabLabel = value => {
+  if (value === Preview) {
+    return 'Preview';
+  }
+  if (value === Timing) {
+    return 'Timing';
+  }
+  return 'Response';
+};
+
 const createEventCategoryFilterOptions = () => {
   return [{
     label: 'All',
@@ -1345,6 +1381,34 @@ const parseFilterValue = filterValue => {
   };
 };
 
+const validEventCategoryFilters = new Set([All, Network, Stream, Tools, Ui]);
+const isSavedState = value => {
+  return typeof value === 'object' && value !== null;
+};
+const getRestoredEventCategoryFilter = (savedState, currentEventCategoryFilter) => {
+  if (typeof savedState.eventCategoryFilter === 'string' && validEventCategoryFilters.has(savedState.eventCategoryFilter)) {
+    return savedState.eventCategoryFilter;
+  }
+  if (typeof savedState.filterValue === 'string') {
+    return parseFilterValue(savedState.filterValue).eventCategoryFilter;
+  }
+  return currentEventCategoryFilter;
+};
+const restoreSavedState = (state, savedState) => {
+  if (!isSavedState(savedState)) {
+    return state;
+  }
+  return {
+    ...state,
+    eventCategoryFilter: getRestoredEventCategoryFilter(savedState, state.eventCategoryFilter),
+    filterValue: typeof savedState.filterValue === 'string' ? savedState.filterValue : state.filterValue,
+    selectedDetailTab: typeof savedState.selectedDetailTab === 'string' && isDetailTab(savedState.selectedDetailTab) ? savedState.selectedDetailTab : state.selectedDetailTab,
+    selectedEventId: typeof savedState.selectedEventId === 'number' || savedState.selectedEventId === null ? savedState.selectedEventId : state.selectedEventId,
+    timelineEndSeconds: typeof savedState.timelineEndSeconds === 'string' ? savedState.timelineEndSeconds : state.timelineEndSeconds,
+    timelineStartSeconds: typeof savedState.timelineStartSeconds === 'string' ? savedState.timelineStartSeconds : state.timelineStartSeconds
+  };
+};
+
 const {
   get,
   getCommandIds,
@@ -1354,23 +1418,6 @@ const {
   wrapGetter
 } = create$1();
 
-const Response = 'response';
-const Preview = 'preview';
-const Timing = 'timing';
-const detailTabs = [Preview, Response, Timing];
-const isDetailTab = value => {
-  return value === Response || value === Preview || value === Timing;
-};
-const getDetailTabLabel = value => {
-  if (value === Preview) {
-    return 'Preview';
-  }
-  if (value === Timing) {
-    return 'Timing';
-  }
-  return 'Response';
-};
-
 const defaultTableWidth = 480;
 const minTableWidth = 240;
 const minDetailsWidth = 280;
@@ -1436,43 +1483,19 @@ const createDefaultState = () => {
   };
 };
 
-const validEventCategoryFilters = new Set([All, Network, Stream, Tools, Ui]);
-const getRestoredEventCategoryFilter = savedState => {
-  if (typeof savedState.eventCategoryFilter === 'string' && validEventCategoryFilters.has(savedState.eventCategoryFilter)) {
-    return savedState.eventCategoryFilter;
-  }
-  if (typeof savedState.filterValue === 'string') {
-    return parseFilterValue(savedState.filterValue).eventCategoryFilter;
-  }
-  return All;
-};
 const create = (uid, uri, x, y, width, height, platform, assetDir, sessionId = '', databaseName = 'lvce-chat-view-sessions', dataBaseVersion = 2, eventStoreName = 'chat-view-events', sessionIdIndexName = 'sessionId', savedState = {}) => {
   const defaultState = createDefaultState();
-  const {
-    filterValue,
-    selectedEventId,
-    tableWidth,
-    timelineEndSeconds,
-    timelineStartSeconds
-  } = savedState;
-  const restoredEventCategoryFilter = getRestoredEventCategoryFilter(savedState);
   const state = {
-    ...defaultState,
+    ...restoreSavedState(defaultState, savedState),
     assetDir,
     databaseName,
     dataBaseVersion,
-    eventCategoryFilter: restoredEventCategoryFilter,
     eventStoreName,
-    filterValue: filterValue ?? defaultState.filterValue,
     height,
     initial: true,
     platform,
-    selectedEventId: selectedEventId ?? defaultState.selectedEventId,
     sessionId,
     sessionIdIndexName,
-    tableWidth: tableWidth ?? defaultState.tableWidth,
-    timelineEndSeconds: timelineEndSeconds ?? defaultState.timelineEndSeconds,
-    timelineStartSeconds: timelineStartSeconds ?? defaultState.timelineStartSeconds,
     uid,
     uri,
     width,
@@ -1556,29 +1579,10 @@ const getEndedTimestamp = event => {
   return getTimestamp(event.ended) ?? getTimestamp(event.endTime) ?? getTimestamp(event.endTimestamp) ?? getTimestamp(event.timestamp);
 };
 
-const eventStableIds = new WeakMap();
-const eventStableIdState = {
-  nextStableEventId: 1
-};
-
-const getOrCreateStableEventId = event => {
-  const existingStableEventId = eventStableIds.get(event);
-  if (existingStableEventId) {
-    return existingStableEventId;
-  }
-  const stableEventId = `event-${eventStableIdState.nextStableEventId++}`;
-  eventStableIds.set(event, stableEventId);
-  return stableEventId;
-};
-
 const getStartedTimestamp = event => {
   return getTimestamp(event.started) ?? getTimestamp(event.startTime) ?? getTimestamp(event.startTimestamp) ?? getTimestamp(event.timestamp);
 };
 
-const setStableEventId = (event, stableEventId) => {
-  eventStableIds.set(event, stableEventId);
-};
-
 const mergeToolExecutionEvents = (startedEvent, finishedEvent) => {
   const ended = getEndedTimestamp(finishedEvent);
   const {
@@ -1599,15 +1603,9 @@ const mergeToolExecutionEvents = (startedEvent, finishedEvent) => {
     }),
     type: mergedEventType
   };
-  const stableEventId = `${getOrCreateStableEventId(startedEvent)}:${getOrCreateStableEventId(finishedEvent)}`;
-  setStableEventId(mergedEvent, stableEventId);
   return mergedEvent;
 };
 
-const getStableEventId = event => {
-  return getOrCreateStableEventId(event);
-};
-
 const collapseToolExecutionEvents = events => {
   const collapsedEvents = [];
   for (let i = 0; i < events.length; i++) {
@@ -1861,13 +1859,6 @@ const getTimelineInfo = (events, startValue, endValue) => {
   };
 };
 
-const listChatViewEvents$1 = async sessionId => {
-  return invoke$1('ChatStorage.listChatViewEvents', sessionId);
-};
-const loadSelectedEvent$1 = async (sessionId, eventId, type) => {
-  return invoke$1('ChatStorage.loadSelectedEvent', sessionId, eventId, type);
-};
-
 const listChatViewEventsDependencies = {
   listChatViewEventsFromWorker: listChatViewEvents$1
 };
@@ -2095,8 +2086,7 @@ const getCurrentEvents$2 = state => {
   return filterEventsByTimelineRange(filteredEvents, state.timelineStartSeconds, state.timelineEndSeconds);
 };
 const getEventIndexByStableId$1 = (events, event) => {
-  const stableEventId = getStableEventId(event);
-  return events.findIndex(candidate => getStableEventId(candidate) === stableEventId);
+  return events.findIndex(candidate => candidate.eventId === event.eventId);
 };
 const getSelectedEventIndex$1 = state => {
   const {
@@ -2249,8 +2239,7 @@ const parseTimelineRangePreset$1 = value => {
   };
 };
 const getEventIndexByStableId = (events, event) => {
-  const stableEventId = getStableEventId(event);
-  return events.findIndex(candidate => getStableEventId(candidate) === stableEventId);
+  return events.findIndex(candidate => candidate.eventId === event.eventId);
 };
 const getSelectedEventIndex = state => {
   const {
@@ -2631,8 +2620,8 @@ const handleShowResponsePartEvents = (state, checked) => {
   return withPreservedSelection$1(state, nextState);
 };
 
-const loadContent = async state => {
-  return loadEventsFromUri(state);
+const loadContent = async (state, savedState) => {
+  return loadEventsFromUri(restoreSavedState(state, savedState));
 };
 
 const getCss = state => {
@@ -2656,9 +2645,58 @@ const getCss = state => {
   contain: strict;
 }
 
+.ChatDebugViewDetailsBottom {
+  display: flex;
+  contain: strict;
+  flex:1
+
+}
 .ChatDebugViewEvent {
   contain: content
 }
+
+.row {
+  flex-shrink: 0;
+}
+
+.ChatDebugViewRefreshButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  min-height: 28px;
+  padding: 0 10px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 6px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
+}
+
+.ChatDebugViewRefreshButton:hover {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
+  border-color: rgba(255, 255, 255, 0.24);
+}
+
+.ChatDebugViewRefreshButton:active {
+  transform: translateY(1px);
+}
+
+.ChatDebugViewRefreshButton:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.4);
+  outline-offset: 1px;
+}
+
+.ChatDebugViewEventRow:hover {
+  background: var(--ListHoverBackground);
+  color: var(--ListHoverForeground);
+}
 `;
 };
 
@@ -2997,6 +3035,7 @@ const ChatDebugViewTable = 'ChatDebugViewTable';
 const ChatDebugViewTableBody = 'ChatDebugViewTableBody';
 const ChatDebugViewTableHeader = 'ChatDebugViewTableHeader';
 const ChatDebugViewTableHeaderRow = 'ChatDebugViewTableHeaderRow';
+const TableRowEven = 'TableRowEven';
 const ChatDebugViewTimeline = 'ChatDebugViewTimeline';
 const ChatDebugViewTimelineBucket = 'ChatDebugViewTimelineBucket';
 const ChatDebugViewTimelineBucketBar = 'ChatDebugViewTimelineBucketBar';
@@ -3221,7 +3260,7 @@ const getDetailsDom = (previewEventNodes, responseEventNodes = previewEventNodes
   return [{
     childCount: 2,
     className: ChatDebugViewDetails,
-    type: Div
+    type: Section
   }, {
     childCount: 2,
     className: ChatDebugViewDetailsTop,
@@ -3334,12 +3373,13 @@ const getStatusText = event => {
 
 const getDevtoolsRows = (events, selectedEventIndex) => {
   return events.flatMap((event, i) => {
+    const isEvenRow = i % 2 === 1;
     const isSelected = selectedEventIndex === i;
     const isErrorStatus = hasErrorStatus(event);
     const rowIndex = String(i);
     return [{
       childCount: 3,
-      className: joinClassNames(ChatDebugViewEventRow, isSelected && ChatDebugViewEventRowSelected),
+      className: joinClassNames(ChatDebugViewEventRow, isEvenRow && TableRowEven, isSelected && ChatDebugViewEventRowSelected),
       'data-index': rowIndex,
       type: Tr
     }, {
@@ -3784,7 +3824,7 @@ const getTimelineNodes = (timelineEvents, timelineStartSeconds, timelineEndSecon
   return [{
     childCount: 2,
     className: ChatDebugViewTimeline,
-    type: Div
+    type: Section
   }, {
     childCount: 1,
     className: ChatDebugViewTimelineTop,
@@ -3825,10 +3865,12 @@ const getDevtoolsDom = (events, selectedEvent, selectedEventIndex, timelineEvent
   return [{
     childCount: mainChildCount,
     className: ChatDebugViewDevtoolsMain,
+    role: 'none',
     type: Div
   }, ...timelineNodes, {
     childCount: splitChildCount,
     className: ChatDebugViewDevtoolsSplit,
+    role: 'none',
     type: Div
   }, {
     childCount: 1,
@@ -3988,12 +4030,20 @@ const render2 = (uid, diffResult) => {
 
 const renderEventListeners = () => {
   return [{
+    name: HandleHeaderContextMenu,
+    params: ['handleHeaderContextMenu'],
+    preventDefault: true
+  }, {
     name: HandleEventRowClick,
     params: ['handleEventRowClick', 'event.target.dataset.index', Button]
   }, {
     name: HandleTableBodyContextMenu,
     params: ['handleTableBodyContextMenu', ClientX, ClientY],
     preventDefault: true
+  }, {
+    name: HandleDetailsContextMenu,
+    params: ['handleDetailsContextMenu'],
+    preventDefault: true
   }, {
     name: HandleFilterInput,
     params: ['handleInput', TargetName, TargetValue]
@@ -4012,6 +4062,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickRefresh,
     params: ['handleClickRefresh']
+  }, {
+    name: HandleTableKeyDown,
+    params: ['handleTableKeyDown', 'event.key']
   }, {
     name: HandleSashPointerDown,
     params: ['handleSashPointerDown', ClientX, ClientY],
@@ -4067,28 +4120,20 @@ const saveState = state => {
   const {
     eventCategoryFilter,
     filterValue,
-    height,
+    selectedDetailTab,
     selectedEventId,
     sessionId,
-    tableWidth,
     timelineEndSeconds,
-    timelineStartSeconds,
-    width,
-    x,
-    y
+    timelineStartSeconds
   } = state;
   return {
     eventCategoryFilter,
     filterValue,
-    height,
+    selectedDetailTab,
     selectedEventId,
     sessionId,
-    tableWidth,
     timelineEndSeconds,
-    timelineStartSeconds,
-    width,
-    x,
-    y
+    timelineStartSeconds
   };
 };
 
@@ -4137,6 +4182,7 @@ const setSessionId = async (state, sessionId) => {
 };
 
 const commandMap = {
+  'ChatDebug.appendStoredEventForTest': wrapCommand(appendStoredEventForTest),
   'ChatDebug.create': create,
   'ChatDebug.diff2': diff2,
   'ChatDebug.getCommandIds': getCommandIds,

package/package.json

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