Python: DevUI improvements. (#1091)

* enable deeplinking in ui, add agent details to entity info, add usage data, add middleware example in samples and foundry agent. * update ui build * Update python/packages/devui/frontend/src/components/workflow/workflow-input-form.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update python/packages/devui/pyproject.toml Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update python/packages/devui/pyproject.toml Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * imporove mapping for agent nodes and serialiation for agent run events * lint fixes * update pyproj toml and ui updates --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2026-06-16 21:04:09 +08:00 · 2025-10-03 15:22:03 -07:00
parent 61ac6d43b2
commit 01f438d710
33 changed files with 2733 additions and 1164 deletions
@@ -0,0 +1,89 @@
+/**
+ * Simple toast notification component
+ * Displays floating notifications in the top-right corner
+ */
+
+import { useEffect, useState } from "react";
+import { X } from "lucide-react";
+
+export interface ToastProps {
+  message: string;
+  type?: "info" | "success" | "warning" | "error";
+  duration?: number;
+  onClose: () => void;
+}
+
+export function Toast({ message, type = "info", duration = 4000, onClose }: ToastProps) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+      setTimeout(onClose, 300); // Wait for fade out animation
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  const bgColorClass = {
+    info: "bg-primary/10 border-primary/20",
+    success: "bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800",
+    warning: "bg-orange-50 dark:bg-orange-950 border-orange-200 dark:border-orange-800",
+    error: "bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800",
+  }[type];
+
+  const textColorClass = {
+    info: "text-primary",
+    success: "text-green-800 dark:text-green-200",
+    warning: "text-orange-800 dark:text-orange-200",
+    error: "text-red-800 dark:text-red-200",
+  }[type];
+
+  return (
+    <div
+      className={`fixed top-4 right-4 z-50 flex items-start gap-3 p-4 rounded-lg border shadow-lg max-w-md transition-all duration-300 ${
+        isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-4"
+      } ${bgColorClass}`}
+    >
+      <p className={`text-sm flex-1 ${textColorClass}`}>{message}</p>
+      <button
+        onClick={() => {
+          setIsVisible(false);
+          setTimeout(onClose, 300);
+        }}
+        className={`flex-shrink-0 hover:opacity-70 transition-opacity ${textColorClass}`}
+      >
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}
+
+// Toast container for managing multiple toasts
+export interface ToastData {
+  id: string;
+  message: string;
+  type?: "info" | "success" | "warning" | "error";
+  duration?: number;
+}
+
+interface ToastContainerProps {
+  toasts: ToastData[];
+  onRemove: (id: string) => void;
+}
+
+export function ToastContainer({ toasts, onRemove }: ToastContainerProps) {
+  return (
+    <div className="fixed top-4 right-4 z-50 flex flex-col gap-2">
+      {toasts.map((toast) => (
+        <Toast
+          key={toast.id}
+          message={toast.message}
+          type={toast.type}
+          duration={toast.duration}
+          onClose={() => onRemove(toast.id)}
+        />
+      ))}
+    </div>
+  );
+}