Env dialog hotkey

src-web/components/responseViewers/ImageViewer.tsx

@@ -1,5 +1,6 @@
 import { convertFileSrc } from '@tauri-apps/api/tauri';
 import classNames from 'classnames';
+import { useState } from 'react';
 import type { HttpResponse } from '../../lib/models';
 
 interface Props {
@@ -8,11 +9,31 @@ interface Props {
 }
 
 export function ImageViewer({ response, className }: Props) {
+  const bytes = response.contentLength ?? 0;
+  const [show, setShow] = useState(bytes < 3 * 1000 * 1000);
+
   if (response.bodyPath === null) {
     return <div>Empty response body</div>;
   }
 
   const src = convertFileSrc(response.bodyPath);
+  if (!show) {
+    return (
+      <>
+        <div className="text-sm italic text-gray-500">
+          Response body is too large to preview.{' '}
+          <button
+            className="cursor-pointer underline hover:text-gray-800"
+            color="gray"
+            onClick={() => setShow(true)}
+          >
+            Show anyway
+          </button>
+        </div>
+      </>
+    );
+  }
+
   return (
     <img
       src={src}