@llamaindex/ui
Version:
A comprehensive UI component library built with React, TypeScript, and Tailwind CSS for LlamaIndex applications
259 lines (255 loc) • 8.86 kB
JavaScript
'use strict';
var chunkJU362VQX_js = require('./chunk-JU362VQX.js');
var chunkDKHXLIK3_js = require('./chunk-DKHXLIK3.js');
var chunkHK7TFVDA_js = require('./chunk-HK7TFVDA.js');
var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var lucideReact = require('lucide-react');
function BoundingBoxOverlay({
boundingBoxes,
zoom,
containerWidth,
containerHeight,
onBoundingBoxClick
}) {
if (containerWidth === 0 || containerHeight === 0) {
return null;
}
return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
/* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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] = react.useState(currentPage.toString());
const [isEditing, setIsEditing] = react.useState(false);
react.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__ */ jsxRuntime.jsx("div", { className: chunkHK7TFVDA_js.cn("sticky top-0 w-full z-50 text-xs", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white border px-6 flex items-center justify-between gap-3 h-10", children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.File, { className: "size-4" }),
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: fileName }),
onRemove && /* @__PURE__ */ jsxRuntime.jsx(
chunkDKHXLIK3_js.Button,
{
variant: "ghost",
size: "sm",
onClick: onRemove,
className: "size-6 p-0",
title: "Remove PDF",
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-4" })
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntime.jsx(
chunkDKHXLIK3_js.Button,
{
variant: "ghost",
size: "sm",
onClick: handlePrevPage,
disabled: currentPage <= 1,
className: "size-6 p-0",
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4" })
}
),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-0.5", children: [
/* @__PURE__ */ jsxRuntime.jsx(
chunkJU362VQX_js.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__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "/" }),
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center text-xs text-muted-foreground h-7 ml-1", children: totalPages })
] }),
/* @__PURE__ */ jsxRuntime.jsx(
chunkDKHXLIK3_js.Button,
{
variant: "ghost",
size: "sm",
onClick: handleNextPage,
disabled: currentPage >= totalPages,
className: "size-6 p-0",
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4" })
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-6 bg-border" }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsxRuntime.jsx(
chunkDKHXLIK3_js.Button,
{
variant: "ghost",
size: "sm",
onClick: handleZoomOut,
disabled: scale <= 0.5,
className: "size-6 p-0",
title: "Zoom Out",
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "size-4" })
}
),
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground text-center", children: [
Math.round(scale * 100),
"%"
] }),
/* @__PURE__ */ jsxRuntime.jsx(
chunkDKHXLIK3_js.Button,
{
variant: "ghost",
size: "sm",
onClick: handleZoomIn,
disabled: scale >= 3,
className: "size-6 p-0",
title: "Zoom In",
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-4" })
}
),
/* @__PURE__ */ jsxRuntime.jsx(
chunkDKHXLIK3_js.Button,
{
variant: "ghost",
size: "sm",
onClick: handleReset,
className: "size-6 p-0",
title: "Reset Zoom",
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "size-4" })
}
)
] }),
onDownload && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-6 bg-border" }),
onDownload && /* @__PURE__ */ jsxRuntime.jsx(
chunkDKHXLIK3_js.Button,
{
variant: "ghost",
size: "sm",
onClick: onDownload,
className: "size-6 p-0",
title: "Download PDF",
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "size-4" })
}
),
/* @__PURE__ */ jsxRuntime.jsx(
chunkDKHXLIK3_js.Button,
{
variant: "ghost",
size: "sm",
onClick: handleFullscreen,
className: "size-6 p-0",
title: "Fullscreen",
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, { className: "size-4" })
}
)
] })
] }) });
};
exports.BoundingBoxOverlay = BoundingBoxOverlay;
exports.PdfNavigator = PdfNavigator;