mirror of
https://github.com/arc53/DocsGPT
synced 2024-11-19 21:25:39 +00:00
Alex
GitHub
commit
4534cafd3f
@ -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 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>
|
||||
|
||||
<div className="mb-4 flex flex-col items-center justify-center dark:text-white"></div>
|
||||
</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'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`
|
||||
}
|
||||
<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 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>
|
||||
{/* 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`
|
||||
}
|
||||
>
|
||||
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>
|
||||
);
|
||||
|
||||
@ -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
|
||||
@ -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"
|
||||
@ -169,11 +169,10 @@ 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}
|
||||
@ -181,7 +180,7 @@ export default function Conversation() {
|
||||
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();
|
||||
@ -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);
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
@ -56,5 +56,8 @@ const Documents: React.FC<DocumentsProps> = ({
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Documents.propTypes = {
|
||||
documents: PropTypes.array.isRequired,
|
||||
handleDeleteDocument: PropTypes.func.isRequired,
|
||||
};
|
||||
export default Documents;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user