main.js

class App{
 constructor() {
    this.apiKey = null;
    this.model = null;
    this.inputs = {
      text: "",
      apiKeyInput: "",
      modelInput: ""
    };
    this.states = {
      input: 0,
      apiKey: 1,
      model: 2
    };
    this.state = this.states.input;
 }

 handleKeyPress = (e) => {
    if (e.keyCode === 13) {
      if (this.state === this.states.input) {
        this.setState(this.states.apiKey);
      } else if (this.state === this.states.apiKey) {
        this.setState(this.states.model);
      } else if (this.state === this.states.model) {
        this.setState(this.states.input);
      }
    }
 }

 handleInputChange = (e) => {
    const inputValue = e.target.value;
    if (this.state === this.states.input) {
      this.inputs.text = inputValue;
    } else if (this.state === this.states.apiKey) {
      this.inputs.apiKeyInput = inputValue;
    } else if (this.state === this.states.model) {
      this.inputs.modelInput = inputValue;
    }
 }

 setState = (newState) => {
    console.log("setState", newState);
    if (newState === this.states.input) {
      this.inputs.apiKey = this.inputs.apiKeyInput;
      this.inputs.model = this.inputs.modelInput;
    }
    this.state = newState;
 }

 render() {
    return (
      <div className="prose">
        <div className="mx-16 mb-10">
          <h1>ChatGPT</h1>
          <p>ChatGPT is a simple chat interface that uses the OpenAI API to generate responses based on the user's input. You can use this app to test your OpenAI API keys and models, or just to have a fun conversation with a chatbot!</p>
          <div className="flex justify-center mt-16">
            <input
              type="text"
              value={this.inputs.text}
              onKeyPress={(e) => this.handleKeyPress(e)}
              onChange={(e) => this.handleInputChange(e)}
              className="w-full round"
              autoFocus
              x-data={{ input: this.inputs.text }}
              x-cloak
              x-show={state}
            />
            <button className="m-2 py-2 px-4 text-white bg-blue-600">Send</button>
          </div>
          <div className="flex justify-center mt-8">
            {this.state === this.states.input ? (
              <div className="m-2 p-2 rounded text-gray-800">
                <label className="text-sm text-black">OpenAI API Key:</label>
                <input
                 type="text"
                 value={this.inputs.apiKeyInput}
                 onKeyPress={(e) => this.handleKeyPress(e)}
                 onChange={(e) => this.handleInputChange(e)}
                 className="border border-gray-400 rounded w-full p-2"
                />
              </div>
            ) : null}
            {this.state === this.states.apiKey ? (
              <div className="m-2 p-2 rounded text-gray-800">
                <label className="text-sm text-black">OpenAI Model:</label>
                <select
                 value={this.inputs.modelInput}
                 onChange={(e) => this.handleInputChange(e)}
                 className="border border-gray-400 rounded w-full p-2"
                >
                 <option value="davinci">Davinci</option>
                 <option value="explorer">Explorer</option>
                 <option value="curie">Curie</option>
                </select>
              </div>
            ) : null}
          </div>
        </div>
      </div>
    );
 }
}

export default App;