Fix chat history

Author: oeway

public/chat/index.html

@@ -22,8 +22,9 @@
       padding: 10px;
       border: #90909075;
       border-style: solid;
-      max-height: 200px;
+      max-height: 320px;
       overflow: auto;
+      margin-bottom: 10px;
     }
 
     .message-output>img {
@@ -1574,23 +1575,28 @@ <h3 class="text-center">Welcome to BioImage.IO Chatbot</h3>
           }
         }
 
-        window.generateResponse = async function () {
+        window.generateResponse = async function (chatIndex) {
+          let fullTextMessage = textMessage;
           if (envPrompt && envPrompt.length > 0) {
-            textMessage = envPrompt + textMessage
+            fullTextMessage = envPrompt + fullTextMessage
           }
           $("#regenerate-btn-small").remove();
           $("#" + currentMessageId).append(spinner);
           // disable send message
           $('#send-btn').prop('disabled', true);
           try {
+            // fix chat_history to chatIndex
+            chat_history.length = chatIndex;
             // Call the chat function with text and image data
-            response = await svc.chat(textMessage, chat_history, user_profile, statusCallback, sessionId, getSelectedExtensions(), assistantName);
+            response = await svc.chat(fullTextMessage, chat_history, user_profile, statusCallback, sessionId, getSelectedExtensions(), assistantName);
             // const regex = /!\[.*?\]\(data:.+?\)/g;
             // const replacementText = '`image placeholder`';
             // responseWithoutImage = response.replace(regex, replacementText);
             console.log(response)
             chat_history.push({ role: 'user', content: textMessage });
             chat_history.push({ role: 'assistant', content: response.text });
+            console.log("Current Text message:", fullTextMessage);
+            console.log("Current Chat history:", chat_history);
             // Convert the message to HTML using the marked library
             const steps = response.steps;
             let message = response.text && marked(response.text, { renderer: renderer }) || "";
@@ -1609,23 +1615,23 @@ <h3 class="text-center">Welcome to BioImage.IO Chatbot</h3>
             throw e
           }
           finally {
-            $("#" + currentMessageId).append(`<button class="small-grey-button" style="color:gray" id="regenerate-btn-small" onclick="generateResponse()"><i class="fas fa-redo"></i></button>`);
+            $("#" + currentMessageId).append(`<button class="small-grey-button" style="color:gray" id="regenerate-btn-small" onclick="generateResponse(${chatIndex})"><i class="fas fa-redo"></i></button>`);
             // remove spinner
             $('.spinner').remove();
             showReadyStatus();
           }
         }
-
+        const chatIndex = chat_history.length;
         try {
-          await window.generateResponse();
+          await window.generateResponse(chatIndex);
         }
         catch (e) {
           // generate an error message to simulate how Melman from Madagascar would respond to an error
           const message = marked("Oh no! I'm sorry, an unexpected error occurred. Please try again.", { renderer: renderer })
           $(`#content-${currentMessageId}`).html(message + `<button class="btn btn-info" id="regenerate-btn"><i class="fas fa-sync-alt"></i>Regenerate</button>`);
           $('#regenerate-btn').click(async function () {
             $(`#content-${currentMessageId}`).html("Regenerating response...");
-            await window.generateResponse();
+            await window.generateResponse(chatIndex);
           })
           showErrorStatus(`The server failed to respond, please try again. ${e}`);
           console.error(e);