From afbbb913e77ab9cc22ac639e6830ccfdbec9a4a8 Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Fri, 10 May 2024 16:21:42 +0530 Subject: [PATCH 1/7] (hero): updating the UI --- frontend/src/Hero.tsx | 210 +++++++----------------------------------- 1 file changed, 35 insertions(+), 175 deletions(-) diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx index 497fc41e2..9e4898896 100644 --- a/frontend/src/Hero.tsx +++ b/frontend/src/Hero.tsx @@ -1,190 +1,50 @@ import { useDarkTheme, useMediaQuery } from './hooks'; import DocsGPT3 from './assets/cute_docsgpt3.svg'; - +import SourceDropdown from './components/SourceDropdown'; +import { useSelector } from 'react-redux'; +import { selectSourceDocs,selectSelectedDocs,selectConversations,selectModalStateDeleteConv } from './preferences/preferenceSlice'; export default function Hero({ className = '' }: { className?: string }) { // const isMobile = window.innerWidth <= 768; const { isMobile } = useMediaQuery(); const [isDarkTheme] = useDarkTheme(); + const docs = useSelector(selectSourceDocs); + const selectedDocs = useSelector(selectSelectedDocs); + const conversations = useSelector(selectConversations); + const modalStateDeleteConv = useSelector(selectModalStateDeleteConv); return (
-
-

DocsGPT

- DocsGPT +
+
+ DocsGPT + docsgpt +
+ {/* */}
- {isMobile ? ( -

- Welcome to DocsGPT, your technical - documentation assistant! Start by entering your query in the input - field below, and we'll provide you with the most relevant - answers. -

- ) : ( - <> -

- Welcome to DocsGPT, your technical documentation assistant! -

-

- Enter a query related to the information in the documentation you - selected to receive -
and we will provide you with the most relevant answers. -

-

- Start by entering your query in the input field below and we will do - the rest! -

- - )} -
- {/* first */} -
-
- {/* Add Mobile check here */} - {isMobile ? ( -
- lock -

- Chat with Your Data -

-
- ) : ( - <> - lock -

- Chat with Your Data -

- - )} -

- DocsGPT will use your data to answer questions. Whether its - documentation, source code, or Microsoft files, DocsGPT allows you - to have interactive conversations and find answers based on the - provided data. -

-
+
+
+

Chat with your documentation

+ Upload documents and get your answers +
+
+

Chat with your documentation

+ Upload documents and get your answers
- {/* second */} -
-
- {/* Add Mobile check here */} - {isMobile ? ( -
- lock -

- Secure Data Storage -

-
- ) : ( - <> - lock -

- Secure Data Storage -

- - )} -

- The security of your data is our top priority. DocsGPT ensures the - utmost protection for your sensitive information. With secure data - storage and privacy measures in place, you can trust that your - data is kept safe and confidential. -

-
+
+

Chat with your documentation

+ Upload documents and get your answers
- {/* third */} -
-
- {/* Add Mobile check here */} - {isMobile ? ( -
- lock -

- Open Source Code -

-
- ) : ( - <> - lock -

- Open Source Code -

- - )} -

- DocsGPT is built on open source principles, promoting transparency - and collaboration. The source code is freely available, enabling - developers to contribute, enhance, and customize the app to meet - their specific needs. -

-
+
+

Chat with your documentation

+ Upload documents and get your answers
From c51f12f88bd97577dff246057743beab019dcd1f Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Wed, 15 May 2024 16:31:41 +0530 Subject: [PATCH 2/7] (conversation)- taller input field --- frontend/src/Hero.tsx | 74 ++++++++++++---------- frontend/src/conversation/Conversation.tsx | 14 ++-- 2 files changed, 48 insertions(+), 40 deletions(-) diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx index 9e4898896..b12ec4414 100644 --- a/frontend/src/Hero.tsx +++ b/frontend/src/Hero.tsx @@ -1,52 +1,60 @@ import { useDarkTheme, useMediaQuery } from './hooks'; import DocsGPT3 from './assets/cute_docsgpt3.svg'; -import SourceDropdown from './components/SourceDropdown'; import { useSelector } from 'react-redux'; -import { selectSourceDocs,selectSelectedDocs,selectConversations,selectModalStateDeleteConv } from './preferences/preferenceSlice'; +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 docs = useSelector(selectSourceDocs); - const selectedDocs = useSelector(selectSelectedDocs); const conversations = useSelector(selectConversations); - const modalStateDeleteConv = useSelector(selectModalStateDeleteConv); return (
-
-
- DocsGPT - docsgpt +
+
+ DocsGPT + docsgpt +
+ +
+
- {/* */}
-
-
-

Chat with your documentation

- Upload documents and get your answers +
+
+

+ Chat with your documentation +

+ + Upload documents and get your answers +
-
-

Chat with your documentation

- Upload documents and get your answers +
+

+ Chat with your documentation +

+ + Upload documents and get your answers +
-
-

Chat with your documentation

- Upload documents and get your answers +
+

+ Chat with your documentation +

+ + Upload documents and get your answers +
-
-

Chat with your documentation

- Upload documents and get your answers +
+

+ Chat with your documentation +

+ + Upload documents and get your answers +
-
- ); +
); } diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx index f09ec08a1..6839d717d 100644 --- a/frontend/src/conversation/Conversation.tsx +++ b/frontend/src/conversation/Conversation.tsx @@ -56,7 +56,7 @@ export default function Conversation() { setHasScrolledToLast(entry.isIntersecting); }); }; - + const observer = new IntersectionObserver(observerCallback, { root: null, threshold: [1, 0.8], @@ -134,7 +134,7 @@ export default function Conversation() {
{queries.length > 0 && !hasScrolledToLast && (
-
-
+
+
{ if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); @@ -197,9 +197,9 @@ export default function Conversation() { className="relative right-[38px] bottom-[7px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent" > ) : ( -
+
{ if (inputRef.current?.textContent) { handleQuestion(inputRef.current.textContent); From 4f9ce70ff80519c63cde0ef0fa3fe6a9f68a2465 Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Thu, 16 May 2024 18:23:45 +0530 Subject: [PATCH 3/7] (hero): demo queries on click --- frontend/.env.development | 2 +- frontend/src/Hero.tsx | 82 ++++++++++------------ frontend/src/conversation/Conversation.tsx | 2 +- 3 files changed, 41 insertions(+), 45 deletions(-) diff --git a/frontend/.env.development b/frontend/.env.development index 7a87f7621..9569966a7 100644 --- a/frontend/.env.development +++ b/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 \ No newline at end of file diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx index b12ec4414..f2677449d 100644 --- a/frontend/src/Hero.tsx +++ b/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 (
- +
-
-

- Chat with your documentation -

- - Upload documents and get your answers - -
-
-

- Chat with your documentation -

- - Upload documents and get your answers - -
-
-

- Chat with your documentation -

- - Upload documents and get your answers - -
-
-

- Chat with your documentation -

- - Upload documents and get your answers - -
+ { + demos.map((demo) => ( + <> + + + )) + }
-
); +
); } diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx index 6839d717d..5835090ba 100644 --- a/frontend/src/conversation/Conversation.tsx +++ b/frontend/src/conversation/Conversation.tsx @@ -168,7 +168,7 @@ export default function Conversation() { })}
)} - {queries.length === 0 && } + {queries.length === 0 && }
From 9fba91069af92fc4147ce175ffe37401c5f8789c Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Thu, 16 May 2024 18:27:36 +0530 Subject: [PATCH 4/7] lint fix --- frontend/.env.development | 2 +- frontend/src/settings/Documents.tsx | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/frontend/.env.development b/frontend/.env.development index 9569966a7..7a87f7621 100644 --- a/frontend/.env.development +++ b/frontend/.env.development @@ -1,3 +1,3 @@ # Please put appropriate value -VITE_API_HOST=http://127.0.0.1:7091 +VITE_API_HOST=http://0.0.0.0:7091 VITE_API_STREAMING=true \ No newline at end of file diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx index e9d9c1c95..18ae687c7 100644 --- a/frontend/src/settings/Documents.tsx +++ b/frontend/src/settings/Documents.tsx @@ -1,6 +1,6 @@ import { DocumentsProps } from '../models/misc'; import Trash from '../assets/trash.svg'; - +import PropTypes from 'prop-types'; const Documents: React.FC = ({ documents, handleDeleteDocument, @@ -56,5 +56,8 @@ const Documents: React.FC = ({
); }; - +Documents.propTypes = { + documents: PropTypes.array.isRequired, + handleDeleteDocument: PropTypes.func.isRequired, +}; export default Documents; From 0701fac807fe9b9ab53df6a4588b2496b72c7d2d Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Thu, 16 May 2024 18:42:19 +0530 Subject: [PATCH 5/7] (hero): hover button outline --- frontend/src/Hero.tsx | 65 +++++++++++++++++++++---------------------- 1 file changed, 32 insertions(+), 33 deletions(-) diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx index f2677449d..a444eadae 100644 --- a/frontend/src/Hero.tsx +++ b/frontend/src/Hero.tsx @@ -1,28 +1,31 @@ import DocsGPT3 from './assets/cute_docsgpt3.svg'; -const demos: { header: string, query: string }[] = [ +const demos: { header: string; query: string }[] = [ { - header: "Learn about DocsGPT", - query: "What is DocsGPT ?" + header: 'Learn about DocsGPT', + query: 'What is DocsGPT ?', }, { - header: "Summarise documentation", - query: "Summarise current context" + header: 'Summarise documentation', + query: 'Summarise current context', }, { - header: "Write Code", - query: "Write code for api request for /api/answer" + 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" - } + header: 'Learning Assistance', + query: 'Write potential questions that can be answered by context', + }, ]; -export default function Hero({ handleQuestion }: { handleQuestion: (question: string) => void }) { - +export default function Hero({ + handleQuestion, +}: { + handleQuestion: (question: string) => void; +}) { return (
@@ -30,27 +33,23 @@ export default function Hero({ handleQuestion }: { handleQuestion: (question: s docsgpt
-
- -
+
- { - demos.map((demo) => ( - <> - - - )) - } + {demos.map((demo) => ( + <> + + + ))}
-
); +
+ ); } From 4df2349e9d37753a837572cd3d63cd51db5b818b Mon Sep 17 00:00:00 2001 From: ManishMadan2882 Date: Fri, 17 May 2024 00:59:47 +0530 Subject: [PATCH 6/7] (hero) minor update --- frontend/src/Hero.tsx | 10 +++++----- frontend/src/conversation/Conversation.tsx | 13 ++++++------- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx index a444eadae..8f3f3b267 100644 --- a/frontend/src/Hero.tsx +++ b/frontend/src/Hero.tsx @@ -10,11 +10,11 @@ const demos: { header: string; query: string }[] = [ }, { header: 'Write Code', - query: 'Write code for api request for /api/answer', + query: 'Write code for api request to /api/answer', }, { header: 'Learning Assistance', - query: 'Write potential questions that can be answered by context', + query: 'Write potential questions for context', }, ]; @@ -25,7 +25,7 @@ export default function Hero({ }) { return (
@@ -35,12 +35,12 @@ export default function Hero({
-
+
{demos.map((demo) => ( <>