type writer

ethereum · Jun 27, 2023 · ca2c2a9 · ca2c2a9
1 parent c7c308b
commit ca2c2a9
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 8 deletions.
diff --git a/apps/remix-ide/src/app/plugins/openaigpt.tsx b/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
   }
 }
diff --git a/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts b/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,

diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
@@ -73,6 +73,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)
@@ -314,6 +315,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
 
   const handleClearConsole = () => {
     setClearConsole(true)
+    typeWriterIndexes.current = []
     dispatch({ type: 'clearconsole', payload: [] })
     inputEl.current.focus()
   }
@@ -606,19 +608,41 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
                       <div className={classNameBlock} data-id="block" key={i}><span className={x.style}>{ stringified } </span></div>
                     )
                   } else {
-                    return (
-                      <div className={classNameBlock} data-id="block" key={i}><span className={x.style}>{msg ? msg.toString() : null}</span></div>
-                    )
+                    // 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}> <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}> <span className={x.style}> {x.message}</span></div>
+                    <div className={classNameBlock} data-id="block" key={index}> <span ref={(element) => {
+                      typewrite(element, x.message)
+                    }} className={x.style}></span></div>
                   )
+                } else {
+                  if (typeof x.message !== 'function') {
+                    return (
+                      <div className={classNameBlock} data-id="block" key={index}> <span className={x.style}> {x.message}</span></div>
+                    )
+                  }
                 }
               }
-            })}
+            })
+
+            }
             <div ref={messagesEndRef} />
           </div>
           { isOpen && <div id="terminalCli" data-id="terminalCli" className="remix_ui_terminal_cli position-absolute w-100" onClick={focusinput}>
@@ -655,6 +679,17 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   )
 }
 
+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

diff --git a/libs/remix-ui/terminal/src/lib/types/terminalTypes.ts b/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'