sea-dev 1.0.0

package/libs/ui/src/components/doc-viewers/pdf/virtualized-pdf.tsx

@@ -0,0 +1,556 @@
+import { cn } from "@/lib/utils";
+import type {
+  CitationRef,
+  SourceAnnotation,
+  SourceDocument,
+} from "@sea/core/data-extraction/types";
+import { ChevronDownIcon, ChevronUpIcon, Loader2Icon } from "lucide-react";
+import type { PDFDocumentProxy } from "pdfjs-dist";
+import type { CSSProperties, Ref } from "react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import "react-pdf/dist/esm/Page/TextLayer.css";
+import type { ListChildComponentProps } from "react-window";
+import { VariableSizeList } from "react-window";
+import { funnel } from "remeda";
+import { Button } from "../../ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
+import { H3 } from "../../ui/typography";
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+
+const DEFAULT_PAGE_HEIGHT = 842;
+
+interface ScrollProps {
+  pageIndex: number;
+  positionX?: number;
+  positionY?: number;
+}
+
+interface PageData {
+  pdf: SourceDocument;
+  scale: number;
+  pageDimensions: { width: number; height: number }[];
+  annotations: SourceAnnotation[];
+  annotationFocus: AnnotationFocus;
+  onSelectCitation?: (citationId: string, annotationKey: string) => void;
+  visiblePageNumbers?: number[];
+}
+
+export interface AnnotationFocus {
+  activeAnnotationKey?: string;
+  activeCitationId?: string;
+}
+
+export interface PdfFocusHandle {
+  scrollToLocation: (props: ScrollProps) => void;
+  scrollToAnnotation: (key: string) => void;
+  isReady: () => boolean;
+}
+
+export const MemoizedVirtualizedPDF = memo(VirtualizedPDF);
+
+function VirtualizedPDF({
+  pdf,
+  scale,
+  ref,
+  annotations,
+  annotationFocus,
+  onSelectCitation,
+  setIndex,
+  setScaleFit,
+  refreshPdfUrl,
+  visiblePageNumbers,
+  onReady,
+}: {
+  pdf: SourceDocument;
+  scale: number;
+  ref?: Ref<PdfFocusHandle>;
+  annotations: SourceAnnotation[];
+  annotationFocus: AnnotationFocus;
+  onSelectCitation?: (citationId: string, annotationKey: string) => void;
+  setIndex: (n: number) => void;
+  setScaleFit: (n: number) => void;
+  refreshPdfUrl?: () => Promise<void>;
+  visiblePageNumbers?: number[];
+  onReady?: () => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const outerRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<VariableSizeList | null>(null);
+  const [pdfDocument, setPdfDocument] = useState<PDFDocumentProxy | null>(null);
+  const [containerDimensions, setContainerDimensions] = useState({ width: 0, height: 0 });
+  const [pageDimensions, setPageDimensions] = useState<{ width: number; height: number }[] | null>(
+    null,
+  );
+  const [loadingError, setLoadingError] = useState(false);
+  const [hasRenderedItems, setHasRenderedItems] = useState(false);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const funnelSetContainerDimensions = funnel(
+      (dims: { width: number; height: number }) => {
+        setContainerDimensions(dims);
+      },
+      {
+        reducer: (_: unknown, next: { width: number; height: number }) => next,
+        minQuietPeriodMs: 15,
+      },
+    );
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (entries.length === 0) return;
+
+      const { width, height } = entries[0]?.contentRect ?? { width: 0, height: 0 };
+      funnelSetContainerDimensions.call({ width, height });
+    });
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [containerRef]);
+
+  // Setting page dimensions
+  useEffect(() => {
+    if (!pdfDocument) return;
+
+    // Reset hasRenderedItems when PDF changes
+    setHasRenderedItems(false);
+
+    (async () => {
+      const dimensions: { width: number; height: number }[] = [];
+      const calcPageDimensions = Array.from({ length: pdfDocument.numPages }, async (_, i) => {
+        const page = await pdfDocument.getPage(i + 1);
+        const { width, height } = page.getViewport({ scale: 1 });
+        dimensions.push({ width, height });
+      });
+      await Promise.all(calcPageDimensions);
+      setPageDimensions(dimensions);
+    })();
+  }, [pdfDocument]);
+
+  useEffect(() => {
+    // Changing scale changes the measurement of the item, so we need to bust the cache, see:
+    // https://github.com/bvaughn/react-window/issues/344#issuecomment-540583132
+    if (listRef.current) {
+      listRef.current.resetAfterIndex(0);
+    }
+  }, [scale]);
+
+  useEffect(() => {
+    if (!pageDimensions?.[0]) return;
+    const computedScaleFit = containerDimensions.width / pageDimensions[0].width;
+    setScaleFit(computedScaleFit);
+  }, [pageDimensions, containerDimensions, setScaleFit]);
+
+  // Notify parent when PDF is ready AND items have been rendered
+  useEffect(() => {
+    if (pdfDocument && pageDimensions && hasRenderedItems) {
+      onReady?.();
+    }
+  }, [pdfDocument, pageDimensions, hasRenderedItems, onReady]);
+
+  const scrollToLocation = useCallback(
+    ({ pageIndex, positionX = 0, positionY = 0 }: ScrollProps) => {
+      if (!listRef.current || !pageDimensions) return;
+
+      // Map the logical page index (0-based) to the index in the filtered list
+      let listIndex = pageIndex;
+      if (visiblePageNumbers) {
+        const foundIndex = visiblePageNumbers.findIndex((p) => p === pageIndex + 1);
+        if (foundIndex === -1) {
+          // If the page is not visible, we can't scroll to it.
+          return;
+        }
+        listIndex = foundIndex;
+      }
+
+      const targetScrollTop = visiblePageNumbers
+        ? visiblePageNumbers.slice(0, listIndex).reduce((y, pageNum) => {
+            const dim = pageDimensions[pageNum - 1];
+            return y + (dim ? dim.height * scale : 0);
+          }, 0)
+        : Object.values(pageDimensions).reduce(
+            (y, { height }, i) => y + (i < listIndex ? height * scale : 0),
+            0,
+          );
+
+      if (positionY > 0 || (positionX > 0 && outerRef.current)) {
+        const { width, height } = pageDimensions[pageIndex] ?? {
+          width: DEFAULT_PAGE_HEIGHT,
+          height: DEFAULT_PAGE_HEIGHT,
+        };
+        const left = positionX * width * scale;
+        const citationY = targetScrollTop + positionY * height * scale;
+
+        setTimeout(() => {
+          if (outerRef.current) {
+            const viewportWidth = outerRef.current.clientWidth;
+            // center the citation horizontally: citation center - half viewport width
+            const targetScrollLeft = left - viewportWidth / 2;
+            outerRef.current.scrollLeft = Math.max(targetScrollLeft, 0);
+          }
+        }, 0);
+
+        // center the citation vertically: citation center - half viewport height
+        const viewportHeight = containerDimensions.height;
+        const centeredScrollTop = citationY - viewportHeight / 2;
+        listRef.current?.scrollTo(Math.max(centeredScrollTop, 0));
+      } else {
+        listRef.current?.scrollTo(targetScrollTop);
+      }
+    },
+    [pageDimensions, scale, visiblePageNumbers, containerDimensions],
+  );
+
+  const scrollToAnnotation = useCallback(
+    (key: string) => {
+      const annotation = annotations?.find((a) => a.key === key);
+      if (annotation?.boundingRegions && annotation.boundingRegions.length > 0) {
+        // Find the bounding region with the lowest page number (most relevant)
+        const targetRegion = annotation.boundingRegions.reduce((prev, curr) =>
+          curr.pageNumber < prev.pageNumber ? curr : prev,
+        );
+        const { pageNumber, polygon } = targetRegion;
+        const positionX = Math.max(0, (polygon[0] + polygon[2]) / 2);
+        const positionY = Math.max(0, (polygon[1] + polygon[3] + polygon[5] + polygon[7]) / 4);
+        scrollToLocation({ pageIndex: pageNumber - 1, positionX, positionY });
+      } else {
+        scrollToLocation({ pageIndex: 0 });
+      }
+    },
+    [annotations, scrollToLocation],
+  );
+
+  useImperativeHandle(ref, () => ({
+    scrollToLocation: (props: ScrollProps) => {
+      scrollToLocation(props);
+    },
+    scrollToAnnotation,
+    isReady: () => {
+      return !!(pdfDocument && pageDimensions && listRef.current);
+    },
+  }));
+
+  const itemData = useMemo(
+    () => ({
+      pdf,
+      pageDimensions: pageDimensions!,
+      scale,
+      annotations,
+      annotationFocus,
+      onSelectCitation,
+      visiblePageNumbers,
+    }),
+    [
+      pdf,
+      pageDimensions,
+      scale,
+      annotations,
+      annotationFocus,
+      onSelectCitation,
+      visiblePageNumbers,
+    ],
+  );
+
+  const itemSize = useCallback(
+    (index: number) => {
+      const pageIndex = visiblePageNumbers ? visiblePageNumbers[index]! - 1 : index;
+      return (pageDimensions?.[pageIndex]?.height ?? DEFAULT_PAGE_HEIGHT) * scale;
+    },
+    [pageDimensions, scale, visiblePageNumbers],
+  );
+
+  const itemCount = visiblePageNumbers ? visiblePageNumbers.length : (pdfDocument?.numPages ?? 0);
+
+  return (
+    <div
+      ref={containerRef}
+      className="border-gray-pdf bg-gray-pdf relative mx-auto flex w-full flex-1 justify-center select-none dark:border-stone-800 dark:bg-stone-950"
+    >
+      {loadingError ? (
+        <div className="mt-20 flex flex-col items-center gap-4">
+          <H3>PDF failed to load...</H3>
+          {refreshPdfUrl && (
+            <Button
+              variant="outline"
+              extra="action"
+              onClick={async () => {
+                await refreshPdfUrl();
+                setLoadingError(false);
+              }}
+            >
+              Try again?
+            </Button>
+          )}
+        </div>
+      ) : (
+        <Document
+          key={pdf.documentId}
+          onItemClick={({ pageNumber }) => scrollToLocation({ pageIndex: pageNumber - 1 })}
+          file={pdf.url}
+          onLoadSuccess={(document) => {
+            setPdfDocument(document);
+          }}
+          onLoadError={() => {
+            setLoadingError(true);
+          }}
+          loading={<Loader2Icon className="mt-20 animate-spin" />}
+        >
+          {pdfDocument && pageDimensions ? (
+            <VariableSizeList
+              ref={listRef}
+              outerRef={outerRef}
+              width={containerDimensions.width}
+              height={containerDimensions.height}
+              itemCount={itemCount}
+              itemSize={itemSize}
+              estimatedItemSize={DEFAULT_PAGE_HEIGHT * scale}
+              className="variable-size-list"
+              itemData={itemData}
+              onItemsRendered={({ visibleStartIndex }) => {
+                // Mark that items have been rendered
+                setHasRenderedItems(true);
+
+                // only update if the index has changed to prevent loops
+                if (visibleStartIndex !== undefined) {
+                  const actualPageIndex = visiblePageNumbers
+                    ? visiblePageNumbers[visibleStartIndex]! - 1
+                    : visibleStartIndex;
+                  setIndex(actualPageIndex);
+                }
+              }}
+            >
+              {PageRenderer}
+            </VariableSizeList>
+          ) : null}
+        </Document>
+      )}
+    </div>
+  );
+}
+
+const PageRenderer = ({ index, style, data }: ListChildComponentProps<PageData>) => {
+  const {
+    pdf,
+    pageDimensions,
+    scale,
+    annotations,
+    annotationFocus,
+    onSelectCitation,
+    visiblePageNumbers,
+  } = data;
+
+  const pageIndex = visiblePageNumbers ? visiblePageNumbers[index]! - 1 : index;
+  const pageDim = pageDimensions[pageIndex];
+  if (!pageDim) return null;
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  // filter annotation to only those on current page
+  const highlights = useMemo(
+    () =>
+      annotations
+        .filter((a) => a.boundingRegions?.map((r) => r.pageNumber - 1).includes(pageIndex))
+        .flatMap((a) =>
+          a.boundingRegions
+            .filter((r) => r.pageNumber - 1 === pageIndex)
+            .map((r) => ({
+              key: a.key,
+              left: r.polygon[0] * pageDim.width * scale,
+              top: r.polygon[1] * pageDim.height * scale,
+              width: (r.polygon[2] - r.polygon[0]) * pageDim.width * scale,
+              height: (r.polygon[5] - r.polygon[1]) * pageDim.height * scale,
+              linkedCitations: a.linkedCitations,
+            })),
+        ),
+    [annotations, pageDim, pageIndex, scale],
+  );
+
+  return (
+    <div
+      key={`${pdf.documentId}-${pageIndex}`}
+      ref={containerRef}
+      style={{ ...style, padding: "10px" }}
+    >
+      <Page
+        pageIndex={pageIndex}
+        scale={scale}
+        className="mx-auto w-fit"
+        renderAnnotationLayer={false}
+        renderTextLayer={false}
+        onRenderError={(e) => {
+          console.error("Error rendering page", e);
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          onSelectCitation?.("", "");
+        }}
+      >
+        {highlights.map((hl, hlIndex) => {
+          if (!containerRef.current) return null;
+
+          const { activeCitationId, activeAnnotationKey } = annotationFocus;
+          const isFocused = activeAnnotationKey === hl.key;
+          const isActive = activeCitationId
+            ? hl.linkedCitations.map((c) => c.id).includes(activeCitationId)
+            : false;
+
+          return (
+            <Highlight
+              key={`hl-${hl.key}-${hlIndex}`}
+              linkedCitations={hl.linkedCitations}
+              annotationKey={hl.key}
+              activeCitationId={activeCitationId}
+              onSelectCitation={onSelectCitation}
+              style={{
+                position: "absolute",
+                left: `${hl.left}px`,
+                top: `${hl.top}px`,
+                width: `${hl.width}px`,
+                height: `${hl.height}px`,
+              }}
+              isActive={isActive}
+              isFocused={isFocused}
+            />
+          );
+        })}
+      </Page>
+    </div>
+  );
+};
+
+const Highlight = memo(
+  ({
+    linkedCitations,
+    annotationKey,
+    activeCitationId,
+    onSelectCitation,
+    style,
+    isActive,
+    isFocused,
+  }: {
+    linkedCitations: CitationRef[];
+    annotationKey: string;
+    activeCitationId?: string;
+    onSelectCitation?: (citationId: string, annotationKey: string) => void;
+    style?: CSSProperties;
+    isActive?: boolean;
+    isFocused?: boolean;
+  }) => {
+    const [showOthers, setShowOthers] = useState(false);
+
+    const renderRef = (ref: CitationRef) => {
+      const pathSegments = ref.path.split(".");
+      const fieldName = pathSegments.slice(-1).join(".");
+
+      return (
+        <div className="flex flex-col gap-0.5">
+          <span className="font-mono text-[10px] tracking-wide text-nowrap text-stone-500 dark:text-stone-300">
+            {fieldName}
+          </span>
+          {ref.value !== undefined && ref.value !== null && (
+            <span className="max-w-md text-xs font-semibold whitespace-normal text-stone-700 dark:text-stone-100">
+              {ref.value}
+            </span>
+          )}
+        </div>
+      );
+    };
+
+    const activeCitation = linkedCitations.find((c) => c.id === activeCitationId);
+    const otherCitations = linkedCitations.filter((c) => c.id !== activeCitationId);
+
+    return (
+      <Popover open={isFocused} onOpenChange={(open) => !open && setShowOthers(false)}>
+        <PopoverTrigger asChild>
+          <div style={style}>
+            <span
+              role="button"
+              tabIndex={0}
+              className={cn(
+                "block h-full w-full overflow-hidden rounded select-none",
+                onSelectCitation ? "cursor-pointer" : "cursor-default",
+                isActive ? "bg-rose-500/25" : "bg-blue-500/20",
+                isFocused ? "rounded-md border-2 border-rose-600/90" : "",
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                const firstCitation = linkedCitations[0];
+                if (!firstCitation) return;
+                onSelectCitation?.(firstCitation.id, annotationKey);
+              }}
+            />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-64 p-0"
+          align="start"
+          side="bottom"
+          sideOffset={5}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onCloseAutoFocus={(e) => e.preventDefault()}
+        >
+          <div className="flex flex-col overflow-hidden rounded-sm bg-white dark:bg-stone-900">
+            {activeCitation && (
+              <div className="flex items-start gap-1.5 bg-rose-50 px-2 py-2 dark:bg-rose-500/10">
+                <div className="flex-1">{renderRef(activeCitation)}</div>
+              </div>
+            )}
+
+            {otherCitations.length > 0 && (
+              <div>
+                <button
+                  type="button"
+                  className={cn(
+                    "flex w-full justify-center border-stone-200 px-2 py-1.5 text-xs text-stone-600",
+                    "hover:bg-stone-100 dark:border-stone-700 dark:text-stone-400 dark:hover:bg-stone-800",
+                  )}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setShowOthers(!showOthers);
+                  }}
+                >
+                  {otherCitations.length} other source{otherCitations.length > 1 ? "s" : ""}
+                  {showOthers ? (
+                    <ChevronUpIcon className="size-4" />
+                  ) : (
+                    <ChevronDownIcon className="size-4" />
+                  )}
+                </button>
+
+                {showOthers && (
+                  <div className="flex max-h-60 flex-col overflow-y-auto border-t border-stone-200 dark:border-stone-700">
+                    {otherCitations.map((c) => (
+                      <button
+                        key={c.id}
+                        type="button"
+                        className="flex w-full items-start gap-1.5 border-l-2 border-transparent px-2 py-1.5 pl-6 text-left text-stone-700 transition-all hover:bg-stone-100 focus-visible:ring-2 focus-visible:ring-rose-400 focus-visible:outline-none dark:text-stone-100 dark:hover:bg-stone-800"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          onSelectCitation?.(c.id, annotationKey);
+                          setShowOthers(false);
+                        }}
+                      >
+                        <div className="flex-1">{renderRef(c)}</div>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);

package/libs/ui/src/components/misc/rel-date.tsx

@@ -0,0 +1,52 @@
+// This is here to prevent React hydration errors
+// with relative dates being calculated differently on the server and client
+
+import { differenceInCalendarDays, format, formatRelative, isSameWeek } from "date-fns";
+import { enGB } from "date-fns/locale";
+
+const ukFormatRelativeLocale = {
+  lastWeek: "'last' eeee 'at' p",
+  yesterday: "'yesterday at' p",
+  today: "'today at' p",
+  tomorrow: "'tomorrow at' p",
+  nextWeek: "eeee 'at' p",
+  other: "d MMM yyyy",
+};
+
+type FormatRelativeToken = keyof typeof ukFormatRelativeLocale;
+
+const relativeLocale: typeof enGB = {
+  ...enGB,
+  formatRelative: (token, date, baseDate, options) => {
+    const formatString = ukFormatRelativeLocale[token as FormatRelativeToken];
+    if (formatString) {
+      return formatString;
+    }
+    return enGB.formatRelative(token, date, baseDate, options);
+  },
+};
+
+const baseOptions = { locale: relativeLocale, weekStartsOn: 1 as const } as const;
+
+function formatRelDate(date: Date) {
+  const now = new Date();
+  const dayDifference = differenceInCalendarDays(date, now);
+
+  if (Math.abs(dayDifference) <= 1) {
+    return formatRelative(date, now, baseOptions);
+  }
+
+  if (dayDifference < 0 && isSameWeek(date, now, baseOptions)) {
+    return format(date, "eeee 'at' p", baseOptions);
+  }
+
+  return formatRelative(date, now, baseOptions);
+}
+
+export function RelDate({ date, className }: { date: Date; className?: string }) {
+  return (
+    <span suppressHydrationWarning={true} className={className}>
+      {formatRelDate(date)}
+    </span>
+  );
+}

package/libs/ui/src/components/misc/styled-link.tsx

@@ -0,0 +1,2 @@
+export const styledLinkClassName =
+  "text-brand-sec-foreground cursor-pointer after:bg-brand-sec-foreground relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:transition-all after:duration-300 after:content-[''] hover:after:w-full";