react-terminal icon indicating copy to clipboard operation
react-terminal copied to clipboard

Additional user inputs after command

Open asnewman opened this issue 2 years ago • 3 comments

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 avatar Oct 01 '22 20:10 asnewman

@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.

bony2023 avatar Oct 02 '22 23:10 bony2023

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.

asnewman avatar Oct 03 '22 17:10 asnewman

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

cinojosa0705 avatar Mar 30 '23 20:03 cinojosa0705