Merge pull request #150 from arc53/feature/taylor-fixes

two fixes
This commit is contained in:
Alex 2023-03-04 10:22:05 +00:00 committed by GitHub
commit 8d9648391b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 7 deletions

View File

@ -1,4 +1,4 @@
import { useRef, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { NavLink } from 'react-router-dom';
import Arrow1 from './assets/arrow.svg';
import Arrow2 from './assets/dropdown-arrow.svg';
@ -58,6 +58,19 @@ export default function Navigation({
[navState, isDocsListOpen, apiKeyModalState],
);
/*
Needed to fix bug where if mobile nav was closed and then window was resized to desktop, nav would still be closed but the button to open would be gone, as per #1 on issue #146
*/
useEffect(() => {
window.addEventListener('resize', () => {
if (window.matchMedia('(min-width: 768px)').matches) {
setNavState('ACTIVE');
} else {
setNavState('INACTIVE');
}
});
}, []);
return (
<>
<div
@ -66,7 +79,7 @@ export default function Navigation({
navState === 'INACTIVE' && '-ml-96 md:-ml-[14rem]'
} duration-20 fixed z-20 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all`}
>
<div className={'h-16 w-full border-b-2'}>
<div className={'visible h-16 w-full border-b-2 md:hidden'}>
<button
className="float-right mr-5 mt-5 h-5 w-5"
onClick={() =>
@ -95,7 +108,7 @@ export default function Navigation({
</NavLink>
<div className="flex-grow border-b-2 border-gray-100"></div>
<div className="flex flex-grow flex-col-reverse border-b-2">
<div className="flex flex-col-reverse border-b-2">
<div className="relative my-4 px-6">
<div
className="flex h-12 w-full cursor-pointer justify-between rounded-md border-2 bg-white"
@ -143,7 +156,7 @@ export default function Navigation({
</div>
)}
</div>
<p className="ml-6 font-bold text-jet">Source Docs</p>
<p className="ml-6 mt-3 font-bold text-jet">Source Docs</p>
</div>
<div className="flex flex-col gap-2 border-b-2 py-2">
<div

View File

@ -32,7 +32,7 @@ export default function Conversation() {
return (
<div className="flex justify-center p-6">
{messages.length > 0 && (
<div className="mt-20 flex w-10/12 flex-col transition-all md:w-1/2">
<div className="mt-20 flex w-10/12 flex-col transition-all md:w-3/4">
{messages.map((message, index) => {
return (
<ConversationBubble
@ -49,7 +49,7 @@ export default function Conversation() {
</div>
)}
{messages.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
<div className="fixed bottom-6 flex w-10/12 flex-col items-end self-center md:w-[50%]">
<div className="fixed bottom-0 flex w-10/12 flex-col items-end self-center md:w-[50%]">
<div className="flex w-full">
<div
ref={inputRef}
@ -85,7 +85,7 @@ export default function Conversation() {
</div>
)}
</div>
<p className="mt-3 w-10/12 self-center text-center text-xs text-gray-2000">
<p className="w-[100vw] self-center bg-white p-5 text-center text-xs text-gray-2000">
This is a chatbot that uses the GPT-3, Faiss and LangChain to answer
questions.
</p>