feat(core): handle AI subscription for pro models (#13682)

<img width="576" height="251" alt="截屏2025-09-30 14 55 20"
src="https://github.com/user-attachments/assets/947a4ab3-8b34-434d-94a6-afb5dad3d32c"
/>


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

- **New Features**
- Added “Subscribe to AI” action across chat experiences (panel,
content, composer, input, playground, peek view) that launches an in-app
checkout flow.
- Chat content now refreshes subscription status when opened; desktop
chat pages wire the subscription action for seamless checkout.

- **Style**
  - Polished hover state for the subscription icon in chat preferences.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/modules/peek-view/view/ai-chat-block-peek-view/index.tsx

@@ -2,10 +2,13 @@ import { toReactNode } from '@affine/component';
 import { AIChatBlockPeekViewTemplate } from '@affine/core/blocksuite/ai';
 import type { AIChatBlockModel } from '@affine/core/blocksuite/ai/blocks/ai-chat-block/model/ai-chat-model';
 import { useAIChatConfig } from '@affine/core/components/hooks/affine/use-ai-chat-config';
+import { useAISubscribe } from '@affine/core/components/hooks/affine/use-ai-subscribe';
 import {
   AIDraftService,
   AIToolsConfigService,
 } from '@affine/core/modules/ai-button';
+import { AIModelService } from '@affine/core/modules/ai-button/services/models';
+import { SubscriptionService } from '@affine/core/modules/cloud';
 import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import type { EditorHost } from '@blocksuite/affine/std';
@@ -33,6 +36,9 @@ export const AIChatBlockPeekView = ({
   const affineWorkspaceDialogService = framework.get(WorkspaceDialogService);
   const aiDraftService = framework.get(AIDraftService);
   const aiToolsConfigService = framework.get(AIToolsConfigService);
+  const subscriptionService = framework.get(SubscriptionService);
+  const aiModelService = framework.get(AIModelService);
+  const handleAISubscribe = useAISubscribe();
 
   return useMemo(() => {
     const template = AIChatBlockPeekViewTemplate(
@@ -45,7 +51,10 @@ export const AIChatBlockPeekView = ({
       affineFeatureFlagService,
       affineWorkspaceDialogService,
       aiDraftService,
-      aiToolsConfigService
+      aiToolsConfigService,
+      subscriptionService,
+      aiModelService,
+      handleAISubscribe
     );
     return toReactNode(template);
   }, [
@@ -59,5 +68,8 @@ export const AIChatBlockPeekView = ({
     affineWorkspaceDialogService,
     aiDraftService,
     aiToolsConfigService,
+    subscriptionService,
+    aiModelService,
+    handleAISubscribe,
   ]);
 };