refactor(editor): extract ai widgets and tool (#10367)

### TL;DR
Moved AI-related components from BlockSuite core to the frontend presets directory to better organize AI functionality.

### What changed?
- Relocated AI panel, copilot tool, and related components from BlockSuite core to frontend presets
- Moved AI widget definitions and registrations to the presets directory
- Updated imports to reference new component locations
- Removed AI component registrations from core effects.ts
- Added AI component registrations to presets effects.ts

### How to test?
1. Verify AI panel functionality works as expected in the editor
2. Test copilot tool interactions in edgeless mode
3. Confirm AI suggestions and responses still appear correctly
4. Check that AI toolbar buttons and menus function properly
5. Ensure AI error states and loading indicators display correctly

### Why make this change?
This restructuring improves code organization by moving AI-specific functionality out of the core BlockSuite library and into the frontend presets where it more logically belongs. This separation of concerns makes the codebase more maintainable and allows for better modularity of AI features.

blocksuite/affine/block-root/src/edgeless/edgeless-builtin-spec.ts

@@ -9,7 +9,6 @@ import type { ExtensionType } from '@blocksuite/store';
 import { EdgelessRootBlockSpec } from './edgeless-root-spec.js';
 import { BrushTool } from './gfx-tool/brush-tool.js';
 import { ConnectorTool } from './gfx-tool/connector-tool.js';
-import { CopilotTool } from './gfx-tool/copilot-tool.js';
 import { DefaultTool } from './gfx-tool/default-tool.js';
 import { MindMapIndicatorOverlay } from './gfx-tool/default-tool-ext/mind-map-ext/indicator-overlay.js';
 import { EmptyTool } from './gfx-tool/empty-tool.js';
@@ -33,7 +32,6 @@ export const EdgelessToolExtension: ExtensionType[] = [
   NoteTool,
   BrushTool,
   ConnectorTool,
-  CopilotTool,
   TemplateTool,
   EmptyTool,
   FrameTool,

blocksuite/affine/block-root/src/edgeless/gfx-tool/index.ts

@@ -1,6 +1,5 @@
 export { BrushTool } from './brush-tool.js';
 export { ConnectorTool, type ConnectorToolOptions } from './connector-tool.js';
-export { CopilotTool } from './copilot-tool.js';
 export { DefaultTool } from './default-tool.js';
 export { EmptyTool } from './empty-tool.js';
 export { EraserTool } from './eraser-tool.js';

blocksuite/affine/block-root/src/edgeless/index.ts

@@ -6,4 +6,5 @@ export { EdgelessRootPreviewBlockComponent } from './edgeless-root-preview-block
 export { EdgelessRootService } from './edgeless-root-service.js';
 export * from './gfx-tool';
 export * from './utils/clipboard-utils.js';
+export { sortEdgelessElements } from './utils/clone-utils.js';
 export { isCanvasElement } from './utils/query.js';

blocksuite/affine/block-root/src/effects.ts

@@ -75,17 +75,12 @@ import { EdgelessTemplatePanel } from './edgeless/components/toolbar/template/te
 import { EdgelessTemplateButton } from './edgeless/components/toolbar/template/template-tool-button.js';
 import { EdgelessTextMenu } from './edgeless/components/toolbar/text/text-menu.js';
 import {
-  AFFINE_AI_PANEL_WIDGET,
-  AFFINE_EDGELESS_COPILOT_WIDGET,
   AFFINE_EMBED_CARD_TOOLBAR_WIDGET,
   AFFINE_FORMAT_BAR_WIDGET,
-  AffineAIPanelWidget,
   AffineFormatBarWidget,
   AffineImageToolbarWidget,
   AffineModalWidget,
   EDGELESS_TOOLBAR_WIDGET,
-  EdgelessCopilotToolbarEntry,
-  EdgelessCopilotWidget,
   EdgelessRootBlockComponent,
   EdgelessRootPreviewBlockComponent,
   EmbedCardToolbar,
@@ -93,16 +88,6 @@ import {
   PageRootBlockComponent,
   PreviewRootBlockComponent,
 } from './index.js';
-import { AIPanelDivider } from './widgets/ai-panel/components/divider.js';
-import { AIFinishTip } from './widgets/ai-panel/components/finish-tip.js';
-import { GeneratingPlaceholder } from './widgets/ai-panel/components/generating-placeholder.js';
-import {
-  AIPanelAnswer,
-  AIPanelError,
-  AIPanelGenerating,
-  AIPanelInput,
-} from './widgets/ai-panel/components/index.js';
-import { EdgelessCopilotPanel } from './widgets/edgeless-copilot-panel/index.js';
 import {
   AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
   AffineEdgelessZoomToolbarWidget,
@@ -154,7 +139,6 @@ export function effects() {
   registerEdgelessToolbarComponents();
   registerEdgelessPanelComponents();
   registerEdgelessEditorComponents();
-  registerAIComponents();
   registerMiscComponents();
 }
 
@@ -169,7 +153,6 @@ function registerRootComponents() {
 }
 
 function registerWidgets() {
-  customElements.define(AFFINE_AI_PANEL_WIDGET, AffineAIPanelWidget);
   customElements.define(AFFINE_EMBED_CARD_TOOLBAR_WIDGET, EmbedCardToolbar);
   customElements.define(AFFINE_INNER_MODAL_WIDGET, AffineInnerModalWidget);
   customElements.define(AFFINE_MODAL_WIDGET, AffineModalWidget);
@@ -177,7 +160,6 @@ function registerWidgets() {
     AFFINE_PAGE_DRAGGING_AREA_WIDGET,
     AffinePageDraggingAreaWidget
   );
-  customElements.define(AFFINE_EDGELESS_COPILOT_WIDGET, EdgelessCopilotWidget);
   customElements.define(AFFINE_IMAGE_TOOLBAR_WIDGET, AffineImageToolbarWidget);
   customElements.define(AFFINE_SLASH_MENU_WIDGET, AffineSlashMenuWidget);
   customElements.define(
@@ -295,16 +277,6 @@ function registerEdgelessEditorComponents() {
   customElements.define('edgeless-text-editor', EdgelessTextEditor);
 }
 
-function registerAIComponents() {
-  customElements.define('generating-placeholder', GeneratingPlaceholder);
-  customElements.define('ai-finish-tip', AIFinishTip);
-  customElements.define('ai-panel-divider', AIPanelDivider);
-  customElements.define('ai-panel-answer', AIPanelAnswer);
-  customElements.define('ai-panel-input', AIPanelInput);
-  customElements.define('ai-panel-generating', AIPanelGenerating);
-  customElements.define('ai-panel-error', AIPanelError);
-}
-
 function registerMiscComponents() {
   // Modal and menu components
   customElements.define('affine-custom-modal', AffineCustomModal);
@@ -350,13 +322,6 @@ function registerMiscComponents() {
     EdgelessSelectedRectWidget
   );
 
-  // Copilot components
-  customElements.define('edgeless-copilot-panel', EdgelessCopilotPanel);
-  customElements.define(
-    'edgeless-copilot-toolbar-entry',
-    EdgelessCopilotToolbarEntry
-  );
-
   // Mindmap components
   customElements.define('mindmap-import-placeholder', MindMapPlaceholder);
 

blocksuite/affine/block-root/src/widgets/index.ts

@@ -1,17 +1,4 @@
 export { EDGELESS_TOOLBAR_WIDGET } from '../edgeless/components/toolbar/edgeless-toolbar.js';
-export {
-  AFFINE_AI_PANEL_WIDGET,
-  AffineAIPanelWidget,
-} from './ai-panel/ai-panel.js';
-export {
-  type AffineAIPanelState,
-  type AffineAIPanelWidgetConfig,
-} from './ai-panel/type.js';
-export {
-  AFFINE_EDGELESS_COPILOT_WIDGET,
-  EdgelessCopilotWidget,
-} from './edgeless-copilot/index.js';
-export { EdgelessCopilotToolbarEntry } from './edgeless-copilot-panel/toolbar-entry.js';
 export { AffineEdgelessZoomToolbarWidget } from './edgeless-zoom-toolbar/index.js';
 export {
   EDGELESS_ELEMENT_TOOLBAR_WIDGET,
@@ -53,4 +40,5 @@ export {
   type AffineSlashSubMenu,
 } from './slash-menu/index.js';
 export { AffineSurfaceRefToolbar } from './surface-ref-toolbar/surface-ref-toolbar.js';
+export * from './viewport-overlay/viewport-overlay.js';
 export { AffineFrameTitleWidget } from '@blocksuite/affine-widget-frame-title';

blocksuite/blocks/src/index.ts

@@ -21,6 +21,7 @@ export * from '@blocksuite/affine-block-surface-ref';
 export * from '@blocksuite/affine-block-table';
 export {
   type AIError,
+  AIErrorType,
   type AIItemConfig,
   type AIItemGroupConfig,
   AIItemList,
@@ -84,6 +85,7 @@ export {
   FontFamilyVariables,
   SizeVariables,
   StyleVariables,
+  unsafeCSSVar,
   unsafeCSSVarV2,
 } from '@blocksuite/affine-shared/theme';
 export { type AffineTextAttributes } from '@blocksuite/affine-shared/types';
@@ -93,17 +95,21 @@ export {
   createSignalFromObservable,
   findNoteBlockModel,
   getLastNoteBlock,
+  getPageRootByElement,
   isInsideEdgelessEditor,
   isInsidePageEditor,
   matchModels,
+  MOUSE_BUTTON,
   on,
   once,
   openFileOrFiles,
   printToPdf,
   referenceToNode,
+  requestConnectedFrame,
   type Signal,
   SpecBuilder,
   SpecProvider,
+  stopPropagation,
 } from '@blocksuite/affine-shared/utils';
 export type { DragBlockPayload } from '@blocksuite/affine-widget-drag-handle';
 

packages/frontend/core/src/blocksuite/blocks/ai-chat-block/components/ai-chat-messages.ts

@@ -1,6 +1,6 @@
 import type { TextRendererOptions } from '@affine/core/blocksuite/presets';
+import type { AffineAIPanelState } from '@affine/core/blocksuite/presets/ai/widgets/ai-panel/type';
 import type { EditorHost } from '@blocksuite/affine/block-std';
-import type { AffineAIPanelState } from '@blocksuite/affine/blocks';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';

packages/frontend/core/src/blocksuite/presets/_common/components/text-renderer.ts

@@ -3,10 +3,6 @@ import {
   type EditorHost,
   ShadowlessElement,
 } from '@blocksuite/affine/block-std';
-import type {
-  AffineAIPanelState,
-  AffineAIPanelWidgetConfig,
-} from '@blocksuite/affine/blocks';
 import {
   CodeBlockComponent,
   codeBlockWrapMiddleware,
@@ -32,6 +28,10 @@ import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { keyed } from 'lit/directives/keyed.js';
 
+import type {
+  AffineAIPanelState,
+  AffineAIPanelWidgetConfig,
+} from '../../ai/widgets/ai-panel/type';
 import { CustomPageEditorBlockSpecs } from '../utils/custom-specs';
 import { markDownToDoc } from '../utils/markdown-utils';
 

packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-toolbar.ts

@@ -4,7 +4,6 @@ import {
   TextSelection,
 } from '@blocksuite/affine/block-std';
 import {
-  type AffineAIPanelWidgetConfig,
   type AIItemGroupConfig,
   createLitPortal,
 } from '@blocksuite/affine/blocks';
@@ -16,6 +15,7 @@ import { property } from 'lit/decorators.js';
 import { AIProvider } from '../../provider';
 import { getAIPanelWidget } from '../../utils/ai-widgets';
 import { extractSelectedContent } from '../../utils/extract';
+import type { AffineAIPanelWidgetConfig } from '../../widgets/ai-panel/type';
 
 export class AskAIToolbarButton extends WithDisposable(LitElement) {
   static override styles = css`

packages/frontend/core/src/blocksuite/presets/ai/actions/answer-renderer.ts

@@ -1,8 +1,5 @@
 import type { EditorHost } from '@blocksuite/affine/block-std';
-import type {
+import type { MindmapElementModel } from '@blocksuite/affine/blocks';
-  AffineAIPanelWidget,
-  MindmapElementModel,
-} from '@blocksuite/affine/blocks';
 
 import { createTextRenderer } from '../../_common';
 import {
@@ -13,6 +10,7 @@ import { createSlidesRenderer } from '../messages/slides-renderer';
 import { createIframeRenderer, createImageRenderer } from '../messages/wrapper';
 import type { AIContext } from '../utils/context';
 import { isMindmapChild, isMindMapRoot } from '../utils/edgeless';
+import type { AffineAIPanelWidget } from '../widgets/ai-panel/ai-panel';
 import { IMAGE_ACTIONS } from './consts';
 import { responseToExpandMindmap } from './edgeless-response';
 

packages/frontend/core/src/blocksuite/presets/ai/actions/doc-handler.ts

@@ -1,6 +1,5 @@
 import { type EditorHost, TextSelection } from '@blocksuite/affine/block-std';
 import {
-  type AffineAIPanelWidget,
   type AIError,
   type AIItemGroupConfig,
   AIStarIconWithAnimation,
@@ -26,6 +25,7 @@ import {
   getSelections,
   selectAboveBlocks,
 } from '../utils/selection-utils';
+import type { AffineAIPanelWidget } from '../widgets/ai-panel/ai-panel';
 import { actionToAnswerRenderer } from './answer-renderer';
 
 export function bindTextStream(

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

@@ -3,11 +3,7 @@ import {
   GfxControllerIdentifier,
   type GfxModel,
 } from '@blocksuite/affine/block-std/gfx';
-import type {
+import type { AIError } from '@blocksuite/affine/blocks';
-  AffineAIPanelWidget,
-  AIError,
-  EdgelessCopilotWidget,
-} from '@blocksuite/affine/blocks';
 import {
   CodeBlockModel,
   EdgelessTextBlockModel,
@@ -40,6 +36,8 @@ import {
   getSelectedNoteAnchor,
   getSelections,
 } from '../utils/selection-utils';
+import type { AffineAIPanelWidget } from '../widgets/ai-panel/ai-panel';
+import type { EdgelessCopilotWidget } from '../widgets/edgeless-copilot';
 import { actionToAnswerRenderer } from './answer-renderer';
 import { EXCLUDING_COPY_ACTIONS } from './consts';
 import { bindTextStream } from './doc-handler';

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

@@ -1,9 +1,7 @@
 import type { EditorHost } from '@blocksuite/affine/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/affine/block-std/gfx';
 import type {
-  AffineAIPanelWidget,
   AIItemConfig,
-  EdgelessCopilotWidget,
   EdgelessElementToolbarWidget,
   MindmapElementModel,
   ShapeElementModel,
@@ -44,6 +42,8 @@ import {
   getSurfaceElementFromEditor,
 } from '../utils/selection-utils';
 import { createTemplateJob } from '../utils/template-job';
+import type { AffineAIPanelWidget } from '../widgets/ai-panel/ai-panel';
+import type { EdgelessCopilotWidget } from '../widgets/edgeless-copilot';
 import { EXCLUDING_INSERT_ACTIONS, generatingStages } from './consts';
 
 type FinishConfig = Exclude<

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

@@ -2,8 +2,6 @@ import { AINetworkSearchService } from '@affine/core/modules/ai-button/services/
 import type { EditorHost } from '@blocksuite/affine/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/affine/block-std/gfx';
 import {
-  type AffineAIPanelWidget,
-  type AffineAIPanelWidgetConfig,
   type AIItemConfig,
   ImageBlockModel,
   isInsideEdgelessEditor,
@@ -42,6 +40,8 @@ import { AIContext } from './utils/context';
 import { findNoteBlockModel } from './utils/edgeless';
 import { copyTextAnswer } from './utils/editor-actions';
 import { getSelections } from './utils/selection-utils';
+import type { AffineAIPanelWidget } from './widgets/ai-panel/ai-panel';
+import type { AffineAIPanelWidgetConfig } from './widgets/ai-panel/type';
 
 function asCaption<T extends keyof BlockSuitePresets.AIActions>(
   host: EditorHost,

packages/frontend/core/src/blocksuite/presets/ai/ai-spec.ts

@@ -3,15 +3,11 @@ import {
   WidgetViewExtension,
 } from '@blocksuite/affine/block-std';
 import {
-  AFFINE_AI_PANEL_WIDGET,
-  AFFINE_EDGELESS_COPILOT_WIDGET,
-  AffineAIPanelWidget,
   AffineCodeToolbarWidget,
   AffineFormatBarWidget,
   AffineImageToolbarWidget,
   AffineSlashMenuWidget,
   CodeBlockSpec,
-  EdgelessCopilotWidget,
   EdgelessElementToolbarWidget,
   EdgelessRootBlockSpec,
   ImageBlockSpec,
@@ -34,6 +30,15 @@ import { setupFormatBarAIEntry } from './entries/format-bar/setup-format-bar';
 import { setupImageToolbarAIEntry } from './entries/image-toolbar/setup-image-toolbar';
 import { setupSlashMenuAIEntry } from './entries/slash-menu/setup-slash-menu';
 import { setupSpaceAIEntry } from './entries/space/setup-space';
+import { CopilotTool } from './tool/copilot-tool';
+import {
+  AFFINE_AI_PANEL_WIDGET,
+  AffineAIPanelWidget,
+} from './widgets/ai-panel/ai-panel';
+import {
+  AFFINE_EDGELESS_COPILOT_WIDGET,
+  EdgelessCopilotWidget,
+} from './widgets/edgeless-copilot';
 
 function getAIPageRootWatcher(framework: FrameworkProvider) {
   class AIPageRootWatcher extends BlockServiceWatcher {
@@ -118,6 +123,7 @@ export function createAIEdgelessRootBlockSpec(
 ): ExtensionType[] {
   return [
     ...EdgelessRootBlockSpec,
+    CopilotTool,
     aiPanelWidget,
     edgelessCopilotWidget,
     getAIEdgelessRootWatcher(framework),

packages/frontend/core/src/blocksuite/presets/ai/entries/edgeless/index.ts

@@ -1,11 +1,9 @@
 import type {
   AIItemGroupConfig,
   DocMode,
-  EdgelessCopilotWidget,
   EdgelessElementToolbarWidget,
   EdgelessRootBlockComponent,
 } from '@blocksuite/affine/blocks';
-import { EdgelessCopilotToolbarEntry } from '@blocksuite/affine/blocks';
 import { noop } from '@blocksuite/affine/global/utils';
 import { html } from 'lit';
 
@@ -13,6 +11,8 @@ import { AIProvider } from '../../provider';
 import { getAIPanelWidget } from '../../utils/ai-widgets';
 import { getEdgelessCopilotWidget } from '../../utils/edgeless';
 import { extractSelectedContent } from '../../utils/extract';
+import type { EdgelessCopilotWidget } from '../../widgets/edgeless-copilot';
+import { EdgelessCopilotToolbarEntry } from '../../widgets/edgeless-copilot-panel/toolbar-entry';
 import { edgelessAIGroups } from './actions-config';
 
 noop(EdgelessCopilotToolbarEntry);

packages/frontend/core/src/blocksuite/presets/ai/entries/slash-menu/setup-slash-menu.ts

@@ -1,6 +1,4 @@
 import {
-  AFFINE_AI_PANEL_WIDGET,
-  type AffineAIPanelWidget,
   type AffineSlashMenuActionItem,
   type AffineSlashMenuContext,
   type AffineSlashMenuItem,
@@ -17,6 +15,10 @@ import { html } from 'lit';
 import { pageAIGroups } from '../../_common/config';
 import { handleInlineAskAIAction } from '../../actions/doc-handler';
 import { AIProvider } from '../../provider';
+import {
+  AFFINE_AI_PANEL_WIDGET,
+  type AffineAIPanelWidget,
+} from '../../widgets/ai-panel/ai-panel';
 
 export function setupSlashMenuAIEntry(slashMenu: AffineSlashMenuWidget) {
   const AIItems = pageAIGroups.map(group => group.items).flat();

packages/frontend/core/src/blocksuite/presets/ai/entries/space/setup-space.ts

@@ -1,8 +1,8 @@
 import { TextSelection } from '@blocksuite/affine/block-std';
-import type { AffineAIPanelWidget } from '@blocksuite/affine/blocks';
 
 import { handleInlineAskAIAction } from '../../actions/doc-handler';
 import { AIProvider } from '../../provider';
+import type { AffineAIPanelWidget } from '../../widgets/ai-panel/ai-panel';
 
 export function setupSpaceAIEntry(panel: AffineAIPanelWidget) {
   panel.handleEvent('keyDown', ctx => {

packages/frontend/core/src/blocksuite/presets/ai/messages/mindmap.ts

@@ -1,13 +1,11 @@
 import type { EditorHost } from '@blocksuite/affine/block-std';
-import type {
+import type { MindmapStyle } from '@blocksuite/affine/blocks';
-  AffineAIPanelWidgetConfig,
-  MindmapStyle,
-} from '@blocksuite/affine/blocks';
 import { html, nothing } from 'lit';
 
 import { markdownToMindmap } from '../mini-mindmap';
 import { getAIPanelWidget } from '../utils/ai-widgets';
 import type { AIContext } from '../utils/context';
+import type { AffineAIPanelWidgetConfig } from '../widgets/ai-panel/type';
 
 export const createMindmapRenderer: (
   host: EditorHost,

packages/frontend/core/src/blocksuite/presets/ai/messages/slides-renderer.ts

@@ -1,9 +1,6 @@
 import { WorkspaceImpl } from '@affine/core/modules/workspace/impls/workspace';
 import { BlockStdScope, type EditorHost } from '@blocksuite/affine/block-std';
-import {
+import { SpecProvider } from '@blocksuite/affine/blocks';
-  type AffineAIPanelWidgetConfig,
-  SpecProvider,
-} from '@blocksuite/affine/blocks';
 import { AffineSchemas } from '@blocksuite/affine/blocks/schemas';
 import { WithDisposable } from '@blocksuite/affine/global/utils';
 import { Schema, type Store } from '@blocksuite/affine/store';
@@ -14,6 +11,7 @@ import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 import { PPTBuilder } from '../slides/index';
 import { getAIPanelWidget } from '../utils/ai-widgets';
 import type { AIContext } from '../utils/context';
+import type { AffineAIPanelWidgetConfig } from '../widgets/ai-panel/type';
 
 export const createSlidesRenderer: (
   host: EditorHost,

packages/frontend/core/src/blocksuite/presets/ai/messages/wrapper.ts

@@ -1,10 +1,10 @@
 import type { EditorHost } from '@blocksuite/affine/block-std';
-import type { AffineAIPanelWidgetConfig } from '@blocksuite/affine/blocks';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { getAIPanelWidget } from '../utils/ai-widgets';
 import { preprocessHtml } from '../utils/html';
+import type { AffineAIPanelWidgetConfig } from '../widgets/ai-panel/type';
 
 type AIAnswerWrapperOptions = {
   height: number;

packages/frontend/core/src/blocksuite/presets/ai/tool/copilot-tool.ts

@@ -1,21 +1,21 @@
 /* oxlint-disable @typescript-eslint/no-non-null-assertion */
-import type { PointerEventState } from '@blocksuite/block-std';
+import type { PointerEventState } from '@blocksuite/affine/block-std';
 import {
   BaseTool,
   type GfxModel,
   MouseButton,
-} from '@blocksuite/block-std/gfx';
+} from '@blocksuite/affine/block-std/gfx';
-import { IS_MAC } from '@blocksuite/global/env';
+import { IS_MAC } from '@blocksuite/affine/global/env';
 import {
   Bound,
   getCommonBoundWithRotation,
   Slot,
-} from '@blocksuite/global/utils';
+} from '@blocksuite/affine/global/utils';
 
 import {
   AFFINE_AI_PANEL_WIDGET,
   type AffineAIPanelWidget,
-} from '../../widgets/ai-panel/ai-panel.js';
+} from '../widgets/ai-panel/ai-panel.js';
 
 export class CopilotTool extends BaseTool {
   static override toolName: string = 'copilot';

packages/frontend/core/src/blocksuite/presets/ai/utils/ai-widgets.ts

@@ -1,9 +1,10 @@
 import type { EditorHost } from '@blocksuite/affine/block-std';
+import { assertExists } from '@blocksuite/affine/global/utils';
+
 import {
   AFFINE_AI_PANEL_WIDGET,
   AffineAIPanelWidget,
-} from '@blocksuite/affine/blocks';
+} from '../widgets/ai-panel/ai-panel';
-import { assertExists } from '@blocksuite/affine/global/utils';
 
 export const getAIPanelWidget = (host: EditorHost): AffineAIPanelWidget => {
   const rootBlockId = host.doc.root?.id;

packages/frontend/core/src/blocksuite/presets/ai/utils/edgeless.ts

@@ -1,8 +1,6 @@
 import type { BlockComponent, EditorHost } from '@blocksuite/affine/block-std';
 import type { GfxModel } from '@blocksuite/affine/block-std/gfx';
 import {
-  AFFINE_EDGELESS_COPILOT_WIDGET,
-  type EdgelessCopilotWidget,
   matchModels,
   MindmapElementModel,
   NoteBlockModel,
@@ -11,6 +9,11 @@ import {
   SurfaceBlockModel,
 } from '@blocksuite/affine/blocks';
 
+import {
+  AFFINE_EDGELESS_COPILOT_WIDGET,
+  type EdgelessCopilotWidget,
+} from '../widgets/edgeless-copilot';
+
 export function mindMapToMarkdown(mindmap: MindmapElementModel) {
   let markdownStr = '';
 

packages/frontend/core/src/blocksuite/presets/ai/utils/editor-actions.ts

@@ -5,7 +5,6 @@ import {
   SurfaceSelection,
   type TextSelection,
 } from '@blocksuite/affine/block-std';
-import type { AffineAIPanelWidget } from '@blocksuite/affine/blocks';
 import {
   defaultImageProxyMiddleware,
   deleteTextCommand,
@@ -18,6 +17,7 @@ import {
   markDownToDoc,
   markdownToSnapshot,
 } from '../../_common';
+import type { AffineAIPanelWidget } from '../widgets/ai-panel/ai-panel';
 
 const getNoteId = (blockElement: BlockComponent) => {
   let element = blockElement;

packages/frontend/core/src/blocksuite/presets/ai/utils/selection-utils.ts

@@ -4,7 +4,6 @@ import {
   type GfxModel,
 } from '@blocksuite/affine/block-std/gfx';
 import {
-  type CopilotTool,
   DatabaseBlockModel,
   type FrameBlockModel,
   getBlockSelectionsCommand,
@@ -26,6 +25,7 @@ import {
 } from '@blocksuite/affine/store';
 
 import { getContentFromSlice } from '../../_common';
+import type { CopilotTool } from '../tool/copilot-tool';
 import { getEdgelessCopilotWidget } from './edgeless';
 
 export function getEdgelessRootFromEditor(editor: EditorHost) {

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

@@ -1,17 +1,18 @@
-import type { AIError } from '@blocksuite/affine-components/ai-item';
+import { WidgetComponent } from '@blocksuite/affine/block-std';
+import { GfxControllerIdentifier } from '@blocksuite/affine/block-std/gfx';
 import {
+  AFFINE_FORMAT_BAR_WIDGET,
+  AFFINE_VIEWPORT_OVERLAY_WIDGET,
+  type AffineViewportOverlayWidget,
+  type AIError,
   DocModeProvider,
-  NotificationProvider,
-  ThemeProvider,
-} from '@blocksuite/affine-shared/services';
-import {
   getPageRootByElement,
+  NotificationProvider,
   stopPropagation,
-} from '@blocksuite/affine-shared/utils';
+  ThemeProvider,
-import { WidgetComponent } from '@blocksuite/block-std';
+} from '@blocksuite/affine/blocks';
-import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
+import { assertExists } from '@blocksuite/affine/global/utils';
-import { assertExists } from '@blocksuite/global/utils';
+import type { BaseSelection } from '@blocksuite/affine/store';
-import type { BaseSelection } from '@blocksuite/store';
 import {
   autoPlacement,
   autoUpdate,
@@ -26,11 +27,6 @@ import { css, html, nothing, type PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 
-import { AFFINE_FORMAT_BAR_WIDGET } from '../format-bar/format-bar.js';
-import {
-  AFFINE_VIEWPORT_OVERLAY_WIDGET,
-  type AffineViewportOverlayWidget,
-} from '../viewport-overlay/viewport-overlay.js';
 import type { AIPanelGenerating } from './components/index.js';
 import type { AffineAIPanelState, AffineAIPanelWidgetConfig } from './type.js';
 

packages/frontend/core/src/blocksuite/presets/ai/widgets/ai-panel/components/divider.ts

@@ -1,4 +1,4 @@
-import { WithDisposable } from '@blocksuite/global/utils';
+import { WithDisposable } from '@blocksuite/affine/global/utils';
 import { css, html, LitElement } from 'lit';
 
 export class AIPanelDivider extends WithDisposable(LitElement) {

packages/frontend/core/src/blocksuite/presets/ai/widgets/ai-panel/components/finish-tip.ts

@@ -1,11 +1,11 @@
+import type { EditorHost } from '@blocksuite/affine/block-std';
 import {
   AIDoneIcon,
   CopyIcon,
+  NotificationProvider,
   WarningIcon,
-} from '@blocksuite/affine-components/icons';
+} from '@blocksuite/affine/blocks';
-import { NotificationProvider } from '@blocksuite/affine-shared/services';
+import { WithDisposable } from '@blocksuite/affine/global/utils';
-import type { EditorHost } from '@blocksuite/block-std';
-import { WithDisposable } from '@blocksuite/global/utils';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { property, state } from 'lit/decorators.js';

packages/frontend/core/src/blocksuite/presets/ai/widgets/ai-panel/components/generating-placeholder.ts

@@ -1,10 +1,10 @@
 import {
+  ColorScheme,
   DarkLoadingIcon,
   LightLoadingIcon,
-} from '@blocksuite/affine-components/icons';
+  unsafeCSSVar,
-import { ColorScheme } from '@blocksuite/affine-model';
+} from '@blocksuite/affine/blocks';
-import { unsafeCSSVar } from '@blocksuite/affine-shared/theme';
+import { WithDisposable } from '@blocksuite/affine/global/utils';
-import { WithDisposable } from '@blocksuite/global/utils';
 import { baseTheme } from '@toeverything/theme';
 import {
   css,

packages/frontend/core/src/blocksuite/presets/ai/widgets/ai-panel/components/state/answer.ts

@@ -1,5 +1,5 @@
-import type { EditorHost } from '@blocksuite/block-std';
+import type { EditorHost } from '@blocksuite/affine/block-std';
-import { WithDisposable } from '@blocksuite/global/utils';
+import { WithDisposable } from '@blocksuite/affine/global/utils';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';

packages/frontend/core/src/blocksuite/presets/ai/widgets/ai-panel/components/state/error.ts

@@ -1,9 +1,6 @@
-import {
+import type { EditorHost } from '@blocksuite/affine/block-std';
-  AIErrorType,
+import { AIErrorType, type AIItemGroupConfig } from '@blocksuite/affine/blocks';
-  type AIItemGroupConfig,
+import { WithDisposable } from '@blocksuite/affine/global/utils';
-} from '@blocksuite/affine-components/ai-item';
-import type { EditorHost } from '@blocksuite/block-std';
-import { WithDisposable } from '@blocksuite/global/utils';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';

packages/frontend/core/src/blocksuite/presets/ai/widgets/ai-panel/components/state/generating.ts

@@ -1,9 +1,6 @@
-import {
+import type { ColorScheme } from '@blocksuite/affine/blocks';
-  AIStarIconWithAnimation,
+import { AIStarIconWithAnimation, AIStopIcon } from '@blocksuite/affine/blocks';
-  AIStopIcon,
+import { WithDisposable } from '@blocksuite/affine/global/utils';
-} from '@blocksuite/affine-components/icons';
-import type { ColorScheme } from '@blocksuite/affine-model';
-import { WithDisposable } from '@blocksuite/global/utils';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';

packages/frontend/core/src/blocksuite/presets/ai/widgets/ai-panel/components/state/input.ts

@@ -1,7 +1,9 @@
-import { AIStarIcon } from '@blocksuite/affine-components/icons';
+import {
-import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+  AIStarIcon,
-import { stopPropagation } from '@blocksuite/affine-shared/utils';
+  stopPropagation,
-import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
+  unsafeCSSVarV2,
+} from '@blocksuite/affine/blocks';
+import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/utils';
 import { PublishIcon, SendIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';

packages/frontend/core/src/blocksuite/presets/ai/widgets/ai-panel/type.ts

@@ -1,7 +1,4 @@
-import type {
+import type { AIError, AIItemGroupConfig } from '@blocksuite/affine/blocks';
-  AIError,
-  AIItemGroupConfig,
-} from '@blocksuite/affine-components/ai-item';
 import type { Signal } from '@preact/signals-core';
 import type { nothing, TemplateResult } from 'lit';
 

packages/frontend/core/src/blocksuite/presets/ai/widgets/ai-panel/utils.ts

@@ -1,6 +1,6 @@
-import type { AIItemGroupConfig } from '@blocksuite/affine-components/ai-item';
+import type { EditorHost } from '@blocksuite/affine/block-std';
-import { isInsidePageEditor } from '@blocksuite/affine-shared/utils';
+import type { AIItemGroupConfig } from '@blocksuite/affine/blocks';
-import type { EditorHost } from '@blocksuite/block-std';
+import { isInsidePageEditor } from '@blocksuite/affine/blocks';
 
 export function filterAIItemGroup(
   host: EditorHost,

packages/frontend/core/src/blocksuite/presets/ai/widgets/edgeless-copilot-panel/index.ts

@@ -1,8 +1,7 @@
-import type { AIItemGroupConfig } from '@blocksuite/affine-components/ai-item';
+import type { EditorHost } from '@blocksuite/affine/block-std';
-import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
+import type { AIItemGroupConfig } from '@blocksuite/affine/blocks';
-import { on, stopPropagation } from '@blocksuite/affine-shared/utils';
+import { on, scrollbarStyle, stopPropagation } from '@blocksuite/affine/blocks';
-import type { EditorHost } from '@blocksuite/block-std';
+import { WithDisposable } from '@blocksuite/affine/global/utils';
-import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 

packages/frontend/core/src/blocksuite/presets/ai/widgets/edgeless-copilot-panel/toolbar-entry.ts

@@ -1,16 +1,15 @@
-import type { AIItemGroupConfig } from '@blocksuite/affine-components/ai-item';
+import type { EditorHost } from '@blocksuite/affine/block-std';
-import { AIStarIcon } from '@blocksuite/affine-components/icons';
-import type { EditorHost } from '@blocksuite/block-std';
 import {
   GfxControllerIdentifier,
   isGfxGroupCompatibleModel,
-} from '@blocksuite/block-std/gfx';
+} from '@blocksuite/affine/block-std/gfx';
-import { WithDisposable } from '@blocksuite/global/utils';
+import type { AIItemGroupConfig } from '@blocksuite/affine/blocks';
+import { AIStarIcon, sortEdgelessElements } from '@blocksuite/affine/blocks';
+import { WithDisposable } from '@blocksuite/affine/global/utils';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { CopilotTool } from '../../edgeless/gfx-tool/copilot-tool.js';
+import type { CopilotTool } from '../../tool/copilot-tool';
-import { sortEdgelessElements } from '../../edgeless/utils/clone-utils.js';
 
 export class EdgelessCopilotToolbarEntry extends WithDisposable(LitElement) {
   static override styles = css`

packages/frontend/core/src/blocksuite/presets/ai/widgets/edgeless-copilot/index.ts

@@ -1,13 +1,18 @@
-import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
+import { WidgetComponent } from '@blocksuite/affine/block-std';
-import type { AIItemGroupConfig } from '@blocksuite/affine-components/ai-item';
+import { GfxControllerIdentifier } from '@blocksuite/affine/block-std/gfx';
-import type { RootBlockModel } from '@blocksuite/affine-model';
+import type {
+  AIItemGroupConfig,
+  RootBlockModel,
+} from '@blocksuite/affine/blocks';
 import {
+  EdgelessLegacySlotIdentifier,
   MOUSE_BUTTON,
   requestConnectedFrame,
-} from '@blocksuite/affine-shared/utils';
+} from '@blocksuite/affine/blocks';
-import { WidgetComponent } from '@blocksuite/block-std';
+import {
-import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
+  Bound,
-import { Bound, getCommonBoundWithRotation } from '@blocksuite/global/utils';
+  getCommonBoundWithRotation,
+} from '@blocksuite/affine/global/utils';
 import {
   autoUpdate,
   computePosition,

packages/frontend/core/src/blocksuite/presets/effects.ts

@@ -42,6 +42,25 @@ import { registerMiniMindmapBlocks } from './ai/mini-mindmap';
 import { ChatBlockInput } from './ai/peek-view/chat-block-input';
 import { AIChatBlockPeekView } from './ai/peek-view/chat-block-peek-view';
 import { DateTime } from './ai/peek-view/date-time';
+import {
+  AFFINE_AI_PANEL_WIDGET,
+  AffineAIPanelWidget,
+} from './ai/widgets/ai-panel/ai-panel';
+import {
+  AIPanelAnswer,
+  AIPanelDivider,
+  AIPanelError,
+  AIPanelGenerating,
+  AIPanelInput,
+} from './ai/widgets/ai-panel/components';
+import { AIFinishTip } from './ai/widgets/ai-panel/components/finish-tip';
+import { GeneratingPlaceholder } from './ai/widgets/ai-panel/components/generating-placeholder';
+import {
+  AFFINE_EDGELESS_COPILOT_WIDGET,
+  EdgelessCopilotWidget,
+} from './ai/widgets/edgeless-copilot';
+import { EdgelessCopilotPanel } from './ai/widgets/edgeless-copilot-panel';
+import { EdgelessCopilotToolbarEntry } from './ai/widgets/edgeless-copilot-panel/toolbar-entry';
 
 export function registerBlocksuitePresetsCustomComponents() {
   registerMiniMindmapBlocks();
@@ -87,4 +106,21 @@ export function registerBlocksuitePresetsCustomComponents() {
   customElements.define('chat-images', ChatImages);
   customElements.define('user-info', UserInfo);
   customElements.define('text-renderer', TextRenderer);
+
+  customElements.define('generating-placeholder', GeneratingPlaceholder);
+  customElements.define('ai-finish-tip', AIFinishTip);
+  customElements.define('ai-panel-divider', AIPanelDivider);
+  customElements.define('ai-panel-answer', AIPanelAnswer);
+  customElements.define('ai-panel-input', AIPanelInput);
+  customElements.define('ai-panel-generating', AIPanelGenerating);
+  customElements.define('ai-panel-error', AIPanelError);
+
+  customElements.define(AFFINE_AI_PANEL_WIDGET, AffineAIPanelWidget);
+  customElements.define(AFFINE_EDGELESS_COPILOT_WIDGET, EdgelessCopilotWidget);
+
+  customElements.define('edgeless-copilot-panel', EdgelessCopilotPanel);
+  customElements.define(
+    'edgeless-copilot-toolbar-entry',
+    EdgelessCopilotToolbarEntry
+  );
 }