feat(core): update ai add context button ui (#13172)

Close [AI-301](https://linear.app/affine-design/issue/AI-301)

<img width="571" height="204" alt="截屏2025-07-11 17 33 01"
src="https://github.com/user-attachments/assets/3b7ed81f-1137-4c01-8fe2-9fe5ebf2adf3"
/>


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

* **New Features**
* Introduced a new component for adding context (images, documents,
tags, collections) to AI chat via a plus button and popover menu.
* Added notification feedback for duplicate chip additions and image
upload limits.
* Chips panel now supports collapsing and expanding for improved UI
control.

* **Improvements**
* Refactored chip management for better error handling, feedback, and
external control.
* Streamlined image and document uploads through a unified menu-driven
interface.
* Enhanced chip management methods with clearer naming and robust
synchronization.
* Updated chat input to delegate image upload and context additions to
the new add-context component.

* **Bug Fixes**
* Improved cancellation and cleanup of ongoing chip addition operations
to prevent conflicts.

* **Tests**
* Updated end-to-end tests to reflect the new menu-driven image upload
workflow and removed legacy checks.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: fengmk2 <fengmk2@gmail.com>
This commit is contained in:
Wu Yue
2025-07-11 18:10:41 +08:00
committed by GitHub
parent a2b86bc6d2
commit 93f13e9e01
16 changed files with 511 additions and 456 deletions

View File

@@ -260,8 +260,12 @@ export class ChatPanelUtils {
});
const fileChooserPromise = page.waitForEvent('filechooser');
// Open file upload dialog
await page.getByTestId('chat-panel-input-image-upload').click();
const withButton = page.getByTestId('chat-panel-with-button');
await withButton.hover();
await withButton.click({ delay: 200 });
const withMenu = page.getByTestId('ai-add-popover');
await withMenu.waitFor({ state: 'visible' });
await withMenu.getByTestId('ai-chat-with-images').click();
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles(images);
@@ -369,10 +373,4 @@ export class ChatPanelUtils {
const networkSearch = await page.getByTestId('chat-network-search');
return (await networkSearch.getAttribute('aria-disabled')) === 'false';
}
public static async isImageUploadEnabled(page: Page) {
const imageUpload = await page.getByTestId('chat-panel-input-image-upload');
const disabled = await imageUpload.getAttribute('data-disabled');
return disabled === 'false';
}
}