clay-server 2.17.0 → 2.18.0-beta.10

package/lib/public/css/mention.css

@@ -0,0 +1,226 @@
+/* ==========================================================================
+   @Mention Autocomplete Dropdown
+   ========================================================================== */
+
+#mention-menu {
+  display: none;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  max-height: 240px;
+  overflow-y: auto;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  margin-bottom: 8px;
+  box-shadow: 0 -4px 24px rgba(var(--shadow-rgb), 0.4);
+  z-index: 10;
+}
+
+#mention-menu.visible { display: block; }
+
+.mention-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  cursor: pointer;
+  gap: 10px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.mention-item:last-child { border-bottom: none; }
+
+.mention-item:hover,
+.mention-item.active {
+  background: rgba(var(--overlay-rgb), 0.05);
+}
+
+.mention-item-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.mention-item-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  flex: 1;
+}
+
+.mention-item-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* ==========================================================================
+   @Mention Chip (in user bubble)
+   ========================================================================== */
+
+.mention-chip {
+  display: inline;
+  color: var(--accent);
+  font-weight: 600;
+  background: rgba(var(--accent-rgb, 124, 58, 237), 0.12);
+  padding: 1px 5px;
+  border-radius: 4px;
+  font-size: inherit;
+}
+
+/* ==========================================================================
+   @Mention Chip (in input area)
+   ========================================================================== */
+
+#input-mention-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 6px 3px 4px;
+  margin: 0 0 4px 0;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--chip-color, #6c5ce7) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--chip-color, #6c5ce7) 25%, transparent);
+  cursor: default;
+  flex-shrink: 0;
+  width: fit-content;
+  animation: chip-in 0.15s ease-out;
+}
+
+@keyframes chip-in {
+  from { opacity: 0; transform: scale(0.9); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+.input-mention-chip-avatar {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.input-mention-chip-name {
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.input-mention-chip-remove {
+  background: none;
+  border: none;
+  padding: 0 2px;
+  margin: 0;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--text-dimmer);
+  opacity: 0.6;
+  transition: opacity 0.1s;
+}
+
+.input-mention-chip-remove:hover {
+  opacity: 1;
+}
+
+/* ==========================================================================
+   @Mention Response Block
+   ========================================================================== */
+
+.msg-mention {
+  position: relative;
+  max-width: var(--content-width);
+  margin: 0 auto 24px;
+  padding: 4px 20px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--mention-color, #6c5ce7) 6%, transparent);
+  transition: background 0.15s;
+}
+
+.msg-mention:hover {
+  background: color-mix(in srgb, var(--mention-color, #6c5ce7) 10%, transparent);
+}
+
+.mention-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.mention-avatar {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.mention-name {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--mention-color, #6c5ce7);
+}
+
+.mention-content {
+  font-size: 15px;
+  line-height: 1.7;
+  word-break: break-word;
+  color: var(--text);
+}
+
+/* Activity bar inside mention block */
+.msg-mention .mention-activity-bar {
+  margin: 4px 0;
+  padding: 0;
+}
+
+/* Copy hint ("Click to grab this") for mention blocks in project chat */
+.msg-mention:hover .msg-copy-hint { opacity: 1; }
+.msg-mention.copy-primed .msg-copy-hint { opacity: 1; color: var(--accent); }
+.msg-mention.copy-done .msg-copy-hint { opacity: 1; color: var(--success); }
+
+/* ==========================================================================
+   @Mention in Mate DM (DM-style layout)
+   ========================================================================== */
+
+/* Badge next to mate name */
+.mention-badge {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  color: var(--text-dimmer);
+  background: rgba(var(--overlay-rgb), 0.08);
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+
+/* DM-style mention: override the DM mate avatar so it uses the mentioned mate's avatar */
+.msg-mention-dm .dm-bubble-avatar-mate {
+  /* Inherits dm-bubble-avatar styling from mates.css */
+}
+
+/* Activity bar inside DM-style mention */
+.msg-mention-dm .mention-activity-bar {
+  margin: 4px 0;
+  padding: 0;
+}
+
+/* Error state */
+.mention-error {
+  color: var(--danger, #e74c3c);
+  font-size: 13px;
+  font-style: italic;
+}
+
+/* ==========================================================================
+   Mobile adjustments
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  .msg-mention {
+    max-width: 100%;
+    padding: 4px 12px;
+  }
+}

package/lib/public/css/sidebar.css

@@ -1041,6 +1041,13 @@
 #layout.sidebar-collapsed #user-island .user-island-actions {
   display: none;
 }
+/* Keep user island expanded in mate DM mode regardless of sidebar state */
+body.mate-dm-active #layout.sidebar-collapsed #user-island .user-island-info {
+  display: block;
+}
+body.mate-dm-active #layout.sidebar-collapsed #user-island .user-island-actions {
+  display: flex;
+}
 
 
 

package/lib/public/index.html

@@ -384,6 +384,7 @@
     <button id="new-msg-btn" class="hidden" aria-label="Scroll to bottom"></button>
     <div id="input-area">
       <div id="input-wrapper">
+        <div id="mention-menu"></div>
         <div id="slash-menu"></div>
         <div id="suggestion-chips" class="hidden"></div>
         <div id="input-row">

package/lib/public/modules/input.js

@@ -1,5 +1,6 @@
 import { iconHtml, refreshIcons } from './icons.js';
 import { setRewindMode, isRewindMode } from './rewind.js';
+import { checkForMention, showMentionMenu, hideMentionMenu, isMentionMenuVisible, mentionMenuKeydown, setMentionAtIdx, parseMentionFromInput, clearMentionState, sendMention, renderMentionUser, removeMentionChip } from './mention.js';
 
 var ctx;
 
@@ -86,6 +87,24 @@ export function sendMessage() {
     return;
   }
 
+  // Check for @mention: if a mate was selected, route to mention handler
+  var mention = parseMentionFromInput(text);
+  if (mention) {
+    hideMentionMenu();
+    if (ctx.hideSuggestionChips) ctx.hideSuggestionChips();
+    var mentionPastes = pendingPastes.map(function (p) { return p.text; });
+    // Render user message with mention chip (same as history replay)
+    renderMentionUser({ mateName: mention.mateName, text: mention.text });
+    sendMention(mention.mateId, mention.text, mentionPastes);
+    clearMentionState();
+    ctx.inputEl.value = "";
+    sendInputSync();
+    clearPendingImages();
+    autoResize();
+    ctx.inputEl.focus();
+    return;
+  }
+
   // Prepend file paths to text
   var files = pendingFiles.slice();
   if (files.length > 0) {
@@ -603,10 +622,20 @@ export function initInput(_ctx) {
     var val = ctx.inputEl.value;
     if (val.startsWith("/") && !val.includes(" ") && val.length > 1) {
       showSlashMenu(val.substring(1));
+      hideMentionMenu();
     } else if (val === "/") {
       showSlashMenu("");
+      hideMentionMenu();
     } else {
       hideSlashMenu();
+      // Check for @mention
+      var mentionCheck = checkForMention(val, ctx.inputEl.selectionStart);
+      if (mentionCheck.active) {
+        setMentionAtIdx(mentionCheck.startIdx);
+        showMentionMenu(mentionCheck.query);
+      } else {
+        hideMentionMenu();
+      }
     }
     // Toggle send/stop button based on input content during processing
     if (ctx.processing && ctx.setSendBtnMode) {
@@ -618,6 +647,11 @@ export function initInput(_ctx) {
   ctx.inputEl.addEventListener("compositionend", function () { isComposing = false; });
 
   ctx.inputEl.addEventListener("keydown", function (e) {
+    // @Mention menu keyboard navigation
+    if (isMentionMenuVisible()) {
+      if (mentionMenuKeydown(e)) return;
+    }
+
     if (slashFiltered.length > 0 && ctx.slashMenu.classList.contains("visible")) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
@@ -643,6 +677,13 @@ export function initInput(_ctx) {
       }
     }
 
+    // Backspace on empty input: remove mention chip if present
+    if (e.key === "Backspace" && ctx.inputEl.value === "" && document.getElementById("input-mention-chip")) {
+      e.preventDefault();
+      removeMentionChip();
+      return;
+    }
+
     // Ctrl+J: insert newline (like Claude CLI)
     if (e.key === "j" && e.ctrlKey && !e.metaKey) {
       e.preventDefault();