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

fix PD-1504
This commit is contained in:
darkskygit
2024-07-31 09:24:53 +00:00
parent 48e17fad02
commit 49529b7e63
7 changed files with 51 additions and 20 deletions
@@ -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>
@@ -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;
}
`;
@@ -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>
@@ -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;
}
`;