Archives
/
DocsGPT
mirror of https://github.com/arc53/DocsGPT
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #921 from siiddhantt/bugfix

Browse Source 
fix for missing fields in API Keys section
pull/925/head^2
Alex 2 months ago committed by GitHub
parent a37b92223a 00b6639155
commit b8749e36b9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 192 additions and 123 deletions
Show Stats Download Patch File Download Diff File

10
frontend/src/components/Dropdown.tsx
Unescape Escape View File

@ -14,8 +14,6 @@ function Dropdown({
showDelete, showDelete,
onDelete, onDelete,
placeholder, placeholder,
fullWidth,
alignMidddle,
}: { }: {
options: options:
| string[] | string[]
@ -33,8 +31,6 @@ function Dropdown({
showDelete?: boolean; showDelete?: boolean;
onDelete?: (value: string) => void; onDelete?: (value: string) => void;
placeholder?: string; placeholder?: string;
fullWidth?: boolean;
alignMidddle?: boolean;
}) { }) {
const [isOpen, setIsOpen] = React.useState(false); const [isOpen, setIsOpen] = React.useState(false);
return ( return (
@ -58,9 +54,7 @@ function Dropdown({
</span> </span>
) : ( ) : (
<span <span
className={`${ className={`overflow-hidden text-ellipsis dark:text-bright-gray ${
alignMidddle && 'flex-1'
} overflow-hidden text-ellipsis dark:text-bright-gray ${
!selectedValue && 'text-silver dark:text-gray-400' !selectedValue && 'text-silver dark:text-gray-400'
}`} }`}
> >
@ -91,7 +85,7 @@ function Dropdown({
onSelect(option); onSelect(option);
setIsOpen(false); setIsOpen(false);
}} }}
className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray" className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray"
> >
{typeof option === 'string' {typeof option === 'string'
? option ? option

7
frontend/src/models/misc.ts
Unescape Escape View File

@ -30,7 +30,12 @@ export type DocumentsProps = {
export type CreateAPIKeyModalProps = { export type CreateAPIKeyModalProps = {
close: () => void; close: () => void;
createAPIKey: (payload: { name: string; source: string }) => void; createAPIKey: (payload: {
name: string;
source: string;
prompt_id: string;
chunks: string;
}) => void;
}; };
export type SaveAPIKeyModalProps = { export type SaveAPIKeyModalProps = {

195
frontend/src/preferences/PromptsModal.tsx
Unescape Escape View File

@ -1,4 +1,5 @@
import { ActiveState } from '../models/misc'; import { ActiveState } from '../models/misc';
import Exit from '../assets/exit.svg';
function AddPrompt({ function AddPrompt({
setModalState, setModalState,
@ -16,50 +17,54 @@ function AddPrompt({
setNewPromptContent: (content: string) => void; setNewPromptContent: (content: string) => void;
}) { }) {
return ( return (
<div className="rounded-3xl px-4 py-2"> <div className="relative">
<p className="mb-1 text-xl text-jet dark:text-bright-gray">Add Prompt</p> <button
<p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]"> className="absolute top-3 right-4 m-2 w-3"
Add your custom prompt and save it to DocsGPT onClick={() => {
</p> setModalState('INACTIVE');
<div> }}
<input >
placeholder="Prompt Name" <img className="filter dark:invert" src={Exit} />
type="text" </button>
className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver" <div className="p-8">
value={newPromptName} <p className="mb-1 text-xl text-jet dark:text-bright-gray">
onChange={(e) => setNewPromptName(e.target.value)} Add Prompt
></input> </p>
<div className="relative bottom-12 left-3 mt-[-3.00px]"> <p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]">
<span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver"> Add your custom prompt and save it to DocsGPT
Prompt Name </p>
</span> <div>
<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"
value={newPromptName}
onChange={(e) => setNewPromptName(e.target.value)}
></input>
<div className="relative bottom-12 left-3 mt-[-3.00px]">
<span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
Prompt Name
</span>
</div>
<div className="relative top-[7px] left-3">
<span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
Prompt Text
</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"
value={newPromptContent}
onChange={(e) => setNewPromptContent(e.target.value)}
></textarea>
</div> </div>
<div className="relative top-[7px] left-3"> <div className="mt-6 flex flex-row-reverse">
<span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver"> <button
Prompt Text onClick={handleAddPrompt}
</span> className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:opacity-90"
>
Save
</button>
</div> </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"
value={newPromptContent}
onChange={(e) => setNewPromptContent(e.target.value)}
></textarea>
</div>
<div className="mt-6 flex flex-row-reverse gap-4">
<button
onClick={handleAddPrompt}
className="rounded-3xl bg-purple-30 px-5 py-2 text-white transition-all hover:opacity-90"
>
Save
</button>
<button
onClick={() => {
setModalState('INACTIVE');
}}
className="cursor-pointer font-medium dark:text-light-gray"
>
Cancel
</button>
</div> </div>
</div> </div>
); );
@ -83,58 +88,62 @@ function EditPrompt({
currentPromptEdit: { name: string; id: string; type: string }; currentPromptEdit: { name: string; id: string; type: string };
}) { }) {
return ( return (
<div className="rounded-3xl px-4 py-2"> <div className="relative">
<p className="mb-1 text-xl text-jet dark:text-bright-gray">Edit Prompt</p> <button
<p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]"> className="absolute top-3 right-4 m-2 w-3"
Edit your custom prompt and save it to DocsGPT onClick={() => {
</p> setModalState('INACTIVE');
<div> }}
<input >
placeholder="Prompt Name" <img className="filter dark:invert" src={Exit} />
type="text" </button>
className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver" <div className="p-8">
value={editPromptName} <p className="mb-1 text-xl text-jet dark:text-bright-gray">
onChange={(e) => setEditPromptName(e.target.value)} Edit Prompt
></input> </p>
<div className="relative bottom-12 left-3 mt-[-3.00px]"> <p className="mb-7 text-xs text-[#747474] dark:text-[#7F7F82]">
<span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver"> Edit your custom prompt and save it to DocsGPT
Prompt Name </p>
</span> <div>
<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"
value={editPromptName}
onChange={(e) => setEditPromptName(e.target.value)}
></input>
<div className="relative bottom-12 left-3 mt-[-3.00px]">
<span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
Prompt Name
</span>
</div>
<div className="relative top-[7px] left-3">
<span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver">
Prompt Text
</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"
value={editPromptContent}
onChange={(e) => setEditPromptContent(e.target.value)}
></textarea>
</div> </div>
<div className="relative top-[7px] left-3"> <div className="mt-6 flex flex-row-reverse gap-4">
<span className="bg-white px-1 text-xs text-silver dark:bg-outer-space dark:text-silver"> <button
Prompt Text className={`rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all ${
</span> currentPromptEdit.type === 'public'
? 'cursor-not-allowed opacity-50'
: 'hover:opacity-90'
}`}
onClick={() => {
handleEditPrompt &&
handleEditPrompt(currentPromptEdit.id, currentPromptEdit.type);
}}
disabled={currentPromptEdit.type === 'public'}
>
Save
</button>
</div> </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"
value={editPromptContent}
onChange={(e) => setEditPromptContent(e.target.value)}
></textarea>
</div>
<div className="mt-6 flex flex-row-reverse gap-4">
<button
className={`rounded-3xl bg-purple-30 px-5 py-2 text-white transition-all ${
currentPromptEdit.type === 'public'
? 'cursor-not-allowed opacity-50'
: 'hover:opacity-90'
}`}
onClick={() => {
handleEditPrompt &&
handleEditPrompt(currentPromptEdit.id, currentPromptEdit.type);
}}
disabled={currentPromptEdit.type === 'public'}
>
Save
</button>
<button
onClick={() => {
setModalState('INACTIVE');
}}
className="cursor-pointer font-medium dark:text-light-gray"
>
Cancel
</button>
</div> </div>
</div> </div>
); );
@ -205,7 +214,7 @@ export default function PromptsModal({
modalState === 'ACTIVE' ? 'visible' : 'hidden' modalState === 'ACTIVE' ? 'visible' : 'hidden'
} fixed top-0 left-0 z-30 h-screen w-screen bg-gray-alpha`} } fixed top-0 left-0 z-30 h-screen w-screen bg-gray-alpha`}
> >
<article className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-lg bg-white p-6 shadow-lg dark:bg-outer-space"> <article className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-outer-space">
{view} {view}
</article> </article>
</article> </article>

99
frontend/src/settings/APIKeys.tsx
Unescape Escape View File

@ -59,7 +59,12 @@ const APIKeys: React.FC = () => {
console.log(error); console.log(error);
} }
}; };
const createAPIKey = (payload: { name: string; source: string }) => { const createAPIKey = (payload: {
name: string;
source: string;
prompt_id: string;
chunks: string;
}) => {
fetch(`${apiHost}/api/create_api_key`, { fetch(`${apiHost}/api/create_api_key`, {
method: 'POST', method: 'POST',
headers: { headers: {
@ -75,9 +80,9 @@ const APIKeys: React.FC = () => {
}) })
.then((data) => { .then((data) => {
setApiKeys([...apiKeys, data]); setApiKeys([...apiKeys, data]);
setCreateModal(false); //close the create key modal setCreateModal(false);
setNewKey(data.key); setNewKey(data.key);
setSaveKeyModal(true); // render the newly created key setSaveKeyModal(true);
fetchAPIKeys(); fetchAPIKeys();
}) })
.catch((error) => { .catch((error) => {
@ -90,9 +95,9 @@ const APIKeys: React.FC = () => {
<div className="flex justify-end"> <div className="flex justify-end">
<button <button
onClick={() => setCreateModal(true)} onClick={() => setCreateModal(true)}
className="rounded-full bg-purple-30 px-4 py-3 text-sm text-white hover:bg-[#7E66B1]" className="rounded-full bg-purple-30 px-4 py-3 text-sm text-white hover:opacity-90"
> >
Create New Create new
</button> </button>
</div> </div>
{isCreateModalOpen && ( {isCreateModalOpen && (
@ -155,7 +160,33 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
label: string; label: string;
value: string; value: string;
} | null>(null); } | null>(null);
const chunkOptions = ['0', '2', '4', '6', '8', '10'];
const [chunk, setChunk] = React.useState<string>('2');
const [activePrompts, setActivePrompts] = React.useState<
{ name: string; id: string; type: string }[]
>([]);
const [prompt, setPrompt] = React.useState<{
name: string;
id: string;
type: string;
} | null>(null);
const docs = useSelector(selectSourceDocs); const docs = useSelector(selectSourceDocs);
React.useEffect(() => {
const fetchPrompts = async () => {
try {
const response = await fetch(`${apiHost}/api/get_prompts`);
if (!response.ok) {
throw new Error('Failed to fetch prompts');
}
const promptsData = await response.json();
setActivePrompts(promptsData);
} catch (error) {
console.error(error);
}
};
fetchPrompts();
}, []);
const extractDocPaths = () => const extractDocPaths = () =>
docs docs
? docs ? docs
@ -188,14 +219,16 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
return ( return (
<div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50"> <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
<div className="relative w-11/12 rounded-lg bg-white p-5 dark:bg-outer-space sm:w-[512px]"> <div className="relative w-11/12 rounded-2xl bg-white p-10 dark:bg-outer-space sm:w-[512px]">
<button className="absolute top-2 right-2 m-2 w-4" onClick={close}> <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
<img className="filter dark:invert" src={Exit} /> <img className="filter dark:invert" src={Exit} />
</button> </button>
<span className="mb-4 text-xl font-bold text-jet dark:text-bright-gray"> <div className="mb-6">
Create New API Key <span className="text-xl text-jet dark:text-bright-gray">
</span> Create New API Key
<div className="relative my-4"> </span>
</div>
<div className="relative mt-5 mb-4">
<span className="absolute left-2 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver"> <span className="absolute left-2 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
API Key Name API Key Name
</span> </span>
@ -208,21 +241,51 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
</div> </div>
<div className="my-4"> <div className="my-4">
<Dropdown <Dropdown
placeholder="Select the source doc" placeholder="Source document"
selectedValue={sourcePath} selectedValue={sourcePath}
onSelect={(selection: { label: string; value: string }) => onSelect={(selection: { label: string; value: string }) =>
setSourcePath(selection) setSourcePath(selection)
} }
options={extractDocPaths()} options={extractDocPaths()}
size="w-full"
rounded="xl"
/>
</div>
<div className="my-4">
<Dropdown
options={activePrompts}
selectedValue={prompt ? prompt.name : null}
placeholder="Select active prompt"
onSelect={(value: { name: string; id: string; type: string }) =>
setPrompt(value)
}
size="w-full"
/>
</div>
<div className="my-4">
<p className="mb-2 ml-2 font-bold text-jet dark:text-bright-gray">
Chunks processed per query
</p>
<Dropdown
options={chunkOptions}
selectedValue={chunk}
onSelect={(value: string) => setChunk(value)}
size="w-full"
/> />
</div> </div>
<button <button
disabled={sourcePath === null || APIKeyName.length === 0} disabled={!sourcePath || APIKeyName.length === 0 || !prompt}
onClick={() => onClick={() =>
sourcePath && sourcePath &&
createAPIKey({ name: APIKeyName, source: sourcePath.value }) prompt &&
createAPIKey({
name: APIKeyName,
source: sourcePath.value,
prompt_id: prompt.id,
chunks: chunk,
})
} }
className="float-right my-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-4 py-3 text-white disabled:opacity-50"
> >
Create Create
</button> </button>
@ -239,8 +302,8 @@ const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
}; };
return ( return (
<div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50"> <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
<div className="relative w-11/12 rounded-md bg-white p-5 dark:bg-outer-space dark:text-bright-gray sm:w-[512px]"> <div className="relative w-11/12 rounded-3xl bg-white px-6 py-8 dark:bg-outer-space dark:text-bright-gray sm:w-[512px]">
<button className="absolute top-4 right-4 w-4" onClick={close}> <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
<img className="filter dark:invert" src={Exit} /> <img className="filter dark:invert" src={Exit} />
</button> </button>
<h1 className="my-0 text-xl font-medium">Please save your Key</h1> <h1 className="my-0 text-xl font-medium">Please save your Key</h1>
@ -253,7 +316,7 @@ const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
<span className="text-sm font-normal leading-7 ">{apiKey}</span> <span className="text-sm font-normal leading-7 ">{apiKey}</span>
</div> </div>
<button <button
className="my-1 h-10 w-20 rounded-full border border-purple-30 p-2 text-sm text-purple-30 dark:border-purple-500 dark:text-purple-500" 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"
onClick={handleCopyKey} onClick={handleCopyKey}
> >
{isCopied ? 'Copied' : 'Copy'} {isCopied ? 'Copied' : 'Copy'}

4
frontend/src/upload/Upload.tsx
Unescape Escape View File

@ -302,7 +302,6 @@ export default function Upload({
{activeTab === 'remote' && ( {activeTab === 'remote' && (
<> <>
<Dropdown <Dropdown
fullWidth
options={urlOptions} options={urlOptions}
selectedValue={urlType} selectedValue={urlType}
onSelect={(value: { label: string; value: string }) => onSelect={(value: { label: string; value: string }) =>
@ -420,7 +419,7 @@ export default function Upload({
disabled={ disabled={
(files.length === 0 || docName.trim().length === 0) && (files.length === 0 || docName.trim().length === 0) &&
activeTab === 'file' activeTab === 'file'
} // Disable the button if no file is selected or docName is empty }
> >
Train Train
</button> </button>
@ -451,4 +450,3 @@ export default function Upload({
</article> </article>
); );
} }
// TODO: sanitize all inputs

Write Preview
Loading…
Cancel
Save