diff --git a/packages/frontend/core/src/blocksuite/ai/_common/chat-actions-handle.ts b/packages/frontend/core/src/blocksuite/ai/_common/chat-actions-handle.ts index 89d4ad7330..618bb1a566 100644 --- a/packages/frontend/core/src/blocksuite/ai/_common/chat-actions-handle.ts +++ b/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) { diff --git a/packages/frontend/core/src/blocksuite/ai/_common/config.ts b/packages/frontend/core/src/blocksuite/ai/_common/config.ts index dee8ab6703..ef974b704b 100644 --- a/packages/frontend/core/src/blocksuite/ai/_common/config.ts +++ b/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', diff --git a/packages/frontend/core/src/blocksuite/ai/_common/icons.ts b/packages/frontend/core/src/blocksuite/ai/_common/icons.ts index 7d8af84865..2cdec6f631 100644 --- a/packages/frontend/core/src/blocksuite/ai/_common/icons.ts +++ b/packages/frontend/core/src/blocksuite/ai/_common/icons.ts @@ -2,30 +2,6 @@ import '@dotlottie/player-component'; import { html } from 'lit'; -export const AIStarIcon = html` - - - - - - - - - -`; - export const AIStarIconWithAnimation = html``; -export const SmallHintIcon = html` - - `; - -export const AIHelpIcon = html` - - - - - - - - - `; - export const AffineIcon = (color: string) => html` `; -export const ChatClearIcon = html` - - - - - - - - - `; - export const ChatSendIcon = html` `; -export const CurrentSelectionIcon = html` - - - - - - - - - `; - -export const ImageIcon = html` - - `; - -export const SmallImageIcon = html` - - - - - - - - - `; - -export const DocIcon = html` - - - - - - - - - `; - -export const DownArrowIcon = html` - - `; - -export const CloseIcon = html` - - `; - -export const ReplaceIcon = html` - - `; - -export const InsertBelowIcon = html` - - `; - -export const InsertTopIcon = html` - -`; - -export const NewBlockIcon = html` - - - - - - - - - `; - -export const CreateIcon = html` - - - - - - - - - `; - -export const AffineAvatarIcon = html` - - - `; - -export const ActionIcon = html` - - `; - -export const LanguageIcon = html` - - `; - -export const ImproveWritingIcon = html` - - `; - -export const AIDoneIcon = html` - - `; - -export const ShorterIcon = html` - - `; - -export const LongerIcon = html` - - `; - -export const ExplainIcon = html` - - `; - -export const AIExplainIcon = html` - - - - - - - - - `; - -export const SelectionIcon = html` - -`; - -export const AIExplainSelectionIcon = html` - - - - - - - - - `; - -export const ToneIcon = html` - - `; - -export const AIChangeToneIcon = html` - - - - - - - - - `; - -export const AISearchIcon = html` - - `; - -export const AIImproveWritingIcon = html` - - - - - - - - - `; - -export const AIMakeLongerIcon = html` - - - - - - - - - `; - -export const AIMakeShorterIcon = html` - - - - - - - - - `; - -export const AIMakeRealIcon = html` - - - - - - - - - `; - -export const AIPenIcon = html` - - `; - export const AIPenIconWithAnimation = html``; -export const AIPresentationIcon = html` - - - - - - - - - `; - export const AIPresentationIconWithAnimation = html``; -export const AIMindMapIcon = html` - - - - - - - - - `; - export const AIMindMapIconWithAnimation = html``; -export const AIExpandMindMapIcon = html` - - - - - - - - - `; - -export const AIFindActionsIcon = html` - - `; - -export const AIImageIcon = html` - - - - - - - - - `; - export const AIImageIconWithAnimation = html``; -export const ChatWithAIIcon = html` - - `; - -export const MakeItRealIcon = html` - - `; - export const MakeItRealIconWithAnimation = html``; - -export const ArrowDownIcon = html` - - `; - -export const ArrowUpIcon = html` - - `; - -export const DiscardIcon = html` - -`; - -export const ErrorTipIcon = html` - -`; - -export const CopyIcon = html` - - - - - - - - - `; - -export const RetryIcon = html` - - `; - -export const MoreIcon = html` - - - - - - - - - `; - -export const ArticleIcon = html` - - - - - - - - - `; - -export const MindmapIcon = html` - - - - - - - - - `; - -export const PreloadImageIcon = html` - - - - - - - - - `; - -export const PreloadPenIcon = html` - - `; - -export const CommunicateIcon = html` - - - - - - - - - `; - -export const CommentIcon = html` - -`; - -export const BlockIcon = html` - -`; diff --git a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts index 3f108544d4..a7193288ce 100644 --- a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts +++ b/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( }, { name: buttonText, - icon: InsertBelowIcon, + icon: InsertBelowIcon(), showWhen: () => { const panel = getAIPanelWidget(host); const data = ctx.get(); @@ -186,7 +189,7 @@ export function asCaption( ): 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( items: [ { name: 'Continue in chat', - icon: ChatWithAIIcon, + icon: ChatWithAiIcon({}), handler: () => { reportResponse('result:continue-in-chat'); const panel = getAIPanelWidget(host); diff --git a/packages/frontend/core/src/blocksuite/ai/ai-panel.ts b/packages/frontend/core/src/blocksuite/ai/ai-panel.ts index 924a5cc443..eea92fdc44 100644 --- a/packages/frontend/core/src/blocksuite/ai/ai-panel.ts +++ b/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 { - AIPenIcon, - AIStarIconWithAnimation, - ChatWithAIIcon, - CreateIcon, - DiscardIcon, - InsertBelowIcon, - InsertTopIcon, - ReplaceIcon, - RetryIcon, -} from './_common/icons'; +import { AIStarIconWithAnimation } from './_common/icons'; import { EXCLUDING_REPLACE_ACTIONS, INSERT_ABOVE_ACTIONS, @@ -50,7 +50,7 @@ function asCaption( ): 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( 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( items: [ { name: 'Insert below', - icon: InsertBelowIcon, + icon: InsertBelowIcon(), showWhen: () => !!panel.answer && (!id || !INSERT_ABOVE_ACTIONS.includes(id)), handler: () => { @@ -159,7 +159,7 @@ function buildPageResponseConfig( }, { name: 'Insert above', - icon: InsertTopIcon, + icon: InsertTopIcon(), showWhen: () => !!panel.answer && !!id && INSERT_ABOVE_ACTIONS.includes(id), handler: () => { @@ -171,7 +171,7 @@ function buildPageResponseConfig( 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( 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( }, { name: 'Regenerate', - icon: RetryIcon, + icon: ResetIcon(), handler: () => { reportResponse('result:retry'); panel.generate(); @@ -205,7 +205,7 @@ function buildPageResponseConfig( }, { 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(); diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts index 6cbd1daff5..19f45a63d7 100644 --- a/packages/frontend/core/src/blocksuite/ai/chat-panel/actions/action-wrapper.ts +++ b/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> = { - 'Fix spelling for it': AIDoneIcon, - 'Improve grammar for it': AIDoneIcon, - 'Explain this code': AIExplainIcon, - 'Check code error': AIExplainIcon, - 'Explain this': AIExplainSelectionIcon, - Translate: ActionIcon, - 'Change tone': AIChangeToneIcon, - 'Improve writing for it': AIImproveWritingIcon, - 'Make it longer': AIMakeLongerIcon, - 'Make it shorter': AIMakeShorterIcon, - 'Continue writing': AIPenIcon, - 'Make it real': AIMakeRealIcon, - 'Find action items from it': AIFindActionsIcon, - Summary: AIPenIcon, - 'Create headings': AIPenIcon, - 'Write outline': AIPenIcon, - image: AIImageIcon, - 'Brainstorm mindmap': AIMindMapIcon, - 'Expand mind map': AIExpandMindMapIcon, - 'Create a presentation': AIPresentationIcon, - 'Write a poem about this': AIPenIcon, - 'Write a blog post about this': AIPenIcon, - 'AI image filter clay style': AIImageIcon, - 'AI image filter sketch style': AIImageIcon, - 'AI image filter anime style': AIImageIcon, - 'AI image filter pixel style': AIImageIcon, - Clearer: AIImageIcon, - 'Remove background': AIImageIcon, - 'Convert to sticker': AIImageIcon, + 'Fix spelling for it': DoneIcon(), + 'Improve grammar for it': DoneIcon(), + 'Explain this code': ExplainIcon(), + 'Check code error': SearchIcon(), + 'Explain this': SelectionIcon(), + Translate: LanguageIcon(), + 'Change tone': ToneIcon(), + 'Improve writing for it': ImproveWritingIcon(), + 'Make it longer': LongerIcon(), + 'Make it shorter': ShorterIcon(), + 'Continue writing': PenIcon(), + 'Make it real': MakeItRealIcon(), + 'Find action items from it': SearchIcon(), + Summary: PenIcon(), + 'Create headings': PenIcon(), + 'Write outline': PenIcon(), + image: ImageIcon(), + 'Brainstorm mindmap': MindmapIcon(), + 'Expand mind map': MindmapNodeIcon(), + 'Create a presentation': PresentationIcon(), + 'Write a poem about this': PenIcon(), + 'Write a blog post about this': PenIcon(), + 'AI image filter clay style': ImageIcon(), + 'AI image filter sketch style': ImageIcon(), + 'AI image filter anime style': ImageIcon(), + 'AI image filter pixel style': ImageIcon(), + Clearer: ImageIcon(), + 'Remove background': ImageIcon(), + '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()}
${item.action}
-
${this.promptShow ? ArrowDownIcon : ArrowUpIcon}
+
${this.promptShow ? ArrowDownIcon() : ArrowUpIcon()}
${this.promptShow diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-input.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-input.ts index 492333b90c..2cfd196381 100644 --- a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-input.ts +++ b/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 { - ChatAbortIcon, - ChatClearIcon, - ChatSendIcon, - CloseIcon, -} from '../_common/icons'; +import { ChatAbortIcon, ChatSendIcon } 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()} ` : nothing} @@ -379,7 +383,7 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) { }} data-testid="chat-panel-clear" > - ${ChatClearIcon} + ${BroomIcon()} ${this.networkSearchConfig.visible.value ? html` diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts index 0a574d8df9..931985bd09 100644 --- a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts +++ b/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) { ${showDownIndicator && filteredItems.length > 0 ? html`
- ${DownArrowIcon} + ${ArrowDownIcon()}
` : nothing} `; diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts index 93d1a09071..e8ae0de01e 100644 --- a/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts +++ b/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()}
- ${SmallHintIcon} + ${InformationIcon()}
AI outputs can be misleading or wrong
`; diff --git a/packages/frontend/core/src/blocksuite/ai/chat-panel/preload-config.ts b/packages/frontend/core/src/blocksuite/ai/chat-panel/preload-config.ts index c6ec85f298..18ea125538 100644 --- a/packages/frontend/core/src/blocksuite/ai/chat-panel/preload-config.ts +++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/preload-config.ts @@ -1,10 +1,11 @@ import { - ArticleIcon, - CommunicateIcon, + ImageIcon, + LanguageIcon, MindmapIcon, - PreloadImageIcon, - PreloadPenIcon, -} from '../_common/icons.js'; + PenIcon, + SendIcon, +} 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({ diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-item/styles.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-item/styles.ts index e3649668cd..75236710ee 100644 --- a/packages/frontend/core/src/blocksuite/ai/components/ai-item/styles.ts +++ b/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)); diff --git a/packages/frontend/core/src/blocksuite/ai/entries/edgeless/actions-config.ts b/packages/frontend/core/src/blocksuite/ai/entries/edgeless/actions-config.ts index cf65625b1d..abd0729d3a 100644 --- a/packages/frontend/core/src/blocksuite/ai/entries/edgeless/actions-config.ts +++ b/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, diff --git a/packages/frontend/core/src/blocksuite/ai/messages/error.ts b/packages/frontend/core/src/blocksuite/ai/messages/error.ts index 702df3d858..dfb631940f 100644 --- a/packages/frontend/core/src/blocksuite/ai/messages/error.ts +++ b/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`
-
${ErrorTipIcon}
+
${InformationIcon()}
${this.text}
${this.showDetailPanel diff --git a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-input.ts b/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-input.ts index b72351b0f4..ba8e1bf1ed 100644 --- a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-input.ts +++ b/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) { >
- ${ChatClearIcon} + ${BroomIcon()}
${this.networkSearchConfig.visible.value ? html` diff --git a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts b/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts index cb23ff1cb5..0d826d23b7 100644 --- a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts +++ b/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} >
- ${SmallHintIcon} + ${InformationIcon()}
AI outputs can be misleading or wrong
`;