fix(editor): improve image block upload and download states (#12017)

Related to: [BS-3143](https://linear.app/affine-design/issue/BS-3143/更新-loading-和错误样式)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a unified resource controller for managing image and attachment resources, providing improved loading, error, and state handling.
  - Added a visual loading indicator overlay to image blocks for better feedback during image loading.

- **Improvements**
  - Simplified and centralized image and attachment state management, reducing redundant properties and manual state tracking.
  - Updated fallback UI for image blocks with clearer titles, descriptions, and improved layout.
  - Enhanced batch image block creation and download handling for improved efficiency.
  - Refined image block accessibility with improved alt text and streamlined rendering logic.
  - Centralized target model selection for image insertion in AI actions.
  - Reordered CSS declarations without affecting styling.
  - Improved reactive state tracking for blob upload/download operations in mock server.

- **Bug Fixes**
  - Improved cleanup of object URLs to prevent resource leaks.
  - Adjusted toolbar logic to more accurately reflect available actions based on image state.

- **Tests**
  - Updated end-to-end tests to match new UI text and behaviors for image loading and error states.

- **Chores**
  - Refactored internal logic and updated comments for clarity and maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/blocksuite/ai/actions/page-response.ts

@@ -1,4 +1,4 @@
-import { uploadBlobForImage } from '@blocksuite/affine/blocks/image';
+import { addSiblingImageBlocks } from '@blocksuite/affine/blocks/image';
 import {
   getSurfaceBlock,
   SurfaceBlockModel,
@@ -178,14 +178,11 @@ export function responseToCreateImage(host: EditorHost, place: Place) {
   fetchImageToFile(answer, filename, imageProxy)
     .then(file => {
       if (!file) return;
-      host.doc.transact(() => {
-        const props = {
-          flavour: 'affine:image',
-          size: file.size,
-        };
-        const blockId = addSiblingBlocks(host, [props], place)?.[0];
-        blockId && uploadBlobForImage(host, blockId, file).catch(console.error);
-      });
+
+      const targetModel = getTargetModel(host, place);
+      if (!targetModel) return;
+
+      return addSiblingImageBlocks(host.std, [file], targetModel, place);
     })
     .catch(console.error);
 }
@@ -284,18 +281,21 @@ function addSurfaceRefBlock(host: EditorHost, bound: Bound, place: Place) {
   return addSiblingBlocks(host, [props], place);
 }
 
+function getTargetModel(host: EditorHost, place: Place) {
+  const { selectedModels } = getSelection(host) || {};
+  if (!selectedModels) return;
+  return place === 'before'
+    ? selectedModels[0]
+    : selectedModels[selectedModels.length - 1];
+}
+
 function addSiblingBlocks(
   host: EditorHost,
   props: Array<Partial<BlockProps>>,
   place: Place
 ) {
-  const { selectedModels } = getSelection(host) || {};
-  if (!selectedModels) return;
-  const targetModel =
-    place === 'before'
-      ? selectedModels[0]
-      : selectedModels[selectedModels.length - 1];
-
+  const targetModel = getTargetModel(host, place);
+  if (!targetModel) return;
   return host.doc.addSiblingBlocks(targetModel, props, place);
 }