fix

-node_modules
\ No newline at end of file
+node_modules
+.env
\ No newline at end of file

-# ChatGPT AI-Pro Installation
-
-## Setting up local development
-
-### Set up ENV Variables
-1. Set up environment variable `.env` file in root and inside */client* folder. In root, duplicate the `env-template` file and rename it to `.env`. Inside the */client* folder, create `.env` file
-2. In the root `.env` file, define the needed OpenAI environment variables in your application.
-
-* Sign up here [https://beta.openai.com/signup](https://beta.openai.com/signup). You can use your Google or Microsoft account to sign up if you don't want to create using an email/password combination. You may need a valid mobile number to verify your account. 
-* Now, visit your OpenAI key page [https://beta.openai.com/account/api-keys](https://beta.openai.com/account/api-keys)
-* Create a new key by clicking the "Create new secret key" button.
-	
-3. You can Values should be a string, enclosed with ``""``  Example : 
- 
-     ```
-     OPENAI_API_KEY=“sk-xxxxxxx”
-     OPENAI_API_ORG=“org-xxxxxxxx”
-     ```
-
-4. In the `.env` file of the client, define the SERVER_URL environment variable in your application. 
-5. Name the variable starting with **REACT_APP_** and Value must **not** enclosed with commas `""` Example :
-
-     ```
-     REACT_APP_SERVER_URL=http://localhost:3080/
-    ```
-
-### NPM Install and Run Application
-**Note:** Prepare 2 Terminals.
-1. On the first terminal, run `npm install` on **root**.  After that run `node index.js` 
-2. On the second terminal, run `npm install` inside the **/client**. Then run `npm run start`
\ No newline at end of file
+# ChatGPT Server
+
+## Installation
+
+npm install on the root directory.
+
+## Create ENV Variables
+
+Create an .env file in the root directory of your application.
+Duplicate the env-template and rename to .env
+In the .env file, define the environment variables you want to use in your application. ex.
+
+`API_KEY="sk-xxxxxxxx"`
+`API_ORG="org-xxxxxxx"`
+
+## Run server
+
+Run server on the root directory
+
+`node index.js`
+
+### Additional Configuration
+
+After running server, proceed to /client README.md for instructions

@@ -6,6 +6,15 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 
 npm install on the /client directory.
 npm install on the /client directory.
 
 
+
+## Create ENV Variables
+
+Create an .env file in the /client directory of your application.
+Duplicate the env-template and rename to .env
+In the .env file, define the environment variables you want to use in your application. ex.
+
+REACT_APP_SERVER_URL=http://xxxxxx/
+
 ## Available Scripts
 ## Available Scripts
 
 
 In the /client directory, you can run:
 In the /client directory, you can run:

+REACT_APP_SERVER_URL=
\ No newline at end of file

@@ -26,10 +26,10 @@ function App() {
   }
   }
 
 
   function getEngines(){
   function getEngines(){
-    fetch(process.env.SERVER_URL + "models")
+    fetch(process.env.REACT_APP_SERVER_URL + "/models")
     .then(res => res.json())
     .then(res => res.json())
     .then(data => {
     .then(data => {
-      console.log(data.models.data)
+      // console.log(data.models.data)
       // set models in order alpahbetically
       // set models in order alpahbetically
       data.models.data.sort((a, b) => {
       data.models.data.sort((a, b) => {
         if(a.id < b.id) { return -1; }
         if(a.id < b.id) { return -1; }
@@ -48,7 +48,7 @@ function App() {
     // fetch response to the api combining the chat log array of messages and seinding it as a message to localhost:3000 as a post
     // fetch response to the api combining the chat log array of messages and seinding it as a message to localhost:3000 as a post
     const messages = chatLogNew.map((message) => message.message).join("\n")
     const messages = chatLogNew.map((message) => message.message).join("\n")
 
 
-    const response = await fetch(process.env.SERVER_URL + "api", {
+    const response = await fetch(process.env.REACT_APP_SERVER_URL + "/api", {
       method: "POST",
       method: "POST",
       headers: {
       headers: {
         "Content-Type": "application/json"
         "Content-Type": "application/json"
@@ -59,7 +59,25 @@ function App() {
        })
        })
       });
       });
     const data = await response.json();
     const data = await response.json();
-    setChatLog([...chatLogNew, { user: "gpt", message: `${data.message}`} ])
+    const parsedData = data.message.trim();
+    console.log(parsedData)
+    const programmingKeywords = ['code', 'application', 'controller', 'rails' , 'PHP', 'java', 'javascript', 'script', 'console', 'python', 'programming', 'table'];
+
+    const regex = new RegExp(`\\b(${programmingKeywords.join('|')})\\b`, 'gi');
+    // console.log(regex)
+    const matches = parsedData.match(regex);
+    // console.log(matches);
+    if (!matches) {
+      var replaceTags = (parsedData.replace(/(?:\r\n|\r|\n)/g, '<br>').replace(/\./g, '. '))
+      // console.log("not programming!")
+    } else {
+        replaceTags = (parsedData.replace(':',':<code>').replace('<?','&#60;?').replace('?>','?&#62;').replace(/\n/g, '<br>'))
+      // console.log("programming!")
+      //.replace('<?','&#60;' + '?').replace('?>','?'+'&#62;')
+    }
+    setChatLog([...chatLogNew, { user: "gpt", message: `${replaceTags}`} ])
+
+    // setChatLog([...chatLogNew, { user: "gpt", message: `<div>${parsedData}</div>`} ])
     var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0];
     var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0];
     scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight;
     scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight;
   }
   }

@@ -38,10 +38,15 @@ span.info {
 }
 }
 
 
 .chat-message.chatgpt {
 .chat-message.chatgpt {
-  background-color:#ffffff !important;
+  background: #feffff; /* Old browsers */
+  background: -moz-linear-gradient(45deg,  #feffff 0%, #ddf1f9 55%, #eff7f5 98%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(45deg,  #feffff 0%,#ddf1f9 55%,#eff7f5 98%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(45deg,  #feffff 0%,#ddf1f9 55%,#eff7f5 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#eff7f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 }
 }
 .chat-message-center {
 .chat-message-center {
-  padding: 20px 10px !important;
+  padding: 20px 10vw !important;
+  max-width: none;
 }
 }
 
 
 .avatar {
 .avatar {
@@ -56,6 +61,34 @@ span.info {
   border-radius:5px !important;
   border-radius:5px !important;
   box-shadow: 0px 5px 5px -3px black !important;
   box-shadow: 0px 5px 5px -3px black !important;
 }
 }
+
+.chat-log::-webkit-scrollbar{
+    /*display: none;*/
+  }
+
+/* Let's get this party started */
+.chat-log::-webkit-scrollbar {
+    width: 8px;
+}
+
+/* Track */
+.chat-log::-webkit-scrollbar-track {
+    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+
+/* Handle */
+.chat-log::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    background: #cccccc;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+}
+.chat-log::-webkit-scrollbar-thumb:window-inactive {
+  background: #eeeeee;
+}
+
 .message {
 .message {
   padding: 7px 20px !important;
   padding: 7px 20px !important;
   line-height: 25px;
   line-height: 25px;
@@ -98,4 +131,50 @@ span.info {
 .ai-logo-container {
 .ai-logo-container {
     text-align: center;
     text-align: center;
     padding: 10px 0;
     padding: 10px 0;
+}
+
+.message code {
+    background: #303030;
+    width: 100%;
+    color: #fff;
+    padding: 15px 20px;
+    border-radius: 10px;
+    font-family: monospace, sans-serif;
+    font-size: 12px;
+    display: block;
+    margin: 15px 5px;
+}
+
+code br:nth-child(-n+2) {
+    display: none;
+}
+
+@media (min-width: 1280px) {
+  .message {
+      font-size: 18px;
+  }
+}
+
+@media (max-width: 1279px) {
+  .message {
+      font-size: 16px;
+  }
+}
+
+@media (max-width: 991px) {
+  .message {
+      font-size: 14px;
+  }
+  .chat-message-center {
+    padding: 20px 5vw !important;
+  }
+}
+
+@media (max-width: 414px) {
+  .message {
+      font-size: 14px;
+  }
+  .chat-message-center {
+    padding: 20px 5vw !important;
+  }
 }
 }
\ No newline at end of file

 OPENAI_API_ORG=
 OPENAI_API_ORG=
-OPENAI_API_KEY=
-SERVER_URL=
\ No newline at end of file
+OPENAI_API_KEY=
\ No newline at end of file

@@ -5,7 +5,7 @@ const cors = require('cors')
 require('dotenv').config()
 require('dotenv').config()
 
 
 // Open AI Configuration
 // Open AI Configuration
-console.log(process.env.OPENAI_API_ORG)
+// console.log(process.env.OPENAI_API_ORG)
 const configuration = new Configuration({
 const configuration = new Configuration({
 	organization: process.env.OPENAI_API_ORG,
 	organization: process.env.OPENAI_API_ORG,
     apiKey: process.env.OPENAI_API_KEY,
     apiKey: process.env.OPENAI_API_KEY,
@@ -32,6 +32,7 @@ app.post('/api', async (req, res) => {
 		max_tokens: 2500,
 		max_tokens: 2500,
 		temperature,
 		temperature,
 	  });
 	  });
+
 	res.json({
 	res.json({
 		message: response.data.choices[0].text,
 		message: response.data.choices[0].text,
 	})
 	})