Fix regression in the order of messages in the AI chat auxview (#597)

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 {
+        // This is the filler that will push the chat messages to the bottom until the chat window is full
-            overflow-y: auto;
+        .filler {
-            margin-bottom: 5px;
             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;
+    }
 }

src/app/workspace/cmdinput/aichat.tsx

@@ -245,6 +245,7 @@ class AIChat extends React.Component<{}, {}> {
                     <AIChatKeybindings AIChatObject={this}></AIChatKeybindings>
                 </If>
                 <div className="chat-window" ref={this.chatWindowScrollRef}>
+                    <div className="filler"></div>
                     <For each="chitem" index="idx" of={chatMessageItems}>
                         {this.renderChatMessage(chitem)}
                     </For>

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;
     }
 }