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

fix(ui): Set page title

Browse Source
This commit is contained in:
Richard Palethorpe
2025-04-02 08:23:12 +01:00
parent 9f77bb99f1
commit 6d9f1a95cc
10 changed files with 88 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
webui/react-ui/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title> <title>LocalAGI</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

11
webui/react-ui/src/pages/ActionsPlayground.jsx
View File

@@ -1,9 +1,10 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useOutletContext } from 'react-router-dom'; import { useOutletContext, useNavigate } from 'react-router-dom';
import { actionApi } from '../utils/api'; import { actionApi } from '../utils/api';
function ActionsPlayground() { function ActionsPlayground() {
const { showToast } = useOutletContext(); const { showToast } = useOutletContext();
const navigate = useNavigate();
const [actions, setActions] = useState([]); const [actions, setActions] = useState([]);
const [selectedAction, setSelectedAction] = useState(''); const [selectedAction, setSelectedAction] = useState('');
const [configJson, setConfigJson] = useState('{}'); const [configJson, setConfigJson] = useState('{}');
@@ -12,6 +13,14 @@ function ActionsPlayground() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [loadingActions, setLoadingActions] = useState(true); const [loadingActions, setLoadingActions] = useState(true);
// Update document title
useEffect(() => {
document.title = 'Actions Playground - LocalAgent';
return () => {
document.title = 'LocalAgent'; // Reset title when component unmounts
};
}, []);
// Fetch available actions // Fetch available actions
useEffect(() => { useEffect(() => {
const fetchActions = async () => { const fetchActions = async () => {

12
webui/react-ui/src/pages/AgentSettings.jsx
View File

@@ -10,7 +10,17 @@ function AgentSettings() {
const navigate = useNavigate(); const navigate = useNavigate();
const [metadata, setMetadata] = useState(null); const [metadata, setMetadata] = useState(null);
const [formData, setFormData] = useState({}); const [formData, setFormData] = useState({});
// Update document title
useEffect(() => {
if (name) {
document.title = `Agent Settings: ${name} - LocalAgent`;
}
return () => {
document.title = 'LocalAgent'; // Reset title when component unmounts
};
}, [name]);
// Use our custom agent hook // Use our custom agent hook
const { const {
agent, agent,

13
webui/react-ui/src/pages/AgentStatus.jsx
View File

@@ -1,14 +1,25 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom'; import { useParams, Link, useNavigate } from 'react-router-dom';
function AgentStatus() { function AgentStatus() {
const { name } = useParams(); const { name } = useParams();
const navigate = useNavigate();
const [statusData, setStatusData] = useState(null); const [statusData, setStatusData] = useState(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [eventSource, setEventSource] = useState(null); const [eventSource, setEventSource] = useState(null);
const [liveUpdates, setLiveUpdates] = useState([]); const [liveUpdates, setLiveUpdates] = useState([]);
// Update document title
useEffect(() => {
if (name) {
document.title = `Agent Status: ${name} - LocalAgent`;
}
return () => {
document.title = 'LocalAgent'; // Reset title when component unmounts
};
}, [name]);
// Fetch initial status data // Fetch initial status data
useEffect(() => { useEffect(() => {
const fetchStatusData = async () => { const fetchStatusData = async () => {

7
webui/react-ui/src/pages/AgentsList.jsx
View File

@@ -95,6 +95,13 @@ function AgentsList() {
} }
}; };
useEffect(() => {
document.title = 'Agents - LocalAgent';
return () => {
document.title = 'LocalAgent'; // Reset title when component unmounts
};
}, []);
// Load agents on mount // Load agents on mount
useEffect(() => { useEffect(() => {
fetchAgents(); fetchAgents();

13
webui/react-ui/src/pages/Chat.jsx
View File

@@ -1,10 +1,11 @@
import { useState, useRef, useEffect } from 'react'; import { useState, useRef, useEffect } from 'react';
import { useParams, useOutletContext } from 'react-router-dom'; import { useParams, useOutletContext, useNavigate } from 'react-router-dom';
import { useChat } from '../hooks/useChat'; import { useChat } from '../hooks/useChat';
function Chat() { function Chat() {
const { name } = useParams(); const { name } = useParams();
const { showToast } = useOutletContext(); const { showToast } = useOutletContext();
const navigate = useNavigate();
const [message, setMessage] = useState(''); const [message, setMessage] = useState('');
const messagesEndRef = useRef(null); const messagesEndRef = useRef(null);
@@ -19,6 +20,16 @@ function Chat() {
clearError clearError
} = useChat(name); } = useChat(name);
// Update document title
useEffect(() => {
if (name) {
document.title = `Chat with ${name} - LocalAgent`;
}
return () => {
document.title = 'LocalAgent'; // Reset title when component unmounts
};
}, [name]);
// Scroll to bottom when messages change // Scroll to bottom when messages change
useEffect(() => { useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });

37
webui/react-ui/src/pages/CreateAgent.jsx
View File

@@ -8,35 +8,14 @@ function CreateAgent() {
const { showToast } = useOutletContext(); const { showToast } = useOutletContext();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [metadata, setMetadata] = useState(null); const [metadata, setMetadata] = useState(null);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({});
name: '',
description: '', useEffect(() => {
identity_guidance: '', document.title = 'Create Agent - LocalAgent';
random_identity: false, return () => {
hud: false, document.title = 'LocalAgent'; // Reset title when component unmounts
model: '', };
multimodal_model: '', }, []);
api_url: '',
api_key: '',
local_rag_url: '',
local_rag_api_key: '',
enable_reasoning: false,
enable_kb: false,
kb_results: 3,
long_term_memory: false,
summary_long_term_memory: false,
connectors: [],
actions: [],
mcp_servers: [],
system_prompt: '',
user_prompt: '',
goals: '',
standalone_job: false,
standalone_job_interval: 60,
avatar: '',
avatar_seed: '',
avatar_style: 'default',
});
// Fetch metadata on component mount // Fetch metadata on component mount
useEffect(() => { useEffect(() => {

8
webui/react-ui/src/pages/GroupCreate.jsx
View File

@@ -21,6 +21,14 @@ function GroupCreate() {
profiles: [] profiles: []
}); });
// Update document title
useEffect(() => {
document.title = 'Create Agent Group - LocalAgent';
return () => {
document.title = 'LocalAgent'; // Reset title when component unmounts
};
}, []);
// Fetch metadata on component mount // Fetch metadata on component mount
useEffect(() => { useEffect(() => {
const fetchMetadata = async () => { const fetchMetadata = async () => {

11
webui/react-ui/src/pages/Home.jsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { agentApi } from '../utils/api'; import { agentApi } from '../utils/api';
function Home() { function Home() {
@@ -12,6 +12,15 @@ function Home() {
}); });
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const location = useLocation();
// Update document title
useEffect(() => {
document.title = 'Agent Dashboard - LocalAgent';
return () => {
document.title = 'LocalAgent'; // Reset title when component unmounts
};
}, []);
// Fetch dashboard data // Fetch dashboard data
useEffect(() => { useEffect(() => {

10
webui/react-ui/src/pages/ImportAgent.jsx
View File

@@ -1,4 +1,4 @@
import { useState } from 'react'; import { useState, useEffect } from 'react';
import { useNavigate, useOutletContext } from 'react-router-dom'; import { useNavigate, useOutletContext } from 'react-router-dom';
import { agentApi } from '../utils/api'; import { agentApi } from '../utils/api';
@@ -8,6 +8,14 @@ function ImportAgent() {
const [file, setFile] = useState(null); const [file, setFile] = useState(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
// Update document title
useEffect(() => {
document.title = 'Import Agent - LocalAgent';
return () => {
document.title = 'LocalAgent'; // Reset title when component unmounts
};
}, []);
const handleFileChange = (e) => { const handleFileChange = (e) => {
const selectedFile = e.target.files[0]; const selectedFile = e.target.files[0];
if (selectedFile) { if (selectedFile) {