@e-llm-studio/citation 0.0.148 → 0.0.150
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +180 -45
- package/dist/cjs/features/ScannedDocCitation/ScannedDocCitation.js +1 -1
- package/dist/features/ScannedDocCitation/ScannedDocCitation.js +1 -1
- package/dist/types/src/ScannedDocCitationTest.d.ts.map +1 -1
- package/dist/types/src/features/ScannedDocCitation/ScannedDocCitation.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
- [CitationsViewer](#citationsviewer) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/CitationViewer/CitationViewerReadme.md)
|
|
17
17
|
- [PdfEditorCitation](#pdfeditorcitation) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/PdfEditorCitation/README.md)
|
|
18
18
|
- [RequirementAICitation](#requirementaicitation) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/RequirementAiCitations/RequirementAiCitationsReadme.md)
|
|
19
|
+
- [VideoCitationContent](#videocitationcontent) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/RequirementAiCitations/RequirementAiCitationsReadme.md)
|
|
19
20
|
- [ScannedDocCitation](#scanneddoccitation) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/ScannedDocCitation/README.md)
|
|
20
21
|
- [Other Components](#other-components)
|
|
21
22
|
- [Bookemon](#bookemon) [<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" width="18" height="18">](https://github.com/Techolution/e-llm-studio-lib/blob/dev/citation/src/features/Bookemon/BookemonReadme.md)
|
|
@@ -863,53 +864,190 @@ import { WebCitationWithImageContent } from '@e-llm-studio/citation/WebCitationW
|
|
|
863
864
|
npm install react-markdown rehype-raw @react-pdf-viewer/core @material-ui/core
|
|
864
865
|
```
|
|
865
866
|
|
|
866
|
-
---
|
|
867
867
|
|
|
868
|
+
## VideoCitationContent
|
|
869
|
+
|
|
870
|
+
### Overview
|
|
871
|
+
|
|
872
|
+
VideoCitationContent is a React component for rendering video citations with a built-in media player, relevance score display, and optional close button. It supports both direct video URLs and Google Cloud Storage paths (resolved to signed URLs via `cachingConfig`). The player (`react-player`) is loaded dynamically at runtime to avoid bundling it when unused.
|
|
873
|
+
|
|
874
|
+
### Features
|
|
875
|
+
|
|
876
|
+
- **Dynamic player loading** — `react-player` is imported at runtime; displays a graceful error if not installed
|
|
877
|
+
- **GCS signed URL resolution** — Accepts `gsUtilPath` and resolves it to a playable URL via `cachingConfig`
|
|
878
|
+
- **Configurable playback** — Control autoplay, looping, mute, volume, and dimensions via `playerConfig`
|
|
879
|
+
- **Relevance score badge** — Displays AI confidence score in the header
|
|
880
|
+
- **Optional close button** — Pass `closeCitationConfig` to show a close icon in the header
|
|
881
|
+
- **Deep style overrides** — Every visual region is customizable via the `styles` prop
|
|
882
|
+
|
|
883
|
+
### Usage
|
|
884
|
+
|
|
885
|
+
```tsx
|
|
886
|
+
import { CitationRenderer } from '@e-llm-studio/citation/CitationRenderer'
|
|
887
|
+
import VideoCitationContent from '@e-llm-studio/citation/VideoCitationContent'
|
|
888
|
+
|
|
889
|
+
<CitationRenderer
|
|
890
|
+
inLineCitation={true}
|
|
891
|
+
citationTitle="Video Reference"
|
|
892
|
+
citationComponent={
|
|
893
|
+
<VideoCitationContent
|
|
894
|
+
citationTitle="Demo Video"
|
|
895
|
+
relevanceScore={90}
|
|
896
|
+
videoUrl="https://example.com/sample.mp4"
|
|
897
|
+
playerConfig={{
|
|
898
|
+
controls: true,
|
|
899
|
+
playing: false,
|
|
900
|
+
loop: false,
|
|
901
|
+
muted: false,
|
|
902
|
+
volume: 0.8,
|
|
903
|
+
width: "100%",
|
|
904
|
+
height: "100%",
|
|
905
|
+
}}
|
|
906
|
+
styles={{
|
|
907
|
+
videoWrapper: { minHeight: "400px" },
|
|
908
|
+
}}
|
|
909
|
+
/>
|
|
910
|
+
}
|
|
911
|
+
chevronDownComponent={<span>▼</span>}
|
|
912
|
+
chevronUpComponent={<span>▲</span>}
|
|
913
|
+
/>
|
|
914
|
+
```
|
|
915
|
+
|
|
916
|
+
**With GCS path (requires `cachingConfig`):**
|
|
917
|
+
```tsx
|
|
918
|
+
<VideoCitationContent
|
|
919
|
+
citationTitle="Meeting Recording"
|
|
920
|
+
relevanceScore={85}
|
|
921
|
+
gsUtilPath="gs://my-bucket/recordings/meeting.mp4"
|
|
922
|
+
cachingConfig={{
|
|
923
|
+
queryClient,
|
|
924
|
+
useGetSignedUrlQuery,
|
|
925
|
+
useGetSignedUrlMutation,
|
|
926
|
+
}}
|
|
927
|
+
closeCitationConfig={{
|
|
928
|
+
CloseIcon: () => <span>✕</span>,
|
|
929
|
+
handleCloseCitationPreview: () => console.log("Closed"),
|
|
930
|
+
}}
|
|
931
|
+
/>
|
|
932
|
+
```
|
|
933
|
+
|
|
934
|
+
> **Note:** `VideoCitationContent` dynamically imports `react-player` at runtime. Ensure it is installed:
|
|
935
|
+
> ```bash
|
|
936
|
+
> npm install react-player
|
|
937
|
+
> ```
|
|
938
|
+
> If not installed, the component will display an inline error instead of the player.
|
|
939
|
+
|
|
940
|
+
### Props
|
|
941
|
+
|
|
942
|
+
| Prop Name | Type | Required | Description |
|
|
943
|
+
|-----------|------|----------|-------------|
|
|
944
|
+
| `videoUrl` | `string` | ❌ | Direct URL to the video. Takes priority over `gsUtilPath`. |
|
|
945
|
+
| `gsUtilPath` | `string` | ❌ | GCS path to the video (requires `cachingConfig` to resolve). |
|
|
946
|
+
| `citationTitle` | `string` | ❌ | Title shown in the header. Defaults to `"Video Reference"`. |
|
|
947
|
+
| `relevanceScore` | `number` | ❌ | Confidence score to display in the header badge (0–100). |
|
|
948
|
+
| `playerConfig` | `Object` | ❌ | Playback overrides — see table below. |
|
|
949
|
+
| `closeCitationConfig` | `Object` | ❌ | `{ CloseIcon, handleCloseCitationPreview }` — renders a close button in the header. |
|
|
950
|
+
| `cachingConfig` | `Object` | ❌ | `{ queryClient, useGetSignedUrlQuery, useGetSignedUrlMutation }` — required when using `gsUtilPath`. |
|
|
951
|
+
| `styles` | `Object` | ❌ | Deep style overrides — see table below. |
|
|
952
|
+
|
|
953
|
+
*Either `videoUrl` or `gsUtilPath` must be provided.
|
|
954
|
+
|
|
955
|
+
#### `playerConfig` options
|
|
956
|
+
|
|
957
|
+
| Key | Type | Default | Description |
|
|
958
|
+
|-----|------|---------|-------------|
|
|
959
|
+
| `controls` | `boolean` | `true` | Show native player controls |
|
|
960
|
+
| `playing` | `boolean` | `false` | Autoplay on mount |
|
|
961
|
+
| `loop` | `boolean` | `false` | Loop the video |
|
|
962
|
+
| `muted` | `boolean` | `false` | Start muted |
|
|
963
|
+
| `volume` | `number` | `0.8` | Initial volume (0–1) |
|
|
964
|
+
| `width` | `string` | `"100%"` | Player width |
|
|
965
|
+
| `height` | `string` | `"100%"` | Player height |
|
|
966
|
+
|
|
967
|
+
#### `styles` keys
|
|
968
|
+
|
|
969
|
+
| Key | Description |
|
|
970
|
+
|-----|-------------|
|
|
971
|
+
| `container` | Outer component wrapper |
|
|
972
|
+
| `header` | Header bar (title + right-side actions) |
|
|
973
|
+
| `title` | Title text element |
|
|
974
|
+
| `headerRight` | Right side of header (score + divider + close) |
|
|
975
|
+
| `divider` | Vertical divider between score and close icon |
|
|
976
|
+
| `closeIconWrapper` | Clickable wrapper around the close icon |
|
|
977
|
+
| `videoWrapper` | Wrapper around the `react-player` instance |
|
|
978
|
+
| `loaderContainer` | Centered loader shown while signing URL or loading player |
|
|
979
|
+
| `loaderText` | Text below the loader spinner |
|
|
980
|
+
| `aiConfidenceDisplayPill.container` | Relevance score badge container |
|
|
981
|
+
---
|
|
868
982
|
## ScannedDocCitation
|
|
869
983
|
|
|
870
984
|
### Overview
|
|
871
985
|
|
|
872
|
-
ScannedDocCitation is a React component for displaying scanned
|
|
986
|
+
ScannedDocCitation is a React component for displaying scanned document pages with interactive bounding box highlight overlays. Built for Google Document AI output, it supports multi-page scrolling, highlight navigation via arrows, and a fullscreen view.
|
|
873
987
|
|
|
874
988
|
### Features
|
|
875
989
|
|
|
876
|
-
- **Multi-page scrolling**
|
|
877
|
-
- **Bounding box highlights**
|
|
878
|
-
- **Highlight navigation**
|
|
879
|
-
- **Fullscreen modal**
|
|
880
|
-
- **Customizable highlight colors**
|
|
881
|
-
- **Pixel coordinate normalization** - Accepts raw pixel coordinates and normalizes using page dimensions
|
|
990
|
+
- **Multi-page scrolling** — All pages stacked vertically inside a fixed-height scrollable container
|
|
991
|
+
- **Bounding box highlights** — Overlay highlights on document pages using normalized (0–1) coordinates
|
|
992
|
+
- **Highlight navigation** — Jump between highlights using ↑↓ arrows, auto-scrolls to active highlight
|
|
993
|
+
- **Fullscreen modal** — Expand to a larger view for detailed examination
|
|
994
|
+
- **Customizable highlight colors** — Control highlight color, active color, and border color
|
|
882
995
|
|
|
883
996
|
### Usage
|
|
997
|
+
|
|
884
998
|
```tsx
|
|
885
999
|
import ScannedDocCitation from '@e-llm-studio/citation/ScannedDocCitation'
|
|
886
1000
|
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
bboxes: [
|
|
897
|
-
{ xmin: 127, ymin: 132, xmax: 1147, ymax: 297 }
|
|
898
|
-
]
|
|
1001
|
+
const BACKEND_CITATIONS = [
|
|
1002
|
+
{
|
|
1003
|
+
customMetaData: {
|
|
1004
|
+
citation_number: 1,
|
|
1005
|
+
gs_url: "https://storage.googleapis.com/temp_storage_data_ingest/chunk_outputs/123-1121234567512111221102311211201111/_Artifact%20Search%20Response%20format/a0e91e41-255b-404e-a5a3-899f9f760a9a.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=ellm-studio%40proposal-auto-ai-internal.iam.gserviceaccount.com%2F20260311%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20260311T171935Z&X-Goog-Expires=604800&X-Goog-SignedHeaders=host&X-Goog-Signature=1cc5beae8c1a386d182b34044eb1a207d7c11e6477fff242d6d2a1eb23387a85ce3aa763b979feadb41bc176bd8fd4371f813a0446bfb861d1db72a40808fd74bf",
|
|
1006
|
+
highlighted_coordinates: [
|
|
1007
|
+
{ xmin: 0.2855, ymin: 0.5812, xmax: 0.7882, ymax: 0.5915 },
|
|
1008
|
+
{ xmin: 0.1176, ymin: 0.7006, xmax: 0.8784, ymax: 0.7273 },
|
|
1009
|
+
],
|
|
899
1010
|
},
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
1011
|
+
},
|
|
1012
|
+
{
|
|
1013
|
+
customMetaData: {
|
|
1014
|
+
citation_number: 2,
|
|
1015
|
+
gs_url: "https://storage.googleapis.com/temp_storage_data_ingest/chunk_outputs/123-1121234567512111221102311211201111/_Artifact%20Search%20Response%20format/7fef8f3e-25de-4c29-a9be-02dfd9643b0b.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=ellm-studio%40proposal-auto-ai-internal.iam.gserviceaccount.com%2F20260311%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20260311T171935Z&X-Goog-Expires=604800&X-Goog-SignedHeaders=host&X-Goog-Signature=79772ff7ebb758047c11bc276ce5c5a976eec830f96e92e2303da91cee72cdc7e8d22e0d0207b537ab78ba6b7cd7f6bb5808b7bd5fbba61861a5d1478affbb39b4",
|
|
1016
|
+
highlighted_coordinates: [
|
|
1017
|
+
{ xmin: 0.1176, ymin: 0.5885, xmax: 0.7969, ymax: 0.643 },
|
|
1018
|
+
],
|
|
1019
|
+
},
|
|
1020
|
+
},
|
|
1021
|
+
{
|
|
1022
|
+
customMetaData: {
|
|
1023
|
+
citation_number: 3,
|
|
1024
|
+
gs_url: "https://storage.googleapis.com/temp_storage_data_ingest/chunk_outputs/123-1121234567512111221102311211201111/CW%20Buttons%20with%20or%20without%20Cognitive%20Decisioning%20Icons/6f11ae86-53ef-43f0-b21a-4bf52700f68f.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=ellm-studio%40proposal-auto-ai-internal.iam.gserviceaccount.com%2F20260311%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20260311T171935Z&X-Goog-Expires=604800&X-Goog-SignedHeaders=host&X-Goog-Signature=71b4873b97b53c35b529ed4b4ef5c7e6d085c4d4820cd4e7e1ddbabce5cf7975",
|
|
1025
|
+
highlighted_coordinates: [
|
|
1026
|
+
{ xmin: 0.1176, ymin: 0.1624, xmax: 0.8322, ymax: 0.1909 },
|
|
1027
|
+
{ xmin: 0.1176, ymin: 0.6624, xmax: 0.8329, ymax: 0.6915 },
|
|
1028
|
+
],
|
|
1029
|
+
},
|
|
1030
|
+
},
|
|
1031
|
+
]
|
|
1032
|
+
|
|
1033
|
+
// Each citation = one page. citation_number is 1-based, pageIndex is 0-based.
|
|
1034
|
+
const images = BACKEND_CITATIONS.map((c) => c.customMetaData.gs_url)
|
|
1035
|
+
|
|
1036
|
+
const highlights = BACKEND_CITATIONS.flatMap((c, pageIndex) =>
|
|
1037
|
+
c.customMetaData.highlighted_coordinates.map((coord) => ({
|
|
1038
|
+
pageIndex,
|
|
1039
|
+
bboxes: [coord],
|
|
1040
|
+
}))
|
|
1041
|
+
)
|
|
1042
|
+
|
|
1043
|
+
<ScannedDocCitation
|
|
1044
|
+
images={images}
|
|
1045
|
+
highlights={highlights}
|
|
908
1046
|
height="700px"
|
|
909
1047
|
/>
|
|
910
1048
|
```
|
|
911
1049
|
|
|
912
|
-
**With
|
|
1050
|
+
**With custom highlight colors:**
|
|
913
1051
|
```tsx
|
|
914
1052
|
<ScannedDocCitation
|
|
915
1053
|
images={imageUrls}
|
|
@@ -922,31 +1060,28 @@ import ScannedDocCitation from '@e-llm-studio/citation/ScannedDocCitation'
|
|
|
922
1060
|
|
|
923
1061
|
### Props
|
|
924
1062
|
|
|
925
|
-
| Prop
|
|
926
|
-
|
|
927
|
-
| `images` | `string[]` | ✅ | — | Array of image URLs, one per page |
|
|
928
|
-
| `highlights` | `PageHighlight[]` | ✅ | — | Array of
|
|
929
|
-
| `highlightColor` | `string` | ❌ | `rgba(255,220,0,0.
|
|
930
|
-
| `highlightActiveColor` | `string` | ❌ | `rgba(255,220,0,0.
|
|
931
|
-
| `highlightBorderColor` | `string` | ❌ | `rgba(200,160,0,0.
|
|
932
|
-
| `height` | `string \| number` | ❌ | `700px` | Height of the scrollable container |
|
|
1063
|
+
| Prop | Type | Required | Default | Description |
|
|
1064
|
+
|------|------|----------|---------|-------------|
|
|
1065
|
+
| `images` | `string[]` | ✅ | — | Array of pre-signed GCS image URLs, one per page |
|
|
1066
|
+
| `highlights` | `PageHighlight[]` | ✅ | — | Array of highlight groups with bounding boxes per page |
|
|
1067
|
+
| `highlightColor` | `string` | ❌ | `rgba(255, 220, 0, 0.15)` | Background color of inactive highlights |
|
|
1068
|
+
| `highlightActiveColor` | `string` | ❌ | `rgba(255, 220, 0, 0.35)` | Background color of the currently active highlight |
|
|
1069
|
+
| `highlightBorderColor` | `string` | ❌ | `rgba(200, 160, 0, 0.4)` | Border color of the active highlight |
|
|
1070
|
+
| `height` | `string \| number` | ❌ | `"700px"` | Height of the scrollable container |
|
|
933
1071
|
|
|
934
1072
|
### Type Definitions
|
|
1073
|
+
|
|
935
1074
|
```typescript
|
|
936
1075
|
interface BBox {
|
|
937
|
-
xmin: number; //
|
|
1076
|
+
xmin: number; // normalized 0–1 (provided directly by backend)
|
|
938
1077
|
ymin: number;
|
|
939
1078
|
xmax: number;
|
|
940
1079
|
ymax: number;
|
|
941
1080
|
}
|
|
942
1081
|
|
|
943
1082
|
interface PageHighlight {
|
|
944
|
-
pageIndex: number;
|
|
945
|
-
bboxes: BBox[];
|
|
946
|
-
dimensions: {
|
|
947
|
-
width: number; // original image width in pixels e.g. 1275
|
|
948
|
-
height: number; // original image height in pixels e.g. 1650
|
|
949
|
-
};
|
|
1083
|
+
pageIndex: number; // zero-based index matching the images array
|
|
1084
|
+
bboxes: BBox[];
|
|
950
1085
|
}
|
|
951
1086
|
|
|
952
1087
|
interface ScannedDocCitationProps {
|
|
@@ -959,7 +1094,7 @@ interface ScannedDocCitationProps {
|
|
|
959
1094
|
}
|
|
960
1095
|
```
|
|
961
1096
|
|
|
962
|
-
|
|
1097
|
+
> **Note:** Coordinates in `highlighted_coordinates` are already normalized (0–1) by the backend. No pixel conversion needed before passing them to the component.
|
|
963
1098
|
|
|
964
1099
|
|
|
965
1100
|
# Other Components
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),i=require("react/jsx-runtime"),n=require("react"),t=require("lucide-react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),i=require("react/jsx-runtime"),n=require("react"),t=require("lucide-react"),o=require("../ChatCitation/components/wrappers/Modal.js");exports.default=function(r){var s=r.images,a=r.highlights,l=r.highlightColor,d=void 0===l?"rgba(255, 220, 0, 0.15)":l,c=r.highlightActiveColor,x=void 0===c?"rgba(255, 220, 0, 0.35)":c,u=r.highlightBorderColor,g=void 0===u?"rgba(200, 160, 0, 0.4)":u,p=r.height,h=void 0===p?"700px":p,f=a.flatMap(function(e,i){return e.bboxes.map(function(n,t){return{bbox:n,pageIndex:e.pageIndex,key:"".concat(i,"-").concat(t)}})}).length,b=n.useState(0),m=b[0],_=b[1],y=n.useState(!1),v=y[0],j=y[1],C=n.useRef(null),k=n.useRef(null),w=n.useRef([]),I=n.useRef([]),R=n.useCallback(function(e,i){void 0===i&&(i=!1);var n=Math.max(0,Math.min(f-1,e));_(n),requestAnimationFrame(function(){var e=i?k.current:C.current,t=(i?I:w).current[n];if(e&&t){var o=e.getBoundingClientRect(),r=t.getBoundingClientRect(),s=r.top-o.top+e.scrollTop-e.clientHeight/2+r.height/2;e.scrollTo({top:s,behavior:"smooth"})}})},[f]),z=function(n){return void 0===n&&(n=!1),f>0&&i.jsx("div",e.__assign({style:{display:"flex",alignItems:"center",marginBottom:"6px"}},{children:i.jsxs("div",e.__assign({style:{marginLeft:"auto",display:"flex",alignItems:"center",gap:"4px"}},{children:[i.jsxs("span",e.__assign({style:{fontSize:"12px",color:"#888"}},{children:[m+1," / ",f]})),i.jsx("button",e.__assign({onClick:function(){return R(m-1,n)},disabled:m<=0,style:{padding:"2px 4px",cursor:m<=0?"not-allowed":"pointer",opacity:m<=0?.4:1,border:"1px solid #ddd",borderRadius:"3px",background:"white",display:"flex",alignItems:"center"}},{children:i.jsx(t.ChevronUp,{size:14,color:"#64748b"})})),i.jsx("button",e.__assign({onClick:function(){return R(m+1,n)},disabled:m>=f-1,style:{padding:"2px 4px",cursor:m>=f-1?"not-allowed":"pointer",opacity:m>=f-1?.4:1,border:"1px solid #ddd",borderRadius:"3px",background:"white",display:"flex",alignItems:"center"}},{children:i.jsx(t.ChevronDown,{size:14,color:"#64748b"})})),i.jsx("span",{style:{width:"1px",height:"16px",background:"#e2e8f0",margin:"0 2px"}}),n?i.jsx(t.X,{size:16,color:"#64748b",style:{cursor:"pointer"},onClick:function(){return j(!1)}}):i.jsx(t.Maximize2,{size:16,color:"#64748b",style:{cursor:"pointer"},onClick:function(){return j(!0)}})]}))}))},M=function(n){void 0===n&&(n=!1);var t=n?I:w,o=-1;return s.map(function(n,r){var s=a.filter(function(e){return e.pageIndex===r}).flatMap(function(e,i){return e.bboxes.map(function(e,n){return o++,{bbox:e,key:"".concat(r,"-").concat(i,"-").concat(n),globalIndex:o}})});return i.jsxs("div",e.__assign({style:{marginBottom:"8px"}},{children:[i.jsxs("div",e.__assign({style:{fontSize:"12px",color:"#888",marginBottom:"4px"}},{children:["Page ",r+1]})),i.jsx("div",e.__assign({style:{position:"relative",width:"100%",paddingTop:"129%",flexShrink:0}},{children:i.jsxs("div",e.__assign({style:{position:"absolute",inset:0}},{children:[i.jsx("img",{src:n,alt:"Page ".concat(r+1),style:{display:"block",width:"100%",height:"100%",objectFit:"fill"},draggable:!1}),s.map(function(e){var n=e.bbox,o=e.key,r=e.globalIndex,s=m===r;return i.jsx("div",{ref:function(e){t.current[r]=e},style:{position:"absolute",left:"".concat(100*n.xmin,"%"),top:"".concat(100*n.ymin,"%"),width:"".concat(100*(n.xmax-n.xmin),"%"),height:"".concat(100*(n.ymax-n.ymin),"%"),background:s?x:d,border:s?"1.5px solid ".concat(g):"none",borderRadius:"2px",zIndex:2}},o)})]}))}))]}),r)})},B={overflowY:"auto",border:"1px solid #ddd",borderRadius:"4px",padding:"8px",paddingBottom:0,display:"flex",flexDirection:"column",boxSizing:"border-box"};return i.jsxs(i.Fragment,{children:[i.jsxs("div",e.__assign({style:{width:"100%",maxWidth:"800px",fontFamily:"inherit",display:"flex",flexDirection:"column"}},{children:[z(!1),i.jsx("div",e.__assign({ref:C,style:e.__assign(e.__assign({},B),{maxHeight:h})},{children:M(!1)}))]})),i.jsx(o.Modal,e.__assign({isOpen:v,onClose:function(){return j(!1)}},{children:i.jsxs("div",e.__assign({style:{display:"flex",flexDirection:"column",height:"100%",overflow:"hidden"}},{children:[z(!0),i.jsx("div",e.__assign({ref:k,style:e.__assign(e.__assign({},B),{flex:1})},{children:v&&M(!0)}))]}))}))]})};
|
|
2
2
|
//# sourceMappingURL=ScannedDocCitation.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__assign as
|
|
1
|
+
import{__assign as i}from"tslib";import{jsxs as e,Fragment as t,jsx as o}from"react/jsx-runtime";import{useState as n,useRef as r,useCallback as l}from"react";import{ChevronUp as d,ChevronDown as a,X as c,Maximize2 as p}from"lucide-react";import{Modal as s}from"../ChatCitation/components/wrappers/Modal.js";function u(u){var x=u.images,h=u.highlights,g=u.highlightColor,f=void 0===g?"rgba(255, 220, 0, 0.15)":g,m=u.highlightActiveColor,b=void 0===m?"rgba(255, 220, 0, 0.35)":m,y=u.highlightBorderColor,v=void 0===y?"rgba(200, 160, 0, 0.4)":y,k=u.height,w=void 0===k?"700px":k,C=h.flatMap(function(i,e){return i.bboxes.map(function(t,o){return{bbox:t,pageIndex:i.pageIndex,key:"".concat(e,"-").concat(o)}})}).length,I=n(0),z=I[0],B=I[1],R=n(!1),M=R[0],S=R[1],j=r(null),D=r(null),F=r([]),T=r([]),A=l(function(i,e){void 0===e&&(e=!1);var t=Math.max(0,Math.min(C-1,i));B(t),requestAnimationFrame(function(){var i=e?D.current:j.current,o=(e?T:F).current[t];if(i&&o){var n=i.getBoundingClientRect(),r=o.getBoundingClientRect(),l=r.top-n.top+i.scrollTop-i.clientHeight/2+r.height/2;i.scrollTo({top:l,behavior:"smooth"})}})},[C]),H=function(t){return void 0===t&&(t=!1),C>0&&o("div",i({style:{display:"flex",alignItems:"center",marginBottom:"6px"}},{children:e("div",i({style:{marginLeft:"auto",display:"flex",alignItems:"center",gap:"4px"}},{children:[e("span",i({style:{fontSize:"12px",color:"#888"}},{children:[z+1," / ",C]})),o("button",i({onClick:function(){return A(z-1,t)},disabled:z<=0,style:{padding:"2px 4px",cursor:z<=0?"not-allowed":"pointer",opacity:z<=0?.4:1,border:"1px solid #ddd",borderRadius:"3px",background:"white",display:"flex",alignItems:"center"}},{children:o(d,{size:14,color:"#64748b"})})),o("button",i({onClick:function(){return A(z+1,t)},disabled:z>=C-1,style:{padding:"2px 4px",cursor:z>=C-1?"not-allowed":"pointer",opacity:z>=C-1?.4:1,border:"1px solid #ddd",borderRadius:"3px",background:"white",display:"flex",alignItems:"center"}},{children:o(a,{size:14,color:"#64748b"})})),o("span",{style:{width:"1px",height:"16px",background:"#e2e8f0",margin:"0 2px"}}),t?o(c,{size:16,color:"#64748b",style:{cursor:"pointer"},onClick:function(){return S(!1)}}):o(p,{size:16,color:"#64748b",style:{cursor:"pointer"},onClick:function(){return S(!0)}})]}))}))},P=function(t){void 0===t&&(t=!1);var n=t?T:F,r=-1;return x.map(function(t,l){var d=h.filter(function(i){return i.pageIndex===l}).flatMap(function(i,e){return i.bboxes.map(function(i,t){return r++,{bbox:i,key:"".concat(l,"-").concat(e,"-").concat(t),globalIndex:r}})});return e("div",i({style:{marginBottom:"8px"}},{children:[e("div",i({style:{fontSize:"12px",color:"#888",marginBottom:"4px"}},{children:["Page ",l+1]})),o("div",i({style:{position:"relative",width:"100%",paddingTop:"129%",flexShrink:0}},{children:e("div",i({style:{position:"absolute",inset:0}},{children:[o("img",{src:t,alt:"Page ".concat(l+1),style:{display:"block",width:"100%",height:"100%",objectFit:"fill"},draggable:!1}),d.map(function(i){var e=i.bbox,t=i.key,r=i.globalIndex,l=z===r;return o("div",{ref:function(i){n.current[r]=i},style:{position:"absolute",left:"".concat(100*e.xmin,"%"),top:"".concat(100*e.ymin,"%"),width:"".concat(100*(e.xmax-e.xmin),"%"),height:"".concat(100*(e.ymax-e.ymin),"%"),background:l?b:f,border:l?"1.5px solid ".concat(v):"none",borderRadius:"2px",zIndex:2}},t)})]}))}))]}),l)})},q={overflowY:"auto",border:"1px solid #ddd",borderRadius:"4px",padding:"8px",paddingBottom:0,display:"flex",flexDirection:"column",boxSizing:"border-box"};return e(t,{children:[e("div",i({style:{width:"100%",maxWidth:"800px",fontFamily:"inherit",display:"flex",flexDirection:"column"}},{children:[H(!1),o("div",i({ref:j,style:i(i({},q),{maxHeight:w})},{children:P(!1)}))]})),o(s,i({isOpen:M,onClose:function(){return S(!1)}},{children:e("div",i({style:{display:"flex",flexDirection:"column",height:"100%",overflow:"hidden"}},{children:[H(!0),o("div",i({ref:D,style:i(i({},q),{flex:1})},{children:M&&P(!0)}))]}))}))]})}export{u as default};
|
|
2
2
|
//# sourceMappingURL=ScannedDocCitation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScannedDocCitationTest.d.ts","sourceRoot":"","sources":["../../../src/ScannedDocCitationTest.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScannedDocCitationTest.d.ts","sourceRoot":"","sources":["../../../src/ScannedDocCitationTest.tsx"],"names":[],"mappings":"AA4CA,MAAM,CAAC,OAAO,UAAU,sBAAsB,4CAS7C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScannedDocCitation.d.ts","sourceRoot":"","sources":["../../../../../src/features/ScannedDocCitation/ScannedDocCitation.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,IAAI;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,MAAM,EACN,UAAU,EACV,cAA0C,EAC1C,oBAAgD,EAChD,oBAA+C,EAC/C,MAAgB,GACjB,EAAE,uBAAuB,
|
|
1
|
+
{"version":3,"file":"ScannedDocCitation.d.ts","sourceRoot":"","sources":["../../../../../src/features/ScannedDocCitation/ScannedDocCitation.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,IAAI;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,MAAM,EACN,UAAU,EACV,cAA0C,EAC1C,oBAAgD,EAChD,oBAA+C,EAC/C,MAAgB,GACjB,EAAE,uBAAuB,2CAkJzB"}
|