Refactor content viewer components and use for multpart and request body (#333)

src-web/components/responseViewers/PdfViewer.tsx

@@ -3,7 +3,7 @@ import 'react-pdf/dist/Page/AnnotationLayer.css';
 import { convertFileSrc } from '@tauri-apps/api/core';
 import './PdfViewer.css';
 import type { PDFDocumentProxy } from 'pdfjs-dist';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Document, Page } from 'react-pdf';
 import { useContainerSize } from '../../hooks/useContainerQuery';
 
@@ -15,7 +15,8 @@ import('react-pdf').then(({ pdfjs }) => {
 });
 
 interface Props {
-  bodyPath: string;
+  bodyPath?: string;
+  data?: Uint8Array;
 }
 
 const options = {
@@ -23,17 +24,29 @@ const options = {
   standardFontDataUrl: '/standard_fonts/',
 };
 
-export function PdfViewer({ bodyPath }: Props) {
+export function PdfViewer({ bodyPath, data }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [numPages, setNumPages] = useState<number>();
+  const [src, setSrc] = useState<string | { data: Uint8Array }>();
 
   const { width: containerWidth } = useContainerSize(containerRef);
 
+  useEffect(() => {
+    if (bodyPath) {
+      setSrc(convertFileSrc(bodyPath));
+    } else if (data) {
+      // Create a copy to avoid "Buffer is already detached" errors
+      // This happens when the ArrayBuffer is transferred/detached elsewhere
+      const dataCopy = new Uint8Array(data);
+      setSrc({ data: dataCopy });
+    } else {
+      setSrc(undefined);
+    }
+  }, [bodyPath, data]);
+
   const onDocumentLoadSuccess = ({ numPages: nextNumPages }: PDFDocumentProxy): void => {
     setNumPages(nextNumPages);
   };
-
-  const src = convertFileSrc(bodyPath);
   return (
     <div ref={containerRef} className="w-full h-full overflow-y-auto">
       <Document