Chat: show Chat/Agent tag next to message timestamp

Sometimes the user lands in chat mode without realizing — surface the
mode the message went out on as a small uppercase pill right after the
timestamp in the role header.

- roleTimestamp(when, mode) gains an optional mode arg. Agent renders
  in accent; Chat renders in muted/neutral. Other values render
  nothing (back-compat for older history without the field).
- The three roleTimestamp call sites pass metadata?.mode through.
- chat.js writes mode into the user-message metadata at send time and
  into the assistant metadata when the active-stream render lands,
  reading toggleState.mode so research/agent overrides upstream still
  flow through correctly.

Historical messages from before this change just don't show the pill —
graceful fallback, no migration needed.
This commit is contained in:
pewdiepie-archdaemon
2026-06-11 20:44:18 +09:00
parent 1d1678214a
commit e0af7bd8a0
3 changed files with 42 additions and 6 deletions
+13 -5
View File
@@ -832,8 +832,10 @@ export function updateSessionCostUI() {
/** Create a timestamp span for role labels.
* Pass an ISO string / Date / epoch-ms to render the message's own time
* (used when replaying history). Falls back to "now" when no value is given. */
export function roleTimestamp(when) {
* (used when replaying history). Falls back to "now" when no value is given.
* Optionally pass `mode` ('chat' | 'agent') to append a small badge so the
* reader can tell at a glance which path the message went through. */
export function roleTimestamp(when, mode) {
const ts = document.createElement('span');
ts.className = 'role-timestamp';
let d;
@@ -844,6 +846,12 @@ export function roleTimestamp(when) {
if (isNaN(d.getTime())) d = new Date();
ts.textContent = d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
ts.title = d.toLocaleString();
if (mode === 'agent' || mode === 'chat') {
const tag = document.createElement('span');
tag.className = 'role-mode-tag role-mode-' + mode;
tag.textContent = mode === 'agent' ? 'Agent' : 'Chat';
ts.appendChild(tag);
}
return ts;
}
@@ -2005,7 +2013,7 @@ export function addMessage(role, content, modelName, metadata) {
roleEl.title = pair.requestedModel + ' -> ' + contModel;
}
applyModelColor(roleEl, contModel);
if (r === 0) roleEl.appendChild(roleTimestamp(metadata?.timestamp));
if (r === 0) roleEl.appendChild(roleTimestamp(metadata?.timestamp, metadata?.mode));
wrap.appendChild(roleEl);
const body = document.createElement('div');
body.className = 'body';
@@ -2165,7 +2173,7 @@ export function addMessage(role, content, modelName, metadata) {
r.title = replyModels.requestedModel + ' -> ' + resolvedModel;
}
if (!isSlash && !isCompacted) applyModelColor(r, resolvedModel);
r.appendChild(roleTimestamp(metadata?.timestamp));
r.appendChild(roleTimestamp(metadata?.timestamp, metadata?.mode));
}
const b = document.createElement('div');
@@ -2410,7 +2418,7 @@ export function addMessage(role, content, modelName, metadata) {
if (metadata) displayMetrics(wrap, metadata);
} else {
// Add timestamp to user header (like AI messages)
r.appendChild(roleTimestamp(metadata?.timestamp));
r.appendChild(roleTimestamp(metadata?.timestamp, metadata?.mode));
wrap.appendChild(createUserMsgFooter(wrap));
}