Carry expand/collapse to the mesh chat, same corner and same glyphs

Both heights ride on the pane as data attributes so the card's mount options decide how big 'more room' is.
This commit is contained in:
Gmer4Lfe
2026-08-17 17:52:57 -04:00
parent 4f99efcf2c
commit 74bd40ba78
2 changed files with 36 additions and 3 deletions
+35 -2
View File
@@ -236,12 +236,15 @@ function vv_nc_flush_spool(): int {
// conversation surface and a switch, not two boxes competing for the same corner of the screen.
// Emitted once per page: there is one mesh store, so a second instance would be two views of the
// same thing fighting over the same element ids.
function vv_nc_pane_markup(string $prefix, bool $meshDefault = false, string $height = '300px'): void {
function vv_nc_pane_markup(string $prefix, bool $meshDefault = false,
string $height = '300px', string $tall = ''): void {
static $done = false;
if ($done) return;
$done = true;
?>
<div id="<?= htmlspecialchars($prefix, ENT_QUOTES) ?>-pane-mesh" hidden
data-h="<?= htmlspecialchars($height, ENT_QUOTES) ?>"
data-h-tall="<?= htmlspecialchars($tall !== '' ? $tall : $height, ENT_QUOTES) ?>"
style="--vv-nc-h:<?= htmlspecialchars($height, ENT_QUOTES) ?>;">
<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;">
<select id="vv-nc-ch" class="vv-cf-sel" style="max-width:200px;font-size:11px;padding:3px 8px;"
@@ -295,7 +298,13 @@ function vv_nc_pane_markup(string $prefix, bool $meshDefault = false, string $he
</select>
<button class="vv-pt-action-btn run" style="font-size:11px;" onclick="vvNcSend()">Send</button>
</span>
<span class="vv-ai-side vv-ai-tail"></span>
<!-- Same control, same corner as the assistant's. A card that expands one way when you are
reading the model and another way when you are reading your partners is two cards
wearing one frame. -->
<span class="vv-ai-side vv-ai-tail">
<button class="vv-ai-btn ghost vv-ai-grow" id="vv-nc-grow" type="button"
title="Give the conversation more room" onclick="vvNcGrow()">⤢</button>
</span>
</div>
<!-- Formatting row, hidden until asked for. Choices persist per browser so a house style
@@ -503,6 +512,28 @@ function vvNcRender() {
}
}
// Expand/collapse, mirroring the assistant's control down to the glyph swap and the lit state.
// Both heights are carried on the pane as data attributes, so the card's own mount options decide
// how big "more room" is rather than this file inventing a number.
let _vvNcBig = false;
function vvNcGrow() {
const pane = document.getElementById(_vvNcPrefix + '-pane-mesh');
const btn = document.getElementById('vv-nc-grow');
if (!pane) return;
_vvNcBig = !_vvNcBig;
const h = _vvNcBig ? (pane.dataset.hTall || pane.dataset.h) : pane.dataset.h;
pane.style.setProperty('--vv-nc-h', h);
if (btn) {
btn.textContent = _vvNcBig ? '⤡' : '⤢';
btn.title = _vvNcBig ? 'Back to the smaller view' : 'Give the conversation more room';
btn.classList.toggle('vv-ai-grow-on', _vvNcBig);
}
try { localStorage.setItem('vvNcBig:' + _vvNcPrefix, _vvNcBig ? '1' : '0'); } catch (_) {}
// Growing reveals rows that were scrolled out of view; land where the reader expects.
const box = document.getElementById('vv-nc-log');
if (box && document.getElementById('vv-nc-follow')?.checked) box.scrollTop = box.scrollHeight;
}
function vvNcEmoji(sel) {
const t = document.getElementById('vv-nc-text');
if (t && sel.value) { t.value += sel.value; t.focus(); }
@@ -591,6 +622,8 @@ function vvNcInit(prefix, meshDefault) {
} catch (_) {}
}
_vvNcLoadPrefs();
// Restore the expanded state before the first paint, so the card does not visibly resize.
try { if (localStorage.getItem('vvNcBig:' + prefix) === '1') vvNcGrow(); } catch (_) {}
vvNcMode(want);
vvNcChans();
_vvNcSchedule();