fix: make chat button click event work fine (#7658)

fix PD-1504

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

@@ -168,6 +168,16 @@ export class ChatPanelInput extends WithDisposable(LitElement) {
       }
     }
 
+    .chat-panel-send svg rect {
+      fill: var(--affine-primary-color);
+    }
+    .chat-panel-send[aria-disabled='true'] {
+      cursor: not-allowed;
+    }
+    .chat-panel-send[aria-disabled='true'] svg rect {
+      fill: var(--affine-text-disable-color);
+    }
+
     .close-wrapper {
       width: 16px;
       height: 16px;
@@ -286,18 +296,13 @@ export class ChatPanelInput extends WithDisposable(LitElement) {
     const maxHeight = hasImages ? 272 + 2 : 200 + 2;
 
     return html`<style>
-        .chat-panel-send svg rect {
-          fill: ${this.isInputEmpty && hasImages
-            ? 'var(--affine-text-disable-color)'
-            : 'var(--affine-primary-color)'};
-        }
-
         .chat-panel-input {
           border-color: ${this.focused
             ? 'var(--affine-primary-color)'
             : 'var(--affine-border-color)'};
           box-shadow: ${this.focused ? 'var(--affine-active-shadow)' : 'none'};
           max-height: ${maxHeight}px !important;
+          user-select: none;
         }
       </style>
       <div class="chat-panel-input">
@@ -395,7 +400,11 @@ export class ChatPanelInput extends WithDisposable(LitElement) {
               >
                 ${ChatAbortIcon}
               </div>`
-            : html`<div @click="${this.send}" class="chat-panel-send">
+            : html`<div
+                @click="${this.send}"
+                class="chat-panel-send"
+                aria-disabled=${this.isInputEmpty}
+              >
                 ${ChatSendIcon}
               </div>`}
         </div>

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

@@ -91,6 +91,7 @@ export class ChatPanel extends WithDisposable(ShadowlessElement) {
       align-items: center;
       color: var(--affine-text-secondary-color);
       font-size: 12px;
+      user-select: none;
     }
   `;
 

packages/frontend/core/src/blocksuite/presets/ai/peek-view/chat-block-input.ts

@@ -56,6 +56,7 @@ export class ChatBlockInput extends LitElement {
         resize: none;
         overflow-y: hidden;
         background-color: transparent;
+        user-select: none;
       }
       textarea::placeholder {
         font-size: 14px;
@@ -91,6 +92,17 @@ export class ChatBlockInput extends LitElement {
         }
       }
     }
+
+    .chat-panel-send svg rect {
+      fill: var(--affine-primary-color);
+    }
+    .chat-panel-send[aria-disabled='true'] {
+      cursor: not-allowed;
+    }
+    .chat-panel-send[aria-disabled='true'] svg rect {
+      fill: var(--affine-text-disable-color);
+    }
+
     .close-wrapper {
       width: 16px;
       height: 16px;
@@ -143,17 +155,13 @@ export class ChatBlockInput extends LitElement {
     });
 
     return html`<style>
-        .chat-panel-send svg rect {
-          fill: ${this._isInputEmpty
-            ? 'var(--affine-text-disable-color)'
-            : 'var(--affine-primary-color)'};
-        }
         .chat-panel-input {
           border-color: ${this._focused
             ? 'var(--affine-primary-color)'
             : 'var(--affine-border-color)'};
           box-shadow: ${this._focused ? 'var(--affine-active-shadow)' : 'none'};
           max-height: ${maxHeight}px;
+          user-select: none;
         }
       </style>
       <div class="ai-chat-input">
@@ -233,7 +241,11 @@ export class ChatBlockInput extends LitElement {
               >
                 ${ChatAbortIcon}
               </div>`
-            : html`<div @click="${this._send}" class="chat-panel-send">
+            : html`<div
+                @click="${this._send}"
+                class="chat-panel-send"
+                aria-disabled=${this._isInputEmpty}
+              >
                 ${ChatSendIcon}
               </div>`}
         </div>

packages/frontend/core/src/blocksuite/presets/ai/peek-view/styles.ts

@@ -69,5 +69,6 @@ export const PeekViewStyles = css`
     align-items: center;
     color: var(--affine-text-secondary-color);
     font-size: var(--affine-font-xs);
+    user-select: none;
   }
 `;

packages/frontend/core/src/components/pure/ai-island/index.tsx

@@ -5,6 +5,7 @@ import {
   useLiveData,
   useService,
 } from '@toeverything/infra';
+import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
 import { ToolContainer } from '../../workspace';
@@ -14,6 +15,7 @@ import {
   aiIslandBtn,
   aiIslandWrapper,
   gradient,
+  toolStyle,
 } from './styles.css';
 
 const RIGHT_SIDEBAR_AI_HAS_EVER_OPENED_KEY =
@@ -49,7 +51,7 @@ export const AIIsland = () => {
   }, [activeTab, haveChatTab, sidebarOpen]);
 
   return (
-    <ToolContainer>
+    <ToolContainer className={clsx(toolStyle, { hide })}>
       <div
         className={aiIslandWrapper}
         data-hide={hide}

packages/frontend/core/src/components/pure/ai-island/styles.css.ts

@@ -1,6 +1,14 @@
 import { cssVar } from '@toeverything/theme';
 import { createVar, keyframes, style } from '@vanilla-extract/css';
 
+export const toolStyle = style({
+  selectors: {
+    '&.hide': {
+      pointerEvents: 'none',
+    },
+  },
+});
+
 export const aiIslandWrapper = style({
   width: 44,
   height: 44,

packages/frontend/core/src/components/workspace/index.tsx

@@ -71,7 +71,9 @@ export const MainContainer = forwardRef<
 
 MainContainer.displayName = 'MainContainer';
 
-export const ToolContainer = (props: PropsWithChildren): ReactElement => {
+export const ToolContainer = (
+  props: PropsWithChildren<{ className?: string }>
+): ReactElement => {
   const docId = useLiveData(
     useService(GlobalContextService).globalContext.docId.$
   );
@@ -79,11 +81,7 @@ export const ToolContainer = (props: PropsWithChildren): ReactElement => {
   const doc = useLiveData(docId ? docRecordList.doc$(docId) : undefined);
   const inTrash = useLiveData(doc?.meta$)?.trash;
   return (
-    <div
-      className={clsx(toolStyle, {
-        trash: inTrash,
-      })}
-    >
+    <div className={clsx(toolStyle, { trash: inTrash }, props.className)}>
       {props.children}
     </div>
   );