mirror of
https://github.com/arc53/DocsGPT.git
synced 2025-12-01 09:33:14 +00:00
enhancement: reusable api client setup + replaced in settings, conversation
This commit is contained in:
Siddhant Rai
@@ -1,22 +1,12 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import Dropdown from '../components/Dropdown';
|
||||
import {
|
||||
Doc,
|
||||
CreateAPIKeyModalProps,
|
||||
SaveAPIKeyModalProps,
|
||||
} from '../models/misc';
|
||||
import { selectSourceDocs } from '../preferences/preferenceSlice';
|
||||
import Exit from '../assets/exit.svg';
|
||||
import Trash from '../assets/trash.svg';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Input from '../components/Input';
|
||||
const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
|
||||
const embeddingsName =
|
||||
import.meta.env.VITE_EMBEDDINGS_NAME ||
|
||||
'huggingface_sentence-transformers/all-mpnet-base-v2';
|
||||
|
||||
const APIKeys: React.FC = () => {
|
||||
import userService from '../api/services/userService';
|
||||
import Trash from '../assets/trash.svg';
|
||||
import CreateAPIKeyModal from '../modals/CreateAPIKeyModal';
|
||||
import SaveAPIKeyModal from '../modals/SaveAPIKeyModal';
|
||||
|
||||
export default function APIKeys() {
|
||||
const { t } = useTranslation();
|
||||
const [isCreateModalOpen, setCreateModal] = React.useState(false);
|
||||
const [isSaveKeyModalOpen, setSaveKeyModal] = React.useState(false);
|
||||
@@ -24,14 +14,23 @@ const APIKeys: React.FC = () => {
|
||||
const [apiKeys, setApiKeys] = React.useState<
|
||||
{ name: string; key: string; source: string; id: string }[]
|
||||
>([]);
|
||||
|
||||
const handleFetchKeys = async () => {
|
||||
try {
|
||||
const response = await userService.getAPIKeys();
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch API Keys');
|
||||
}
|
||||
const apiKeys = await response.json();
|
||||
setApiKeys(apiKeys);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteKey = (id: string) => {
|
||||
fetch(`${apiHost}/api/delete_api_key`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ id }),
|
||||
})
|
||||
userService
|
||||
.deleteAPIKey({ id })
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to delete API Key');
|
||||
@@ -46,34 +45,15 @@ const APIKeys: React.FC = () => {
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
React.useEffect(() => {
|
||||
fetchAPIKeys();
|
||||
}, []);
|
||||
const fetchAPIKeys = async () => {
|
||||
try {
|
||||
const response = await fetch(`${apiHost}/api/get_api_keys`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch API Keys');
|
||||
}
|
||||
const apiKeys = await response.json();
|
||||
setApiKeys(apiKeys);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
const createAPIKey = (payload: {
|
||||
|
||||
const handleCreateKey = (payload: {
|
||||
name: string;
|
||||
source: string;
|
||||
prompt_id: string;
|
||||
chunks: string;
|
||||
}) => {
|
||||
fetch(`${apiHost}/api/create_api_key`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
userService
|
||||
.createAPIKey(payload)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to create API Key');
|
||||
@@ -85,12 +65,16 @@ const APIKeys: React.FC = () => {
|
||||
setCreateModal(false);
|
||||
setNewKey(data.key);
|
||||
setSaveKeyModal(true);
|
||||
fetchAPIKeys();
|
||||
handleFetchKeys();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
handleFetchKeys();
|
||||
}, []);
|
||||
return (
|
||||
<div className="mt-8">
|
||||
<div className="flex w-full flex-col lg:w-max">
|
||||
@@ -104,8 +88,8 @@ const APIKeys: React.FC = () => {
|
||||
</div>
|
||||
{isCreateModalOpen && (
|
||||
<CreateAPIKeyModal
|
||||
createAPIKey={handleCreateKey}
|
||||
close={() => setCreateModal(false)}
|
||||
createAPIKey={createAPIKey}
|
||||
/>
|
||||
)}
|
||||
{isSaveKeyModalOpen && (
|
||||
@@ -155,192 +139,4 @@ const APIKeys: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
|
||||
close,
|
||||
createAPIKey,
|
||||
}) => {
|
||||
const [APIKeyName, setAPIKeyName] = React.useState<string>('');
|
||||
const [sourcePath, setSourcePath] = React.useState<{
|
||||
label: string;
|
||||
value: string;
|
||||
} | 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);
|
||||
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 = () =>
|
||||
docs
|
||||
? docs
|
||||
.filter((doc) => doc.model === embeddingsName)
|
||||
.map((doc: Doc) => {
|
||||
let namePath = doc.name;
|
||||
if (doc.language === namePath) {
|
||||
namePath = '.project';
|
||||
}
|
||||
let docPath = 'default';
|
||||
if (doc.location === 'local') {
|
||||
docPath = 'local' + '/' + doc.name + '/';
|
||||
} else if (doc.location === 'remote') {
|
||||
docPath =
|
||||
doc.language +
|
||||
'/' +
|
||||
namePath +
|
||||
'/' +
|
||||
doc.version +
|
||||
'/' +
|
||||
doc.model +
|
||||
'/';
|
||||
}
|
||||
return {
|
||||
label: doc.name,
|
||||
value: docPath,
|
||||
};
|
||||
})
|
||||
: [];
|
||||
const { t } = useTranslation();
|
||||
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="relative w-11/12 rounded-2xl bg-white p-10 dark:bg-outer-space sm:w-[512px]">
|
||||
<button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
|
||||
<img className="filter dark:invert" src={Exit} />
|
||||
</button>
|
||||
<div className="mb-6">
|
||||
<span className="text-xl text-jet dark:text-bright-gray">
|
||||
{t('modals.createAPIKey.label')}
|
||||
</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">
|
||||
{t('modals.createAPIKey.apiKeyName')}
|
||||
</span>
|
||||
<Input
|
||||
type="text"
|
||||
className="rounded-md"
|
||||
value={APIKeyName}
|
||||
onChange={(e) => setAPIKeyName(e.target.value)}
|
||||
></Input>
|
||||
</div>
|
||||
<div className="my-4">
|
||||
<Dropdown
|
||||
placeholder={t('modals.createAPIKey.sourceDoc')}
|
||||
selectedValue={sourcePath}
|
||||
onSelect={(selection: { label: string; value: string }) =>
|
||||
setSourcePath(selection)
|
||||
}
|
||||
options={extractDocPaths()}
|
||||
size="w-full"
|
||||
rounded="xl"
|
||||
/>
|
||||
</div>
|
||||
<div className="my-4">
|
||||
<Dropdown
|
||||
options={activePrompts}
|
||||
selectedValue={prompt ? prompt.name : null}
|
||||
placeholder={t('modals.createAPIKey.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">
|
||||
{t('modals.createAPIKey.chunks')}
|
||||
</p>
|
||||
<Dropdown
|
||||
options={chunkOptions}
|
||||
selectedValue={chunk}
|
||||
onSelect={(value: string) => setChunk(value)}
|
||||
size="w-full"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
disabled={!sourcePath || APIKeyName.length === 0 || !prompt}
|
||||
onClick={() =>
|
||||
sourcePath &&
|
||||
prompt &&
|
||||
createAPIKey({
|
||||
name: APIKeyName,
|
||||
source: sourcePath.value,
|
||||
prompt_id: prompt.id,
|
||||
chunks: chunk,
|
||||
})
|
||||
}
|
||||
className="float-right mt-4 rounded-full bg-purple-30 px-5 py-2 text-sm text-white hover:bg-[#6F3FD1] disabled:opacity-50"
|
||||
>
|
||||
{t('modals.createAPIKey.create')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
|
||||
const [isCopied, setIsCopied] = React.useState(false);
|
||||
const { t } = useTranslation();
|
||||
const handleCopyKey = () => {
|
||||
navigator.clipboard.writeText(apiKey);
|
||||
setIsCopied(true);
|
||||
};
|
||||
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="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-3 right-4 m-2 w-3" onClick={close}>
|
||||
<img className="filter dark:invert" src={Exit} />
|
||||
</button>
|
||||
<h1 className="my-0 text-xl font-medium">
|
||||
{' '}
|
||||
{t('modals.saveKey.note')}
|
||||
</h1>
|
||||
<h3 className="text-sm font-normal text-outer-space">
|
||||
{t('modals.saveKey.disclaimer')}
|
||||
</h3>
|
||||
<div className="flex justify-between py-2">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold">API Key</h2>
|
||||
<span className="text-sm font-normal leading-7 ">{apiKey}</span>
|
||||
</div>
|
||||
<button
|
||||
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 ? t('modals.saveKey.copied') : t('modals.saveKey.copy')}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={close}
|
||||
className="rounded-full bg-philippine-yellow px-4 py-3 font-medium text-black hover:bg-[#E6B91A]"
|
||||
>
|
||||
{t('modals.saveKey.confirm')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default APIKeys;
|
||||
}
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import Prompts from './Prompts';
|
||||
import { useDarkTheme } from '../hooks';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import userService from '../api/services/userService';
|
||||
import Dropdown from '../components/Dropdown';
|
||||
import { useDarkTheme } from '../hooks';
|
||||
import {
|
||||
selectPrompt,
|
||||
setPrompt,
|
||||
setChunks,
|
||||
selectChunks,
|
||||
setTokenLimit,
|
||||
selectPrompt,
|
||||
selectTokenLimit,
|
||||
setChunks,
|
||||
setModalStateDeleteConv,
|
||||
setPrompt,
|
||||
setTokenLimit,
|
||||
} from '../preferences/preferenceSlice';
|
||||
import Prompts from './Prompts';
|
||||
|
||||
const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
|
||||
|
||||
const General: React.FC = () => {
|
||||
export default function General() {
|
||||
const {
|
||||
t,
|
||||
i18n: { changeLanguage, language },
|
||||
@@ -69,9 +69,9 @@ const General: React.FC = () => {
|
||||
const selectedPrompt = useSelector(selectPrompt);
|
||||
|
||||
React.useEffect(() => {
|
||||
const fetchPrompts = async () => {
|
||||
const handleFetchPrompts = async () => {
|
||||
try {
|
||||
const response = await fetch(`${apiHost}/api/get_prompts`);
|
||||
const response = await userService.getPrompts();
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch prompts');
|
||||
}
|
||||
@@ -81,14 +81,13 @@ const General: React.FC = () => {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
fetchPrompts();
|
||||
handleFetchPrompts();
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
localStorage.setItem('docsgpt-locale', selectedLanguage?.value as string);
|
||||
changeLanguage(selectedLanguage?.value);
|
||||
}, [selectedLanguage, changeLanguage]);
|
||||
|
||||
return (
|
||||
<div className="mt-[59px]">
|
||||
<div className="mb-5">
|
||||
@@ -171,7 +170,6 @@ const General: React.FC = () => {
|
||||
dispatch(setPrompt({ name: name, id: id, type: type }))
|
||||
}
|
||||
setPrompts={setPrompts}
|
||||
apiHost={apiHost}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-56">
|
||||
@@ -189,6 +187,4 @@ const General: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default General;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
import React from 'react';
|
||||
import { PromptProps, ActiveState } from '../models/misc';
|
||||
import Dropdown from '../components/Dropdown';
|
||||
import PromptsModal from '../preferences/PromptsModal';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
|
||||
const Prompts: React.FC<PromptProps> = ({
|
||||
|
||||
import userService from '../api/services/userService';
|
||||
import Dropdown from '../components/Dropdown';
|
||||
import { ActiveState, PromptProps } from '../models/misc';
|
||||
import PromptsModal from '../preferences/PromptsModal';
|
||||
|
||||
export default function Prompts({
|
||||
prompts,
|
||||
selectedPrompt,
|
||||
onSelectPrompt,
|
||||
setPrompts,
|
||||
}) => {
|
||||
}: PromptProps) {
|
||||
const handleSelectPrompt = ({
|
||||
name,
|
||||
id,
|
||||
@@ -37,17 +39,12 @@ const Prompts: React.FC<PromptProps> = ({
|
||||
t,
|
||||
i18n: { changeLanguage, language },
|
||||
} = useTranslation();
|
||||
|
||||
const handleAddPrompt = async () => {
|
||||
try {
|
||||
const response = await fetch(`${apiHost}/api/create_prompt`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: newPromptName,
|
||||
content: newPromptContent,
|
||||
}),
|
||||
const response = await userService.createPrompt({
|
||||
name: newPromptName,
|
||||
content: newPromptContent,
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to add prompt');
|
||||
@@ -69,18 +66,12 @@ const Prompts: React.FC<PromptProps> = ({
|
||||
|
||||
const handleDeletePrompt = (id: string) => {
|
||||
setPrompts(prompts.filter((prompt) => prompt.id !== id));
|
||||
fetch(`${apiHost}/api/delete_prompt`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ id: id }),
|
||||
})
|
||||
userService
|
||||
.deletePrompt({ id })
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to delete prompt');
|
||||
}
|
||||
// get 1st prompt and set it as selected
|
||||
if (prompts.length > 0) {
|
||||
onSelectPrompt(prompts[0].name, prompts[0].id, prompts[0].type);
|
||||
}
|
||||
@@ -90,18 +81,9 @@ const Prompts: React.FC<PromptProps> = ({
|
||||
});
|
||||
};
|
||||
|
||||
const fetchPromptContent = async (id: string) => {
|
||||
console.log('fetching prompt content');
|
||||
const handleFetchPromptContent = async (id: string) => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${apiHost}/api/get_single_prompt?id=${id}`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
},
|
||||
);
|
||||
const response = await userService.getSinglePrompt(id);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch prompt content');
|
||||
}
|
||||
@@ -113,17 +95,12 @@ const Prompts: React.FC<PromptProps> = ({
|
||||
};
|
||||
|
||||
const handleSaveChanges = (id: string, type: string) => {
|
||||
fetch(`${apiHost}/api/update_prompt`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
userService
|
||||
.updatePrompt({
|
||||
id: id,
|
||||
name: editPromptName,
|
||||
content: editPromptContent,
|
||||
}),
|
||||
})
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update prompt');
|
||||
@@ -154,7 +131,6 @@ const Prompts: React.FC<PromptProps> = ({
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
@@ -183,7 +159,7 @@ const Prompts: React.FC<PromptProps> = ({
|
||||
}) => {
|
||||
setModalType('EDIT');
|
||||
setEditPromptName(name);
|
||||
fetchPromptContent(id);
|
||||
handleFetchPromptContent(id);
|
||||
setCurrentPromptEdit({ id: id, name: name, type: type });
|
||||
setModalState('ACTIVE');
|
||||
}}
|
||||
@@ -219,6 +195,4 @@ const Prompts: React.FC<PromptProps> = ({
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Prompts;
|
||||
}
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import General from './General';
|
||||
import Documents from './Documents';
|
||||
import APIKeys from './APIKeys';
|
||||
import Widgets from './Widgets';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import userService from '../api/services/userService';
|
||||
import ArrowLeft from '../assets/arrow-left.svg';
|
||||
import ArrowRight from '../assets/arrow-right.svg';
|
||||
import i18n from '../locale/i18n';
|
||||
import { Doc } from '../preferences/preferenceApi';
|
||||
import {
|
||||
selectSourceDocs,
|
||||
setSourceDocs,
|
||||
} from '../preferences/preferenceSlice';
|
||||
import { Doc } from '../preferences/preferenceApi';
|
||||
import ArrowLeft from '../assets/arrow-left.svg';
|
||||
import ArrowRight from '../assets/arrow-right.svg';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import i18n from '../locale/i18n';
|
||||
import APIKeys from './APIKeys';
|
||||
import Documents from './Documents';
|
||||
import General from './General';
|
||||
import Widgets from './Widgets';
|
||||
|
||||
const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
|
||||
|
||||
const Settings: React.FC = () => {
|
||||
export default function Settings() {
|
||||
const dispatch = useDispatch();
|
||||
const { t } = useTranslation();
|
||||
const tabs = [
|
||||
@@ -33,11 +33,11 @@ const Settings: React.FC = () => {
|
||||
const updateWidgetScreenshot = (screenshot: File | null) => {
|
||||
setWidgetScreenshot(screenshot);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (index: number, doc: Doc) => {
|
||||
const docPath = 'indexes/' + 'local' + '/' + doc.name;
|
||||
fetch(`${apiHost}/api/delete_old?path=${docPath}`, {
|
||||
method: 'GET',
|
||||
})
|
||||
userService
|
||||
.deletePath(docPath)
|
||||
.then((response) => {
|
||||
if (response.ok && documents) {
|
||||
const updatedDocuments = [
|
||||
@@ -50,7 +50,6 @@ const Settings: React.FC = () => {
|
||||
.catch((error) => console.error(error));
|
||||
};
|
||||
|
||||
// persist active tab as the translated version of 'general' per language change
|
||||
React.useEffect(() => {
|
||||
setActiveTab(t('settings.general.label'));
|
||||
}, [i18n.language]);
|
||||
@@ -134,6 +133,4 @@ const Settings: React.FC = () => {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user