forked from toeverything/AFFiNE
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core): after the user clicks ask ai, the input pops up directly (t…
…oeverything#9039) Issue [AF-1762](https://linear.app/affine-design/issue/AF-1762). Ask AI on edgeless mode: <div class='graphite__hidden'> <div>🎥 Video uploaded on Graphite:</div> <a href="https://app.graphite.dev/media/video/sJGviKxfE3Ap685cl5bj/1218afba-466f-4570-afd4-679b6b09cc8d.mov"> <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/sJGviKxfE3Ap685cl5bj/1218afba-466f-4570-afd4-679b6b09cc8d.mov"> </a> </div> <video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/1218afba-466f-4570-afd4-679b6b09cc8d.mov">录屏2024-12-06 09.54.52.mov</video> Ask AI on page mode: <div class='graphite__hidden'> <div>🎥 Video uploaded on Graphite:</div> <a href="https://app.graphite.dev/media/video/sJGviKxfE3Ap685cl5bj/58d19705-f646-4957-8628-15845b47222b.mov"> <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/sJGviKxfE3Ap685cl5bj/58d19705-f646-4957-8628-15845b47222b.mov"> </a> </div> <video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/58d19705-f646-4957-8628-15845b47222b.mov">录屏2024-12-06 09.52.51.mov</video>
- Loading branch information
Showing
16 changed files
with
388 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-icon.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { AIStarIcon } from '@blocksuite/affine/blocks'; | ||
| import { WithDisposable } from '@blocksuite/affine/global/utils'; | ||
| import { css, html, LitElement } from 'lit'; | ||
| import { property } from 'lit/decorators.js'; | ||
|
|
||
| export type ButtonSize = 'small' | 'middle' | 'large'; | ||
|
|
||
| const buttonWidthMap: Record<ButtonSize, string> = { | ||
| small: '72px', | ||
| middle: '76px', | ||
| large: '82px', | ||
| }; | ||
|
|
||
| const buttonHeightMap: Record<ButtonSize, string> = { | ||
| small: '24px', | ||
| middle: '32px', | ||
| large: '32px', | ||
| }; | ||
|
|
||
| export class AskAIIcon extends WithDisposable(LitElement) { | ||
| @property({ attribute: false }) | ||
| accessor size!: ButtonSize; | ||
|
|
||
| static override styles = css` | ||
| .ask-ai-icon-button { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| color: var(--affine-brand-color); | ||
| font-size: var(--affine-font-sm); | ||
| font-weight: 500; | ||
| } | ||
| .ask-ai-icon-button.small { | ||
| font-size: var(--affine-font-xs); | ||
| svg { | ||
| scale: 0.8; | ||
| margin-right: 2px; | ||
| } | ||
| } | ||
| .ask-ai-icon-button.large { | ||
| font-size: var(--affine-font-md); | ||
| svg { | ||
| scale: 1.2; | ||
| } | ||
| } | ||
| .ask-ai-icon-button span { | ||
| line-height: 22px; | ||
| } | ||
| .ask-ai-icon-button svg { | ||
| margin-right: 4px; | ||
| color: var(--affine-brand-color); | ||
| } | ||
| `; | ||
|
|
||
| override render() { | ||
| return html` | ||
| <icon-button | ||
| class="ask-ai-icon-button ${this.size}" | ||
| width=${buttonWidthMap[this.size]} | ||
| height=${buttonHeightMap[this.size]} | ||
| > | ||
| ${AIStarIcon} | ||
| <span>Ask AI</span> | ||
| </icon-button> | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'ask-ai-icon': AskAIIcon; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
118 changes: 118 additions & 0 deletions
118
packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-toolbar.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import type { EditorHost } from '@blocksuite/affine/block-std'; | ||
| import { | ||
| type AffineAIPanelWidgetConfig, | ||
| type AIItemGroupConfig, | ||
| createLitPortal, | ||
| } from '@blocksuite/affine/blocks'; | ||
| import { WithDisposable } from '@blocksuite/affine/global/utils'; | ||
| import { flip, offset } from '@floating-ui/dom'; | ||
| import { css, html, LitElement } from 'lit'; | ||
| import { property } from 'lit/decorators.js'; | ||
|
|
||
| import { getAIPanel } from '../../ai-panel'; | ||
| import { AIProvider } from '../../provider'; | ||
| import { extractContext } from '../../utils/extract'; | ||
|
|
||
| export class AskAIToolbarButton extends WithDisposable(LitElement) { | ||
| static override styles = css` | ||
| .ask-ai-button { | ||
| border-radius: 4px; | ||
| position: relative; | ||
| user-select: none; | ||
| } | ||
| `; | ||
|
|
||
| private _abortController: AbortController | null = null; | ||
|
|
||
| private _panelRoot: HTMLDivElement | null = null; | ||
|
|
||
| @property({ attribute: false }) | ||
| accessor host!: EditorHost; | ||
|
|
||
| @property({ attribute: false }) | ||
| accessor actionGroups!: AIItemGroupConfig[]; | ||
|
|
||
| private readonly _onItemClick = () => { | ||
| const aiPanel = getAIPanel(this.host); | ||
| aiPanel.restoreSelection(); | ||
| this._clearAbortController(); | ||
| }; | ||
|
|
||
| private readonly _clearAbortController = () => { | ||
| this._abortController?.abort(); | ||
| this._abortController = null; | ||
| }; | ||
|
|
||
| private readonly _openAIPanel = () => { | ||
| this._clearAbortController(); | ||
| const aiPanel = getAIPanel(this.host); | ||
| this._abortController = new AbortController(); | ||
| this._panelRoot = createLitPortal({ | ||
| template: html` | ||
| <ask-ai-panel | ||
| .host=${this.host} | ||
| .actionGroups=${this.actionGroups} | ||
| .onItemClick=${this._onItemClick} | ||
| ></ask-ai-panel> | ||
| `, | ||
| computePosition: { | ||
| referenceElement: aiPanel, | ||
| placement: 'top-start', | ||
| middleware: [flip(), offset({ mainAxis: 3 })], | ||
| autoUpdate: true, | ||
| }, | ||
| abortController: this._abortController, | ||
| closeOnClickAway: true, | ||
| }); | ||
| }; | ||
|
|
||
| private readonly _generateAnswer: AffineAIPanelWidgetConfig['generateAnswer'] = | ||
| ({ finish, input }) => { | ||
| finish('success'); | ||
| const aiPanel = getAIPanel(this.host); | ||
| aiPanel.discard(); | ||
| AIProvider.slots.requestOpenWithChat.emit({ host: this.host }); | ||
| extractContext(this.host) | ||
| .then(context => { | ||
| AIProvider.slots.requestSendWithChat.emit({ input, context }); | ||
| }) | ||
| .catch(console.error); | ||
| }; | ||
|
|
||
| private readonly _onClick = () => { | ||
| const aiPanel = getAIPanel(this.host); | ||
| if (!aiPanel.config) return; | ||
| aiPanel.config.generateAnswer = this._generateAnswer; | ||
| aiPanel.config.inputCallback = text => { | ||
| if (!this._panelRoot) return; | ||
| this._panelRoot.style.visibility = text ? 'hidden' : 'visible'; | ||
| }; | ||
|
|
||
| const textSelection = this.host.selection.find('text'); | ||
| const blockSelections = this.host.selection.filter('block'); | ||
| let lastBlockId: string | undefined; | ||
| if (textSelection) { | ||
| lastBlockId = textSelection.to?.blockId ?? textSelection.blockId; | ||
| } else if (blockSelections.length) { | ||
| lastBlockId = blockSelections[blockSelections.length - 1].blockId; | ||
| } | ||
| if (!lastBlockId) return; | ||
| const block = this.host.view.getBlock(lastBlockId); | ||
| if (!block) return; | ||
| aiPanel.setState('input', block); | ||
|
|
||
| setTimeout(() => this._openAIPanel(), 0); | ||
| }; | ||
|
|
||
| override render() { | ||
| return html`<div class="ask-ai-button" @click=${this._onClick}> | ||
| <ask-ai-icon .size=${'middle'}></ask-ai-icon> | ||
| </div>`; | ||
| } | ||
| } | ||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'ask-ai-toolbar-button': AskAIToolbarButton; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.