@volter/teams 0.1.27 → 0.1.29

package/viewer/viewer.mjs

@@ -25,17 +25,50 @@ function applyTheme(properties) {
     if (!/^--(volter|scui)-[a-z0-9-]+$/.test(name) || typeof value !== 'string' || value.length > 400) continue;
     // on the page (its background) and on the session root (which sets its own scheme default)
     for (const element of [document.documentElement, $('session')]) element.style.setProperty(name, value);
+    if (name === '--scui-color-scheme') themed = true;
   }
 }
 // The session header is the host's to show: framed, it is hidden unless the host asks for it (the host's own header
 // carries the session's details, which this page posts to it as `viewer-session`).
 function showHeader(shown) { $('session').classList.toggle('header-hidden', !shown); }
-try { applyTheme(JSON.parse(atob((fragment.get('theme') ?? '').replaceAll('-', '+').replaceAll('_', '/')) || 'null')); } catch { /* no theme */ }
+// The host's presentation of the transcript: supercode-ui's own (the default), or `rows`, a chat's rows (every
+// message left-aligned under its author's avatar and name, one author's run grouped) in the brand's type.
+let themed = false;
+// The host's words for the composer (its placeholder and the hint under it), e.g. "Message #Work".
+let labels = {};
+let applyLabels = () => {};
+function useLabels(value) {
+  if (!value || typeof value !== 'object') return;
+  for (const key of ['composerPlaceholder', 'composerHint']) if (typeof value[key] === 'string' && value[key].length <= 200) labels[key] = value[key];
+  applyLabels();
+}
+function useLayout(layout) {
+  const rows = layout === 'rows';
+  $('session').classList.toggle('layout-rows', rows);
+  if (rows && !document.getElementById('brand-tokens')) {
+    const link = Object.assign(document.createElement('link'), { id: 'brand-tokens', rel: 'stylesheet', href: 'https://brand.volter.ai/tokens.css' });
+    document.head.append(link);
+    // A chat's rows are light unless the host's theme names a scheme.
+    if (!themed) document.documentElement.style.setProperty('--scui-color-scheme', 'light');
+  }
+}
+// A fragment value that is base64url JSON (UTF-8), or null.
+function fragmentJson(name) {
+  try {
+    const bytes = Uint8Array.from(atob((fragment.get(name) ?? '').replaceAll('-', '+').replaceAll('_', '/')), (c) => c.charCodeAt(0));
+    return bytes.length ? JSON.parse(decoder.decode(bytes)) : null;
+  } catch { return null; }
+}
+applyTheme(fragmentJson('theme'));
 showHeader(fragment.has('header') ? fragment.get('header') !== 'hidden' : !embedded);
+useLayout(fragment.get('layout'));
+useLabels(fragmentJson('labels'));
 
 window.addEventListener('message', (event) => {
   if (event.data?.type === 'viewer-theme') { applyTheme(event.data.properties); return; }
   if (event.data?.type === 'viewer-header') { showHeader(!event.data.hidden); return; }
+  if (event.data?.type === 'viewer-layout') { useLayout(event.data.layout); return; }
+  if (event.data?.type === 'viewer-labels') { useLabels(event.data); return; }
   if (event.data?.type !== 'delegated-token' || typeof event.data.token !== 'string') return;
   token = event.data.token;
   if (waiting) { const resume = waiting; waiting = null; resume(); }
@@ -108,6 +141,8 @@ async function showSession(session, control) {
     },
   });
   const headers = async () => ({ Authorization: `Bearer ${await freshToken()}` });
+  applyLabels = () => view.update({ ...labels });
+  applyLabels();
   const HARNESSES = { 'claude-code': 'Claude Code', codex: 'Codex', gemini: 'Gemini CLI', goose: 'Goose', opencode: 'OpenCode', pi: 'Pi', grok: 'Grok' };
   const apply = (body) => {
     view.update({ descriptor: body.descriptor, messages: body.messages.map((message) => message.value), members: body.names?.members ?? [], machines: body.names?.machines ?? [], status: 'ready', error: null });