Update llama ui (#5)

Author: adrianlyjak

test-proj/ui/package.json

@@ -14,7 +14,7 @@
     "all-fix": "pnpm i && pnpm run lint && pnpm run format && pnpm run build"
   },
   "dependencies": {
-    "@llamaindex/ui": "^1.0.2",
+    "@llamaindex/ui": "^2.1.1",
     "@llamaindex/workflows-client": "^1.2.0",
     "@radix-ui/themes": "^3.2.1",
     "llama-cloud-services": "^0.3.6",

test-proj/ui/src/components/ChatBot.tsx

@@ -17,8 +17,8 @@ import {
   Card,
   CardContent,
   cn,
-  useWorkflowTaskCreate,
-  useWorkflowTask,
+  useWorkflowRun,
+  useWorkflowHandler,
 } from "@llamaindex/ui";
 import { AGENT_NAME } from "../libs/config";
 import { toHumanResponseRawEvent } from "@/libs/utils";
@@ -32,7 +32,7 @@ interface Message {
   error?: boolean;
 }
 export default function ChatBot() {
-  const { createTask } = useWorkflowTaskCreate();
+  const { runWorkflow } = useWorkflowRun();
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const [messages, setMessages] = useState<Message[]>([]);
@@ -108,7 +108,7 @@ export default function ChatBot() {
   useEffect(() => {
     (async () => {
       if (!handlerId) {
-        const handler = await createTask("chat", {
+        const handler = await runWorkflow("chat", {
           index_name: defaultIndexName,
           session_id: sessionIdRef.current,
         });
@@ -118,7 +118,7 @@ export default function ChatBot() {
   }, []);
 
   // Subscribe to task/events using hook (auto stream when handler exists)
-  const { events } = useWorkflowTask(handlerId ?? "", Boolean(handlerId));
+  const { events } = useWorkflowHandler(handlerId ?? "", Boolean(handlerId));
 
   // Process streamed events into messages
   useEffect(() => {
@@ -180,7 +180,7 @@ export default function ChatBot() {
 
   const startChatIfNeeded = async (): Promise<string> => {
     if (handlerId) return handlerId;
-    const handler = await createTask("chat", {
+    const handler = await runWorkflow("chat", {
       index_name: defaultIndexName,
       session_id: sessionIdRef.current,
     });

test-proj/ui/src/libs/clients.ts

@@ -1,8 +1,8 @@
 import {
   ApiClients,
   cloudApiClient,
-  createWorkflowClient,
-  createWorkflowConfig,
+  createWorkflowsClient,
+  createWorkflowsConfig,
 } from "@llamaindex/ui";
 import { AGENT_NAME } from "./config";
 
@@ -22,8 +22,8 @@ cloudApiClient.setConfig({
   },
 });
 
-const workflowsClient = createWorkflowClient(
-  createWorkflowConfig({
+const workflowsClient = createWorkflowsClient(
+  createWorkflowsConfig({
     baseUrl: `/deployments/${AGENT_NAME}/`,
     headers: {
       ...(platformToken && { authorization: `Bearer ${platformToken}` }),

ui/package.json.jinja

@@ -14,7 +14,7 @@
     "all-fix": "pnpm i && pnpm run lint && pnpm run format && pnpm run build"
   },
   "dependencies": {
-    "@llamaindex/ui": "^1.0.2",
+    "@llamaindex/ui": "^2.1.1",
     "@llamaindex/workflows-client": "^1.2.0",
     "@radix-ui/themes": "^3.2.1",
     "llama-cloud-services": "^0.3.6",

ui/src/components/ChatBot.tsx

@@ -17,8 +17,8 @@ import {
   Card,
   CardContent,
   cn,
-  useWorkflowTaskCreate,
-  useWorkflowTask,
+  useWorkflowRun,
+  useWorkflowHandler,
 } from "@llamaindex/ui";
 import { AGENT_NAME } from "../libs/config";
 import { toHumanResponseRawEvent } from "@/libs/utils";
@@ -32,7 +32,7 @@ interface Message {
   error?: boolean;
 }
 export default function ChatBot() {
-  const { createTask } = useWorkflowTaskCreate();
+  const { runWorkflow } = useWorkflowRun();
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const [messages, setMessages] = useState<Message[]>([]);
@@ -108,7 +108,7 @@ export default function ChatBot() {
   useEffect(() => {
     (async () => {
       if (!handlerId) {
-        const handler = await createTask("chat", {
+        const handler = await runWorkflow("chat", {
           index_name: defaultIndexName,
           session_id: sessionIdRef.current,
         });
@@ -118,7 +118,7 @@ export default function ChatBot() {
   }, []);
 
   // Subscribe to task/events using hook (auto stream when handler exists)
-  const { events } = useWorkflowTask(handlerId ?? "", Boolean(handlerId));
+  const { events } = useWorkflowHandler(handlerId ?? "", Boolean(handlerId));
 
   // Process streamed events into messages
   useEffect(() => {
@@ -180,7 +180,7 @@ export default function ChatBot() {
 
   const startChatIfNeeded = async (): Promise<string> => {
     if (handlerId) return handlerId;
-    const handler = await createTask("chat", {
+    const handler = await runWorkflow("chat", {
       index_name: defaultIndexName,
       session_id: sessionIdRef.current,
     });

ui/src/libs/clients.ts

@@ -1,8 +1,8 @@
 import {
   ApiClients,
   cloudApiClient,
-  createWorkflowClient,
-  createWorkflowConfig,
+  createWorkflowsClient,
+  createWorkflowsConfig,
 } from "@llamaindex/ui";
 import { AGENT_NAME } from "./config";
 
@@ -22,8 +22,8 @@ cloudApiClient.setConfig({
   },
 });
 
-const workflowsClient = createWorkflowClient(
-  createWorkflowConfig({
+const workflowsClient = createWorkflowsClient(
+  createWorkflowsConfig({
     baseUrl: `/deployments/${AGENT_NAME}/`,
     headers: {
       ...(platformToken && { authorization: `Bearer ${platformToken}` }),