integrate workflow tasks

test-proj/.copier-answers.yml

@@ -1,5 +1,5 @@
 # Changes here will be overwritten by Copier; NEVER EDIT MANUALLY
-_commit: 3a6a0ad
+_commit: e8edd1d
 _src_path: .
 project_name: test-proj
 project_title: Test Proj

test-proj/ui/package.json

@@ -16,11 +16,9 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "@lezer/highlight": "^1.2.1",
-    "@llamaindex/chat-ui": "^0.5.16",
     "@llamaindex/cloud": "^4.0.28",
-    "@llamaindex/ui": "^0.3.2",
+    "@llamaindex/ui": "^0.4.0",
     "@radix-ui/themes": "^3.2.1",
-    "@swc/helpers": "^0.5.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.514.0",

test-proj/ui/src/App.tsx

@@ -6,11 +6,13 @@ import {
   BreadcrumbItem,
   BreadcrumbList,
   BreadcrumbSeparator,
+  ApiProvider,
 } from "@llamaindex/ui";
 import { Link } from "react-router-dom";
 import { Toaster } from "@llamaindex/ui";
 import { useToolbar, ToolbarProvider } from "@/lib/ToolbarContext";
-import "@/lib/client";
+import { clients } from "@/lib/client";
+import { AGENT_NAME } from "@/lib/config";
 
 // Import pages
 import HomePage from "./pages/HomePage";
@@ -19,18 +21,20 @@ import ItemPage from "./pages/ItemPage";
 export default function App() {
   return (
     <Theme>
-      <ToolbarProvider>
-        <div className="grid grid-rows-[auto_1fr] h-screen">
-          <Toolbar />
-          <main className="overflow-auto">
-            <Routes>
-              <Route path="/" element={<HomePage />} />
-              <Route path="/item/:itemId" element={<ItemPage />} />
-            </Routes>
-          </main>
-        </div>
-        <Toaster />
-      </ToolbarProvider>
+      <ApiProvider clients={clients} deployment={AGENT_NAME}>
+        <ToolbarProvider>
+          <div className="grid grid-rows-[auto_1fr] h-screen">
+            <Toolbar />
+            <main className="overflow-auto">
+              <Routes>
+                <Route path="/" element={<HomePage />} />
+                <Route path="/item/:itemId" element={<ItemPage />} />
+              </Routes>
+            </main>
+          </div>
+          <Toaster />
+        </ToolbarProvider>
+      </ApiProvider>
     </Theme>
   );
 }

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

@@ -1,14 +1,36 @@
-import { client as platformClient } from "@llamaindex/cloud/api";
+import { MySchema } from "@/schemas/MySchema";
+import { ExtractedData } from "@llamaindex/cloud/beta/agent";
+import { ApiClients } from "@llamaindex/ui";
+import {
+  createCloudAgentClient,
+  createLlamaDeployClient,
+  createLlamaDeployConfig,
+  cloudApiClient,
+} from "@llamaindex/ui";
+import { EXTRACTED_DATA_COLLECTION } from "./config";
 
 const platformToken = import.meta.env.VITE_LLAMA_CLOUD_API_KEY;
 const apiBaseUrl = import.meta.env.VITE_LLAMA_CLOUD_BASE_URL;
 
 // Configure the platform client
-platformClient.setConfig({
+cloudApiClient.setConfig({
   baseUrl: apiBaseUrl,
   headers: {
     ...(platformToken && { authorization: `Bearer ${platformToken}` }),
   },
 });
 
-export { platformClient };
+const agentClient = createCloudAgentClient<ExtractedData<MySchema>>({
+  baseUrl: apiBaseUrl,
+  apiKey: platformToken,
+  windowUrl: typeof window !== "undefined" ? window.location.href : undefined,
+  collection: EXTRACTED_DATA_COLLECTION,
+});
+
+const clients: ApiClients = {
+  llamaDeployClient: createLlamaDeployClient(createLlamaDeployConfig()),
+  cloudApiClient: cloudApiClient,
+  agentDataClient: agentClient,
+};
+
+export { clients, agentClient };

test-proj/ui/src/pages/HomePage.module.css

@@ -17,3 +17,7 @@
   justify-content: flex-end;
   margin-bottom: 1rem;
 }
+
+.progressBar {
+  margin-bottom: 1rem;
+}

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

@@ -1,9 +1,15 @@
-import { ItemGrid, ItemCount } from "@llamaindex/ui";
+import {
+  ItemGrid,
+  ItemCount,
+  WorkflowTrigger,
+  WorkflowProgressBar,
+} from "@llamaindex/ui";
 import type { TypedAgentData } from "@llamaindex/cloud/beta/agent";
 import styles from "./HomePage.module.css";
 import { useNavigate } from "react-router-dom";
-import TriggerFileWorkflow from "@/components/workflow-trigger";
-import { data } from "@/lib/data";
+import { agentClient } from "@/lib/client";
+
+const deployment = import.meta.env.VITE_LLAMA_DEPLOY_DEPLOYMENT_NAME;
 
 export default function HomePage() {
   const lastMonth = new Date(
@@ -20,28 +26,37 @@ export default function HomePage() {
           <ItemCount
             title="Total Documents"
             filter={{ created_at: { gt: lastMonth } }}
-            client={data}
+            client={agentClient}
           />
           <ItemCount
             title="Reviewed"
             filter={{
               created_at: { gt: lastMonth },
               status: { eq: "approved" },
             }}
-            client={data}
+            client={agentClient}
           />
           <ItemCount
             title="Needs Review"
             filter={{
               created_at: { gt: lastMonth },
               status: { eq: "pending_review" },
             }}
-            client={data}
+            client={agentClient}
           />
         </div>
         <div className={styles.commandBar}>
-          <TriggerFileWorkflow />
+          <WorkflowTrigger
+            deployment={deployment}
+            workflow="process-file"
+            customWorkflowInput={(files) => {
+              return {
+                file_id: files[0].fileId,
+              };
+            }}
+          />
         </div>
+        <WorkflowProgressBar className={styles.progressBar} />
         <ItemGrid
           onRowClick={goToItem}
           builtInColumns={{
@@ -51,7 +66,7 @@ export default function HomePage() {
             itemsToReview: true,
             actions: true,
           }}
-          client={data}
+          client={agentClient}
         />
       </main>
     </div>

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

@@ -12,7 +12,7 @@ import MyJsonSchema from "../schemas/MySchema.json" with { type: "json" };
 import { useToolbar } from "@/lib/ToolbarContext";
 import { useNavigate } from "react-router-dom";
 import { modifyJsonSchema } from "@llamaindex/ui/lib";
-import { data as dataClient } from "@/lib/data";
+import { agentClient } from "@/lib/client";
 import { APP_TITLE } from "@/lib/config";
 
 export default function ItemPage() {
@@ -25,7 +25,7 @@ export default function ItemPage() {
     jsonSchema: modifyJsonSchema(MyJsonSchema as any, {}),
     itemId: itemId as string,
     isMock: false,
-    client: dataClient,
+    client: agentClient,
   });
 
   const navigate = useNavigate();

ui/package.json

@@ -16,11 +16,9 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "@lezer/highlight": "^1.2.1",
-    "@llamaindex/chat-ui": "^0.5.16",
     "@llamaindex/cloud": "^4.0.28",
-    "@llamaindex/ui": "^0.3.2",
+    "@llamaindex/ui": "file:/Users/terryzhao/work/llama-ui/packages/ui",
     "@radix-ui/themes": "^3.2.1",
-    "@swc/helpers": "^0.5.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.514.0",

ui/package.json.jinja

@@ -16,11 +16,9 @@
   "dependencies": {
     "@babel/runtime": "^7.27.6",
     "@lezer/highlight": "^1.2.1",
-    "@llamaindex/chat-ui": "^0.5.16",
     "@llamaindex/cloud": "^4.0.28",
-    "@llamaindex/ui": "^0.3.2",
+    "@llamaindex/ui": "^0.4.0",
     "@radix-ui/themes": "^3.2.1",
-    "@swc/helpers": "^0.5.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.514.0",