Merge pull request #39 from kristo-baricevic/feedback-form2

feat: Feedback Form

Author: taichan03

frontend/package-lock.json

@@ -41,6 +41,6 @@
     "prettier-plugin-tailwindcss": "^0.4.1",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.1.3",
-    "vite": "^4.3.9"
+    "vite": "^4.4.9"
   }
 }

frontend/package.json

@@ -6,39 +6,13 @@
     transform: rotate(360deg);
   }
 }
-.error-message {
-
-}
-
-.error-message::before {
-
-
-  top: 0;
-  left: 0;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: pink;
-}
-
-.error-message {
-
-  color: #FFFFFF;
-  padding: 10px;
-  margin: 5px 0;
-  border-radius: 5px;
-}
 
 @media (prefers-reduced-motion: no-preference) {
   a:nth-of-type(2) .logo {
     animation: logo-spin infinite 20s linear;
   }
 }
 
-.read-the-docs {
-  color: #888;
-}
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -131,28 +105,67 @@
   }
 }
 
-/* Tailwind Styles */
+/* 
+  Note: This is layout for the whole site. 
+*/
+
+/* Layout For Whole Site */
 
 .container {
   @apply relative z-10 mx-auto flex w-full flex-col items-center;
 }
 
-.btnCancel {
-  @apply h-10 rounded-xl border bg-gray-400 px-3 py-1.5 font-satoshi text-sm  text-white  hover:bg-blue-400;
+/* 
+This is the wording logo in the nav bar 
+*/
+
+.header_logo {
+  @apply bg-gradient-to-r from-blue-600 via-blue-700 to-blue-600 bg-clip-text text-transparent;
+}
+
+/* Tailwind Styles */
+
+/* 
+Font for body
+*/
+
+.font_body {
+  @apply  font-satoshi text-sm;
+}
+
+/*
+The border style of the container
+*/
+
+.summary_box {
+  @apply rounded-md border  bg-white p-4 px-8 ring-1 hover:ring-slate-300 ;
 }
 
-.btn {
+/*
+Button
+*/
+
+.btnBlue {
   @apply h-10 rounded-xl border bg-blue-500 px-3 py-1.5 font-satoshi text-sm  text-white  hover:bg-blue-400;
 }
 
+.btnGray {
+  @apply h-10 rounded-xl border bg-gray-400 px-3 py-1.5 font-satoshi text-sm  text-white  hover:bg-blue-400;
+}  
+
+.btnRed {
+  @apply h-10 rounded-xl border bg-red-700 px-3 py-1.5 font-satoshi text-sm  text-white  hover:bg-blue-400;
+}  
+
+
+/* 
+The heading directly under the nav bar. 
+*/
+
 .head_text {
   @apply mt-16 text-center text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl;
 }
 
-.header_logo {
-  @apply bg-gradient-to-r from-blue-600 via-blue-700 to-blue-600 bg-clip-text text-transparent;
-}
-
 .desc {
   @apply mt-7  px-2 text-center font-sans text-3xl font-medium text-gray-800 md:p-0 md:px-0 md:text-5xl;
 }
@@ -162,49 +175,50 @@
   letter-spacing: 0.03em;
 }
 
-.url_input {
-  @apply block w-full rounded-md border-0  bg-white py-2 pl-5 pr-5 font-satoshi text-sm font-medium  shadow-sm  ring-1 ring-slate-300  hover:border-0 hover:ring-1 hover:ring-sky-500  focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40;
-}
+/* 
+Input field. 
+*/
 
-.ani_input {
-  @apply block  w-full rounded-md border-0 bg-white py-2  pl-5 pr-5 font-satoshi text-sm font-medium shadow-sm ring-1  ring-slate-300  transition duration-200  hover:border-0 hover:ring-1 hover:ring-sky-500  focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40;
+.input {
+  @apply block  rounded-md border-0 bg-white py-2 pl-5 pr-5 font-satoshi text-sm ring-1 transition duration-200  hover:border-0 hover:ring-1 hover:ring-sky-500   focus:outline-none focus:ring-2  focus:ring-sky-500;
 }
 
-input[type="ani_input"]:focus ~ .input-text,
-input[type="ani_input"]:not(:placeholder-shown) ~ .input-text {
-  @apply -translate-x-2 -translate-y-5 scale-75 transform text-blue-500;
-}
+/* 
+This is for when the input field is loading
+*/
 
-.url_input_loading {
+.input_loading {
   @apply block w-full rounded-md border border-gray-300  bg-gray-300 bg-opacity-50 py-2 pl-5 pr-5 font-satoshi text-sm font-medium shadow-lg focus:border-black focus:outline-none focus:ring-0;
 }
-.dropdown {
-  @apply block w-64  rounded-md border-0 p-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40 sm:text-sm sm:leading-6;
-}
 
-.submit_btn {
-  @apply absolute inset-y-0 right-0 my-1.5 mr-1.5 flex w-10 items-center justify-center rounded border border-gray-200 font-sans text-sm font-medium text-gray-400 hover:border-gray-700 hover:text-gray-700;
+/* 
+Dropdown field. 
+*/
+
+.dropdown {
+  @apply block w-64 font-satoshi cursor-pointer rounded-md border-0 p-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset  sm:text-sm sm:leading-6   focus:outline-none focus:ring-2  focus:ring-sky-500 hover:border-0 hover:ring-1 hover:ring-sky-500 ;
 }
 
 .link_card {
   @apply flex cursor-pointer items-center justify-between rounded-md border  bg-white p-3 py-2.5 pl-5   ring-1 hover:bg-indigo-100;
 }
 
+/* 
+Circle background for logos
+*/
+
 .copy_btn {
   @apply flex h-7 w-7 cursor-pointer items-center justify-center  rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] md:mr-10;
 }
 
-.blue_gradient {
-  @apply bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text font-black text-transparent;
-}
+/*
+Tooltip. Please see Tooltip.tsx under components folder
+*/
 
-.summary_box {
-  @apply w-[870px] rounded-md border  bg-white p-4 px-8 ring-1 hover:ring-slate-300 hover:ring-slate-300;
-  /* backdrop-blur */
-}
 .tooltip-container {
   @apply cursor-pointer;
 }
+
 .tooltip {
   @apply border;
   position: absolute;
@@ -220,5 +234,25 @@ input[type="ani_input"]:not(:placeholder-shown) ~ .input-text {
 }
 
 .material-symbols-outlined {
-  font-size: 18px; /* Adjust the value as needed */
+  font-size: 18px; 
+}
+
+/*
+Error message. Please see ErrorMessages.tsx under components folder
+*/
+
+.error-message::before {
+  top: 0;
+  left: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: pink;
 }
+
+.error-message {
+  color: #FFFFFF;
+  padding: 10px;
+  margin: 5px 0;
+  border-radius: 5px;
+}

frontend/src/App.css

@@ -0,0 +1 @@
+export function copy(): any; // replace any with the appropriate type if you know it

frontend/src/assets/index.d.ts

@@ -23,11 +23,11 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
   const [inputValue, setInputValue] = useState("");
   const [chatLog, setChatLog] = useState<ChatLogItem[]>([]); // Specify the type as ChatLogItem[]
   const [isLoading, setIsLoading] = useState(false);
-  const suggestionPrompts = [
-    "Tell me about treatment options.",
-    "What are the common side effects?",
-    "How to manage medication schedule?",
-  ];
+  // const suggestionPrompts = [
+  //   "Tell me about treatment options.",
+  //   "What are the common side effects?",
+  //   "How to manage medication schedule?",
+  // ];
   const [pageContent, setPageContent] = useState("");
 
   let systemMessage = {
@@ -44,7 +44,7 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
     observer.observe(document.body, {
       childList: true,
       subtree: true,
-      characterData: true
+      characterData: true,
     });
 
     const extractedContent = extractContentFromDOM();
@@ -133,14 +133,14 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
       >
         {showChat ? (
           <div
-            id="chat_container"
+            id="chat_container "
             className=" mx-auto flex h-full  flex-col overflow-auto rounded "
           >
             <div
               className="absolute mt-0 flex h-8 w-full flex-row items-center justify-between rounded-t-lg border-b bg-white p-1  "
               style={{ borderBottomColor: "#abcdef" }}
             >
-              <div className=" ml-4 text-black">
+              <div className=" ml-4  text-black">
                 Questions for me? <br />
               </div>
               <div
@@ -162,7 +162,7 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
                 </svg>
               </div>
             </div>
-            <div className="mt-6 flex flex-grow flex-col space-y-2 p-5 pb-44">
+            <div className="font_body mt-6 flex flex-grow flex-col space-y-2 p-5 pb-44">
               {chatLog.length === 0 ? (
                 <>
                   {/* <div className="text-gray-500">
@@ -223,15 +223,15 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
               <form onSubmit={handleSubmit} className="mb-1 flex">
                 <div className="ml-2 flex-grow">
                   <input
-                    type="text"
-                    className="input_chat ring-slate-1000/10 dark:highlight-white/5 text-sm"
+                    type="ani_input"
+                    className="input dark:highlight-white/5  w-full"
                     placeholder="Talk to me..."
                     value={inputValue}
                     onChange={(e) => setInputValue(e.target.value)}
                   />
                 </div>
                 <div className="ml-5">
-                  <button type="submit" className="btn">
+                  <button type="submit" className="btnBlue">
                     Send
                   </button>
                 </div>

frontend/src/components/Header/Chat.tsx

@@ -2,35 +2,30 @@ import { Link } from "react-router-dom";
 
 export const FeatureMenuDropDown = () => {
   return (
-    <div className="absolute text-sm items-center mt-2 mb-2 top-full  flex h-50 flex-row rounded-lg bg-white font-inter border-2 sm:px-6 md:px-8 lg:px-8 xl:px-6 ">
-
+    <div className="h-50 absolute top-full mb-2 mt-2 flex  flex-row items-center rounded-lg border-2 bg-white font-inter text-sm sm:px-6 md:px-8 lg:px-8 xl:px-6 ">
       <div className="mx-3 my-5 ">
-      <ul  className=" cursor-pointer  hover:bg-gray-100 p-3 rounded-lg transition duration-300">
-          <Link
-            to="/"
-          
-          >
-              <span  className=" text-black font-bold  ">
-            Medication Suggester
-              </span>
-                
-          <div className="text-sm font-satoshi mt-1 text-gray-400">Medication recommendations based on symptoms and medical history.</div>
-          </Link>
-        </ul>
-
+        <Link to="/">
+          <ul className=" cursor-pointer  rounded-lg p-3 transition duration-300 hover:bg-gray-100">
+            <span className=" font-bold text-black  ">
+              Medication Suggester
+            </span>
 
-        <ul  className=" cursor-pointer hover:bg-gray-100 p-3 rounded-lg transition duration-300">
-          <Link
-            to="/drugSummary"
-           
-            >
-              <span  className=" text-black font-bold ">
+            <div className="mt-1 font-satoshi text-sm text-gray-400">
+              Medication recommendations based on symptoms and medical history.
+            </div>
+          </ul>
+        </Link>
 
-            Medication Summary and Comparison
-              </span>
-           <div className="text-sm font-satoshi mt-1  text-gray-400">Streamline drug documentation analysis.</div>
-          </Link>
-        </ul>
+        <Link to="/drugSummary">
+          <ul className=" cursor-pointer rounded-lg p-3 transition duration-300 hover:bg-gray-100">
+            <span className=" font-bold text-black ">
+              Medication Summary and Comparison
+            </span>
+            <div className="mt-1 font-satoshi text-sm  text-gray-400">
+              Streamline drug documentation analysis.
+            </div>
+          </ul>
+        </Link>
 
         {/* <div
           className="mr-9 text-black hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"

frontend/src/components/Header/FeatureMenuDropDown.tsx

@@ -1,13 +1,13 @@
 .input_chat {
-  @apply w-full rounded-lg bg-white px-2 py-2 pl-3 font-semibold  text-black text-slate-400 placeholder-gray-500 shadow-sm ring-1 hover:ring-slate-300 focus:outline-none focus:ring-2  focus:ring-sky-500 dark:bg-slate-800 dark:text-slate-300 dark:ring-0 dark:hover:bg-slate-700;
+  @apply rounded-md  text-sm bg-white px-2 py-2 pl-3 font-semibold text-black text-slate-400 placeholder-gray-500 shadow-sm ring-1 hover:ring-slate-300 focus:outline-none focus:ring-2  focus:ring-sky-500 dark:bg-slate-800 dark:text-slate-300 dark:ring-0 dark:hover:bg-slate-700;
 }
 
 .show_chat {
-  @apply h-[100%] w-[100%] rounded-lg bg-white  text-slate-400 shadow-sm ring-1 hover:ring-slate-300 focus:outline-none focus:ring-2 focus:ring-sky-500 dark:bg-slate-800 dark:text-slate-300 dark:ring-0 dark:hover:bg-slate-700 md:h-[70%] md:w-[25%];
+  @apply h-[100%] w-[100%] rounded-lg bg-white  shadow-sm ring-1 hover:ring-slate-300 focus:outline-none focus:ring-2 focus:ring-sky-500 dark:bg-slate-800 dark:text-slate-300 dark:ring-0 dark:hover:bg-slate-700 md:h-[70%] md:w-[25%];
 }
 
 .inside_chat {
-  @apply rounded-b-lg bg-white text-slate-400 shadow-sm ring-1 hover:ring-slate-300 focus:outline-none focus:ring-2 focus:ring-sky-500 dark:bg-slate-800 dark:text-slate-300 dark:ring-0 dark:hover:bg-slate-700;
+  @apply rounded-b-lg bg-white shadow-sm ring-1 hover:ring-slate-300 focus:outline-none focus:ring-2 focus:ring-sky-500 dark:bg-slate-800 dark:text-slate-300 dark:ring-0 dark:hover:bg-slate-700;
 }
 .circle {
   border-radius: 50%;

frontend/src/components/Header/chat.css

@@ -3,15 +3,16 @@ import Welcome from "../../components/Welcome/Welcome.tsx";
 import Layout from "../Layout/Layout";
 
 function DrugLookup() {
-  return (
-    <Layout>
-      <Welcome
-        subHeader="Drug Summary"
-        descriptionText="Get a condensed summary for a clinical drug trial and/or study."
-      />
-      <DrugSummaryForm />
-    </Layout>
-  );
+    return (
+        <Layout>
+            <div className="py-20"></div>
+            <Welcome
+                subHeader="Drug Summary"
+                descriptionText="Get a condensed summary for a clinical drug trial and/or study."
+            />
+            <DrugSummaryForm/>
+        </Layout>
+    );
 }
 
 export default DrugLookup;