@lvce-editor/chat-debug-view 3.2.0 → 3.4.0

package/dist/chatDebugViewWorkerMain.js

@@ -1067,52 +1067,310 @@ const handleInput = (state, name, value, checked) => {
   return state;
 };
 
-const requestToPromise = async createRequest => {
-  const request = createRequest();
-  const {
-    promise,
-    reject,
-    resolve
-  } = Promise.withResolvers();
-  const onSuccess = () => {
-    cleanup();
-    resolve(request.result);
-  };
-  const onError = () => {
-    cleanup();
-    reject(request.error || new Error('IndexedDB request failed'));
-  };
-  const cleanup = () => {
-    request.removeEventListener('success', onSuccess);
-    request.removeEventListener('error', onError);
-  };
-  request.addEventListener('success', onSuccess);
-  request.addEventListener('error', onError);
-  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 [];
@@ -1135,36 +1393,39 @@ const listChatViewEvents = async (sessionId, databaseName, dataBaseVersion, even
 
 const chatDebugUriPattern = /^chat-debug:\/\/([^/?#]+)$/;
 const invalidSessionIdPattern = /[/?#]/;
-const ParseChatDebugUriErrorCode = {
-  InvalidSessionId: 'invalid-session-id',
-  InvalidUriEncoding: 'invalid-uri-encoding',
-  InvalidUriFormat: 'invalid-uri-format',
-  MissingUri: 'missing-uri'
-};
-const createErrorResult = (code, message) => {
-  return {
-    code,
-    message,
-    type: 'error'
-  };
-};
 const parseChatDebugUri = uri => {
   if (!uri) {
-    return createErrorResult(ParseChatDebugUriErrorCode.MissingUri, 'Missing URI');
+    return {
+      code: ParseChatDebugUriErrorCode.MissingUri,
+      message: 'Missing URI',
+      type: 'error'
+    };
   }
   const match = uri.match(chatDebugUriPattern);
   if (!match) {
-    return createErrorResult(ParseChatDebugUriErrorCode.InvalidUriFormat, 'Invalid URI format');
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidUriFormat,
+      message: 'Invalid URI format',
+      type: 'error'
+    };
   }
   const encodedSessionId = match[1];
   let sessionId;
   try {
     sessionId = decodeURIComponent(encodedSessionId);
   } catch {
-    return createErrorResult(ParseChatDebugUriErrorCode.InvalidUriEncoding, 'Invalid URI encoding');
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidUriEncoding,
+      message: 'Invalid URI encoding',
+      type: 'error'
+    };
   }
   if (!sessionId || invalidSessionIdPattern.test(sessionId)) {
-    return createErrorResult(ParseChatDebugUriErrorCode.InvalidSessionId, 'Invalid session id');
+    return {
+      code: ParseChatDebugUriErrorCode.InvalidSessionId,
+      message: 'Invalid session id',
+      type: 'error'
+    };
   }
   return {
     sessionId,
@@ -1172,18 +1433,6 @@ const parseChatDebugUri = uri => {
   };
 };
 
-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 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,
@@ -1285,11 +1534,6 @@ const getCss = () => {
   gap: 4px;
 }
 
-.ChatDebugViewSession {
-  font-size: 12px;
-  opacity: 0.8;
-}
-
 .ChatDebugViewEventCount {
   font-size: 12px;
   opacity: 0.8;
@@ -1510,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,
@@ -1529,7 +1774,7 @@ const getChatDebugViewDom = (sessionId, errorMessage, filterValue, showEventStre
   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
   }, {
@@ -1537,6 +1782,7 @@ const getChatDebugViewDom = (sessionId, errorMessage, filterValue, showEventStre
     className: 'ChatDebugViewTop',
     type: Div
   }, {
+    autocomplete: 'off',
     childCount: 0,
     className: 'InputBox',
     inputType: 'search',
@@ -1587,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
@@ -1601,6 +1843,28 @@ const getChatDebugViewDom = (sessionId, errorMessage, filterValue, showEventStre
   }, text(errorMessage || emptyMessage)] : eventNodes)];
 };
 
+const RE_SPACE = /\s+/;
+const parseFilterValue = filterValue => {
+  const normalizedFilter = filterValue.trim().toLowerCase();
+  if (!normalizedFilter) {
+    return {
+      filterText: '',
+      toolsOnly: false
+    };
+  }
+  const parts = normalizedFilter.split(RE_SPACE);
+  const toolsOnly = parts.includes('@tools');
+  const filterText = parts.filter(part => part !== '@tools').join(' ');
+  return {
+    filterText,
+    toolsOnly
+  };
+};
+
+const toolEventTypePrefix = 'tool-execution-';
+const isToolEvent = event => {
+  return event.type.startsWith(toolEventTypePrefix);
+};
 const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
   return events.filter(event => {
     if (!showInputEvents && (event.type === 'handle-input' || event.type === 'handle-submit')) {
@@ -1621,11 +1885,15 @@ const getVisibleEvents = (events, showInputEvents, showResponsePartEvents, showE
 };
 const getFilteredEvents = (events, filterValue, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents) => {
   const visibleEvents = getVisibleEvents(events, showInputEvents, showResponsePartEvents, showEventStreamFinishedEvents);
-  const normalizedFilter = filterValue.trim().toLowerCase();
-  if (!normalizedFilter) {
-    return visibleEvents;
+  const {
+    filterText,
+    toolsOnly
+  } = parseFilterValue(filterValue);
+  const filteredBySyntax = toolsOnly ? visibleEvents.filter(isToolEvent) : visibleEvents;
+  if (!filterText) {
+    return filteredBySyntax;
   }
-  return visibleEvents.filter(event => JSON.stringify(event).toLowerCase().includes(normalizedFilter));
+  return filteredBySyntax.filter(event => JSON.stringify(event).toLowerCase().includes(filterText));
 };
 
 const withSessionEventIds = events => {
@@ -1639,7 +1907,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,6 +1,6 @@
 {
   "name": "@lvce-editor/chat-debug-view",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "Chat Debug View Worker",
   "repository": {
     "type": "git",