refactor(core): ai input images display & max images count (#12395)

### TL;DR

* refactor: use horizontal scrolling to display images​
* refactor: change max images to 9
* test: add test cases for validating the maximum number of uploadable images

> CLOSE AI-6

![截屏2025-05-20 17.12.02.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyktQ6Qwc7H6TiRCFoYN/e234dd02-3bb8-4ea8-b69b-93c71b203a4e.png)

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

## Summary by CodeRabbit

- **New Features**
  - Added a notification to inform users when attempting to upload more images than allowed in the AI chat input.

- **Bug Fixes**
  - Prevented uploading more than 9 images at once in the AI chat input.

- **Style**
  - Improved image preview grid layout to display images in a single horizontally scrollable row.

- **Tests**
  - Added an end-to-end test to verify that an error message appears when too many images are uploaded.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/blocksuite/ai/components/ai-chat-input/ai-chat-input.ts

@@ -1,3 +1,4 @@
+import { toast } from '@affine/component';
 import { stopPropagation } from '@affine/core/utils';
 import type { CopilotSessionType } from '@affine/graphql';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
@@ -531,6 +532,10 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) {
       multiple: true,
     });
     if (!images) return;
+    if (this.chatContextValue.images.length + images.length > MAX_IMAGE_COUNT) {
+      toast(`You can only upload up to ${MAX_IMAGE_COUNT} images`);
+      return;
+    }
     this.addImages(images);
   };
 

packages/frontend/core/src/blocksuite/ai/components/ai-chat-input/const.ts

@@ -1 +1 @@
-export const MAX_IMAGE_COUNT = 32;
+export const MAX_IMAGE_COUNT = 9;

packages/frontend/core/src/blocksuite/ai/components/image-preview-grid.ts

@@ -7,16 +7,19 @@ import { repeat } from 'lit/directives/repeat.js';
 export class ImagePreviewGrid extends LitElement {
   static override styles = css`
     .image-preview-wrapper {
-      overflow: hidden scroll;
-      max-height: 128px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      max-height: 80px;
+      white-space: nowrap;
     }
 
     ${scrollbarStyle('.image-preview-wrapper')}
 
     .images-container {
       display: flex;
+      flex-direction: row;
       gap: 4px;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
       position: relative;
     }
 
@@ -31,6 +34,7 @@ export class ImagePreviewGrid extends LitElement {
       display: flex;
       justify-content: center;
       align-items: center;
+      flex: 0 0 auto;
     }
 
     .image-container img {

tests/affine-cloud-copilot/e2e/chat-with/image.spec.ts

@@ -1,3 +1,5 @@
+import { expect } from '@playwright/test';
+
 import { test } from '../base/base-test';
 
 test.describe('AIChatWith/Image', () => {
@@ -73,4 +75,27 @@ test.describe('AIChatWith/Image', () => {
       },
     ]);
   });
+
+  test('should show error toast when upload too many images', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    const image =
+      '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
Line truncated
+
+    const buffer = Buffer.from(image, 'base64');
+
+    const images = Array.from<{
+      name: string;
+      mimeType: string;
+      buffer: Buffer;
+    }>({ length: 20 }).fill({
+      name: 'image.jpeg',
+      mimeType: 'image/jpeg',
+      buffer: buffer,
+    });
+
+    await utils.chatPanel.uploadImages(page, images);
+    await expect(page.getByText(/You can only upload up to/i)).toBeVisible();
+  });
 });

tests/affine-cloud-copilot/e2e/utils/chat-panel-utils.ts

@@ -236,10 +236,9 @@ export class ChatPanelUtils {
     await this.makeChat(page, text);
   }
 
-  public static async chatWithImages(
+  public static async uploadImages(
     page: Page,
-    images: { name: string; mimeType: string; buffer: Buffer }[],
-    text: string
+    images: { name: string; mimeType: string; buffer: Buffer }[]
   ) {
     await page.evaluate(() => {
       delete window.showOpenFilePicker;
@@ -251,6 +250,14 @@ export class ChatPanelUtils {
 
     const fileChooser = await fileChooserPromise;
     await fileChooser.setFiles(images);
+  }
+
+  public static async chatWithImages(
+    page: Page,
+    images: { name: string; mimeType: string; buffer: Buffer }[],
+    text: string
+  ) {
+    await this.uploadImages(page, images);
 
     await page.waitForSelector('ai-chat-input img');
     await this.makeChat(page, text);