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

fixes, update Nav images on theme toggle

Browse Source
This commit is contained in:
ManishMadan2882
2024-02-01 03:43:05 +05:30
parent 7a1c9101b2
commit dea385384a
6 changed files with 39 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/App.tsx
View File

@@ -13,15 +13,6 @@ 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 (
<div className="min-h-full min-w-full dark:bg-raisin-black">
<Navigation navOpen={navOpen} setNavOpen={setNavOpen} />

5
frontend/src/Hero.tsx
View File

@@ -1,11 +1,10 @@
import { useMediaQuery } from './hooks';
import { useDarkTheme, useMediaQuery } from './hooks';
import DocsGPT3 from './assets/cute_docsgpt3.svg';
export default function Hero({ className = '' }: { className?: string }) {
// const isMobile = window.innerWidth <= 768;
const { isMobile } = useMediaQuery();
const isDarkTheme = document.documentElement.classList.contains('dark');
console.log(isDarkTheme)
const [isDarkTheme] = useDarkTheme()
return (
<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">

42
frontend/src/Navigation.tsx
View File

@@ -41,12 +41,28 @@ import Upload from './upload/Upload';
import { Doc, getConversations } from './preferences/preferenceApi';
import SelectDocsModal from './preferences/SelectDocsModal';
import ConversationTile from './conversation/ConversationTile';
import { useDarkTheme } from './hooks';
interface NavigationProps {
navOpen: boolean;
setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
}
const NavImage: React.FC<{ Light: string, Dark: string }> = ({ Light, Dark }) => {
return (
<>
<img
src={Dark}
alt="icon"
className="ml-2 w-5 hidden dark:block "
/>
<img
src={Light}
alt="icon"
className="ml-2 w-5 dark:hidden "
/>
</>
)
}
export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
const dispatch = useDispatch();
const docs = useSelector(selectSourceDocs);
@@ -54,7 +70,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 [isDarkTheme] = useDarkTheme();
const [isDocsListOpen, setIsDocsListOpen] = useState(false);
const isApiKeySet = useSelector(selectApiKeyStatus);
@@ -176,7 +192,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
useEffect(() => {
setNavOpen(!isMobile);
}, [isMobile]);
return (
<>
{!navOpen && (
@@ -340,11 +355,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
}`
}
>
<img
src={isDarkTheme ? SettingGearDark : SettingGear}
alt="settings"
className="ml-2 w-5 opacity-60"
/>
<NavImage Light={SettingGear} Dark={SettingGearDark} />
<p className="my-auto text-sm text-eerie-black dark:text-white">Settings</p>
</NavLink>
</div>
@@ -357,7 +368,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
}`
}
>
<img src={isDarkTheme ? InfoDark : Info} alt="info" className="ml-2 w-5" />
<NavImage Light={Info} Dark={InfoDark} />
<p className="my-auto text-sm">About</p>
</NavLink>
@@ -367,11 +378,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
rel="noreferrer"
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
>
<img
src={isDarkTheme ? DocumentationDark : Documentation}
alt="documentation"
className="ml-2 w-5"
/>
<NavImage Light={Documentation} Dark={DocumentationDark} />
<p className="my-auto text-sm ">Documentation</p>
</a>
<a
@@ -380,7 +387,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
rel="noreferrer"
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
>
<img src={isDarkTheme ? DiscordDark : Discord} alt="discord-link" className="ml-2 w-5" />
<NavImage Light={Discord} Dark={DiscordDark} />
{/* <img src={isDarkTheme ? DiscordDark : Discord} alt="discord-link" className="ml-2 w-5" /> */}
<p className="my-auto text-sm">
Visit our Discord
</p>
@@ -392,7 +400,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
rel="noreferrer"
className="mt-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
>
<img src={isDarkTheme ? GithubDark : Github} alt="github-link" className="ml-2 w-5" />
<NavImage Light={Github} Dark={GithubDark} />
<p className="my-auto text-sm">
Visit our Github
</p>
@@ -405,7 +413,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
className="mt-5 ml-6 h-6 w-6 md:hidden"
onClick={() => setNavOpen(true)}
>
<img src={isDarkTheme ? HamburgerDark :Hamburger} alt="menu toggle" className="w-7" />
<img src={isDarkTheme ? HamburgerDark : Hamburger} alt="menu toggle" className="w-7" />
</button>
</div>
<SelectDocsModal

21
frontend/src/Setting.tsx
View File

@@ -10,6 +10,8 @@ import {
selectSourceDocs,
} from './preferences/preferenceSlice';
import { Doc } from './preferences/preferenceApi';
import { useDarkTheme } from './hooks';
import { Light } from 'react-syntax-highlighter';
type PromptProps = {
prompts: { name: string; id: string; type: string }[];
selectedPrompt: { name: string; id: string; type: string };
@@ -187,19 +189,9 @@ const Setting: React.FC = () => {
const General: React.FC = () => {
const themes = ['Light', 'Dark'];
const languages = ['English'];
const [selectedTheme, setSelectedTheme] = useState(localStorage.getItem('selectedTheme') || themes[0]);
const [isDarkTheme, toggleTheme] = useDarkTheme();
const [selectedTheme, setSelectedTheme] = useState(isDarkTheme ? 'Dark' : 'Light');
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 (
<div className="mt-[59px]">
<div className="mb-4">
@@ -207,7 +199,10 @@ const General: React.FC = () => {
<Dropdown
options={themes}
selectedValue={selectedTheme}
onSelect={setSelectedTheme}
onSelect={(option:string)=>{
setSelectedTheme(option);
option !==selectedTheme && toggleTheme();
}}
/>
</div>
<div>

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

@@ -1,5 +1,6 @@
import { Fragment, useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useDarkTheme } from '../hooks';
import Hero from '../Hero';
import { AppDispatch } from '../store';
import ConversationBubble from './ConversationBubble';
@@ -23,7 +24,7 @@ export default function Conversation() {
const dispatch = useDispatch<AppDispatch>();
const endMessageRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLDivElement>(null);
const isDarkTheme = document.documentElement.classList.contains('dark');
const [isDarkTheme]= useDarkTheme();
const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
useEffect(() => {

4
frontend/src/conversation/ConversationTile.tsx
View File

@@ -4,7 +4,7 @@ import Edit from '../assets/edit.svg';
import Exit from '../assets/exit.svg';
import Message from '../assets/message.svg';
import MessageDark from '../assets/message-dark.svg';
import { useDarkTheme } from '../hooks';
import CheckMark2 from '../assets/checkMark2.svg';
import Trash from '../assets/trash.svg';
@@ -29,7 +29,7 @@ export default function ConversationTile({
}: ConversationTileProps) {
const conversationId = useSelector(selectConversationId);
const tileRef = useRef<HTMLInputElement>(null);
const isDarkTheme = document.documentElement.classList.contains('dark');
const [isDarkTheme]= useDarkTheme();
const [isEdit, setIsEdit] = useState(false);
const [conversationName, setConversationsName] = useState('');
// useOutsideAlerter(