refactor(editor): extract ai item component (#9283)

blocksuite/affine/components/package.json

@@ -35,6 +35,7 @@
   },
   "exports": {
     ".": "./src/index.ts",
+    "./ai-item": "./src/ai-item/index.ts",
     "./icons": "./src/icons/index.ts",
     "./peek": "./src/peek/index.ts",
     "./portal": "./src/portal/index.ts",

blocksuite/affine/components/src/ai-item/ai-item-list.ts

@@ -1,4 +1,3 @@
-import { createLitPortal } from '@blocksuite/affine-components/portal';
 import {
   EditorHost,
   PropTypes,
@@ -11,12 +10,10 @@ import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import type { AIItem } from './ai-item.js';
-import {
-  SUBMENU_OFFSET_CROSS_AXIS,
-  SUBMENU_OFFSET_MAIN_AXIS,
-} from './const.js';
-import type { AIItemConfig, AIItemGroupConfig } from './types.js';
+import { createLitPortal } from '../portal';
+import type { AIItem } from './ai-item';
+import { SUBMENU_OFFSET_CROSS_AXIS, SUBMENU_OFFSET_MAIN_AXIS } from './const';
+import type { AIItemConfig, AIItemGroupConfig } from './types';
 
 @requiredProperties({ host: PropTypes.instanceOf(EditorHost) })
 export class AIItemList extends WithDisposable(LitElement) {

blocksuite/affine/components/src/ai-item/ai-item.ts

@@ -1,4 +1,3 @@
-import { ArrowRightIcon, EnterIcon } from '@blocksuite/affine-components/icons';
 import {
   EditorHost,
   PropTypes,
@@ -8,8 +7,9 @@ import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 
-import { menuItemStyles } from './styles.js';
-import type { AIItemConfig } from './types.js';
+import { ArrowRightIcon, EnterIcon } from '../icons';
+import { menuItemStyles } from './styles';
+import type { AIItemConfig } from './types';
 
 @requiredProperties({
   host: PropTypes.instanceOf(EditorHost),

blocksuite/affine/components/src/ai-item/ai-sub-item-list.ts

@@ -1,4 +1,3 @@
-import { EnterIcon } from '@blocksuite/affine-components/icons';
 import {
   EditorHost,
   PropTypes,
@@ -9,8 +8,9 @@ import { baseTheme } from '@toeverything/theme';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { menuItemStyles } from './styles.js';
-import type { AIItemConfig, AISubItemConfig } from './types.js';
+import { EnterIcon } from '../icons';
+import { menuItemStyles } from './styles';
+import type { AIItemConfig, AISubItemConfig } from './types';
 
 @requiredProperties({
   host: PropTypes.instanceOf(EditorHost),

blocksuite/affine/components/src/ai-item/index.ts

@@ -0,0 +1,12 @@
+import { AIItem } from './ai-item';
+import { AIItemList } from './ai-item-list';
+import { AISubItemList } from './ai-sub-item-list';
+
+export * from './ai-item-list.js';
+export * from './types.js';
+
+export function effects() {
+  customElements.define('ai-item-list', AIItemList);
+  customElements.define('ai-item', AIItem);
+  customElements.define('ai-sub-item-list', AISubItemList);
+}

blocksuite/blocks/src/_common/components/ai-item/index.ts

@@ -1,2 +0,0 @@
-export * from './ai-item-list.js';
-export * from './types.js';

blocksuite/blocks/src/_common/components/index.ts

@@ -1 +0,0 @@
-export * from './ai-item/index.js';

blocksuite/blocks/src/effects.ts

@@ -2,6 +2,7 @@ import { effects as blockEmbedEffects } from '@blocksuite/affine-block-embed/eff
 import { effects as blockListEffects } from '@blocksuite/affine-block-list/effects';
 import { effects as blockParagraphEffects } from '@blocksuite/affine-block-paragraph/effects';
 import { effects as blockSurfaceEffects } from '@blocksuite/affine-block-surface/effects';
+import { effects as componentAiItemEffects } from '@blocksuite/affine-components/ai-item';
 import { BlockSelection } from '@blocksuite/affine-components/block-selection';
 import { BlockZeroWidth } from '@blocksuite/affine-components/block-zero-width';
 import { effects as componentCaptionEffects } from '@blocksuite/affine-components/caption';
@@ -23,14 +24,11 @@ import { effects as dataViewEffects } from '@blocksuite/data-view/effects';
 import { effects as inlineEffects } from '@blocksuite/inline/effects';
 import type { BlockModel } from '@blocksuite/store';
 
-import { AIItem } from './_common/components/ai-item/ai-item.js';
-import { AISubItemList } from './_common/components/ai-item/ai-sub-item-list.js';
 import { EmbedCardMoreMenu } from './_common/components/embed-card/embed-card-more-menu-popper.js';
 import { EmbedCardStyleMenu } from './_common/components/embed-card/embed-card-style-popper.js';
 import { EmbedCardEditCaptionEditModal } from './_common/components/embed-card/modal/embed-card-caption-edit-modal.js';
 import { EmbedCardCreateModal } from './_common/components/embed-card/modal/embed-card-create-modal.js';
 import { EmbedCardEditModal } from './_common/components/embed-card/modal/embed-card-edit-modal.js';
-import { AIItemList } from './_common/components/index.js';
 import { registerSpecs } from './_specs/register-specs.js';
 import { AttachmentEdgelessBlockComponent } from './attachment-block/attachment-edgeless-block.js';
 import {
@@ -304,6 +302,7 @@ export function effects() {
   componentToolbarEffects();
   componentDragIndicatorEffects();
   componentToggleButtonEffects();
+  componentAiItemEffects();
 
   widgetScrollAnchoringEffects();
   widgetMobileToolbarEffects();
@@ -421,7 +420,6 @@ export function effects() {
   customElements.define('smooth-corner', SmoothCorner);
   customElements.define('toggle-switch', ToggleSwitch);
   customElements.define('ai-panel-answer', AIPanelAnswer);
-  customElements.define('ai-item-list', AIItemList);
   customElements.define(
     'edgeless-eraser-tool-button',
     EdgelessEraserToolButton
@@ -430,8 +428,6 @@ export function effects() {
   customElements.define('edgeless-frame-tool-button', EdgelessFrameToolButton);
   customElements.define('ai-panel-input', AIPanelInput);
   customElements.define('ai-panel-generating', AIPanelGenerating);
-  customElements.define('ai-item', AIItem);
-  customElements.define('ai-sub-item-list', AISubItemList);
   customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton);
   customElements.define('embed-card-more-menu', EmbedCardMoreMenu);
   customElements.define('edgeless-mindmap-menu', EdgelessMindmapMenu);

blocksuite/blocks/src/index.ts

@@ -7,7 +7,6 @@ import { splitElements } from './root-block/edgeless/utils/clipboard-utils.js';
 import { isCanvasElement } from './root-block/edgeless/utils/query.js';
 
 export * from './_common/adapters/index.js';
-export * from './_common/components/ai-item/index.js';
 export { type NavigatorMode } from './_common/edgeless/frame/consts.js';
 export {
   ExportManager,
@@ -55,6 +54,16 @@ export * from '@blocksuite/affine-block-embed';
 export * from '@blocksuite/affine-block-list';
 export * from '@blocksuite/affine-block-paragraph';
 export * from '@blocksuite/affine-block-surface';
+export {
+  type AIError,
+  type AIItemConfig,
+  type AIItemGroupConfig,
+  AIItemList,
+  type AISubItemConfig,
+  GeneralNetworkError,
+  PaymentRequiredError,
+  UnauthorizedError,
+} from '@blocksuite/affine-components/ai-item';
 export { type MenuOptions } from '@blocksuite/affine-components/context-menu';
 export {
   HoverController,

blocksuite/blocks/src/root-block/widgets/ai-panel/ai-panel.ts

@@ -1,3 +1,4 @@
+import type { AIError } from '@blocksuite/affine-components/ai-item';
 import {
   NotificationProvider,
   ThemeProvider,
@@ -23,7 +24,6 @@ import { css, html, nothing, type PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 
-import type { AIError } from '../../../_common/components/index.js';
 import type { EdgelessRootService } from '../../edgeless/edgeless-root-service.js';
 import { PageRootService } from '../../page/page-root-service.js';
 import { AFFINE_FORMAT_BAR_WIDGET } from '../format-bar/format-bar.js';

blocksuite/blocks/src/root-block/widgets/ai-panel/components/state/error.ts

@@ -1,3 +1,7 @@
+import {
+  AIErrorType,
+  type AIItemGroupConfig,
+} from '@blocksuite/affine-components/ai-item';
 import type { EditorHost } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { baseTheme } from '@toeverything/theme';
@@ -5,10 +9,6 @@ import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 
-import {
-  AIErrorType,
-  type AIItemGroupConfig,
-} from '../../../../../_common/components/index.js';
 import type { AIPanelErrorConfig, CopyConfig } from '../../type.js';
 import { filterAIItemGroup } from '../../utils.js';
 

blocksuite/blocks/src/root-block/widgets/ai-panel/type.ts

@@ -1,9 +1,8 @@
-import type { nothing, TemplateResult } from 'lit';
-
 import type {
   AIError,
   AIItemGroupConfig,
-} from '../../../_common/components/ai-item/types.js';
+} from '@blocksuite/affine-components/ai-item';
+import type { nothing, TemplateResult } from 'lit';
 
 export interface CopyConfig {
   allowed: boolean;

blocksuite/blocks/src/root-block/widgets/ai-panel/utils.ts

@@ -1,8 +1,7 @@
+import type { AIItemGroupConfig } from '@blocksuite/affine-components/ai-item';
 import { isInsidePageEditor } from '@blocksuite/affine-shared/utils';
 import type { EditorHost } from '@blocksuite/block-std';
 
-import type { AIItemGroupConfig } from '../../../_common/components/ai-item/types.js';
-
 export function filterAIItemGroup(
   host: EditorHost,
   configs: AIItemGroupConfig[]

blocksuite/blocks/src/root-block/widgets/edgeless-copilot-panel/index.ts

@@ -1,3 +1,4 @@
+import type { AIItemGroupConfig } from '@blocksuite/affine-components/ai-item';
 import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
 import { on, stopPropagation } from '@blocksuite/affine-shared/utils';
 import type { EditorHost } from '@blocksuite/block-std';
@@ -5,7 +6,6 @@ import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { AIItemGroupConfig } from '../../../_common/components/ai-item/types.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 
 export class EdgelessCopilotPanel extends WithDisposable(LitElement) {

blocksuite/blocks/src/root-block/widgets/edgeless-copilot-panel/toolbar-entry.ts

@@ -1,3 +1,4 @@
+import type { AIItemGroupConfig } from '@blocksuite/affine-components/ai-item';
 import { AIStarIcon } from '@blocksuite/affine-components/icons';
 import type { EditorHost } from '@blocksuite/block-std';
 import { isGfxGroupCompatibleModel } from '@blocksuite/block-std/gfx';
@@ -5,7 +6,6 @@ import { WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import type { AIItemGroupConfig } from '../../../_common/components/ai-item/types.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 import type { CopilotTool } from '../../edgeless/gfx-tool/copilot-tool.js';
 import { sortEdgelessElements } from '../../edgeless/utils/clone-utils.js';

blocksuite/blocks/src/root-block/widgets/edgeless-copilot/index.ts

@@ -1,3 +1,4 @@
+import type { AIItemGroupConfig } from '@blocksuite/affine-components/ai-item';
 import type { RootBlockModel } from '@blocksuite/affine-model';
 import {
   MOUSE_BUTTON,
@@ -18,7 +19,6 @@ import { css, html, nothing } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import type { AIItemGroupConfig } from '../../../_common/components/ai-item/types.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
 import {
   AFFINE_AI_PANEL_WIDGET,