LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 16:43:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

(feat:loaders) loader for logs, dropdown

Browse Source
This commit is contained in:
ManishMadan2882
2025-02-14 02:20:29 +05:30
parent adb2947b52
commit 200a3b81e5
3 changed files with 171 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/settings/Logs.tsx
View File

@@ -67,16 +67,16 @@ export default function Logs() {
return (
<div className="mt-12">
<div className="flex flex-col items-start">
<div className="flex flex-col gap-3">
<label
id="chatbot-filter-label"
className="font-bold text-jet dark:text-bright-gray"
>
{t('settings.logs.filterByChatbot')}
</label>
{loadingChatbots ? (
<SkeletonLoader />
) : (
{loadingChatbots ? (
<SkeletonLoader component="dropdown" />
) : (
<div className="flex flex-col gap-3">
<label
id="chatbot-filter-label"
className="font-bold text-jet dark:text-bright-gray"
>
{t('settings.logs.filterByChatbot')}
</label>
<Dropdown
size="w-[55vw] sm:w-[360px]"
options={[
@@ -105,16 +105,12 @@ export default function Logs() {
rounded="3xl"
border="border"
/>
)}
</div>
</div>
)}
</div>
<div className="mt-8">
{loadingLogs ? (
<SkeletonLoader component={'logs'} />
) : (
<LogsTable logs={logs} setPage={setPage} />
)}
<LogsTable logs={logs} setPage={setPage} loading={loadingLogs} />
</div>
</div>
);
@@ -123,9 +119,10 @@ export default function Logs() {
type LogsTableProps = {
logs: LogData[];
setPage: React.Dispatch<React.SetStateAction<number>>;
loading: boolean;
};
function LogsTable({ logs, setPage }: LogsTableProps) {
function LogsTable({ logs, setPage, loading }: LogsTableProps) {
const { t } = useTranslation();
const observerRef = useRef<any>();
const firstObserver = useCallback((node: HTMLDivElement) => {
@@ -148,15 +145,19 @@ function LogsTable({ logs, setPage }: LogsTableProps) {
ref={observerRef}
className="flex flex-col items-start h-[51vh] overflow-y-auto bg-transparent flex-grow gap-px"
>
{logs.map((log, index) => {
if (index === logs.length - 1) {
return (
<div ref={firstObserver} key={index}>
<Log log={log} />
</div>
);
} else return <Log key={index} log={log} />;
})}
{loading ? (
<SkeletonLoader component="logsTable" />
) : (
logs.map((log, index) => {
if (index === logs.length - 1) {
return (
<div ref={firstObserver} key={index}>
<Log log={log} />
</div>
);
} else return <Log key={index} log={log} />;
})
)}
</div>
</div>
);