fix(core): downward arrow is visible when message panel is not scrollable (#9670)
Fix issue [AF-2056](https://linear.app/affine-design/issue/AF-2056). ### What changed? - Check both `showDownIndicator` and `filteredItems.length` when rendering `DownArrowIcon`. - Use `scrollIntoView` instead of `scrollToEnd` during AI result transmission. 
This commit is contained in:
@@ -14,7 +14,7 @@ import { css, html, nothing } from 'lit';
|
|||||||
import { property, query, state } from 'lit/decorators.js';
|
import { property, query, state } from 'lit/decorators.js';
|
||||||
import { repeat } from 'lit/directives/repeat.js';
|
import { repeat } from 'lit/directives/repeat.js';
|
||||||
import { styleMap } from 'lit/directives/style-map.js';
|
import { styleMap } from 'lit/directives/style-map.js';
|
||||||
import { debounce } from 'lodash-es';
|
import { debounce, throttle } from 'lodash-es';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
EdgelessEditorActions,
|
EdgelessEditorActions,
|
||||||
@@ -132,6 +132,9 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
|
|||||||
@query('.chat-panel-messages')
|
@query('.chat-panel-messages')
|
||||||
accessor messagesContainer: HTMLDivElement | null = null;
|
accessor messagesContainer: HTMLDivElement | null = null;
|
||||||
|
|
||||||
|
@query('.message:nth-last-child(2)')
|
||||||
|
accessor lastMessage: HTMLDivElement | null = null;
|
||||||
|
|
||||||
private _renderAIOnboarding() {
|
private _renderAIOnboarding() {
|
||||||
return this.isLoading ||
|
return this.isLoading ||
|
||||||
!this.host?.doc.get(FeatureFlagService).getFlag('enable_ai_onboarding')
|
!this.host?.doc.get(FeatureFlagService).getFlag('enable_ai_onboarding')
|
||||||
@@ -189,6 +192,16 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
|
|||||||
100
|
100
|
||||||
);
|
);
|
||||||
|
|
||||||
|
private readonly _scrollIntoView = () => {
|
||||||
|
if (!this.lastMessage) return;
|
||||||
|
this.lastMessage.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
};
|
||||||
|
|
||||||
|
private readonly _throttledScrollIntoView = throttle(
|
||||||
|
this._scrollIntoView,
|
||||||
|
500
|
||||||
|
);
|
||||||
|
|
||||||
protected override render() {
|
protected override render() {
|
||||||
const { items } = this.chatContextValue;
|
const { items } = this.chatContextValue;
|
||||||
const { isLoading } = this;
|
const { isLoading } = this;
|
||||||
@@ -243,7 +256,7 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
|
|||||||
}
|
}
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
${this.showDownIndicator
|
${this.showDownIndicator && filteredItems.length > 1
|
||||||
? html`<div class="down-indicator" @click=${this.scrollToEnd}>
|
? html`<div class="down-indicator" @click=${this.scrollToEnd}>
|
||||||
${DownArrowIcon}
|
${DownArrowIcon}
|
||||||
</div>`
|
</div>`
|
||||||
@@ -287,6 +300,12 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected override updated() {
|
||||||
|
if (this.chatContextValue.status === 'transmitting') {
|
||||||
|
this._throttledScrollIntoView();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
renderItem(item: ChatItem, isLast: boolean) {
|
renderItem(item: ChatItem, isLast: boolean) {
|
||||||
const { status, error } = this.chatContextValue;
|
const { status, error } = this.chatContextValue;
|
||||||
const { host } = this;
|
const { host } = this;
|
||||||
|
|||||||
@@ -205,19 +205,13 @@ export class ChatPanel extends WithDisposable(ShadowlessElement) {
|
|||||||
if (
|
if (
|
||||||
!this.isLoading &&
|
!this.isLoading &&
|
||||||
_changedProperties.has('chatContextValue') &&
|
_changedProperties.has('chatContextValue') &&
|
||||||
this.chatContextValue.status !== 'idle'
|
(this.chatContextValue.status === 'loading' ||
|
||||||
) {
|
|
||||||
if (this.chatContextValue.status === 'transmitting') {
|
|
||||||
this._scrollToEnd();
|
|
||||||
} else if (
|
|
||||||
this.chatContextValue.status === 'loading' ||
|
|
||||||
this.chatContextValue.status === 'error' ||
|
this.chatContextValue.status === 'error' ||
|
||||||
this.chatContextValue.status === 'success'
|
this.chatContextValue.status === 'success')
|
||||||
) {
|
) {
|
||||||
setTimeout(this._scrollToEnd, 500);
|
setTimeout(this._scrollToEnd, 500);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
override connectedCallback() {
|
override connectedCallback() {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
|
|||||||
Reference in New Issue
Block a user