clay-server 2.17.0 → 2.18.0-beta.1

package/lib/public/modules/mention.js

@@ -0,0 +1,627 @@
+import { mateAvatarUrl } from './avatar.js';
+import { renderMarkdown, highlightCodeBlocks } from './markdown.js';
+import { escapeHtml } from './utils.js';
+import { iconHtml, refreshIcons } from './icons.js';
+
+var ctx;
+
+// --- State ---
+var mentionActive = false;       // @ autocomplete is visible
+var mentionAtIdx = -1;           // position of the @ in input
+var mentionFiltered = [];        // filtered mate list
+var mentionActiveIdx = -1;       // highlighted item in dropdown
+var selectedMateId = null;       // selected mate for pending send
+var selectedMateName = null;     // display name of selected mate
+
+// Streaming state
+var currentMentionEl = null;     // current mention response DOM element
+var mentionFullText = "";        // accumulated response text
+var mentionStreamBuffer = "";    // stream smoothing buffer
+var mentionDrainTimer = null;
+var activeMentionMeta = null;    // { mateId, mateName, avatarColor, avatarStyle, avatarSeed } for reconnect
+
+// --- Init ---
+export function initMention(_ctx) {
+  ctx = _ctx;
+}
+
+// --- @ detection ---
+// Called from input.js on each input event.
+// Returns { active, query, startIdx } if @ mention is being typed.
+export function checkForMention(value, cursorPos) {
+  // Look backwards from cursor to find an unmatched @
+  var i = cursorPos - 1;
+  while (i >= 0) {
+    var ch = value.charAt(i);
+    if (ch === "@") {
+      // @ must be at start of input or preceded by whitespace
+      if (i === 0 || /\s/.test(value.charAt(i - 1))) {
+        var query = value.substring(i + 1, cursorPos);
+        // Don't activate if query contains whitespace (user moved past mention)
+        if (/\s/.test(query)) break;
+        return { active: true, query: query, startIdx: i };
+      }
+      break;
+    }
+    if (/\s/.test(ch)) break; // whitespace before finding @ means no mention
+    i--;
+  }
+  return { active: false, query: "", startIdx: -1 };
+}
+
+// --- Autocomplete dropdown ---
+export function showMentionMenu(query) {
+  var mates = ctx.matesList ? ctx.matesList() : [];
+  if (!mates || mates.length === 0) {
+    hideMentionMenu();
+    return;
+  }
+
+  var lowerQuery = query.toLowerCase();
+  mentionFiltered = mates.filter(function (m) {
+    if (m.status === "interviewing") return false;
+    var name = ((m.profile && m.profile.displayName) || m.name || "").toLowerCase();
+    return name.indexOf(lowerQuery) !== -1;
+  });
+
+  if (mentionFiltered.length === 0) {
+    hideMentionMenu();
+    return;
+  }
+
+  mentionActive = true;
+  mentionActiveIdx = 0;
+
+  var menuEl = document.getElementById("mention-menu");
+  if (!menuEl) return;
+
+  menuEl.innerHTML = mentionFiltered.map(function (m, i) {
+    var name = (m.profile && m.profile.displayName) || m.name || "Mate";
+    var color = (m.profile && m.profile.avatarColor) || "#6c5ce7";
+    var avatarSrc = mateAvatarUrl(m, 24);
+    return '<div class="mention-item' + (i === 0 ? ' active' : '') + '" data-idx="' + i + '">' +
+      '<img class="mention-item-avatar" src="' + escapeHtml(avatarSrc) + '" width="24" height="24" />' +
+      '<span class="mention-item-name">' + escapeHtml(name) + '</span>' +
+      '<span class="mention-item-dot" style="background:' + escapeHtml(color) + '"></span>' +
+      '</div>';
+  }).join("");
+  menuEl.classList.add("visible");
+
+  menuEl.querySelectorAll(".mention-item").forEach(function (el) {
+    el.addEventListener("click", function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      selectMentionItem(parseInt(el.dataset.idx));
+    });
+  });
+}
+
+export function hideMentionMenu() {
+  mentionActive = false;
+  mentionActiveIdx = -1;
+  mentionFiltered = [];
+  var menuEl = document.getElementById("mention-menu");
+  if (menuEl) {
+    menuEl.classList.remove("visible");
+    menuEl.innerHTML = "";
+  }
+}
+
+export function isMentionMenuVisible() {
+  return mentionActive && mentionFiltered.length > 0;
+}
+
+export function mentionMenuKeydown(e) {
+  if (!mentionActive || mentionFiltered.length === 0) return false;
+
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    mentionActiveIdx = (mentionActiveIdx + 1) % mentionFiltered.length;
+    updateMentionHighlight();
+    return true;
+  }
+  if (e.key === "ArrowUp") {
+    e.preventDefault();
+    mentionActiveIdx = (mentionActiveIdx - 1 + mentionFiltered.length) % mentionFiltered.length;
+    updateMentionHighlight();
+    return true;
+  }
+  if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) {
+    e.preventDefault();
+    selectMentionItem(mentionActiveIdx);
+    return true;
+  }
+  if (e.key === "Escape") {
+    e.preventDefault();
+    hideMentionMenu();
+    return true;
+  }
+  return false;
+}
+
+function selectMentionItem(idx) {
+  if (idx < 0 || idx >= mentionFiltered.length) return;
+  var mate = mentionFiltered[idx];
+  var name = (mate.profile && mate.profile.displayName) || mate.name || "Mate";
+  var color = (mate.profile && mate.profile.avatarColor) || "#6c5ce7";
+  var avatarSrc = mateAvatarUrl(mate, 20);
+
+  selectedMateId = mate.id;
+  selectedMateName = name;
+
+  // Remove the @query text from the textarea, keep remaining text
+  if (ctx.inputEl && mentionAtIdx >= 0) {
+    var val = ctx.inputEl.value;
+    var cursorPos = ctx.inputEl.selectionStart;
+    var before = val.substring(0, mentionAtIdx);
+    var after = val.substring(cursorPos);
+    ctx.inputEl.value = (before + after).trim();
+    ctx.inputEl.selectionStart = ctx.inputEl.selectionEnd = 0;
+    ctx.inputEl.focus();
+  }
+
+  // Show visual chip in input area
+  showInputMentionChip(name, color, avatarSrc);
+
+  hideMentionMenu();
+}
+
+function showInputMentionChip(name, color, avatarSrc) {
+  removeInputMentionChip();
+  var chip = document.createElement("div");
+  chip.id = "input-mention-chip";
+  chip.innerHTML =
+    '<img class="input-mention-chip-avatar" src="' + escapeHtml(avatarSrc) + '" width="18" height="18" />' +
+    '<span class="input-mention-chip-name" style="color:' + escapeHtml(color) + '">@' + escapeHtml(name) + '</span>' +
+    '<button class="input-mention-chip-remove" type="button" aria-label="Remove mention">&times;</button>';
+  chip.style.setProperty("--chip-color", color);
+
+  // Insert before the textarea inside input-row
+  var inputRow = document.getElementById("input-row");
+  if (inputRow && ctx.inputEl) {
+    inputRow.insertBefore(chip, ctx.inputEl);
+  }
+
+  chip.querySelector(".input-mention-chip-remove").addEventListener("click", function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    removeMentionChip();
+  });
+}
+
+function removeInputMentionChip() {
+  var existing = document.getElementById("input-mention-chip");
+  if (existing) existing.remove();
+}
+
+export function removeMentionChip() {
+  removeInputMentionChip();
+  selectedMateId = null;
+  selectedMateName = null;
+  if (ctx.inputEl) ctx.inputEl.focus();
+}
+
+function updateMentionHighlight() {
+  var menuEl = document.getElementById("mention-menu");
+  if (!menuEl) return;
+  menuEl.querySelectorAll(".mention-item").forEach(function (el, i) {
+    el.classList.toggle("active", i === mentionActiveIdx);
+  });
+  var activeEl = menuEl.querySelector(".mention-item.active");
+  if (activeEl) activeEl.scrollIntoView({ block: "nearest" });
+}
+
+// Store the @ position when check detects mention
+export function setMentionAtIdx(idx) {
+  mentionAtIdx = idx;
+}
+
+// --- Mention send ---
+// Returns { mateId, mateName, text } if input has an @mention, or null
+export function parseMentionFromInput(text) {
+  if (!selectedMateId || !selectedMateName) return null;
+  // The chip is shown separately; textarea contains only the message text
+  var mentionText = text.trim();
+  if (!mentionText) return null;
+  return { mateId: selectedMateId, mateName: selectedMateName, text: mentionText };
+}
+
+export function clearMentionState() {
+  selectedMateId = null;
+  selectedMateName = null;
+  mentionAtIdx = -1;
+  removeInputMentionChip();
+}
+
+export function sendMention(mateId, text) {
+  if (!ctx.ws || !ctx.connected) return;
+  ctx.ws.send(JSON.stringify({ type: "mention", mateId: mateId, text: text }));
+}
+
+// --- Mention response rendering ---
+
+// Recreate the mention block if it was lost (e.g. session switch)
+function ensureMentionBlock() {
+  if (currentMentionEl && currentMentionEl.parentNode) return; // still in DOM
+  if (!activeMentionMeta) return;
+  // Recreate from saved meta
+  handleMentionStart(activeMentionMeta);
+  // Re-render any accumulated text
+  if (mentionFullText) {
+    var contentEl = currentMentionEl.querySelector(".mention-content");
+    if (contentEl) {
+      contentEl.innerHTML = renderMarkdown(mentionFullText);
+      highlightCodeBlocks(contentEl);
+    }
+    // Hide activity bar since we have text
+    var bar = currentMentionEl.querySelector(".mention-activity-bar");
+    if (bar) bar.style.display = "none";
+  }
+}
+
+export function handleMentionStart(msg) {
+  // Save meta for potential reconnect after session switch
+  activeMentionMeta = {
+    mateId: msg.mateId,
+    mateName: msg.mateName,
+    avatarColor: msg.avatarColor,
+    avatarStyle: msg.avatarStyle,
+    avatarSeed: msg.avatarSeed,
+  };
+
+  var avatarSrc = buildMentionAvatarUrl(msg);
+
+  if (isMateDm()) {
+    // Mate DM: render as DM-style assistant message
+    currentMentionEl = document.createElement("div");
+    currentMentionEl.className = "msg-assistant msg-mention-dm";
+
+    var avi = document.createElement("img");
+    avi.className = "dm-bubble-avatar dm-bubble-avatar-mate";
+    avi.src = avatarSrc;
+    currentMentionEl.appendChild(avi);
+
+    var contentWrap = document.createElement("div");
+    contentWrap.className = "dm-bubble-content";
+
+    var header = document.createElement("div");
+    header.className = "dm-bubble-header";
+    var nameSpan = document.createElement("span");
+    nameSpan.className = "dm-bubble-name";
+    nameSpan.style.color = msg.avatarColor || "#6c5ce7";
+    nameSpan.textContent = msg.mateName || "Mate";
+    header.appendChild(nameSpan);
+
+    var badge = document.createElement("span");
+    badge.className = "mention-badge";
+    badge.textContent = "@MENTION";
+    header.appendChild(badge);
+    contentWrap.appendChild(header);
+
+    // Activity indicator
+    var activityDiv = document.createElement("div");
+    activityDiv.className = "activity-inline mention-activity-bar";
+    activityDiv.innerHTML =
+      '<span class="activity-icon">' + iconHtml("sparkles") + '</span>' +
+      '<span class="activity-text">Thinking...</span>';
+    contentWrap.appendChild(activityDiv);
+
+    // Content area for streamed markdown
+    var contentDiv = document.createElement("div");
+    contentDiv.className = "md-content mention-content";
+    contentDiv.dir = "auto";
+    contentWrap.appendChild(contentDiv);
+
+    currentMentionEl.appendChild(contentWrap);
+  } else {
+    // Project chat: mention block style
+    currentMentionEl = document.createElement("div");
+    currentMentionEl.className = "msg-mention";
+    currentMentionEl.style.setProperty("--mention-color", msg.avatarColor || "#6c5ce7");
+
+    var header = document.createElement("div");
+    header.className = "mention-header";
+
+    var avatar = document.createElement("img");
+    avatar.className = "mention-avatar";
+    avatar.src = avatarSrc;
+    avatar.width = 20;
+    avatar.height = 20;
+    header.appendChild(avatar);
+
+    var nameSpan = document.createElement("span");
+    nameSpan.className = "mention-name";
+    nameSpan.textContent = msg.mateName || "Mate";
+    header.appendChild(nameSpan);
+
+    currentMentionEl.appendChild(header);
+
+    // Activity indicator
+    var activityDiv = document.createElement("div");
+    activityDiv.className = "activity-inline mention-activity-bar";
+    activityDiv.innerHTML =
+      '<span class="activity-icon">' + iconHtml("sparkles") + '</span>' +
+      '<span class="activity-text">Thinking...</span>';
+    currentMentionEl.appendChild(activityDiv);
+
+    // Content area for streamed markdown
+    var contentDiv = document.createElement("div");
+    contentDiv.className = "md-content mention-content";
+    contentDiv.dir = "auto";
+    currentMentionEl.appendChild(contentDiv);
+  }
+
+  mentionFullText = "";
+  mentionStreamBuffer = "";
+
+  if (ctx.messagesEl) {
+    ctx.messagesEl.appendChild(currentMentionEl);
+    refreshIcons();
+    if (ctx.scrollToBottom) ctx.scrollToBottom();
+  }
+}
+
+export function handleMentionActivity(msg) {
+  ensureMentionBlock();
+  if (!currentMentionEl) return;
+  var bar = currentMentionEl.querySelector(".mention-activity-bar");
+  if (msg.activity) {
+    // Show or update activity
+    if (!bar) {
+      bar = document.createElement("div");
+      bar.className = "activity-inline mention-activity-bar";
+      bar.innerHTML =
+        '<span class="activity-icon">' + iconHtml("sparkles") + '</span>' +
+        '<span class="activity-text"></span>';
+      var contentEl = currentMentionEl.querySelector(".mention-content");
+      if (contentEl) {
+        currentMentionEl.insertBefore(bar, contentEl);
+      } else {
+        currentMentionEl.appendChild(bar);
+      }
+      refreshIcons();
+    }
+    var textEl = bar.querySelector(".activity-text");
+    if (textEl) {
+      textEl.textContent = msg.activity === "thinking" ? "Thinking..." : msg.activity;
+    }
+    bar.style.display = "";
+  } else {
+    if (bar) bar.style.display = "none";
+  }
+  if (ctx.scrollToBottom) ctx.scrollToBottom();
+}
+
+export function handleMentionStream(msg) {
+  ensureMentionBlock();
+  if (!currentMentionEl) return;
+
+  // Hide activity bar on first text delta
+  var bar = currentMentionEl.querySelector(".mention-activity-bar");
+  if (bar) bar.style.display = "none";
+
+  mentionStreamBuffer += msg.delta;
+  if (!mentionDrainTimer) {
+    mentionDrainTimer = requestAnimationFrame(drainMentionStream);
+  }
+}
+
+function drainMentionStream() {
+  mentionDrainTimer = null;
+  if (!currentMentionEl || mentionStreamBuffer.length === 0) return;
+
+  var len = mentionStreamBuffer.length;
+  var n;
+  if (len > 200) n = Math.ceil(len / 4);
+  else if (len > 80) n = 8;
+  else if (len > 30) n = 5;
+  else if (len > 10) n = 2;
+  else n = 1;
+
+  var chunk = mentionStreamBuffer.slice(0, n);
+  mentionStreamBuffer = mentionStreamBuffer.slice(n);
+  mentionFullText += chunk;
+
+  var contentEl = currentMentionEl.querySelector(".mention-content");
+  if (contentEl) {
+    contentEl.innerHTML = renderMarkdown(mentionFullText);
+    highlightCodeBlocks(contentEl);
+  }
+
+  if (ctx.scrollToBottom) ctx.scrollToBottom();
+
+  if (mentionStreamBuffer.length > 0) {
+    mentionDrainTimer = requestAnimationFrame(drainMentionStream);
+  }
+}
+
+function flushMentionStream() {
+  if (mentionDrainTimer) {
+    cancelAnimationFrame(mentionDrainTimer);
+    mentionDrainTimer = null;
+  }
+  if (mentionStreamBuffer.length > 0) {
+    mentionFullText += mentionStreamBuffer;
+    mentionStreamBuffer = "";
+  }
+  if (currentMentionEl) {
+    var contentEl = currentMentionEl.querySelector(".mention-content");
+    if (contentEl) {
+      contentEl.innerHTML = renderMarkdown(mentionFullText);
+      highlightCodeBlocks(contentEl);
+    }
+  }
+}
+
+export function handleMentionDone(msg) {
+  flushMentionStream();
+  // Hide activity bar
+  if (currentMentionEl) {
+    var bar = currentMentionEl.querySelector(".mention-activity-bar");
+    if (bar) bar.style.display = "none";
+    // Add copy handler so user can "click to grab this"
+    if (ctx.addCopyHandler && mentionFullText) {
+      ctx.addCopyHandler(currentMentionEl, mentionFullText);
+    }
+  }
+  currentMentionEl = null;
+  activeMentionMeta = null;
+  mentionFullText = "";
+  if (ctx.scrollToBottom) ctx.scrollToBottom();
+}
+
+export function handleMentionError(msg) {
+  flushMentionStream();
+  if (currentMentionEl) {
+    var bar = currentMentionEl.querySelector(".mention-activity-bar");
+    if (bar) bar.style.display = "none";
+    var contentEl = currentMentionEl.querySelector(".mention-content");
+    if (contentEl) {
+      contentEl.innerHTML = '<div class="mention-error">Error: ' + escapeHtml(msg.error || "Unknown error") + '</div>';
+    }
+  }
+  currentMentionEl = null;
+  activeMentionMeta = null;
+  mentionFullText = "";
+}
+
+// --- Helpers ---
+function isMateDm() {
+  return document.body.classList.contains("mate-dm-active");
+}
+
+function timeStr() {
+  var now = new Date();
+  return String(now.getHours()).padStart(2, "0") + ":" + String(now.getMinutes()).padStart(2, "0");
+}
+
+function buildMentionAvatarUrl(meta) {
+  return "https://api.dicebear.com/7.x/" + (meta.avatarStyle || "bottts") + "/svg?seed=" + encodeURIComponent(meta.avatarSeed || meta.mateId);
+}
+
+// --- History replay: render saved mention entries ---
+export function renderMentionUser(entry) {
+  // Render user message with @mention indicator
+  var div = document.createElement("div");
+  div.className = "msg-user";
+
+  var bubble = document.createElement("div");
+  bubble.className = "bubble";
+  bubble.dir = "auto";
+
+  var textEl = document.createElement("span");
+  textEl.innerHTML = '<span class="mention-chip">@' + escapeHtml(entry.mateName || "Mate") + '</span> ' + escapeHtml(entry.text || "");
+  bubble.appendChild(textEl);
+
+  // In Mate DM: use DM-style layout with avatar + name header
+  if (isMateDm() && document.body.dataset.myAvatarUrl) {
+    var avi = document.createElement("img");
+    avi.className = "dm-bubble-avatar dm-bubble-avatar-me";
+    avi.src = document.body.dataset.myAvatarUrl;
+    div.appendChild(avi);
+
+    var contentWrap = document.createElement("div");
+    contentWrap.className = "dm-bubble-content";
+
+    var header = document.createElement("div");
+    header.className = "dm-bubble-header";
+    var nameSpan = document.createElement("span");
+    nameSpan.className = "dm-bubble-name";
+    nameSpan.textContent = document.body.dataset.myDisplayName || "Me";
+    header.appendChild(nameSpan);
+    var ts = document.createElement("span");
+    ts.className = "dm-bubble-time";
+    ts.textContent = timeStr();
+    header.appendChild(ts);
+    contentWrap.appendChild(header);
+    contentWrap.appendChild(bubble);
+    div.appendChild(contentWrap);
+  } else {
+    div.appendChild(bubble);
+  }
+
+  if (ctx.messagesEl) ctx.messagesEl.appendChild(div);
+}
+
+export function renderMentionResponse(entry) {
+  var avatarSrc = buildMentionAvatarUrl(entry);
+
+  // In Mate DM: render as DM-style message (like assistant messages)
+  if (isMateDm()) {
+    var el = document.createElement("div");
+    el.className = "msg-assistant msg-mention-dm";
+
+    var avi = document.createElement("img");
+    avi.className = "dm-bubble-avatar dm-bubble-avatar-mate";
+    avi.src = avatarSrc;
+    el.appendChild(avi);
+
+    var contentWrap = document.createElement("div");
+    contentWrap.className = "dm-bubble-content";
+
+    var header = document.createElement("div");
+    header.className = "dm-bubble-header";
+    var nameSpan = document.createElement("span");
+    nameSpan.className = "dm-bubble-name";
+    nameSpan.style.color = entry.avatarColor || "#6c5ce7";
+    nameSpan.textContent = entry.mateName || "Mate";
+    header.appendChild(nameSpan);
+
+    var badge = document.createElement("span");
+    badge.className = "mention-badge";
+    badge.textContent = "@MENTION";
+    header.appendChild(badge);
+
+    var ts = document.createElement("span");
+    ts.className = "dm-bubble-time";
+    ts.textContent = timeStr();
+    header.appendChild(ts);
+    contentWrap.appendChild(header);
+
+    var contentDiv = document.createElement("div");
+    contentDiv.className = "md-content mention-content";
+    contentDiv.dir = "auto";
+    contentDiv.innerHTML = renderMarkdown(entry.text || "");
+    highlightCodeBlocks(contentDiv);
+    contentWrap.appendChild(contentDiv);
+    el.appendChild(contentWrap);
+
+    if (ctx.messagesEl) ctx.messagesEl.appendChild(el);
+  } else {
+    // Project chat: use mention block style
+    var el = document.createElement("div");
+    el.className = "msg-mention";
+    el.style.setProperty("--mention-color", entry.avatarColor || "#6c5ce7");
+
+    var mheader = document.createElement("div");
+    mheader.className = "mention-header";
+
+    var avatar = document.createElement("img");
+    avatar.className = "mention-avatar";
+    avatar.src = avatarSrc;
+    avatar.width = 20;
+    avatar.height = 20;
+    mheader.appendChild(avatar);
+
+    var mname = document.createElement("span");
+    mname.className = "mention-name";
+    mname.textContent = entry.mateName || "Mate";
+    mheader.appendChild(mname);
+
+    el.appendChild(mheader);
+
+    var contentDiv = document.createElement("div");
+    contentDiv.className = "md-content mention-content";
+    contentDiv.dir = "auto";
+    contentDiv.innerHTML = renderMarkdown(entry.text || "");
+    highlightCodeBlocks(contentDiv);
+    el.appendChild(contentDiv);
+
+    if (ctx.messagesEl) ctx.messagesEl.appendChild(el);
+  }
+
+  // Add copy handler
+  if (ctx.addCopyHandler && entry.text) {
+    ctx.addCopyHandler(el, entry.text);
+  }
+}

package/lib/public/modules/notifications.js

@@ -73,12 +73,18 @@ export function initNotifications(_ctx) {
     var layout = $("layout");
     var mobileTabBar = document.getElementById("mobile-tab-bar");
     function onViewportChange() {
-      layout.style.height = window.visualViewport.height + "px";
+      var vv = window.visualViewport;
+      // Shrink layout to visual viewport height so input area sits above keyboard
+      layout.style.height = vv.height + "px";
+      // Compensate for any vertical offset (iOS can shift the visual viewport)
+      layout.style.top = vv.offsetTop + "px";
       document.documentElement.scrollTop = 0;
-      ctx.scrollToBottom();
+      // Toggle class so CSS can remove the tab-bar bottom padding while keyboard is up
+      var keyboardOpen = vv.height < window.innerHeight - 100;
+      document.body.classList.toggle("keyboard-open", keyboardOpen);
+      if (!keyboardOpen) ctx.scrollToBottom();
       // Hide tab bar when software keyboard is open
       if (mobileTabBar) {
-        var keyboardOpen = window.visualViewport.height < window.innerHeight * 0.75;
         if (keyboardOpen) {
           mobileTabBar.classList.add("keyboard-hidden");
         } else {

package/lib/public/style.css

@@ -26,3 +26,4 @@
 @import url("css/tooltip.css");
 @import url("css/mates.css");
 @import url("css/command-palette.css");
+@import url("css/mention.css");