@llamaindex/ui
Version:
A comprehensive UI component library built with React, TypeScript, and Tailwind CSS for LlamaIndex applications
256 lines (253 loc) • 8.19 kB
JavaScript
import { Input } from './chunk-A734CEDD.mjs';
import { Button } from './chunk-KPGB4IWL.mjs';
import { cn } from './chunk-MG2ARK3A.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { File, Trash2, ChevronLeft, ChevronRight, Minus, Plus, RotateCcw, Download, Maximize } from 'lucide-react';
function BoundingBoxOverlay({
boundingBoxes,
zoom,
containerWidth,
containerHeight,
onBoundingBoxClick
}) {
if (containerWidth === 0 || containerHeight === 0) {
return null;
}
return /* @__PURE__ */ jsx(
"svg",
{
style: {
position: "absolute",
top: 0,
left: 0,
width: containerWidth * zoom,
height: containerHeight * zoom,
pointerEvents: "none"
},
viewBox: `0 0 ${containerWidth} ${containerHeight}`,
children: boundingBoxes.map((box) => /* @__PURE__ */ jsxs("g", { children: [
/* @__PURE__ */ jsx(
"rect",
{
x: box.x,
y: box.y,
width: box.width,
height: box.height,
fill: box.color || "rgba(255, 0, 0, 0.2)",
stroke: box.color || "red",
strokeWidth: 2 / zoom,
style: {
pointerEvents: "auto",
cursor: onBoundingBoxClick ? "pointer" : "default"
},
onClick: () => onBoundingBoxClick == null ? void 0 : onBoundingBoxClick(box)
}
),
box.label && /* @__PURE__ */ jsx(
"text",
{
x: box.x,
y: box.y - 5,
fill: box.color || "red",
fontSize: 12 / zoom,
fontWeight: "bold",
children: box.label
}
)
] }, box.id))
}
);
}
var PdfNavigator = ({
fileName,
currentPage,
totalPages,
scale,
onPageChange,
onScaleChange,
onDownload,
onRemove,
onReset,
onFullscreen,
className
}) => {
const [pageInput, setPageInput] = useState(currentPage.toString());
const [isEditing, setIsEditing] = useState(false);
useEffect(() => {
if (!isEditing) {
setPageInput(currentPage.toString());
}
}, [currentPage, isEditing]);
const handlePageInputChange = (value) => {
setPageInput(value);
setIsEditing(true);
};
const handlePageInputSubmit = () => {
const pageNumber = parseInt(pageInput);
if (pageNumber >= 1 && pageNumber <= totalPages) {
onPageChange(pageNumber);
} else {
setPageInput(currentPage.toString());
}
setIsEditing(false);
};
const handlePageInputKeyDown = (e) => {
if (e.key === "Enter") {
handlePageInputSubmit();
}
};
const handlePageInputFocus = () => {
setIsEditing(true);
};
const handlePrevPage = () => {
if (currentPage > 1) {
onPageChange(currentPage - 1);
}
};
const handleNextPage = () => {
if (currentPage < totalPages) {
onPageChange(currentPage + 1);
}
};
const handleZoomIn = () => {
onScaleChange(Math.min(scale + 0.25, 3));
};
const handleZoomOut = () => {
onScaleChange(Math.max(scale - 0.25, 0.5));
};
const handleReset = () => {
onScaleChange(1);
onReset == null ? void 0 : onReset();
};
const handleFullscreen = () => {
onFullscreen();
};
return /* @__PURE__ */ jsx("div", { className: cn("sticky top-0 w-full z-50 text-xs", className), children: /* @__PURE__ */ jsxs("div", { className: "bg-white border px-6 flex items-center justify-between gap-3 h-10", children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsx(File, { className: "size-4" }),
/* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: fileName }),
onRemove && /* @__PURE__ */ jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: onRemove,
className: "size-6 p-0",
title: "Remove PDF",
children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
}
)
] }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: handlePrevPage,
disabled: currentPage <= 1,
className: "size-6 p-0",
children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
}
),
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-0.5", children: [
/* @__PURE__ */ jsx(
Input,
{
type: "number",
value: pageInput,
onChange: (e) => handlePageInputChange(e.target.value),
onFocus: handlePageInputFocus,
onBlur: handlePageInputSubmit,
onKeyDown: handlePageInputKeyDown,
className: "size-6 px-1 text-center text-xs! rounded-sm [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0 [-moz-appearance:textfield] shadow-none border border-transparent hover:border-gray-300 focus:border-gray-500 focus:outline-none",
min: 1,
max: totalPages
}
),
/* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "/" }),
/* @__PURE__ */ jsx("span", { className: "flex items-center text-xs text-muted-foreground h-7 ml-1", children: totalPages })
] }),
/* @__PURE__ */ jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: handleNextPage,
disabled: currentPage >= totalPages,
className: "size-6 p-0",
children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
}
)
] }),
/* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border" }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: handleZoomOut,
disabled: scale <= 0.5,
className: "size-6 p-0",
title: "Zoom Out",
children: /* @__PURE__ */ jsx(Minus, { className: "size-4" })
}
),
/* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground text-center", children: [
Math.round(scale * 100),
"%"
] }),
/* @__PURE__ */ jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: handleZoomIn,
disabled: scale >= 3,
className: "size-6 p-0",
title: "Zoom In",
children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
}
),
/* @__PURE__ */ jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: handleReset,
className: "size-6 p-0",
title: "Reset Zoom",
children: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" })
}
)
] }),
onDownload && /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border" }),
onDownload && /* @__PURE__ */ jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: onDownload,
className: "size-6 p-0",
title: "Download PDF",
children: /* @__PURE__ */ jsx(Download, { className: "size-4" })
}
),
/* @__PURE__ */ jsx(
Button,
{
variant: "ghost",
size: "sm",
onClick: handleFullscreen,
className: "size-6 p-0",
title: "Fullscreen",
children: /* @__PURE__ */ jsx(Maximize, { className: "size-4" })
}
)
] })
] }) });
};
export { BoundingBoxOverlay, PdfNavigator };