snowspeeder/pi-web
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prevent duplicate chat history loads

Browse Source
This commit is contained in:
Federico Jaramillo Martinez
2026-05-11 22:06:45 +02:00
parent 4440490c17
commit c41a9f5009
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/src/components/ChatView.ts
+4 -4
View File
@@ -45,7 +45,7 @@ export class ChatView extends LitElement {
private lastScrollTop = 0; private lastScrollTop = 0;
private lastClientHeight = 0; private lastClientHeight = 0;
private touchStartY: number | undefined; private touchStartY: number | undefined;
private loadMoreRequested = false; @state() private loadMoreRequested = false;
private readonly onViewportResize = () => { private readonly onViewportResize = () => {
if (this.pinnedToBottom) this.scrollToBottom(); if (this.pinnedToBottom) this.scrollToBottom();
else this.lastClientHeight = this.chat?.clientHeight ?? 0; else this.lastClientHeight = this.chat?.clientHeight ?? 0;
@@ -186,7 +186,7 @@ export class ChatView extends LitElement {
if (this.loadingMore) return html`<div class="history-boundary"><span>Loading earlier messages…</span>${range}</div>`; if (this.loadingMore) return html`<div class="history-boundary"><span>Loading earlier messages…</span>${range}</div>`;
if (this.hasMore) return html` if (this.hasMore) return html`
<div class="history-boundary"> <div class="history-boundary">
<button type="button" class="history-load-button" @click=${() => { this.requestLoadMore(true); }}>Load earlier messages</button> <button type="button" class="history-load-button" ?disabled=${this.loadMoreRequested} @click=${() => { this.requestLoadMore(); }}>Load earlier messages</button>
<span>Scroll up to load earlier messages</span> <span>Scroll up to load earlier messages</span>
${range} ${range}
</div> </div>
@@ -415,8 +415,8 @@ export class ChatView extends LitElement {
}); });
} }
private requestLoadMore(force = false): void { private requestLoadMore(): void {
if (!force && this.loadMoreRequested) return; if (this.loadMoreRequested) return;
if (!this.hasMore || this.loadingMore || this.onLoadMore === undefined) return; if (!this.hasMore || this.loadingMore || this.onLoadMore === undefined) return;
this.loadMoreRequested = true; this.loadMoreRequested = true;
this.onLoadMore(); this.onLoadMore();
src/client/src/components/shared.ts
+1
View File
@@ -169,6 +169,7 @@ export const chatStyles = css`
.history-boundary { display: grid; gap: 3px; justify-items: center; margin: 0 0 14px; color: #8b949e; font-size: 12px; text-align: center; } .history-boundary { display: grid; gap: 3px; justify-items: center; margin: 0 0 14px; color: #8b949e; font-size: 12px; text-align: center; }
.history-load-button { border: 1px solid #30363d; border-radius: 999px; background: #161b22; color: #c9d1d9; padding: 5px 12px; font: 12px system-ui, sans-serif; cursor: pointer; } .history-load-button { border: 1px solid #30363d; border-radius: 999px; background: #161b22; color: #c9d1d9; padding: 5px 12px; font: 12px system-ui, sans-serif; cursor: pointer; }
.history-load-button:hover, .history-load-button:focus { border-color: #58a6ff; color: #f0f6fc; } .history-load-button:hover, .history-load-button:focus { border-color: #58a6ff; color: #f0f6fc; }
.history-load-button:disabled { cursor: default; opacity: .55; }
.queued-messages { max-width: 100%; min-width: 0; box-sizing: border-box; display: grid; gap: 8px; margin: 0 0 14px; padding: 12px; border: 1px solid #6e5200; border-radius: 10px; background: #1f1a10; color: #e6edf3; overflow: hidden; } .queued-messages { max-width: 100%; min-width: 0; box-sizing: border-box; display: grid; gap: 8px; margin: 0 0 14px; padding: 12px; border: 1px solid #6e5200; border-radius: 10px; background: #1f1a10; color: #e6edf3; overflow: hidden; }
.queued-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .queued-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.queued-header strong { color: #d29922; } .queued-header strong { color: #d29922; }