Archives
/
DocsGPT
mirror of https://github.com/arc53/DocsGPT
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added dark mode, Hero component

Browse Source
pull/837/head
ManishMadan2882 4 months ago
parent ffecc9a0c7
commit 5136e7726d
10 changed files with 85 additions and 61 deletions
Show Stats Download Patch File Download Diff File

7
frontend/public/lock-dark.svg
Unescape Escape View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
<path d="M8.25 13.75V11C8.25 6.44875 9.625 2.75 16.5 2.75C23.375 2.75 24.75 6.44875 24.75 11V13.75" stroke="#ECECF1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23.375 30.25H9.625C4.125 30.25 2.75 28.875 2.75 23.375V20.625C2.75 15.125 4.125 13.75 9.625 13.75H23.375C28.875 13.75 30.25 15.125 30.25 20.625V23.375C30.25 28.875 28.875 30.25 23.375 30.25Z" stroke="#ECECF1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21.9951 22H22.0075" stroke="#ECECF1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.4938 22H16.5061" stroke="#ECECF1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.9924 22H11.0048" stroke="#ECECF1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 919 B

6
frontend/public/message-programming-dark.svg
Unescape Escape View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
<path d="M12.75 28.4551H12C6 28.4551 3 26.9551 3 19.4551V11.9551C3 5.95508 6 2.95508 12 2.95508H24C30 2.95508 33 5.95508 33 11.9551V19.4551C33 25.4551 30 28.4551 24 28.4551H23.25C22.785 28.4551 22.335 28.6801 22.05 29.0551L19.8 32.0551C18.81 33.3751 17.19 33.3751 16.2 32.0551L13.95 29.0551C13.71 28.7251 13.17 28.4551 12.75 28.4551Z" stroke="#ECECF1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 13.05L9 16.05L12 19.05" stroke="#ECECF1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 13.05L27 16.05L24 19.05" stroke="#ECECF1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.5 12.5549L16.5 19.545" stroke="#ECECF1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 980 B

12
frontend/public/message-programming.svg
Unescape Escape View File

@ -1,6 +1,10 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.75 28.455H12C6 28.455 3 26.955 3 19.455V11.955C3 5.95496 6 2.95496 12 2.95496H24C30 2.95496 33 5.95496 33 11.955V19.455C33 25.455 30 28.455 24 28.455H23.25C22.785 28.455 22.335 28.68 22.05 29.055L19.8 32.055C18.81 33.375 17.19 33.375 16.2 32.055L13.95 29.055C13.71 28.725 13.17 28.455 12.75 28.455Z" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 13.05L9 16.05L12 19.05" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 13.05L27 16.05L24 19.05" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.5 12.5549L16.5 19.545" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<g id="vuesax/linear/message-programming">
<g id="message-programming">
<path id="Vector" d="M12.75 28.455H12C6 28.455 3 26.955 3 19.455V11.955C3 5.95496 6 2.95496 12 2.95496H24C30 2.95496 33 5.95496 33 11.955V19.455C33 25.455 30 28.455 24 28.455H23.25C22.785 28.455 22.335 28.68 22.05 29.055L19.8 32.055C18.81 33.375 17.19 33.375 16.2 32.055L13.95 29.055C13.71 28.725 13.17 28.455 12.75 28.455Z" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M12 13.05L9 16.05L12 19.05" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_3" d="M24 13.05L27 16.05L24 19.05" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_4" d="M19.5 12.555L16.5 19.545" stroke="#3E3434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 951 B

After

Width:  |  Height:  |  Size: 1.1 KiB

5
frontend/public/message-text-dark.svg
Unescape Escape View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none">
<path d="M10.2708 22.9584H9.66663C4.83329 22.9584 2.41663 21.7501 2.41663 15.7084V9.66675C2.41663 4.83341 4.83329 2.41675 9.66663 2.41675H19.3333C24.1666 2.41675 26.5833 4.83341 26.5833 9.66675V15.7084C26.5833 20.5417 24.1666 22.9584 19.3333 22.9584H18.7291C18.3545 22.9584 17.992 23.1397 17.7625 23.4417L15.95 25.8584C15.1525 26.9217 13.8475 26.9217 13.05 25.8584L11.2375 23.4417C11.0441 23.1759 10.597 22.9584 10.2708 22.9584Z" stroke="#ECECF1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.45837 9.66675H20.5417" stroke="#ECECF1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.45837 15.7083H15.7084" stroke="#ECECF1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 880 B

63
frontend/src/Hero.tsx
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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>

5
frontend/tailwind.config.cjs
Unescape Escape View File

@ -35,12 +35,13 @@ module.exports = {
'just-black':"#00000",
'purple-taupe':'#464152',
'dove-gray': '#6c6c6c',
silver: '#c4c4c4',
'silver': '#c4c4c4',
'rainy-gray': '#a4a4a4',
'dark-bg':'#222327',
'chinese-black':'#161616',
'dark-charcoal':'#2F3036',
'bright-gray':'#ECECF1'
'bright-gray':'#ECECF1',
'outer-space':'#444654'
},
},
},

Write Preview
Loading…
Cancel
Save