diff --git a/convey/static/app.css b/convey/static/app.css
index a8ea5dd6e..360b736b3 100644
--- a/convey/static/app.css
+++ b/convey/static/app.css
@@ -995,13 +995,10 @@ body.menu-all .menu-bar {
transform: translateX(-50%);
width: 80%;
z-index: var(--z-bars);
- height: var(--app-bar-height);
- padding: 0 16px;
display: flex;
- flex-direction: row;
+ min-height: var(--app-bar-height);
+ flex-direction: column;
align-items: center;
- justify-content: center;
- gap: 12px;
border-radius: 12px;
border: 1px solid var(--facet-border, #e0e0e0);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
@@ -1034,6 +1031,47 @@ body.menu-all .menu-bar {
border-radius: 12px;
}
+.chat-bar-input-row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 12px;
+ width: 100%;
+ padding: 0 16px;
+ min-height: var(--app-bar-height);
+}
+
+.chat-bar-response-panel {
+ position: relative;
+ padding: 12px 16px;
+ padding-right: 36px;
+ border-bottom: 1px solid var(--facet-border, #e0e0e0);
+ width: 100%;
+}
+
+.chat-bar-dismiss {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ width: 24px;
+ height: 24px;
+ border: none;
+ background: transparent;
+ color: #999;
+ font-size: 14px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ z-index: 1;
+}
+
+.chat-bar-dismiss:hover {
+ background: rgba(0, 0, 0, 0.05);
+ color: #666;
+}
+
/* Chat Bar Elements */
.chat-bar-input {
flex: 1;
@@ -1105,12 +1143,11 @@ body.menu-all .menu-bar {
}
.chat-bar-response {
- flex: 1;
font-size: 13px;
color: #666;
- white-space: nowrap;
overflow: hidden;
- text-overflow: ellipsis;
+ max-height: 5em;
+ line-height: 1.4;
position: relative;
z-index: 1;
}
diff --git a/convey/templates/app.html b/convey/templates/app.html
index fa1f36661..1d5df94f1 100644
--- a/convey/templates/app.html
+++ b/convey/templates/app.html
@@ -68,15 +68,20 @@
-
-
-
- Thinking…
+
+
+
+ Thinking…
+
+
+
+
+
+
-
@@ -94,11 +99,31 @@
const chatBarThinking = document.querySelector('.chat-bar-thinking');
const chatBarResponse = document.querySelector('.chat-bar-response');
const chatBarSend = document.querySelector('.chat-bar-send');
+ const chatBarPanel = document.querySelector('.chat-bar-response-panel');
+ const chatBarDismiss = document.querySelector('.chat-bar-dismiss');
const isChatApp = window.location.pathname.startsWith('/app/chat');
const STORAGE_KEY = 'solstone:chatBarState';
if (!chatBarInput || !chatBarForm) return;
+ // --- Panel visibility helpers ---
+ function showPanel() {
+ if (chatBarPanel) chatBarPanel.style.display = '';
+ }
+ function hidePanel() {
+ if (chatBarPanel) chatBarPanel.style.display = 'none';
+ if (chatBarThinking) chatBarThinking.style.display = 'none';
+ if (chatBarResponse) chatBarResponse.style.display = 'none';
+ if (chatBarDismiss) chatBarDismiss.style.display = 'none';
+ }
+
+ // --- Dismiss button ---
+ if (chatBarDismiss) {
+ chatBarDismiss.addEventListener('click', () => {
+ hidePanel();
+ });
+ }
+
// --- Auto-resize textarea ---
chatBarInput.addEventListener('input', () => {
chatBarInput.style.height = 'auto';
@@ -122,6 +147,8 @@
if (saved && saved.response && !isChatApp && chatBarResponse) {
chatBarResponse.textContent = saved.response;
chatBarResponse.style.display = '';
+ if (chatBarDismiss) chatBarDismiss.style.display = '';
+ showPanel();
}
} catch {}
@@ -147,12 +174,10 @@
chatBarSend.style.display = 'none';
}
chatBarInput.disabled = true;
- if (chatBarThinking) {
- chatBarThinking.style.display = '';
- }
- if (chatBarResponse) {
- chatBarResponse.style.display = 'none';
- }
+ if (chatBarThinking) chatBarThinking.style.display = '';
+ if (chatBarResponse) chatBarResponse.style.display = 'none';
+ if (chatBarDismiss) chatBarDismiss.style.display = 'none';
+ showPanel();
try {
const r = await fetch('/api/triage', {
@@ -170,7 +195,13 @@
const data = await r.json();
if (chatBarResponse) {
chatBarResponse.textContent = data.response || '';
- chatBarResponse.style.display = data.response ? '' : 'none';
+ if (data.response) {
+ chatBarResponse.style.display = '';
+ if (chatBarDismiss) chatBarDismiss.style.display = '';
+ } else {
+ chatBarResponse.style.display = 'none';
+ hidePanel();
+ }
}
// Save to localStorage
@@ -184,11 +215,15 @@
} else if (chatBarResponse) {
chatBarResponse.textContent = 'Something went wrong. Try again.';
chatBarResponse.style.display = '';
+ if (chatBarDismiss) chatBarDismiss.style.display = '';
+ showPanel();
}
} catch (err) {
if (chatBarResponse) {
chatBarResponse.textContent = 'Connection error. Try again.';
chatBarResponse.style.display = '';
+ if (chatBarDismiss) chatBarDismiss.style.display = '';
+ showPanel();
}
} finally {
if (chatBarThinking) {