Started multi-part response viewer

package-lock.json

@@ -1700,6 +1700,21 @@
       "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
       "license": "MIT"
     },
+    "node_modules/@mjackson/headers": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/@mjackson/headers/-/headers-0.11.1.tgz",
+      "integrity": "sha512-uXXhd4rtDdDwkqAuGef1nuafkCa1NlTmEc1Jzc0NL4YiA1yON1NFXuqJ3hOuKvNKQwkiDwdD+JJlKVyz4dunFA==",
+      "license": "MIT"
+    },
+    "node_modules/@mjackson/multipart-parser": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@mjackson/multipart-parser/-/multipart-parser-0.10.1.tgz",
+      "integrity": "sha512-cHMD6+ErH/DrEfC0N6Ru/+1eAdavxdV0C35PzSb5/SD7z3XoaDMc16xPJcb8CahWjSpqHY+Too9sAb6/UNuq7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@mjackson/headers": "^0.11.1"
+      }
+    },
     "node_modules/@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -18680,6 +18695,7 @@
         "@gilbarbara/deep-equal": "^0.3.1",
         "@lezer/highlight": "^1.1.3",
         "@lezer/lr": "^1.3.3",
+        "@mjackson/multipart-parser": "^0.10.1",
         "@prantlf/jsonlint": "^16.0.0",
         "@replit/codemirror-emacs": "^6.1.0",
         "@replit/codemirror-vim": "^6.3.0",

src-web/components/HttpResponsePane.tsx

@@ -30,6 +30,7 @@ import { CsvViewer } from './responseViewers/CsvViewer';
 import { EventStreamViewer } from './responseViewers/EventStreamViewer';
 import { HTMLOrTextViewer } from './responseViewers/HTMLOrTextViewer';
 import { ImageViewer } from './responseViewers/ImageViewer';
+import { MultipartViewer } from './responseViewers/MultipartViewer';
 import { SvgViewer } from './responseViewers/SvgViewer';
 import { VideoViewer } from './responseViewers/VideoViewer';
 
@@ -189,6 +190,8 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
                         <EnsureCompleteResponse response={activeResponse} Component={AudioViewer} />
                       ) : mimeType?.match(/^video/i) ? (
                         <EnsureCompleteResponse response={activeResponse} Component={VideoViewer} />
+                      ) : mimeType?.match(/^multipart/i) ? (
+                        <MultipartViewer response={activeResponse} />
                       ) : mimeType?.match(/pdf/i) ? (
                         <EnsureCompleteResponse response={activeResponse} Component={PdfViewer} />
                       ) : mimeType?.match(/csv|tab-separated/i) ? (

src-web/components/core/Icon.tsx

@@ -53,6 +53,7 @@ import {
   EyeIcon,
   EyeOffIcon,
   FileCodeIcon,
+  FileIcon,
   FileTextIcon,
   FilterIcon,
   FlameIcon,
@@ -180,7 +181,9 @@ const icons = {
   external_link: ExternalLinkIcon,
   eye: EyeIcon,
   eye_closed: EyeOffIcon,
+  file: FileIcon,
   file_code: FileCodeIcon,
+  file_text: FileTextIcon,
   filter: FilterIcon,
   flame: FlameIcon,
   flask: FlaskConicalIcon,

src-web/components/responseViewers/CsvViewer.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import Papa from 'papaparse';
 import { useMemo } from 'react';
 import { useResponseBodyText } from '../../hooks/useResponseBodyText';
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../core/Table';
 
 interface Props {
   response: HttpResponse;
@@ -11,31 +12,42 @@ interface Props {
 
 export function CsvViewer({ response, className }: Props) {
   const body = useResponseBodyText({ response, filter: null });
+  return (
+    <div className="overflow-auto h-full">
+      <CsvViewerInner text={body.data ?? null} className={className} />
+    </div>
+  );
+}
 
+export function CsvViewerInner({ text, className }: { text: string | null; className?: string }) {
   const parsed = useMemo(() => {
-    if (body.data == null) return null;
-    return Papa.parse<string[]>(body.data);
-  }, [body]);
+    if (text == null) return null;
+    return Papa.parse<Record<string, string>>(text, { header: true, skipEmptyLines: true });
+  }, [text]);
 
   if (parsed === null) return null;
 
   return (
     <div className="overflow-auto h-full">
-      <table className={classNames(className, 'text-sm')}>
-        <tbody>
+      <Table className={classNames(className, 'text-sm')}>
+        <TableHead>
+          <TableRow>
+            {parsed.meta.fields?.map((field) => (
+              <TableHeaderCell key={field}>{field}</TableHeaderCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
           {parsed.data.map((row, i) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: none
-            <tr key={i} className={classNames('border-l border-t', i > 0 && 'border-b')}>
-              {row.map((col, j) => (
-                // biome-ignore lint/suspicious/noArrayIndexKey: none
-                <td key={j} className="border-r px-1.5">
-                  {col}
-                </td>
+            <TableRow key={i}>
+              {parsed.meta.fields?.map((key) => (
+                <TableCell key={key}>{row[key] ?? ''}</TableCell>
               ))}
-            </tr>
+            </TableRow>
           ))}
-        </tbody>
-      </table>
+        </TableBody>
+      </Table>
     </div>
   );
 }

src-web/components/responseViewers/ImageViewer.tsx

@@ -1,10 +1,39 @@
 import { convertFileSrc } from '@tauri-apps/api/core';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
 
-interface Props {
-  bodyPath: string;
-}
+type Props = { className?: string } & (
+  | {
+      bodyPath: string;
+    }
+  | {
+      data: ArrayBuffer;
+    }
+);
 
-export function ImageViewer({ bodyPath }: Props) {
-  const src = convertFileSrc(bodyPath);
-  return <img src={src} alt="Response preview" className="max-w-full max-h-full pb-2" />;
+export function ImageViewer({ className, ...props }: Props) {
+  const [src, setSrc] = useState<string>();
+  const bodyPath = 'bodyPath' in props ? props.bodyPath : null;
+  const data = 'data' in props ? props.data : null;
+
+  useEffect(() => {
+    if (bodyPath != null) {
+      setSrc(convertFileSrc(bodyPath));
+    } else if (data != null) {
+      const blob = new Blob([data], { type: 'image/png' });
+      const url = URL.createObjectURL(blob);
+      setSrc(url);
+      return () => URL.revokeObjectURL(url);
+    } else {
+      setSrc(undefined);
+    }
+  }, [bodyPath, data]);
+
+  return (
+    <img
+      src={src}
+      alt="Response preview"
+      className={classNames(className, 'max-w-full max-h-full')}
+    />
+  );
 }

src-web/hooks/useResponseBodyText.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import type { HttpResponse } from '@yaakapp-internal/models';
-import { getResponseBodyText } from '../lib/responseBody';
+import { getResponseBodyBytes, getResponseBodyText } from '../lib/responseBody';
 
 export function useResponseBodyText({
   response,
@@ -21,3 +21,11 @@ export function useResponseBodyText({
     queryFn: () => getResponseBodyText({ response, filter }),
   });
 }
+
+export function useResponseBodyBytes({ response }: { response: HttpResponse }) {
+  return useQuery({
+    placeholderData: (prev) => prev, // Keep previous data on refetch
+    queryKey: ['response_body_bytes', response.id, response.updatedAt, response.contentLength],
+    queryFn: () => getResponseBodyBytes(response),
+  });
+}

src-web/lib/responseBody.ts

@@ -1,3 +1,4 @@
+import { readFile } from '@tauri-apps/plugin-fs';
 import type { HttpResponse } from '@yaakapp-internal/models';
 import type { FilterResponse } from '@yaakapp-internal/plugins';
 import type { ServerSentEvent } from '@yaakapp-internal/sse';
@@ -30,3 +31,10 @@ export async function getResponseBodyEventSource(
     filePath: response.bodyPath,
   });
 }
+
+export async function getResponseBodyBytes(
+  response: HttpResponse,
+): Promise<Uint8Array<ArrayBuffer> | null> {
+  if (!response.bodyPath) return null;
+  return readFile(response.bodyPath);
+}

src-web/package.json

@@ -20,6 +20,7 @@
     "@gilbarbara/deep-equal": "^0.3.1",
     "@lezer/highlight": "^1.1.3",
     "@lezer/lr": "^1.3.3",
+    "@mjackson/multipart-parser": "^0.10.1",
     "@prantlf/jsonlint": "^16.0.0",
     "@replit/codemirror-emacs": "^6.1.0",
     "@replit/codemirror-vim": "^6.3.0",