From 9dfd366382403195a285f0293b708fe3f8f01dd0 Mon Sep 17 00:00:00 2001
From: donteatfriedrice <chs@bupt.cn>
Date: Tue, 10 Sep 2024 08:12:05 +0000
Subject: [PATCH] fix: ai error message tip would be cut off (#8183)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use `<affine-tooltip>` component that updates the float position when it might be clipped。

Fix: [BS-1386](https://linear.app/affine-design/issue/BS-1386/[bug]-tooltip-位置错误)
---
 .../blocksuite/presets/ai/messages/error.ts   | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/core/src/blocksuite/presets/ai/messages/error.ts b/packages/frontend/core/src/blocksuite/presets/ai/messages/error.ts
index 9b4c8c3614..0340b5ff35 100644
--- a/packages/frontend/core/src/blocksuite/presets/ai/messages/error.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/messages/error.ts
@@ -152,26 +152,18 @@ export function AIChatErrorRenderer(host: EditorHost, error: AIError) {
   } else {
     const tip = error.message;
     return GeneralErrorRenderer({
-      error: html`<style>
+      error: html` <style>
           .tip {
-            position: relative;
-            cursor: pointer;
-          }
-
-          .tip:hover::after {
-            content: attr(data-tip);
-            position: absolute;
-            left: 0;
-            top: 20px;
-            background-color: black;
-            color: white;
-            padding: 5px 10px;
-            border-radius: 5px;
-            z-index: 1000;
-            white-space: pre;
+            text-decoration: underline;
           }
         </style>
-        <a class="tip" href="#" data-tip="${tip}">An error occurred</a>`,
+        <span class="tip"
+          >An error occurred<affine-tooltip
+            tip-position="bottom-start"
+            .arrow=${false}
+            >${tip}</affine-tooltip
+          ></span
+        >`,
     });
   }
 }