fix(core): apply model ui (#13084)

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<typeof diffMarkdown>) {
+    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`
         <div class="doc-edit-tool-result-wrapper">
           <div class="doc-edit-tool-result-title">${instructions}</div>
@@ -351,7 +349,7 @@ export class DocEditTool extends WithDisposable(ShadowlessElement) {
             </div>
             <div class="doc-edit-tool-result-card-content">
               <div class="doc-edit-tool-result-card-content-title">
-                ${this.renderBlockDiffs(this.originalMarkdown, changedMarkdown)}
+                ${this.renderBlockDiffs(diffs)}
               </div>
             </div>
             <div class="doc-edit-tool-result-card-footer">
@@ -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;
 

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<HTMLDivElement>(
       `[data-block-id="${blockId}"]`
@@ -59,12 +73,11 @@ export class AffineBlockDiffWidgetForBlock extends WidgetComponent {
     }
 
     this._setDeletedStyle(blockId);
+    const diffId = `delete-${blockId}`;
 
-    return html`<div
-      class="ai-block-diff delete"
-      data-diff-id=${`delete-${blockId}`}
-    >
+    return html`<div class="ai-block-diff delete" data-diff-id=${diffId}>
       <ai-block-diff-options
+        class="diff-options"
         .onAccept=${() =>
           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`<div
-              class="ai-block-diff insert"
-              data-diff-id=${`insert-${block.id}-${offset}`}
-            >
+          : html`<div class="ai-block-diff insert" data-diff-id=${diffId}>
               <chat-content-rich-text
                 .text=${block.content}
                 .host=${this.host}
@@ -92,6 +103,7 @@ export class AffineBlockDiffWidgetForBlock extends WidgetComponent {
                 .extensions=${this.userExtensions}
               ></chat-content-rich-text>
               <ai-block-diff-options
+                class="diff-options"
                 .onAccept=${() =>
                   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`
-      <div class="ai-block-diff update" data-diff-id=${`update-${blockId}`}>
+      <div class="ai-block-diff update" data-diff-id=${diffId}>
         <chat-content-rich-text
           .text=${content}
           .host=${this.host}
@@ -125,6 +137,7 @@ export class AffineBlockDiffWidgetForBlock extends WidgetComponent {
           .extensions=${this.userExtensions}
         ></chat-content-rich-text>
         <ai-block-diff-options
+          class="diff-options"
           .onAccept=${() =>
             this.diffService.accept(
               {

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;