Archives/DocsGPT
2
0
Fork 0
mirror of https://github.com/arc53/DocsGPT synced 2024-11-19 21:25:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

(hero): demo queries on click

Browse Source
This commit is contained in:
ManishMadan2882 2024-05-16 18:23:45 +05:30
parent c51f12f88b
commit 4f9ce70ff8
3 changed files with 41 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/.env.development
View File

@ -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

70
frontend/src/Hero.tsx
View File

@ -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 (
<div
className={`mt-14 mb-4 flex w-11/12 sm:w-7/12 flex-col justify-end text-black-1000 dark:text-bright-gray lg:mt-6`}
@ -23,38 +35,22 @@ export default function Hero({ className = '' }: { className?: string }) {
</div>
</div>
<div className="grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:gap-6 md:text-sm lg:grid-cols-2">
<div className="w-full rounded-full border-2 border-silver px-6 py-4">
{
demos.map((demo) => (
<>
<button
onClick={()=>handleQuestion(demo.query)}
className="w-full text-left rounded-full border-2 border-silver px-6 py-4">
<p className="mb-1 font-semibold text-black dark:text-silver">
Chat with your documentation
{demo.header}
</p>
<span className="text-gray-400">
Upload documents and get your answers
{demo.query}
</span>
</div>
<div className="w-full rounded-full border-2 border-silver px-6 py-4">
<p className="mb-1 font-semibold text-black dark:text-silver">
Chat with your documentation
</p>
<span className="text-gray-400">
Upload documents and get your answers
</span>
</div>
<div className="w-full rounded-full border-2 border-silver px-6 py-4">
<p className="mb-1 font-semibold text-black dark:text-silver">
Chat with your documentation
</p>
<span className="text-gray-400">
Upload documents and get your answers
</span>
</div>
<div className="w-full rounded-full border-2 border-silver px-6 py-4">
<p className="mb-1 font-semibold text-black dark:text-silver">
Chat with your documentation
</p>
<span className="text-gray-400">
Upload documents and get your answers
</span>
</div>
</button>
</>
))
}
</div>
</div>);
}

2
frontend/src/conversation/Conversation.tsx
View File

@ -168,7 +168,7 @@ export default function Conversation() {
})}
</div>
)}
{queries.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
{queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
</div>
<div className="bottom-0 flex flex-col items-end self-center bg-white pt-1 dark:bg-raisin-black md:fixed w-11/12 sm:w-6/12">