Skip to content

Commit 1342c53

Browse files
adrianlyjakadrianlyjak
authored
Update template for citation highlight (#15)
1 parent f755fbe commit 1342c53

File tree

8 files changed

+59
-41
lines changed

8 files changed

+59
-41
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/lib/client.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { MySchema } from "@/schemas/MySchema";
2-
import { ExtractedData } from "@llamaindex/cloud/beta/agent";
3-
import { ApiClients } from "@llamaindex/ui";
2+
import { ExtractedData } from "llama-cloud-services/beta/agent";
3+
import { ApiClients, JSONObject } from "@llamaindex/ui";
44
import {
55
createCloudAgentClient,
66
createLlamaDeployClient,
@@ -25,7 +25,9 @@ cloudApiClient.setConfig({
2525
},
2626
});
2727

28-
const agentClient = createCloudAgentClient<ExtractedData<MySchema>>({
28+
const agentClient = createCloudAgentClient<
29+
ExtractedData<MySchema & JSONObject>
30+
>({
2931
baseUrl: apiBaseUrl,
3032
apiKey: platformToken,
3133
windowUrl: typeof window !== "undefined" ? window.location.href : undefined,

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {
2-
ItemGrid,
32
ItemCount,
43
WorkflowTrigger,
54
WorkflowProgressBar,
5+
ExtractedDataItemGrid,
66
} from "@llamaindex/ui";
7-
import type { TypedAgentData } from "@llamaindex/cloud/beta/agent";
7+
import type { TypedAgentData } from "llama-cloud-services/beta/agent";
88
import styles from "./HomePage.module.css";
99
import { useNavigate } from "react-router-dom";
1010
import { agentClient } from "@/lib/client";
@@ -24,7 +24,7 @@ export default function HomePage() {
2424
<main className={styles.main}>
2525
<div className={styles.grid}>
2626
<ItemCount
27-
title="Total Documents"
27+
title="Total Items"
2828
filter={{ created_at: { gt: lastMonth } }}
2929
client={agentClient}
3030
/>
@@ -57,7 +57,7 @@ export default function HomePage() {
5757
/>
5858
</div>
5959
<WorkflowProgressBar className={styles.progressBar} />
60-
<ItemGrid
60+
<ExtractedDataItemGrid
6161
onRowClick={goToItem}
6262
builtInColumns={{
6363
fileName: true,
@@ -66,7 +66,6 @@ export default function HomePage() {
6666
itemsToReview: true,
6767
actions: true,
6868
}}
69-
client={agentClient}
7069
/>
7170
</main>
7271
</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/lib/client.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { MySchema } from "@/schemas/MySchema";
2-
import { ExtractedData } from "@llamaindex/cloud/beta/agent";
3-
import { ApiClients } from "@llamaindex/ui";
2+
import { ExtractedData } from "llama-cloud-services/beta/agent";
3+
import { ApiClients, JSONObject } from "@llamaindex/ui";
44
import {
55
createCloudAgentClient,
66
createLlamaDeployClient,
@@ -25,7 +25,9 @@ cloudApiClient.setConfig({
2525
},
2626
});
2727

28-
const agentClient = createCloudAgentClient<ExtractedData<MySchema>>({
28+
const agentClient = createCloudAgentClient<
29+
ExtractedData<MySchema & JSONObject>
30+
>({
2931
baseUrl: apiBaseUrl,
3032
apiKey: platformToken,
3133
windowUrl: typeof window !== "undefined" ? window.location.href : undefined,

‎ui/src/pages/HomePage.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {
2-
ItemGrid,
32
ItemCount,
43
WorkflowTrigger,
54
WorkflowProgressBar,
5+
ExtractedDataItemGrid,
66
} from "@llamaindex/ui";
7-
import type { TypedAgentData } from "@llamaindex/cloud/beta/agent";
7+
import type { TypedAgentData } from "llama-cloud-services/beta/agent";
88
import styles from "./HomePage.module.css";
99
import { useNavigate } from "react-router-dom";
1010
import { agentClient } from "@/lib/client";
@@ -24,7 +24,7 @@ export default function HomePage() {
2424
<main className={styles.main}>
2525
<div className={styles.grid}>
2626
<ItemCount
27-
title="Total Documents"
27+
title="Total Items"
2828
filter={{ created_at: { gt: lastMonth } }}
2929
client={agentClient}
3030
/>
@@ -57,7 +57,7 @@ export default function HomePage() {
5757
/>
5858
</div>
5959
<WorkflowProgressBar className={styles.progressBar} />
60-
<ItemGrid
60+
<ExtractedDataItemGrid
6161
onRowClick={goToItem}
6262
builtInColumns={{
6363
fileName: true,
@@ -66,7 +66,6 @@ export default function HomePage() {
6666
itemsToReview: true,
6767
actions: true,
6868
}}
69-
client={agentClient}
7069
/>
7170
</main>
7271
</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)