From 3cc33bd40f8f39c4a910adaf73d5b49cb4cc2e21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=B7=E5=B8=83=E5=8A=B3=E5=A4=96=20=C2=B7=20=E8=B4=BE?= =?UTF-8?q?=E8=B4=B5?= <472285740@qq.com> Date: Wed, 9 Jul 2025 11:55:17 +0800 Subject: [PATCH] fix(core): apply model ui (#13084) --- .../src/plugins/copilot/tools/doc-edit.ts | 2 +- .../ai/components/ai-tools/doc-edit.ts | 39 ++++++------------- .../blocksuite/ai/widgets/block-diff/block.ts | 35 +++++++++++------ .../blocksuite/ai/widgets/block-diff/page.ts | 6 ++- 4 files changed, 41 insertions(+), 41 deletions(-) diff --git a/packages/backend/server/src/plugins/copilot/tools/doc-edit.ts b/packages/backend/server/src/plugins/copilot/tools/doc-edit.ts index cc4a7760d..ed1ee64fe 100644 --- a/packages/backend/server/src/plugins/copilot/tools/doc-edit.ts +++ b/packages/backend/server/src/plugins/copilot/tools/doc-edit.ts @@ -167,7 +167,7 @@ You should specify the following arguments before the others: [doc_id], [origin_ }, ]); - return { result }; + return { result, content }; } catch { return 'Failed to apply edit to the doc'; } diff --git a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/doc-edit.ts b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/doc-edit.ts index fae4c56de..16394eb2d 100644 --- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/doc-edit.ts +++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/doc-edit.ts @@ -11,7 +11,7 @@ import { PenIcon as EditIcon, PenIcon, } from '@blocksuite/icons/lit'; -import { css, html, nothing, type PropertyValues } from 'lit'; +import { css, html, nothing } from 'lit'; import { property, state } from 'lit/decorators.js'; import type { BlockDiffService } from '../../services/block-diff'; @@ -37,6 +37,7 @@ interface DocEditToolResult { result: | { result: string; + content: string; } | ToolError | null; @@ -197,9 +198,6 @@ export class DocEditTool extends WithDisposable(ShadowlessElement) { @state() accessor isCollapsed = false; - @state() - accessor originalMarkdown: string | undefined; - private async _handleApply(markdown: string) { if (!this.host) { return; @@ -259,11 +257,8 @@ export class DocEditTool extends WithDisposable(ShadowlessElement) { return this.renderRichText(removeMarkdownComments(text)); } - renderBlockDiffs(originalMarkdown: string, changedMarkdown: string) { - const { patches, oldBlocks } = diffMarkdown( - originalMarkdown, - changedMarkdown - ); + renderBlockDiffs(diffs: ReturnType) { + const { patches, oldBlocks } = diffs; const oldBlockMap = new Map(oldBlocks.map(b => [b.id, b])); @@ -311,15 +306,18 @@ export class DocEditTool extends WithDisposable(ShadowlessElement) { } renderToolResult() { - if (this.data.type !== 'tool-result' || !this.originalMarkdown) { + if (this.data.type !== 'tool-result') { return nothing; } const result = this.data.result; - if (result && 'result' in result) { - const changedMarkdown = result.result; + if (result && 'result' in result && 'content' in result) { + const { result: changedMarkdown, content } = result; const { instructions, doc_id: docId } = this.data.args; + + const diffs = diffMarkdown(content, changedMarkdown); + return html`
${instructions}
@@ -351,7 +349,7 @@ export class DocEditTool extends WithDisposable(ShadowlessElement) {
- ${this.renderBlockDiffs(this.originalMarkdown, changedMarkdown)} + ${this.renderBlockDiffs(diffs)}
@@ -387,21 +385,6 @@ export class DocEditTool extends WithDisposable(ShadowlessElement) { `; } - protected override firstUpdated(_changedProperties: PropertyValues): void { - super.firstUpdated(_changedProperties); - if (!this.host) { - return; - } - this.blockDiffService - ?.getMarkdownFromDoc(this.host.store) - .then(markdown => { - this.originalMarkdown = markdown; - }) - .catch(() => { - // TODO: handle error - }); - } - protected override render() { const { data } = this; diff --git a/packages/frontend/core/src/blocksuite/ai/widgets/block-diff/block.ts b/packages/frontend/core/src/blocksuite/ai/widgets/block-diff/block.ts index 0dca2b967..d14d753b3 100644 --- a/packages/frontend/core/src/blocksuite/ai/widgets/block-diff/block.ts +++ b/packages/frontend/core/src/blocksuite/ai/widgets/block-diff/block.ts @@ -31,8 +31,22 @@ export class AffineBlockDiffWidgetForBlock extends WidgetComponent { margin: 0; background: transparent; } + .ai-block-diff, + .ai-block-diff.delete, + .ai-block-diff.update, + .ai-block-diff.insert { + pointer-events: auto; + } + .diff-options { + visibility: hidden; + } + .ai-block-diff:hover .diff-options, + .ai-block-diff.delete:hover .diff-options, + .ai-block-diff.update:hover .diff-options, + .ai-block-diff.insert:hover .diff-options { + visibility: visible; + } `; - private _setDeletedStyle(blockId: string) { const deleted = document.querySelector( `[data-block-id="${blockId}"]` @@ -59,12 +73,11 @@ export class AffineBlockDiffWidgetForBlock extends WidgetComponent { } this._setDeletedStyle(blockId); + const diffId = `delete-${blockId}`; - return html`
+ return html`
this.diffService.accept( { type: 'delete', payload: { id: blockId } }, @@ -79,12 +92,10 @@ export class AffineBlockDiffWidgetForBlock extends WidgetComponent { private _renderInsert(from: string, blocks: Block[]) { return blocks .map((block, offset) => { + const diffId = `insert-${block.id}-${offset}`; return this.diffService.isRejected('insert', `${from}:${offset}`) ? null - : html`
+ : html`
this.diffService.accept( { @@ -115,9 +127,9 @@ export class AffineBlockDiffWidgetForBlock extends WidgetComponent { if (this.diffService.isRejected('update', blockId)) { return nothing; } - + const diffId = `update-${blockId}`; return html` -
+
this.diffService.accept( { diff --git a/packages/frontend/core/src/blocksuite/ai/widgets/block-diff/page.ts b/packages/frontend/core/src/blocksuite/ai/widgets/block-diff/page.ts index ccda444a7..71d9d847b 100644 --- a/packages/frontend/core/src/blocksuite/ai/widgets/block-diff/page.ts +++ b/packages/frontend/core/src/blocksuite/ai/widgets/block-diff/page.ts @@ -18,7 +18,11 @@ export const AFFINE_BLOCK_DIFF_WIDGET_FOR_PAGE = export class AffineBlockDiffWidgetForPage extends WidgetComponent { static override styles = css` .ai-block-diff-scroller-container { - margin: auto; + position: fixed; + left: 50%; + transform: translateX(-50%); + bottom: 180px; + margin: 0; display: flex; gap: 4px; justify-content: center;