Glow

[SamPatt]

@TimHuitt did most of this work. @SamPatt did the placeholder work.

This is what the user will see, and we're happy with how the UI looks and functions within any webpage / React app.

//**------------**/
// ** Return ** //
//**----------**/

  return (
    <div className='auto-component exclude'>
      <div>
        <span className="placeholder-top-left">auto-component</span>
        <hr></hr>
        {responseData ? (
          <JSXParser jsx={responseData} />
        ) : (
          <div className={`auto-component-placeholder ${isRequesting ? 'animate' : ''}`} />
        )}
        <hr></hr>
      </div>
      <div id="auto-component-ui">
        <div 
          id="auto-component-code-container" 
          className={`${!activeTab 
            ? 'auto-component-hidden' 
            : ''} auto-component-code`}
        >
          <pre id="auto-component-code">
            {activeTab === 'request' 
              ? requestHTML 
              : responseHtml}
          </pre>
          <div 
            className="auto-component-copy" 
            onClick={copyToClipboard} 
            style={activeTab !== 'response' 
              ? { display: 'none' } 
              : null}
            >
            copy
          </div>
        </div>
        <div id="auto-component-entry">
            {isRequesting ? (
                <div className="loading-indicator"></div>
            ) : (
                <input 
                type="text" 
                value={currentRequest} 
                onChange={handleChange} 
                onKeyDown={handleKeyDown} 
                placeholder="Enter a request">
                </input>
            )}
            <button onClick={handleGenerate}>Generate</button>
            <button onClick={handleReset}>X</button>
         </div>
        <div>
          <div id='auto-component-tabs'>
           <div 
            className={`${activeTab === 'request' 
              ? 'auto-component-selected' 
              : ''} tab`} onClick={handleRequestTab}
            >
              Request
            </div>
            <div 
              className={`${activeTab === 'response' 
                ? 'auto-component-selected' 
                : ''} tab`} onClick={handleResponseTab}
              >
              Response
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[valenium]

General Feedback Even though the styling could be polished the steps you laid out were extremely easy to follow. I loved the penguin gif that you used. I will definitely be using this tool to finish my UI for my app.

Giving a brief summary to the functionality and use case of the tool would be helpful for users to understand what the tool can be used for, and why they should use it.

Despite not having a utilities folder to separate your service and API functions, I think you guys did an astounding job of organizing your code. I'm sure the organization made it much easier in working in a group setting.

[smackeem]

Firstly, BRILLIANT IDEA! I love the seamless user interface and the fact that the Auto Component was a popup on the screen. Using the images and Videos to demonstrate usability was genius. I loved that the auto component keeps a record of the response and accepts commands to refactor that response to include more components if instructed to do so. Installation is effortless and that's what we love as consumers so thank you for a great product, like I said, brilliant!

Future Suggestions: Given that AI is considered to be futuristic technology, I'd suggest styling the webpage in a way the communicates that. Also, I know as developers we love dark mode but maybe think about having a button to switch between modes for folks who see better in light mode. As well as to add the Results of my request display within the popup instead of at the top of the page. So users could still interact with the AI and see the results even if they scrolled to the bottom of the page while on toggle or you can disable scrolling once the pop up appears.