type writer

apps/remix-ide/src/app/plugins/openaigpt.tsx

@@ -31,7 +31,7 @@ export class OpenAIGpt extends Plugin {
     })).json()
     
     console.log(result)
-    this.call('terminal', 'log', { type: 'typewriterlog', value: result.choices[0].message.content })
+    this.call('terminal', 'log', { type: 'typewritersuccess', value: result.choices[0].message.content })
     return result.data
   }
 }

libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts

@@ -1,4 +1,4 @@
-import { CLEAR_CONSOLE, CMD_HISTORY, EMPTY_BLOCK, ERROR, HTML, INFO, KNOWN_TRANSACTION, LISTEN_ON_NETWORK, LOG, NEW_TRANSACTION, SCRIPT, UNKNOWN_TRANSACTION, WARN } from '../types/terminalTypes'
+import { CLEAR_CONSOLE, CMD_HISTORY, EMPTY_BLOCK, ERROR, HTML, INFO, KNOWN_TRANSACTION, LISTEN_ON_NETWORK, LOG, TYPEWRITERLOG, NEW_TRANSACTION, SCRIPT, UNKNOWN_TRANSACTION, WARN } from '../types/terminalTypes'
 
 export const initialState = {
   journalBlocks: [
@@ -151,6 +151,11 @@ export const registerScriptRunnerReducer = (state, action) => {
       ...state,
       journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, style: 'text-log', provider: action.payload.provider })
     }
+  case TYPEWRITERLOG:
+    return {
+      ...state,
+      journalBlocks: initialState.journalBlocks.push({ message: action.payload.message, typewriter: true, style: 'text-log', provider: action.payload.provider })
+    }
   case INFO:
     return {
       ...state,

libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

@@ -84,6 +84,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   // terminal inputRef
   const inputEl = useRef(null)
   const messagesEndRef = useRef(null)
+  const typeWriterIndexes = useRef([])
 
   // terminal dragable
   const panelRef = useRef(null)
@@ -389,6 +390,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
 
   const handleClearConsole = () => {
     setClearConsole(true)
+    typeWriterIndexes.current = []
     dispatch({ type: 'clearconsole', payload: [] })
     inputEl.current.focus()
   }
@@ -723,21 +725,36 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
                         </div>
                       )
                     } else {
-                      return (
+                      // typeWriterIndexes: we don't want to rerender using typewriter when the react component updates
-                        <div className={classNameBlock} data-id="block" key={i}>
+                      if (x.typewriter && !typeWriterIndexes.current.includes(index)) {
-                          <span className={x.style}>{msg ? msg.toString() : null}</span>
+                        typeWriterIndexes.current.push(index)
-                        </div>
+                        return (
-                      )
+                          <div className={classNameBlock} data-id="block" key={index}> <span ref={(element) => {
+                            typewrite(element, msg ? msg.toString() : null)
+                          }} className={x.style}></span></div>
+                        )
+                    } else {
+                        return (
+                          <div className={classNameBlock} data-id="block" key={i}><span className={x.style}>{msg ? msg.toString() : null}</span></div>
+                        )
+                      }
                     }
                   })
                 } else {
-                  if (typeof x.message !== 'function') {
+                  // typeWriterIndexes: we don't want to rerender using typewriter when the react component updates
+                  if (x.typewriter && !typeWriterIndexes.current.includes(index)) {
+                    typeWriterIndexes.current.push(index)
                     return (
-                      <div className={classNameBlock} data-id="block" key={index}>
+                      <div className={classNameBlock} data-id="block" key={index}> <span ref={(element) => {
-                        {' '}
+                        typewrite(element, x.message)
-                        <span className={x.style}> {x.message}</span>
+                      }} className={x.style}></span></div>
-                      </div>
                     )
+                  } else {
+                    if (typeof x.message !== 'function') {
+                      return (
+                        <div className={classNameBlock} data-id="block" key={index}> <span className={x.style}> {x.message}</span></div>
+                      )
+                    }
                   }
                 }
               })}
@@ -778,7 +795,18 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   )
 }
 
-function isHtml(value) {
+const typewrite = (elementsRef, message) => {  
+  (() => {
+    let count = 0
+    const id = setInterval(() => {
+      count++
+      elementsRef.innerText = message.substr(0, count)
+      if (message === count) clearInterval(id)  
+    }, 5)
+  })()
+}
+
+function isHtml (value) {
   if (!value.indexOf) return false
   return value.indexOf('<div') !== -1 || value.indexOf('<span') !== -1 || value.indexOf('<p') !== -1 || value.indexOf('<label') !== -1 || value.indexOf('<b') !== -1
 }

libs/remix-ui/terminal/src/lib/types/terminalTypes.ts

@@ -15,6 +15,7 @@ export const NEW_CALL = 'newCall'
 
 export const HTML = 'html'
 export const LOG = 'log'
+export const TYPEWRITERLOG = 'typewriterlog'
 export const INFO = 'info'
 export const WARN = 'warn'
 export const ERROR = 'error'