fix: ai error message tip would be cut off (#8183)

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-位置错误)

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
+        >`,
     });
   }
 }