LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-12-01 01:23:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: several small ui refactor for generalisation

Browse Source
This commit is contained in:
Siddhant Rai
2024-05-12 12:41:12 +05:30
parent ad76f239a3
commit d2def4479b
16 changed files with 192 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/settings/APIKeys.tsx
View File

@@ -95,7 +95,7 @@ const APIKeys: React.FC = () => {
<div className="flex justify-end">
<button
onClick={() => setCreateModal(true)}
className="rounded-full bg-purple-30 px-4 py-3 text-sm text-white hover:opacity-90"
className="rounded-full bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
>
Create new
</button>
@@ -234,7 +234,7 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
</span>
<input
type="text"
className="h-10 w-full rounded-md border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-[42px] w-full rounded-md border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
value={APIKeyName}
onChange={(e) => setAPIKeyName(e.target.value)}
/>
@@ -285,7 +285,7 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
chunks: chunk,
})
}
className="float-right mt-4 rounded-full bg-purple-30 px-4 py-3 text-white disabled:opacity-50"
className="float-right mt-4 rounded-full bg-purple-30 px-5 py-2 text-sm text-white hover:bg-[#6F3FD1] disabled:opacity-50"
>
Create
</button>
@@ -316,7 +316,7 @@ const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
<span className="text-sm font-normal leading-7 ">{apiKey}</span>
</div>
<button
className="my-1 h-10 w-20 rounded-full border border-purple-30 p-2 text-sm text-purple-30 hover:bg-purple-30 hover:text-white dark:border-purple-500 dark:text-purple-500"
className="my-1 h-10 w-20 rounded-full border border-solid border-purple-30 p-2 text-sm text-purple-30 hover:bg-purple-30 hover:text-white"
onClick={handleCopyKey}
>
{isCopied ? 'Copied' : 'Copy'}

19
frontend/src/settings/General.tsx
View File

@@ -47,7 +47,7 @@ const General: React.FC = () => {
return (
<div className="mt-[59px]">
<div className="mb-4">
<div className="mb-5">
<p className="font-bold text-jet dark:text-bright-gray">Select Theme</p>
<Dropdown
options={themes}
@@ -58,9 +58,10 @@ const General: React.FC = () => {
}}
size="w-56"
rounded="3xl"
border="border"
/>
</div>
<div className="mb-4">
<div className="mb-5">
<p className="font-bold text-jet dark:text-bright-gray">
Select Language
</p>
@@ -70,9 +71,10 @@ const General: React.FC = () => {
onSelect={setSelectedLanguage}
size="w-56"
rounded="3xl"
border="border"
/>
</div>
<div className="mb-4">
<div className="mb-5">
<p className="font-bold text-jet dark:text-bright-gray">
Chunks processed per query
</p>
@@ -82,9 +84,10 @@ const General: React.FC = () => {
onSelect={(value: string) => dispatch(setChunks(value))}
size="w-56"
rounded="3xl"
border="border"
/>
</div>
<div>
<div className="mb-5">
<Prompts
prompts={prompts}
selectedPrompt={selectedPrompt}
@@ -95,17 +98,15 @@ const General: React.FC = () => {
apiHost={apiHost}
/>
</div>
<div className="w-55 w-56">
<div className="w-56">
<p className="font-bold text-jet dark:text-bright-gray">
Delete all conversations
</p>
<button
className="mt-2 flex w-full cursor-pointer items-center justify-between rounded-3xl border-2 border-solid border-purple-30 px-5 py-3 text-purple-30 hover:bg-purple-30 hover:text-white"
className="mt-2 flex w-full cursor-pointer items-center justify-between rounded-3xl border border-solid border-red-500 px-5 py-3 text-red-500 hover:bg-red-500 hover:text-white"
onClick={() => dispatch(setModalStateDeleteConv('ACTIVE'))}
>
<span className="overflow-hidden text-ellipsis ">
Delete
</span>
<span className="overflow-hidden text-ellipsis ">Delete all</span>
</button>
</div>
</div>

5
frontend/src/settings/Prompts.tsx
View File

@@ -156,7 +156,7 @@ const Prompts: React.FC<PromptProps> = ({
return (
<>
<div>
<div className="mb-4 flex flex-row items-center gap-8">
<div className="flex flex-row items-center gap-8">
<div>
<p className="font-semibold dark:text-bright-gray">Active Prompt</p>
<Dropdown
@@ -165,6 +165,7 @@ const Prompts: React.FC<PromptProps> = ({
onSelect={handleSelectPrompt}
size="w-56"
rounded="3xl"
border="border"
showEdit
showDelete
onEdit={({
@@ -186,7 +187,7 @@ const Prompts: React.FC<PromptProps> = ({
/>
</div>
<button
className="mt-[24px] rounded-3xl border-2 border-solid border-purple-30 px-5 py-3 text-purple-30 hover:bg-purple-30 hover:text-white"
className="mt-[24px] rounded-3xl border border-solid border-purple-30 px-5 py-3 text-purple-30 hover:bg-purple-30 hover:text-white"
onClick={() => {
setModalType('ADD');
setModalState('ACTIVE');