@lvce-editor/chat-debug-view 3.0.0 → 3.3.0

package/dist/chatDebugViewWorkerMain.js

@@ -1067,44 +1067,310 @@ const handleInput = (state, name, value, checked) => {
   return state;
 };
 
-const requestToPromise = async createRequest => {
-  const request = createRequest();
-  const {
-    promise,
-    reject,
-    resolve
-  } = Promise.withResolvers();
-  request.addEventListener('success', () => {
-    resolve(request.result);
-  });
-  request.addEventListener('error', () => {
-    reject(request.error || new Error('IndexedDB request failed'));
-  });
-  return promise;
+const getFailedToLoadMessage = sessionId => {
+  return `Failed to load chat debug session "${sessionId}". Please try again.`;
 };
 
-/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
+const ParseChatDebugUriErrorCode = {
+  InvalidSessionId: 'invalid-session-id',
+  InvalidUriEncoding: 'invalid-uri-encoding',
+  InvalidUriFormat: 'invalid-uri-format',
+  MissingUri: 'missing-uri'
+};
 
-const openDatabase = async (databaseName, dataBaseVersion) => {
-  const request = indexedDB.open(databaseName, dataBaseVersion);
-  return requestToPromise(() => request);
+const getInvalidUriMessage = (uri, code) => {
+  if (code === ParseChatDebugUriErrorCode.MissingUri) {
+    return 'Unable to load debug session: missing URI. Expected format: chat-debug://<sessionId>.';
+  }
+  return `Unable to load debug session: invalid URI "${uri}". Expected format: chat-debug://<sessionId>.`;
 };
-const getAllEvents = async store => {
-  const all = await requestToPromise(() => store.getAll());
-  return all;
+
+const getSessionNotFoundMessage = sessionId => {
+  return `No chat session found for sessionId "${sessionId}".`;
 };
+
 const filterEventsBySessionId = (events, sessionId) => {
   return events.filter(event => event.sessionId === sessionId);
 };
+
+// cspell:ignore IDBP
+
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+const getAllEvents = async store => {
+  const all = await store.getAll();
+  return all;
+};
+
+// cspell:ignore IDBP
+
 const getEventsBySessionId = async (store, sessionId, sessionIdIndexName) => {
   if (store.indexNames.contains(sessionIdIndexName)) {
     const index = store.index(sessionIdIndexName);
-    const events = await requestToPromise(() => index.getAll(IDBKeyRange.only(sessionId)));
+    const events = await index.getAll(sessionId);
     return filterEventsBySessionId(events, sessionId);
   }
   const all = await getAllEvents(store);
   return filterEventsBySessionId(all, sessionId);
 };
+
+const instanceOfAny = (object, constructors) => constructors.some(c => object instanceof c);
+let idbProxyableTypes;
+let cursorAdvanceMethods;
+// This is a function to prevent it throwing up in node environments.
+function getIdbProxyableTypes() {
+  return idbProxyableTypes || (idbProxyableTypes = [IDBDatabase, IDBObjectStore, IDBIndex, IDBCursor, IDBTransaction]);
+}
+// This is a function to prevent it throwing up in node environments.
+function getCursorAdvanceMethods() {
+  return cursorAdvanceMethods || (cursorAdvanceMethods = [IDBCursor.prototype.advance, IDBCursor.prototype.continue, IDBCursor.prototype.continuePrimaryKey]);
+}
+const transactionDoneMap = new WeakMap();
+const transformCache = new WeakMap();
+const reverseTransformCache = new WeakMap();
+function promisifyRequest(request) {
+  const promise = new Promise((resolve, reject) => {
+    const unlisten = () => {
+      request.removeEventListener('success', success);
+      request.removeEventListener('error', error);
+    };
+    const success = () => {
+      resolve(wrap(request.result));
+      unlisten();
+    };
+    const error = () => {
+      reject(request.error);
+      unlisten();
+    };
+    request.addEventListener('success', success);
+    request.addEventListener('error', error);
+  });
+  // This mapping exists in reverseTransformCache but doesn't exist in transformCache. This
+  // is because we create many promises from a single IDBRequest.
+  reverseTransformCache.set(promise, request);
+  return promise;
+}
+function cacheDonePromiseForTransaction(tx) {
+  // Early bail if we've already created a done promise for this transaction.
+  if (transactionDoneMap.has(tx)) return;
+  const done = new Promise((resolve, reject) => {
+    const unlisten = () => {
+      tx.removeEventListener('complete', complete);
+      tx.removeEventListener('error', error);
+      tx.removeEventListener('abort', error);
+    };
+    const complete = () => {
+      resolve();
+      unlisten();
+    };
+    const error = () => {
+      reject(tx.error || new DOMException('AbortError', 'AbortError'));
+      unlisten();
+    };
+    tx.addEventListener('complete', complete);
+    tx.addEventListener('error', error);
+    tx.addEventListener('abort', error);
+  });
+  // Cache it for later retrieval.
+  transactionDoneMap.set(tx, done);
+}
+let idbProxyTraps = {
+  get(target, prop, receiver) {
+    if (target instanceof IDBTransaction) {
+      // Special handling for transaction.done.
+      if (prop === 'done') return transactionDoneMap.get(target);
+      // Make tx.store return the only store in the transaction, or undefined if there are many.
+      if (prop === 'store') {
+        return receiver.objectStoreNames[1] ? undefined : receiver.objectStore(receiver.objectStoreNames[0]);
+      }
+    }
+    // Else transform whatever we get back.
+    return wrap(target[prop]);
+  },
+  set(target, prop, value) {
+    target[prop] = value;
+    return true;
+  },
+  has(target, prop) {
+    if (target instanceof IDBTransaction && (prop === 'done' || prop === 'store')) {
+      return true;
+    }
+    return prop in target;
+  }
+};
+function replaceTraps(callback) {
+  idbProxyTraps = callback(idbProxyTraps);
+}
+function wrapFunction(func) {
+  // Due to expected object equality (which is enforced by the caching in `wrap`), we
+  // only create one new func per func.
+  // Cursor methods are special, as the behaviour is a little more different to standard IDB. In
+  // IDB, you advance the cursor and wait for a new 'success' on the IDBRequest that gave you the
+  // cursor. It's kinda like a promise that can resolve with many values. That doesn't make sense
+  // with real promises, so each advance methods returns a new promise for the cursor object, or
+  // undefined if the end of the cursor has been reached.
+  if (getCursorAdvanceMethods().includes(func)) {
+    return function (...args) {
+      // Calling the original function with the proxy as 'this' causes ILLEGAL INVOCATION, so we use
+      // the original object.
+      func.apply(unwrap(this), args);
+      return wrap(this.request);
+    };
+  }
+  return function (...args) {
+    // Calling the original function with the proxy as 'this' causes ILLEGAL INVOCATION, so we use
+    // the original object.
+    return wrap(func.apply(unwrap(this), args));
+  };
+}
+function transformCachableValue(value) {
+  if (typeof value === 'function') return wrapFunction(value);
+  // This doesn't return, it just creates a 'done' promise for the transaction,
+  // which is later returned for transaction.done (see idbObjectHandler).
+  if (value instanceof IDBTransaction) cacheDonePromiseForTransaction(value);
+  if (instanceOfAny(value, getIdbProxyableTypes())) return new Proxy(value, idbProxyTraps);
+  // Return the same value back if we're not going to transform it.
+  return value;
+}
+function wrap(value) {
+  // We sometimes generate multiple promises from a single IDBRequest (eg when cursoring), because
+  // IDB is weird and a single IDBRequest can yield many responses, so these can't be cached.
+  if (value instanceof IDBRequest) return promisifyRequest(value);
+  // If we've already transformed this value before, reuse the transformed value.
+  // This is faster, but it also provides object equality.
+  if (transformCache.has(value)) return transformCache.get(value);
+  const newValue = transformCachableValue(value);
+  // Not all types are transformed.
+  // These may be primitive types, so they can't be WeakMap keys.
+  if (newValue !== value) {
+    transformCache.set(value, newValue);
+    reverseTransformCache.set(newValue, value);
+  }
+  return newValue;
+}
+const unwrap = value => reverseTransformCache.get(value);
+
+/**
+ * Open a database.
+ *
+ * @param name Name of the database.
+ * @param version Schema version.
+ * @param callbacks Additional callbacks.
+ */
+function openDB(name, version, {
+  blocked,
+  upgrade,
+  blocking,
+  terminated
+} = {}) {
+  const request = indexedDB.open(name, version);
+  const openPromise = wrap(request);
+  if (upgrade) {
+    request.addEventListener('upgradeneeded', event => {
+      upgrade(wrap(request.result), event.oldVersion, event.newVersion, wrap(request.transaction), event);
+    });
+  }
+  if (blocked) {
+    request.addEventListener('blocked', event => blocked(
+    // Casting due to https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/1405
+    event.oldVersion, event.newVersion, event));
+  }
+  openPromise.then(db => {
+    if (terminated) db.addEventListener('close', () => terminated());
+    if (blocking) {
+      db.addEventListener('versionchange', event => blocking(event.oldVersion, event.newVersion, event));
+    }
+  }).catch(() => {});
+  return openPromise;
+}
+const readMethods = ['get', 'getKey', 'getAll', 'getAllKeys', 'count'];
+const writeMethods = ['put', 'add', 'delete', 'clear'];
+const cachedMethods = new Map();
+function getMethod(target, prop) {
+  if (!(target instanceof IDBDatabase && !(prop in target) && typeof prop === 'string')) {
+    return;
+  }
+  if (cachedMethods.get(prop)) return cachedMethods.get(prop);
+  const targetFuncName = prop.replace(/FromIndex$/, '');
+  const useIndex = prop !== targetFuncName;
+  const isWrite = writeMethods.includes(targetFuncName);
+  if (
+  // Bail if the target doesn't exist on the target. Eg, getAll isn't in Edge.
+  !(targetFuncName in (useIndex ? IDBIndex : IDBObjectStore).prototype) || !(isWrite || readMethods.includes(targetFuncName))) {
+    return;
+  }
+  const method = async function (storeName, ...args) {
+    // isWrite ? 'readwrite' : undefined gzipps better, but fails in Edge :(
+    const tx = this.transaction(storeName, isWrite ? 'readwrite' : 'readonly');
+    let target = tx.store;
+    if (useIndex) target = target.index(args.shift());
+    // Must reject if op rejects.
+    // If it's a write operation, must reject if tx.done rejects.
+    // Must reject with op rejection first.
+    // Must resolve with op value.
+    // Must handle both promises (no unhandled rejections)
+    return (await Promise.all([target[targetFuncName](...args), isWrite && tx.done]))[0];
+  };
+  cachedMethods.set(prop, method);
+  return method;
+}
+replaceTraps(oldTraps => ({
+  ...oldTraps,
+  get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
+  has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop)
+}));
+const advanceMethodProps = ['continue', 'continuePrimaryKey', 'advance'];
+const methodMap = {};
+const advanceResults = new WeakMap();
+const ittrProxiedCursorToOriginalProxy = new WeakMap();
+const cursorIteratorTraps = {
+  get(target, prop) {
+    if (!advanceMethodProps.includes(prop)) return target[prop];
+    let cachedFunc = methodMap[prop];
+    if (!cachedFunc) {
+      cachedFunc = methodMap[prop] = function (...args) {
+        advanceResults.set(this, ittrProxiedCursorToOriginalProxy.get(this)[prop](...args));
+      };
+    }
+    return cachedFunc;
+  }
+};
+async function* iterate(...args) {
+  // tslint:disable-next-line:no-this-assignment
+  let cursor = this;
+  if (!(cursor instanceof IDBCursor)) {
+    cursor = await cursor.openCursor(...args);
+  }
+  if (!cursor) return;
+  cursor = cursor;
+  const proxiedCursor = new Proxy(cursor, cursorIteratorTraps);
+  ittrProxiedCursorToOriginalProxy.set(proxiedCursor, cursor);
+  // Map this double-proxy back to the original, so other cursor methods work.
+  reverseTransformCache.set(proxiedCursor, unwrap(cursor));
+  while (cursor) {
+    yield proxiedCursor;
+    // If one of the advancing methods was not called, call continue().
+    cursor = await (advanceResults.get(proxiedCursor) || cursor.continue());
+    advanceResults.delete(proxiedCursor);
+  }
+}
+function isIteratorProp(target, prop) {
+  return prop === Symbol.asyncIterator && instanceOfAny(target, [IDBIndex, IDBObjectStore, IDBCursor]) || prop === 'iterate' && instanceOfAny(target, [IDBIndex, IDBObjectStore]);
+}
+replaceTraps(oldTraps => ({
+  ...oldTraps,
+  get(target, prop, receiver) {
+    if (isIteratorProp(target, prop)) return iterate;
+    return oldTraps.get(target, prop, receiver);
+  },
+  has(target, prop) {
+    return isIteratorProp(target, prop) || oldTraps.has(target, prop);
+  }
+}));
+
+const openDatabase = async (databaseName, dataBaseVersion) => {
+  return openDB(databaseName, dataBaseVersion);
+};
+
 const listChatViewEvents = async (sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName) => {
   if (typeof indexedDB === 'undefined') {
     return [];
@@ -1126,39 +1392,47 @@ const listChatViewEvents = async (sessionId, databaseName, dataBaseVersion, even
 };
 
 const chatDebugUriPattern = /^chat-debug:\/\/([^/?#]+)$/;
+const invalidSessionIdPattern = /[/?#]/;
 const parseChatDebugUri = uri => {
   if (!uri) {
-    throw new Error('Missing URI');
+    return {
+      code: ParseChatDebugUriErrorCode.MissingUri,
+      message: 'Missing URI',
+      type: 'error'
+    };
   }
   const match = uri.match(chatDebugUriPattern);
   if (!match) {
-    throw new Error('Invalid URI format');
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidUriFormat,
+      message: 'Invalid URI format',
+      type: 'error'
+    };
   }
   const encodedSessionId = match[1];
   let sessionId;
   try {
     sessionId = decodeURIComponent(encodedSessionId);
   } catch {
-    throw new Error('Invalid URI encoding');
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidUriEncoding,
+      message: 'Invalid URI encoding',
+      type: 'error'
+    };
   }
-  if (!sessionId || /[/?#]/.test(sessionId)) {
-    throw new Error('Invalid session id');
+  if (!sessionId || invalidSessionIdPattern.test(sessionId)) {
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidSessionId,
+      message: 'Invalid session id',
+      type: 'error'
+    };
   }
-  return sessionId;
+  return {
+    sessionId,
+    type: 'success'
+  };
 };
 
-const getInvalidUriMessage = uri => {
-  if (!uri) {
-    return 'Unable to load debug session: missing URI. Expected format: chat-debug://<sessionId>.';
-  }
-  return `Unable to load debug session: invalid URI "${uri}". Expected format: chat-debug://<sessionId>.`;
-};
-const getSessionNotFoundMessage = sessionId => {
-  return `No chat session found for sessionId "${sessionId}".`;
-};
-const getFailedToLoadMessage = sessionId => {
-  return `Failed to load chat debug session "${sessionId}". Please try again.`;
-};
 const loadContent = async state => {
   const {
     databaseName,
@@ -1167,18 +1441,19 @@ const loadContent = async state => {
     sessionIdIndexName,
     uri
   } = state;
-  let sessionId = '';
-  try {
-    sessionId = parseChatDebugUri(uri);
-  } catch {
+  const parsed = parseChatDebugUri(uri);
+  if (parsed.type === 'error') {
     return {
       ...state,
-      errorMessage: getInvalidUriMessage(uri),
+      errorMessage: getInvalidUriMessage(uri, parsed.code),
       events: [],
       initial: false,
-      sessionId
+      sessionId: ''
     };
   }
+  const {
+    sessionId
+  } = parsed;
   try {
     const events = await listChatViewEvents(sessionId, databaseName, dataBaseVersion, eventStoreName, sessionIdIndexName);
     if (events.length === 0) {
@@ -1253,9 +1528,10 @@ const getCss = () => {
   white-space: nowrap;
 }
 
-.ChatDebugViewSession {
-  font-size: 12px;
-  opacity: 0.8;
+.ChatDebugViewToggleLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .ChatDebugViewEventCount {
@@ -1363,6 +1639,7 @@ const Input = 6;
 const Span = 8;
 const Text = 12;
 const Pre = 51;
+const Label = 66;
 
 const text = data => {
   return {
@@ -1376,6 +1653,7 @@ const HandleInput = 4;
 const HandleFilterInput = 5;
 
 const numberRegex = /^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?/;
+const whitespaceRegex = /\s/u;
 const getTokenSegments = json => {
   const segments = [];
   const pushToken = (className, value) => {
@@ -1416,7 +1694,7 @@ const getTokenSegments = json => {
       }
       const tokenValue = json.slice(start, i);
       let lookAheadIndex = i;
-      while (lookAheadIndex < json.length && /\s/u.test(json[lookAheadIndex])) {
+      while (lookAheadIndex < json.length && whitespaceRegex.test(json[lookAheadIndex])) {
         lookAheadIndex++;
       }
       const className = json[lookAheadIndex] === ':' ? 'TokenKey' : 'TokenString';
@@ -1476,7 +1754,8 @@ const getEventNode = event => {
     type: Pre
   }, ...tokenNodes];
 };
-const getChatDebugViewDom = (sessionId, errorMessage, filterValue, showEventStreamFinishedEvents, showInputEvents, showResponsePartEvents, events) => {
+
+const getChatDebugViewDom = (errorMessage, filterValue, showEventStreamFinishedEvents, showInputEvents, showResponsePartEvents, events) => {
   if (errorMessage) {
     return [{
       childCount: 1,
@@ -1489,9 +1768,13 @@ const getChatDebugViewDom = (sessionId, errorMessage, filterValue, showEventStre
     }, text(errorMessage)];
   }
   const eventNodes = events.flatMap(getEventNode);
-  const eventCountText = `${events.length} event${events.length === 1 ? '' : 's'}`;
+  const trimmedFilterValue = filterValue.trim();
+  const hasFilterValue = trimmedFilterValue.length > 0;
+  const noFilteredEventsMessage = `no events found matching ${trimmedFilterValue}`;
+  const eventCountText = events.length === 0 && hasFilterValue ? noFilteredEventsMessage : `${events.length} event${events.length === 1 ? '' : 's'}`;
+  const emptyMessage = events.length === 0 && hasFilterValue ? noFilteredEventsMessage : 'No events';
   return [{
-    childCount: 4,
+    childCount: 3,
     className: 'ChatDebugView',
     type: Div
   }, {
@@ -1499,17 +1782,23 @@ const getChatDebugViewDom = (sessionId, errorMessage, filterValue, showEventStre
     className: 'ChatDebugViewTop',
     type: Div
   }, {
+    autocomplete: 'off',
     childCount: 0,
     className: 'InputBox',
+    inputType: 'search',
     name: Filter,
     onInput: HandleFilterInput,
     placeholder: 'Filter events',
     type: Input,
     value: filterValue
   }, {
-    childCount: 6,
+    childCount: 3,
     className: 'ChatDebugViewToggle',
     type: Div
+  }, {
+    childCount: 2,
+    className: 'ChatDebugViewToggleLabel',
+    type: Label
   }, {
     checked: showEventStreamFinishedEvents,
     childCount: 0,
@@ -1518,6 +1807,10 @@ const getChatDebugViewDom = (sessionId, errorMessage, filterValue, showEventStre
     onChange: HandleInput,
     type: Input
   }, text('Show event stream finished events'), {
+    childCount: 2,
+    className: 'ChatDebugViewToggleLabel',
+    type: Label
+  }, {
     checked: showInputEvents,
     childCount: 0,
     inputType: 'checkbox',
@@ -1525,6 +1818,10 @@ const getChatDebugViewDom = (sessionId, errorMessage, filterValue, showEventStre
     onChange: HandleInput,
     type: Input
   }, text('Show input events'), {
+    childCount: 2,
+    className: 'ChatDebugViewToggleLabel',
+    type: Label
+  }, {
     checked: showResponsePartEvents,
     childCount: 0,
     inputType: 'checkbox',
@@ -1536,10 +1833,6 @@ const getChatDebugViewDom = (sessionId, errorMessage, filterValue, showEventStre
     className: 'ChatDebugViewEventCount',
     type: Div
   }, text(eventCountText), {
-    childCount: 1,
-    className: 'ChatDebugViewSession',
-    type: Div
-  }, text(`sessionId: ${sessionId || '(none)'}`), {
     childCount: eventNodes.length === 0 ? 1 : eventNodes.length,
     className: 'ChatDebugViewEvents',
     type: Div
@@ -1547,12 +1840,12 @@ const getChatDebugViewDom = (sessionId, errorMessage, filterValue, showEventStre
     childCount: 1,
     className: errorMessage ? 'ChatDebugViewError' : 'ChatDebugViewEmpty',
     type: Div
-  }, text(errorMessage || 'No events')] : eventNodes)];
+  }, text(errorMessage || emptyMessage)] : eventNodes)];
 };
 
 const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
   return events.filter(event => {
-    if (!showInputEvents && event.type === 'handle-input') {
+    if (!showInputEvents && (event.type === 'handle-input' || event.type === 'handle-submit')) {
       return false;
     }
     if (!showResponsePartEvents && event.type === 'sse-response-part') {
@@ -1588,7 +1881,7 @@ const withSessionEventIds = events => {
 const renderItems = (oldState, newState) => {
   const eventsWithIds = withSessionEventIds(newState.events);
   const filteredEvents = getFilteredEvents(eventsWithIds, newState.filterValue, newState.showInputEvents, newState.showResponsePartEvents, newState.showEventStreamFinishedEvents);
-  const dom = getChatDebugViewDom(newState.sessionId, newState.errorMessage, newState.filterValue, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, filteredEvents);
+  const dom = getChatDebugViewDom(newState.errorMessage, newState.filterValue, newState.showEventStreamFinishedEvents, newState.showInputEvents, newState.showResponsePartEvents, filteredEvents);
   return [SetDom2, newState.uid, dom];
 };
 

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@lvce-editor/chat-debug-view",
-  "version": "3.0.0",
+  "version": "3.3.0",
   "description": "Chat Debug View Worker",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/lvce-editor/chat-view.git"
+    "url": "git+https://github.com/lvce-editor/chat-debug-view.git"
   },
   "license": "MIT",
   "author": "Lvce Editor",