@lvce-editor/chat-debug-view 10.22.0 → 10.23.0

package/dist/chatDebugViewWorkerMain.js

@@ -1138,6 +1138,7 @@ const Img = 17;
 const Section = 41;
 const Search = 42;
 const Li = 48;
+const A = 53;
 const Ul = 60;
 const TextArea = 62;
 const Reference = 100;
@@ -1469,6 +1470,7 @@ const i18nString = (key, placeholders = emptyObject) => {
 const All = 'All';
 const CloseDetails = 'Close details';
 const Copy = 'Copy';
+const CopyAsFetch = 'Copy As Fetch';
 const CachedTokens = 'Cached Tokens';
 const DetailSections = 'Detail sections';
 const Duration$1 = 'Time';
@@ -1526,6 +1528,9 @@ const WindowSummary = 'Window {PH1}-{PH2} of {PH3}';
 const copy = () => {
   return i18nString(Copy);
 };
+const copyAsFetch = () => {
+  return i18nString(CopyAsFetch);
+};
 const openInNewTab = () => {
   return i18nString(OpenInNewTab);
 };
@@ -3469,6 +3474,12 @@ const getMenuEntriesTableBody = props => {
     flags: None$1,
     id: 'copy',
     label: copy()
+  }, {
+    args: [props.eventIndex],
+    command: 'ChatDebug.handleTableRowCopyAsFetch',
+    flags: None$1,
+    id: 'copy-as-fetch',
+    label: copyAsFetch()
   }, {
     args: [props.eventIndex],
     command: 'ChatDebug.handleTableRowOpenInNewTab',
@@ -5013,6 +5024,88 @@ const handleTableRowCopy = async (state, eventIndex) => {
   return state;
 };
 
+const indent = (value, count) => {
+  const prefix = ' '.repeat(count);
+  return value.split('\n').map(line => `${prefix}${line}`).join('\n');
+};
+
+const escapeSingleQuotedString = value => {
+  return value.replaceAll('\\', '\\\\').replaceAll("'", "\\'");
+};
+
+const toSingleQuotedString = value => {
+  return `'${escapeSingleQuotedString(value)}'`;
+};
+
+const getBodyLine = value => {
+  if (typeof value === 'string') {
+    return `  body: ${toSingleQuotedString(value)},`;
+  }
+  if (typeof value === 'function' || typeof value === 'symbol' || typeof value === 'bigint') {
+    return `  body: ${toSingleQuotedString(String(value))},`;
+  }
+  let serializedBody;
+  try {
+    serializedBody = JSON.stringify(value, null, 2);
+  } catch {
+    return `  body: ${toSingleQuotedString(String(value))},`;
+  }
+  if (!serializedBody) {
+    return `  body: ${toSingleQuotedString(String(value))},`;
+  }
+  return `  body: JSON.stringify(\n${indent(serializedBody, 4)}\n  ),`;
+};
+
+const getHeaderLines = value => {
+  if (!isRecord(value)) {
+    return [];
+  }
+  const lines = [];
+  for (const [key, headerValue] of Object.entries(value)) {
+    if (typeof headerValue === 'string' || typeof headerValue === 'number' || typeof headerValue === 'boolean') {
+      lines.push(`    ${toSingleQuotedString(key)}: ${toSingleQuotedString(String(headerValue))},`);
+    }
+  }
+  if (lines.length === 0) {
+    return [];
+  }
+  return ['  headers: {', ...lines, '  },'];
+};
+
+const getFetchCode = event => {
+  if (typeof event.url !== 'string') {
+    return undefined;
+  }
+  const lines = [];
+  if (typeof event.method === 'string' && event.method !== 'GET') {
+    lines.push(`  method: ${toSingleQuotedString(event.method)},`);
+  }
+  lines.push(...getHeaderLines(event.headers));
+  if (event.body !== undefined) {
+    lines.push(getBodyLine(event.body));
+  }
+  if (lines.length === 0) {
+    return `fetch(${toSingleQuotedString(event.url)})`;
+  }
+  return `fetch(${toSingleQuotedString(event.url)}, {\n${lines.join('\n')}\n})`;
+};
+
+const handleTableRowCopyAsFetch = async (state, eventIndex) => {
+  const currentEvents = getCurrentEvents$1(state);
+  const event = currentEvents[eventIndex];
+  if (!event) {
+    return state;
+  }
+  const fetchCode = getFetchCode(event);
+  if (fetchCode) {
+    await writeClipBoardText(fetchCode);
+    return state;
+  }
+  const text = JSON.stringify(event, null, 2);
+  await writeClipBoardText(text);
+  return state;
+};
+
 const toDataUri$1 = text => {
   return `data:application/json,${encodeURIComponent(text)}`;
 };
@@ -6454,6 +6547,87 @@ const getNormalizedDetailTabs = (selectedEvent, detailTabs) => {
   return createDetailTabs(getSelectedDetailTab(detailTabs), selectedEvent);
 };
 
+const getHeaderRowNodes = (item, index) => {
+  return [{
+    childCount: 2,
+    className: mergeClassNames(ChatDebugViewHeadersRow, index % 2 === 0 ? ChatDebugViewHeadersRowOdd : ChatDebugViewHeadersRowEven),
+    type: Li
+  }, {
+    childCount: 1,
+    className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellName),
+    type: Div
+  }, text(item.key), {
+    childCount: 1,
+    className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellValue),
+    type: Div
+  }, text(item.value)];
+};
+
+const getHeadersTableNodes = items => {
+  const headerRows = [];
+  for (const [index, item] of items.entries()) {
+    headerRows.push(...getHeaderRowNodes(item, index));
+  }
+  return [{
+    childCount: items.length,
+    className: ChatDebugViewHeadersTable,
+    type: Ul
+  }, ...headerRows];
+};
+
+const accessControlExposeHeadersText = 'Access-Control-Expose-Headers';
+const accessControlExposeHeadersUrl = 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers';
+const getInfoNodes = section => {
+  if (section.key !== ResponseHeaders) {
+    return [text(section.info)];
+  }
+  const linkIndex = section.info.indexOf(accessControlExposeHeadersText);
+  if (linkIndex === -1) {
+    return [text(section.info)];
+  }
+  const infoNodes = [];
+  const prefix = section.info.slice(0, linkIndex);
+  const suffix = section.info.slice(linkIndex + accessControlExposeHeadersText.length);
+  if (prefix) {
+    infoNodes.push(text(prefix));
+  }
+  infoNodes.push({
+    childCount: 1,
+    href: accessControlExposeHeadersUrl,
+    rel: 'noopener noreferrer',
+    target: '_blank',
+    type: A
+  });
+  infoNodes.push(text(accessControlExposeHeadersText));
+  if (suffix) {
+    infoNodes.push(text(suffix));
+  }
+  return infoNodes;
+};
+const getHeaderSectionNodes = section => {
+  const hasInfoMessage = section.isExpanded && section.info !== '';
+  const childCount = section.isExpanded ? 2 + Number(hasInfoMessage) : 1;
+  const infoNodes = hasInfoMessage ? getInfoNodes(section) : [];
+  return [{
+    childCount,
+    className: ChatDebugViewHeadersSection,
+    type: Div
+  }, {
+    ariaExpanded: section.isExpanded,
+    childCount: 1,
+    className: ChatDebugViewHeadersSectionHeading,
+    name: ToggleHeadersSection,
+    onChange: HandleFilterInput,
+    onClick: HandleFilterInput,
+    type: Button$1,
+    value: section.key
+  }, text(section.heading), ...(section.isExpanded ? getHeadersTableNodes(section.items) : []), ...(hasInfoMessage ? [{
+    childCount: infoNodes.length,
+    className: ChatDebugViewHeadersSectionInfo,
+    type: Div
+  }, ...infoNodes] : [])];
+};
+
 const httpStatusLabels = {
   100: 'Continue',
   101: 'Switching Protocols',
@@ -6629,74 +6803,43 @@ const getHeaderValueText = value => {
   return stringifyHeaderValue(value);
 };
 
-const getHeaderRowNodes = (headerName, headerValue, index) => {
-  return [{
-    childCount: 2,
-    className: mergeClassNames(ChatDebugViewHeadersRow, index % 2 === 0 ? ChatDebugViewHeadersRowOdd : ChatDebugViewHeadersRowEven),
-    type: Li
-  }, {
-    childCount: 1,
-    className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellName),
-    type: Div
-  }, text(headerName), {
-    childCount: 1,
-    className: mergeClassNames(ChatDebugViewHeadersCell, ChatDebugViewHeadersCellValue),
-    type: Div
-  }, text(getHeaderValueText(headerValue))];
-};
-
-const getHeadersTableNodes = headers => {
-  const headerRows = [];
-  for (const [index, [headerName, headerValue]] of headers.entries()) {
-    headerRows.push(...getHeaderRowNodes(headerName, headerValue, index));
-  }
-  return [{
-    childCount: headers.length,
-    className: ChatDebugViewHeadersTable,
-    type: Ul
-  }, ...headerRows];
+const toHeaderSectionItems = entries => {
+  return entries.map(([key, value]) => ({
+    key,
+    value: getHeaderValueText(value)
+  }));
 };
-
-const getHeaderSectionNodes = (section, label, headers, collapsedHeaderSections, infoMessage = '') => {
-  const isCollapsed = collapsedHeaderSections.includes(section);
-  const hasInfoMessage = !isCollapsed && infoMessage !== '';
-  const childCount = isCollapsed ? 1 : 2 + Number(hasInfoMessage);
-  return [{
-    childCount,
-    className: ChatDebugViewHeadersSection,
-    type: Div
+const getVisibleHeaderSections = (selectedEvent, collapsedHeaderSections = []) => {
+  const sections = [{
+    heading: general(),
+    info: '',
+    items: toHeaderSectionItems(getGeneralEntries(selectedEvent)),
+    key: General
   }, {
-    ariaExpanded: !isCollapsed,
-    childCount: 1,
-    className: ChatDebugViewHeadersSectionHeading,
-    name: ToggleHeadersSection,
-    onChange: HandleFilterInput,
-    onClick: HandleFilterInput,
-    type: Button$1,
-    value: section
-  }, text(label), ...(isCollapsed ? [] : getHeadersTableNodes(headers)), ...(hasInfoMessage ? [{
-    childCount: 1,
-    className: ChatDebugViewHeadersSectionInfo,
-    type: Div
-  }, text(infoMessage)] : [])];
+    heading: responseHeaders(),
+    info: responseHeadersInfo(),
+    items: toHeaderSectionItems(getHeaders(isHeadersRecord(selectedEvent?.endValue) ? selectedEvent.endValue.headers : undefined)),
+    key: ResponseHeaders
+  }, {
+    heading: requestHeaders(),
+    info: '',
+    items: toHeaderSectionItems(getHeaders(selectedEvent?.headers)),
+    key: RequestHeaders
+  }];
+  return sections.filter(section => section.items.length > 0).map(section => ({
+    ...section,
+    isExpanded: !collapsedHeaderSections.includes(section.key)
+  }));
 };
 
 const getHeadersContentNodes = (responseEventNodes, selectedEvent, collapsedHeaderSections = []) => {
-  const generalEntries = getGeneralEntries(selectedEvent);
-  const requestHeaders$1 = getHeaders(selectedEvent?.headers);
-  const responseHeaders$1 = getHeaders(isHeadersRecord(selectedEvent?.endValue) ? selectedEvent.endValue.headers : undefined);
-  if (generalEntries.length === 0 && requestHeaders$1.length === 0 && responseHeaders$1.length === 0) {
+  const sections = getVisibleHeaderSections(selectedEvent, collapsedHeaderSections);
+  if (sections.length === 0) {
     return responseEventNodes;
   }
   const nodes = [];
-  if (generalEntries.length > 0) {
-    nodes.push(...getHeaderSectionNodes(General, general(), generalEntries, collapsedHeaderSections));
-  }
-  if (responseHeaders$1.length > 0) {
-    nodes.push(...getHeaderSectionNodes(ResponseHeaders, responseHeaders(), responseHeaders$1, collapsedHeaderSections, responseHeadersInfo()));
-  }
-  if (requestHeaders$1.length > 0) {
-    nodes.push(...getHeaderSectionNodes(RequestHeaders, requestHeaders(), requestHeaders$1, collapsedHeaderSections));
+  for (const section of sections) {
+    nodes.push(...getHeaderSectionNodes(section));
   }
   return nodes;
 };
@@ -8879,6 +9022,7 @@ const commandMap = {
   'ChatDebug.handleTableResizerPointerMove': wrapCommand(handleTableResizerPointerMove),
   'ChatDebug.handleTableResizerPointerUp': wrapCommand(handleTableResizerPointerUp),
   'ChatDebug.handleTableRowCopy': wrapCommand(handleTableRowCopy),
+  'ChatDebug.handleTableRowCopyAsFetch': wrapCommand(handleTableRowCopyAsFetch),
   'ChatDebug.handleTableRowDoubleClick': wrapCommand(handleTableRowDoubleClick),
   'ChatDebug.handleTableRowOpenInNewTab': wrapCommand(handleTableRowOpenInNewTab),
   'ChatDebug.handleTableScrollBarPointerDown': wrapCommand(handleTableScrollBarPointerDown),

package/package.json

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