diff --git a/apps/remix-ide/src/app/plugins/openaigpt.tsx b/apps/remix-ide/src/app/plugins/openaigpt.tsx index c2c51e88a6..e7fe7ecc85 100644 --- 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 } } \ No newline at end of file diff --git a/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts b/libs/remix-ui/terminal/src/lib/reducers/terminalReducer.ts index 61ba9d85fc..38f860fb84 100644 --- 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 index db3c012714..7a6cdb002f 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx +++ b/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) => { ) } else { - return ( -
- {msg ? msg.toString() : null} -
- ) + // 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 ( +
{ + typewrite(element, msg ? msg.toString() : null) + }} className={x.style}>
+ ) + } else { + return ( +
{msg ? msg.toString() : null}
+ ) + } } }) } 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 ( -
- {' '} - {x.message} -
+
{ + typewrite(element, x.message) + }} className={x.style}>
) + } else { + if (typeof x.message !== 'function') { + return ( +
{x.message}
+ ) + } } } })} @@ -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('