feat(core): chat-panel buttons ui (#11942)

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

![截屏2025-04-23 23.29.32.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/a984a28f-0ccf-4e8d-ba2d-239ad03f2998.png)

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

@@ -0,0 +1,30 @@
+import { test } from '../base/base-test';
+
+test.describe('AIChatWith/Reasoning', () => {
+  test.beforeEach(async ({ loggedInPage: page, utils }) => {
+    await utils.testUtils.setupTestEnvironment(page);
+    await utils.chatPanel.openChatPanel(page);
+  });
+
+  test('should support chat with reasoning', async ({
+    loggedInPage: page,
+    utils,
+  }) => {
+    await utils.chatPanel.enableReasoning(page);
+    await utils.chatPanel.makeChat(
+      page,
+      'How do you measure exactly 4 liters of water using a jug that only holds 3 and 5 liters?'
+    );
+    await utils.chatPanel.waitForHistory(page, [
+      {
+        role: 'user',
+        content:
+          'How do you measure exactly 4 liters of water using a jug that only holds 3 and 5 liters?',
+      },
+      {
+        role: 'assistant',
+        status: 'success',
+      },
+    ]);
+  });
+});

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

@@ -305,6 +305,20 @@ export class ChatPanelUtils {
     }
   }
 
+  public static async enableReasoning(page: Page) {
+    const reasoning = page.getByTestId('chat-reasoning');
+    if ((await reasoning.getAttribute('data-active')) === 'false') {
+      await reasoning.click();
+    }
+  }
+
+  public static async disableReasoning(page: Page) {
+    const reasoning = page.getByTestId('chat-reasoning');
+    if ((await reasoning.getAttribute('data-active')) === 'true') {
+      await reasoning.click();
+    }
+  }
+
   public static async isNetworkSearchEnabled(page: Page) {
     const networkSearch = await page.getByTestId('chat-network-search');
     return (await networkSearch.getAttribute('aria-disabled')) === 'false';