yaak/src-web/components/responseViewers/EventStreamViewer.tsx

import type { HttpResponse } from '@yaakapp-internal/models';
import type { ServerSentEvent } from '@yaakapp-internal/sse';
import classNames from 'classnames';
import { Fragment, useMemo, useState } from 'react';
import { useFormatText } from '../../hooks/useFormatText';
import { useResponseBodyEventSource } from '../../hooks/useResponseBodyEventSource';
import { isJSON } from '../../lib/contentType';
import { Button } from '../core/Button';
import type { EditorProps } from '../core/Editor/Editor';
import { Editor } from '../core/Editor/LazyEditor';
import { EventDetailHeader, EventViewer } from '../core/EventViewer';
import { EventViewerRow } from '../core/EventViewerRow';
import { Icon } from '../core/Icon';
import { InlineCode } from '../core/InlineCode';
import { HStack, VStack } from '../core/Stacks';

interface Props {
  response: HttpResponse;
}

export function EventStreamViewer({ response }: Props) {
  return (
    <Fragment
      key={response.id} // force a refresh when the response changes
    >
      <ActualEventStreamViewer response={response} />
    </Fragment>
  );
}

function ActualEventStreamViewer({ response }: Props) {
  const [showLarge, setShowLarge] = useState<boolean>(false);
  const [showingLarge, setShowingLarge] = useState<boolean>(false);
  const events = useResponseBodyEventSource(response);

  return (
    <EventViewer
      events={events.data ?? []}
      getEventKey={(_, index) => String(index)}
      error={events.error ? String(events.error) : null}
      splitLayoutName="sse_events"
      defaultRatio={0.4}
      renderRow={({ event, index, isActive, onClick }) => (
        <EventViewerRow
          isActive={isActive}
          onClick={onClick}
          icon={<Icon color="info" title="Server Message" icon="arrow_big_down_dash" />}
          content={
            <HStack space={2} className="items-center">
              <EventLabels event={event} index={index} isActive={isActive} />
              <span className="truncate text-xs">{event.data.slice(0, 1000)}</span>
            </HStack>
          }

        />
      )}
      renderDetail={({ event, index }) => (
        <EventDetail
          event={event}
          index={index}
          showLarge={showLarge}
          showingLarge={showingLarge}
          setShowLarge={setShowLarge}
          setShowingLarge={setShowingLarge}
        />
      )}
    />
  );
}

function EventDetail({
  event,
  index,
  showLarge,
  showingLarge,
  setShowLarge,
  setShowingLarge,
}: {
  event: ServerSentEvent;
  index: number;
  showLarge: boolean;
  showingLarge: boolean;
  setShowLarge: (v: boolean) => void;
  setShowingLarge: (v: boolean) => void;
}) {
  const language = useMemo<'text' | 'json'>(() => {
    if (!event?.data) return 'text';
    return isJSON(event?.data) ? 'json' : 'text';
  }, [event?.data]);

  return (
    <div className="flex flex-col h-full">
      <EventDetailHeader title="Message Received" prefix={<EventLabels event={event} index={index} />} />
      {!showLarge && event.data.length > 1000 * 1000 ? (
        <VStack space={2} className="italic text-text-subtlest">
          Message previews larger than 1MB are hidden
          <div>
            <Button
              onClick={() => {
                setShowingLarge(true);
                setTimeout(() => {
                  setShowLarge(true);
                  setShowingLarge(false);
                }, 500);
              }}
              isLoading={showingLarge}
              color="secondary"
              variant="border"
              size="xs"
            >
              Try Showing
            </Button>
          </div>
        </VStack>
      ) : (
        <FormattedEditor language={language} text={event.data} />
      )}
    </div>
  );
}

function FormattedEditor({ text, language }: { text: string; language: EditorProps['language'] }) {
  const formatted = useFormatText({ text, language, pretty: true });
  if (formatted == null) return null;
  return <Editor readOnly defaultValue={formatted} language={language} stateKey={null} />;
}

function EventLabels({
  className,
  event,
  index,
  isActive,
}: {
  event: ServerSentEvent;
  index: number;
  className?: string;
  isActive?: boolean;
}) {
  return (
    <HStack space={1.5} alignItems="center" className={className}>
      <InlineCode className={classNames('py-0', isActive && 'bg-text-subtlest text-text')}>
        {event.id ?? index}
      </InlineCode>
      {event.eventType && (
        <InlineCode className={classNames('py-0', isActive && 'bg-text-subtlest text-text')}>
          {event.eventType}
        </InlineCode>
      )}
    </HStack>
  );
}