From 5e99ec93de3a260e49441cece2397cd3f5546b64 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Fri, 22 Sep 2023 00:03:29 +0200
Subject: [PATCH] scroll to bottom after every line

---
 libs/remix-ui/renderer/src/lib/renderer.tsx      |  6 +++---
 .../terminal/src/lib/remix-ui-terminal.tsx       | 16 ++++++++++++----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/libs/remix-ui/renderer/src/lib/renderer.tsx b/libs/remix-ui/renderer/src/lib/renderer.tsx
index 27959bda6c..084c510517 100644
--- a/libs/remix-ui/renderer/src/lib/renderer.tsx
+++ b/libs/remix-ui/renderer/src/lib/renderer.tsx
@@ -96,11 +96,11 @@ export const Renderer = ({message, opt = {}, plugin}: RendererProps) => {
           <div className="close" data-id="renderer" onClick={handleClose}>
             <i className="fas fa-times"></i>
           </div>
-          <div className="d-flex flex-row-reverse">
-            <span className="ml-2 pt-1 p-1" >
+          <div className="d-flex pt-1 flex-row-reverse">
+            <span className="ml-3 pt-1 py-1" >
               <CopyToClipboard content={messageText} className={` p-0 m-0 far fa-copy ${classList}`} direction={'top'} />
             </span>
-            <span className="btn btn-success btn-sm" onClick={() => { askGtp() }}>ASK GPT</span>
+            <span className="border border-success text-success btn-sm" onClick={() => { askGtp() }}>ASK GPT</span>
           </div>
         </div>
       )}
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index 258c64c740..6a58e23cc9 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -736,7 +736,8 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
                         return (
                           <div className={classNameBlock} data-id="block" key={index}>
                             <span ref={(element) => {
-                              typewrite(element, msg ? msg.toString() : null)
+                              typewrite(element, msg ? msg.toString() : null, () => scrollToBottom()
+                              )
                             }} className={x.style}>
                             </span>
                           </div>
@@ -754,7 +755,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
                     typeWriterIndexes.current.push(index)
                     return (
                       <div className={classNameBlock} data-id="block" key={index}> <span ref={(element) => {
-                        typewrite(element, x.message)
+                        typewrite(element, x.message, () => scrollToBottom())
                       }} className={x.style}></span></div>
                     )
                   } else {
@@ -803,14 +804,21 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   )
 }
 
-const typewrite = (elementsRef, message) => {  
+const typewrite = (elementsRef, message, callback) => {  
   (() => {
     let count = 0
     const id = setInterval(() => {
       if (!elementsRef) return
       count++
       elementsRef.innerText = message.substr(0, count)
-      if (message === count) clearInterval(id)  
+      // scroll when new line ` <br>
+      if (elementsRef.lastChild.tagName === `BR`) {
+        callback()
+      }
+      if (message.length === count) {
+        clearInterval(id)
+        callback()
+      }
     }, 5)
   })()
 }