-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
4413f17
commit 92752a8
Showing
3 changed files
with
107 additions
and
168 deletions.
There are no files selected for viewing
79 changes: 79 additions & 0 deletions
79
packages/ui/app/src/api-reference/web-socket/WebSocketMessageAccordionItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { APIV1Read } from "@fern-api/fdr-sdk/client/types"; | ||
| import { CopyToClipboardButton } from "@fern-ui/components"; | ||
| import * as Accordion from "@radix-ui/react-accordion"; | ||
| import cn from "clsx"; | ||
| import { ArrowDown, ArrowUp, NavArrowDown } from "iconoir-react"; | ||
| import { FC } from "react"; | ||
| import { FernSyntaxHighlighter } from "../../syntax-highlighting/FernSyntaxHighlighter"; | ||
| import { WebSocketMessage } from "./WebSocketMessages"; | ||
|
|
||
| export interface WebSocketMessageAccordionItemProps { | ||
| message: WebSocketMessage; | ||
| index: number; | ||
| messagesLength: number; | ||
| } | ||
|
|
||
| export const WebsocketMessageAccordionItem: FC<WebSocketMessageAccordionItemProps> = ({ | ||
| message, | ||
| index, | ||
| messagesLength, | ||
| }) => { | ||
| return ( | ||
| <Accordion.Item value={index.toString()} key={index} className={cn("group relative")}> | ||
| <Accordion.Trigger | ||
| className={cn("fern-web-socket-trigger", { | ||
| "data-[state=open]:bg-tag-success": message.origin === APIV1Read.WebSocketMessageOrigin.Client, | ||
| "data-[state=open]:bg-tag-primary": message.origin === APIV1Read.WebSocketMessageOrigin.Server, | ||
| "data-[state=open]:bg-tag-default": message.origin == null, | ||
| })} | ||
| > | ||
| {message.origin === APIV1Read.WebSocketMessageOrigin.Client ? ( | ||
| <span className="fern-web-socket-client"> | ||
| <ArrowUp className="size-icon" /> | ||
| </span> | ||
| ) : message.origin === APIV1Read.WebSocketMessageOrigin.Server ? ( | ||
| <span className="fern-web-socket-server"> | ||
| <ArrowDown className="size-icon" /> | ||
| </span> | ||
| ) : null} | ||
| <span className="fern-web-socket-trigger-data">{JSON.stringify(message.data)}</span> | ||
| {message.displayName != null || message.type != null ? ( | ||
| <span className="fern-web-socket-type"> | ||
| <span className="fern-web-socket-badge">{message.displayName ?? message.type}</span> | ||
| </span> | ||
| ) : null} | ||
|
|
||
| <CopyToClipboardButton | ||
| className="fern-web-socket-copy" | ||
| content={() => JSON.stringify(message.data, null, 2)} | ||
| onClick={(e) => e.stopPropagation()} | ||
| /> | ||
|
|
||
| <NavArrowDown className="fern-web-socket-chevron group-data-[state=open]:rotate-180" aria-hidden /> | ||
| </Accordion.Trigger> | ||
| <Accordion.Content className="fern-web-socket-content"> | ||
| <div className="group/cb-container relative"> | ||
| <FernSyntaxHighlighter | ||
| className="w-0 min-w-full overflow-y-auto" | ||
| code={JSON.stringify(message.data, null, 2)} | ||
| language="json" | ||
| fontSize="sm" | ||
| /> | ||
| </div> | ||
| </Accordion.Content> | ||
| <div | ||
| className={cn( | ||
| "mx-px group-focus-within:ring-1 ring-transparent ring-inset absolute inset-0 pointer-events-none z-auto rounded-[inherit]", | ||
| { | ||
| "group-focus-within:ring-border-success": | ||
| message.origin === APIV1Read.WebSocketMessageOrigin.Client, | ||
| "group-focus-within:ring-border-primary": | ||
| message.origin === APIV1Read.WebSocketMessageOrigin.Server, | ||
| "group-focus-within:ring-default": message.origin == null, | ||
| "mb-px rounded-b-xl": index === messagesLength, | ||
| }, | ||
| )} | ||
| /> | ||
| </Accordion.Item> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
102 changes: 2 additions & 100 deletions
102
packages/ui/app/src/api-reference/web-socket/WebSocketMessagesVirtualized.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,104 +1,6 @@ | ||
| import { APIV1Read } from "@fern-api/fdr-sdk/client/types"; | ||
| import { CopyToClipboardButton } from "@fern-ui/components"; | ||
| import * as Accordion from "@radix-ui/react-accordion"; | ||
| import cn from "clsx"; | ||
| import { ArrowDown, ArrowUp, NavArrowDown, Xmark } from "iconoir-react"; | ||
| import { FC } from "react"; | ||
| import { Virtuoso } from "react-virtuoso"; | ||
| import { FernSyntaxHighlighter } from "../../syntax-highlighting/FernSyntaxHighlighter"; | ||
| import { WebSocketMessagesProps } from "./WebSocketMessages"; | ||
| import { WebSocketMessages, WebSocketMessagesProps } from "./WebSocketMessages"; | ||
|
|
||
| export const WebSocketMessagesVirtualized: FC<WebSocketMessagesProps> = ({ messages }) => { | ||
| return ( | ||
| <Accordion.Root | ||
| type="multiple" | ||
| className="divide-default relative z-0 table size-full table-fixed divide-y grow" | ||
| > | ||
| {messages.length === 0 && ( | ||
| <div className="absolute inset-0 flex size-full items-center justify-center"> | ||
| <div className="flex flex-col items-center space-y-4"> | ||
| {/* <WifiOff className="t-muted" size={28} /> */} | ||
| <h4 className="m-0">No messages...</h4> | ||
| </div> | ||
| </div> | ||
| )} | ||
| <Virtuoso | ||
| data={messages} | ||
| itemContent={(index, message) => { | ||
| return ( | ||
| <Accordion.Item value={index.toString()} key={index} className={cn("group relative")}> | ||
| <Accordion.Trigger | ||
| className={cn("fern-web-socket-trigger", { | ||
| "data-[state=open]:bg-tag-success": | ||
| message.origin === APIV1Read.WebSocketMessageOrigin.Client, | ||
| "data-[state=open]:bg-tag-primary": | ||
| message.origin === APIV1Read.WebSocketMessageOrigin.Server, | ||
| "data-[state=open]:bg-tag-danger": message.origin === "endSample", | ||
| "data-[state=open]:bg-tag-default": message.origin == null, | ||
| })} | ||
| > | ||
| {message.origin === APIV1Read.WebSocketMessageOrigin.Client ? ( | ||
| <span className="fern-web-socket-client"> | ||
| <ArrowUp className="size-icon" /> | ||
| </span> | ||
| ) : message.origin === APIV1Read.WebSocketMessageOrigin.Server ? ( | ||
| <span className="fern-web-socket-server"> | ||
| <ArrowDown className="size-icon" /> | ||
| </span> | ||
| ) : message.origin === "endSample" ? ( | ||
| <span className="fern-web-socket-end-sample"> | ||
| <Xmark className="size-icon" /> | ||
| </span> | ||
| ) : null} | ||
| <span className="fern-web-socket-trigger-data">{JSON.stringify(message.data)}</span> | ||
| {message.displayName != null || message.type != null ? ( | ||
| <span className="fern-web-socket-type"> | ||
| <span className="fern-web-socket-badge"> | ||
| {message.displayName ?? message.type} | ||
| </span> | ||
| </span> | ||
| ) : null} | ||
|
|
||
| <CopyToClipboardButton | ||
| className="fern-web-socket-copy" | ||
| content={() => JSON.stringify(message.data, null, 2)} | ||
| onClick={(e) => e.stopPropagation()} | ||
| /> | ||
|
|
||
| <NavArrowDown | ||
| className="fern-web-socket-chevron group-data-[state=open]:rotate-180" | ||
| aria-hidden | ||
| /> | ||
| </Accordion.Trigger> | ||
| <Accordion.Content className="fern-web-socket-content"> | ||
| <div className="group/cb-container relative"> | ||
| <FernSyntaxHighlighter | ||
| className="w-0 min-w-full overflow-y-auto" | ||
| code={JSON.stringify(message.data, null, 2)} | ||
| language="json" | ||
| fontSize="sm" | ||
| /> | ||
| </div> | ||
| </Accordion.Content> | ||
| <div | ||
| className={cn( | ||
| "mx-px group-focus-within:ring-1 ring-transparent ring-inset absolute inset-0 pointer-events-none z-auto rounded-[inherit]", | ||
| { | ||
| "group-focus-within:ring-border-success": | ||
| message.origin === APIV1Read.WebSocketMessageOrigin.Client, | ||
| "group-focus-within:ring-border-primary": | ||
| message.origin === APIV1Read.WebSocketMessageOrigin.Server, | ||
| "group-focus-within:ring-border-danger": message.origin === "endSample", | ||
| "group-focus-within:ring-default": message.origin == null, | ||
| "mb-px rounded-b-xl": index === messages.length - 1, | ||
| }, | ||
| )} | ||
| /> | ||
| </Accordion.Item> | ||
| ); | ||
| }} | ||
| followOutput={"smooth"} | ||
| /> | ||
| </Accordion.Root> | ||
| ); | ||
| return <WebSocketMessages messages={messages} virtualized />; | ||
| }; |