mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-07 19:28:44 +01:00
e0c875afeb
This makes the chat window flex-grow so we no longer need to manually fix its height. It also cleans up some other styling. It also fixes the scroll handlers so we detect when the user is at the bottom of the chat window so we can follow the latest message. It also fixes some circular references in the callbacks that were causing React to bug out.
150 lines
4.8 KiB
SCSS
150 lines
4.8 KiB
SCSS
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
.waveai {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
.waveai-chat {
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
.chat-window-container {
|
|
overflow-y: auto;
|
|
margin-bottom: 0;
|
|
height: 100%;
|
|
|
|
.chat-window {
|
|
flex-flow: column nowrap;
|
|
display: flex;
|
|
gap: 8px;
|
|
|
|
// This is the filler that will push the chat messages to the bottom until the chat window is full
|
|
.filler {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.chat-msg-container {
|
|
display: flex;
|
|
gap: 8px;
|
|
.chat-msg {
|
|
margin: 10px 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
border-radius: 8px;
|
|
|
|
&.chat-msg-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
|
|
.icon-box {
|
|
padding-top: 0;
|
|
border-radius: 4px;
|
|
background-color: rgb(from var(--highlight-bg-color) r g b / 0.05);
|
|
display: flex;
|
|
padding: 6px;
|
|
}
|
|
}
|
|
|
|
&.chat-msg-assistant {
|
|
color: var(--main-text-color);
|
|
background-color: rgb(from var(--highlight-bg-color) r g b / 0.1);
|
|
margin-right: auto;
|
|
padding: 10px;
|
|
max-width: 85%;
|
|
|
|
.markdown {
|
|
width: 100%;
|
|
|
|
pre {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
&.chat-msg-user {
|
|
margin-left: auto;
|
|
padding: 10px;
|
|
max-width: 85%;
|
|
background-color: rgb(from var(--accent-color) r g b / 0.15);
|
|
}
|
|
|
|
&.chat-msg-error {
|
|
color: var(--main-text-color);
|
|
background-color: rgb(from var(--error-color) r g b / 0.25);
|
|
margin-right: auto;
|
|
padding: 10px;
|
|
max-width: 85%;
|
|
|
|
.markdown {
|
|
width: 100%;
|
|
|
|
pre {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.typing-indicator {
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.waveai-controls {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
padding: 8px 6px;
|
|
|
|
.waveai-input-wrapper {
|
|
padding: 8px 12px;
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
border-radius: 6px;
|
|
border: 1px solid rgb(from var(--highlight-bg-color) r g b / 0.42);
|
|
|
|
.waveai-input {
|
|
color: var(--main-text-color);
|
|
background-color: inherit;
|
|
resize: none;
|
|
width: 100%;
|
|
border: transparent;
|
|
outline: none;
|
|
overflow: auto;
|
|
overflow-wrap: anywhere;
|
|
height: 21px;
|
|
}
|
|
}
|
|
|
|
.waveai-submit-button {
|
|
border-radius: 100%;
|
|
width: 27px;
|
|
aspect-ratio: 1 /1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|