pull latest

@@ -210,6 +210,62 @@
   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: 4vw 20px;
+}
+
+.suggestedcol ul li {
+    background: #5c6aa529;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 0 0 10px;
+}
+
+ul.suggested-options {
+    cursor: pointer;
+    overflow-x: hidden;
+    height: 200px;
+    padding-right: 5px !important;
+}
+
+
+@media (max-width: 991px) {
+  .suggestedcol {
+    width: 100%;
+  }
+  .suggestedrow.title {
+      padding: 10px 10px 0 10px;
+  }
+}
+
 .message .error_msg {
 .message .error_msg {
     background: rgb(18 0 255 / 20%);
     background: rgb(18 0 255 / 20%);
     padding: 10px;
     padding: 10px;

@@ -23,6 +23,8 @@ function App() {
   // clear chats
   // clear chats
   function clearChat(){
   function clearChat(){
     setChatLog([]);
     setChatLog([]);
+    setChatInput("");
+    setStartedInteraction(false);
   }
   }
 
 
   function getEngines(){
   function getEngines(){
@@ -43,7 +45,7 @@ function App() {
   async function handleSubmit(e){
   async function handleSubmit(e){
     e.preventDefault();
     e.preventDefault();
     // console.log(chatInput)
     // console.log(chatInput)
-    const userInput = ['what', 'why', 'when', 'where' , 'which', 'did', 'do', 'how', 'can', 'are', 'who', 'hey'];
+    const userInput = ['what', 'why', 'when', 'where' , 'which', 'did', 'do', 'how', 'can', 'are', 'who'];
     const userInputRegex = new RegExp(`\\b(${userInput.join('|')})\\b`, 'gi');
     const userInputRegex = new RegExp(`\\b(${userInput.join('|')})\\b`, 'gi');
     const inputMatches = chatInput.match(userInputRegex);
     const inputMatches = chatInput.match(userInputRegex);
 
 
@@ -113,7 +115,7 @@ function App() {
     }
     }
 
 
   }
   }
-
+  const [startedInteraction, setStartedInteraction] = useState(false);
   return (
   return (
     <div className="App">
     <div className="App">
       <SideMenu
       <SideMenu
@@ -124,10 +126,13 @@ function App() {
         temperature={temperature}
         temperature={temperature}
         clearChat={clearChat}
         clearChat={clearChat}
       />
       />
+
       <ChatBox
       <ChatBox
         chatInput={chatInput}
         chatInput={chatInput}
         chatLog={chatLog}
         chatLog={chatLog}
         setChatInput={setChatInput}
         setChatInput={setChatInput}
+        startedInteraction={startedInteraction}
+        setStartedInteraction={setStartedInteraction}
         handleSubmit={handleSubmit} />
         handleSubmit={handleSubmit} />
     </div>
     </div>
   );
   );

-// 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, startedInteraction, setStartedInteraction}) => {
+
+  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"}`}>

@@ -172,6 +172,37 @@ span.info {
     margin: 15px 5px;
     margin: 15px 5px;
 }
 }
 
 
+.suggested::-webkit-scrollbar {
+  display: none;
+}
+
+ul.suggested-options::-webkit-scrollbar{
+    /*display: none;*/
+  }
+
+/* Let's get this party started */
+ul.suggested-options::-webkit-scrollbar {
+    width: 8px;
+}
+
+/* Track */
+ul.suggested-options::-webkit-scrollbar-track {
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+
+/* Handle */
+ul.suggested-options::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    background: #48b0e9;
+}
+ul.suggested-options::-webkit-scrollbar-thumb:window-inactive {
+  background: #4291bd;
+}
+
+
+
 code br:nth-child(-n+2) {
 code br:nth-child(-n+2) {
     display: none;
     display: none;
 }
 }

+const SuggestedOptions = ({ setChatInput }) => {
+  const examples = [
+    "Write an email requesting a 3-day vacation leave to my manager.",
+    "Compose a song about nationalism and love for the country.",
+    "Give me 3 easy-to-cook food recipes that I can prepare for a date night at home.",
+    "Give me 5 of the best dog shampoos and conditioners I can find on Amazon.",
+    "Write a business pitch for a food truck that serves European-Asian food fusion called EAT Express.",
+    "Write a Youtube script about how to file taxes as a social media influencer in the US.",
+    "Write a resume for an architect with 3 years of experience with green technology and sustainability.",
+    "Give me 7 motivational quotes for start-up businesses to be used in social media posts.",
+    "Write an article outline about the comparison of DC and Marvel movies.",
+    "Give me a one-week itinerary for a trip to Hawaii.",
+    "Write a short children's story about a dolphin that wanted to fly.",
+    "Explain the difference between a samurai and a ninja.",
+    "Explain how to create a blue button in html that turns to yellow on mouse hover."
+    ];
+  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>Remembers the user's earlier statement in the ongoing discussion.</li>
+          <li>Allows the user to add more information or correct errors.</li>
+          <li>Trained to deny requests that are not appropriate.</li>
+        </ul>
+      </div>
+      <div className="suggestedcol rack3">
+        <h2>Limitations</h2>
+        <ul>
+          <li>May sometimes give wrong or incorrect information.</li>
+          <li>May at times produce harmful instructions or biased content.</li>
+          <li>Limited knowledge of what's been happening in the world since 2021.</li>
+        </ul>
+      </div>
+    </div>
+  );
+
+};
+
+export default SuggestedOptions;
\ No newline at end of file

@@ -34,10 +34,13 @@ app.use(rateLimiter)
 app.post('/api', async (req, res) => {
 app.post('/api', async (req, res) => {
 	const { message, currentModel, temperature } = req.body;
 	const { message, currentModel, temperature } = req.body;
 
 
-	let query_prompt = `${message}`;
-
+	let greetingPrompt = 'Hello, how can I assist you?'
+	const greetings = ['hi', 'hello', 'hey']
+	if (greetings.some((greeting) => message.toLowerCase().includes(greeting))) {
+		greetingPrompt = 'Hello, how can I help you today?'
+	}
+	let query_prompt = `${greetingPrompt}\n${message}`;
 	str_length = req.body.message.split(' ').length;
 	str_length = req.body.message.split(' ').length;
-
 	if (str_length>=800){
 	if (str_length>=800){
 		arr_body = req.body.message.split("\n");
 		arr_body = req.body.message.split("\n");
 		if (arr_body.length>=4){
 		if (arr_body.length>=4){
@@ -48,7 +51,6 @@ app.post('/api', async (req, res) => {
 			query_prompt = arr_body.join("\n")
 			query_prompt = arr_body.join("\n")
 		}
 		}
 	}
 	}
-
 	try {
 	try {
 		const response = await openai.createCompletion({
 		const response = await openai.createCompletion({
 			model: `${currentModel}`,// "text-davinci-003",
 			model: `${currentModel}`,// "text-davinci-003",
@@ -56,11 +58,9 @@ app.post('/api', async (req, res) => {
 			max_tokens: 3000,
 			max_tokens: 3000,
 			temperature,
 			temperature,
 		  });
 		  });
-
 		res.json({
 		res.json({
 			message: response.data.choices[0].text,
 			message: response.data.choices[0].text,
 		})
 		})
-
 	} catch (e) {
 	} catch (e) {
   		let error_msg = e.response.data.error.message ?  e.response.data.error.message : '';
   		let error_msg = e.response.data.error.message ?  e.response.data.error.message : '';
   		if (error_msg.indexOf('maximum context length')>=0){
   		if (error_msg.indexOf('maximum context length')>=0){