->({
- baseUrl: import.meta.env.VITE_LLAMA_CLOUD_BASE_URL,
- apiKey: import.meta.env.VITE_LLAMA_CLOUD_API_KEY,
- windowUrl: typeof window !== "undefined" ? window.location.href : undefined,
- collection: EXTRACTED_DATA_COLLECTION,
-});
diff --git a/test-proj/ui/src/pages/HomePage.module.css b/test-proj/ui/src/pages/HomePage.module.css
index 3ca4459..b2e2b61 100644
--- a/test-proj/ui/src/pages/HomePage.module.css
+++ b/test-proj/ui/src/pages/HomePage.module.css
@@ -17,3 +17,7 @@
justify-content: flex-end;
margin-bottom: 1rem;
}
+
+.progressBar {
+ margin-bottom: 1rem;
+}
diff --git a/test-proj/ui/src/pages/HomePage.tsx b/test-proj/ui/src/pages/HomePage.tsx
index 8ec3a12..67c6540 100644
--- a/test-proj/ui/src/pages/HomePage.tsx
+++ b/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,7 +26,7 @@ export default function HomePage() {
-
+ {
+ return {
+ file_id: files[0].fileId,
+ };
+ }}
+ />
+
diff --git a/test-proj/ui/src/pages/ItemPage.tsx b/test-proj/ui/src/pages/ItemPage.tsx
index 3f4a3fa..23bff19 100644
--- a/test-proj/ui/src/pages/ItemPage.tsx
+++ b/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();
diff --git a/ui/package.json b/ui/package.json
index 43ee563..22e4072 100644
--- a/ui/package.json
+++ b/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",
diff --git a/ui/package.json.jinja b/ui/package.json.jinja
index 673a90a..2487c72 100644
--- a/ui/package.json.jinja
+++ b/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",
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index f1a51f4..48ef195 100644
--- a/ui/src/App.tsx
+++ b/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 (
-
-
-
-
-
- } />
- } />
-
-
-
-
-
+
+
+
+
+
+
+ } />
+ } />
+
+
+
+
+
+
);
}
diff --git a/ui/src/components/workflow-trigger.tsx b/ui/src/components/workflow-trigger.tsx
deleted file mode 100644
index 36b102d..0000000
--- a/ui/src/components/workflow-trigger.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import {
- Button,
- FileUploader,
- FILE_TYPE_GROUPS,
- FileUploadData,
-} from "@llamaindex/ui";
-import { Loader2 } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { useWorkflow } from "@llamaindex/chat-ui";
-import { toast } from "sonner";
-
-interface UIToast {
- type: `${string}process_file.UIToast`;
- data: {
- level: string;
- message: string;
- };
-}
-
-interface FileEvent {
- type: `${string}process_file.FileEvent`;
- data: {
- file_id: string;
- };
-}
-
-export default function TriggerFileWorkflow({
- onSuccess = () => {
- window.location.reload();
- },
-}: {
- onSuccess?: (result: any) => void;
-}) {
- const [deployment, setDeployment] = useState("");
- // Get deployment from path or environment
- useEffect(() => {
- const deploymentFromPath = window.location.pathname.split("/")[2];
- setDeployment(deploymentFromPath);
- }, []);
-
- // Only create workflow if deployment exists
- const wf = useWorkflow({
- workflow: "process-file",
- deployment: deployment,
- onError(error) {
- console.error("Workflow error:", error);
- },
- onStopEvent(event) {
- onSuccess(event);
- },
- });
-
- useEffect(() => {
- const lastEvent = wf.events[wf.events.length - 1];
- if (lastEvent?.type.endsWith("process_file.UIToast")) {
- const lastEventData = lastEvent.data as UIToast["data"];
- if (lastEventData.level === "info") {
- toast.info(lastEventData.message);
- } else if (lastEventData.level === "warning") {
- toast.warning(lastEventData.message);
- } else if (lastEventData.level === "error") {
- toast.error(lastEventData.message);
- }
- }
- }, [wf.events.length]);
-
- const prevStatus = useRef(wf.status);
- useEffect(() => {
- const currentStatus = wf.status;
- const previousStatus = prevStatus.current;
- prevStatus.current = currentStatus;
- if (currentStatus !== "running" && previousStatus === "running") {
- // some sort of bug in the useWorkflow onStopEvent hook
- onSuccess(wf.events[wf.events.length - 1]);
- }
- }, [wf.status]);
-
- const handleFileUpload = async (data: FileUploadData[]) => {
- const { fileId } = data[0];
-
- if (fileId) {
- wf.start({
- file_id: fileId,
- });
- } else {
- console.error("No file_id available from upload");
- }
- };
-
- // If not ready, show loading state
- if (!deployment) {
- return (
-
- );
- }
-
- return (
-
- );
-}
diff --git a/ui/src/lib/client.ts b/ui/src/lib/client.ts
index 8fd5645..923438e 100644
--- a/ui/src/lib/client.ts
+++ b/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>({
+ 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 };
diff --git a/ui/src/lib/config.ts b/ui/src/lib/config.ts
index e381985..770275c 100644
--- a/ui/src/lib/config.ts
+++ b/ui/src/lib/config.ts
@@ -1,4 +1,3 @@
export const APP_TITLE = "UI Development";
export const EXTRACTED_DATA_COLLECTION = "ui-dev";
-// https://github.com/run-llama/llama_deploy/blob/main/llama_deploy/apiserver/deployment.py#L183
-export const AGENT_NAME = import.meta.env.NEXT_PUBLIC_LLAMA_DEPLOY_DEPLOYMENT_NAME;
+export const AGENT_NAME = import.meta.env.VITE_LLAMA_DEPLOY_DEPLOYMENT_NAME;
diff --git a/ui/src/lib/data.ts b/ui/src/lib/data.ts
deleted file mode 100644
index 610d83b..0000000
--- a/ui/src/lib/data.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { MySchema } from "@/schemas/MySchema";
-import {
- AgentClient,
- createAgentDataClient,
- ExtractedData,
-} from "@llamaindex/cloud/beta/agent";
-import { EXTRACTED_DATA_COLLECTION } from "./config";
-
-export const data: AgentClient> = createAgentDataClient<
- ExtractedData
->({
- baseUrl: import.meta.env.VITE_LLAMA_CLOUD_BASE_URL,
- apiKey: import.meta.env.VITE_LLAMA_CLOUD_API_KEY,
- windowUrl: typeof window !== "undefined" ? window.location.href : undefined,
- collection: EXTRACTED_DATA_COLLECTION,
-});
diff --git a/ui/src/pages/HomePage.module.css b/ui/src/pages/HomePage.module.css
index 3ca4459..b2e2b61 100644
--- a/ui/src/pages/HomePage.module.css
+++ b/ui/src/pages/HomePage.module.css
@@ -17,3 +17,7 @@
justify-content: flex-end;
margin-bottom: 1rem;
}
+
+.progressBar {
+ margin-bottom: 1rem;
+}
diff --git a/ui/src/pages/HomePage.tsx b/ui/src/pages/HomePage.tsx
index 8ec3a12..67c6540 100644
--- a/ui/src/pages/HomePage.tsx
+++ b/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,7 +26,7 @@ export default function HomePage() {
-
+ {
+ return {
+ file_id: files[0].fileId,
+ };
+ }}
+ />
+
diff --git a/ui/src/pages/ItemPage.tsx b/ui/src/pages/ItemPage.tsx
index 3f4a3fa..23bff19 100644
--- a/ui/src/pages/ItemPage.tsx
+++ b/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();