LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-30 00:53:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

added dark mode, Hero component

Browse Source
This commit is contained in:
ManishMadan2882
2024-01-21 17:18:23 +05:30
parent ffecc9a0c7
commit 5136e7726d
10 changed files with 85 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/Hero.tsx
View File

@@ -4,14 +4,15 @@ import DocsGPT3 from './assets/cute_docsgpt3.svg';
export default function Hero({ className = '' }: { className?: string }) {
// const isMobile = window.innerWidth <= 768;
const { isMobile } = useMediaQuery();
const isDarkTheme = localStorage.getItem('selectedTheme') === 'Dark';
return (
<div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col `}>
<div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col text-black-1000 dark:text-bright-gray`}>
<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 text-black-1000">
<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
@@ -19,37 +20,35 @@ export default function Hero({ className = '' }: { className?: string }) {
</p>
) : (
<>
<p className="mb-3 text-center leading-6 text-black-1000">
<p className="mb-3 text-center leading-6">
Welcome to DocsGPT, your technical documentation assistant!
</p>
<p className="mb-3 text-center leading-6 text-black-1000">
<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 text-black-1000">
<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={`sections ${
isMobile ? '' : 'mt-1'
} flex flex-wrap items-center justify-center gap-2 sm:gap-1 md:gap-0`}
className={`sections ${isMobile ? '' : 'mt-1'
} flex flex-wrap items-center justify-center gap-2 sm:gap-1 md:gap-0`}
>
{/* first */}
<div className="h-auto md:h-60 rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tr-none md:rounded-br-none">
<div className="h-auto md:h-60 rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 dark:from-[#D16FF8] via-[#3B82F6] dark:via-[#48E6E0] to-[#9333EA]/50 dark:to-[#C85EF6] p-1 md:rounded-tr-none md:rounded-br-none">
<div
className={`h-full rounded-[45px] bg-white p-${
isMobile ? '3.5' : '6 py-8'
} md:rounded-tr-none md:rounded-br-none`}
className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${isMobile ? '3.5' : '6 py-8'
} md:rounded-tr-none md:rounded-br-none`}
>
{/* Add Mobile check here */}
{isMobile ? (
<div className="flex justify-center">
<img
src="/message-text.svg"
src={isDarkTheme ? "/message-text-dark.svg" : "/message-text.svg"}
alt="lock"
className="h-[24px] w-[24px] "
/>
@@ -60,7 +59,7 @@ export default function Hero({ className = '' }: { className?: string }) {
) : (
<>
<img
src="/message-text.svg"
src={isDarkTheme ? "/message-text-dark.svg" : "/message-text.svg"}
alt="lock"
className="h-[24px] w-[24px]"
/>
@@ -72,8 +71,8 @@ export default function Hero({ className = '' }: { className?: string }) {
<p
className={
isMobile
? `w-[250px] text-center text-xs text-gray-500`
: `w-[250px] text-xs text-gray-500`
? `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
@@ -84,23 +83,22 @@ export default function Hero({ className = '' }: { className?: string }) {
</div>
</div>
{/* second */}
<div className="h-auto md:h-60 rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-none md:py-1 md:px-0">
<div className="h-auto md:h-60 rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 dark:from-[#D16FF8] via-[#3B82F6] dark:via-[#48E6E0] to-[#9333EA]/50 dark:to-[#C85EF6] p-1 md:rounded-none md:py-1 md:px-0">
<div
className={`h-full rounded-[45px] bg-white p-${
isMobile ? '3.5' : '6 py-6'
} md:rounded-none`}
className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${isMobile ? '3.5' : '6 py-6'
} md:rounded-none`}
>
{/* Add Mobile check here */}
{isMobile ? (
<div className="flex justify-center">
<img src="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
<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="/lock.svg" alt="lock" className="h-[24px] w-[24px]" />
<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>
@@ -109,8 +107,8 @@ export default function Hero({ className = '' }: { className?: string }) {
<p
className={
isMobile
? `w-[250px] text-center text-xs text-gray-500`
: `w-[250px] text-xs text-gray-500`
? `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
@@ -121,17 +119,16 @@ export default function Hero({ className = '' }: { className?: string }) {
</div>
</div>
{/* third */}
<div className="h-auto md:h-60 rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/80 via-[#3B82F6] to-[#9333EA]/50 p-1 md:rounded-tl-none md:rounded-bl-none ">
<div className="h-auto md:h-60 rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70 dark:from-[#D16FF8] via-[#3B82F6] dark:via-[#48E6E0] to-[#9333EA]/50 dark:to-[#C85EF6] p-1 md:rounded-tl-none md:rounded-bl-none ">
<div
className={`h-full firefox rounded-[45px] bg-white p-${
isMobile ? '3.5' : '6 px-6 '
} lg:rounded-tl-none lg:rounded-bl-none`}
className={`h-full firefox 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="/message-programming.svg"
src={isDarkTheme ? "message-programming-dark.svg" : "/message-programming.svg"}
alt="lock"
className="h-[24px] w-[24px]"
/>
@@ -142,7 +139,7 @@ export default function Hero({ className = '' }: { className?: string }) {
) : (
<>
<img
src="/message-programming.svg"
src={isDarkTheme ? "/message-programming-dark.svg" : "/message-programming.svg"}
alt="lock"
className="h-[24px] w-[24px]"
/>
@@ -154,8 +151,8 @@ export default function Hero({ className = '' }: { className?: string }) {
<p
className={
isMobile
? `w-[250px] text-center text-xs text-gray-500`
: `w-[250px] text-xs text-gray-500`
? `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

18
frontend/src/Setting.tsx
View File

@@ -588,28 +588,28 @@ const Documents: React.FC<DocumentsProps> = ({
<div className="flex flex-col">
{/* <h2 className="text-xl font-semibold">Documents</h2> */}
<div className="mt-[27px] overflow-x-auto">
<div className="mt-[27px] overflow-x-auto border rounded-xl w-max">
<table className="block w-full table-auto content-center justify-center text-center dark:text-bright-gray" >
<thead>
<tr>
<th className="border p-4 md:w-[244px]">Document Name</th>
<th className="border px-4 py-2 w-[244px]">Vector Date</th>
<th className="border px-4 py-2 w-[244px]">Type</th>
<th className="border px-4 py-2"></th>
<th className="border-r p-4 md:w-[244px]">Document Name</th>
<th className="border-r px-4 py-2 w-[244px]">Vector Date</th>
<th className="border-r px-4 py-2 w-[244px]">Type</th>
<th className="px-4 py-2"></th>
</tr>
</thead>
<tbody>
{documents &&
documents.map((document, index) => (
<tr key={index}>
<td className="border px-4 py-2">{document.name}</td>
<td className="border px-4 py-2">{document.date}</td>
<td className="border px-4 py-2">
<td className="border-r border-t px-4 py-2">{document.name}</td>
<td className="border-r border-t px-4 py-2">{document.date}</td>
<td className="border-r border-t px-4 py-2">
{document.location === 'remote'
? 'Pre-loaded'
: 'Private'}
</td>
<td className="border px-4 py-2">
<td className="border-t px-4 py-2">
{document.location !== 'remote' && (
<img
src={Trash}

3
frontend/src/assets/send_dark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.00999999 18L21 9L0.00999999 0L0 7L15 9L0 11L0.00999999 18Z" fill="#949494"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 192 B

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

@@ -11,6 +11,7 @@ import {
updateQuery,
} from './conversationSlice';
import Send from './../assets/send.svg';
import SendDark from './../assets/send_dark.svg'
import Spinner from './../assets/spinner.svg';
import { FEEDBACK, Query } from './conversationModels';
import { sendFeedback } from './conversationApi';
@@ -152,7 +153,7 @@ export default function Conversation() {
{queries.length === 0 && (
<Hero className="mt-24 h-[100vh] md:mt-52"></Hero>
)}
<div className="relative bottom-0 flex w-10/12 flex-col items-end self-center bg-white pt-3 md:fixed md:w-[65%]">
<div className="relative bottom-0 flex w-10/12 flex-col items-end self-center bg-white dark:bg-dark-charcoal pt-3 md:fixed md:w-[65%]">
<div className="flex h-full w-full">
<div
id="inputbox"
@@ -161,7 +162,7 @@ export default function Conversation() {
placeholder="Type your message here..."
contentEditable
onPaste={handlePaste}
className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto whitespace-pre-wrap rounded-3xl border bg-white py-2 pl-4 pr-9 text-base leading-7 opacity-100 focus:outline-none`}
className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto whitespace-pre-wrap rounded-3xl border bg-white dark:bg-transparent dark:text-bright-gray py-2 pl-4 pr-9 text-base leading-7 opacity-100 focus:outline-none`}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
@@ -180,19 +181,19 @@ export default function Conversation() {
) : (
<div className="relative right-[43px] bottom-[7px] -mr-[35px] h-[35px] w-[35px] cursor-pointer self-end rounded-full hover:bg-gray-3000">
<img
className="ml-[9px] mt-[9px]"
className="ml-[9px] mt-[9px] text-white"
onClick={() => {
if (inputRef.current?.textContent) {
handleQuestion(inputRef.current.textContent);
inputRef.current.textContent = '';
}
}}
src={Send}
src={localStorage.getItem('selectedTheme') === 'Dark' ? SendDark : Send}
></img>
</div>
)}
</div>
<p className="text-gray-595959 w-[100vw] self-center bg-white p-5 text-center text-xs md:w-full">
<p className="text-gray-595959 dark:text-bright-gray w-[100vw] self-center bg-white dark:bg-dark-charcoal p-5 text-center text-xs md:w-full">
This is a chatbot that uses the GPT-3, Faiss and LangChain to answer
questions.
</p>

16
frontend/src/upload/Upload.tsx
View File

@@ -175,33 +175,33 @@ export default function Upload({
} else {
view = (
<>
<p className="text-xl text-jet">Upload New Documentation</p>
<p className="text-xl text-jet dark:text-bright-gray">Upload New Documentation</p>
<p className="mb-3 text-xs text-gray-4000">
Please upload .pdf, .txt, .rst, .docx, .md, .zip limited to 25mb
</p>
<input
type="text"
className="h-10 w-[60%] rounded-md border-2 border-gray-5000 px-3 outline-none"
className="h-10 w-[60%] rounded-md border-2 border-gray-5000 dark:text-silver dark:bg-transparent px-3 outline-none"
value={docName}
onChange={(e) => setDocName(e.target.value)}
></input>
<div className="relative bottom-12 left-2 mt-[-18.39px]">
<span className="bg-white px-2 text-xs text-gray-4000">Name</span>
<span className="bg-white px-2 text-xs text-gray-4000 dark:text-silver dark:bg-outer-space">Name</span>
</div>
<div {...getRootProps()}>
<span className="rounded-3xl border border-purple-30 px-4 py-2 font-medium text-purple-30 hover:cursor-pointer">
<span className="rounded-3xl border border-purple-30 dark:bg-purple-taupe px-4 py-2 font-medium text-purple-30 dark:text-silver hover:cursor-pointer">
<input type="button" {...getInputProps()} />
Choose Files
</span>
</div>
<div className="mt-9">
<p className="mb-5 font-medium text-eerie-black">Uploaded Files</p>
<p className="mb-5 font-medium text-eerie-black dark:text-light-gray">Uploaded Files</p>
{files.map((file) => (
<p key={file.name} className="text-gray-6000">
{file.name}
</p>
))}
{files.length === 0 && <p className="text-gray-6000">None</p>}
{files.length === 0 && <p className="text-gray-6000 dark:text-light-gray">None</p>}
</div>
<div className="flex flex-row-reverse">
<button
@@ -221,7 +221,7 @@ export default function Upload({
setfiles([]);
setModalState('INACTIVE');
}}
className="font-medium"
className="font-medium dark:text-light-gray"
>
Cancel
</button>
@@ -236,7 +236,7 @@ export default function Upload({
modalState === 'ACTIVE' ? 'visible' : 'hidden'
} absolute z-30 h-screen w-screen bg-gray-alpha`}
>
<article className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
<article className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-lg bg-white dark:bg-outer-space p-6 shadow-lg">
{view}
</article>
</article>