Skip to content

Commit e555acb

Browse files
adrianlyjakadrianlyjak
committed
Update template for citation highlight
1 parent f755fbe commit e555acb

File tree

6 files changed

+51
-35
lines changed

6 files changed

+51
-35
lines changed

‎test-proj/ui/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@
1616
"dependencies": {
1717
"@babel/runtime": "^7.27.6",
1818
"@lezer/highlight": "^1.2.1",
19-
"@llamaindex/cloud": "^4.0.28",
20-
"@llamaindex/ui": "^0.4.0",
19+
"@llamaindex/ui": "^0.5.0",
2120
"@radix-ui/themes": "^3.2.1",
2221
"class-variance-authority": "^0.7.1",
2322
"clsx": "^2.1.1",
23+
"llama-cloud-services": "^0.3.3",
2424
"lucide-react": "^0.514.0",
2525
"react": "^18.3.0",
2626
"react-dom": "^18.3.0",

‎test-proj/ui/src/pages/HomePage.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import {
33
ItemCount,
44
WorkflowTrigger,
55
WorkflowProgressBar,
6+
ExtractedDataItemGrid,
67
} from "@llamaindex/ui";
7-
import type { TypedAgentData } from "@llamaindex/cloud/beta/agent";
8+
import type { TypedAgentData } from "llama-cloud-services/beta/agent";
89
import styles from "./HomePage.module.css";
910
import { useNavigate } from "react-router-dom";
1011
import { agentClient } from "@/lib/client";
@@ -13,7 +14,7 @@ const deployment = import.meta.env.VITE_LLAMA_DEPLOY_DEPLOYMENT_NAME;
1314

1415
export default function HomePage() {
1516
const lastMonth = new Date(
16-
new Date().setMonth(new Date().getMonth() - 1),
17+
new Date().setMonth(new Date().getMonth() - 1)
1718
).toISOString();
1819
const navigate = useNavigate();
1920
const goToItem = (item: TypedAgentData) => {
@@ -24,7 +25,7 @@ export default function HomePage() {
2425
<main className={styles.main}>
2526
<div className={styles.grid}>
2627
<ItemCount
27-
title="Total Documents"
28+
title="Total Items"
2829
filter={{ created_at: { gt: lastMonth } }}
2930
client={agentClient}
3031
/>
@@ -57,7 +58,7 @@ export default function HomePage() {
5758
/>
5859
</div>
5960
<WorkflowProgressBar className={styles.progressBar} />
60-
<ItemGrid
61+
<ExtractedDataItemGrid
6162
onRowClick={goToItem}
6263
builtInColumns={{
6364
fileName: true,
@@ -66,7 +67,6 @@ export default function HomePage() {
6667
itemsToReview: true,
6768
actions: true,
6869
}}
69-
client={agentClient}
7070
/>
7171
</main>
7272
</div>

‎test-proj/ui/src/pages/ItemPage.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { useEffect } from "react";
1+
import { useEffect, useState } from "react";
22
import {
33
AcceptReject,
44
ExtractedDataDisplay,
55
FilePreview,
6+
JSONObject,
67
useItemData,
8+
type Highlight,
79
} from "@llamaindex/ui";
810
import { Clock, XCircle } from "lucide-react";
911
import { useParams } from "react-router-dom";
@@ -18,9 +20,10 @@ import { APP_TITLE } from "@/lib/config";
1820
export default function ItemPage() {
1921
const { itemId } = useParams<{ itemId: string }>();
2022
const { setButtons, setBreadcrumbs } = useToolbar();
23+
const [highlight, setHighlight] = useState<Highlight | undefined>(undefined);
2124

2225
// Use the hook to fetch item data
23-
const itemHookData = useItemData<MySchema>({
26+
const itemHookData = useItemData<MySchema & JSONObject>({
2427
// order/remove fields as needed here
2528
jsonSchema: modifyJsonSchema(MyJsonSchema as any, {}),
2629
itemId: itemId as string,
@@ -65,7 +68,6 @@ export default function ItemPage() {
6568

6669
const {
6770
item: itemData,
68-
data,
6971
updateData,
7072
loading: isLoading,
7173
error,
@@ -105,6 +107,7 @@ export default function ItemPage() {
105107
onBoundingBoxClick={(box, pageNumber) => {
106108
console.log("Bounding box clicked:", box, "on page:", pageNumber);
107109
}}
110+
highlight={highlight}
108111
/>
109112
)}
110113
</div>
@@ -113,17 +116,22 @@ export default function ItemPage() {
113116
<div className="flex-1 bg-white h-full overflow-y-auto">
114117
<div className="p-4 space-y-4">
115118
{/* Extracted Data */}
116-
<ExtractedDataDisplay
117-
data={(data as Record<string, unknown>) || {}}
118-
confidence={
119-
{
120-
/** TODO: add confidence and page citations */
121-
}
122-
}
119+
<ExtractedDataDisplay<MySchema & JSONObject>
120+
extractedData={itemData.data}
123121
title="Extracted Data"
124122
onChange={(updatedData) => {
125123
updateData(updatedData as any);
126124
}}
125+
onClickField={(args) => {
126+
// TODO: set multiple highlights
127+
setHighlight({
128+
page: args.metadata?.citation?.[0]?.page ?? 1,
129+
x: 100,
130+
y: 100,
131+
width: 0,
132+
height: 0,
133+
});
134+
}}
127135
jsonSchema={itemHookData.jsonSchema}
128136
/>
129137
</div>

‎ui/package.json.jinja‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "{{project_name}}-ui",
2+
"name": "{{ project_name }}-ui",
33
"version": "0.1.0",
44
"private": true,
55
"type": "module",
@@ -16,11 +16,11 @@
1616
"dependencies": {
1717
"@babel/runtime": "^7.27.6",
1818
"@lezer/highlight": "^1.2.1",
19-
"@llamaindex/cloud": "^4.0.28",
20-
"@llamaindex/ui": "^0.4.0",
19+
"@llamaindex/ui": "^0.5.0",
2120
"@radix-ui/themes": "^3.2.1",
2221
"class-variance-authority": "^0.7.1",
2322
"clsx": "^2.1.1",
23+
"llama-cloud-services": "^0.3.3",
2424
"lucide-react": "^0.514.0",
2525
"react": "^18.3.0",
2626
"react-dom": "^18.3.0",

‎ui/src/pages/HomePage.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import {
33
ItemCount,
44
WorkflowTrigger,
55
WorkflowProgressBar,
6+
ExtractedDataItemGrid,
67
} from "@llamaindex/ui";
7-
import type { TypedAgentData } from "@llamaindex/cloud/beta/agent";
8+
import type { TypedAgentData } from "llama-cloud-services/beta/agent";
89
import styles from "./HomePage.module.css";
910
import { useNavigate } from "react-router-dom";
1011
import { agentClient } from "@/lib/client";
@@ -13,7 +14,7 @@ const deployment = import.meta.env.VITE_LLAMA_DEPLOY_DEPLOYMENT_NAME;
1314

1415
export default function HomePage() {
1516
const lastMonth = new Date(
16-
new Date().setMonth(new Date().getMonth() - 1),
17+
new Date().setMonth(new Date().getMonth() - 1)
1718
).toISOString();
1819
const navigate = useNavigate();
1920
const goToItem = (item: TypedAgentData) => {
@@ -24,7 +25,7 @@ export default function HomePage() {
2425
<main className={styles.main}>
2526
<div className={styles.grid}>
2627
<ItemCount
27-
title="Total Documents"
28+
title="Total Items"
2829
filter={{ created_at: { gt: lastMonth } }}
2930
client={agentClient}
3031
/>
@@ -57,7 +58,7 @@ export default function HomePage() {
5758
/>
5859
</div>
5960
<WorkflowProgressBar className={styles.progressBar} />
60-
<ItemGrid
61+
<ExtractedDataItemGrid
6162
onRowClick={goToItem}
6263
builtInColumns={{
6364
fileName: true,
@@ -66,7 +67,6 @@ export default function HomePage() {
6667
itemsToReview: true,
6768
actions: true,
6869
}}
69-
client={agentClient}
7070
/>
7171
</main>
7272
</div>

‎ui/src/pages/ItemPage.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { useEffect } from "react";
1+
import { useEffect, useState } from "react";
22
import {
33
AcceptReject,
44
ExtractedDataDisplay,
55
FilePreview,
6+
JSONObject,
67
useItemData,
8+
type Highlight,
79
} from "@llamaindex/ui";
810
import { Clock, XCircle } from "lucide-react";
911
import { useParams } from "react-router-dom";
@@ -18,9 +20,10 @@ import { APP_TITLE } from "@/lib/config";
1820
export default function ItemPage() {
1921
const { itemId } = useParams<{ itemId: string }>();
2022
const { setButtons, setBreadcrumbs } = useToolbar();
23+
const [highlight, setHighlight] = useState<Highlight | undefined>(undefined);
2124

2225
// Use the hook to fetch item data
23-
const itemHookData = useItemData<MySchema>({
26+
const itemHookData = useItemData<MySchema & JSONObject>({
2427
// order/remove fields as needed here
2528
jsonSchema: modifyJsonSchema(MyJsonSchema as any, {}),
2629
itemId: itemId as string,
@@ -65,7 +68,6 @@ export default function ItemPage() {
6568

6669
const {
6770
item: itemData,
68-
data,
6971
updateData,
7072
loading: isLoading,
7173
error,
@@ -105,6 +107,7 @@ export default function ItemPage() {
105107
onBoundingBoxClick={(box, pageNumber) => {
106108
console.log("Bounding box clicked:", box, "on page:", pageNumber);
107109
}}
110+
highlight={highlight}
108111
/>
109112
)}
110113
</div>
@@ -113,17 +116,22 @@ export default function ItemPage() {
113116
<div className="flex-1 bg-white h-full overflow-y-auto">
114117
<div className="p-4 space-y-4">
115118
{/* Extracted Data */}
116-
<ExtractedDataDisplay
117-
data={(data as Record<string, unknown>) || {}}
118-
confidence={
119-
{
120-
/** TODO: add confidence and page citations */
121-
}
122-
}
119+
<ExtractedDataDisplay<MySchema & JSONObject>
120+
extractedData={itemData.data}
123121
title="Extracted Data"
124122
onChange={(updatedData) => {
125123
updateData(updatedData as any);
126124
}}
125+
onClickField={(args) => {
126+
// TODO: set multiple highlights
127+
setHighlight({
128+
page: args.metadata?.citation?.[0]?.page ?? 1,
129+
x: 100,
130+
y: 100,
131+
width: 0,
132+
height: 0,
133+
});
134+
}}
127135
jsonSchema={itemHookData.jsonSchema}
128136
/>
129137
</div>

0 commit comments

Comments
 (0)