Add separate SVG response viewer

This commit is contained in:
Gregory Schier
2025-01-04 07:14:33 -08:00
parent 592c1228f1
commit 53f5ef3515
3 changed files with 20 additions and 3 deletions

View File

@@ -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) ? (

View File

@@ -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)}`,
});
}
},

View File

@@ -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" />;
}