conrad-x / react-chatbot-web Goto Github PK

This project was generated with Create React App with React version 18.2.0 and comprises of the web client interface for chatbot-server, which generates responses based on OpenAI assistant.

• Run npm start for a dev server. Navigate to http://localhost:3000/.
• Run npm run build to build the project. The build artifacts will be stored in the build/ directory.

Firstly, since this chatbot is based in React, it will only be compatible with react projects <= 18.2.0, please note all styles have written in .css files. Here's the breakdown of the application as stated below

.
├── public                  
├── src                     
    ├── components
        ├── ChatPanel       
        ├── Header
        ├── MessagePanel
        ├── UserInput
    ├── App.js
    ├── App.css
    ├── index.js
    ├── index.css
├── package.json             
├── README.md                

The ChatPanel component acts as a wrapper of the whole chatbot functionality, if you plan on integrating it into your codebase, you would need all component folders listed here. After moving all the components, I would suggest that you take a look at App.js and App.css which transforms the ChatPanel component into a mini widget that can be minimized and maximized as shown in the video attached below. The styles and functionality listed in App.css and App.js would need to be replicated within the component you intend on integrating with.

Secondly, please make sure to place the following within index.html, these are a few styling and functional dependency of the bot.

    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap"
      rel="stylesheet"
    />

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
    />

    <!-- Used to fetch IP & Mac Address to uniquely identify the machine -->
    <script>
      fetch("https://api.ipify.org?format=json")
        .then((response) => response.json())
        .then((data) => {
          localStorage.setItem("ip", data.ip);
        })
        .catch((error) => {
          console.log("Error:", error);
        });
    </script>

The environment variable used within this application exists within two files .env.development and .env.production, the following is the variable used for development mode application which will be picked up whenever you run npm start

REACT_APP_BASE_URL=http://localhost:8000

You will be creating another file named .env.production with the same key variable with the value of your production server

Please note that no additional tool or code needs to be written as react handles the .env files themeselves, whenever you run npm start the priority of .env.development would be the highest and whenever you run npm run build the priority of .env.production would be the highest.

Link To Color Palette

The following video shows how the chatbot is segregated within the host application and its functionality in terms of usage

The following screenshot references to the mobile view comprising of it's UI components

The following screenshot refers to the mobile view when the bot experiences an error from the server, the possible error case is internal server error or server not responding