refactor(core): replace ai icons (#10637)

packages/frontend/core/src/blocksuite/ai/_common/chat-actions-handle.ts

@@ -25,6 +25,13 @@ import {
   type SerializedXYWH,
 } from '@blocksuite/affine/global/gfx';
 import type { Store } from '@blocksuite/affine/store';
+import {
+  BlockIcon,
+  InsertBleowIcon as InsertBelowIcon,
+  LinkedPageIcon,
+  PageIcon,
+  ReplaceIcon,
+} from '@blocksuite/icons/lit';
 import type { TemplateResult } from 'lit';
 
 import { insertFromMarkdown } from '../../utils';
@@ -32,7 +39,6 @@ import type { ChatMessage } from '../blocks';
 import { AIProvider, type AIUserInfo } from '../provider';
 import { reportResponse } from '../utils/action-reporter';
 import { insertBelow, replace } from '../utils/editor-actions';
-import { BlockIcon, CreateIcon, InsertBelowIcon, ReplaceIcon } from './icons';
 
 type Selections = {
   text?: TextSelection;
@@ -193,7 +199,7 @@ export function promptDocTitle(host: EditorHost, autofill?: string) {
 }
 
 const REPLACE_SELECTION = {
-  icon: ReplaceIcon,
+  icon: ReplaceIcon({ width: '20px', height: '20px' }),
   title: 'Replace selection',
   showWhen: (host: EditorHost) => {
     if (host.std.store.readonly$.value) {
@@ -250,7 +256,7 @@ const REPLACE_SELECTION = {
 };
 
 const INSERT_BELOW = {
-  icon: InsertBelowIcon,
+  icon: InsertBelowIcon({ width: '20px', height: '20px' }),
   title: 'Insert below',
   showWhen: (host: EditorHost) => {
     if (host.std.store.readonly$.value) {
@@ -284,7 +290,7 @@ const INSERT_BELOW = {
 };
 
 const SAVE_CHAT_TO_BLOCK_ACTION: ChatAction = {
-  icon: BlockIcon,
+  icon: BlockIcon({ width: '20px', height: '20px' }),
   title: 'Save chat to block',
   toast: 'Successfully saved chat to a block',
   showWhen: (host: EditorHost) => {
@@ -379,7 +385,7 @@ const SAVE_CHAT_TO_BLOCK_ACTION: ChatAction = {
 };
 
 const ADD_TO_EDGELESS_AS_NOTE = {
-  icon: CreateIcon,
+  icon: PageIcon({ width: '20px', height: '20px' }),
   title: 'Add to edgeless as note',
   showWhen: (host: EditorHost) => {
     if (host.std.store.readonly$.value) {
@@ -420,7 +426,7 @@ const ADD_TO_EDGELESS_AS_NOTE = {
 };
 
 const CREATE_AS_DOC = {
-  icon: CreateIcon,
+  icon: PageIcon({ width: '20px', height: '20px' }),
   title: 'Create as a doc',
   showWhen: () => true,
   toast: 'New doc created',
@@ -455,7 +461,7 @@ const CREATE_AS_DOC = {
 };
 
 const CREATE_AS_LINKED_DOC = {
-  icon: CreateIcon,
+  icon: LinkedPageIcon({ width: '20px', height: '20px' }),
   title: 'Create as a linked doc',
   showWhen: (host: EditorHost) => {
     if (host.std.store.readonly$.value) {

packages/frontend/core/src/blocksuite/ai/_common/config.ts

@@ -7,6 +7,23 @@ import {
   matchModels,
   ParagraphBlockModel,
 } from '@blocksuite/affine/blocks';
+import {
+  CommentIcon,
+  DoneIcon,
+  ExplainIcon,
+  ImageIcon,
+  ImproveWritingIcon,
+  LanguageIcon,
+  LongerIcon,
+  MakeItRealIcon,
+  MindmapIcon,
+  PenIcon,
+  PresentationIcon,
+  SearchIcon,
+  SelectionIcon,
+  ShorterIcon,
+  ToneIcon,
+} from '@blocksuite/icons/lit';
 
 import { actionToHandler } from '../actions/doc-handler';
 import {
@@ -22,26 +39,11 @@ import type {
 import { AIProvider } from '../provider';
 import { getAIPanelWidget } from '../utils/ai-widgets';
 import {
-  AIDoneIcon,
-  AIImageIcon,
   AIImageIconWithAnimation,
-  AIMindMapIcon,
-  AIPenIcon,
   AIPenIconWithAnimation,
-  AIPresentationIcon,
   AIPresentationIconWithAnimation,
-  AISearchIcon,
   AIStarIconWithAnimation,
-  CommentIcon,
-  ExplainIcon,
-  ImproveWritingIcon,
-  LanguageIcon,
-  LongerIcon,
-  MakeItRealIcon,
   MakeItRealIconWithAnimation,
-  SelectionIcon,
-  ShorterIcon,
-  ToneIcon,
 } from './icons';
 
 export const translateSubItem: AISubItemConfig[] = translateLangs.map(lang => {
@@ -144,37 +146,37 @@ const EditAIGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Translate to',
-      icon: LanguageIcon,
+      icon: LanguageIcon(),
       showWhen: textBlockShowWhen,
       subItem: translateSubItem,
     },
     {
       name: 'Change tone to',
-      icon: ToneIcon,
+      icon: ToneIcon(),
       showWhen: textBlockShowWhen,
       subItem: toneSubItem,
     },
     {
       name: 'Improve writing',
-      icon: ImproveWritingIcon,
+      icon: ImproveWritingIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('improveWriting', AIStarIconWithAnimation),
     },
     {
       name: 'Make it longer',
-      icon: LongerIcon,
+      icon: LongerIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('makeLonger', AIStarIconWithAnimation),
     },
     {
       name: 'Make it shorter',
-      icon: ShorterIcon,
+      icon: ShorterIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('makeShorter', AIStarIconWithAnimation),
     },
     {
       name: 'Continue writing',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('continueWriting', AIPenIconWithAnimation),
     },
@@ -186,31 +188,31 @@ const DraftAIGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Write an article about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('writeArticle', AIPenIconWithAnimation),
     },
     {
       name: 'Write a tweet about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('writeTwitterPost', AIPenIconWithAnimation),
     },
     {
       name: 'Write a poem about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('writePoem', AIPenIconWithAnimation),
     },
     {
       name: 'Write a blog post about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('writeBlogPost', AIPenIconWithAnimation),
     },
     {
       name: 'Brainstorm ideas about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('brainstorm', AIPenIconWithAnimation),
     },
@@ -222,37 +224,37 @@ const ReviewWIthAIGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Fix spelling',
-      icon: AIDoneIcon,
+      icon: DoneIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('fixSpelling', AIStarIconWithAnimation),
     },
     {
       name: 'Fix grammar',
-      icon: AIDoneIcon,
+      icon: DoneIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('improveGrammar', AIStarIconWithAnimation),
     },
     {
       name: 'Explain this image',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: imageBlockShowWhen,
       handler: actionToHandler('explainImage', AIStarIconWithAnimation),
     },
     {
       name: 'Explain this code',
-      icon: ExplainIcon,
+      icon: ExplainIcon(),
       showWhen: codeBlockShowWhen,
       handler: actionToHandler('explainCode', AIStarIconWithAnimation),
     },
     {
       name: 'Check code error',
-      icon: ExplainIcon,
+      icon: ExplainIcon(),
       showWhen: codeBlockShowWhen,
       handler: actionToHandler('checkCodeErrors', AIStarIconWithAnimation),
     },
     {
       name: 'Explain selection',
-      icon: SelectionIcon,
+      icon: SelectionIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('explain', AIStarIconWithAnimation),
     },
@@ -264,13 +266,13 @@ const GenerateWithAIGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Summarize',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('summary', AIPenIconWithAnimation),
     },
     {
       name: 'Generate headings',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       beta: true,
       handler: actionToHandler('createHeadings', AIPenIconWithAnimation),
       showWhen: chain => {
@@ -291,39 +293,39 @@ const GenerateWithAIGroup: AIItemGroupConfig = {
     },
     {
       name: 'Generate an image',
-      icon: AIImageIcon,
+      icon: ImageIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('createImage', AIImageIconWithAnimation),
     },
     {
       name: 'Generate outline',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('writeOutline', AIPenIconWithAnimation),
     },
     {
       name: 'Brainstorm ideas with mind map',
-      icon: AIMindMapIcon,
+      icon: MindmapIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('brainstormMindmap', AIPenIconWithAnimation),
     },
     {
       name: 'Generate presentation',
-      icon: AIPresentationIcon,
+      icon: PresentationIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('createSlides', AIPresentationIconWithAnimation),
       beta: true,
     },
     {
       name: 'Make it real',
-      icon: MakeItRealIcon,
+      icon: MakeItRealIcon(),
       beta: true,
       showWhen: textBlockShowWhen,
       handler: actionToHandler('makeItReal', MakeItRealIconWithAnimation),
     },
     {
       name: 'Find actions',
-      icon: AISearchIcon,
+      icon: SearchIcon(),
       showWhen: textBlockShowWhen,
       handler: actionToHandler('findActions', AIStarIconWithAnimation),
       beta: true,
@@ -336,7 +338,7 @@ const OthersAIGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Continue with AI',
-      icon: CommentIcon,
+      icon: CommentIcon(),
       handler: host => {
         const panel = getAIPanelWidget(host);
         AIProvider.slots.requestOpenWithChat.emit({
@@ -364,7 +366,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
       items: [
         {
           name: 'Explain this image',
-          icon: AIImageIcon,
+          icon: ImageIcon(),
           showWhen: () => true,
           handler: actionToHandler(
             'explainImage',
@@ -380,7 +382,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
       items: [
         {
           name: 'Generate an image',
-          icon: AIImageIcon,
+          icon: ImageIcon(),
           showWhen: () => true,
           handler: actionToHandler(
             'createImage',
@@ -391,7 +393,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
         },
         {
           name: 'Image processing',
-          icon: AIImageIcon,
+          icon: ImageIcon(),
           showWhen: () => true,
           subItem: createImageProcessingSubItem(blockActionTrackerOptions),
           subItemOffset: [12, -6],
@@ -399,7 +401,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
         },
         {
           name: 'AI image filter',
-          icon: ImproveWritingIcon,
+          icon: ImproveWritingIcon(),
           showWhen: () => true,
           subItem: createImageFilterSubItem(blockActionTrackerOptions),
           subItemOffset: [12, -4],
@@ -407,7 +409,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
         },
         {
           name: 'Generate a caption',
-          icon: AIPenIcon,
+          icon: PenIcon(),
           showWhen: () => true,
           beta: true,
           handler: actionToHandler(
@@ -430,7 +432,7 @@ export function buildAICodeItemGroups(): AIItemGroupConfig[] {
       items: [
         {
           name: 'Explain this code',
-          icon: ExplainIcon,
+          icon: ExplainIcon(),
           showWhen: () => true,
           handler: actionToHandler(
             'explainCode',
@@ -441,7 +443,7 @@ export function buildAICodeItemGroups(): AIItemGroupConfig[] {
         },
         {
           name: 'Check code error',
-          icon: ExplainIcon,
+          icon: ExplainIcon(),
           showWhen: () => true,
           handler: actionToHandler(
             'checkCodeErrors',

packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts

@@ -7,7 +7,6 @@ import type {
 } from '@blocksuite/affine/blocks';
 import {
   addImages,
-  DeleteIcon,
   EDGELESS_ELEMENT_TOOLBAR_WIDGET,
   EDGELESS_TEXT_BLOCK_MIN_HEIGHT,
   EDGELESS_TEXT_BLOCK_MIN_WIDTH,
@@ -15,19 +14,23 @@ import {
   fitContent,
   getSurfaceBlock,
   ImageBlockModel,
-  InsertBelowIcon,
   LightLoadingIcon,
   MindmapUtils,
   NoteDisplayMode,
-  ResetIcon,
   TelemetryProvider,
 } from '@blocksuite/affine/blocks';
 import { Bound } from '@blocksuite/affine/global/gfx';
+import {
+  ChatWithAiIcon,
+  DeleteIcon,
+  InsertBleowIcon as InsertBelowIcon,
+  PenIcon,
+  ResetIcon,
+} from '@blocksuite/icons/lit';
 import { html, type TemplateResult } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { insertFromMarkdown } from '../../utils';
-import { AIPenIcon, ChatWithAIIcon } from '../_common/icons';
 import type { AIItemConfig } from '../components/ai-item/types';
 import { AIProvider } from '../provider';
 import { reportResponse } from '../utils/action-reporter';
@@ -80,7 +83,7 @@ export function discard(
 ): AIItemConfig {
   return {
     name: 'Discard',
-    icon: DeleteIcon,
+    icon: DeleteIcon(),
     showWhen: () => !!panel.answer,
     handler: () => {
       panel.discard();
@@ -91,7 +94,7 @@ export function discard(
 export function retry(panel: AffineAIPanelWidget): AIItemConfig {
   return {
     name: 'Retry',
-    icon: ResetIcon,
+    icon: ResetIcon(),
     handler: () => {
       reportResponse('result:retry');
       panel.generate();
@@ -132,7 +135,7 @@ export function createInsertItems<T extends keyof BlockSuitePresets.AIActions>(
     },
     {
       name: buttonText,
-      icon: InsertBelowIcon,
+      icon: InsertBelowIcon(),
       showWhen: () => {
         const panel = getAIPanelWidget(host);
         const data = ctx.get();
@@ -186,7 +189,7 @@ export function asCaption<T extends keyof BlockSuitePresets.AIActions>(
 ): AIItemConfig {
   return {
     name: 'Use as caption',
-    icon: AIPenIcon,
+    icon: PenIcon(),
     showWhen: () => {
       const panel = getAIPanelWidget(host);
       return id === 'generateCaption' && !!panel.answer;
@@ -552,7 +555,7 @@ export function actionToResponse<T extends keyof BlockSuitePresets.AIActions>(
         items: [
           {
             name: 'Continue in chat',
-            icon: ChatWithAIIcon,
+            icon: ChatWithAiIcon({}),
             handler: () => {
               reportResponse('result:continue-in-chat');
               const panel = getAIPanelWidget(host);

packages/frontend/core/src/blocksuite/ai/ai-panel.ts

@@ -9,21 +9,21 @@ import {
   NoteDisplayMode,
 } from '@blocksuite/affine/blocks';
 import { Bound } from '@blocksuite/affine/global/gfx';
+import {
+  ChatWithAiIcon,
+  DeleteIcon,
+  InsertBleowIcon as InsertBelowIcon,
+  InsertTopIcon,
+  PageIcon,
+  PenIcon,
+  ReplaceIcon,
+  ResetIcon,
+} from '@blocksuite/icons/lit';
 import type { FrameworkProvider } from '@toeverything/infra';
 import type { TemplateResult } from 'lit';
 
 import { insertFromMarkdown } from '../utils';
-import {
+import { AIStarIconWithAnimation } from './_common/icons';
-  AIPenIcon,
-  AIStarIconWithAnimation,
-  ChatWithAIIcon,
-  CreateIcon,
-  DiscardIcon,
-  InsertBelowIcon,
-  InsertTopIcon,
-  ReplaceIcon,
-  RetryIcon,
-} from './_common/icons';
 import {
   EXCLUDING_REPLACE_ACTIONS,
   INSERT_ABOVE_ACTIONS,
@@ -50,7 +50,7 @@ function asCaption<T extends keyof BlockSuitePresets.AIActions>(
 ): AIItemConfig {
   return {
     name: 'Use as caption',
-    icon: AIPenIcon,
+    icon: PenIcon(),
     showWhen: () => {
       const panel = getAIPanelWidget(host);
       return id === 'generateCaption' && !!panel.answer;
@@ -76,7 +76,7 @@ function asCaption<T extends keyof BlockSuitePresets.AIActions>(
 function createNewNote(host: EditorHost): AIItemConfig {
   return {
     name: 'Create new note',
-    icon: CreateIcon,
+    icon: PageIcon(),
     showWhen: () => {
       const panel = getAIPanelWidget(host);
       return !!panel.answer && isInsideEdgelessEditor(host);
@@ -148,7 +148,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
       items: [
         {
           name: 'Insert below',
-          icon: InsertBelowIcon,
+          icon: InsertBelowIcon(),
           showWhen: () =>
             !!panel.answer && (!id || !INSERT_ABOVE_ACTIONS.includes(id)),
           handler: () => {
@@ -159,7 +159,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
         },
         {
           name: 'Insert above',
-          icon: InsertTopIcon,
+          icon: InsertTopIcon(),
           showWhen: () =>
             !!panel.answer && !!id && INSERT_ABOVE_ACTIONS.includes(id),
           handler: () => {
@@ -171,7 +171,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
         asCaption(host, id),
         {
           name: 'Replace selection',
-          icon: ReplaceIcon,
+          icon: ReplaceIcon(),
           showWhen: () =>
             !!panel.answer && !EXCLUDING_REPLACE_ACTIONS.includes(id),
           handler: () => {
@@ -188,7 +188,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
       items: [
         {
           name: 'Continue in chat',
-          icon: ChatWithAIIcon,
+          icon: ChatWithAiIcon(),
           handler: () => {
             reportResponse('result:continue-in-chat');
             AIProvider.slots.requestOpenWithChat.emit({ host });
@@ -197,7 +197,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
         },
         {
           name: 'Regenerate',
-          icon: RetryIcon,
+          icon: ResetIcon(),
           handler: () => {
             reportResponse('result:retry');
             panel.generate();
@@ -205,7 +205,7 @@ function buildPageResponseConfig<T extends keyof BlockSuitePresets.AIActions>(
         },
         {
           name: 'Discard',
-          icon: DiscardIcon,
+          icon: DeleteIcon(),
           handler: () => {
             panel.discard();
           },
@@ -222,7 +222,7 @@ export function buildErrorResponseConfig(panel: AffineAIPanelWidget) {
       items: [
         {
           name: 'Retry',
-          icon: RetryIcon,
+          icon: ResetIcon(),
           showWhen: () => true,
           handler: () => {
             reportResponse('result:retry');
@@ -231,7 +231,7 @@ export function buildErrorResponseConfig(panel: AffineAIPanelWidget) {
         },
         {
           name: 'Discard',
-          icon: DiscardIcon,
+          icon: DeleteIcon(),
           showWhen: () => !!panel.answer,
           handler: () => {
             panel.discard();

packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts

@@ -1,62 +1,62 @@
 import type { EditorHost } from '@blocksuite/affine/block-std';
 import { WithDisposable } from '@blocksuite/affine/global/utils';
+import {
+  ArrowDownBigIcon as ArrowDownIcon,
+  ArrowUpBigIcon as ArrowUpIcon,
+  DoneIcon,
+  ExplainIcon,
+  ImageIcon,
+  ImproveWritingIcon,
+  LanguageIcon,
+  LongerIcon,
+  MakeItRealIcon,
+  MindmapIcon,
+  MindmapNodeIcon,
+  PenIcon,
+  PresentationIcon,
+  SearchIcon,
+  SelectionIcon,
+  ShorterIcon,
+  ToneIcon,
+} from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 
-import {
-  ActionIcon,
-  AIChangeToneIcon,
-  AIDoneIcon,
-  AIExpandMindMapIcon,
-  AIExplainIcon,
-  AIExplainSelectionIcon,
-  AIFindActionsIcon,
-  AIImageIcon,
-  AIImproveWritingIcon,
-  AIMakeLongerIcon,
-  AIMakeRealIcon,
-  AIMakeShorterIcon,
-  AIMindMapIcon,
-  AIPenIcon,
-  AIPresentationIcon,
-  ArrowDownIcon,
-  ArrowUpIcon,
-} from '../../_common/icons';
 import { createTextRenderer } from '../../components/text-renderer';
 import type { ChatAction } from '../chat-context';
 import { renderImages } from '../components/images';
 import { HISTORY_IMAGE_ACTIONS } from '../const';
 
 const icons: Record<string, TemplateResult<1>> = {
-  'Fix spelling for it': AIDoneIcon,
+  'Fix spelling for it': DoneIcon(),
-  'Improve grammar for it': AIDoneIcon,
+  'Improve grammar for it': DoneIcon(),
-  'Explain this code': AIExplainIcon,
+  'Explain this code': ExplainIcon(),
-  'Check code error': AIExplainIcon,
+  'Check code error': SearchIcon(),
-  'Explain this': AIExplainSelectionIcon,
+  'Explain this': SelectionIcon(),
-  Translate: ActionIcon,
+  Translate: LanguageIcon(),
-  'Change tone': AIChangeToneIcon,
+  'Change tone': ToneIcon(),
-  'Improve writing for it': AIImproveWritingIcon,
+  'Improve writing for it': ImproveWritingIcon(),
-  'Make it longer': AIMakeLongerIcon,
+  'Make it longer': LongerIcon(),
-  'Make it shorter': AIMakeShorterIcon,
+  'Make it shorter': ShorterIcon(),
-  'Continue writing': AIPenIcon,
+  'Continue writing': PenIcon(),
-  'Make it real': AIMakeRealIcon,
+  'Make it real': MakeItRealIcon(),
-  'Find action items from it': AIFindActionsIcon,
+  'Find action items from it': SearchIcon(),
-  Summary: AIPenIcon,
+  Summary: PenIcon(),
-  'Create headings': AIPenIcon,
+  'Create headings': PenIcon(),
-  'Write outline': AIPenIcon,
+  'Write outline': PenIcon(),
-  image: AIImageIcon,
+  image: ImageIcon(),
-  'Brainstorm mindmap': AIMindMapIcon,
+  'Brainstorm mindmap': MindmapIcon(),
-  'Expand mind map': AIExpandMindMapIcon,
+  'Expand mind map': MindmapNodeIcon(),
-  'Create a presentation': AIPresentationIcon,
+  'Create a presentation': PresentationIcon(),
-  'Write a poem about this': AIPenIcon,
+  'Write a poem about this': PenIcon(),
-  'Write a blog post about this': AIPenIcon,
+  'Write a blog post about this': PenIcon(),
-  'AI image filter clay style': AIImageIcon,
+  'AI image filter clay style': ImageIcon(),
-  'AI image filter sketch style': AIImageIcon,
+  'AI image filter sketch style': ImageIcon(),
-  'AI image filter anime style': AIImageIcon,
+  'AI image filter anime style': ImageIcon(),
-  'AI image filter pixel style': AIImageIcon,
+  'AI image filter pixel style': ImageIcon(),
-  Clearer: AIImageIcon,
+  Clearer: ImageIcon(),
-  'Remove background': AIImageIcon,
+  'Remove background': ImageIcon(),
-  'Convert to sticker': AIImageIcon,
+  'Convert to sticker': ImageIcon(),
 };
 
 export class ActionWrapper extends WithDisposable(LitElement) {
@@ -130,10 +130,10 @@ export class ActionWrapper extends WithDisposable(LitElement) {
         class="action-name"
         @click=${() => (this.promptShow = !this.promptShow)}
       >
-        ${icons[item.action] ? icons[item.action] : ActionIcon}
+        ${icons[item.action] ? icons[item.action] : DoneIcon()}
         <div>
           <div>${item.action}</div>
-          <div>${this.promptShow ? ArrowDownIcon : ArrowUpIcon}</div>
+          <div>${this.promptShow ? ArrowDownIcon() : ArrowUpIcon()}</div>
         </div>
       </div>
       ${this.promptShow

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

@@ -2,17 +2,17 @@ import { stopPropagation } from '@affine/core/utils';
 import type { EditorHost } from '@blocksuite/affine/block-std';
 import { openFileOrFiles, unsafeCSSVarV2 } from '@blocksuite/affine/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/utils';
-import { ImageIcon, PublishIcon } from '@blocksuite/icons/lit';
+import {
+  BroomIcon,
+  CloseIcon,
+  ImageIcon,
+  PublishIcon,
+} from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import {
+import { ChatAbortIcon, ChatSendIcon } from '../_common/icons';
-  ChatAbortIcon,
-  ChatClearIcon,
-  ChatSendIcon,
-  CloseIcon,
-} from '../_common/icons';
 import type { AIError } from '../components/ai-item/types';
 import { AIProvider } from '../provider';
 import { reportResponse } from '../utils/action-reporter';
@@ -110,6 +110,7 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
       }
 
       .image-upload,
+      .chat-history-clear,
       .chat-network-search {
         display: flex;
         justify-content: center;
@@ -120,6 +121,9 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
           color: ${unsafeCSSVarV2('icon/primary')};
         }
       }
+      .chat-history-clear svg {
+        color: var(--affine-text-secondary-color);
+      }
       .chat-network-search[data-active='true'] svg {
         color: ${unsafeCSSVarV2('icon/activated')};
       }
@@ -326,7 +330,7 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
                   this.updateContext({ quote: '', markdown: '' });
                 }}
               >
-                ${CloseIcon}
+                ${CloseIcon()}
               </div>
             </div>`
           : nothing}
@@ -379,7 +383,7 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
             }}
             data-testid="chat-panel-clear"
           >
-            ${ChatClearIcon}
+            ${BroomIcon()}
           </div>
           ${this.networkSearchConfig.visible.value
             ? html`

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

@@ -8,6 +8,10 @@ import {
 } from '@blocksuite/affine/blocks';
 import { WithDisposable } from '@blocksuite/affine/global/utils';
 import type { BaseSelection } from '@blocksuite/affine/store';
+import {
+  AiIcon,
+  ArrowDownBigIcon as ArrowDownIcon,
+} from '@blocksuite/icons/lit';
 import { css, html, nothing, type PropertyValues } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -17,7 +21,7 @@ import {
   EdgelessEditorActions,
   PageEditorActions,
 } from '../_common/chat-actions-handle';
-import { AffineAvatarIcon, AffineIcon, DownArrowIcon } from '../_common/icons';
+import { AffineIcon } from '../_common/icons';
 import {
   type AIError,
   PaymentRequiredError,
@@ -34,6 +38,12 @@ import {
 import { HISTORY_IMAGE_ACTIONS } from './const';
 import { AIPreloadConfig } from './preload-config';
 
+const AffineAvatarIcon = AiIcon({
+  width: '20px',
+  height: '20px',
+  style: 'color: var(--affine-primary-color)',
+});
+
 export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
   static override styles = css`
     chat-panel-messages {
@@ -94,6 +104,7 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
+      color: var(--affine-text-secondary-color);
     }
 
     .onboarding-item-text {
@@ -285,7 +296,7 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
       </div>
       ${showDownIndicator && filteredItems.length > 0
         ? html`<div class="down-indicator" @click=${this._onDownIndicatorClick}>
-            ${DownArrowIcon}
+            ${ArrowDownIcon()}
           </div>`
         : nothing}
     `;

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

@@ -9,13 +9,13 @@ import {
 } from '@blocksuite/affine/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/utils';
 import type { Store } from '@blocksuite/affine/store';
+import { HelpIcon, InformationIcon } from '@blocksuite/icons/lit';
 import { css, html, type PropertyValues } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { throttle } from 'lodash-es';
 
-import { AIHelpIcon, SmallHintIcon } from '../_common/icons';
 import { AIProvider } from '../provider';
 import { extractSelectedContent } from '../utils/extract';
 import {
@@ -87,6 +87,12 @@ export class ChatPanel extends SignalWatcher(
         align-items: center;
         cursor: pointer;
       }
+
+      svg {
+        width: 18px;
+        height: 18px;
+        color: var(--affine-text-secondary-color);
+      }
     }
 
     chat-panel-messages {
@@ -448,7 +454,7 @@ export class ChatPanel extends SignalWatcher(
             AIProvider.toggleGeneralAIOnboarding?.(true);
           }}
         >
-          ${AIHelpIcon}
+          ${HelpIcon()}
         </div>
       </div>
       <chat-panel-messages
@@ -477,7 +483,7 @@ export class ChatPanel extends SignalWatcher(
         .cleanupHistories=${this._cleanupHistories}
       ></chat-panel-input>
       <div class="chat-panel-footer">
-        ${SmallHintIcon}
+        ${InformationIcon()}
         <div>AI outputs can be misleading or wrong</div>
       </div>
     </div>`;

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

@@ -1,10 +1,11 @@
 import {
-  ArticleIcon,
+  ImageIcon,
-  CommunicateIcon,
+  LanguageIcon,
   MindmapIcon,
-  PreloadImageIcon,
+  PenIcon,
-  PreloadPenIcon,
+  SendIcon,
-} from '../_common/icons.js';
+} from '@blocksuite/icons/lit';
+
 import { AIProvider } from '../provider/ai-provider.js';
 import completeWritingWithAI from './templates/completeWritingWithAI.zip';
 import freelyCommunicateWithAI from './templates/freelyCommunicateWithAI.zip';
@@ -14,7 +15,7 @@ import TidyMindMapV3 from './templates/TidyMindMapV3.zip';
 
 export const AIPreloadConfig = [
   {
-    icon: ArticleIcon,
+    icon: LanguageIcon(),
     text: 'Read a foreign language article with AI',
     handler: () => {
       AIProvider.slots.requestInsertTemplate.emit({
@@ -24,7 +25,7 @@ export const AIPreloadConfig = [
     },
   },
   {
-    icon: MindmapIcon,
+    icon: MindmapIcon(),
     text: 'Tidy an article with AI MindMap Action',
     handler: () => {
       AIProvider.slots.requestInsertTemplate.emit({
@@ -34,7 +35,7 @@ export const AIPreloadConfig = [
     },
   },
   {
-    icon: PreloadImageIcon,
+    icon: ImageIcon(),
     text: 'Add illustrations to the article',
     handler: () => {
       AIProvider.slots.requestInsertTemplate.emit({
@@ -44,7 +45,7 @@ export const AIPreloadConfig = [
     },
   },
   {
-    icon: PreloadPenIcon,
+    icon: PenIcon(),
     text: 'Complete writing with AI',
     handler: () => {
       AIProvider.slots.requestInsertTemplate.emit({
@@ -54,7 +55,7 @@ export const AIPreloadConfig = [
     },
   },
   {
-    icon: CommunicateIcon,
+    icon: SendIcon(),
     text: 'Freely communicate with AI',
     handler: () => {
       AIProvider.slots.requestInsertTemplate.emit({

packages/frontend/core/src/blocksuite/ai/components/ai-item/styles.ts

@@ -20,6 +20,11 @@ export const menuItemStyles = css`
   .item-icon {
     display: flex;
     color: var(--item-icon-color, var(--affine-brand-color));
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
   }
   .menu-item:hover .item-icon {
     color: var(--item-icon-hover-color, var(--affine-brand-color));

packages/frontend/core/src/blocksuite/ai/entries/edgeless/actions-config.ts

@@ -5,28 +5,30 @@ import {
   splitElements,
   TextElementModel,
 } from '@blocksuite/affine/blocks';
-
 import {
-  AIExpandMindMapIcon,
-  AIImageIcon,
-  AIImageIconWithAnimation,
-  AIMindMapIcon,
-  AIMindMapIconWithAnimation,
-  AIPenIcon,
-  AIPenIconWithAnimation,
-  AIPresentationIcon,
-  AIPresentationIconWithAnimation,
-  AISearchIcon,
   CommentIcon,
   ExplainIcon,
+  ImageIcon,
   ImproveWritingIcon,
   LanguageIcon,
   LongerIcon,
   MakeItRealIcon,
-  MakeItRealIconWithAnimation,
+  MindmapIcon,
+  MindmapNodeIcon,
+  PenIcon,
+  PresentationIcon,
+  SearchIcon,
   SelectionIcon,
   ShorterIcon,
   ToneIcon,
+} from '@blocksuite/icons/lit';
+
+import {
+  AIImageIconWithAnimation,
+  AIMindMapIconWithAnimation,
+  AIPenIconWithAnimation,
+  AIPresentationIconWithAnimation,
+  MakeItRealIconWithAnimation,
 } from '../../_common/icons';
 import {
   actionToHandler,
@@ -101,7 +103,7 @@ const othersGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Continue with AI',
-      icon: CommentIcon,
+      icon: CommentIcon({ width: '20px', height: '20px' }),
       showWhen: () => true,
       handler: host => {
         const panel = getAIPanelWidget(host);
@@ -121,38 +123,38 @@ const editGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Translate to',
-      icon: LanguageIcon,
+      icon: LanguageIcon(),
       showWhen: noteBlockOrTextShowWhen,
       subItem: translateSubItem,
     },
     {
       name: 'Change tone to',
-      icon: ToneIcon,
+      icon: ToneIcon(),
       showWhen: noteBlockOrTextShowWhen,
       subItem: toneSubItem,
     },
     {
       name: 'Improve writing',
-      icon: ImproveWritingIcon,
+      icon: ImproveWritingIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('improveWriting', AIStarIconWithAnimation),
     },
 
     {
       name: 'Make it longer',
-      icon: LongerIcon,
+      icon: LongerIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('makeLonger', AIStarIconWithAnimation),
     },
     {
       name: 'Make it shorter',
-      icon: ShorterIcon,
+      icon: ShorterIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('makeShorter', AIStarIconWithAnimation),
     },
     {
       name: 'Continue writing',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('continueWriting', AIPenIconWithAnimation),
     },
@@ -164,31 +166,31 @@ const draftGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Write an article about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('writeArticle', AIPenIconWithAnimation),
     },
     {
       name: 'Write a tweet about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('writeTwitterPost', AIPenIconWithAnimation),
     },
     {
       name: 'Write a poem about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('writePoem', AIPenIconWithAnimation),
     },
     {
       name: 'Write a blog post about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('writeBlogPost', AIPenIconWithAnimation),
     },
     {
       name: 'Brainstorm ideas about this',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('brainstorm', AIPenIconWithAnimation),
     },
@@ -200,19 +202,19 @@ const reviewGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Fix spelling',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('fixSpelling', AIStarIconWithAnimation),
     },
     {
       name: 'Fix grammar',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('improveGrammar', AIStarIconWithAnimation),
     },
     {
       name: 'Explain this image',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: imageOnlyShowWhen,
       handler: actionToHandler(
         'explainImage',
@@ -223,19 +225,19 @@ const reviewGroup: AIItemGroupConfig = {
     },
     {
       name: 'Explain this code',
-      icon: ExplainIcon,
+      icon: ExplainIcon(),
       showWhen: noteWithCodeBlockShowWen,
       handler: actionToHandler('explainCode', AIStarIconWithAnimation),
     },
     {
       name: 'Check code error',
-      icon: ExplainIcon,
+      icon: ExplainIcon(),
       showWhen: noteWithCodeBlockShowWen,
       handler: actionToHandler('checkCodeErrors', AIStarIconWithAnimation),
     },
     {
       name: 'Explain selection',
-      icon: SelectionIcon,
+      icon: SelectionIcon({ width: '20px', height: '20px' }),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('explain', AIStarIconWithAnimation),
     },
@@ -247,20 +249,20 @@ const generateGroup: AIItemGroupConfig = {
   items: [
     {
       name: 'Summarize',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('summary', AIPenIconWithAnimation),
     },
     {
       name: 'Generate headings',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       handler: actionToHandler('createHeadings', AIPenIconWithAnimation),
       showWhen: noteBlockOrTextShowWhen,
       beta: true,
     },
     {
       name: 'Generate an image',
-      icon: AIImageIcon,
+      icon: ImageIcon(),
       showWhen: notAllAIChatBlockShowWhen,
       handler: actionToHandler(
         'createImage',
@@ -335,13 +337,13 @@ const generateGroup: AIItemGroupConfig = {
     },
     {
       name: 'Generate outline',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('writeOutline', AIPenIconWithAnimation),
     },
     {
       name: 'Expand from this mind map node',
-      icon: AIExpandMindMapIcon,
+      icon: MindmapNodeIcon(),
       showWhen: mindmapChildShowWhen,
       handler: actionToHandler(
         'expandMindmap',
@@ -366,13 +368,13 @@ const generateGroup: AIItemGroupConfig = {
     },
     {
       name: 'Brainstorm ideas with mind map',
-      icon: AIMindMapIcon,
+      icon: MindmapIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('brainstormMindmap', AIMindMapIconWithAnimation),
     },
     {
       name: 'Regenerate mind map',
-      icon: AIMindMapIcon,
+      icon: MindmapIcon(),
       showWhen: mindmapRootShowWhen,
       handler: actionToHandler(
         'brainstormMindmap',
@@ -384,14 +386,14 @@ const generateGroup: AIItemGroupConfig = {
     },
     {
       name: 'Generate presentation',
-      icon: AIPresentationIcon,
+      icon: PresentationIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('createSlides', AIPresentationIconWithAnimation),
       beta: true,
     },
     {
       name: 'Make it real',
-      icon: MakeItRealIcon,
+      icon: MakeItRealIcon({ width: '20px', height: '20px' }),
       beta: true,
       showWhen: notAllAIChatBlockShowWhen,
       handler: actionToHandler(
@@ -469,7 +471,7 @@ const generateGroup: AIItemGroupConfig = {
     },
     {
       name: 'AI image filter',
-      icon: ImproveWritingIcon,
+      icon: PenIcon(),
       showWhen: imageOnlyShowWhen,
       subItem: imageFilterSubItem,
       subItemOffset: [12, -4],
@@ -477,7 +479,7 @@ const generateGroup: AIItemGroupConfig = {
     },
     {
       name: 'Image processing',
-      icon: AIImageIcon,
+      icon: ImageIcon(),
       showWhen: imageOnlyShowWhen,
       subItem: imageProcessingSubItem,
       subItemOffset: [12, -6],
@@ -485,7 +487,7 @@ const generateGroup: AIItemGroupConfig = {
     },
     {
       name: 'Generate a caption',
-      icon: AIPenIcon,
+      icon: PenIcon(),
       showWhen: imageOnlyShowWhen,
       beta: true,
       handler: actionToHandler(
@@ -497,7 +499,7 @@ const generateGroup: AIItemGroupConfig = {
     },
     {
       name: 'Find actions',
-      icon: AISearchIcon,
+      icon: SearchIcon(),
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('findActions', AIStarIconWithAnimation),
       beta: true,

packages/frontend/core/src/blocksuite/ai/messages/error.ts

@@ -1,13 +1,12 @@
 import { type EditorHost } from '@blocksuite/affine/block-std';
 import { scrollbarStyle, unsafeCSSVarV2 } from '@blocksuite/affine/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/utils';
-import { ToggleDownIcon } from '@blocksuite/icons/lit';
+import { InformationIcon, ToggleDownIcon } from '@blocksuite/icons/lit';
 import { signal } from '@preact/signals-core';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { ErrorTipIcon } from '../_common/icons';
 import {
   type AIError,
   PaymentRequiredError,
@@ -121,7 +120,7 @@ export class AIErrorWrapper extends SignalWatcher(WithDisposable(LitElement)) {
   protected override render() {
     return html` <div class="error-wrapper">
       <div class="content">
-        <div class="icon">${ErrorTipIcon}</div>
+        <div class="icon">${InformationIcon()}</div>
         <div class="text-container">
           <div>${this.text}</div>
           ${this.showDetailPanel

packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-input.ts

@@ -1,12 +1,12 @@
 import type { EditorHost } from '@blocksuite/affine/block-std';
 import { openFileOrFiles, unsafeCSSVarV2 } from '@blocksuite/affine/blocks';
 import { SignalWatcher } from '@blocksuite/affine/global/utils';
-import { ImageIcon, PublishIcon } from '@blocksuite/icons/lit';
+import { BroomIcon, ImageIcon, PublishIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { ChatAbortIcon, ChatClearIcon, ChatSendIcon } from '../_common/icons';
+import { ChatAbortIcon, ChatSendIcon } from '../_common/icons';
 import type { ChatMessage } from '../blocks';
 import type { AINetworkSearchConfig } from '../chat-panel/chat-config';
 import {
@@ -95,6 +95,7 @@ export class ChatBlockInput extends SignalWatcher(LitElement) {
       }
 
       .image-upload,
+      .chat-history-clear,
       .chat-network-search {
         display: flex;
         justify-content: center;
@@ -167,7 +168,7 @@ export class ChatBlockInput extends SignalWatcher(LitElement) {
         ></textarea>
         <div class="chat-panel-input-actions">
           <div class=${cleanButtonClasses} @click=${this._handleCleanup}>
-            ${ChatClearIcon}
+            ${BroomIcon()}
           </div>
           ${this.networkSearchConfig.visible.value
             ? html`

packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts

@@ -9,6 +9,7 @@ import {
   type SpecBuilder,
   TelemetryProvider,
 } from '@blocksuite/affine/blocks';
+import { InformationIcon } from '@blocksuite/icons/lit';
 import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -19,7 +20,6 @@ import {
   constructUserInfoWithMessages,
   queryHistoryMessages,
 } from '../_common/chat-actions-handle';
-import { SmallHintIcon } from '../_common/icons';
 import {
   type AIChatBlockModel,
   type ChatMessage,
@@ -515,7 +515,7 @@ export class AIChatBlockPeekView extends LitElement {
         .networkSearchConfig=${networkSearchConfig}
       ></chat-block-input>
       <div class="peek-view-footer">
-        ${SmallHintIcon}
+        ${InformationIcon()}
         <div>AI outputs can be misleading or wrong</div>
       </div>
     </div> `;