Merge pull request #123 from graphbookai/dev

Updating lock file; Fixing log views
graphbookai · Dec 11, 2024 · 09c76af · 09c76af
2 parents 0fb8903 + 3b60fb9
commit 09c76af
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 19 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/src/components/Monitor.tsx b/web/src/components/Monitor.tsx
@@ -294,31 +294,49 @@ function StatsView({ data }) {
 
 function LogsView({ data, shouldScrollToBottom }) {
     const bottomRef = useRef<HTMLDivElement>(null);
+    const { token } = theme.useToken();
+
 
     useEffect(() => {
         if (shouldScrollToBottom) {
-            bottomRef.current?.scrollIntoView({ behavior: 'instant' });
+            bottomRef.current?.scrollIntoView({ block: "nearest", inline: "nearest", behavior: 'instant' });
         }
     }, [data, shouldScrollToBottom]);
 
+    const bg = useCallback((i) => {
+        return i % 2 === 0 ? token.colorBgBase : token.colorBgLayout;
+    }, [token]);
+
+    const textOf = useCallback((t) => {
+        if (typeof t === 'string') {
+            return t;
+        }
+        return JSON.stringify(t);
+    }, []);
+
     return (
-        data &&
-        (
+        !data || data.length === 0 ?
+            <Empty description="No logs" /> :
             <Flex vertical style={{ maxHeight: '410px', overflow: 'auto' }}>
                 {
                     data.map((log, i) => {
                         const { msg } = log;
+                        const style: React.CSSProperties = {
+                            backgroundColor: bg(i),
+                            margin: '1px 0',
+                            fontSize: '.8em',
+                            lineHeight: 1,
+                            borderLeft: `2px solid ${token.colorBorder}`,
+                            padding: '1px 0 1px 4px'
+                        };
                         return (
-                            <Text style={{ fontFamily: 'monospace' }} key={i}>
-                                {msg}
-                            </Text>
+                            <Text key={i} style={style}>{textOf(msg)}</Text>
                         );
                     })
                 }
                 <div ref={bottomRef} />
             </Flex>
-        )
-    )
+    );
 }
 
 type NotesViewType = 'default' | 'image';

diff --git a/web/src/components/Nodes/Step.tsx b/web/src/components/Nodes/Step.tsx
@@ -67,7 +67,7 @@ export function Step({ id, data, selected }) {
         if (isPromptNode) {
             t.push({
                 label: 'Prompts',
-                children: <PromptView nodeId={id} prompt={prompt} setSubmitted={setSubmitted}/>,
+                children: <PromptView nodeId={id} prompt={prompt} setSubmitted={setSubmitted} />,
                 icon: <Click />
             });
         }
@@ -144,6 +144,13 @@ function LogsView({ data }) {
         return i % 2 === 0 ? token.colorBgBase : token.colorBgLayout;
     }, [token]);
 
+    const textOf = useCallback((t) => {
+        if (typeof t === 'string') {
+            return t;
+        }
+        return JSON.stringify(t);
+    }, []);
+
     return (
         data.length === 0 ?
             <EmptyTab description='No logs' /> :
@@ -160,7 +167,7 @@ function LogsView({ data }) {
                             padding: '1px 0 1px 4px'
                         };
                         return (
-                            <Text key={i} style={style}>{msg}</Text>
+                            <Text key={i} style={style}>{textOf(msg)}</Text>
                         );
                     })
                 }