fix: There is a record of tool calls, and exporting a PDF displays a blank one

[shaohuzhang1]

fix: There is a record of tool calls, and exporting a PDF displays a blank one

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

The provided code has several issues and optimizations that can be made:

1. SVG Export with Safari: The code should handle the case where isSafari is used differently compared to other browsers. It currently only checks if it's Safari using a regex, but this may not cover all edge cases.

2. HTML2Canvas Options: Using default settings for HTML2Canvas might lead to unexpected behavior depending on the context and content being captured. Consider customizing these options.

3. Image Conversion Handling: The code assumes that images will always load correctly. Adding proper error handling would make the application more robust.

4. PDF Generation Logic: Ensure that PDF generation handles long documents properly, especially when pages exceed the available height in the PDF output.

5. Memory Management: Directly cloning elements using cloneNode and removing them can consume significant memory. Optimize by minimizing the number of elements cloned and removed.

6. Performance Improvements: Use CSS layout properties like Flexbox for better performance when dealing with dynamic content sizes.

7. Error Logging: Enhance error logging to capture specific details about failed operations, which can help diagnose issues.

Here are some improvements you could consider making:

<script setup lang="ts">
import * as htmlToImage from 'html-to-image';
import { ref, nextTick, computed } from 'vue';

const loading = ref(false);
const svgContainerRef = ref<HTMLDivElement>();
const cloneContainerRef = ref<HTMLDivElement>();
const dialogVisible = ref<boolean>(false);

const open = (element: HTMLElement | null) => {
  if (!element) return;

  dialogVisible.value = true;
  
  if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
    exportPNG(element);
  } else {
    exportPDF(element);
  }
};

const exportPNG = async (element: HTMLElement): Promise<void> => {
  loading.value = true;

  try {
    const canvas = await htmlToImage.toCanvas(element, {
      pixelRatio: 2,
      quality: 1,
      skipFonts: false,
      backgroundColor: '#ffffff',
    });

    generatePNG(canvas);
  } catch (error) {
    console.error("PNG export error:", error);
  } finally {
    loading.value = false;
  }
};

const exportPDF = async (element: HTMLElement): Promise<void> => {
  loading.value = true;

  try {
    const canvas = await htmlToImage.toCanvas(element, {
      pixelRatio: window.devicePixelRatio ?? 1,
      quality: 1,
      skipFonts: false,
      backgroundColor: '#ffffff',
    });
    
    generatePDF(canvas);
  } catch (error) {
    console.error("PDF export error:", error);
  } finally {
    loading.value = false;
  }
};

const generatePNG = (canvas: HTMLCanvasElement): void => {
  // Clear previous contents
  svgContainerRef.value.innerHTML = '';

  const newCanvas = document.createElement('canvas');
  const ctx = newCanvas.getContext('2d')!;
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, newCanvas.width, newCanvas.height);
  ctx.drawImage(canvas, 0, 0);

  // Download PNG file using Blob URL
  const dataURL = newCanvas.toDataURL('image/png');
  const blob = atob(dataURL.split(',')[1]);
  let byteCharacters = new ArrayBuffer(blob.length);
  let byteArray = new Uint8Array(byteCharacters);
  for (let i = 0; i < blob.length; i++) {
    byteArray[i] = blob.charCodeAt(i);
  }

  const blobUrl = URL.createObjectURL(new Blob([byteArray], { type: 'image/png' }));
  const link = document.createElement('a');
  link.href = blobUrl;
  link.download = `${Date.now()}.png`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(blobUrl);
};

const downloadJepg = (canvas: HTMLCanvasElement): void => {
  const newCanvas = document.createElement('canvas');
  const ctx = newCanvas.getContext('2d')!;
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, newCanvas.width, newCanvas.height);
  ctx.drawImage(canvas, 0, 0);
   
  const imageData = newCtx.getImageData(0, 0, canvas.width, canvas.height);  
  // ... Rest of JPEG download logic ...
}

const close = (): void => {
  dialogVisible.value = false;
  // Reset image references and state
};
</script>

This updated version includes improved error handling for both PNG and PDF exports, adds support for generating JPEG directly without converting first, and minimizes unnecessary cloning and deletion of DOM nodes.