From 54cd2241cc2f40df419f1b464772c81359dc452d Mon Sep 17 00:00:00 2001
From: Will Yennie <wryennie@gmail.com>
Date: Thu, 5 Sep 2024 13:57:20 -0400
Subject: [PATCH] feat: reverse message display order in main webview

---
 resources/chat-view/chat.js            |  7 ++++---
 src/views/chatView/ChatDataProvider.ts | 11 ++++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/resources/chat-view/chat.js b/resources/chat-view/chat.js
index cfbccfc1..94e35f8a 100644
--- a/resources/chat-view/chat.js
+++ b/resources/chat-view/chat.js
@@ -90,14 +90,15 @@
 
     if (role === 'assistant') {
       messageDiv = chatMessages.querySelector('div[data-role="assistant"]:last-child') || 
-                   chatMessages.lastElementChild;
+                   chatMessages.firstElementChild;
       
       if (!messageDiv || messageDiv.getAttribute('data-role') !== 'assistant') {
         messageDiv = document.createElement('div');
         messageDiv.className = 'p-4 assistant';
         messageDiv.setAttribute('data-role', 'assistant');
         messageDiv.innerHTML = `<p class="font-semibold text-zenml">ZenML Assistant</p><div class="message-content"></div>`;
-        chatMessages.appendChild(messageDiv);
+
+        chatMessages.insertBefore(messageDiv, chatMessages.firstChild);
         currentAssistantMessage = '';
       }
       
@@ -106,7 +107,7 @@
       
       requestAnimationFrame(() => {
         contentDiv.innerHTML = marked.parse(currentAssistantMessage);
-        chatMessages.scrollTop = chatMessages.scrollHeight;
+        chatMessages.scrollTop = 0;
       });
     }
   }
diff --git a/src/views/chatView/ChatDataProvider.ts b/src/views/chatView/ChatDataProvider.ts
index cc4f4b31..0e08765e 100644
--- a/src/views/chatView/ChatDataProvider.ts
+++ b/src/views/chatView/ChatDataProvider.ts
@@ -144,7 +144,7 @@ export class ChatDataProvider implements vscode.WebviewViewProvider {
     let convertedTreeData = treeData.map((item) => {
       let iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#808080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0h24v24H0z" fill="none" stroke="none"/></svg>';
       let childrenEl = '';
-      let title = ''
+      let title = '';
 
       if (item.children) {
         iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#808080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>';
@@ -152,7 +152,7 @@ export class ChatDataProvider implements vscode.WebviewViewProvider {
       }
 
       if (item.title) {
-        title = item.title
+        title = item.title;
       }
 
       let checkboxEl = level < 2 ? `<input type="checkbox" class="tree-item-checkbox" value='${item.value}'>` : '';
@@ -218,7 +218,7 @@ export class ChatDataProvider implements vscode.WebviewViewProvider {
           this.streamingMessage.content += letter;
           this.sendMessageToWebview(letter);
           // Add a tiny delay between characters to simulate typing
-          await new Promise(resolve => setTimeout(resolve, 5)); // Adjust delay as needed
+          await new Promise(resolve => setTimeout(resolve, 1)); // Adjust delay as needed
         }
       }
 
@@ -236,6 +236,7 @@ export class ChatDataProvider implements vscode.WebviewViewProvider {
    */
   private renderChatLog(): string {
     const renderer = {
+      // @ts-ignore
       code({ text, lang, escaped, isInline }) {
         const code = text.replace(/\n$/, '') + (isInline ? '' : '\n');
       
@@ -249,9 +250,11 @@ export class ChatDataProvider implements vscode.WebviewViewProvider {
       }
     };
 
+    // @ts-ignore
     marked.use({ renderer });
 
     return this.messages.filter(msg => msg['role'] !== 'system')
+      .reverse()
       .map((message) => {
         let content = marked.parse(message.content);
         if (message.role === 'user') {
@@ -273,6 +276,7 @@ export class ChatDataProvider implements vscode.WebviewViewProvider {
     if (!this.streamingMessage) {return '';}
 
     const renderer = {
+      // @ts-ignore
       code({ text, lang, escaped, isInline }) {
         const code = text.replace(/\n$/, '') + (isInline ? '' : '\n');
       
@@ -286,6 +290,7 @@ export class ChatDataProvider implements vscode.WebviewViewProvider {
       }
     };
 
+    // @ts-ignore
     marked.use({ renderer });
 
     let content = marked.parse(this.streamingMessage.content);