diff --git a/frontend/public/lock-dark.svg b/frontend/public/lock-dark.svg new file mode 100644 index 00000000..40a6b516 --- /dev/null +++ b/frontend/public/lock-dark.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/frontend/public/message-programming-dark.svg b/frontend/public/message-programming-dark.svg new file mode 100644 index 00000000..fec336ad --- /dev/null +++ b/frontend/public/message-programming-dark.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/frontend/public/message-programming.svg b/frontend/public/message-programming.svg index f017810a..4432ad2b 100644 --- a/frontend/public/message-programming.svg +++ b/frontend/public/message-programming.svg @@ -1,6 +1,10 @@ - - - - + + + + + + + + diff --git a/frontend/public/message-text-dark.svg b/frontend/public/message-text-dark.svg new file mode 100644 index 00000000..cca376ba --- /dev/null +++ b/frontend/public/message-text-dark.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx index eaffafdc..b144ce80 100644 --- a/frontend/src/About.tsx +++ b/frontend/src/About.tsx @@ -5,7 +5,7 @@ import DocsGPT3 from './assets/cute_docsgpt3.svg'; export default function About() { return (
-
+

About DocsGPT

DocsGPT @@ -31,23 +31,23 @@ export default function About() {

1. Navigate to{' '} - /application folder + /application folder

2. Install dependencies from{' '} - + pip install -r requirements.txt

- 3. Prepare a .env file. - Copy .env_sample and - create .env with your + 3. Prepare a .env file. + Copy .env_sample and + create .env with your OpenAI API token

4. Run the app with{' '} - python app.py + python app.py

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index fdf86dd2..27eda07d 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -5,7 +5,7 @@ import About from './About'; import PageNotFound from './PageNotFound'; import { inject } from '@vercel/analytics'; import { useMediaQuery } from './hooks'; -import { useState } from 'react'; +import { useState,useEffect } from 'react'; import Setting from './Setting'; inject(); @@ -13,9 +13,17 @@ inject(); export default function App() { const { isMobile } = useMediaQuery(); const [navOpen, setNavOpen] = useState(!isMobile); - + const selectedTheme = localStorage.getItem('selectedTheme'); + useEffect(()=>{ + if (selectedTheme === 'Dark') { + document.documentElement.classList.add('dark'); + document.body.classList.add('dark:bg-raisin-black'); + } else { + document.documentElement.classList.remove('dark'); + } + },[]) return ( -
+
+

DocsGPT

DocsGPT
{isMobile ? ( -

+

Welcome to DocsGPT, your technical documentation assistant! Start by entering your query in the input field below, and we'll provide you with the most relevant @@ -19,37 +21,35 @@ export default function Hero({ className = '' }: { className?: string }) {

) : ( <> -

+

Welcome to DocsGPT, your technical documentation assistant!

-

+

Enter a query related to the information in the documentation you selected to receive
and we will provide you with the most relevant answers.

-

+

Start by entering your query in the input field below and we will do the rest!

)}
{/* first */} -
+
{/* Add Mobile check here */} {isMobile ? (
lock @@ -60,7 +60,7 @@ export default function Hero({ className = '' }: { className?: string }) { ) : ( <> lock @@ -72,8 +72,8 @@ export default function Hero({ className = '' }: { className?: string }) {

DocsGPT will use your data to answer questions. Whether its @@ -84,23 +84,22 @@ export default function Hero({ className = '' }: { className?: string }) {

{/* second */} -
+
{/* Add Mobile check here */} {isMobile ? ( -
- lock +
+ lock

Secure Data Storage

) : ( <> - lock + lock

Secure Data Storage

@@ -109,8 +108,8 @@ export default function Hero({ className = '' }: { className?: string }) {

The security of your data is our top priority. DocsGPT ensures the @@ -121,17 +120,16 @@ export default function Hero({ className = '' }: { className?: string }) {

{/* third */} -
+
{/* Add Mobile check here */} {isMobile ? (
lock @@ -142,7 +140,7 @@ export default function Hero({ className = '' }: { className?: string }) { ) : ( <> lock @@ -154,8 +152,8 @@ export default function Hero({ className = '' }: { className?: string }) {

DocsGPT is built on open source principles, promoting transparency diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index f08f0bdf..e954a55f 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -3,14 +3,21 @@ import { useDispatch, useSelector } from 'react-redux'; import { NavLink, useNavigate } from 'react-router-dom'; import DocsGPT3 from './assets/cute_docsgpt3.svg'; import Documentation from './assets/documentation.svg'; +import DocumentationDark from './assets/documentation-dark.svg'; import Discord from './assets/discord.svg'; +import DiscordDark from './assets/discord-dark.svg'; + import Arrow2 from './assets/dropdown-arrow.svg'; import Expand from './assets/expand.svg'; import Trash from './assets/trash.svg'; import Github from './assets/github.svg'; +import GithubDark from './assets/github-dark.svg'; import Hamburger from './assets/hamburger.svg'; +import HamburgerDark from './assets/hamburger-dark.svg'; import Info from './assets/info.svg'; +import InfoDark from './assets/info-dark.svg'; import SettingGear from './assets/settingGear.svg'; +import SettingGearDark from './assets/settingGear-dark.svg'; import Add from './assets/add.svg'; import UploadIcon from './assets/upload.svg'; import { ActiveState } from './models/misc'; @@ -47,7 +54,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { const conversations = useSelector(selectConversations); const conversationId = useSelector(selectConversationId); const { isMobile } = useMediaQuery(); - + const isDarkTheme = document.documentElement.classList.contains('dark'); const [isDocsListOpen, setIsDocsListOpen] = useState(false); const isApiKeySet = useSelector(selectApiKeyStatus); @@ -174,7 +181,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { <> {!navOpen && ( )}

@@ -227,9 +231,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { ); }} className={({ isActive }) => - `${ - isActive ? 'bg-gray-3000' : '' - } group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-gray-3000` + `${isActive ? 'bg-gray-3000 dark:bg-transparent' : '' + } group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray dark:border-purple-taupe dark:text-white dark:hover:bg-transparent hover:bg-gray-3000` } > new -

+

New Chat

-
+
{conversations && (

Chats

@@ -262,11 +265,11 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { )}
-
-
+
+
setIsDocsListOpen(!isDocsListOpen)} > {selectedDocs && ( @@ -277,9 +280,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { arrow
setUploadModalState('ACTIVE')} > {isDocsListOpen && ( -
+
{docs ? ( docs.map((doc, index) => { if (doc.model === embeddingsName) { @@ -299,7 +301,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { dispatch(setSelectedDocs(doc)); setIsDocsListOpen(false); }} - className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 hover:bg-gray-100" + className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-[1px] dark:border-purple-taupe hover:bg-gray-100 dark:hover:bg-purple-taupe" >

{doc.name} {doc.version} @@ -321,7 +323,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { } }) ) : ( -

+

No default documentation.

)} @@ -330,58 +332,56 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {

Source Docs

-
+
- `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${ - isActive ? 'bg-gray-3000' : '' + `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${isActive ? 'bg-gray-3000 dark:bg-transparent' : '' }` } > settings -

Settings

+

Settings
-
+
- `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${ - isActive ? 'bg-gray-3000' : '' + `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${isActive ? 'bg-gray-3000 dark:bg-purple-taupe' : '' }` } > - info -

About

+ info +

About

 documentation -

Documentation

+

Documentation

 - discord-link -

+ discord-link +

Visit our Discord

@@ -390,22 +390,22 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { href="https://github.com/arc53/DocsGPT" target="_blank" rel="noreferrer" - className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100" + className="mt-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe" > - github-link -

+ github-link +

Visit our Github

-
+
{ }; return ( -
-

Settings

+
+

Settings

@@ -187,15 +185,25 @@ const Setting: React.FC = () => { }; const General: React.FC = () => { - const themes = ['Light']; + const themes = ['Light', 'Dark']; const languages = ['English']; - const [selectedTheme, setSelectedTheme] = useState(themes[0]); + const [selectedTheme, setSelectedTheme] = useState(localStorage.getItem('selectedTheme') || themes[0]); const [selectedLanguage, setSelectedLanguage] = useState(languages[0]); + useEffect(() => { + if (selectedTheme === 'Dark') { + document.documentElement.classList.add('dark'); + document.documentElement.classList.add('dark:bg-raisin-black'); + } else { + document.documentElement.classList.remove('dark'); + } + localStorage.setItem('selectedTheme', selectedTheme); + }, [selectedTheme]); + return (
-

Select Theme

+

Select Theme

{ />
-

Select Language

+

Select Language

= ({ return (
-

Active Prompt

+

Active Prompt

= ({
-

Prompt name

{' '} -

+

Prompt name

{' '} +

start by editing name

setNewPromptName(e.target.value)} />
-

Prompt content

+

Prompt content