WIP

@@ -29,7 +29,7 @@ function App() {
     fetch(process.env.REACT_APP_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; }
@@ -47,6 +47,8 @@ function App() {
     setChatLog(chatLogNew)
     setChatLog(chatLogNew)
     // 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")
+    console.log(chatLogNew[0])
+    const messageDiv = document.getElementsByClassName("message");
 
 
     const response = await fetch(process.env.REACT_APP_SERVER_URL + "/api", {
     const response = await fetch(process.env.REACT_APP_SERVER_URL + "/api", {
       method: "POST",
       method: "POST",
@@ -59,11 +61,39 @@ function App() {
        })
        })
       });
       });
     const data = await response.json();
     const data = await response.json();
+
+    const parsedData = data.message.trim();
+    console.log("-----------")
+    console.log(data)
+    console.log("===========")
+    console.log(parsedData)
+
+    typeText(messageDiv,parsedData);
+    i = 0;
+
     setChatLog([...chatLogNew, { user: "gpt", message: `${data.message}`} ])
     setChatLog([...chatLogNew, { user: "gpt", message: `${data.message}`} ])
     var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0];
     var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0];
     scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight;
     scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight;
   }
   }
 
 
+
+  let i = 0;
+  const delay = 100;
+  const chat_container = document.getElementsByClassName("chat-log");
+  const typeText = (element, text)=>{
+    let index = 0
+    let interval = setTimeout(()=>{
+      if (i <= text.length){
+        element.innerHTML = text.substring(0, i);
+
+        setTimeout(typeText(element, text), delay);
+        i++
+      }
+    },30)
+    chat_container.scrollTop = chat_container.clientHeight * 100;
+  }
+
+
   function handleTemp(temp) {
   function handleTemp(temp) {
     if(temp > 1){
     if(temp > 1){
       setTemperature(1)
       setTemperature(1)

@@ -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,20 @@ app.post('/api', async (req, res) => {
 		max_tokens: 2500,
 		max_tokens: 2500,
 		temperature,
 		temperature,
 	  });
 	  });
+
+    // let messagess = response.data.choices[0].text
+
+    // let arr_msg1 = messagess.split('<code>')
+    // for (let i = 0; i < arr_msg1.length; i++) {
+    //   messagess = messagess.replace('<code>','<pre class="cdeblk"><code>').replace(': ```',': <pre class="cdeblk"><code>').replace('```','</code></pre>')
+    // }
+
+    // let arr_msg2 = messagess.split('</code>')
+    // for (let i = 0; i < arr_msg2.length; i++) {
+    //   messagess = messagess.replace('</code>','</code></pre>')
+    // }
+
+
 	res.json({
 	res.json({
 		message: response.data.choices[0].text,
 		message: response.data.choices[0].text,
 	})
 	})