- Fix all js errors.

This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2025-11-20 14:40:15 -03:00
parent a823f319c3
commit 42f5ce609c
3 changed files with 49 additions and 33 deletions

View file

@ -1,12 +1,16 @@
<div class="chat-layout" x-data="chatApp()" x-cloak>
<div class="chat-layout" id="chat-app">
<div id="connectionStatus" class="connection-status disconnected"></div>
<main id="messages"></main>
<footer>
<div class="suggestions-container" id="suggestions"></div>
<div class="input-container">
<input id="messageInput" type="text" placeholder="Message..." autofocus />
<input
id="messageInput"
type="text"
placeholder="Message..."
autofocus
/>
<button id="voiceBtn" title="Voice">🎤</button>
<button id="sendBtn" title="Send"></button>
</div>
@ -16,8 +20,11 @@
<div>Context</div>
<div id="contextPercentage">0%</div>
<div class="context-progress">
<div class="context-progress-bar" id="contextProgressBar" style="width:0%"></div>
<div
class="context-progress-bar"
id="contextProgressBar"
style="width: 0%"
></div>
</div>
</div>
</div>
</div>

View file

@ -11,41 +11,42 @@
</head>
<body>
<nav x-data="{ current: 'chat' }">
<nav id="main-nav">
<div class="logo">⚡ General Bots</div>
<a
href="#chat"
@click.prevent="current = 'chat'; window.switchSection('chat')"
:class="{ active: current === 'chat' }"
<a href="#chat" class="nav-link active" data-section="chat"
>💬 Chat</a
>
<a
href="#drive"
@click.prevent="current = 'drive'; window.switchSection('drive')"
:class="{ active: current === 'drive' }"
>📁 Drive</a
>
<a
href="#tasks"
@click.prevent="current = 'tasks'; window.switchSection('tasks')"
:class="{ active: current === 'tasks' }"
>✓ Tasks</a
>
<a
href="#mail"
@click.prevent="current = 'mail'; window.switchSection('mail')"
:class="{ active: current === 'mail' }"
>✉ Mail</a
>
<a href="#drive" class="nav-link" data-section="drive">📁 Drive</a>
<a href="#tasks" class="nav-link" data-section="tasks">✓ Tasks</a>
<a href="#mail" class="nav-link" data-section="mail">✉ Mail</a>
</nav>
<div id="main-content">
<!-- Sections will be loaded dynamically -->
</div>
<!-- Load Layout Script first, then Alpine - module scripts are loaded dynamically -->
<!-- Load scripts -->
<script src="js/layout.js"></script>
<script src="js/alpine.js"></script>
<script>
// Simple navigation state management without Alpine
document.addEventListener("DOMContentLoaded", () => {
const nav = document.getElementById("main-nav");
const links = nav.querySelectorAll(".nav-link");
links.forEach((link) => {
link.addEventListener("click", (e) => {
e.preventDefault();
const section = link.dataset.section;
// Update active state
links.forEach((l) => l.classList.remove("active"));
link.classList.add("active");
// Switch section
window.switchSection(section);
});
});
});
</script>
</body>
</html>

View file

@ -132,7 +132,15 @@ async function switchSection(section) {
}
window.history.pushState({}, "", `#${section}`);
Alpine.initTree(mainContent);
// Start Alpine on first load, then just init the tree for new sections
if (typeof window.startAlpine === "function") {
window.startAlpine();
delete window.startAlpine;
} else if (window.Alpine) {
window.Alpine.initTree(mainContent);
}
const inputEl = document.getElementById("messageInput");
if (inputEl) {
inputEl.focus();