feat(core): adjust the layout, style, and structure of the AI chat input (#12828)

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

## Summary by CodeRabbit

- **New Features**
- Added support for image uploads in the chat panel, including upload
limits and user feedback when limits are exceeded.
- Introduced a unified chat input preference menu for selecting AI
models, toggling extended thinking, and enabling web search.
- Menu buttons and menus now support test identifiers for improved
testing.

- **Improvements**
- Updated chat input UI with enhanced styling, consolidated controls,
and simplified feature toggling.
  - Improved layout and spacing for chat chips and image preview grids.
  - Chat abort icon now adapts to the current color theme.

- **Refactor**
- Replaced the separate AI model selection component with the new chat
input preference menu.
- Streamlined imports and custom element registrations for chat input
preferences.

- **Tests**
- Enhanced test utilities to support the new chat input preference menu
interactions.

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

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

@@ -306,7 +306,16 @@ export class ChatPanelUtils {
     }
   }
 
+  public static async openChatInputPreference(page: Page) {
+    const trigger = page.getByTestId('chat-input-preference-trigger');
+    await trigger.click();
+    await page.getByTestId('chat-input-preference').waitFor({
+      state: 'visible',
+    });
+  }
+
   public static async enableNetworkSearch(page: Page) {
+    await this.openChatInputPreference(page);
     const networkSearch = page.getByTestId('chat-network-search');
     if ((await networkSearch.getAttribute('data-active')) === 'false') {
       await networkSearch.click();
@@ -314,6 +323,7 @@ export class ChatPanelUtils {
   }
 
   public static async disableNetworkSearch(page: Page) {
+    await this.openChatInputPreference(page);
     const networkSearch = page.getByTestId('chat-network-search');
     if ((await networkSearch.getAttribute('data-active')) === 'true') {
       await networkSearch.click();
@@ -321,6 +331,7 @@ export class ChatPanelUtils {
   }
 
   public static async enableReasoning(page: Page) {
+    await this.openChatInputPreference(page);
     const reasoning = page.getByTestId('chat-reasoning');
     if ((await reasoning.getAttribute('data-active')) === 'false') {
       await reasoning.click();
@@ -328,6 +339,7 @@ export class ChatPanelUtils {
   }
 
   public static async disableReasoning(page: Page) {
+    await this.openChatInputPreference(page);
     const reasoning = page.getByTestId('chat-reasoning');
     if ((await reasoning.getAttribute('data-active')) === 'true') {
       await reasoning.click();