clay-server 3.8.1 → 4.0.0-beta.2

package/lib/public/modules/avatar-imprint.js

@@ -4,8 +4,15 @@ var PAPER = "#f1efe8";
 var INK = "#1b1b1a";
 var LIGHT_BASE = "#e7e5de";
 var LIGHT_FIELD = "#333330";
-var REGISTRATION_INDIGO = "#5857fc";
-var BRAND_GREEN = "#07e5a3";
+var MUTED_INDIGO = "#72778f";
+var MATE_MARK_PALETTE = [
+  { background: "#6f7489", foreground: PAPER },
+  { background: "#78816c", foreground: PAPER },
+  { background: "#92756d", foreground: PAPER },
+  { background: "#6f8382", foreground: PAPER },
+  { background: "#887b91", foreground: PAPER },
+  { background: "#8a806a", foreground: PAPER },
+];
 
 function hashString(value) {
   var text = String(value || "anonymous");
@@ -71,7 +78,7 @@ export function imprintSvg(options) {
   var darkBase = random() > 0.52;
   var base = darkBase ? INK : LIGHT_BASE;
   var field = darkBase ? PAPER : LIGHT_FIELD;
-  var accent = REGISTRATION_INDIGO;
+  var accent = MUTED_INDIGO;
   var rotation = Math.floor(random() * 4) * 90;
   var bandWidth = between(random, 37, 56);
   var secondaryWidth = between(random, 14, 24);
@@ -114,11 +121,7 @@ export function mateMarkSvg(options) {
   var size = Math.max(12, Math.min(256, Number(settings.size) || 64));
   var identity = String(settings.seed || "M").trim();
   var initial = Array.from(identity || "M")[0].toUpperCase();
-  var palette = [
-    { background: REGISTRATION_INDIGO, foreground: PAPER },
-    { background: BRAND_GREEN, foreground: INK },
-    { background: PAPER, foreground: REGISTRATION_INDIGO },
-  ][initial.codePointAt(0) % 3];
+  var palette = MATE_MARK_PALETTE[initial.codePointAt(0) % MATE_MARK_PALETTE.length];
   var clipId = "mate-mark";
 
   return '<svg xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size +

package/lib/public/modules/chat-bubble-renderer.js

@@ -0,0 +1,152 @@
+// chat-bubble-renderer.js - Stateless project-style chat bubble rendering.
+
+import { copyToClipboard } from './utils.js';
+import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks, enhanceClaySessionLinks } from './markdown.js';
+
+var copyCleanups = new WeakMap();
+
+function appendIdentity(row, options, avatarClass) {
+  if (options.avatarUrl) {
+    var avatar = document.createElement("img");
+    avatar.className = "dm-bubble-avatar " + avatarClass;
+    avatar.src = options.avatarUrl;
+    avatar.alt = "";
+    row.appendChild(avatar);
+  }
+
+  var content = document.createElement("div");
+  content.className = "dm-bubble-content";
+  if (options.name || options.time) {
+    var header = document.createElement("div");
+    header.className = "dm-bubble-header";
+    if (options.name) {
+      var name = document.createElement("span");
+      name.className = "dm-bubble-name";
+      name.textContent = options.name;
+      header.appendChild(name);
+    }
+    if (options.time) {
+      var time = document.createElement("span");
+      time.className = "dm-bubble-time";
+      time.textContent = options.time;
+      header.appendChild(time);
+    }
+    content.appendChild(header);
+  }
+  row.appendChild(content);
+  return content;
+}
+
+export function createAssistantBubble(options) {
+  options = options || {};
+  var row = document.createElement("div");
+  row.className = "msg-assistant";
+  if (options.turn !== undefined && options.turn !== null) row.dataset.turn = options.turn;
+  var contentWrap = appendIdentity(row, options, "dm-bubble-avatar-mate");
+  var content = document.createElement("div");
+  content.className = "md-content";
+  content.dir = "auto";
+  contentWrap.appendChild(content);
+  return row;
+}
+
+export function createUserBubble(options) {
+  options = options || {};
+  var row = document.createElement("div");
+  row.className = "msg-user";
+  if (options.turn !== undefined && options.turn !== null) row.dataset.turn = options.turn;
+  var contentWrap = appendIdentity(row, options, "dm-bubble-avatar-me");
+  var bubble = document.createElement("div");
+  bubble.className = "bubble";
+  bubble.dir = "auto";
+  var text = document.createElement("span");
+  text.textContent = options.text || "";
+  bubble.appendChild(text);
+  contentWrap.appendChild(bubble);
+  return row;
+}
+
+function assistantContent(row) {
+  return row ? row.querySelector(".md-content") : null;
+}
+
+export function renderAssistantBubbleText(row, text, highlight) {
+  var content = assistantContent(row);
+  if (!content) return null;
+  content.innerHTML = renderMarkdown(text || "");
+  enhanceClaySessionLinks(content);
+  if (highlight) highlightCodeBlocks(content);
+  return content;
+}
+
+export function enhanceAssistantBubble(row, renderMermaid) {
+  var content = assistantContent(row);
+  if (!content) return;
+  enhanceClaySessionLinks(content);
+  highlightCodeBlocks(content);
+  if (renderMermaid) renderMermaidBlocks(content);
+}
+
+export function addAssistantCopyHandler(row, rawText) {
+  if (!row || !rawText || row.dataset.copyBound === "true") return;
+  row.dataset.copyBound = "true";
+  var primed = false;
+  var resetTimer = null;
+  var isTouchDevice = "ontouchstart" in window;
+  var hint = document.createElement("div");
+  hint.className = "msg-copy-hint";
+  hint.textContent = (isTouchDevice ? "Tap" : "Click") + " to grab this";
+  row.appendChild(hint);
+
+  function reset() {
+    primed = false;
+    row.classList.remove("copy-primed", "copy-done");
+    hint.textContent = (isTouchDevice ? "Tap" : "Click") + " to grab this";
+  }
+
+  row.addEventListener("click", function (event) {
+    if (event.target.closest("a, pre, code")) return;
+    var selection = window.getSelection();
+    if (selection && selection.toString().length > 0) return;
+    if (!primed) {
+      primed = true;
+      row.classList.add("copy-primed");
+      hint.textContent = isTouchDevice ? "Tap again to grab" : "Click again to grab";
+      clearTimeout(resetTimer);
+      resetTimer = setTimeout(reset, 3000);
+      return;
+    }
+    clearTimeout(resetTimer);
+    copyToClipboard(rawText).then(function () {
+      row.classList.remove("copy-primed");
+      row.classList.add("copy-done");
+      hint.textContent = "Grabbed!";
+      resetTimer = setTimeout(reset, 1500);
+    });
+  });
+
+  function handleOutsideClick(event) {
+    if (primed && !row.contains(event.target)) reset();
+  }
+  document.addEventListener("click", handleOutsideClick);
+  copyCleanups.set(row, function () {
+    clearTimeout(resetTimer);
+    document.removeEventListener("click", handleOutsideClick);
+    copyCleanups.delete(row);
+  });
+}
+
+export function finalizeAssistantBubble(row, rawText, enableCopy) {
+  renderAssistantBubbleText(row, rawText, false);
+  enhanceAssistantBubble(row, true);
+  if (enableCopy) addAssistantCopyHandler(row, rawText);
+}
+
+export function disposeChatBubbleTree(root) {
+  if (!root) return;
+  var rows = root.querySelectorAll('.msg-assistant[data-copy-bound="true"]');
+  for (var i = 0; i < rows.length; i++) {
+    var cleanup = copyCleanups.get(rows[i]);
+    if (cleanup) cleanup();
+  }
+}

package/lib/public/modules/chat-render-runtime.js

@@ -0,0 +1,198 @@
+// chat-render-runtime.js - Shared project transcript state and scrolling.
+
+import { store } from './store.js';
+import { getMessagesEl } from './dom-refs.js';
+
+export var VENDOR_AVATARS = {
+  claude: "/claude-code-avatar.png",
+  codex: "/codex-avatar.png",
+  antigravity: "/antigravity-avatar.png",
+  opencode: "/opencode-avatar.svg",
+  kimi: "/kimi-avatar.svg",
+  grok: "/grok-avatar.svg",
+  copilot: "/copilot-avatar.svg",
+  qwen: "/qwen-avatar.svg",
+  junie: "/junie-avatar.svg",
+  kiro: "/kiro-avatar.svg",
+};
+
+export var VENDOR_NAMES = {
+  claude: "Claude Code",
+  codex: "Codex",
+  antigravity: "Antigravity CLI",
+  opencode: "OpenCode",
+  kimi: "Kimi Code",
+  grok: "Grok Build",
+  copilot: "GitHub Copilot CLI",
+  qwen: "Qwen Code",
+  junie: "Junie CLI",
+  kiro: "Kiro CLI",
+};
+
+export var VENDOR_HOMEPAGES = {
+  claude: "https://claude.com/product/claude-code",
+  codex: "https://openai.com/codex/",
+  antigravity: "https://antigravity.google/product/antigravity-cli",
+  opencode: "https://opencode.ai/",
+  kimi: "https://www.kimi.com/code/",
+  grok: "https://docs.x.ai/build/overview",
+  copilot: "https://github.com/features/copilot/cli",
+  qwen: "https://qwenlm.github.io/qwen-code-docs/",
+  junie: "https://junie.jetbrains.com/",
+  kiro: "https://kiro.dev/",
+};
+
+var NEW_MSG_BTN_DEFAULT = "\u2193 Latest";
+var NEW_MSG_BTN_ACTIVITY = "\u2193 New activity";
+var turnCounter = 0;
+var prependAnchor = null;
+var activityEl = null;
+var isUserScrolledUp = false;
+var stickyBottom = false;
+var stickyBottomQuietTimer = null;
+var stickyBottomCeilingTimer = null;
+var stickyBottomQuietMs = 750;
+var stickyBottomCeilingMs = 8000;
+var stickyBottomResizeObs = null;
+var stickyBottomInputBound = false;
+
+export function getStickyBottom() { return stickyBottom; }
+
+function pinToBottomNow() {
+  var messagesEl = getMessagesEl();
+  if (!messagesEl) return;
+  messagesEl.scrollTop = messagesEl.scrollHeight;
+}
+
+function ensureStickyInfrastructure() {
+  var messagesEl = getMessagesEl();
+  if (!messagesEl) return;
+  if (!stickyBottomResizeObs && typeof ResizeObserver !== "undefined") {
+    stickyBottomResizeObs = new ResizeObserver(function () {
+      if (!stickyBottom) return;
+      pinToBottomNow();
+      if (stickyBottomQuietTimer) clearTimeout(stickyBottomQuietTimer);
+      stickyBottomQuietTimer = setTimeout(disarmStickyBottom, stickyBottomQuietMs);
+    });
+    stickyBottomResizeObs.observe(messagesEl);
+    var kids = messagesEl.children;
+    for (var i = 0; i < kids.length; i++) stickyBottomResizeObs.observe(kids[i]);
+  }
+  if (!stickyBottomInputBound) {
+    stickyBottomInputBound = true;
+    var disarmOnUserScroll = function () { disarmStickyBottom(); };
+    messagesEl.addEventListener("wheel", disarmOnUserScroll, { passive: true });
+    messagesEl.addEventListener("touchmove", disarmOnUserScroll, { passive: true });
+    document.addEventListener("keydown", function (event) {
+      if (!stickyBottom) return;
+      if (event.key === "PageUp" || event.key === "Home" || event.key === "ArrowUp") disarmStickyBottom();
+    });
+  }
+}
+
+export function armStickyBottom(durationMs) {
+  if (prependAnchor) return;
+  ensureStickyInfrastructure();
+  stickyBottom = true;
+  isUserScrolledUp = false;
+  var newMsgBtn = document.getElementById("new-msg-btn");
+  if (newMsgBtn) {
+    newMsgBtn.classList.add("hidden");
+    newMsgBtn.textContent = NEW_MSG_BTN_DEFAULT;
+  }
+  pinToBottomNow();
+  if (stickyBottomResizeObs) {
+    var messagesEl = getMessagesEl();
+    if (messagesEl) {
+      var kids = messagesEl.children;
+      for (var i = 0; i < kids.length; i++) {
+        try { stickyBottomResizeObs.observe(kids[i]); } catch (e) {}
+      }
+    }
+  }
+  stickyBottomQuietMs = durationMs || 750;
+  if (stickyBottomQuietTimer) clearTimeout(stickyBottomQuietTimer);
+  stickyBottomQuietTimer = setTimeout(disarmStickyBottom, stickyBottomQuietMs);
+  if (stickyBottomCeilingTimer) clearTimeout(stickyBottomCeilingTimer);
+  stickyBottomCeilingTimer = setTimeout(disarmStickyBottom, stickyBottomCeilingMs);
+}
+
+export function disarmStickyBottom() {
+  stickyBottom = false;
+  if (stickyBottomQuietTimer) { clearTimeout(stickyBottomQuietTimer); stickyBottomQuietTimer = null; }
+  if (stickyBottomCeilingTimer) { clearTimeout(stickyBottomCeilingTimer); stickyBottomCeilingTimer = null; }
+}
+
+export function initRendering() {
+  store.subscribe(function (state, prev) {
+    if (state.currentVendor !== prev.currentVendor) {
+      var inputEl = document.getElementById("input");
+      if (inputEl) inputEl.placeholder = "Message " + (VENDOR_NAMES[state.currentVendor] || VENDOR_NAMES.claude) + "...";
+    }
+  });
+}
+
+export function getTurnCounter() { return turnCounter; }
+export function setTurnCounter(value) { turnCounter = value; }
+export function getPrependAnchor() { return prependAnchor; }
+export function setPrependAnchor(value) { prependAnchor = value; }
+export function getActivityEl() { return activityEl; }
+export function setActivityEl(value) { activityEl = value; }
+export function getIsUserScrolledUp() { return isUserScrolledUp; }
+export function setIsUserScrolledUp(value) { isUserScrolledUp = value; }
+
+export function addToMessages(element) {
+  var messagesEl = getMessagesEl();
+  if (prependAnchor) messagesEl.insertBefore(element, prependAnchor);
+  else messagesEl.appendChild(element);
+  var scheduled = document.getElementById("scheduled-msg-bubble");
+  if (scheduled && element !== scheduled && scheduled.parentNode === messagesEl) messagesEl.appendChild(scheduled);
+}
+
+export function scrollToBottom() {
+  if (prependAnchor) return;
+  var messagesEl = getMessagesEl();
+  if (!messagesEl) return;
+  var distFromBottom = messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight;
+  if (distFromBottom > 150 || isUserScrolledUp) {
+    if (distFromBottom > 150) isUserScrolledUp = true;
+    var newMsgBtn = document.getElementById("new-msg-btn");
+    if (newMsgBtn) {
+      newMsgBtn.textContent = NEW_MSG_BTN_ACTIVITY;
+      newMsgBtn.classList.remove("hidden");
+    }
+    return;
+  }
+  requestAnimationFrame(function () {
+    var dist = messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight;
+    if (dist > 150) {
+      isUserScrolledUp = true;
+      return;
+    }
+    messagesEl.scrollTop = messagesEl.scrollHeight;
+  });
+}
+
+export function forceScrollToBottom() {
+  if (prependAnchor) return;
+  armStickyBottom(750);
+}
+
+export function getMsgTime() {
+  var timestamp = store.get('currentMsgTs');
+  var date = timestamp ? new Date(timestamp) : new Date();
+  var time = String(date.getHours()).padStart(2, "0") + ":" + String(date.getMinutes()).padStart(2, "0");
+  var now = new Date();
+  if (date.getFullYear() === now.getFullYear() && date.getMonth() === now.getMonth() && date.getDate() === now.getDate()) return time;
+  return (date.getMonth() + 1) + "/" + date.getDate() + " " + time;
+}
+
+export function shouldGroupMessage(senderClass) {
+  var state = store.snap();
+  if (state.replayingHistory && !state.currentMsgTs) return false;
+  var prev = getMessagesEl().lastElementChild;
+  if (!prev || !prev.classList.contains(senderClass)) return false;
+  var prevTime = prev.querySelector(".dm-bubble-time");
+  if (!prevTime) return false;
+  return prevTime.textContent === getMsgTime();
+}