From 5689ed6ff1ee7a2da9bc3689df30b52bd990a043 Mon Sep 17 00:00:00 2001
From: Ali Asaria <ali.asaria@gmail.com>
Date: Tue, 14 May 2024 09:27:51 -0400
Subject: [PATCH] scroll api logs to bottom
---
src/renderer/components/Logs.tsx | 46 +++++++++++++++++++++++++++++---
1 file changed, 42 insertions(+), 4 deletions(-)
diff --git a/src/renderer/components/Logs.tsx b/src/renderer/components/Logs.tsx
index 748e15be..1fc0a5a4 100644
--- a/src/renderer/components/Logs.tsx
+++ b/src/renderer/components/Logs.tsx
@@ -8,6 +8,7 @@ import {
AccordionSummary,
Box,
Sheet,
+ Typography,
} from '@mui/joy';
import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
@@ -21,6 +22,24 @@ function objectMinusPrompt(obj) {
return rest;
}
+function isToday(someDateString) {
+ const someDate = new Date(someDateString);
+ const today = new Date();
+
+ const t =
+ someDate.getDate() === today.getDate() &&
+ someDate.getMonth() === today.getMonth() &&
+ someDate.getFullYear() === today.getFullYear();
+
+ console.log(t);
+ console.log(someDate + ' - ' + today);
+ return (
+ someDate.getDate() === today.getDate() &&
+ someDate.getMonth() === today.getMonth() &&
+ someDate.getFullYear() === today.getFullYear()
+ );
+}
+
function renderJSONLinesLog(logs) {
return logs?.split('\n').map((line, i) => {
try {
@@ -30,7 +49,11 @@ function renderJSONLinesLog(logs) {
{/* {i}:{' '} */}
<Accordion key={i} color="primary" variant="soft">
<AccordionSummary>
- {line_object.date} - {line_object?.log?.model}
+ <Typography
+ color={isToday(line_object.date) ? 'black' : 'neutral'}
+ >
+ {line_object.date} - {line_object?.log?.model}
+ </Typography>
</AccordionSummary>
<AccordionDetails>
<pre style={{ whiteSpace: 'pre-wrap' }}>
@@ -46,8 +69,8 @@ function renderJSONLinesLog(logs) {
} catch (e) {
return (
<>
- {/* {i}: {e.message} - {line} */}
- <br />
+ {/* {i}: {e.message} - {line}
+ <br /> */}
</>
);
}
@@ -56,10 +79,25 @@ function renderJSONLinesLog(logs) {
export default function Logs({}) {
const { data } = useSWR(chatAPI.Endpoints.Global.PromptLog, fetcher);
+
+ React.useEffect(() => {
+ // Scroll to bottom
+ const ae = document.getElementById('logs_accordion');
+ ae.scrollTop = ae.scrollHeight;
+ });
+
return (
- <Sheet style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ <Sheet
+ style={{
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100%',
+ paddingBottom: '1rem',
+ }}
+ >
<h1>Prompt Log</h1>
<Box
+ id="logs_accordion"
style={{
overflow: 'auto',
height: '100%',
--
GitLab