example: add loading state pulse animation (#353)

assistant-ui · Jun 28, 2024 · 07fa919 · 07fa919
1 parent fb2a26e
commit 07fa919
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/examples/with-openai-assistants/app/api/assistant/route.ts b/examples/with-openai-assistants/app/api/assistant/route.ts
@@ -63,7 +63,7 @@ export async function POST(req: Request) {
                     },
                   });
 
-                  await new Promise((resolve) => setTimeout(resolve, 1000));
+                  await new Promise((resolve) => setTimeout(resolve, 5000));
 
                   const result = { t: unit === "c" ? 21 : 70 };
 

diff --git a/examples/with-openai-assistants/app/page.tsx b/examples/with-openai-assistants/app/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Thread } from "@/components/ui/assistant-ui/thread";
+import { cn } from "@/lib/utils";
 import { makeAssistantToolUI } from "@assistant-ui/react";
 
 type WeatherArgs = {
@@ -14,9 +15,14 @@ type WeatherResult = {
 
 const WeatherTool = makeAssistantToolUI<WeatherArgs, WeatherResult>({
   toolName: "get_weather",
-  render: ({ part }) => {
+  render: ({ part, status }) => {
     return (
-      <p className="my-4 text-center font-mono text-sm font-bold text-blue-500 first:mt-0">
+      <p
+        className={cn(
+          "my-4 text-center font-mono text-sm font-bold text-blue-500 first:mt-0",
+          status === "in_progress" && "animate-pulse",
+        )}
+      >
         get_weather({JSON.stringify(part.args)})
         {!!part.result && <> =&gt; {JSON.stringify(part.result)}</>}
       </p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -63,7 +63,7 @@ export async function POST(req: Request) { @@
                         },
                       });
-                      await new Promise((resolve) => setTimeout(resolve, 1000));
+                      await new Promise((resolve) => setTimeout(resolve, 5000));
                       const result = { t: unit === "c" ? 21 : 70 };
@@ Expand Down @@