v3: fixed roles propagation bug, fixed inconsistent file drop zone, fixed chat attachments wrongfully pruned, some visual tweaks

src/components/form/FileField.tsx

@@ -15,6 +15,8 @@ interface FileFieldProps<T extends FieldValues> {
   showLimit?: boolean;
   disabled?: boolean;
   rules?: RegisterOptions<T, Path<T>>;
+  /** Side effect run after the field value changes (e.g. derive a title). */
+  onValueChange?: (file: File | null) => void;
 }
 
 /** `Controller`-wrapped {@link FileDropZone} bound to react-hook-form. */
@@ -25,12 +27,14 @@ export function FileField<T extends FieldValues>({
   showLimit,
   disabled,
   rules,
+  onValueChange,
 }: FileFieldProps<T>) {
   const { control, formState: { errors } } = useFormContext<T>();
   const error = errors[name];
 
   return (
     <div className="form-field">
+      {label && <span className="form-label">{label}</span>}
       <Controller
         name={name}
         control={control}
@@ -38,8 +42,10 @@ export function FileField<T extends FieldValues>({
         render={({ field }) => (
           <FileDropZone
             file={(field.value as File | null) ?? null}
-            onChange={field.onChange}
-            label={label}
+            onChange={(file) => {
+              field.onChange(file);
+              onValueChange?.(file);
+            }}
             hint={hint}
             showLimit={showLimit}
             disabled={disabled}