From 828927d167856f6a682b5f483fcde74dc34a21d6 Mon Sep 17 00:00:00 2001 From: ajaythapliyal Date: Mon, 27 Feb 2023 22:41:47 +0530 Subject: [PATCH 1/4] fixes 8 of nick's list --- frontend/src/App.tsx | 7 ++----- frontend/src/Navigation.tsx | 23 +++++++++++++++++++++-- frontend/src/hooks.ts | 19 +++++++++++++++++++ 3 files changed, 42 insertions(+), 7 deletions(-) create mode 100644 frontend/src/hooks.ts diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 29b1b60..9a21622 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -8,15 +8,12 @@ import { ActiveState } from './models/misc'; export default function App() { //TODO : below media query is disjoint from tailwind. Please wire it together. const [navState, setNavState] = useState( - window.matchMedia('((min-width: 768px)').matches ? 'ACTIVE' : 'INACTIVE', + window.matchMedia('(min-width: 768px)').matches ? 'ACTIVE' : 'INACTIVE', ); return (
- setNavState(val)} - /> +
void; + setNavState: React.Dispatch>; }) { const dispatch = useDispatch(); const docs = useSelector(selectSourceDocs); @@ -41,9 +42,27 @@ export default function Navigation({ const [selectedDocsModalState, setSelectedDocsModalState] = useState(isSelectedDocsSet ? 'INACTIVE' : 'ACTIVE'); + const navDiv = useRef(null); + useOutsideAlerter( + navDiv, + () => { + if ( + window.matchMedia('(max-width: 768px)').matches && + navState === 'ACTIVE' && + apiKeyModalState === 'INACTIVE' && + selectedDocsModalState === 'INACTIVE' && + !isDocsListOpen + ) { + setNavState('INACTIVE'); + } + }, + [navState, isDocsListOpen, apiKeyModalState, selectedDocsModalState], + ); + return ( <>
( + ref: RefObject, + handler: () => void, + deps: any[], +) { + useEffect(() => { + function handleClickOutside(this: Document, event: MouseEvent) { + if (ref.current && !ref.current.contains(event.target as Node)) { + handler(); + } + } + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [ref, ...deps]); +} From 8e839cf80c10a397f4ac4547e83f88d99a04242d Mon Sep 17 00:00:00 2001 From: ajaythapliyal Date: Tue, 28 Feb 2023 07:47:34 +0530 Subject: [PATCH 2/4] point 8 from Nick's list --- frontend/src/Navigation.tsx | 13 ++++++------- frontend/src/hooks.ts | 4 ++-- frontend/src/preferences/APIKeyModal.tsx | 22 ++++++++++++++++++++-- 3 files changed, 28 insertions(+), 11 deletions(-) diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index 7e08134..d21d24f 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -42,27 +42,26 @@ export default function Navigation({ const [selectedDocsModalState, setSelectedDocsModalState] = useState(isSelectedDocsSet ? 'INACTIVE' : 'ACTIVE'); - const navDiv = useRef(null); + const navRef = useRef(null); useOutsideAlerter( - navDiv, + navRef, () => { if ( window.matchMedia('(max-width: 768px)').matches && navState === 'ACTIVE' && - apiKeyModalState === 'INACTIVE' && - selectedDocsModalState === 'INACTIVE' && - !isDocsListOpen + apiKeyModalState === 'INACTIVE' ) { setNavState('INACTIVE'); + setIsDocsListOpen(false); } }, - [navState, isDocsListOpen, apiKeyModalState, selectedDocsModalState], + [isDocsListOpen, apiKeyModalState], ); return ( <>
( ref: RefObject, handler: () => void, - deps: any[], + additionalDeps: unknown[], ) { useEffect(() => { function handleClickOutside(this: Document, event: MouseEvent) { @@ -15,5 +15,5 @@ export function useOutsideAlerter( return () => { document.removeEventListener('mousedown', handleClickOutside); }; - }, [ref, ...deps]); + }, [ref, ...additionalDeps]); } diff --git a/frontend/src/preferences/APIKeyModal.tsx b/frontend/src/preferences/APIKeyModal.tsx index 5300bf7..d068aa4 100644 --- a/frontend/src/preferences/APIKeyModal.tsx +++ b/frontend/src/preferences/APIKeyModal.tsx @@ -1,7 +1,8 @@ -import { useState } from 'react'; +import { useRef, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { ActiveState } from '../models/misc'; import { selectApiKey, setApiKey } from './preferenceSlice'; +import { useOutsideAlerter } from './../hooks'; export default function APIKeyModal({ modalState, @@ -16,6 +17,20 @@ export default function APIKeyModal({ const apiKey = useSelector(selectApiKey); const [key, setKey] = useState(apiKey); const [isError, setIsError] = useState(false); + const modalRef = useRef(null); + + useOutsideAlerter( + modalRef, + () => { + if ( + window.matchMedia('(max-width: 768px)').matches && + modalState === 'ACTIVE' + ) { + setModalState('INACTIVE'); + } + }, + [modalState], + ); function handleSubmit() { if (key.length <= 1) { @@ -39,7 +54,10 @@ export default function APIKeyModal({ modalState === 'ACTIVE' ? 'visible' : 'hidden' } absolute z-30 h-screen w-screen bg-gray-alpha`} > -
+

OpenAI API Key

Before you can start using DocsGPT we need you to provide an API key From 998c4688b02888142f0cdf2038633488beee65e5 Mon Sep 17 00:00:00 2001 From: ajaythapliyal Date: Tue, 28 Feb 2023 09:07:45 +0530 Subject: [PATCH 3/4] hover effect on send icon --- frontend/src/conversation/Conversation.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx index b8e0cf0..fffe012 100644 --- a/frontend/src/conversation/Conversation.tsx +++ b/frontend/src/conversation/Conversation.tsx @@ -67,16 +67,18 @@ export default function Conversation() { className="relative right-[38px] bottom-[7px] -mr-[30px] animate-spin cursor-pointer self-end" > ) : ( - { - if (inputRef.current?.textContent) { - handleQuestion(inputRef.current.textContent); - inputRef.current.textContent = ''; - } - }} - src={Send} - className="relative right-[35px] bottom-[15px] -mr-[21px] cursor-pointer self-end" - > +

+ { + if (inputRef.current?.textContent) { + handleQuestion(inputRef.current.textContent); + inputRef.current.textContent = ''; + } + }} + src={Send} + > +
)}

From ac8dbf4109cc1b59ca2a421f217a7a894e480f91 Mon Sep 17 00:00:00 2001 From: ajaythapliyal Date: Tue, 28 Feb 2023 09:27:22 +0530 Subject: [PATCH 4/4] fix --- frontend/src/Navigation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index d21d24f..4709f4a 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -55,7 +55,7 @@ export default function Navigation({ setIsDocsListOpen(false); } }, - [isDocsListOpen, apiKeyModalState], + [navState, isDocsListOpen, apiKeyModalState], ); return (