diff --git a/src/app/workspace/cmdinput/aichat.less b/src/app/workspace/cmdinput/aichat.less index 8a7995d9..8e00fb8d 100644 --- a/src/app/workspace/cmdinput/aichat.less +++ b/src/app/workspace/cmdinput/aichat.less @@ -1,71 +1,72 @@ .cmd-aichat { padding-bottom: 0 !important; - .auxview-content { - flex-flow: column nowrap; + + .chat-window { display: flex; + overflow-y: auto; + margin-bottom: 5px; + flex-direction: column; + height: 100%; - .chat-window { - overflow-y: auto; - margin-bottom: 5px; + // This is the filler that will push the chat messages to the bottom until the chat window is full + .filler { flex: 1 1 auto; - flex-direction: column-reverse; - height: 100%; - } - - .chat-input { - padding: 0.5em 0.5em 0.5em 0.5em; - flex: 0 0 auto; - - .chat-textarea { - color: var(--app-text-primary-color); - background-color: var(--cmdinput-textarea-bg); - resize: none; - width: 100%; - border: transparent; - outline: none; - overflow: auto; - overflow-wrap: anywhere; - font-family: var(--termfontfamily); - font-weight: normal; - line-height: var(--termlineheight); - } - } - - .chat-msg { - margin-top: calc(var(--termpad) * 2); - margin-bottom: calc(var(--termpad) * 2); - - .chat-msg-header { - display: flex; - margin-bottom: 2px; - - i { - margin-right: 0.5em; - } - - .chat-username { - font-weight: bold; - margin-right: 5px; - } - } - } - - .chat-msg-assistant { - color: var(--app-text-color); - } - - .chat-msg-user { - .msg-text { - font-family: var(--markdown-font); - font-size: 14px; - white-space: pre-wrap; - } - } - - .chat-msg-error { - color: var(--cmdinput-text-error); - font-family: var(--markdown-font); - font-size: 14px; } } + + .chat-input { + padding: 0.5em 0.5em 0.5em 0.5em; + flex: 0 0 auto; + + .chat-textarea { + color: var(--app-text-primary-color); + background-color: var(--cmdinput-textarea-bg); + resize: none; + width: 100%; + border: transparent; + outline: none; + overflow: auto; + overflow-wrap: anywhere; + font-family: var(--termfontfamily); + font-weight: normal; + line-height: var(--termlineheight); + } + } + + .chat-msg { + margin-top: calc(var(--termpad) * 2); + margin-bottom: calc(var(--termpad) * 2); + + .chat-msg-header { + display: flex; + margin-bottom: 2px; + + i { + margin-right: 0.5em; + } + + .chat-username { + font-weight: bold; + margin-right: 5px; + } + } + } + + .chat-msg-assistant { + color: var(--app-text-color); + } + + .chat-msg-user { + .msg-text { + font-family: var(--markdown-font); + font-size: 14px; + white-space: pre-wrap; + } + } + + .chat-msg-error { + color: var(--cmdinput-text-error); + font-family: var(--markdown-font); + font-size: 14px; + } } diff --git a/src/app/workspace/cmdinput/aichat.tsx b/src/app/workspace/cmdinput/aichat.tsx index 1ac36305..3296704b 100644 --- a/src/app/workspace/cmdinput/aichat.tsx +++ b/src/app/workspace/cmdinput/aichat.tsx @@ -245,6 +245,7 @@ class AIChat extends React.Component<{}, {}> {
+
{this.renderChatMessage(chitem)} diff --git a/src/app/workspace/cmdinput/auxview.less b/src/app/workspace/cmdinput/auxview.less index 8253dc24..b9ab6232 100644 --- a/src/app/workspace/cmdinput/auxview.less +++ b/src/app/workspace/cmdinput/auxview.less @@ -44,8 +44,9 @@ .auxview-content { display: flex; - padding: var(--termpad) calc(var(--termpad) * 2) var(--termpad) calc(var(--termpad) * 3 - 1px); + flex-flow: column nowrap; flex: 1 1 auto; + padding: var(--termpad) calc(var(--termpad) * 2) var(--termpad) calc(var(--termpad) * 3 - 1px); overflow-y: auto; } }