feat: improve continue to chat compatibility (#7757)

fix AF-1152

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-cards.ts

@@ -309,6 +309,15 @@ export class ChatCards extends WithDisposable(LitElement) {
         });
         break;
       }
+      case CardType.Block: {
+        this.updateContext({
+          quote: card.text,
+          markdown: card.markdown,
+          images: card.images,
+        });
+        break;
+      }
+
       case CardType.Doc: {
         await this._handleDocSelection(card);
         this.updateContext({
@@ -336,11 +345,7 @@ export class ChatCards extends WithDisposable(LitElement) {
         text,
         markdown,
       });
-
-      return;
-    }
-
-    if (!hasText && hasImages && images.length === 1) {
+    } else if (!hasText && hasImages && images.length === 1) {
       const [_, data] = this.host.command
         .chain()
         .tryAll(chain => [chain.getImageSelections()])
@@ -364,8 +369,16 @@ export class ChatCards extends WithDisposable(LitElement) {
         image: images[0],
         caption,
       });
-
-      return;
+    } else {
+      const markdown =
+        (await getSelectedTextContent(this.host, 'markdown')).trim() || '';
+      this._updateCards({
+        id: Date.now(),
+        type: CardType.Block,
+        text,
+        markdown,
+        images,
+      });
     }
   }
 

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-panel-input.ts

@@ -141,6 +141,10 @@ export class ChatPanelInput extends WithDisposable(LitElement) {
       }
     }
 
+    .chat-panel-images-wrapper {
+      overflow: hidden scroll;
+      max-height: 128px;
+
       .chat-panel-images {
         display: flex;
         gap: 4px;
@@ -167,6 +171,7 @@ export class ChatPanelInput extends WithDisposable(LitElement) {
           }
         }
       }
+    }
 
     .chat-panel-send svg rect {
       fill: var(--affine-primary-color);
@@ -242,12 +247,13 @@ export class ChatPanelInput extends WithDisposable(LitElement) {
   private _renderImages(images: File[]) {
     return html`
       <div
-        class="chat-panel-images"
+        class="chat-panel-images-wrapper"
         @mouseleave=${() => {
           this.closeWrapper.style.display = 'none';
           this.curIndex = -1;
         }}
       >
+        <div class="chat-panel-images">
           ${repeat(
             images,
             image => image.name,
@@ -257,10 +263,11 @@ export class ChatPanelInput extends WithDisposable(LitElement) {
                 @mouseenter=${(evt: MouseEvent) => {
                   const ele = evt.target as HTMLImageElement;
                   const rect = ele.getBoundingClientRect();
-                assertExists(ele.parentElement);
-                const parentRect = ele.parentElement.getBoundingClientRect();
+                  assertExists(ele.parentElement?.parentElement);
+                  const parentRect =
+                    ele.parentElement.parentElement.getBoundingClientRect();
                   const left = Math.abs(rect.right - parentRect.left) - 8;
-                const top = Math.abs(parentRect.top - rect.top) - 8;
+                  const top = Math.abs(parentRect.top - rect.top);
                   this.curIndex = index;
                   this.closeWrapper.style.display = 'flex';
                   this.closeWrapper.style.left = left + 'px';
@@ -270,6 +277,7 @@ export class ChatPanelInput extends WithDisposable(LitElement) {
                 <img src="${URL.createObjectURL(image)}" alt="${image.name}" />
               </div>`
           )}
+        </div>
         <div
           class="close-wrapper"
           @click=${() => {

packages/frontend/core/src/blocksuite/presets/ai/utils/selection-utils.ts

@@ -249,7 +249,7 @@ export const getSelectedImagesAsBlobs = async (host: EditorHost) => {
       chain.getImageSelections(),
     ])
     .getSelectedBlocks({
-      types: ['image'],
+      types: ['block', 'image'],
     })
     .run();