points 14 and 15

frontend/src/Navigation.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import Arrow1 from './assets/arrow.svg';
+import Arrow2 from './assets/dropdown-arrow.svg';
 import Message from './assets/message.svg';
 import Hamburger from './assets/hamburger.svg';
 import Key from './assets/key.svg';
@@ -45,7 +46,7 @@ export default function Navigation({
       <div
         className={`${
           navState === 'INACTIVE' && '-ml-96 md:-ml-[14rem] lg:-ml-80'
-        } fixed z-10 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all duration-200 lg:w-96`}
+        } fixed z-20 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all duration-200 lg:w-96`}
       >
         <div className={'h-16 w-full border-b-2'}>
           <button
@@ -59,7 +60,7 @@ export default function Navigation({
               alt="menu toggle"
               className={`${
                 navState === 'INACTIVE' ? 'rotate-180' : 'rotate-0'
-              }  m-auto w-3 transition-all duration-200`}
+              } m-auto w-3 transition-all duration-200`}
             />
           </button>
         </div>
@@ -79,7 +80,7 @@ export default function Navigation({
         <div className="flex flex-grow flex-col-reverse border-b-2">
           <div className="relative my-4 px-6 ">
             <div
-              className="h-12 w-full cursor-pointer rounded-md border-2"
+              className="flex h-12 w-full cursor-pointer justify-between rounded-md border-2"
               onClick={() => setIsDocsListOpen(!isDocsListOpen)}
             >
               {selectedDocs && (
@@ -87,6 +88,13 @@ export default function Navigation({
                   {selectedDocs.name} {selectedDocs.version}
                 </p>
               )}
+              <img
+                src={Arrow2}
+                alt="arrow"
+                className={`${
+                  isDocsListOpen ? 'rotate-0' : '-rotate-90'
+                } mr-3 w-3 transition-all`}
+              />
             </div>
             {isDocsListOpen && (
               <div className="absolute top-12 left-0 right-0 mx-6 max-h-52 overflow-y-scroll bg-white shadow-lg">
@@ -165,12 +173,14 @@ export default function Navigation({
           </a>
         </div>
       </div>
-      <button
+      <div className="fixed h-16 w-full border-b-2 bg-gray-50 md:hidden">
-        className="fixed mt-5 ml-6 h-6 w-6 md:hidden"
+        <button
-        onClick={() => setNavState('ACTIVE')}
+          className="mt-5 ml-6 h-6 w-6 md:hidden"
-      >
+          onClick={() => setNavState('ACTIVE')}
-        <img src={Hamburger} alt="menu toggle" className="w-7" />
+        >
-      </button>
+          <img src={Hamburger} alt="menu toggle" className="w-7" />
+        </button>
+      </div>
       <SelectDocsModal
         modalState={selectedDocsModalState}
         setModalState={setSelectedDocsModalState}

frontend/src/assets/dropdown-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L5 5L10 0H0Z" fill="black" fill-opacity="0.54"/>
+</svg>

frontend/src/conversation/Conversation.tsx

@@ -30,7 +30,7 @@ export default function Conversation() {
 
   return (
     <div className="flex justify-center p-6">
-      <div className="w-10/12 transition-all md:w-1/2">
+      <div className="mt-20 w-10/12 transition-all md:w-1/2">
         {messages.map((message, index) => {
           return (
             <ConversationBubble

frontend/src/preferences/SelectDocsModal.tsx

@@ -7,7 +7,7 @@ import {
   selectSourceDocs,
   selectSelectedDocs,
 } from './preferenceSlice';
-import { getDocs, Doc } from './selectDocsApi';
+import { getDocs, Doc } from './preferenceApi';
 
 export default function APIKeyModal({
   modalState,

frontend/src/preferences/selectDocsApi.ts

@@ -1,33 +0,0 @@
-//Exporting Doc type from here since its the first place its used and seems needless to make an entire file for it.
-export type Doc = {
-  name: string;
-  language: string;
-  version: string;
-  description: string;
-  fullName: string;
-  dat: string;
-  docLink: string;
-  model: string;
-};
-
-//Fetches all JSON objects from the source. We only use the objects with the "model" property in SelectDocsModal.tsx. Hopefully can clean up the source file later.
-export async function getDocs(): Promise<Doc[] | null> {
-  try {
-    //Fetch default source docs
-    const response = await fetch(
-      'https://d3dg1063dc54p9.cloudfront.net/combined.json',
-    );
-    const data = await response.json();
-
-    //Create array of Doc objects
-    const docs: Doc[] = [];
-
-    data.forEach((doc: object) => {
-      docs.push(doc as Doc);
-    });
-
-    return docs;
-  } catch (error) {
-    return null;
-  }
-}