From 53f5ef35157e566ad9597ede401947345e2dfd75 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Sat, 4 Jan 2025 07:14:33 -0800
Subject: [PATCH] Add separate SVG response viewer

---
 src-web/components/ResponsePane.tsx              |  3 +++
 src-web/components/WorkspaceActionsDropdown.tsx  |  6 +++---
 src-web/components/responseViewers/SvgViewer.tsx | 14 ++++++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src-web/components/responseViewers/SvgViewer.tsx

diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx
index f95573d1..b629cbba 100644
--- a/src-web/components/ResponsePane.tsx
+++ b/src-web/components/ResponsePane.tsx
@@ -27,6 +27,7 @@ import { EventStreamViewer } from './responseViewers/EventStreamViewer';
 import { HTMLOrTextViewer } from './responseViewers/HTMLOrTextViewer';
 import { ImageViewer } from './responseViewers/ImageViewer';
 import { PdfViewer } from './responseViewers/PdfViewer';
+import {SvgViewer} from "./responseViewers/SvgViewer";
 import { VideoViewer } from './responseViewers/VideoViewer';
 
 interface Props {
@@ -167,6 +168,8 @@ export const ResponsePane = memo(function ResponsePane({
                   </div>
                 ) : contentType?.match(/^text\/event-stream$/i) && viewMode === 'pretty' ? (
                   <EventStreamViewer response={activeResponse} />
+                ) : contentType?.match(/^image\/svg/) ? (
+                  <SvgViewer response={activeResponse} />
                 ) : contentType?.match(/^image/i) ? (
                   <EnsureCompleteResponse response={activeResponse} render={ImageViewer} />
                 ) : contentType?.match(/^audio/i) ? (
diff --git a/src-web/components/WorkspaceActionsDropdown.tsx b/src-web/components/WorkspaceActionsDropdown.tsx
index 63f1b52e..bfd4425e 100644
--- a/src-web/components/WorkspaceActionsDropdown.tsx
+++ b/src-web/components/WorkspaceActionsDropdown.tsx
@@ -86,7 +86,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
           if (ops.length === 0) {
             toast.show({
               id: 'no-sync-changes',
-              message: 'No changes detected for sync',
+              message: 'No changes to sync',
             });
             return;
           }
@@ -97,7 +97,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
             await applySync(activeWorkspace, ops);
             toast.show({
               id: 'applied-sync-changes',
-              message: `Applied ${pluralizeCount('change', ops.length)}`,
+              message: `Wrote ${pluralizeCount('change', ops.length)}`,
             });
             return;
           }
@@ -159,7 +159,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
             await applySync(activeWorkspace, ops);
             toast.show({
               id: 'applied-confirmed-sync-changes',
-              message: `Applied ${pluralizeCount('change', ops.length)}`,
+              message: `Wrote ${pluralizeCount('change', ops.length)}`,
             });
           }
         },
diff --git a/src-web/components/responseViewers/SvgViewer.tsx b/src-web/components/responseViewers/SvgViewer.tsx
new file mode 100644
index 00000000..78202975
--- /dev/null
+++ b/src-web/components/responseViewers/SvgViewer.tsx
@@ -0,0 +1,14 @@
+import type { HttpResponse } from '@yaakapp-internal/models';
+import React from 'react';
+import { useResponseBodyText } from '../../hooks/useResponseBodyText';
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function SvgViewer({ response }: Props) {
+  const rawTextBody = useResponseBodyText(response);
+  if (rawTextBody.data == null) return null;
+  const src = `data:image/svg+xml;base64,${btoa(rawTextBody.data)}`;
+  return <img src={src} alt="Response preview" className="max-w-full max-h-full pb-2" />;
+}