react-terminal
react-terminal copied to clipboard
Additional user inputs after command
Wonder if it is currently possible for additional user prompts. For example, take the following interaction:
>>> create-resource
Name of resource? hello-world
How big is the resource (1-5)?: 4
Resource created!
>>>
In this example, user types in create-resource
and is asked additional prompts. I'm willing to do the implementation myself but want to make sure it isn't possible already, and if not, any gotchas/obvious paths to go down for the implementation.
@asnewman That's a great idea. The terminal component current works on the concept of single input to single output and doesn't support these flows as you mentioned, so a PR on this is always welcome.
If I were to implement this, I would think this as a completely different type of commands, more like apps
. These apps would have defined flows/conditions and the user would pass these in another prop field. Something like:
const apps = {
"create-resource": [
[isInput, "How big is the resource (1-5)?"],
(lastOutput) => [isInput, `You have selected the size of ${lastOutput}. Are you sure? (y/n)`, lastOutput >= 1 && lastOutput <= 5]
(lastOutput) => ["string", "Resource created!", lastOutput.toLowerCase() == 'y'],
]
}
<ReactTerminal apps={apps}
/>
The logic should be residing somewhere here in the editor hook.
These apps would have defined flows/conditions and the user would pass these in another prop field
I like this strategy! I'll work on a PR.
I was looking for a solution for this and actually came up with an Idea to how to solve this, here @asnewman take a look: I am adding elements into my responses and then have a button that handles the values I passed
const commands1 = {
whoami: "jackharper",
cd: 'ya mum',
market: (market) => `selected market: ${market}-usd`,
dep: (num) => {setDeployments(num); return <>deployments: {deployments}<br/>enter 'place' to set up deployments</>},
place: () => {
if (deployments > 0) {
let a = []
for (let i = 0; i < deployments; i++) {
a.push(
<><br/>[deployment {i + 1}]<br/>size: <input/><br/>side: <input/><br/>price: <input/><br/><button>click to add</button><br/></>
)
} return a
} else {
return <>please enter # of deployments...<br/>exp: <code>dep {'<number>'}</code></>
}
},
cancel: (index) => `Canceled order #${index}`,
help: (<><br/>here are the commands:<br/><br/><code>`market`: set market (string)</code><br/></>)
};