update llama ui (#41)

Author: adrianlyjak

test-proj/ui/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "@lezer/highlight": "^1.2.1",
-    "@llamaindex/ui": "^1.0.3",
+    "@llamaindex/ui": "^2.1.1",
     "@radix-ui/themes": "^3.2.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

test-proj/ui/src/lib/client.ts

@@ -2,8 +2,8 @@ import { MySchema } from "@/schemas/MySchema";
 import { ExtractedData } from "llama-cloud-services/beta/agent";
 import {
   ApiClients,
-  createWorkflowClient,
-  createWorkflowConfig,
+  createWorkflowsClient,
+  createWorkflowsConfig,
 } from "@llamaindex/ui";
 import { createCloudAgentClient, cloudApiClient } from "@llamaindex/ui";
 import { AGENT_NAME, EXTRACTED_DATA_COLLECTION } from "./config";
@@ -30,8 +30,8 @@ const agentClient = createCloudAgentClient<ExtractedData<MySchema>>({
   collection: EXTRACTED_DATA_COLLECTION,
 });
 
-const workflowsClient = createWorkflowClient(
-  createWorkflowConfig({
+const workflowsClient = createWorkflowsClient(
+  createWorkflowsConfig({
     baseUrl: `/deployments/${AGENT_NAME}/`,
   }),
 );

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

@@ -3,7 +3,7 @@ import {
   WorkflowTrigger,
   WorkflowProgressBar,
   ExtractedDataItemGrid,
-  useWorkflowTaskList,
+  useWorkflowHandlerList,
 } from "@llamaindex/ui";
 import type { TypedAgentData } from "llama-cloud-services/beta/agent";
 import styles from "./HomePage.module.css";
@@ -20,8 +20,10 @@ export default function HomePage() {
  * Returns a key that increments when a task is completed, can be used to force a re-render of the task list
  */
 function taskCompletedState() {
-  const { tasks } = useWorkflowTaskList();
-  const runningTasks = tasks.filter((task) => task.status === "running");
+  const { handlers } = useWorkflowHandlerList("process-file");
+  const runningTasks = handlers.filter(
+    (handler) => handler.status === "running",
+  );
   const [runningTaskCount, setRunningTaskCount] = useState(runningTasks.length);
   const [taskKey, setTaskKey] = useState(0);
   useEffect(() => {
@@ -69,7 +71,10 @@ function TaskList() {
             }}
           />
         </div>
-        <WorkflowProgressBar className={styles.progressBar} />
+        <WorkflowProgressBar
+          className={styles.progressBar}
+          workflowName="process-file"
+        />
         <ExtractedDataItemGrid
           onRowClick={goToItem}
           builtInColumns={{

ui/package.json.jinja

@@ -16,7 +16,7 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "@lezer/highlight": "^1.2.1",
-    "@llamaindex/ui": "^1.0.3",
+    "@llamaindex/ui": "^2.1.1",
     "@radix-ui/themes": "^3.2.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

ui/src/lib/client.ts

@@ -2,8 +2,8 @@ import { MySchema } from "@/schemas/MySchema";
 import { ExtractedData } from "llama-cloud-services/beta/agent";
 import {
   ApiClients,
-  createWorkflowClient,
-  createWorkflowConfig,
+  createWorkflowsClient,
+  createWorkflowsConfig,
 } from "@llamaindex/ui";
 import { createCloudAgentClient, cloudApiClient } from "@llamaindex/ui";
 import { AGENT_NAME, EXTRACTED_DATA_COLLECTION } from "./config";
@@ -30,8 +30,8 @@ const agentClient = createCloudAgentClient<ExtractedData<MySchema>>({
   collection: EXTRACTED_DATA_COLLECTION,
 });
 
-const workflowsClient = createWorkflowClient(
-  createWorkflowConfig({
+const workflowsClient = createWorkflowsClient(
+  createWorkflowsConfig({
     baseUrl: `/deployments/${AGENT_NAME}/`,
   }),
 );

ui/src/pages/HomePage.tsx

@@ -3,7 +3,7 @@ import {
   WorkflowTrigger,
   WorkflowProgressBar,
   ExtractedDataItemGrid,
-  useWorkflowTaskList,
+  useWorkflowHandlerList,
 } from "@llamaindex/ui";
 import type { TypedAgentData } from "llama-cloud-services/beta/agent";
 import styles from "./HomePage.module.css";
@@ -20,8 +20,10 @@ export default function HomePage() {
  * Returns a key that increments when a task is completed, can be used to force a re-render of the task list
  */
 function taskCompletedState() {
-  const { tasks } = useWorkflowTaskList();
-  const runningTasks = tasks.filter((task) => task.status === "running");
+  const { handlers } = useWorkflowHandlerList("process-file");
+  const runningTasks = handlers.filter(
+    (handler) => handler.status === "running",
+  );
   const [runningTaskCount, setRunningTaskCount] = useState(runningTasks.length);
   const [taskKey, setTaskKey] = useState(0);
   useEffect(() => {
@@ -69,7 +71,10 @@ function TaskList() {
             }}
           />
         </div>
-        <WorkflowProgressBar className={styles.progressBar} />
+        <WorkflowProgressBar
+          className={styles.progressBar}
+          workflowName="process-file"
+        />
         <ExtractedDataItemGrid
           onRowClick={goToItem}
           builtInColumns={{