Python:DevUI Fixes (#1035)

* fix event reset on thread change, enable multiline input, enable pasting of files and screenshots

* UI updates and improved remove discovery

* ui and other fixes

---------

Co-authored-by: Evan Mattson <35585003+moonbox3@users.noreply.github.com>

python/packages/devui/frontend/src/components/ui/attachment-gallery.tsx

@@ -3,13 +3,13 @@
  */
 
 import { useState } from "react";
-import { FileText, Image, Trash2 } from "lucide-react";
+import { FileText, Image, Trash2, Music } from "lucide-react";
 
 export interface AttachmentItem {
   id: string;
   file: File;
   preview?: string; // Data URL for preview
-  type: "image" | "pdf" | "other";
+  type: "image" | "pdf" | "audio" | "other";
 }
 
 interface AttachmentGalleryProps {
@@ -69,6 +69,14 @@ function AttachmentPreview({ attachment, onRemove }: AttachmentPreviewProps) {
           </div>
         );
 
+      case "audio":
+        return (
+          <div className="flex flex-col items-center justify-center w-full h-full bg-purple-50">
+            <Music className="h-6 w-6 text-purple-500 mb-1" />
+            <span className="text-xs text-purple-600">AUDIO</span>
+          </div>
+        );
+
       default:
         return (
           <div className="flex flex-col items-center justify-center w-full h-full bg-gray-100">

python/packages/devui/frontend/src/components/ui/dialog.tsx

@@ -15,10 +15,17 @@ interface DialogContentProps {
 
 interface DialogHeaderProps {
   children: React.ReactNode;
+  className?: string;
 }
 
 interface DialogTitleProps {
   children: React.ReactNode;
+  className?: string;
+}
+
+interface DialogDescriptionProps {
+  children: React.ReactNode;
+  className?: string;
 }
 
 interface DialogFooterProps {
@@ -46,30 +53,43 @@ export function DialogContent({
   children,
   className = "",
 }: DialogContentProps) {
+  // Default width classes if none provided
+  const hasWidthClass = className.includes('w-[') || className.includes('w-full') || className.includes('max-w-');
+  const defaultWidthClasses = hasWidthClass ? '' : 'max-w-lg w-full';
+
   return (
     <div
-      className={`relative bg-background border rounded-lg shadow-lg max-w-lg w-full max-h-[90vh] overflow-hidden ${className}`}
+      className={`relative bg-background border rounded-lg shadow-lg max-h-[90vh] overflow-hidden ${defaultWidthClasses} ${className}`}
     >
       {children}
     </div>
   );
 }
 
-export function DialogHeader({ children }: DialogHeaderProps) {
+export function DialogHeader({ children, className = "" }: DialogHeaderProps) {
   return (
-    <div className="flex items-center justify-between p-4 border-b">
+    <div className={`space-y-2 ${className}`}>
       {children}
     </div>
   );
 }
 
-export function DialogTitle({ children }: DialogTitleProps) {
-  return <h2 className="text-lg font-semibold">{children}</h2>;
+export function DialogTitle({ children, className = "" }: DialogTitleProps) {
+  return <h2 className={`text-lg font-semibold ${className}`}>{children}</h2>;
+}
+
+export function DialogDescription({ children, className = "" }: DialogDescriptionProps) {
+  return <p className={`text-sm text-muted-foreground ${className}`}>{children}</p>;
 }
 
 export function DialogClose({ onClose }: { onClose: () => void }) {
   return (
-    <Button variant="ghost" size="sm" onClick={onClose} className="h-6 w-6 p-0">
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={onClose}
+      className="absolute top-4 right-4 h-8 w-8 p-0 rounded-sm opacity-70 hover:opacity-100"
+    >
       <X className="h-4 w-4" />
     </Button>
   );

python/packages/devui/frontend/src/components/ui/file-upload.tsx

@@ -17,7 +17,7 @@ interface FileUploadProps {
 
 export function FileUpload({
   onFilesSelected,
-  accept = "image/*,.pdf",
+  accept = "image/*,.pdf,audio/*,.wav,.mp3,.m4a,.ogg",
   multiple = true,
   maxSize = 50 * 1024 * 1024, // 50MB default for local dev tool
   disabled = false,
@@ -105,7 +105,7 @@ export function FileUpload({
         onDrop={handleDrop}
         onDragOver={handleDragOver}
         className="shrink-0 transition-colors hover:bg-muted"
-        title="Upload files (images, PDFs)"
+        title="Upload files (images, PDFs, audio)"
       >
         <Upload className="h-4 w-4" />
       </Button>