clay-server 3.8.1 → 4.0.0-beta.10

package/lib/public/modules/app-dm.js

@@ -5,13 +5,15 @@ import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { getMessagesEl, getInputEl } from './dom-refs.js';
 import { userAvatarUrl, mateAvatarUrl } from './avatar.js';
+import { buildDmMessage, buildDmTypingIndicator } from './dm-render.js';
 import { connect } from './app-connection.js';
 import { resetClientState, renderProjectList, getCachedProjects } from './app-projects.js';
 import { scrollToBottom } from './app-rendering.js';
 import { autoResize } from './input.js';
 import { showDebateSticky } from './app-debate-ui.js';
 import { updateDmBadge, setCurrentDmUser, closeDmUserPicker } from './sidebar-mates.js';
-import { hideHomeHub } from './app-home-hub.js';
+import { hideHomeHub, showHomeHub } from './app-home-hub.js';
+import { openHomeChat } from './home-mate-chat.js';
 import { hideNotes } from './sticky-notes.js';
 import { showMateSidebar, hideMateSidebar } from './mate-sidebar.js';
 import { hideKnowledge } from './mate-knowledge.js';
@@ -72,6 +74,17 @@ export function initDm() {
 }
 
 export function openDm(targetUserId, opts) {
+  var mates = store.get('cachedMatesList') || [];
+  var isMateTarget = typeof targetUserId === "string" && targetUserId.indexOf("mate_") === 0;
+  for (var i = 0; i < mates.length && !isMateTarget; i++) {
+    if (mates[i] && mates[i].id === targetUserId) isMateTarget = true;
+  }
+  if (isMateTarget) {
+    if (store.get('projectMateDmsEnabled') === false) return;
+    showHomeHub();
+    openHomeChat(targetUserId);
+    return;
+  }
   var ws = getWs();
   if (!ws || ws.readyState !== 1) return;
   // Persist DM state for refresh recovery
@@ -138,6 +151,12 @@ function showMateOnboarding(callback) {
 
 export function enterDmMode(key, targetUser, messages) {
   console.log("[DEBUG enterDmMode] key=" + key, "isMate=" + (targetUser && targetUser.isMate), "messages=" + (messages ? messages.length : 0));
+  if (targetUser && targetUser.isMate) {
+    if (store.get('projectMateDmsEnabled') === false) return;
+    showHomeHub();
+    openHomeChat(targetUser.id);
+    return;
+  }
   var s = store.snap();
   // Clean up previous DM/mate state before entering new one
   if (s.dmMode) {
@@ -163,20 +182,6 @@ export function enterDmMode(key, targetUser, messages) {
 
   store.set({ dmMode: true, dmKey: key, dmTargetUser: targetUser });
 
-  // Notify server of active mate DM (server-side presence tracking)
-  // IMPORTANT: set_mate_dm must go to the MAIN project, not a mate project WS.
-  // When switching between mates, ws points to the current mate project,
-  // so we defer sending set_mate_dm until we reconnect to the main project's context.
-  // The server will also receive it via the mate project's onDmMessage handler,
-  // but the presence should only be stored on the main project slug.
-  if (targetUser && targetUser.isMate) {
-    var ws = getWs();
-    // Send to the current WS only if it's the main project (not another mate)
-    if (!store.get('mateProjectSlug') && ws && ws.readyState === 1) {
-      try { ws.send(JSON.stringify({ type: "set_mate_dm", mateId: targetUser.id })); } catch(e) {}
-    }
-  }
-
   // Clear unread for this user
   if (targetUser) {
     store.get('dmUnread')[targetUser.id] = 0;
@@ -380,76 +385,23 @@ export function exitDmMode(skipProjectSwitch) {
 
 export function handleMateCreatedInApp(mate, msg) {
   if (!mate) return;
-  var newMates = store.get('cachedMatesList').concat([mate]);
+  var newMates = (store.get('cachedMatesList') || []).filter(function (existing) { return existing && existing.id !== mate.id; }).concat([mate]);
   var updates = { cachedMatesList: newMates };
   if (msg && msg.availableBuiltins) updates.cachedAvailableBuiltins = msg.availableBuiltins;
   if (msg && msg.dmFavorites) updates.cachedDmFavorites = msg.dmFavorites;
   store.set(updates);
   // renderUserStrip is handled by the store subscriber
   // Built-in mates handle their own onboarding via CLAUDE.md, skip auto-interview
-  if (!mate.builtinKey) {
+  if (!mate.builtinKey && !(msg && msg.interviewComplete === true)) {
     store.set({ pendingMateInterview: mate });
   }
-  openDm(mate.id);
-}
-
-export function renderAvailableBuiltins(builtins) {
-  // Append deleted built-in mates to the mates list in the picker
-  var matesList = document.querySelector(".dm-mates-list");
-  if (!matesList) return;
-  if (!builtins || builtins.length === 0) return;
-
-  for (var i = 0; i < builtins.length; i++) {
-    (function (b) {
-      var item = document.createElement("div");
-      item.className = "dm-user-picker-item dm-user-picker-builtin-item";
-      item.style.opacity = "0.5";
-
-      var av = document.createElement("img");
-      av.className = "dm-user-picker-avatar";
-      av.src = b.avatarCustom || "";
-      av.alt = b.displayName;
-      item.appendChild(av);
-
-      var nameWrap = document.createElement("div");
-      nameWrap.style.cssText = "flex:1;min-width:0;";
-      var nameEl = document.createElement("span");
-      nameEl.className = "dm-user-picker-name";
-      nameEl.textContent = b.displayName;
-      nameWrap.appendChild(nameEl);
-      var bioEl = document.createElement("div");
-      bioEl.style.cssText = "font-size:11px;color:var(--text-dimmer);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;";
-      bioEl.textContent = "Deleted";
-      nameWrap.appendChild(bioEl);
-      item.appendChild(nameWrap);
-
-      var addBtn = document.createElement("button");
-      addBtn.style.cssText = "border:none;background:none;cursor:pointer;padding:2px 6px;color:var(--accent, #6366f1);font-size:12px;font-weight:600;";
-      addBtn.textContent = "+ Add";
-      addBtn.title = "Re-add " + b.displayName;
-      addBtn.addEventListener("click", function (e) {
-        e.stopPropagation();
-        var ws = getWs();
-        if (ws && ws.readyState === 1) {
-          ws.send(JSON.stringify({ type: "mate_readd_builtin", builtinKey: b.key }));
-        }
-        closeDmUserPicker();
-      });
-      item.appendChild(addBtn);
-
-      item.addEventListener("click", function () {
-        var ws = getWs();
-        if (ws && ws.readyState === 1) {
-          ws.send(JSON.stringify({ type: "mate_readd_builtin", builtinKey: b.key }));
-        }
-        closeDmUserPicker();
-      });
-
-      matesList.appendChild(item);
-    })(builtins[i]);
+  if (!(msg && msg.interviewComplete === true)) {
+    showHomeHub();
+    openHomeChat(mate.id);
   }
 }
 
+
 export function buildMateInterviewPrompt(mate) {
   var sd = mate.seedData || {};
   var parts = [];
@@ -536,78 +488,20 @@ export function appendDmMessage(msg) {
   var s = store.snap();
   if (s.dmMode) s.dmMessageCache.push(msg);
   var isMe = msg.from === s.myUserId;
-  var d = new Date(msg.ts);
-  var timeStr = d.getHours().toString().padStart(2, "0") + ":" + d.getMinutes().toString().padStart(2, "0");
-
   var messagesEl = getMessagesEl();
-  // Check if we can compact (same sender as previous, within 5 min)
-  var prev = messagesEl.lastElementChild;
-  var compact = false;
-  if (prev && prev.dataset.from === msg.from) {
-    var prevTs = parseInt(prev.dataset.ts || "0", 10);
-    if (msg.ts - prevTs < 300000) compact = true;
-  }
-
-  var div = document.createElement("div");
-  div.className = "dm-msg" + (compact ? " dm-msg-compact" : "");
-  div.dataset.from = msg.from;
-  div.dataset.ts = msg.ts;
-
-  if (compact) {
-    // Compact: just hover-time + text, no avatar/name
-    var hoverTime = document.createElement("span");
-    hoverTime.className = "dm-msg-hover-time";
-    hoverTime.textContent = timeStr;
-    div.appendChild(hoverTime);
-
-    var body = document.createElement("div");
-    body.className = "dm-msg-body";
-    body.textContent = msg.text;
-    div.appendChild(body);
-  } else {
-    // Full: avatar + header(name, time) + text
-    var avatar = document.createElement("img");
-    avatar.className = "dm-msg-avatar";
-    if (isMe) {
-      var myUser = s.cachedAllUsers.find(function (u) { return u.id === s.myUserId; });
-      avatar.src = userAvatarUrl(myUser || { id: s.myUserId }, 36);
-    } else if (s.dmTargetUser) {
-      avatar.src = userAvatarUrl(s.dmTargetUser, 36);
-    }
-    div.appendChild(avatar);
-
-    var content = document.createElement("div");
-    content.className = "dm-msg-content";
-
-    var header = document.createElement("div");
-    header.className = "dm-msg-header";
-
-    var name = document.createElement("span");
-    name.className = "dm-msg-name";
-    if (isMe) {
-      var mu = s.cachedAllUsers.find(function (u) { return u.id === s.myUserId; });
-      name.textContent = mu ? mu.displayName : "Me";
-    } else {
-      name.textContent = s.dmTargetUser ? s.dmTargetUser.displayName : "User";
-    }
-    header.appendChild(name);
-
-    var time = document.createElement("span");
-    time.className = "dm-msg-time";
-    time.textContent = timeStr;
-    header.appendChild(time);
-
-    content.appendChild(header);
-
-    var body = document.createElement("div");
-    body.className = "dm-msg-body";
-    body.textContent = msg.text;
-    content.appendChild(body);
-
-    div.appendChild(content);
-  }
-
-  messagesEl.appendChild(div);
+  var myUser = s.cachedAllUsers.find(function (user) { return user.id === s.myUserId; });
+  var avatarUrl = isMe
+    ? userAvatarUrl(myUser || { id: s.myUserId }, 36)
+    : (s.dmTargetUser ? userAvatarUrl(s.dmTargetUser, 36) : "");
+  var displayName = isMe
+    ? (myUser ? myUser.displayName : "Me")
+    : (s.dmTargetUser ? s.dmTargetUser.displayName : "User");
+  messagesEl.appendChild(buildDmMessage(msg, {
+    container: messagesEl,
+    isMe: isMe,
+    avatarUrl: avatarUrl,
+    displayName: displayName,
+  }));
 }
 
 export function showDmTypingIndicator(typing) {
@@ -620,22 +514,11 @@ export function showDmTypingIndicator(typing) {
   var dmTargetUser = store.get('dmTargetUser');
   if (!dmTargetUser) return;
 
-  var div = document.createElement("div");
-  div.id = "dm-typing-indicator";
-  div.className = "dm-msg dm-typing-indicator";
-
-  var avatar = document.createElement("img");
-  avatar.className = "dm-msg-avatar";
-  avatar.src = userAvatarUrl(dmTargetUser, 36);
-  div.appendChild(avatar);
-
-  var dots = document.createElement("div");
-  dots.className = "dm-typing-dots";
-  dots.innerHTML = "<span></span><span></span><span></span>";
-  div.appendChild(dots);
-
   var messagesEl = getMessagesEl();
-  messagesEl.appendChild(div);
+  messagesEl.appendChild(buildDmTypingIndicator({
+    id: "dm-typing-indicator",
+    avatarUrl: userAvatarUrl(dmTargetUser, 36),
+  }));
   scrollToBottom();
 
   // Auto-hide after 5s in case stop signal is missed