LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2026-05-04 23:52:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated the loader in settings

Browse Source
This commit is contained in:
Prathamesh Gursal
2024-10-06 11:40:58 +05:30
parent b80726e942
commit a8d371045b
3 changed files with 124 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import React from 'react'; import React, { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import userService from '../api/services/userService'; import userService from '../api/services/userService';
@@ -6,6 +6,7 @@ import Trash from '../assets/trash.svg';
import CreateAPIKeyModal from '../modals/CreateAPIKeyModal'; import CreateAPIKeyModal from '../modals/CreateAPIKeyModal';
import SaveAPIKeyModal from '../modals/SaveAPIKeyModal'; import SaveAPIKeyModal from '../modals/SaveAPIKeyModal';
import { APIKeyData } from './types'; import { APIKeyData } from './types';
import SkeletonLoader from '../utils/loader';
export default function APIKeys() { export default function APIKeys() {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -13,8 +14,10 @@ export default function APIKeys() {
const [isSaveKeyModalOpen, setSaveKeyModal] = React.useState(false); const [isSaveKeyModalOpen, setSaveKeyModal] = React.useState(false);
const [newKey, setNewKey] = React.useState(''); const [newKey, setNewKey] = React.useState('');
const [apiKeys, setApiKeys] = React.useState<APIKeyData[]>([]); const [apiKeys, setApiKeys] = React.useState<APIKeyData[]>([]);
const [loading, setLoading] = useState(true);
const handleFetchKeys = async () => { const handleFetchKeys = async () => {
setLoading(true);
try { try {
const response = await userService.getAPIKeys(); const response = await userService.getAPIKeys();
if (!response.ok) { if (!response.ok) {
@@ -24,6 +27,8 @@ export default function APIKeys() {
setApiKeys(apiKeys); setApiKeys(apiKeys);
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} finally {
setLoading(false);
} }
}; };
@@ -75,6 +80,7 @@ export default function APIKeys() {
React.useEffect(() => { React.useEffect(() => {
handleFetchKeys(); handleFetchKeys();
}, []); }, []);
return ( return (
<div className="mt-8"> <div className="mt-8">
<div className="flex flex-col max-w-[876px]"> <div className="flex flex-col max-w-[876px]">
@@ -100,41 +106,45 @@ export default function APIKeys() {
)} )}
<div className="mt-[27px] w-full"> <div className="mt-[27px] w-full">
<div className="w-full overflow-x-auto"> <div className="w-full overflow-x-auto">
<table className="table-default"> {loading ? (
<thead> <SkeletonLoader count={3} />
<tr> ) : (
<th>{t('settings.apiKeys.name')}</th> <table className="table-default">
<th>{t('settings.apiKeys.sourceDoc')}</th> <thead>
<th>{t('settings.apiKeys.key')}</th>
<th></th>
</tr>
</thead>
<tbody>
{!apiKeys?.length && (
<tr> <tr>
<td colSpan={4} className="!p-4"> <th>{t('settings.apiKeys.name')}</th>
{t('settings.apiKeys.noData')} <th>{t('settings.apiKeys.sourceDoc')}</th>
</td> <th>{t('settings.apiKeys.key')}</th>
<th></th>
</tr> </tr>
)} </thead>
{apiKeys?.map((element, index) => ( <tbody>
<tr key={index}> {!apiKeys?.length && (
<td>{element.name}</td> <tr>
<td>{element.source}</td> <td colSpan={4} className="!p-4">
<td>{element.key}</td> {t('settings.apiKeys.noData')}
<td> </td>
<img </tr>
src={Trash} )}
alt="Delete" {apiKeys?.map((element, index) => (
className="h-4 w-4 cursor-pointer hover:opacity-50" <tr key={index}>
id={`img-${index}`} <td>{element.name}</td>
onClick={() => handleDeleteKey(element.id)} <td>{element.source}</td>
/> <td>{element.key}</td>
</td> <td>
</tr> <img
))} src={Trash}
</tbody> alt="Delete"
</table> className="h-4 w-4 cursor-pointer hover:opacity-50"
id={`img-${index}`}
onClick={() => handleDeleteKey(element.id)}
/>
</td>
</tr>
))}
</tbody>
</table>
)}
</div> </div>
</div> </div>
</div> </div>

14
frontend/src/settings/Analytics.tsx
View File

@@ -63,9 +63,9 @@ export default function Analytics() {
value: string; value: string;
}>({ label: '30 Days', value: 'last_30_days' }); }>({ label: '30 Days', value: 'last_30_days' });
const [loadingMessages, setLoadingMessages] = useState(true); // Loading state for messages const [loadingMessages, setLoadingMessages] = useState(true);
const [loadingTokens, setLoadingTokens] = useState(true); // Loading state for tokens const [loadingTokens, setLoadingTokens] = useState(true);
const [loadingFeedback, setLoadingFeedback] = useState(true); // Loading state for feedback const [loadingFeedback, setLoadingFeedback] = useState(true);
const fetchChatbots = async () => { const fetchChatbots = async () => {
try { try {
@@ -81,7 +81,7 @@ export default function Analytics() {
}; };
const fetchMessagesData = async (chatbot_id?: string, filter?: string) => { const fetchMessagesData = async (chatbot_id?: string, filter?: string) => {
setLoadingMessages(true); // Start loading setLoadingMessages(true);
try { try {
const response = await userService.getMessageAnalytics({ const response = await userService.getMessageAnalytics({
api_key_id: chatbot_id, api_key_id: chatbot_id,
@@ -95,7 +95,7 @@ export default function Analytics() {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally { } finally {
setLoadingMessages(false); // Stop loading setLoadingMessages(false);
} }
}; };
@@ -114,12 +114,12 @@ export default function Analytics() {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally { } finally {
setLoadingTokens(false); // Stop loading setLoadingTokens(false);
} }
}; };
const fetchFeedbackData = async (chatbot_id?: string, filter?: string) => { const fetchFeedbackData = async (chatbot_id?: string, filter?: string) => {
setLoadingFeedback(true); // Start loading setLoadingFeedback(true);
try { try {
const response = await userService.getFeedbackAnalytics({ const response = await userService.getFeedbackAnalytics({
api_key_id: chatbot_id, api_key_id: chatbot_id,

132
frontend/src/settings/Documents.tsx
View File

@@ -1,3 +1,4 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
@@ -6,6 +7,7 @@ import userService from '../api/services/userService';
import SyncIcon from '../assets/sync.svg'; import SyncIcon from '../assets/sync.svg';
import Trash from '../assets/trash.svg'; import Trash from '../assets/trash.svg';
import DropdownMenu from '../components/DropdownMenu'; import DropdownMenu from '../components/DropdownMenu';
import SkeletonLoader from '../utils/loader';
import { Doc, DocumentsProps } from '../models/misc'; import { Doc, DocumentsProps } from '../models/misc';
import { getDocs } from '../preferences/preferenceApi'; import { getDocs } from '../preferences/preferenceApi';
import { setSourceDocs } from '../preferences/preferenceSlice'; import { setSourceDocs } from '../preferences/preferenceSlice';
@@ -33,6 +35,7 @@ const Documents: React.FC<DocumentsProps> = ({
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useDispatch(); const dispatch = useDispatch();
const [loading, setLoading] = useState(false);
const syncOptions = [ const syncOptions = [
{ label: 'Never', value: 'never' }, { label: 'Never', value: 'never' },
{ label: 'Daily', value: 'daily' }, { label: 'Daily', value: 'daily' },
@@ -41,6 +44,7 @@ const Documents: React.FC<DocumentsProps> = ({
]; ];
const handleManageSync = (doc: Doc, sync_frequency: string) => { const handleManageSync = (doc: Doc, sync_frequency: string) => {
setLoading(true);
userService userService
.manageSync({ source_id: doc.id, sync_frequency }) .manageSync({ source_id: doc.id, sync_frequency })
.then(() => { .then(() => {
@@ -49,81 +53,91 @@ const Documents: React.FC<DocumentsProps> = ({
.then((data) => { .then((data) => {
dispatch(setSourceDocs(data)); dispatch(setSourceDocs(data));
}) })
.catch((error) => console.error(error)); .catch((error) => console.error(error))
.finally(() => {
setLoading(false);
});
}; };
return ( return (
<div className="mt-8"> <div className="mt-8">
<div className="flex flex-col relative"> <div className="flex flex-col relative">
<div className="z-10 w-full overflow-x-auto"> <div className="z-10 w-full overflow-x-auto">
<table className="table-default"> {loading ? (
<thead> <SkeletonLoader count={3} />
<tr> ) : (
<th>{t('settings.documents.name')}</th> <table className="table-default">
<th>{t('settings.documents.date')}</th> <thead>
<th>{t('settings.documents.tokenUsage')}</th>
<th>{t('settings.documents.type')}</th>
<th></th>
</tr>
</thead>
<tbody>
{!documents?.length && (
<tr> <tr>
<td colSpan={5} className="!p-4"> <th>{t('settings.documents.name')}</th>
{t('settings.documents.noData')} <th>{t('settings.documents.date')}</th>
</td> <th>{t('settings.documents.tokenUsage')}</th>
<th>{t('settings.documents.type')}</th>
<th></th>
</tr> </tr>
)} </thead>
{documents && <tbody>
documents.map((document, index) => ( {!documents?.length && (
<tr key={index}> <tr>
<td>{document.name}</td> <td colSpan={5} className="!p-4">
<td>{document.date}</td> {t('settings.documents.noData')}
<td>
{document.tokens ? formatTokens(+document.tokens) : ''}
</td>
<td>
{document.type === 'remote' ? 'Pre-loaded' : 'Private'}
</td>
<td>
<div className="flex flex-row items-center">
{document.type !== 'remote' && (
<img
src={Trash}
alt="Delete"
className="h-4 w-4 cursor-pointer hover:opacity-50"
id={`img-${index}`}
onClick={(event) => {
event.stopPropagation();
handleDeleteDocument(index, document);
}}
/>
)}
{document.syncFrequency && (
<div className="ml-2">
<DropdownMenu
name="Sync"
options={syncOptions}
onSelect={(value: string) => {
handleManageSync(document, value);
}}
defaultValue={document.syncFrequency}
icon={SyncIcon}
/>
</div>
)}
</div>
</td> </td>
</tr> </tr>
))} )}
</tbody> {documents &&
</table> documents.map((document, index) => (
<tr key={index}>
<td>{document.name}</td>
<td>{document.date}</td>
<td>
{document.tokens ? formatTokens(+document.tokens) : ''}
</td>
<td>
{document.type === 'remote' ? 'Pre-loaded' : 'Private'}
</td>
<td>
<div className="flex flex-row items-center">
{document.type !== 'remote' && (
<img
src={Trash}
alt="Delete"
className="h-4 w-4 cursor-pointer hover:opacity-50"
id={`img-${index}`}
onClick={(event) => {
event.stopPropagation();
handleDeleteDocument(index, document);
}}
/>
)}
{document.syncFrequency && (
<div className="ml-2">
<DropdownMenu
name="Sync"
options={syncOptions}
onSelect={(value: string) => {
handleManageSync(document, value);
}}
defaultValue={document.syncFrequency}
icon={SyncIcon}
/>
</div>
)}
</div>
</td>
</tr>
))}
</tbody>
</table>
)}
</div> </div>
</div> </div>
</div> </div>
); );
}; };
Documents.propTypes = { Documents.propTypes = {
documents: PropTypes.array.isRequired, documents: PropTypes.array.isRequired,
handleDeleteDocument: PropTypes.func.isRequired, handleDeleteDocument: PropTypes.func.isRequired,
}; };
export default Documents; export default Documents;