openreplay/frontend/app/components/Session/Player/ReplayPlayer/SummaryBlock/index.tsx

import { observer } from 'mobx-react-lite';
import React from 'react';

import { useStore } from 'App/mstore';
import { debounce } from 'App/utils';

import { IResourceRequest, IResourceTiming } from 'App/player';
import { WsChannel } from 'App/player/web/messages';
import { PlayerContext } from 'App/components/Session/playerContext';

let debounceUpdate: any = () => {};

const boldLine = /\*\*(.*?)\*\*/i;

function isTitleLine(line: string): boolean {
  return boldLine.test(line)
}

function SummaryBlock({
  sessionId,
}: {
  sessionId: string;
}) {
  const { store } = React.useContext(PlayerContext)
  const { tabStates } = store.get();
  const { aiSummaryStore, uiPlayerStore, sessionStore } = useStore();
  const duration = sessionStore.current.durationSeconds;
  const zoomEnabled = uiPlayerStore.timelineZoom.enabled;
  const zoomStartTs = uiPlayerStore.timelineZoom.startTs;
  const zoomEndTs = uiPlayerStore.timelineZoom.endTs;
  const zoomTab = uiPlayerStore.zoomTab;

  React.useEffect(() => {
    debounceUpdate = debounce(
      (
        sessionId: string,
        events: any[],
        feat: 'journey' | 'issues' | 'errors',
        startTs: number,
        endTs: number
      ) => aiSummaryStore.getDetailedSummary(sessionId, events, feat, startTs, endTs),
      500
    );
  }, []);

  React.useEffect(() => {
    if (zoomTab === 'overview') {
      void aiSummaryStore.getSummary(sessionId);
    } else {
        const totalFetchList: IResourceRequest[] = [];
        const totalResourceList: IResourceTiming[] = [];
        const totalWebsocketList: WsChannel[] = [];
      Object.values(tabStates).forEach(({
        fetchList,
        resourceList,
        websocketList,
      }) => {
        totalFetchList.push(...fetchList);
        totalResourceList.push(...resourceList);
        totalWebsocketList.push(...websocketList);
      })
      const resultingEvents = [
        ...totalFetchList,
        ...totalResourceList,
        ...totalWebsocketList,
      ]
      const range = !zoomEnabled ? [0, duration] : [zoomStartTs, zoomEndTs];
      void debounceUpdate(sessionId, resultingEvents, zoomTab, range[0], range[1]);
    }
  }, [zoomTab]);

  const formattedText = aiSummaryStore.text.split('\n').map((line) => {
    if (isTitleLine(line)) {
      return <div className={'font-semibold mt-2'}>{line.replace(/\*/g, '')}</div>;
    }
    if (line.startsWith('*')) {
      return (
        <li className={'ml-1 marker:mr-1 flex items-center gap-1'}>
            <CodeStringFormatter text={line.replace(/\*/g, '')} />
        </li>
      );
    }
    return (
      <div className={'flex items-center gap-1'}>
        <CodeStringFormatter text={line} />
      </div>
    );
  });

  return (
    <div style={summaryBlockStyle}>
      {aiSummaryStore.text ? (
        <div className={'rounded p-4 bg-white whitespace-pre-wrap flex flex-col'}>
          <>{formattedText.map((v) => v)}</>
        </div>
      ) : (
        <TextPlaceholder />
      )}
    </div>
  );
}

function TextPlaceholder() {
  return (
    <div className={'animate-pulse rounded p-4 bg-white whitespace-pre-wrap flex flex-col gap-2'}>
      <div className={'h-2 bg-gray-medium rounded'} />
      <div className={'h-2 bg-gray-medium rounded'} />
      <div className={'grid grid-cols-3 gap-2'}>
        <div className={'h-2 bg-gray-medium rounded col-span-2'} />
        <div className={'h-2 bg-gray-medium rounded col-span-1'} />
      </div>

      <div className={'grid grid-cols-4 gap-2 mt-3'}>
        <div className={'h-2 bg-gray-medium rounded col-span-1'} />
        <div className={'h-2 bg-gray-medium rounded col-span-1'} />
        <div className={'h-2 bg-gray-medium rounded col-span-2'} />
      </div>
      <div className={'grid grid-cols-4 gap-2'}>
        <div className={'h-2 bg-gray-medium rounded col-span-2'} />
        <div className={'h-2 bg-transparent rounded col-span-2'} />
      </div>
    </div>
  );
}

const CodeStringFormatter = ({ text }: { text: string }) => {
  const parts = text.split(/(`[^`]*`)/).map((part, index) =>
    part.startsWith('`') && part.endsWith('`') ? (
      <div key={index} className="whitespace-nowrap bg-gray-lightest font-mono mx-1 px-1 border">
        {part.substring(1, part.length - 1)}
      </div>
    ) : (
      <span key={index}>{part}</span>
    )
  );

  return <>{parts}</>;
};

const summaryBlockStyle: React.CSSProperties = {
  background: 'linear-gradient(180deg, #E8EBFF -24.14%, rgba(236, 254, 255, 0.00) 100%)',
  width: '100%',
  maxHeight: '25vh',
  overflow: 'auto',
  display: 'flex',
  flexDirection: 'column',
  gap: '0.5rem',
  padding: '1rem',
};

export default observer(SummaryBlock);