fixes

@@ -209,3 +209,60 @@
 .submit:hover {
   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;
+  }
+}

-// 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">
-    <SuggestedOptions />
+      {!startedInteraction ? (
+        <SuggestedOptions setChatInput={setChatInput}/>
+      ) : (
+        <>
         <div className="chat-log">
           {chatLog.map((message, index) => (
             <ChatMessage key={index} message={message} />
           ))}
         </div>
+
+        </>
+      )}
       <div className="chat-input-holder">
-      <form className="form" onSubmit={handleSubmit}>
+        <form className="form" onSubmit={handleSubmit }>
           <input
             rows="1"
             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>
       </div>
     </section>
+  )
+}
 
-// Individual Chat Message
 const ChatMessage = ({ message }) => {
   return (
     <div className={`chat-message ${message.user === "gpt" && "chatgpt"}`}>

-const SuggestedOptions = () => (
-  <div>
-    <h1>Welcome to ChatGPT Clone</h1>
+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>
-      <li>What is the capital of France?</li>
-      <li>Generate a poem about love</li>
-      <li>What is the most populous country in the world?</li>
+        <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>
@@ -21,6 +37,9 @@ const SuggestedOptions = () => (
           <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 response = await openai.createCompletion({
 		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,
 		temperature,
 	  });