waveterm/frontend/app/view/waveai/waveai.less
Sylvie Crowe 9dd4188810
fix: add error messages to ai chat (#999)
This will print error messages to the chat when there is an error
getting an ai response. The actual content of the responses are not
forwarded to the models in future requests.

<img width="389" alt="Screenshot 2024-10-09 at 2 36 13 PM"
src="https://github.com/user-attachments/assets/e6c6b1c1-fa19-4456-be3b-596feaeaafed">
2024-10-09 14:50:56 -07:00

153 lines
4.5 KiB
Plaintext

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
.waveai {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
width: 100%;
> .scrollable {
flex-flow: column nowrap;
flex-grow: 1;
margin-bottom: 0;
overflow-y: auto;
.chat-window {
display: flex;
// margin-bottom: 5px;
flex-direction: column;
height: 100%;
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 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 4px;
padding: 8px 12px;
.waveai-input-wrapper {
padding: 8px 12px;
flex: 1 1 auto;
background-color: rgb(from var(--block-bg-color) r g b / 0.39);
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;
font-family: var(--termfontfamily);
font-weight: normal;
line-height: var(--termlineheight);
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;
}
}
}