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

Made ui/ux changes

Browse Source
This commit is contained in:
Niharika Goulikar
2024-10-15 16:43:00 +00:00
parent f3ff3920d9
commit 4aeeaf185c
3 changed files with 103 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/src/Navigation.tsx
View File

@@ -6,6 +6,7 @@ import { NavLink, useNavigate } from 'react-router-dom';
import conversationService from './api/services/conversationService';
import userService from './api/services/userService';
import Add from './assets/add.svg';
import openNewChat from './assets/openNewChat.svg';
import DocsGPT3 from './assets/cute_docsgpt3.svg';
import Discord from './assets/discord.svg';
import Expand from './assets/expand.svg';
@@ -164,7 +165,12 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
}),
);
};
const newChat = () => {
if (conversations && conversations?.length > 0) {
resetConversation();
navigate('/');
}
};
async function updateConversationName(updatedConversation: {
name: string;
id: string;
@@ -200,26 +206,40 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
return (
<>
{!navOpen && (
<button
className="duration-25 absolute top-3 left-3 z-20 hidden transition-all md:block"
onClick={() => {
setNavOpen(!navOpen);
}}
>
<img
src={Expand}
alt="menu toggle"
className={`${
!navOpen ? 'rotate-180' : 'rotate-0'
} m-auto transition-all duration-200`}
/>
</button>
<div className="duration-25 absolute top-3 left-3 z-20 hidden transition-all md:block">
<div className="flex gap-3 items-center">
<button
onClick={() => {
setNavOpen(!navOpen);
}}
>
<img
src={Expand}
alt="menu toggle"
className={`${
!navOpen ? 'rotate-180' : 'rotate-0'
} m-auto transition-all duration-200`}
/>
</button>
<img
src={openNewChat}
alt="open new chat icon"
className="cursor-pointer"
onClick={() => {
newChat();
}}
/>
<div className="text-[#949494] font-medium text-[20px]">
DocsGPT
</div>
</div>
</div>
)}
<div
ref={navRef}
className={`${
!navOpen && '-ml-96 md:-ml-[18rem]'
} duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
} duration-20 fixed top-0 z-40 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
>
<div
className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
@@ -426,16 +446,19 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
</div>
</div>
<div className="sticky z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black md:hidden">
<button
className="mt-5 ml-6 h-6 w-6 md:hidden"
onClick={() => setNavOpen(true)}
>
<img
src={Hamburger}
alt="menu toggle"
className="w-7 filter dark:invert"
/>
</button>
<div className="flex gap-6 items-center h-full ml-6 ">
<button
className=" h-6 w-6 md:hidden"
onClick={() => setNavOpen(true)}
>
<img
src={Hamburger}
alt="menu toggle"
className="w-7 filter dark:invert"
/>
</button>
<div className="text-[#949494] font-medium text-[20px]">DocsGPT</div>
</div>
</div>
<APIKeyModal
modalState={apiKeyModalState}