fix: error handle and code style

packages/presets/src/ai/chat-panel/actions/action-wrapper.ts

@@ -1,6 +1,6 @@
 import type { EditorHost } from '@blocksuite/block-std';
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
-import { css, html, nothing, type TemplateResult } from 'lit';
+import { WithDisposable } from '@blocksuite/block-std';
+import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
 import {
@@ -46,7 +46,7 @@ const icons: Record<string, TemplateResult<1>> = {
 };
 
 @customElement('action-wrapper')
-export class ActionWrapper extends WithDisposable(ShadowlessElement) {
+export class ActionWrapper extends WithDisposable(LitElement) {
   static override styles = css`
     .action-name {
       display: flex;

packages/presets/src/ai/chat-panel/actions/text.ts

@@ -1,21 +1,20 @@
 import './action-wrapper.js';
 
 import type { EditorHost } from '@blocksuite/block-std';
-import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
-import { css, html } from 'lit';
+import { WithDisposable } from '@blocksuite/block-std';
+import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import { createTextRenderer } from '../../messages/text.js';
 import type { ChatAction } from '../index.js';
 
 @customElement('action-text')
-export class ActionText extends WithDisposable(ShadowlessElement) {
+export class ActionText extends WithDisposable(LitElement) {
   static override styles = css`
     .original-text {
       width: 100%;
-      padding: 10px 16px;
       border-radius: 4px;
-      border: 1px solid var(--affine-border-color);
       margin-bottom: 12px;
       font-size: var(--affine-font-sm);
       line-height: 22px;
@@ -28,11 +27,21 @@ export class ActionText extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   host!: EditorHost;
 
+  @property({ attribute: false })
+  isCode = false;
+
   protected override render() {
     const originalText = this.item.messages[1].content;
-
-    return html`<action-wrapper .host=${this.host} .item=${this.item}>
-      <div class="original-text">
+    const { isCode } = this;
+
+    return html` <action-wrapper .host=${this.host} .item=${this.item}>
+      <div
+        style=${styleMap({
+          padding: isCode ? '0' : '10px 16px',
+          border: isCode ? 'none' : '1px solid var(--affine-border-color)',
+        })}
+        class="original-text"
+      >
         ${createTextRenderer(this.host)(originalText)}
       </div>
     </action-wrapper>`;

packages/presets/src/ai/chat-panel/chat-panel-messages.ts

@@ -177,7 +177,7 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
       return PaymentRequiredErrorRenderer(this.host);
     } else if (this.error instanceof UnauthorizedError) {
       return GeneralErrorRenderer(
-        'You need to login to AFFiNE Cloud to continue using AFFiNE AI.',
+        html`You need to login to AFFiNE Cloud to continue using AFFiNE AI.`,
         html`<div
           style=${styleMap({
             padding: '4px 12px',
@@ -193,7 +193,7 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
         </div>`
       );
     } else {
-      return GeneralErrorRenderer(this.error?.message);
+      return GeneralErrorRenderer();
     }
   }
 
@@ -240,6 +240,8 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
           return html`<action-text
             .item=${item}
             .host=${this.host}
+            .isCode=${item.action === 'Explain this code' ||
+            item.action === 'Check code error'}
           ></action-text>`;
       }
     }

packages/presets/src/ai/messages/error.ts

@@ -8,7 +8,7 @@ import { AIProvider } from '../provider.js';
 @customElement('ai-error-wrapper')
 class AIErrorWrapper extends WithDisposable(LitElement) {
   @property({ attribute: false })
-  text!: string;
+  text!: TemplateResult<1>;
 
   protected override render() {
     return html` <style>
@@ -72,27 +72,24 @@ export const PaymentRequiredErrorRenderer = (host: EditorHost) => html`
       border-radius: 8px;
       margin-left: auto;
       border: 1px solid var(--affine-border-color, #e3e2e4);
-      background: var(--affine-white, #fff);
+      background: var(--affine-primary-color);
       .content {
         display: flex;
         padding: 0px 4px;
         justify-content: center;
         align-items: center;
-        color: var(--affine-text-primary-color, #121212);
+        color: var(--affine-pure-white);
         /* light/xsMedium */
         font-size: var(--affine-font-xs);
         font-style: normal;
         font-weight: 500;
         line-height: 20px; /* 166.667% */
       }
     }
-    .upgrade:hover {
-      background: var(--affine-hover-color, rgba(0, 0, 0, 0.04));
-    }
   </style>
   <ai-error-wrapper
-    .text=${`You’ve reached the current usage cap for GPT-4. You can subscribe AFFiNE
-        AI to continue AI experience!`}
+    .text=${html`You’ve reached the current usage cap for GPT-4. You can
+    subscribe AFFiNE AI to continue AI experience!`}
   >
     <div
       @click=${() => AIProvider.slots.requestUpgradePlan.emit({ host: host })}
@@ -104,7 +101,9 @@ export const PaymentRequiredErrorRenderer = (host: EditorHost) => html`
 `;
 
 export const GeneralErrorRenderer = (
-  text: string = `An error occurred, If this issue persists please let us know. contact@toeverything.info`,
+  text: TemplateResult<1> = html`An error occurred, If this issue persists
+    please let us know.
+    <a href="mailto:contact@toeverything.info"> contact@toeverything.info </a>`,
   template: TemplateResult<1> = html`${nothing}`
 ) => html` <ai-error-wrapper .text=${text}>${template}</ai-error-wrapper>`;
 

packages/presets/src/ai/messages/text.ts

@@ -16,11 +16,6 @@ import { markDownToDoc } from '../utils/markdown-utils.js';
 @customElement('ai-answer-text-preview')
 export class AIAnswerTextPreview extends WithDisposable(LitElement) {
   static override styles = css`
-    :host {
-      width: 100%;
-      display: flex;
-    }
-
     .ai-answer-text-editor.affine-page-viewport {
       background: transparent;
       font-family: var(--affine-font-family);
@@ -42,12 +37,10 @@ export class AIAnswerTextPreview extends WithDisposable(LitElement) {
           > :first-child,
           > :first-child * {
             margin-top: 0;
-            padding-top: 0;
           }
           > :last-child,
           > :last-child * {
             margin-bottom: 0;
-            padding-bottom: 0;
           }
         }
       }
@@ -116,7 +109,6 @@ export class AIAnswerText extends LitElement {
     .ai-answer-text-container {
       overflow-y: auto;
       overflow-x: hidden;
-      display: flex;
       padding: 0;
     }
     .ai-answer-text-container.show-scrollbar::-webkit-scrollbar {