Revert "use a flex column-reverse outside a column"
fixes firefox autoscroll
This commit is contained in:
parent
8c058d217d
commit
95bca64731
3 changed files with 13 additions and 9 deletions
|
@ -71,6 +71,9 @@ function conversationUI(id: string) {
|
||||||
if (typeof event.data !== "string") return;
|
if (typeof event.data !== "string") return;
|
||||||
const message = JSON.parse(event.data);
|
const message = JSON.parse(event.data);
|
||||||
|
|
||||||
|
const scrolledToBottom =
|
||||||
|
chatlog.scrollTop + 16 >= chatlog.scrollHeight - chatlog.clientHeight;
|
||||||
|
|
||||||
if ("i" in message) {
|
if ("i" in message) {
|
||||||
window.history.replaceState(null, "", "#" + message.i);
|
window.history.replaceState(null, "", "#" + message.i);
|
||||||
id = message.i;
|
id = message.i;
|
||||||
|
@ -103,6 +106,8 @@ function conversationUI(id: string) {
|
||||||
inFlightMessages.delete(message.r);
|
inFlightMessages.delete(message.r);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (scrolledToBottom) chatlog.scrollTop = chatlog.scrollHeight - chatlog.clientHeight;
|
||||||
});
|
});
|
||||||
|
|
||||||
const form = (
|
const form = (
|
||||||
|
@ -121,7 +126,7 @@ function conversationUI(id: string) {
|
||||||
return (
|
return (
|
||||||
<section className="conversation">
|
<section className="conversation">
|
||||||
{header}
|
{header}
|
||||||
<section className="chatlog-wrapper">{chatlog}</section>
|
{chatlog}
|
||||||
{form}
|
{form}
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
|
@ -77,6 +77,11 @@ export class ChatResponse {
|
||||||
this.currentLine.appendData(token);
|
this.currentLine.appendData(token);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.thinkingContext) {
|
||||||
|
this.thinkingContext.scrollTop =
|
||||||
|
this.thinkingContext.scrollHeight - this.thinkingContext.clientHeight;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
finalize() {
|
finalize() {
|
||||||
|
|
|
@ -66,18 +66,12 @@ main,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatlog-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chatlog {
|
.chatlog {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
overflow-y: scroll;
|
||||||
|
|
||||||
article {
|
article {
|
||||||
white-space: preserve;
|
white-space: preserve;
|
||||||
|
|
Loading…
Reference in a new issue