From cd830d6f812a6630e03cbfb95aa7d2da03d85e48 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Tue, 24 Dec 2024 09:41:45 +0000 Subject: [PATCH] refactor(editor): extract ai item component (#9283) --- blocksuite/affine/components/package.json | 1 + .../components/src}/ai-item/ai-item-list.ts | 11 ++++------- .../components/src}/ai-item/ai-item.ts | 6 +++--- .../components/src}/ai-item/ai-sub-item-list.ts | 6 +++--- .../components/src}/ai-item/const.ts | 0 blocksuite/affine/components/src/ai-item/index.ts | 12 ++++++++++++ .../components/src}/ai-item/styles.ts | 0 .../components/src}/ai-item/types.ts | 0 .../blocks/src/_common/components/ai-item/index.ts | 2 -- blocksuite/blocks/src/_common/components/index.ts | 1 - blocksuite/blocks/src/effects.ts | 8 ++------ blocksuite/blocks/src/index.ts | 11 ++++++++++- .../src/root-block/widgets/ai-panel/ai-panel.ts | 2 +- .../widgets/ai-panel/components/state/error.ts | 8 ++++---- .../blocks/src/root-block/widgets/ai-panel/type.ts | 5 ++--- .../blocks/src/root-block/widgets/ai-panel/utils.ts | 3 +-- .../widgets/edgeless-copilot-panel/index.ts | 2 +- .../widgets/edgeless-copilot-panel/toolbar-entry.ts | 2 +- .../src/root-block/widgets/edgeless-copilot/index.ts | 2 +- 19 files changed, 46 insertions(+), 36 deletions(-) rename blocksuite/{blocks/src/_common/components => affine/components/src}/ai-item/ai-item-list.ts (93%) rename blocksuite/{blocks/src/_common/components => affine/components/src}/ai-item/ai-item.ts (90%) rename blocksuite/{blocks/src/_common/components => affine/components/src}/ai-item/ai-sub-item-list.ts (93%) rename blocksuite/{blocks/src/_common/components => affine/components/src}/ai-item/const.ts (100%) create mode 100644 blocksuite/affine/components/src/ai-item/index.ts rename blocksuite/{blocks/src/_common/components => affine/components/src}/ai-item/styles.ts (100%) rename blocksuite/{blocks/src/_common/components => affine/components/src}/ai-item/types.ts (100%) delete mode 100644 blocksuite/blocks/src/_common/components/ai-item/index.ts delete mode 100644 blocksuite/blocks/src/_common/components/index.ts diff --git a/blocksuite/affine/components/package.json b/blocksuite/affine/components/package.json index 974881b0fa..b9f54a00de 100644 --- a/blocksuite/affine/components/package.json +++ b/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", diff --git a/blocksuite/blocks/src/_common/components/ai-item/ai-item-list.ts b/blocksuite/affine/components/src/ai-item/ai-item-list.ts similarity index 93% rename from blocksuite/blocks/src/_common/components/ai-item/ai-item-list.ts rename to blocksuite/affine/components/src/ai-item/ai-item-list.ts index e76a82454d..b667198179 100644 --- a/blocksuite/blocks/src/_common/components/ai-item/ai-item-list.ts +++ b/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) { diff --git a/blocksuite/blocks/src/_common/components/ai-item/ai-item.ts b/blocksuite/affine/components/src/ai-item/ai-item.ts similarity index 90% rename from blocksuite/blocks/src/_common/components/ai-item/ai-item.ts rename to blocksuite/affine/components/src/ai-item/ai-item.ts index 8aa8a396e7..db65b927e2 100644 --- a/blocksuite/blocks/src/_common/components/ai-item/ai-item.ts +++ b/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), diff --git a/blocksuite/blocks/src/_common/components/ai-item/ai-sub-item-list.ts b/blocksuite/affine/components/src/ai-item/ai-sub-item-list.ts similarity index 93% rename from blocksuite/blocks/src/_common/components/ai-item/ai-sub-item-list.ts rename to blocksuite/affine/components/src/ai-item/ai-sub-item-list.ts index 4be353ac18..4a72db8cf2 100644 --- a/blocksuite/blocks/src/_common/components/ai-item/ai-sub-item-list.ts +++ b/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), diff --git a/blocksuite/blocks/src/_common/components/ai-item/const.ts b/blocksuite/affine/components/src/ai-item/const.ts similarity index 100% rename from blocksuite/blocks/src/_common/components/ai-item/const.ts rename to blocksuite/affine/components/src/ai-item/const.ts diff --git a/blocksuite/affine/components/src/ai-item/index.ts b/blocksuite/affine/components/src/ai-item/index.ts new file mode 100644 index 0000000000..2cf08f7d61 --- /dev/null +++ b/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); +} diff --git a/blocksuite/blocks/src/_common/components/ai-item/styles.ts b/blocksuite/affine/components/src/ai-item/styles.ts similarity index 100% rename from blocksuite/blocks/src/_common/components/ai-item/styles.ts rename to blocksuite/affine/components/src/ai-item/styles.ts diff --git a/blocksuite/blocks/src/_common/components/ai-item/types.ts b/blocksuite/affine/components/src/ai-item/types.ts similarity index 100% rename from blocksuite/blocks/src/_common/components/ai-item/types.ts rename to blocksuite/affine/components/src/ai-item/types.ts diff --git a/blocksuite/blocks/src/_common/components/ai-item/index.ts b/blocksuite/blocks/src/_common/components/ai-item/index.ts deleted file mode 100644 index 5842791cd9..0000000000 --- a/blocksuite/blocks/src/_common/components/ai-item/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './ai-item-list.js'; -export * from './types.js'; diff --git a/blocksuite/blocks/src/_common/components/index.ts b/blocksuite/blocks/src/_common/components/index.ts deleted file mode 100644 index 192216662c..0000000000 --- a/blocksuite/blocks/src/_common/components/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ai-item/index.js'; diff --git a/blocksuite/blocks/src/effects.ts b/blocksuite/blocks/src/effects.ts index 8e1b47c739..cb4421b12e 100644 --- a/blocksuite/blocks/src/effects.ts +++ b/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); diff --git a/blocksuite/blocks/src/index.ts b/blocksuite/blocks/src/index.ts index 0645ec53a7..3bafbfa13d 100644 --- a/blocksuite/blocks/src/index.ts +++ b/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, diff --git a/blocksuite/blocks/src/root-block/widgets/ai-panel/ai-panel.ts b/blocksuite/blocks/src/root-block/widgets/ai-panel/ai-panel.ts index ff992cf2d6..046850352a 100644 --- a/blocksuite/blocks/src/root-block/widgets/ai-panel/ai-panel.ts +++ b/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'; diff --git a/blocksuite/blocks/src/root-block/widgets/ai-panel/components/state/error.ts b/blocksuite/blocks/src/root-block/widgets/ai-panel/components/state/error.ts index c073b5cb14..3ea8c75eae 100644 --- a/blocksuite/blocks/src/root-block/widgets/ai-panel/components/state/error.ts +++ b/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'; diff --git a/blocksuite/blocks/src/root-block/widgets/ai-panel/type.ts b/blocksuite/blocks/src/root-block/widgets/ai-panel/type.ts index 45be2e8f3b..a9961c27ba 100644 --- a/blocksuite/blocks/src/root-block/widgets/ai-panel/type.ts +++ b/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; diff --git a/blocksuite/blocks/src/root-block/widgets/ai-panel/utils.ts b/blocksuite/blocks/src/root-block/widgets/ai-panel/utils.ts index c6550e7d58..2979751731 100644 --- a/blocksuite/blocks/src/root-block/widgets/ai-panel/utils.ts +++ b/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[] diff --git a/blocksuite/blocks/src/root-block/widgets/edgeless-copilot-panel/index.ts b/blocksuite/blocks/src/root-block/widgets/edgeless-copilot-panel/index.ts index e198f6fd80..f19fbca779 100644 --- a/blocksuite/blocks/src/root-block/widgets/edgeless-copilot-panel/index.ts +++ b/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) { diff --git a/blocksuite/blocks/src/root-block/widgets/edgeless-copilot-panel/toolbar-entry.ts b/blocksuite/blocks/src/root-block/widgets/edgeless-copilot-panel/toolbar-entry.ts index e5fc90cfda..6a86ef6cee 100644 --- a/blocksuite/blocks/src/root-block/widgets/edgeless-copilot-panel/toolbar-entry.ts +++ b/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'; diff --git a/blocksuite/blocks/src/root-block/widgets/edgeless-copilot/index.ts b/blocksuite/blocks/src/root-block/widgets/edgeless-copilot/index.ts index 1d8eb9cb26..ca2d035ba1 100644 --- a/blocksuite/blocks/src/root-block/widgets/edgeless-copilot/index.ts +++ b/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,