Update alert

Author: BrunoQuaresma

chat/src/components/ChatInterface.tsx

@@ -5,6 +5,9 @@ import MessageList from "./MessageList";
 import MessageInput from "./MessageInput";
 import { useSearchParams } from "next/navigation";
 import { toast } from "sonner";
+import { Button } from "./ui/button";
+import { TriangleAlertIcon } from "lucide-react";
+import { Alert, AlertTitle, AlertDescription } from "./ui/alert";
 
 interface Message {
   role: string;
@@ -214,50 +217,45 @@ export default function ChatInterface() {
 
   return (
     <div className="flex flex-col h-svh">
-      <header className="p-3 dark:text-white text-sm flex items-center justify-between border-b">
-        <span className="font-medium">AgentAPI Chat</span>
+      <header className="p-3 dark:text-white flex items-center justify-between border-b">
+        <span className="font-bold">AgentAPI Chat</span>
 
-        <div className="flex items-center space-x-3">
-          <div className="flex items-center">
+        {serverStatus !== "unknown" && (
+          <div className="flex items-center gap-2 text-sm font-medium">
             <span
-              className={`w-2 h-2 rounded-full mr-2 ${
+              className={`text-secondary w-2 h-2 rounded-full ${
                 ["offline", "unknown"].includes(serverStatus)
-                  ? "bg-red-500"
-                  : "bg-green-500"
+                  ? "bg-red-500 ring-2 ring-red-500/35"
+                  : "bg-green-500 ring-2 ring-green-500/35"
               }`}
-            ></span>
-            <span>Status: {serverStatus}</span>
+            />
+            <span className="sr-only">Status:</span>
+            <span className="first-letter:uppercase">{serverStatus}</span>
           </div>
-        </div>
+        )}
       </header>
 
       <main className="flex flex-1 flex-col w-full overflow-auto">
-        {(serverStatus === "offline" || serverStatus === "unknown") && (
-          <div className="bg-yellow-100 border-y border-yellow-400 text-yellow-800 px-4 py-3 flex items-center justify-between font-medium">
-            <div className="flex items-center">
-              <svg
-                className="w-5 h-5 mr-2"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
+        {serverStatus === "offline" && (
+          <div className="p-4 w-full max-w-4xl mx-auto">
+            <Alert className="flex border-yellow-500">
+              <TriangleAlertIcon className="h-4 w-4  stroke-yellow-600" />
+              <div>
+                <AlertTitle>API server is offline</AlertTitle>
+                <AlertDescription>
+                  Please start the AgentAPI server. Attempting to connect to:{" "}
+                  {agentAPIUrl || "N/A"}.
+                </AlertDescription>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="ml-auto"
+                onClick={() => window.location.reload()}
               >
-                <path
-                  fillRule="evenodd"
-                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                  clipRule="evenodd"
-                />
-              </svg>
-              <span>
-                API server is offline. Please start the AgentAPI server.
-                Attempting to connect to: {agentAPIUrl || "N/A"}.
-              </span>
-            </div>
-            <button
-              onClick={() => window.location.reload()}
-              className="bg-yellow-200 px-3 py-1 rounded text-xs hover:bg-yellow-300"
-            >
-              Retry Connection
-            </button>
+                Retry
+              </Button>
+            </Alert>
           </div>
         )}
 

chat/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }