alex/LocalAGI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): Add summary details of each observable

Browse Source 
Signed-off-by: Richard Palethorpe <io@richiejp.com>
This commit is contained in:
Richard Palethorpe
2025-04-23 14:11:52 +01:00
parent 5faa599321
commit 77680c6fee
4 changed files with 316 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
webui/react-ui/src/components/CollapsibleRawSections.jsx Normal file
View File

@@ -0,0 +1,103 @@
import React, { useState } from 'react';
import hljs from 'highlight.js/lib/core';
import json from 'highlight.js/lib/languages/json';
import 'highlight.js/styles/monokai.css';
hljs.registerLanguage('json', json);
export default function CollapsibleRawSections({ container }) {
const [showCreation, setShowCreation] = useState(false);
const [showProgress, setShowProgress] = useState(false);
const [showCompletion, setShowCompletion] = useState(false);
const [copied, setCopied] = useState({ creation: false, progress: false, completion: false });
const handleCopy = (section, data) => {
navigator.clipboard.writeText(JSON.stringify(data, null, 2));
setCopied(prev => ({ ...prev, [section]: true }));
setTimeout(() => setCopied(prev => ({ ...prev, [section]: false })), 1200);
};
return (
<div>
{/* Creation Section */}
{container.creation && (
<div>
<h4 style={{ display: 'flex', alignItems: 'center' }}>
<span
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', flex: 1 }}
onClick={() => setShowCreation(v => !v)}
>
<i className={`fas fa-chevron-${showCreation ? 'down' : 'right'}`} style={{ marginRight: 6 }} />
Creation
</span>
<button
title="Copy Creation JSON"
onClick={e => { e.stopPropagation(); handleCopy('creation', container.creation); }}
style={{ marginLeft: 8, border: 'none', background: 'none', cursor: 'pointer', color: '#ccc' }}
>
{copied.creation ? <span style={{ color: '#6f6' }}>Copied!</span> : <i className="fas fa-copy" />}
</button>
</h4>
{showCreation && (
<pre className="hljs"><code>
<div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(container.creation || {}, null, 2), { language: 'json' }).value }} />
</code></pre>
)}
</div>
)}
{/* Progress Section */}
{container.progress && container.progress.length > 0 && (
<div>
<h4 style={{ display: 'flex', alignItems: 'center' }}>
<span
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', flex: 1 }}
onClick={() => setShowProgress(v => !v)}
>
<i className={`fas fa-chevron-${showProgress ? 'down' : 'right'}`} style={{ marginRight: 6 }} />
Progress
</span>
<button
title="Copy Progress JSON"
onClick={e => { e.stopPropagation(); handleCopy('progress', container.progress); }}
style={{ marginLeft: 8, border: 'none', background: 'none', cursor: 'pointer', color: '#ccc' }}
>
{copied.progress ? <span style={{ color: '#6f6' }}>Copied!</span> : <i className="fas fa-copy" />}
</button>
</h4>
{showProgress && (
<pre className="hljs"><code>
<div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(container.progress || {}, null, 2), { language: 'json' }).value }} />
</code></pre>
)}
</div>
)}
{/* Completion Section */}
{container.completion && (
<div>
<h4 style={{ display: 'flex', alignItems: 'center' }}>
<span
style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', flex: 1 }}
onClick={() => setShowCompletion(v => !v)}
>
<i className={`fas fa-chevron-${showCompletion ? 'down' : 'right'}`} style={{ marginRight: 6 }} />
Completion
</span>
<button
title="Copy Completion JSON"
onClick={e => { e.stopPropagation(); handleCopy('completion', container.completion); }}
style={{ marginLeft: 8, border: 'none', background: 'none', cursor: 'pointer', color: '#ccc' }}
>
{copied.completion ? <span style={{ color: '#6f6' }}>Copied!</span> : <i className="fas fa-copy" />}
</button>
</h4>
{showCompletion && (
<pre className="hljs"><code>
<div dangerouslySetInnerHTML={{ __html: hljs.highlight(JSON.stringify(container.completion || {}, null, 2), { language: 'json' }).value }} />
</code></pre>
)}
</div>
)}
</div>
);
}