scroll to bottom after every line

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

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)
   })()
 }