fix: Make streamed responses scrollable (#874)

fern-api · May 15, 2024 · fe98cf3 · fe98cf3
1 parent af396c0
commit fe98cf3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/packages/ui/app/src/api-page/endpoints/EndpointContentCodeSnippets.tsx b/packages/ui/app/src/api-page/endpoints/EndpointContentCodeSnippets.tsx
@@ -6,6 +6,7 @@ import { PlaygroundButton } from "../../api-playground/PlaygroundButton";
 import { StatusCodeTag, statusCodeToIntent } from "../../commons/StatusCodeTag";
 import { FernButton, FernButtonGroup } from "../../components/FernButton";
 import { FernErrorTag } from "../../components/FernErrorBoundary";
+import { FernScrollArea } from "../../components/FernScrollArea";
 import { mergeEndpointSchemaWithExample } from "../../resolver/SchemaWithExample";
 import {
     ResolvedEndpointDefinition,
@@ -222,26 +223,30 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC<EndpointContentCodeSnippet
                     filename: () => <AudioExample title={errorSelector} />,
                     stream: (value) => (
                         <TitledExample title={errorSelector}>
-                            <WebSocketMessages
-                                messages={value.value.map((event) => ({
-                                    type: undefined,
-                                    origin: undefined,
-                                    displayName: undefined,
-                                    data: event,
-                                }))}
-                            />
+                            <FernScrollArea className="rounded-b-[inherit]">
+                                <WebSocketMessages
+                                    messages={value.value.map((event) => ({
+                                        type: undefined,
+                                        origin: undefined,
+                                        displayName: undefined,
+                                        data: event,
+                                    }))}
+                                />
+                            </FernScrollArea>
                         </TitledExample>
                     ),
                     sse: (value) => (
                         <TitledExample title={errorSelector}>
-                            <WebSocketMessages
-                                messages={value.value.map(({ event, data }) => ({
-                                    type: event,
-                                    origin: undefined,
-                                    displayName: undefined,
-                                    data,
-                                }))}
-                            />
+                            <FernScrollArea className="rounded-b-[inherit]">
+                                <WebSocketMessages
+                                    messages={value.value.map(({ event, data }) => ({
+                                        type: event,
+                                        origin: undefined,
+                                        displayName: undefined,
+                                        data,
+                                    }))}
+                                />
+                            </FernScrollArea>
                         </TitledExample>
                     ),
                     _other: () => (

diff --git a/packages/ui/app/src/api-page/web-socket/WebSocketMessages.tsx b/packages/ui/app/src/api-page/web-socket/WebSocketMessages.tsx
@@ -36,7 +36,7 @@ export const WebSocketMessages: FC<WebSocketMessagesProps> = ({ messages }) => {
                         <Accordion.Trigger
                             className={cn(
                                 "w-full flex items-center gap-2 px-3 py-2 hover:data-[state=closed]:bg-tag-default cursor-default transition-background group-data-[state=closed]:rounded-[inherit] transition-[border-radius] duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)]",
-                                "sticky top-0 z-auto backdrop-blur",
+                                "sticky top-0 z-10 backdrop-blur",
                                 {
                                     "data-[state=open]:bg-tag-success":
                                         message.origin === APIV1Read.WebSocketMessageOrigin.Client,