LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-12-01 09:33: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

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

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { ActiveState } from '../models/misc';
import { selectApiKey, setApiKey } from './preferenceSlice';
import { useMediaQuery, useOutsideAlerter } from './../hooks';
import Modal from '../Modal';
import Modal from '../modals';
export default function APIKeyModal({
modalState,

62
frontend/src/preferences/DeleteConvModal.tsx
View File

@@ -1,62 +0,0 @@
import { useRef } from 'react';
import { ActiveState } from '../models/misc';
import { useMediaQuery, useOutsideAlerter } from './../hooks';
import Modal from '../Modal';
import { useDispatch } from 'react-redux';
import { Action } from '@reduxjs/toolkit';
export default function DeleteConvModal({
modalState,
setModalState,
handleDeleteAllConv,
}: {
modalState: ActiveState;
setModalState: (val: ActiveState) => Action;
handleDeleteAllConv: () => void;
}) {
const dispatch = useDispatch();
const modalRef = useRef(null);
const { isMobile } = useMediaQuery();
useOutsideAlerter(
modalRef,
() => {
if (isMobile && modalState === 'ACTIVE') {
dispatch(setModalState('INACTIVE'));
}
},
[modalState],
);
function handleSubmit() {
handleDeleteAllConv();
dispatch(setModalState('INACTIVE'));
}
function handleCancel() {
dispatch(setModalState('INACTIVE'));
}
return (
<Modal
handleCancel={handleCancel}
isError={false}
modalState={modalState}
isCancellable={true}
handleSubmit={handleSubmit}
textDelete={true}
render={() => {
return (
<article
ref={modalRef}
className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-t-lg bg-white dark:bg-outer-space dark:text-silver p-6 shadow-lg"
>
<p className="text-xl text-jet dark:text-silver">
Are you sure you want to delete all the conversations?
</p>
</article>
);
}}
/>
);
}

8
frontend/src/preferences/PromptsModal.tsx
View File

@@ -37,7 +37,7 @@ function AddPrompt({
<input
placeholder="Prompt Name"
type="text"
className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
value={newPromptName}
onChange={(e) => setNewPromptName(e.target.value)}
></input>
@@ -52,7 +52,7 @@ function AddPrompt({
</span>
</div>
<textarea
className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:bg-transparent dark:text-silver"
className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
value={newPromptContent}
onChange={(e) => setNewPromptContent(e.target.value)}
></textarea>
@@ -108,7 +108,7 @@ function EditPrompt({
<input
placeholder="Prompt Name"
type="text"
className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
value={editPromptName}
onChange={(e) => setEditPromptName(e.target.value)}
></input>
@@ -123,7 +123,7 @@ function EditPrompt({
</span>
</div>
<textarea
className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:bg-transparent dark:text-silver"
className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
value={editPromptContent}
onChange={(e) => setEditPromptContent(e.target.value)}
></textarea>

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

@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ActiveState } from '../models/misc';
import Modal from '../Modal';
import Modal from '../modals';
import {
setSelectedDocs,
setSourceDocs,