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

(fix) dark theme,train modal

Browse Source
This commit is contained in:
ManishMadan2882
2024-07-30 18:01:49 +05:30
parent f75ed4bc66
commit 09f2f2a9e7
8 changed files with 26 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/App.tsx
View File

@@ -1,5 +1,4 @@
import { Routes, Route } from 'react-router-dom';
import { useEffect } from 'react';
import Navigation from './Navigation';
import Conversation from './conversation/Conversation';
import About from './About';
@@ -34,17 +33,7 @@ function MainLayout() {
}
export default function App() {
const [isDarkTheme] = useDarkTheme();
useEffect(() => {
localStorage.setItem('selectedTheme', isDarkTheme ? 'Dark' : 'Light');
if (isDarkTheme) {
document
.getElementById('root')
?.classList.add('dark', 'dark:bg-raisin-black');
} else {
document.getElementById('root')?.classList.remove('dark');
}
}, [isDarkTheme]);
useDarkTheme();
return (
<>
<Routes>

5
frontend/src/Navigation.tsx
View File

@@ -10,7 +10,6 @@ import DocsGPT3 from './assets/cute_docsgpt3.svg';
import Discord from './assets/discord.svg';
import Expand from './assets/expand.svg';
import Github from './assets/github.svg';
import HamburgerDark from './assets/hamburger-dark.svg';
import Hamburger from './assets/hamburger.svg';
import Info from './assets/info.svg';
import SettingGear from './assets/settingGear.svg';
@@ -393,9 +392,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
onClick={() => setNavOpen(true)}
>
<img
src={isDarkTheme ? HamburgerDark : Hamburger}
src={Hamburger}
alt="menu toggle"
className="w-7"
className="w-7 filter dark:invert"
/>
</button>
</div>

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

@@ -266,7 +266,7 @@ export default function Conversation() {
{queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
</div>
<div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-6/12">
<div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-8/12">
<div className="flex h-full w-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
<div
id="inputbox"

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

@@ -48,7 +48,8 @@ export default function ConversationTile({
setConversationsName(conversation.name);
}, [conversation.name]);
function handleEditConversation() {
function handleEditConversation(event: SyntheticEvent) {
event.stopPropagation();
setIsEdit(true);
setOpen(false);
}

8
frontend/src/conversation/SharedConversation.tsx
View File

@@ -203,7 +203,7 @@ export const SharedConversation = () => {
<div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black">
<div className="flex w-full justify-center overflow-auto">
<div className="mt-0 w-11/12 md:w-10/12 lg:w-6/12">
<div className="mb-2 w-full border-b pb-2">
<div className="mb-2 w-full border-b pb-2 dark:border-b-silver">
<h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
{title}
</h1>
@@ -279,10 +279,10 @@ export const SharedConversation = () => {
{t('sharedConv.button')}
</button>
)}
<span className="mb-2 hidden text-xs text-dark-charcoal dark:text-silver sm:inline">
{t('sharedConv.meta')}
</span>
</div>
<span className="mb-2 hidden text-xs text-dark-charcoal dark:text-silver sm:inline">
{t('sharedConv.meta')}
</span>
</div>
);
};

25
frontend/src/hooks/index.ts
View File

@@ -70,35 +70,18 @@ export function useDarkTheme() {
localStorage.getItem('selectedTheme') === 'Dark' || false,
);
useEffect(() => {
// Check if dark mode preference exists in local storage
const savedMode: string | null = localStorage.getItem('selectedTheme');
// Set dark mode based on local storage preference
if (savedMode === 'Dark') {
setIsDarkTheme(true);
document
.getElementById('root')
?.classList.add('dark', 'dark:bg-raisin-black');
} else {
// If no preference found, set to default (light mode)
setIsDarkTheme(false);
document.getElementById('root')?.classList.remove('dark');
}
}, []);
useEffect(() => {
localStorage.setItem('selectedTheme', isDarkTheme ? 'Dark' : 'Light');
if (isDarkTheme) {
document
.getElementById('root')
?.classList.add('dark', 'dark:bg-raisin-black');
document.body?.classList.add('dark');
} else {
document.getElementById('root')?.classList.remove('dark');
document.body?.classList.remove('dark');
}
}, [isDarkTheme]);
//method to toggle theme
const toggleTheme: any = () => {
setIsDarkTheme(!isDarkTheme);
};
return [isDarkTheme, toggleTheme];
}

3
frontend/src/index.css
View File

@@ -2,6 +2,9 @@
@tailwind components;
@tailwind utilities;
body.dark {
background-color: #202124; /* raisin-black */
}
::-webkit-scrollbar {
width: 8px;
}

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

@@ -30,7 +30,7 @@ function Upload({
const [activeTab, setActiveTab] = useState<string>('file');
const [files, setfiles] = useState<File[]>([]);
const [progress, setProgress] = useState<{
type: 'UPLOAD' | 'TRAINIING';
type: 'UPLOAD' | 'TRAINING';
percentage: number;
taskId?: string;
failed?: boolean;
@@ -61,10 +61,10 @@ function Upload({
return (
<div className="my-5 w-[50%]">
<div
className={`h-4 overflow-hidden rounded-lg border border-purple-30 text-xs text-white outline-none `}
className={`h-8 overflow-hidden rounded-xl border border-purple-30 text-xs text-bright-gray outline-none `}
>
<div
className={`h-full border-none p-1 w-${
className={`h-full border-none text-xl w-${
progress || 0
}% flex items-center justify-center bg-purple-30 outline-none transition-all`}
style={{ width: `${progressPercent || 0}%` }}
@@ -86,15 +86,13 @@ function Upload({
isFailed?: boolean;
}) {
return (
<div className="mt-5 flex flex-col items-center gap-2">
<p className="text-xl tracking-[0.15px]">{title}...</p>
<p className="text-sm text-gray-2000">This may take several minutes</p>
<div className="mt-5 flex flex-col items-center gap-2 text-gray-2000 dark:text-bright-gray">
<p className="text-gra text-xl tracking-[0.15px]">{title}...</p>
<p className="text-sm">This may take several minutes</p>
<p className={`ml-5 text-xl text-red-400 ${isFailed ? '' : 'hidden'}`}>
Over the token limit, please consider uploading smaller document
</p>
{/* <p className="mt-10 text-2xl">{progress?.percentage || 0}%</p> */}
{/* progress bar */}
<ProgressBar progressPercent={progress?.percentage as number} />
</div>
);
@@ -208,7 +206,7 @@ function Upload({
xhr.onload = () => {
const { task_id } = JSON.parse(xhr.responseText);
setTimeoutRef.current = setTimeout(() => {
setProgress({ type: 'TRAINIING', percentage: 0, taskId: task_id });
setProgress({ type: 'TRAINING', percentage: 0, taskId: task_id });
}, 3000);
};
xhr.open('POST', `${apiHost + '/api/upload'}`);
@@ -239,7 +237,7 @@ function Upload({
xhr.onload = () => {
const { task_id } = JSON.parse(xhr.responseText);
setTimeoutRef.current = setTimeout(() => {
setProgress({ type: 'TRAINIING', percentage: 0, taskId: task_id });
setProgress({ type: 'TRAINING', percentage: 0, taskId: task_id });
}, 3000);
};
xhr.open('POST', `${apiHost + '/api/remote'}`);
@@ -284,7 +282,7 @@ function Upload({
if (progress?.type === 'UPLOAD') {
view = <UploadProgress></UploadProgress>;
} else if (progress?.type === 'TRAINIING') {
} else if (progress?.type === 'TRAINING') {
view = <TrainingProgress></TrainingProgress>;
} else {
view = (