Skip to content

Commit

Permalink
Merge pull request #949 from ManishMadan2882/main
Browse files Browse the repository at this point in the history 
Updating Hero
  • Loading branch information
@dartpain
dartpain authored May 16, 2024
2 parents 5e00d4d + 405e79d commit 4534caf
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 195 deletions.
225 changes: 44 additions & 181 deletions frontend/src/Hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,191 +1,54 @@
import { useDarkTheme, useMediaQuery } from './hooks';
import DocsGPT3 from './assets/cute_docsgpt3.svg';
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 to /api/answer',
},
{
header: 'Learning Assistance',
query: 'Write potential questions for context',
},
];

export default function Hero({ className = '' }: { className?: string }) {
// const isMobile = window.innerWidth <= 768;
const { isMobile } = useMediaQuery();
const [isDarkTheme] = useDarkTheme();
export default function Hero({
handleQuestion,
}: {
handleQuestion: (question: string) => void;
}) {
return (
<div
className={`mt-14 mb-32 flex flex-col text-black-1000 dark:text-bright-gray lg:mt-6`}
className={`mt-14 mb-4 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full lg:mt-6`}
>
<div className=" mb-2 flex items-center justify-center sm:mb-10">
<p className="mr-2 text-4xl font-semibold">DocsGPT</p>
<img className="mb-2 h-14" src={DocsGPT3} alt="DocsGPT" />
</div>
{isMobile ? (
<p className="mb-3 text-center leading-6">
Welcome to <span className="font-bold">DocsGPT</span>, your technical
documentation assistant! Start by entering your query in the input
field below, and we&apos;ll provide you with the most relevant
answers.
</p>
) : (
<>
<p className="mb-3 text-center leading-6">
Welcome to DocsGPT, your technical documentation assistant!
</p>
<p className="mb-3 text-center leading-6">
Enter a query related to the information in the documentation you
selected to receive
<br /> and we will provide you with the most relevant answers.
</p>
<p className="mb-3 text-center leading-6">
Start by entering your query in the input field below and we will do
the rest!
</p>
</>
)}
<div
className={`mt-0 flex flex-wrap items-center justify-center gap-2 sm:mt-1 sm:gap-4 md:gap-4 lg:gap-0`}
>
{/* first */}
<div className="h-auto rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 dark:from-[#D16FF8] dark:via-[#48E6E0] dark:to-[#C85EF6] lg:h-60 lg:rounded-tr-none lg:rounded-br-none">
<div
className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${
isMobile ? '3.5' : '6 py-8'
} lg:rounded-tr-none lg:rounded-br-none`}
>
{/* Add Mobile check here */}
{isMobile ? (
<div className="flex justify-center">
<img
src={
isDarkTheme ? '/message-text-dark.svg' : '/message-text.svg'
}
alt="lock"
className="h-[24px] w-[24px] "
/>
<h2 className="mb-0 pl-1 text-lg font-bold">
Chat with Your Data
</h2>
</div>
) : (
<>
<img
src={
isDarkTheme ? '/message-text-dark.svg' : '/message-text.svg'
}
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mt-2 mb-3 text-lg font-bold">
Chat with Your Data
</h2>
</>
)}
<p
className={
isMobile
? `w-[250px] text-center text-xs text-gray-500 dark:text-bright-gray`
: `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
}
>
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.
</p>
</div>
</div>
{/* second */}
<div className="h-auto rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 dark:from-[#D16FF8] dark:via-[#48E6E0] dark:to-[#C85EF6] lg:h-60 lg:rounded-none lg:py-1 lg:px-0">
<div
className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${
isMobile ? '3.5' : '6 py-6'
} lg:rounded-none`}
>
{/* Add Mobile check here */}
{isMobile ? (
<div className="flex justify-center ">
<img
src={isDarkTheme ? '/lock-dark.svg' : '/lock.svg'}
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mb-0 pl-1 text-lg font-bold">
Secure Data Storage
</h2>
</div>
) : (
<>
<img
src={isDarkTheme ? '/lock-dark.svg' : '/lock.svg'}
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mt-2 mb-3 text-lg font-bold">
Secure Data Storage
</h2>
</>
)}
<p
className={
isMobile
? `w-[250px] text-center text-xs text-gray-500 dark:text-bright-gray`
: `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
}
>
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.
</p>
</div>
<div className="flex h-full w-full flex-col items-center justify-center">
<div className="flex items-center">
<span className="p-0 text-4xl font-semibold">DocsGPT</span>
<img className="mb-1 inline w-14 p-0" src={DocsGPT3} alt="docsgpt" />
</div>
{/* third */}
<div className="h-auto rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 dark:from-[#D16FF8] dark:via-[#48E6E0] dark:to-[#C85EF6] lg:h-60 lg:rounded-tl-none lg:rounded-bl-none ">
<div
className={`firefox h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${
isMobile ? '3.5' : '6 px-6 '
} lg:rounded-tl-none lg:rounded-bl-none`}
>
{/* Add Mobile check here */}
{isMobile ? (
<div className="flex justify-center">
<img
src={
isDarkTheme
? 'message-programming-dark.svg'
: '/message-programming.svg'
}
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mb-0 pl-1 text-lg font-bold">
Open Source Code
</h2>
</div>
) : (
<>
<img
src={
isDarkTheme
? '/message-programming-dark.svg'
: '/message-programming.svg'
}
alt="lock"
className="h-[24px] w-[24px]"
/>
<h2 className="mt-2 mb-3 text-lg font-bold">
Open Source Code
</h2>
</>
)}
<p
className={
isMobile
? `w-[250px] text-center text-xs text-gray-500 dark:text-bright-gray`
: `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
}

<div className="mb-4 flex flex-col items-center justify-center dark:text-white"></div>
</div>
<div className="grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:w-auto sm:gap-6 md:text-sm lg:grid-cols-2">
{demos.map((demo) => (
<>
<button
onClick={() => handleQuestion(demo.query)}
className="w-full rounded-full border-2 border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw]"
>
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.
</p>
</div>
</div>
<p className="mb-1 font-semibold text-black dark:text-silver">
{demo.header}
</p>
<span className="text-gray-400">{demo.query}</span>
</button>
</>
))}
</div>
</div>
);
Expand Down
23 changes: 11 additions & 12 deletions frontend/src/conversation/Conversation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,11 +131,11 @@ export default function Conversation() {
};

return (
<div className='flex flex-col gap-1 h-screen'>
<div className="flex h-screen flex-col gap-1">
<div
onWheel={handleUserInterruption}
onTouchMove={handleUserInterruption}
className="flex w-full justify-center p-4 h-[87vh] overflow-y-auto"
className="flex h-[85vh] w-full justify-center overflow-y-auto p-4"
>
{queries.length > 0 && !hasScrolledToLast && (
<button
Expand All @@ -152,12 +152,12 @@ export default function Conversation() {
)}

{queries.length > 0 && (
<div className="w-full md:w-8/12 mt-16">
<div className="mt-16 w-full md:w-8/12">
{queries.map((query, index) => {
return (
<Fragment key={index}>
<ConversationBubble
className={'mb-1 md:mb-7 last:mb-28'}
className={'mb-1 last:mb-28 md:mb-7'}
key={`${index}QUESTION`}
message={query.prompt}
type="QUESTION"
Expand All @@ -169,19 +169,18 @@ 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 md:w-[60%]">
<div className="flex h-full w-full">
<div className="bottom-0 flex w-11/12 flex-col items-end self-center bg-white pt-1 dark:bg-raisin-black sm:w-6/12 md:fixed">
<div className="flex h-full w-full items-center rounded-full border border-silver">
<div
id="inputbox"
ref={inputRef}
tabIndex={1}
placeholder="Type your message here..."
contentEditable
onPaste={handlePaste}
className={`border-000000 max-h-24 min-h-[2.6rem] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-3xl border bg-white py-2 pl-4 pr-9 text-base leading-7 opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
className={`max-h-24 min-h-[3.8rem] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white py-2 pl-4 pr-9 text-base leading-10 opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
Expand All @@ -198,9 +197,9 @@ export default function Conversation() {
className="relative right-[38px] bottom-[15px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
></img>
) : (
<div className="relative right-[43px] bottom-[7px] -mr-[35px] h-[35px] w-[35px] cursor-pointer self-end rounded-full hover:bg-gray-3000">
<div className="mx-1 cursor-pointer rounded-full p-4 text-center hover:bg-gray-3000">
<img
className="ml-[9px] mt-[9px] text-white"
className="w-6 text-white "
onClick={() => {
if (inputRef.current?.textContent) {
handleQuestion(inputRef.current.textContent);
Expand All @@ -212,7 +211,7 @@ export default function Conversation() {
</div>
)}
</div>
<p className="hidden md:inline text-gray-595959 w-[100vw] self-center bg-white bg-transparent p-5 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:w-full">
<p className="text-gray-595959 hidden w-[100vw] self-center bg-white bg-transparent p-5 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:inline md:w-full">
DocsGPT uses GenAI, please review critial information using sources.
</p>
</div>
Expand Down
7 changes: 5 additions & 2 deletions frontend/src/settings/Documents.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { DocumentsProps } from '../models/misc';
import Trash from '../assets/trash.svg';

import PropTypes from 'prop-types';
const Documents: React.FC<DocumentsProps> = ({
documents,
handleDeleteDocument,
Expand Down Expand Up @@ -56,5 +56,8 @@ const Documents: React.FC<DocumentsProps> = ({
</div>
);
};

Documents.propTypes = {
documents: PropTypes.array.isRequired,
handleDeleteDocument: PropTypes.func.isRequired,
};
export default Documents;

0 comments on commit 4534caf

Please sign in to comment.