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

Merge pull request #340 from DenyTwice/main

Browse Source 
UI Improvements, implements task 3 in issue #279
This commit is contained in:
Alex
2023-09-24 11:13:27 +01:00
committed by GitHub
parent b2118602d9 d983a519e3
commit f7244ddb7a
6 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/About.tsx
View File

@@ -4,7 +4,7 @@
export default function About() {
return (
<div className="mx-5 grid min-h-screen md:mx-36">
<article className=" place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-6 rounded-lg bg-gray-100 p-6 pt-14 pb-14 text-jet lg:p-10 xl:p-16">
<article className=" place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-6 rounded-3xl bg-gray-100 p-6 pt-14 pb-14 text-jet lg:p-10 xl:p-16">
<div className="flex items-center">
<p className="mr-2 text-3xl">About DocsGPT</p>
<p className="text-[21px]">🦖</p>

4
frontend/src/Modal/index.tsx
View File

@@ -17,11 +17,11 @@ const Modal = (props: ModalProps) => {
} absolute z-30 h-screen w-screen bg-gray-alpha`}
>
{props.render()}
<div className=" mx-auto flex w-[90vw] max-w-lg flex-row-reverse rounded-lg bg-white pb-5 pr-5 shadow-lg">
<div className=" mx-auto flex w-[90vw] max-w-lg flex-row-reverse rounded-b-lg bg-white pb-5 pr-5 shadow-lg">
<div>
<button
onClick={() => props.handleSubmit()}
className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
className="ml-auto h-10 w-20 rounded-3xl bg-violet-800 text-white transition-all hover:bg-violet-700"
>
Save
</button>

20
frontend/src/Navigation.tsx
View File

@@ -11,7 +11,6 @@ import Link from './assets/link.svg';
import UploadIcon from './assets/upload.svg';
import { ActiveState } from './models/misc';
import APIKeyModal from './preferences/APIKeyModal';
import SelectDocsModal from './preferences/SelectDocsModal';
import { useDispatch, useSelector } from 'react-redux';
import {
selectApiKeyStatus,
@@ -30,6 +29,7 @@ import {
import { useOutsideAlerter } from './hooks';
import Upload from './upload/Upload';
import { Doc, getConversations } from './preferences/preferenceApi';
import SelectDocsModal from './preferences/SelectDocsModal';
export default function Navigation({
navState,
@@ -180,10 +180,10 @@ export default function Navigation({
className={({ isActive }) =>
`${
isActive && conversationId === null ? 'bg-gray-3000' : ''
} my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100`
} my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100`
}
>
<img src={Message} className="ml-2 w-5"></img>
<img src={Message} className="ml-4 w-5"></img>
<p className="my-auto text-eerie-black">New Chat</p>
</NavLink>
<div className="conversations-container max-h-[25rem] overflow-y-auto">
@@ -195,7 +195,7 @@ export default function Navigation({
onClick={() => {
handleConversationClick(conversation.id);
}}
className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-md hover:bg-gray-100 ${
className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 ${
conversationId === conversation.id ? 'bg-gray-100' : ''
}`}
>
@@ -228,7 +228,7 @@ export default function Navigation({
<div className="flex flex-col-reverse border-b-2">
<div className="relative my-4 flex gap-2 px-2">
<div
className="flex h-12 w-full cursor-pointer justify-between rounded-md border-2 bg-white"
className="flex h-12 w-full cursor-pointer justify-between rounded-3xl rounded-md border-2 bg-white"
onClick={() => setIsDocsListOpen(!isDocsListOpen)}
>
{selectedDocs && (
@@ -241,7 +241,7 @@ export default function Navigation({
alt="arrow"
className={`${
isDocsListOpen ? 'rotate-0' : 'rotate-180'
} mr-3 w-3 transition-all`}
} ml-auto mr-3 w-3 transition-all`}
/>
</div>
<img
@@ -294,7 +294,7 @@ export default function Navigation({
</div>
<div className="flex flex-col gap-2 border-b-2 py-2">
<div
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
onClick={() => {
setApiKeyModalState('ACTIVE');
}}
@@ -308,7 +308,7 @@ export default function Navigation({
<NavLink
to="/about"
className={({ isActive }) =>
`my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100 ${
`my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
isActive ? 'bg-gray-3000' : ''
}`
}
@@ -321,7 +321,7 @@ export default function Navigation({
href="https://discord.gg/WHJdfbQDR4"
target="_blank"
rel="noreferrer"
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
>
<img src={Link} alt="link" className="ml-2 w-5" />
<p className="my-auto text-eerie-black">Discord</p>
@@ -331,7 +331,7 @@ export default function Navigation({
href="https://github.com/arc53/DocsGPT"
target="_blank"
rel="noreferrer"
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
>
<img src={Link} alt="link" className="ml-2 w-5" />
<p className="my-auto text-eerie-black">Github</p>

2
frontend/src/preferences/APIKeyModal.tsx
View File

@@ -60,7 +60,7 @@ export default function APIKeyModal({
return (
<article
ref={modalRef}
className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-lg bg-white p-6 shadow-lg"
className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-t-lg bg-white p-6 shadow-lg"
>
<p className="text-xl text-jet">OpenAI API Key</p>
<p className="text-md leading-6 text-gray-500">

2
frontend/src/preferences/SelectDocsModal.tsx
View File

@@ -61,7 +61,7 @@ export default function APIKeyModal({
isError={isError}
render={() => {
return (
<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-t-lg bg-white p-6 shadow-lg">
<p className="text-xl text-jet">Select Source Documentation</p>
<p className="text-lg leading-5 text-gray-500">
Please select the library of documentation that you would like to

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

@@ -55,7 +55,7 @@ export default function Upload({
setProgress(undefined);
setModalState('INACTIVE');
}}
className={`rounded-md bg-blue-3000 px-4 py-2 text-sm font-medium text-white ${
className={`rounded-3xl bg-blue-3000 px-4 py-2 text-sm font-medium text-white ${
isCancellable ? '' : 'hidden'
}`}
>
@@ -162,7 +162,8 @@ export default function Upload({
'text/x-rst': ['.rst'],
'text/x-markdown': ['.md'],
'application/zip': ['.zip'],
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx']
'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
['.docx'],
},
});
@@ -188,7 +189,7 @@ export default function Upload({
<span className="bg-white px-2 text-xs text-gray-4000">Name</span>
</div>
<div {...getRootProps()}>
<span className="rounded-md border border-blue-2000 px-4 py-2 font-medium text-blue-2000 hover:cursor-pointer">
<span className="rounded-3xl border border-blue-2000 px-4 py-2 font-medium text-blue-2000 hover:cursor-pointer">
<input type="button" {...getInputProps()} />
Choose Files
</span>
@@ -205,7 +206,7 @@ export default function Upload({
<div className="flex flex-row-reverse">
<button
onClick={uploadFile}
className="ml-6 rounded-md bg-blue-3000 py-2 px-6 text-white"
className="ml-6 rounded-3xl bg-blue-3000 py-2 px-6 text-white"
>
Train
</button>