@frontera-sdk/chat-ui 1.50.40

package/dist/pdf-document-view-inner-6DF54JWK.js

@@ -0,0 +1,585 @@
+'use client';
+import { zoomPercent, DECK_ZOOM_LEVELS, ArtifactSkeleton, LazyThumb } from './chunk-PUIVKDV5.js';
+import { useTranslation } from './chunk-QSSFBZAS.js';
+import { Button, ScrollArea } from './chunk-GTQH7MPF.js';
+import { useIsMobile } from './chunk-IXDM5R55.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem } from './chunk-ZS6PXIZP.js';
+import { cn } from './chunk-DGDHKMDB.js';
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownMediumIcon } from './chunk-AFVU5VT6.js';
+import './chunk-PR4QN5HX.js';
+import { memo, useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import { Page, pdfjs, Document } from 'react-pdf';
+import 'react-pdf/dist/Page/TextLayer.css';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var NOOP = () => {
+};
+var PdfDocumentPage = memo(function PdfDocumentPage2({
+  pdfDocument,
+  pageIndex,
+  displayWidth,
+  renderWidth,
+  pageDimensions,
+  shouldRender,
+  devicePixelRatio
+}) {
+  const displayHeight = Math.round(
+    displayWidth * pageDimensions.height / pageDimensions.width
+  );
+  const renderHeight = Math.round(
+    renderWidth * pageDimensions.height / pageDimensions.width
+  );
+  const displayScale = displayWidth / renderWidth;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-pdf-page-index": pageIndex,
+      "data-pdf-page-live": shouldRender,
+      className: "scroll-mt-4 overflow-hidden bg-surface-raised shadow-sm",
+      style: { width: displayWidth, height: displayHeight },
+      children: shouldRender ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: renderWidth,
+            height: renderHeight,
+            transform: `scale(${displayScale})`,
+            transformOrigin: "left top"
+          },
+          children: /* @__PURE__ */ jsx(
+            Page,
+            {
+              pdf: pdfDocument,
+              pageNumber: pageIndex + 1,
+              width: renderWidth,
+              devicePixelRatio,
+              renderAnnotationLayer: false,
+              onLoadError: NOOP,
+              onRenderError: NOOP,
+              error: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  style: { width: renderWidth, height: renderHeight },
+                  className: "bg-surface-raised"
+                }
+              ),
+              loading: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  style: { width: renderWidth, height: renderHeight },
+                  className: "bg-surface-raised"
+                }
+              )
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "size-full bg-surface-raised" })
+    }
+  );
+});
+PdfDocumentPage.displayName = "PdfDocumentPage";
+pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+var PDF_PAGE_RENDER_RADIUS = 2;
+var THUMB_W = 120;
+var COMPACT_THUMB_W = 76;
+var STRIP_THUMB_W = 112;
+var COMPACT_PANEL_WIDTH = 700;
+var RAIL_CLOSE_DELAY_MS = 60;
+var MAX_RAIL_TICKS = 12;
+function PdfDocumentViewInner({
+  fileUrl,
+  title,
+  label,
+  onError,
+  versionSlot
+}) {
+  const { t } = useTranslation();
+  const isMobile = useIsMobile();
+  const [selectedPage, setSelectedPage] = useState(0);
+  const [zoom, setZoom] = useState("fit");
+  const [loadedDocument, setLoadedDocument] = useState(null);
+  const [hostElement, setHostElement] = useState(null);
+  const [hostWidth, setHostWidth] = useState(0);
+  const [compact, setCompact] = useState(false);
+  const [railOpen, setRailOpen] = useState(false);
+  const viewerRef = useRef(null);
+  const railRef = useRef(null);
+  const railCloseTimerRef = useRef(null);
+  const pointerInside = useRef(false);
+  const mountedRef = useRef(false);
+  const activeSourceRef = useRef(fileUrl);
+  activeSourceRef.current = fileUrl;
+  const activeDocument = loadedDocument?.source === fileUrl ? loadedDocument : null;
+  const pages = activeDocument?.proxy.numPages ?? 0;
+  const pageDimensions = activeDocument?.pageDimensions ?? null;
+  const [renderPixelRatio] = useState(
+    () => typeof window === "undefined" ? 1 : Math.min(
+      window.devicePixelRatio || 1,
+      typeof window.matchMedia === "function" && window.matchMedia("(max-width: 767px)").matches ? 1.5 : 2
+    )
+  );
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      setLoadedDocument(null);
+    };
+  }, []);
+  const openRail = useCallback(() => {
+    if (railCloseTimerRef.current) {
+      clearTimeout(railCloseTimerRef.current);
+      railCloseTimerRef.current = null;
+    }
+    setRailOpen(true);
+  }, []);
+  const closeRail = useCallback(() => {
+    if (railCloseTimerRef.current) clearTimeout(railCloseTimerRef.current);
+    railCloseTimerRef.current = setTimeout(() => {
+      setRailOpen(false);
+      railCloseTimerRef.current = null;
+    }, RAIL_CLOSE_DELAY_MS);
+  }, []);
+  useEffect(
+    () => () => {
+      if (railCloseTimerRef.current) clearTimeout(railCloseTimerRef.current);
+    },
+    []
+  );
+  useLayoutEffect(() => {
+    const viewer = viewerRef.current;
+    if (!viewer) return;
+    const compute = () => {
+      const nextCompact = viewer.clientWidth < COMPACT_PANEL_WIDTH;
+      setCompact(nextCompact);
+      if (!nextCompact) setRailOpen(false);
+    };
+    compute();
+    const observer = new ResizeObserver(compute);
+    observer.observe(viewer);
+    return () => observer.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    if (!hostElement) return;
+    const measure = () => {
+      const styles = getComputedStyle(hostElement);
+      const horizontalPadding = (parseFloat(styles.paddingLeft) || 0) + (parseFloat(styles.paddingRight) || 0);
+      setHostWidth(Math.max(0, hostElement.clientWidth - horizontalPadding));
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(hostElement);
+    return () => observer.disconnect();
+  }, [hostElement]);
+  const goToPage = useCallback(
+    (pageIndex) => {
+      const nextPage = Math.min(Math.max(0, pageIndex), Math.max(0, pages - 1));
+      setSelectedPage(nextPage);
+      hostElement?.querySelector(`[data-pdf-page-index="${nextPage}"]`)?.scrollIntoView({ behavior: "smooth", block: "start" });
+    },
+    [hostElement, pages]
+  );
+  useEffect(() => {
+    if (!hostElement || pages === 0 || typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    const visiblePages = /* @__PURE__ */ new Map();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) visiblePages.set(entry.target, entry.intersectionRatio);
+          else visiblePages.delete(entry.target);
+        }
+        let mostVisiblePage = 0;
+        let highestRatio = -1;
+        for (const [element, ratio] of visiblePages) {
+          if (ratio <= highestRatio) continue;
+          highestRatio = ratio;
+          mostVisiblePage = Number(
+            element.dataset.pdfPageIndex ?? 0
+          );
+        }
+        if (highestRatio >= 0) setSelectedPage(mostVisiblePage);
+      },
+      {
+        root: hostElement,
+        threshold: [0.15, 0.35, 0.5, 0.75, 1]
+      }
+    );
+    const pageElements = hostElement.querySelectorAll("[data-pdf-page-index]");
+    pageElements.forEach((element) => observer.observe(element));
+    return () => observer.disconnect();
+  }, [hostElement, pageDimensions, pages]);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (!pointerInside.current) return;
+      const target = event.target;
+      if (target && (target.tagName === "TEXTAREA" || target.tagName === "INPUT" || target.isContentEditable)) {
+        return;
+      }
+      if (event.key === "PageDown" || event.key === "ArrowRight") {
+        event.preventDefault();
+        goToPage(selectedPage + 1);
+      } else if (event.key === "PageUp" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        goToPage(selectedPage - 1);
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        goToPage(0);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        goToPage(pages - 1);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [goToPage, pages, selectedPage]);
+  useEffect(() => {
+    if (!isMobile && compact && !railOpen) return;
+    railRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+  }, [compact, isMobile, railOpen, selectedPage]);
+  const showRail = pages > 1;
+  const tickCount = Math.min(pages, MAX_RAIL_TICKS);
+  const activeTick = pages > 0 ? Math.min(tickCount - 1, Math.floor(selectedPage * tickCount / pages)) : 0;
+  const pageWidth = pageDimensions ? zoom === "fit" ? Math.max(1, Math.floor(hostWidth)) : Math.max(1, Math.round(pageDimensions.width * zoom)) : 0;
+  const pageRenderWidth = pageDimensions ? zoom === "fit" ? Math.max(1, Math.round(pageDimensions.width)) : pageWidth : 0;
+  const thumbWidth = isMobile ? STRIP_THUMB_W : compact ? COMPACT_THUMB_W : THUMB_W;
+  const thumbHeight = pageDimensions ? Math.round(thumbWidth * pageDimensions.height / pageDimensions.width) : Math.round(thumbWidth * 1.4);
+  const zoomLabel = zoom === "fit" ? pageDimensions ? `${zoomPercent(pageWidth, pageDimensions.width) ?? 100}%` : t("deck.zoomFit") : `${Math.round(zoom * 100)}%`;
+  const handleDocumentLoadSuccess = useCallback(
+    (document) => {
+      const source = fileUrl;
+      if (document.loadingTask.destroyed) return;
+      void document.getPage(1).then((page) => {
+        if (!mountedRef.current || activeSourceRef.current !== source) return;
+        const viewport = page.getViewport({ scale: 1 });
+        setLoadedDocument({
+          source,
+          proxy: document,
+          pageDimensions: {
+            width: viewport.width,
+            height: viewport.height
+          }
+        });
+        setSelectedPage(0);
+      }).catch(() => {
+        if (mountedRef.current && activeSourceRef.current === source) {
+          onError();
+        }
+      });
+    },
+    [fileUrl, onError]
+  );
+  const renderThumbImage = (pageIndex) => activeDocument && /* @__PURE__ */ jsx(LazyThumb, { width: thumbWidth, height: thumbHeight, className: "bg-muted", children: /* @__PURE__ */ jsx(
+    Page,
+    {
+      pdf: activeDocument.proxy,
+      pageNumber: pageIndex + 1,
+      width: thumbWidth,
+      renderTextLayer: false,
+      renderAnnotationLayer: false,
+      loading: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: { width: thumbWidth, height: thumbHeight },
+          className: "animate-pulse bg-muted"
+        }
+      )
+    }
+  ) });
+  const renderPageThumb = (pageIndex) => {
+    if (!activeDocument) return null;
+    const isActive = pageIndex === selectedPage;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-active": isActive,
+        onClick: () => goToPage(pageIndex),
+        className: cn(
+          "flex items-start text-left transition-colors",
+          compact ? "w-full gap-2 rounded-lg p-1.5" : "w-fit shrink-0 gap-1.5 rounded-md p-2",
+          isActive ? "bg-surface-active" : compact ? "hover:bg-surface-overlay-hover" : "hover:bg-muted/60"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "w-3 shrink-0 pt-0.5 text-right text-xs tabular-nums",
+                isActive ? "font-semibold text-foreground" : "text-muted-foreground"
+              ),
+              children: pageIndex + 1
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "shrink-0 overflow-hidden border bg-surface shadow-sm",
+                compact ? "rounded-md" : "rounded",
+                isActive ? "border-transparent ring ring-foreground" : "border-border"
+              ),
+              children: renderThumbImage(pageIndex)
+            }
+          )
+        ]
+      },
+      pageIndex
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: viewerRef,
+      className: "flex h-full min-h-0 flex-col bg-surface-chat",
+      onMouseEnter: () => {
+        pointerInside.current = true;
+      },
+      onMouseLeave: () => {
+        pointerInside.current = false;
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid h-11 shrink-0 grid-cols-[1fr_auto_1fr] items-center gap-2 border-b border-border px-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2 px-1", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "min-w-0 truncate text-xs font-medium text-muted-foreground",
+                title,
+                children: label || title || "PDF"
+              }
+            ),
+            versionSlot
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon-sm",
+                className: "size-11! md:size-7!",
+                disabled: selectedPage === 0,
+                onClick: () => goToPage(selectedPage - 1),
+                "aria-label": t("deck.prevPage"),
+                title: t("deck.prevPage"),
+                children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-atomic": "true",
+                "aria-live": "polite",
+                className: "min-w-12 text-center text-xs tabular-nums text-foreground",
+                children: pages > 0 ? `${selectedPage + 1}/${pages}` : "\u2014/\u2014"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon-sm",
+                className: "size-11! md:size-7!",
+                disabled: pages === 0 || selectedPage === pages - 1,
+                onClick: () => goToPage(selectedPage + 1),
+                "aria-label": t("deck.nextPage"),
+                title: t("deck.nextPage"),
+                children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center justify-end gap-1", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "h-11 gap-1 px-2 text-xs tabular-nums text-muted-foreground hover:text-foreground md:h-8",
+                "aria-label": t("deck.zoom"),
+                children: [
+                  zoomLabel,
+                  /* @__PURE__ */ jsx(ChevronDownMediumIcon, { className: "size-3.5" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "min-w-28", children: /* @__PURE__ */ jsxs(
+              DropdownMenuRadioGroup,
+              {
+                value: zoom === "fit" ? "fit" : String(zoom),
+                onValueChange: (value) => setZoom(value === "fit" ? "fit" : Number(value)),
+                children: [
+                  /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: "fit", children: t("deck.zoomFit") }),
+                  DECK_ZOOM_LEVELS.map((level) => /* @__PURE__ */ jsxs(
+                    DropdownMenuRadioItem,
+                    {
+                      value: String(level),
+                      children: [
+                        Math.round(level * 100),
+                        "%"
+                      ]
+                    },
+                    level
+                  ))
+                ]
+              }
+            ) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 bg-muted/30", children: [
+          showRail && activeDocument && !isMobile && (compact ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "relative flex min-h-0 w-11 shrink-0 items-center justify-center",
+              onMouseEnter: openRail,
+              onMouseLeave: closeRail,
+              onFocusCapture: openRail,
+              onBlurCapture: (event) => {
+                if (!event.currentTarget.contains(event.relatedTarget)) closeRail();
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex h-11 w-11 flex-col items-center justify-center gap-1.5 bg-transparent p-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+                    "aria-label": t("deck.showPages"),
+                    "aria-expanded": railOpen,
+                    onClick: (event) => {
+                      event.preventDefault();
+                      openRail();
+                    },
+                    children: Array.from({ length: tickCount }, (_, tickIndex) => /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-page-indicator": tickIndex,
+                        "data-active": tickIndex === activeTick,
+                        "aria-hidden": true,
+                        className: cn(
+                          "h-0.5 w-5 shrink-0 transition-colors",
+                          tickIndex === activeTick ? "bg-foreground" : "bg-muted-foreground/20"
+                        )
+                      },
+                      tickIndex
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "dialog",
+                    "aria-label": t("deck.showPages"),
+                    "aria-hidden": !railOpen,
+                    inert: !railOpen,
+                    "data-testid": "pdf-rail-overlay",
+                    "data-state": railOpen ? "open" : "closed",
+                    className: cn(
+                      "absolute left-3 top-1/2 z-50 max-h-[70vh] w-36 -translate-y-1/2 overflow-hidden rounded-xl border border-border bg-surface-overlay p-1.5 shadow-lg transition-opacity duration-[120ms] ease-out will-change-opacity motion-reduce:transition-none",
+                      railOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: railRef,
+                        className: "max-h-[calc(70vh-0.75rem)] overflow-y-auto scrollbar",
+                        children: Array.from(
+                          { length: pages },
+                          (_, pageIndex) => renderPageThumb(pageIndex)
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ) : /* @__PURE__ */ jsx(
+            ScrollArea,
+            {
+              scrollbars: "both",
+              className: "w-full shrink-0 border-b border-border sm:w-[164px] sm:border-b-0 sm:border-r",
+              children: /* @__PURE__ */ jsx("div", { ref: railRef, className: "flex flex-row gap-1 p-2 sm:flex-col", children: Array.from(
+                { length: pages },
+                (_, pageIndex) => renderPageThumb(pageIndex)
+              ) })
+            }
+          )),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: setHostElement,
+              className: "min-h-0 flex-1 overflow-auto overscroll-contain scrollbar px-2 py-3 md:px-4 md:py-4",
+              children: activeDocument && pages > 0 && pageWidth > 0 && pageDimensions ? /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-fit min-w-full flex-col items-center gap-3 md:gap-4", children: Array.from({ length: pages }, (_, pageIndex) => /* @__PURE__ */ jsx(
+                PdfDocumentPage,
+                {
+                  pdfDocument: activeDocument.proxy,
+                  pageIndex,
+                  displayWidth: pageWidth,
+                  renderWidth: pageRenderWidth,
+                  pageDimensions,
+                  shouldRender: Math.abs(pageIndex - selectedPage) <= PDF_PAGE_RENDER_RADIUS,
+                  devicePixelRatio: renderPixelRatio
+                },
+                pageIndex
+              )) }) : /* @__PURE__ */ jsx(ArtifactSkeleton, { format: "pdf", showChrome: false })
+            }
+          )
+        ] }),
+        showRail && activeDocument && isMobile && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: railRef,
+            "data-testid": "pdf-page-strip",
+            className: "flex shrink-0 gap-2 overflow-x-auto border-t border-border bg-surface px-2 py-2 scrollbar-hide",
+            children: Array.from({ length: pages }, (_, pageIndex) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "data-active": pageIndex === selectedPage,
+                onClick: () => goToPage(pageIndex),
+                "aria-label": `${t("deck.page")} ${pageIndex + 1}`,
+                "aria-current": pageIndex === selectedPage,
+                className: cn(
+                  "relative shrink-0 overflow-hidden rounded border bg-surface transition-colors",
+                  pageIndex === selectedPage ? "border-transparent ring ring-foreground" : "border-border"
+                ),
+                children: [
+                  renderThumbImage(pageIndex),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "absolute bottom-0.5 right-0.5 rounded bg-surface-overlay/85 px-1 text-[10px] tabular-nums",
+                        pageIndex === selectedPage ? "text-foreground" : "text-muted-foreground"
+                      ),
+                      children: pageIndex + 1
+                    }
+                  )
+                ]
+              },
+              pageIndex
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Document,
+          {
+            file: fileUrl,
+            onLoadSuccess: handleDocumentLoadSuccess,
+            onLoadError: onError,
+            loading: null,
+            error: null,
+            className: "hidden"
+          },
+          fileUrl
+        )
+      ]
+    }
+  );
+}
+
+export { PdfDocumentViewInner as default };