feat(core): impl ai onboarding templates (#7341)

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-panel-messages.ts

@@ -213,6 +213,7 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
                   width: '85%',
                   alignItems: 'center',
                   justifyContent: 'start',
+                  cursor: 'pointer',
                 })}
               >
                 ${config.icon}

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/preload-config.ts

@@ -5,31 +5,62 @@ import {
   PreloadImageIcon,
   PreloadPenIcon,
 } from '../_common/icons.js';
+import { AIProvider } from '../provider.js';
+import completeWritingWithAI from './templates/completeWritingWithAI.zip';
+import freelyCommunicateWithAI from './templates/freelyCommunicateWithAI.zip';
+import readAforeign from './templates/readAforeign.zip';
+import redHat from './templates/redHat.zip';
+import TidyMindMapV3 from './templates/TidyMindMapV3.zip';
 
 export const AIPreloadConfig = [
   {
     icon: ArticleIcon,
     text: 'Read a foreign language article with AI',
-    handler: () => {}, //waiting for implementation
+    handler: () => {
+      AIProvider.slots.requestInsertTemplate.emit({
+        template: readAforeign,
+        mode: 'edgeless',
+      });
+    },
   },
   {
     icon: MindmapIcon,
     text: 'Tidy a article with AI MindMap Action',
-    handler: () => {},
+    handler: () => {
+      AIProvider.slots.requestInsertTemplate.emit({
+        template: TidyMindMapV3,
+        mode: 'edgeless',
+      });
+    },
   },
   {
     icon: PreloadImageIcon,
     text: 'Add illustrations to the article',
-    handler: () => {},
+    handler: () => {
+      AIProvider.slots.requestInsertTemplate.emit({
+        template: redHat,
+        mode: 'edgeless',
+      });
+    },
   },
   {
     icon: PreloadPenIcon,
     text: 'Complete writing with AI',
-    handler: () => {},
+    handler: () => {
+      AIProvider.slots.requestInsertTemplate.emit({
+        template: completeWritingWithAI,
+        mode: 'edgeless',
+      });
+    },
   },
   {
     icon: CommunicateIcon,
     text: 'Freely communicate with AI',
-    handler: () => {},
+    handler: () => {
+      AIProvider.slots.requestInsertTemplate.emit({
+        template: freelyCommunicateWithAI,
+        mode: 'edgeless',
+      });
+    },
   },
 ];

packages/frontend/core/src/blocksuite/presets/ai/provider.ts

@@ -106,6 +106,10 @@ export class AIProvider {
     // use case: when user selects "continue in chat" in an ask ai result panel
     // do we need to pass the context to the chat panel?
     requestOpenWithChat: new Slot<AIChatParams>(),
+    requestInsertTemplate: new Slot<{
+      template: string;
+      mode: 'page' | 'edgeless';
+    }>(),
     requestLogin: new Slot<{ host: EditorHost }>(),
     requestUpgradePlan: new Slot<{ host: EditorHost }>(),
     // when an action is requested to run in edgeless mode (show a toast in affine)