handleExportPdf() in Suna, an open source generalist AI agent.

In this article, we review a function named handleExportPdf in Suna codebase. Suna is an open source generalist AI agent. We will look at: Where this handleExportPdf function is located? Where is it called from? What this function does? Where this handleExportPdf function is located? This function is located in components/thread/file-viewer-modal.tsx. FileViewerModal component renders the file that is part of stream output response. Where is handleExportPdf called from? In this below image, this modal is rendered in FileViewerModal component. When you click on “Export as PDF” dropdown, it shows two options: Portrait When you click on Portrait, it shows the file in print window dialog as shown below: 2. Landscape When you click on Landscape, below is an image showing the print window dialog in landscape mode: What this function does? This handleExportPdf function open print window dialog in a new tab. It contains the below code, picked from file-viewer-modal.ts // Handle PDF export for markdown files const handleExportPdf = useCallback(async (orientation: 'portrait' | 'landscape' = 'portrait') => { if (!selectedFilePath || isExportingPdf || !isMarkdownFile(selectedFilePath)) return; setIsExportingPdf(true); try { // Use the ref to access the markdown content directly if (!markdownRef.current) { throw new Error('Markdown content not found'); } // Create a standalone document for printing const printWindow = window.open('', '_blank'); if (!printWindow) { throw new Error('Unable to open print window. Please check if popup blocker is enabled.'); } // Get the base URL for resolving relative URLs const baseUrl = window.location.origin; // Generate HTML content const fileName = selectedFilePath.split('/').pop() || 'document'; const pdfName = fileName.replace(/\.md$/, ''); // Extract content const markdownContent = markdownRef.current.innerHTML; // Generate a full HTML document with controlled styles const htmlContent = ` ... ` // Write the HTML content to the new window printWindow.document.open(); printWindow.document.write(htmlContent); printWindow.document.close(); toast.success("PDF export initiated. Check your print dialog."); About me: Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos. Want me to review your codebase architecture? book a meeting — https://thinkthroo.com/consultation/codebase-architecture-review Business enquiries — ramu@thinkthroo.com My Github — https://github.com/ramu-narasinga My website — https://ramunarasinga.com My Youtube channel — https://www.youtube.com/@ramu-narasinga Learning platform — https://thinkthroo.com Codebase Architecture — https://app.thinkthroo.com/architecture Best practices — https://app.thinkthroo.com/best-practices Production-grade projects — https://app.thinkthroo.com/production-grade-projects References: https://github.com/kortix-ai/suna/blob/main/frontend/src/components/thread/file-viewer-modal.tsx#L410C9-L410C25

May 1, 2025 - 05:20

handleExportPdf() in Suna, an open source generalist AI agent.

In this article, we review a function named handleExportPdf in Suna codebase. Suna is an open source generalist AI agent. We will look at:

Where this handleExportPdf function is located?
Where is it called from?
What this function does?

Where this handleExportPdf function is located?

This function is located in components/thread/file-viewer-modal.tsx. FileViewerModal component renders the file that is part of stream output response.

Where is handleExportPdf called from?

In this below image, this modal is rendered in FileViewerModal component.

When you click on “Export as PDF” dropdown, it shows two options:

Portrait

When you click on Portrait, it shows the file in print window dialog as shown below:

2. Landscape

When you click on Landscape, below is an image showing the print window dialog in landscape mode:

What this function does?

This handleExportPdf function open print window dialog in a new tab. It contains the below code, picked from file-viewer-modal.ts

// Handle PDF export for markdown files
const handleExportPdf = useCallback(async (orientation: 'portrait' | 'landscape' = 'portrait') => {
  if (!selectedFilePath || isExportingPdf || !isMarkdownFile(selectedFilePath)) return;

  setIsExportingPdf(true);

  try {
    // Use the ref to access the markdown content directly
    if (!markdownRef.current) {
      throw new Error('Markdown content not found');
    }

    // Create a standalone document for printing
    const printWindow = window.open('', '_blank');
    if (!printWindow) {
      throw new Error('Unable to open print window. Please check if popup blocker is enabled.');
    }

    // Get the base URL for resolving relative URLs
    const baseUrl = window.location.origin;

    // Generate HTML content
    const fileName = selectedFilePath.split('/').pop() || 'document';
    const pdfName = fileName.replace(/\.md$/, '');

    // Extract content
    const markdownContent = markdownRef.current.innerHTML;

    // Generate a full HTML document with controlled styles
    const htmlContent = `  
      ...
    `

    // Write the HTML content to the new window
    printWindow.document.open();
    printWindow.document.write(htmlContent);
    printWindow.document.close();

    toast.success("PDF export initiated. Check your print dialog.");

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

Want me to review your codebase architecture? book a meeting — https://thinkthroo.com/consultation/codebase-architecture-review

Business enquiries — ramu@thinkthroo.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@ramu-narasinga

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects