Simplify chat UI and wire memory context
This commit is contained in:
@@ -23,6 +23,31 @@ function setStatus(id, text, tone = "neutral") {
|
||||
node.dataset.tone = tone;
|
||||
}
|
||||
|
||||
function openActivity(tab = "") {
|
||||
const drawer = document.querySelector("#activity-drawer");
|
||||
const backdrop = document.querySelector("#activity-backdrop");
|
||||
if (!drawer || !backdrop) return;
|
||||
drawer.hidden = false;
|
||||
backdrop.hidden = false;
|
||||
if (tab) selectActivityTab(tab);
|
||||
}
|
||||
|
||||
function closeActivity() {
|
||||
const drawer = document.querySelector("#activity-drawer");
|
||||
const backdrop = document.querySelector("#activity-backdrop");
|
||||
if (drawer) drawer.hidden = true;
|
||||
if (backdrop) backdrop.hidden = true;
|
||||
}
|
||||
|
||||
function selectActivityTab(tab) {
|
||||
document.querySelectorAll("[data-activity-tab]").forEach((button) => {
|
||||
button.classList.toggle("active", button.dataset.activityTab === tab);
|
||||
});
|
||||
document.querySelectorAll("[data-activity-panel]").forEach((panel) => {
|
||||
panel.classList.toggle("active", panel.dataset.activityPanel === tab);
|
||||
});
|
||||
}
|
||||
|
||||
function addMessage(role, content, meta = "", options = {}) {
|
||||
const list = document.querySelector("#messages");
|
||||
if (!list) return;
|
||||
@@ -756,6 +781,15 @@ function bindChat() {
|
||||
document.querySelector("#reload-chat")?.addEventListener("click", () => {
|
||||
if (state.currentConversationId) selectConversation(state.currentConversationId).catch(console.error);
|
||||
});
|
||||
document.querySelector("#activity-open")?.addEventListener("click", () => {
|
||||
openActivity("events");
|
||||
});
|
||||
document.querySelector("#activity-close")?.addEventListener("click", closeActivity);
|
||||
document.querySelector("#activity-backdrop")?.addEventListener("click", closeActivity);
|
||||
document.querySelector("#activity-drawer")?.addEventListener("click", (event) => {
|
||||
const tab = event.target.closest("[data-activity-tab]");
|
||||
if (tab) selectActivityTab(tab.dataset.activityTab);
|
||||
});
|
||||
document.querySelector("#refresh-audit")?.addEventListener("click", () => {
|
||||
refreshCommandAudit().catch(console.error);
|
||||
});
|
||||
@@ -803,9 +837,6 @@ function bindChat() {
|
||||
event.preventDefault();
|
||||
submitToolPassword(form).catch(console.error);
|
||||
});
|
||||
document.querySelector("#debug")?.addEventListener("change", (event) => {
|
||||
document.querySelector("#debug-panel").hidden = !event.target.checked;
|
||||
});
|
||||
}
|
||||
|
||||
async function loadSimplePages() {
|
||||
|
||||
+112
-27
@@ -213,9 +213,22 @@ button {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.utility-menu {
|
||||
border-bottom: 1px solid rgba(255,255,255,0.12);
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.utility-menu summary {
|
||||
cursor: pointer;
|
||||
color: #cbd5e1;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.side-nav {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.side-nav a {
|
||||
@@ -381,7 +394,7 @@ dd {
|
||||
|
||||
.chat-shell {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto auto;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
height: 100vh;
|
||||
@@ -418,6 +431,12 @@ dd {
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background: #edf2f7;
|
||||
color: #1f2937;
|
||||
@@ -681,26 +700,6 @@ dd {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.debug-panel {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr) minmax(280px, 0.85fr);
|
||||
gap: 16px;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.debug-column {
|
||||
min-width: 0;
|
||||
padding: 14px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.debug-column h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.debug-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -709,6 +708,97 @@ dd {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.activity-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 20;
|
||||
background: rgba(15, 23, 42, 0.28);
|
||||
}
|
||||
|
||||
.activity-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 21;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto minmax(0, 1fr);
|
||||
width: min(520px, 100vw);
|
||||
height: 100vh;
|
||||
background: var(--panel);
|
||||
border-left: 1px solid var(--border);
|
||||
box-shadow: -18px 0 45px rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
padding: 18px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.drawer-header h2,
|
||||
.drawer-header p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.drawer-header h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.drawer-header p {
|
||||
margin-top: 4px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: #edf2f7;
|
||||
color: #1f2937;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.drawer-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 6px;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.drawer-tab {
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
padding: 8px 10px;
|
||||
background: #edf2f7;
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.drawer-tab.active {
|
||||
background: var(--accent);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.drawer-section {
|
||||
display: none;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.drawer-section.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.debug-heading h3 {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -756,7 +846,7 @@ pre,
|
||||
.memory-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
max-height: 170px;
|
||||
max-height: none;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -909,9 +999,4 @@ pre,
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.debug-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,13 +17,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="side-nav" aria-label="DuckLM sections">
|
||||
<a href="/" class="active">Chat</a>
|
||||
<a href="/approvals">Approvals</a>
|
||||
<a href="/skills">Skills</a>
|
||||
<a href="/memory">Memory</a>
|
||||
<a href="/experience">Experience</a>
|
||||
</nav>
|
||||
<details class="utility-menu">
|
||||
<summary>System</summary>
|
||||
<nav class="side-nav" aria-label="DuckLM sections">
|
||||
<a href="/" class="active">Chat</a>
|
||||
<a href="/approvals">Approvals</a>
|
||||
<a href="/skills">Skills</a>
|
||||
<a href="/memory">Memory</a>
|
||||
<a href="/experience">Experience</a>
|
||||
</nav>
|
||||
</details>
|
||||
|
||||
<section class="conversation-panel" aria-labelledby="conversations-title">
|
||||
<div class="panel-heading">
|
||||
@@ -41,7 +44,7 @@
|
||||
</label>
|
||||
<label class="toggle-row">
|
||||
<input id="debug" type="checkbox" checked>
|
||||
<span>Show reasoning and events</span>
|
||||
<span>Debug mode</span>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
@@ -70,7 +73,10 @@
|
||||
<h2 id="chat-title">Chat</h2>
|
||||
<p id="chat-subtitle">Messages are processed by the local Qwen role mapping through Duck Core.</p>
|
||||
</div>
|
||||
<button id="reload-chat" class="secondary-button" type="button">Reload</button>
|
||||
<div class="header-actions">
|
||||
<button id="activity-open" class="secondary-button" type="button">Activity</button>
|
||||
<button id="reload-chat" class="secondary-button" type="button">Reload</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="messages" class="messages" aria-live="polite">
|
||||
@@ -86,35 +92,6 @@
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section id="debug-panel" class="debug-panel">
|
||||
<div class="debug-column">
|
||||
<h3>Event Timeline</h3>
|
||||
<ol id="events"></ol>
|
||||
</div>
|
||||
<div class="debug-column audit-column">
|
||||
<div class="debug-heading">
|
||||
<h3>Command Audit</h3>
|
||||
<button id="refresh-audit" class="mini-button" type="button">Refresh</button>
|
||||
</div>
|
||||
<div id="command-audit" class="audit-list"></div>
|
||||
</div>
|
||||
<div class="debug-column memory-column">
|
||||
<div class="debug-heading">
|
||||
<h3>Workspace Memory</h3>
|
||||
<button id="refresh-memory" class="mini-button" type="button">Refresh</button>
|
||||
</div>
|
||||
<form id="memory-form" class="memory-form">
|
||||
<input id="memory-text" placeholder="Add memory for this workspace" autocomplete="off">
|
||||
<button type="submit">Add</button>
|
||||
</form>
|
||||
<div class="memory-search-row">
|
||||
<input id="memory-search-inline" placeholder="Search memory" autocomplete="off">
|
||||
<button id="memory-search-button" class="mini-button" type="button">Search</button>
|
||||
</div>
|
||||
<div id="memory-list" class="memory-list"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<form id="composer" class="composer">
|
||||
<textarea id="message" rows="3" placeholder="Напиши сообщение DuckLM...">Скажи коротко, что ты DuckLM</textarea>
|
||||
<div class="composer-actions">
|
||||
@@ -123,6 +100,47 @@
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<div id="activity-backdrop" class="activity-backdrop" hidden></div>
|
||||
<aside id="activity-drawer" class="activity-drawer" aria-label="Activity" hidden>
|
||||
<header class="drawer-header">
|
||||
<div>
|
||||
<h2>Activity</h2>
|
||||
<p>Task details, command audit, and memory.</p>
|
||||
</div>
|
||||
<button id="activity-close" class="icon-button" type="button" aria-label="Close activity">x</button>
|
||||
</header>
|
||||
<div class="drawer-tabs" role="tablist" aria-label="Activity sections">
|
||||
<button class="drawer-tab active" type="button" data-activity-tab="events">Events</button>
|
||||
<button class="drawer-tab" type="button" data-activity-tab="commands">Commands</button>
|
||||
<button class="drawer-tab" type="button" data-activity-tab="memory">Memory</button>
|
||||
</div>
|
||||
<section class="drawer-section active" data-activity-panel="events">
|
||||
<ol id="events"></ol>
|
||||
</section>
|
||||
<section class="drawer-section" data-activity-panel="commands">
|
||||
<div class="debug-heading">
|
||||
<h3>Command Audit</h3>
|
||||
<button id="refresh-audit" class="mini-button" type="button">Refresh</button>
|
||||
</div>
|
||||
<div id="command-audit" class="audit-list"></div>
|
||||
</section>
|
||||
<section class="drawer-section" data-activity-panel="memory">
|
||||
<div class="debug-heading">
|
||||
<h3>Memory</h3>
|
||||
<button id="refresh-memory" class="mini-button" type="button">Refresh</button>
|
||||
</div>
|
||||
<form id="memory-form" class="memory-form">
|
||||
<input id="memory-text" placeholder="Add memory" autocomplete="off">
|
||||
<button type="submit">Add</button>
|
||||
</form>
|
||||
<div class="memory-search-row">
|
||||
<input id="memory-search-inline" placeholder="Search memory" autocomplete="off">
|
||||
<button id="memory-search-button" class="mini-button" type="button">Search</button>
|
||||
</div>
|
||||
<div id="memory-list" class="memory-list"></div>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user