Python: Add DevUI to AgentFramework (#781)

* add initial backend service code for devui * add tests * add frontendcode * ui updates * update readme * ui updates and tweaks * update ui bundle * improve ui, add react flow base * add react flow ui, fix background * update ui, fix introspection bug * update readme * update ui build * add support for multimodal input - both backend and frontend * update ui build * refactor as main framework package * backend and tests refactor * ui build update * ui build update and refactor * update pyproject.toml, update uv.lock * update ui build * ui update to fit oai responses types * add backend updat and readme update * mypy and other fixes * add intial dev guide * update ui and fix workflow bug * update ui build, add thread support * type fixes * update workflow view * update uv.lock * fix workflow iport errors * lint and other fixes * mypy fixes * minor update * update ui build * refactor to use oai dependencies directly, update examples to samples, improve typing * readme update * update ui and ui build * fix workflow pyright error * update ui, fix issues with run workflow placement, miniamp menu, etc * make samples integrate serve --------- Co-authored-by: Chris <66376200+crickman@users.noreply.github.com> Co-authored-by: Eric Zhu <ekzhu@users.noreply.github.com>
2026-06-16 21:04:09 +08:00 · 2025-09-22 16:30:08 -07:00
parent adb6dcd2af
commit 1ef24d3e91
98 changed files with 18045 additions and 4 deletions
@@ -0,0 +1,141 @@
+/**
+ * FileUpload - Upload button with drag & drop support
+ */
+
+import { useRef } from "react";
+import { Upload } from "lucide-react";
+import { Button } from "./button";
+
+interface FileUploadProps {
+  onFilesSelected: (files: File[]) => void;
+  accept?: string;
+  multiple?: boolean;
+  maxSize?: number; // in bytes
+  disabled?: boolean;
+  className?: string;
+}
+
+export function FileUpload({
+  onFilesSelected,
+  accept = "image/*,.pdf",
+  multiple = true,
+  maxSize = 50 * 1024 * 1024, // 50MB default for local dev tool
+  disabled = false,
+  className = "",
+}: FileUploadProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileSelect = (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+
+    const validFiles: File[] = [];
+    const errors: string[] = [];
+
+    Array.from(files).forEach((file) => {
+      // Size validation
+      if (file.size > maxSize) {
+        errors.push(`${file.name} is too large (max ${formatFileSize(maxSize)})`);
+        return;
+      }
+
+      // Type validation (basic)
+      if (accept && !isFileAccepted(file, accept)) {
+        errors.push(`${file.name} is not an accepted file type`);
+        return;
+      }
+
+      validFiles.push(file);
+    });
+
+    if (errors.length > 0) {
+      console.warn("File upload errors:", errors);
+      // In a production app, you might want to show these errors to the user
+    }
+
+    if (validFiles.length > 0) {
+      onFilesSelected(validFiles);
+    }
+  };
+
+  const handleButtonClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    handleFileSelect(e.target.files);
+    // Reset input to allow selecting the same file again
+    e.target.value = "";
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (disabled) return;
+
+    const files = e.dataTransfer.files;
+    handleFileSelect(files);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  return (
+    <div className={className}>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={handleFileInputChange}
+        className="hidden"
+        disabled={disabled}
+      />
+
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        onClick={handleButtonClick}
+        disabled={disabled}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        className="shrink-0 transition-colors hover:bg-muted"
+        title="Upload files (images, PDFs)"
+      >
+        <Upload className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}
+
+// Helper functions
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+}
+
+function isFileAccepted(file: File, accept: string): boolean {
+  const acceptPatterns = accept.split(",").map((pattern) => pattern.trim());
+
+  return acceptPatterns.some((pattern) => {
+    if (pattern.startsWith(".")) {
+      // File extension check
+      return file.name.toLowerCase().endsWith(pattern.toLowerCase());
+    } else if (pattern.includes("/*")) {
+      // MIME type wildcard check (e.g., "image/*")
+      const [mainType] = pattern.split("/");
+      return file.type.startsWith(mainType + "/");
+    } else {
+      // Exact MIME type check
+      return file.type === pattern;
+    }
+  });
+}