use a flex column-reverse outside a column
thanks mary again :3
This commit is contained in:
parent
ef0cfbd72d
commit
8c058d217d
3 changed files with 9 additions and 18 deletions
|
@ -71,9 +71,6 @@ 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;
|
||||||
|
@ -106,8 +103,6 @@ function conversationUI(id: string) {
|
||||||
inFlightMessages.delete(message.r);
|
inFlightMessages.delete(message.r);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (scrolledToBottom) chatlog.scrollTop = chatlog.scrollHeight - chatlog.clientHeight;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const form = (
|
const form = (
|
||||||
|
@ -126,7 +121,7 @@ function conversationUI(id: string) {
|
||||||
return (
|
return (
|
||||||
<section className="conversation">
|
<section className="conversation">
|
||||||
{header}
|
{header}
|
||||||
{chatlog}
|
<section className="chatlog-wrapper">{chatlog}</section>
|
||||||
{form}
|
{form}
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
|
@ -77,11 +77,6 @@ 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,12 +66,18 @@ main,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatlog {
|
.chatlog-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column-reverse;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatlog {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
article {
|
article {
|
||||||
white-space: preserve;
|
white-space: preserve;
|
||||||
|
@ -109,11 +115,6 @@ main,
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
details[data-in-progress] {
|
|
||||||
max-height: 4em;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pre > code {
|
pre > code {
|
||||||
|
|
Loading…
Reference in a new issue