(hero): demo queries on click

frontend/.env.development

@@ -1,3 +1,3 @@
 # Please put appropriate value
-VITE_API_HOST=http://0.0.0.0:7091
+VITE_API_HOST=http://127.0.0.1:7091
 VITE_API_STREAMING=true

frontend/src/Hero.tsx

@@ -1,13 +1,25 @@
-import { useDarkTheme, useMediaQuery } from './hooks';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
-import { useSelector } from 'react-redux';
-import { selectConversations } from './preferences/preferenceSlice';
-import Arrow2 from './assets/dropdown-arrow.svg';
-export default function Hero({ className = '' }: { className?: string }) {
-  // const isMobile = window.innerWidth <= 768;
-  const { isMobile } = useMediaQuery();
-  const [isDarkTheme] = useDarkTheme();
-  const conversations = useSelector(selectConversations);
+const demos: { header: string, query: string }[] = [
+  {
+    header: "Learn about DocsGPT",
+    query: "What is DocsGPT ?"
+  },
+  {
+    header: "Summarise documentation",
+    query: "Summarise current context"
+  },
+  {
+    header: "Write Code",
+    query: "Write code for api request for /api/answer"
+  },
+  {
+    header: "Learning Assistance",
+    query: "Write potential questions that can be answered by context"
+  }
+];
+
+export default function Hero({ handleQuestion  }: { handleQuestion: (question: string) => void }) {
+
   return (
     <div
       className={`mt-14 mb-4 flex w-11/12 sm:w-7/12 flex-col justify-end text-black-1000 dark:text-bright-gray lg:mt-6`}
@@ -19,42 +31,26 @@ export default function Hero({ className = '' }: { className?: string }) {
         </div>
 
         <div className="mb-4 flex flex-col items-center justify-center dark:text-white">
-          
+
         </div>
       </div>
       <div className="grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:gap-6 md:text-sm  lg:grid-cols-2">
-        <div className="w-full rounded-full border-2 border-silver px-6 py-4">
-          <p className="mb-1 font-semibold text-black dark:text-silver">
-            Chat with your documentation
-          </p>
-          <span className="text-gray-400">
-            Upload documents and get your answers
-          </span>
-        </div>
-        <div className="w-full rounded-full border-2 border-silver px-6 py-4">
-          <p className="mb-1 font-semibold text-black dark:text-silver">
-            Chat with your documentation
-          </p>
-          <span className="text-gray-400">
-            Upload documents and get your answers
-          </span>
-        </div>
-        <div className="w-full rounded-full border-2 border-silver px-6 py-4">
-          <p className="mb-1 font-semibold text-black dark:text-silver">
-            Chat with your documentation
-          </p>
-          <span className="text-gray-400">
-            Upload documents and get your answers
-          </span>
-        </div>
-        <div className="w-full rounded-full border-2 border-silver px-6 py-4">
-          <p className="mb-1 font-semibold text-black dark:text-silver">
-            Chat with your documentation
-          </p>
-          <span className="text-gray-400">
-            Upload documents and get your answers
-          </span>
-        </div>
+        {
+          demos.map((demo) => (
+            <>
+              <button 
+              onClick={()=>handleQuestion(demo.query)}
+              className="w-full text-left rounded-full border-2 border-silver px-6 py-4">
+                <p className="mb-1 font-semibold text-black dark:text-silver">
+                  {demo.header}
+                </p>
+                <span className="text-gray-400">
+                  {demo.query}
+                </span>
+              </button>
+            </>
+          ))
+        }
       </div>
-    </div>  );
+    </div>);
 }

frontend/src/conversation/Conversation.tsx

@@ -168,7 +168,7 @@ export default function Conversation() {
             })}
           </div>
         )}
-        {queries.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
+        {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
 
       </div>
       <div className="bottom-0 flex flex-col items-end self-center bg-white pt-1 dark:bg-raisin-black md:fixed w-11/12 sm:w-6/12">