From a1f59a7f40669a01dad1481ec33583d3b26fb199 Mon Sep 17 00:00:00 2001
From: Andrew Jiang <andrew@buildwithfern.com>
Date: Fri, 3 May 2024 12:52:31 -0400
Subject: [PATCH] feat: render pdf and a download button in API Playground
 (#791)

---
 .../src/api-playground/PlaygroundDrawer.tsx   |  7 ++-
 .../PlaygroundEndpointContent.tsx             | 51 ++++++++++++++--
 .../form/PlaygroundFileUploadForm.tsx         | 58 ++++++++++++++-----
 .../ui/app/src/components/FernAudioPlayer.tsx |  4 +-
 .../app/src/components/FernErrorBoundary.tsx  | 34 ++++++++++-
 5 files changed, 128 insertions(+), 26 deletions(-)

diff --git a/packages/ui/app/src/api-playground/PlaygroundDrawer.tsx b/packages/ui/app/src/api-playground/PlaygroundDrawer.tsx
index 43ae426b9d..6b552c1d8e 100644
--- a/packages/ui/app/src/api-playground/PlaygroundDrawer.tsx
+++ b/packages/ui/app/src/api-playground/PlaygroundDrawer.tsx
@@ -363,7 +363,12 @@ export const PlaygroundDrawer: FC<PlaygroundDrawerProps> = ({ apis }) => {
                 )}
                 <div className="flex h-full flex-col rounded-lg">
                     <div>{layoutBreakpoint === "mobile" ? mobileHeader : desktopHeader}</div>
-                    <FernErrorBoundary component="PlaygroundDrawer" className="flex h-full items-center justify-center">
+                    <FernErrorBoundary
+                        component="PlaygroundDrawer"
+                        className="flex h-full items-center justify-center"
+                        showError={true}
+                        reset={resetWithoutExample}
+                    >
                         {selectionState?.type === "endpoint" && matchedEndpoint != null ? (
                             <PlaygroundEndpoint
                                 endpoint={matchedEndpoint}
diff --git a/packages/ui/app/src/api-playground/PlaygroundEndpointContent.tsx b/packages/ui/app/src/api-playground/PlaygroundEndpointContent.tsx
index 6e953b4faa..5fdcc8cf1e 100644
--- a/packages/ui/app/src/api-playground/PlaygroundEndpointContent.tsx
+++ b/packages/ui/app/src/api-playground/PlaygroundEndpointContent.tsx
@@ -1,5 +1,5 @@
 import { Loadable, visitLoadable } from "@fern-ui/loadable";
-import { PaperPlaneIcon } from "@radix-ui/react-icons";
+import { DownloadIcon, PaperPlaneIcon } from "@radix-ui/react-icons";
 import cn from "clsx";
 import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
@@ -10,7 +10,9 @@ import { FernButton, FernButtonGroup } from "../components/FernButton";
 import { FernCard } from "../components/FernCard";
 import { FernErrorTag } from "../components/FernErrorBoundary";
 import { FernTabs } from "../components/FernTabs";
+import { FernTooltip, FernTooltipProvider } from "../components/FernTooltip";
 import { useFeatureFlags } from "../contexts/FeatureFlagContext";
+import { useDocsContext } from "../contexts/docs-context/useDocsContext";
 import { useLayoutBreakpoint } from "../contexts/layout-breakpoint/useLayoutBreakpoint";
 import { ResolvedEndpointDefinition, ResolvedTypeDefinition } from "../resolver/types";
 import { CopyToClipboardButton } from "../syntax-highlighting/CopyToClipboardButton";
@@ -21,7 +23,7 @@ import { PlaygroundRequestPreview } from "./PlaygroundRequestPreview";
 import { PlaygroundResponsePreview } from "./PlaygroundResponsePreview";
 import { PlaygroundSendRequestButton } from "./PlaygroundSendRequestButton";
 import { HorizontalSplitPane, VerticalSplitPane } from "./VerticalSplitPane";
-import { PlaygroundEndpointRequestFormState } from "./types";
+import { PlaygroundEndpointRequestFormState, ProxyResponse } from "./types";
 import { PlaygroundResponse } from "./types/playgroundResponse";
 import { stringifyCurl, stringifyFetch, stringifyPythonRequests } from "./utils";
 
@@ -48,6 +50,7 @@ export const PlaygroundEndpointContent: FC<PlaygroundEndpointContentProps> = ({
     sendRequest,
     types,
 }) => {
+    const { domain } = useDocsContext();
     const { isSnippetTemplatesEnabled } = useFeatureFlags();
     const [requestType, setRequestType] = useAtom(requestTypeAtom);
 
@@ -205,7 +208,21 @@ export const PlaygroundEndpointContent: FC<PlaygroundEndpointContentProps> = ({
                     loading: () => <div />,
                     loaded: (response) =>
                         response.type === "file" ? (
-                            <div />
+                            <FernTooltipProvider>
+                                <FernTooltip content="Download file">
+                                    <FernButton
+                                        icon={<DownloadIcon />}
+                                        size="small"
+                                        variant="minimal"
+                                        onClick={() => {
+                                            const a = document.createElement("a");
+                                            a.href = response.response.body;
+                                            a.download = createFilename(response.response, response.contentType);
+                                            a.click();
+                                        }}
+                                    />
+                                </FernTooltip>
+                            </FernTooltipProvider>
                         ) : (
                             <CopyToClipboardButton
                                 content={() =>
@@ -237,17 +254,25 @@ export const PlaygroundEndpointContent: FC<PlaygroundEndpointContentProps> = ({
                 loaded: (response) =>
                     response.type !== "file" ? (
                         <PlaygroundResponsePreview response={response} />
-                    ) : response.contentType.startsWith("audio/") ? (
+                    ) : response.contentType.startsWith("audio/") ||
+                      (domain.includes("ircamamplify") && response.contentType === "binary/octet-stream") ? (
                         <FernAudioPlayer
                             src={response.response.body}
-                            title={"Untitled"}
                             className="flex h-full items-center justify-center p-4"
                         />
+                    ) : response.contentType.includes("application/pdf") ? (
+                        <iframe
+                            src={response.response.body}
+                            className="size-full"
+                            title="PDF preview"
+                            allowFullScreen
+                        />
                     ) : (
                         <FernErrorTag
                             component="PlaygroundEndpointContent"
                             error={`File preview not supported for ${response.contentType}`}
                             className="flex h-full items-center justify-center"
+                            showError
                         />
                     ),
                 failed: (e) => (
@@ -322,3 +347,19 @@ export const PlaygroundEndpointContent: FC<PlaygroundEndpointContentProps> = ({
         </div>
     );
 };
+
+function createFilename(body: ProxyResponse.SerializableFileBody, contentType: string): string {
+    const headers = new Headers(body.headers);
+    const contentDisposition = headers.get("Content-Disposition");
+
+    if (contentDisposition != null) {
+        const filename = contentDisposition.split("filename=")[1];
+        if (filename != null) {
+            return filename;
+        }
+    }
+
+    // TODO: use a more deterministic way to generate filenames
+    const extension = contentType.split("/")[1];
+    return `${crypto.randomUUID()}.${extension}`;
+}
diff --git a/packages/ui/app/src/api-playground/form/PlaygroundFileUploadForm.tsx b/packages/ui/app/src/api-playground/form/PlaygroundFileUploadForm.tsx
index 7edab68a45..c5f1bfab28 100644
--- a/packages/ui/app/src/api-playground/form/PlaygroundFileUploadForm.tsx
+++ b/packages/ui/app/src/api-playground/form/PlaygroundFileUploadForm.tsx
@@ -1,7 +1,9 @@
-import { Cross1Icon, FileIcon } from "@radix-ui/react-icons";
+import { useEventCallback } from "@fern-ui/react-commons";
+import { Cross1Icon, FileIcon, FilePlusIcon } from "@radix-ui/react-icons";
 import cn from "clsx";
+import { uniqBy } from "lodash-es";
 import numeral from "numeral";
-import { ChangeEventHandler, DragEventHandler, memo, useCallback, useRef, useState } from "react";
+import { ChangeEvent, DragEventHandler, memo, useCallback, useRef, useState } from "react";
 import { FernButton, FernButtonGroup } from "../../components/FernButton";
 import { FernCard } from "../../components/FernCard";
 import { WithLabelInternal } from "../WithLabel";
@@ -33,22 +35,34 @@ export const PlaygroundFileUploadForm = memo<PlaygroundFileUploadFormProps>(
             setDrag(false);
         };
 
+        const handleChangeFiles = (files: FileList | null | undefined) => {
+            const filesArray = files != null ? Array.from(files) : [];
+            if (type === "fileArray") {
+                // append files
+                onValueChange(uniqueFiles([...(value ?? []), ...filesArray]));
+                return;
+            } else {
+                // replace files
+                onValueChange(filesArray.length > 0 ? filesArray : undefined);
+            }
+        };
+
         const fileDrop: DragEventHandler<HTMLElement> = (e) => {
             e.preventDefault();
             setDrag(false);
 
             const files = e.dataTransfer.files;
-            onValueChange(Array.from(files));
+            handleChangeFiles(files);
         };
         const handleRemove = useCallback(() => {
             onValueChange(undefined);
         }, [onValueChange]);
-        const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-            (e) => {
-                onValueChange(e.target.files != null ? Array.from(e.target.files) : undefined);
-            },
-            [onValueChange],
-        );
+
+        const handleChange = useEventCallback((e: ChangeEvent<HTMLInputElement>) => {
+            const files = e.target.files;
+            handleChangeFiles(files);
+        });
+
         const ref = useRef<HTMLInputElement>(null);
         return (
             <WithLabelInternal
@@ -60,7 +74,14 @@ export const PlaygroundFileUploadForm = memo<PlaygroundFileUploadFormProps>(
                 availability={undefined}
                 description={undefined}
             >
-                <input ref={ref} type="file" id={id} onChange={handleChange} className="hidden" />
+                <input
+                    ref={ref}
+                    type="file"
+                    id={id}
+                    onChange={handleChange}
+                    className="hidden"
+                    multiple={type === "fileArray"}
+                />
                 <FernCard
                     className={cn("w-full rounded-lg", {
                         elevated: drag,
@@ -82,15 +103,15 @@ export const PlaygroundFileUploadForm = memo<PlaygroundFileUploadFormProps>(
                             />
                         </div>
                     ) : (
-                        <div className="divide-default divide-y px-4 py-2">
+                        <div className="divide-default divide-y">
                             {value.map((file) => (
-                                <div key={file.name} className="flex justify-between">
-                                    <div className="flex items-center gap-2">
+                                <div key={file.name} className="flex justify-between py-2 px-4">
+                                    <div className="flex items-center gap-2 shrink min-w-0">
                                         <div>
                                             <FileIcon />
                                         </div>
-                                        <span className="inline-flex items-baseline gap-2">
-                                            <span className="text-sm">{file.name}</span>
+                                        <span className="inline-flex items-baseline gap-2 shrink min-w-0">
+                                            <span className="text-sm truncate">{file.name}</span>
                                             <span className="t-muted text-xs">
                                                 ({numeral(file.size).format("0.0b")})
                                             </span>
@@ -121,9 +142,10 @@ export const PlaygroundFileUploadForm = memo<PlaygroundFileUploadFormProps>(
                                 </div>
                             ))}
                             {type === "fileArray" && (
-                                <div className="flex justify-end px-4 py-2">
+                                <div className="flex justify-end p-4">
                                     <FernButton
                                         onClick={() => ref.current?.click()}
+                                        icon={<FilePlusIcon />}
                                         text="Add more files"
                                         rounded
                                         variant="outlined"
@@ -140,3 +162,7 @@ export const PlaygroundFileUploadForm = memo<PlaygroundFileUploadFormProps>(
 );
 
 PlaygroundFileUploadForm.displayName = "PlaygroundFileUploadForm";
+
+function uniqueFiles(files: File[]): readonly File[] | undefined {
+    return uniqBy(files, (f) => `${f.webkitRelativePath}/${f.name}/${f.size}`);
+}
diff --git a/packages/ui/app/src/components/FernAudioPlayer.tsx b/packages/ui/app/src/components/FernAudioPlayer.tsx
index 3fa6441ade..d559fe563e 100644
--- a/packages/ui/app/src/components/FernAudioPlayer.tsx
+++ b/packages/ui/app/src/components/FernAudioPlayer.tsx
@@ -8,7 +8,7 @@ export interface FernAudioPlayerProps {
     /** The URL of the audio file to play */
     src: string;
     /** The title of the audio file */
-    title: string;
+    title?: string;
     author?: string;
     /** The author of the audio file */
     autoPlay?: boolean;
@@ -41,7 +41,7 @@ export function FernAudioPlayer(props: FernAudioPlayerProps): ReactElement {
             </audio>
             <div className="relative flex flex-1 flex-col justify-center gap-1">
                 <p className="m-0 inline-flex justify-center gap-2 text-center">
-                    <span className="t-accent max-w-[40vw] truncate">{props.title}</span>
+                    {props.title != null && <span className="t-accent max-w-[40vw] truncate">{props.title}</span>}
                     {props.author && (
                         <>
                             <span>&mdash;</span>
diff --git a/packages/ui/app/src/components/FernErrorBoundary.tsx b/packages/ui/app/src/components/FernErrorBoundary.tsx
index f1c9612da3..adb23466cc 100644
--- a/packages/ui/app/src/components/FernErrorBoundary.tsx
+++ b/packages/ui/app/src/components/FernErrorBoundary.tsx
@@ -1,17 +1,20 @@
-import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+import { ExclamationTriangleIcon, ReloadIcon } from "@radix-ui/react-icons";
 import clsx from "clsx";
 import { memoize } from "lodash-es";
 import { useRouter } from "next/router";
 import React, { PropsWithChildren, ReactElement, useEffect } from "react";
 import { ErrorBoundary, FallbackProps } from "react-error-boundary";
 import { captureSentryError, captureSentryErrorMessage } from "../analytics/sentry";
+import { FernButton } from "./FernButton";
 
 export declare interface FernErrorBoundaryProps {
     component?: string; // component displayName where the error occurred
     error: unknown;
     className?: string;
     resetErrorBoundary?: () => void;
+    reset?: () => void;
     refreshOnError?: boolean;
+    showError?: boolean;
 }
 
 export function FernErrorTag({
@@ -20,12 +23,16 @@ export function FernErrorTag({
     className,
     errorDescription,
     showError,
+    reset,
+    resetErrorBoundary,
 }: {
     component: string; // component displayName where the error occurred
     error: unknown;
     className?: string;
     errorDescription?: string;
     showError?: boolean;
+    reset?: () => void;
+    resetErrorBoundary?: () => void;
 }): ReactElement | null {
     useEffect(() => {
         // eslint-disable-next-line no-console
@@ -45,6 +52,18 @@ export function FernErrorTag({
                 <span className="t-danger inline-flex items-center gap-2 rounded-full bg-tag-danger px-2">
                     <ExclamationTriangleIcon />
                     <span>{stringifyError(error)}</span>
+                    {reset != null && (
+                        <FernButton
+                            icon={<ReloadIcon />}
+                            variant="minimal"
+                            rounded
+                            onClick={() => {
+                                reset();
+                                resetErrorBoundary?.();
+                            }}
+                            size="small"
+                        />
+                    )}
                 </span>
             </div>
         );
@@ -67,7 +86,9 @@ const FernErrorBoundaryInternal: React.FC<FernErrorBoundaryProps> = ({
     className,
     error,
     resetErrorBoundary,
+    reset,
     refreshOnError,
+    showError,
 }) => {
     const router = useRouter();
 
@@ -91,7 +112,16 @@ const FernErrorBoundaryInternal: React.FC<FernErrorBoundaryProps> = ({
         };
     }, [resetErrorBoundary, router.events]);
 
-    return <FernErrorTag error={error} className={className} component={component ?? "FernErrorBoundary"} />;
+    return (
+        <FernErrorTag
+            error={error}
+            className={className}
+            component={component ?? "FernErrorBoundary"}
+            showError={showError}
+            reset={reset}
+            resetErrorBoundary={resetErrorBoundary}
+        />
+    );
 };
 
 const getFallbackComponent = memoize(function getFallbackComponent(