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

src-web/components/RequestBodyViewer.tsx

@@ -1,9 +1,21 @@
 import type { HttpResponse } from '@yaakapp-internal/models';
+import { lazy, Suspense } from 'react';
 import { useHttpRequestBody } from '../hooks/useHttpRequestBody';
-import { languageFromContentType } from '../lib/contentType';
+import { getMimeTypeFromContentType, languageFromContentType } from '../lib/contentType';
 import { EmptyStateText } from './EmptyStateText';
-import { Editor } from './core/Editor/LazyEditor';
 import { LoadingIcon } from './core/LoadingIcon';
+import { AudioViewer } from './responseViewers/AudioViewer';
+import { CsvViewer } from './responseViewers/CsvViewer';
+import { ImageViewer } from './responseViewers/ImageViewer';
+import { MultipartViewer } from './responseViewers/MultipartViewer';
+import { SvgViewer } from './responseViewers/SvgViewer';
+import { TextViewer } from './responseViewers/TextViewer';
+import { VideoViewer } from './responseViewers/VideoViewer';
+import { WebPageViewer } from './responseViewers/WebPageViewer';
+
+const PdfViewer = lazy(() =>
+  import('./responseViewers/PdfViewer').then((m) => ({ default: m.PdfViewer })),
+);
 
 interface Props {
   response: HttpResponse;
@@ -32,21 +44,59 @@ function RequestBodyViewerInner({ response }: Props) {
     return <EmptyStateText>No request body</EmptyStateText>;
   }
 
-  const { bodyText } = data;
+  const { bodyText, body } = data;
 
   // Try to detect language from content-type header that was sent
   const contentTypeHeader = response.requestHeaders.find(
     (h) => h.name.toLowerCase() === 'content-type',
   );
   const contentType = contentTypeHeader?.value ?? null;
+  const mimeType = contentType ? getMimeTypeFromContentType(contentType).essence : null;
   const language = languageFromContentType(contentType, bodyText);
 
+  // Route to appropriate viewer based on content type
+  if (mimeType?.match(/^multipart/i)) {
+    const boundary = contentType?.split('boundary=')[1] ?? 'unknown';
+    // Create a copy because parseMultipart may detach the buffer
+    const bodyCopy = new Uint8Array(body);
+    return (
+      <MultipartViewer data={bodyCopy} boundary={boundary} idPrefix={`request.${response.id}`} />
+    );
+  }
+
+  if (mimeType?.match(/^image\/svg/i)) {
+    return <SvgViewer text={bodyText} />;
+  }
+
+  if (mimeType?.match(/^image/i)) {
+    return <ImageViewer data={body.buffer} />;
+  }
+
+  if (mimeType?.match(/^audio/i)) {
+    return <AudioViewer data={body} />;
+  }
+
+  if (mimeType?.match(/^video/i)) {
+    return <VideoViewer data={body} />;
+  }
+
+  if (mimeType?.match(/csv|tab-separated/i)) {
+    return <CsvViewer text={bodyText} />;
+  }
+
+  if (mimeType?.match(/^text\/html/i)) {
+    return <WebPageViewer html={bodyText} />;
+  }
+
+  if (mimeType?.match(/pdf/i)) {
+    return (
+      <Suspense fallback={<LoadingIcon />}>
+        <PdfViewer data={body} />
+      </Suspense>
+    );
+  }
+
   return (
-    <Editor
-      readOnly
-      defaultValue={bodyText}
-      language={language}
-      stateKey={`request.body.${response.id}`}
-    />
+    <TextViewer text={bodyText} language={language} stateKey={`request.body.${response.id}`} />
   );
 }