Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix Wave AI styling again (#1164)

Browse Source
This commit is contained in:
Evan Simkowitz 2024-10-28 16:46:00 -07:00 committed by GitHub
parent ee348d9fad
commit 96cc2adc91
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 77 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
frontend/app/view/waveai/waveai.less
View File

@ -8,97 +8,97 @@
height: 100%;
width: 100%;
> .scrollable {
flex-flow: column nowrap;
.waveai-chat {
flex-grow: 1;
margin-bottom: 0;
overflow-y: auto;
min-height: 100%;
.chat-window {
display: flex;
// margin-bottom: 5px;
flex-direction: column;
> .scrollable {
flex-flow: column nowrap;
margin-bottom: 0;
overflow-y: auto;
min-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;
.chat-window {
display: flex;
align-items: flex-start;
border-radius: 8px;
flex-direction: column;
gap: 8px;
&.chat-msg-header {
// 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;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
border-radius: 8px;
.icon-box {
padding-top: 0;
border-radius: 4px;
background-color: rgb(from var(--highlight-bg-color) r g b / 0.05);
&.chat-msg-header {
display: flex;
padding: 6px;
}
}
flex-direction: column;
justify-content: flex-start;
&.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;
.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-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%;
&.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%;
.markdown {
width: 100%;
pre {
white-space: pre-wrap;
word-break: break-word;
max-width: 100%;
overflow-x: auto;
margin-left: 0;
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);
}
&.typing-indicator {
margin-top: 4px;
&.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;
}
}
}
}

4
frontend/app/view/waveai/waveai.tsx
View File

@ -722,7 +722,9 @@ const WaveAi = ({ model }: { model: WaveAiModel; blockId: string }) => {
return (
<div ref={waveaiRef} className="waveai">
<ChatWindow ref={osRef} chatWindowRef={chatWindowRef} messages={messages} msgWidths={msgWidths} />
<div className="waveai-chat">
<ChatWindow ref={osRef} chatWindowRef={chatWindowRef} messages={messages} msgWidths={msgWidths} />
</div>
<div className="waveai-controls">
<div className="waveai-input-wrapper">
<ChatInput