fix conflict

@@ -209,3 +209,60 @@
 .submit:hover {
 .submit:hover {
   background:#066d55;
   background:#066d55;
 }
 }
+
+.suggested {
+    display: block;
+    z-index: 99999999;
+    color: #000;
+    position: absolute;
+    text-align: center;
+    padding: 25px;
+
+    top: 0;
+    right: 0;
+    bottom: 89px;
+    left: 0;
+    overflow-y: scroll;
+}
+
+.suggestedcol {
+    width: 30%;
+    display: inline-block;
+    margin: 0;
+    text-align: center;
+    vertical-align: top;
+}
+
+.suggestedcol ul {
+    list-style: none;
+    padding: 0 25px;
+}
+
+.suggestedrow.title {
+    padding: 100px 20px;
+}
+
+.suggestedcol ul li {
+    background: #5c6aa529;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 10px 0;
+    margin-top: 10px;
+    margin-right: 0px;
+    margin-bottom: 10px;
+    margin-left: 0px;
+}
+
+ul.suggested-options {
+    cursor: pointer;
+}
+
+
+@media (max-width: 991px) {
+  .suggestedcol {
+    width: 100%;
+  }
+  .suggestedrow.title {
+      padding: 10px 10px 0 10px;
+  }
+}

@@ -78,6 +78,7 @@ function App() {
           currentModel,
           currentModel,
         })
         })
       });
       });
+
       const data = await response.json();
       const data = await response.json();
       const parsedData = data.message.trim();
       const parsedData = data.message.trim();
       const programmingKeywords = ['code', 'application', 'controller', 'rails' , 'PHP', 'java', 'javascript', 'script', 'console', 'python', 'programming', 'table'];
       const programmingKeywords = ['code', 'application', 'controller', 'rails' , 'PHP', 'java', 'javascript', 'script', 'console', 'python', 'programming', 'table'];
@@ -96,6 +97,7 @@ function App() {
     } catch (error) {
     } catch (error) {
       const errorMsg = "We apologize for any inconvenience caused due to the delay in the response time. Please try again.";
       const errorMsg = "We apologize for any inconvenience caused due to the delay in the response time. Please try again.";
       setChatLog([...chatLogNew, { user: "gpt", message: `<div class="errormsg"><span>i</span><div class="msg">${errorMsg}</div></div>`} ])
       setChatLog([...chatLogNew, { user: "gpt", message: `<div class="errormsg"><span>i</span><div class="msg">${errorMsg}</div></div>`} ])
+
     }
     }
   }
   }
 
 
@@ -120,6 +122,7 @@ function App() {
         temperature={temperature}
         temperature={temperature}
         clearChat={clearChat}
         clearChat={clearChat}
       />
       />
+
       <ChatBox
       <ChatBox
         chatInput={chatInput}
         chatInput={chatInput}
         chatLog={chatLog}
         chatLog={chatLog}

-// import OpenAISVGLogo from './OpenAISVGLogo'
+import React, { useState } from "react";
+import SuggestedOptions from './suggestedOptions'
 
 
-// Primary Chat Window
-const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) =>
+const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) => {
+
+  const [startedInteraction, setStartedInteraction] = useState(false);
+
+  return (
     <section className="chatbox">
     <section className="chatbox">
+      {!startedInteraction ? (
+        <SuggestedOptions setChatInput={setChatInput}/>
+      ) : (
+        <>
         <div className="chat-log">
         <div className="chat-log">
           {chatLog.map((message, index) => (
           {chatLog.map((message, index) => (
             <ChatMessage key={index} message={message} />
             <ChatMessage key={index} message={message} />
           ))}
           ))}
         </div>
         </div>
+
+        </>
+      )}
       <div className="chat-input-holder">
       <div className="chat-input-holder">
-      <form className="form" onSubmit={handleSubmit}>
+        <form className="form" onSubmit={handleSubmit }>
           <input
           <input
             rows="1"
             rows="1"
             value={chatInput}
             value={chatInput}
-          onChange={(e)=> setChatInput(e.target.value)}
-          className="chat-input-textarea" ></input>
-          <button className="submit" type="submit">Submit</button>
+            onChange={(e)=> {
+              setChatInput(e.target.value);
+            }}
+            className="chat-input-textarea" >
+          </input>
+          <button className="submit" type="submit" onClick={(e)=> {
+              setStartedInteraction(true);
+            }}>Submit</button>
         </form>
         </form>
       </div>
       </div>
     </section>
     </section>
+  )
+}
 
 
-// Individual Chat Message
 const ChatMessage = ({ message }) => {
 const ChatMessage = ({ message }) => {
   return (
   return (
     <div className={`chat-message ${message.user === "gpt" && "chatgpt"}`}>
     <div className={`chat-message ${message.user === "gpt" && "chatgpt"}`}>

+const SuggestedOptions = ({ setChatInput }) => {
+  const examples = ["What is the capital of France?", "Generate a poem about love", "Tell me a joke"];
+  const handleExampleClick = (example) => {
+    setChatInput(example);
+  };
+
+  return (
+    <div className="suggested">
+      <div className="suggestedrow title">
+        <h1>Welcome to AI-PRO</h1>
+        <p>This chatbot is capable of answering questions and generating text based on the input you provide.</p>
+      </div>
+      <div className="suggestedcol rack1">
+        <h2>Examples</h2>
+        <ul className="suggested-options">
+          {examples.map((example, index) => (
+            <li key={index}
+              onClick={() => handleExampleClick(example)}>
+              {example}
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="suggestedcol rack2">
+        <h2>Capabilities</h2>
+        <ul>
+          <li>Answering questions</li>
+          <li>Generating text</li>
+          <li>Providing information on a variety of topics</li>
+        </ul>
+      </div>
+      <div className="suggestedcol rack3">
+        <h2>Limitations</h2>
+        <ul>
+          <li>The chatbot may not have the latest information</li>
+          <li>The chatbot may not be able to answer all questions</li>
+          <li>The chatbot may not provide information in the desired format</li>
+        </ul>
+      </div>
+    </div>
+  );
+
+};
+
+export default SuggestedOptions;
\ No newline at end of file

@@ -28,7 +28,8 @@ app.post('/api', async (req, res) => {
 	const { message, currentModel, temperature } = req.body;
 	const { message, currentModel, temperature } = req.body;
 	const response = await openai.createCompletion({
 	const response = await openai.createCompletion({
 		model: `${currentModel}`,// "text-davinci-003",
 		model: `${currentModel}`,// "text-davinci-003",
-		prompt: `${message}`,
+		prompt: `Converse as if you were an AI assistant. Be friendly and creative. Provide your answer in paragraph. If the answer have line of codes, enclose it with code tag.
+		${message}`,
 		max_tokens: 2500,
 		max_tokens: 2500,
 		temperature,
 		temperature,
 	  });
 	  });