feat(messenger): reactions, replies, typing, seen ticks + UX fixes

Wire the IIOS kernel client's existing realtime affordances into the Messenger UI and fix three display issues. - Bubble contrast: incoming bubbles used --panel-2, which equals --bg in the dark theme (both #060608) → invisible. Use --panel + a border. - DM title: mapped all participants (incl. self → unknown-id fallback), producing "User d10888, Maaz Ahmed". Now shows the counterpart only. - Live sidebar preview: lastMessage/time update on any inbound socket message, reconciled with a debounced conversation-list refetch. - Typing indicator: throttled typing() send + auto-expiring "typing…" line. - Read receipts: markRead() on open/new message; "Sent"/"Seen" under the last outgoing message. Receipt event carries no threadId, so it is a global stream filtered to my own messages by actor id. - Reactions: emoji picker on hover, chips with counts, live via annotation. - Reply/quote: parentInteractionId round-trips; quoted parent renders above the reply and in a composer quote bar. Presence (online + last-seen) is intentionally not included — the kernel has no presence receive-event yet; that needs an IIOS change + client release. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-16 16:52:29 +05:30
parent 2056592d51
commit adb5a6bb7b
3 changed files with 368 additions and 73 deletions
@@ -6,14 +6,14 @@
 // thread view + composer, with a "new chat" people picker that
 // creates a DM (1 person) or group (2+). DM-vs-group and who-can-
 // chat are enforced server-side by IIOS/OPA; this is just UI.
-// Data comes from useMessengerData()/useThread(): local mock when
-// the Shell isn't configured, live be-crm when it is.
+// Live messages, typing, read receipts and reactions come over the
+// IIOS socket (Shell mode); mock keeps the demo working offline.
 // ============================================================

-import { type CSSProperties, useEffect, useRef, useState } from "react";
+import { type CSSProperties, useEffect, useMemo, useRef, useState } from "react";
 import { Avatar, Btn, Field, Icon, Modal, PageHead, Pill, useToast } from "./ui";
-import { useMessengerData, useThread, type Membership, type UiConversation, type UiPerson } from "@/lib/messenger-api";
-import { MessengerSocketProvider } from "@/lib/messenger-socket";
+import { useMessengerData, useThread, type Membership, type UiConversation, type UiMessage, type UiPerson } from "@/lib/messenger-api";
+import { MessengerSocketProvider, useMessengerSocket } from "@/lib/messenger-socket";

 const initialsOf = (name: string) =>
  name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase() || "?";
@@ -24,6 +24,7 @@ const timeOf = (iso?: string) => {
 };
 const GROUP_GRAD = "linear-gradient(135deg,#6366f1,#8b5cf6)";
 const CUSTOMER_GRAD = "linear-gradient(135deg,#10b981,#059669)";
+const REACTION_EMOJIS = ["👍", "❤️", "😂", "😮", "😢", "🎉"];
 const inputStyle: CSSProperties = {
  width: "100%", padding: "9px 12px", borderRadius: 10, border: "1px solid var(--border)",
  background: "var(--panel)", color: "var(--text)", fontSize: 14, outline: "none",
@@ -77,7 +78,7 @@ function MessengerPanel() {

        <section style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
          {current ? (
-            <ThreadView key={current.threadId} conv={current} onError={(msg) => toast.push({ tone: "error", title: "Message failed", desc: msg })} />
+            <ThreadView key={current.threadId} conv={current} nameOf={m.nameOf} onError={(msg) => toast.push({ tone: "error", title: "Message failed", desc: msg })} />
          ) : (
            <div style={{ margin: "auto", color: "var(--muted)", textAlign: "center" }}>
              <Icon name="send" size={38} />
@@ -117,36 +118,55 @@ function ConversationRow({ c, active, onClick }: { c: UiConversation; active: bo
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center" }}>
          <span style={{ fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.title}</span>
-          {c.membership === "group" && <Pill tone="muted">group</Pill>}
+          <span style={{ color: "var(--muted)", fontSize: 11, flexShrink: 0 }}>{timeOf(c.lastAt)}</span>
        </div>
-        <div style={{ color: "var(--muted)", fontSize: 12.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
-          {c.lastMessage ?? "No messages yet"}
+        <div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center" }}>
+          <span style={{ color: "var(--muted)", fontSize: 12.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+            {c.lastMessage ?? "No messages yet"}
+          </span>
+          {c.unread > 0 && (
+            <span style={{ background: "var(--orange)", color: "#fff", borderRadius: 999, fontSize: 11, padding: "1px 7px", flexShrink: 0 }}>{c.unread}</span>
+          )}
        </div>
      </div>
-      {c.unread > 0 && (
-        <span style={{ background: "var(--orange)", color: "#fff", borderRadius: 999, fontSize: 11, padding: "1px 7px" }}>{c.unread}</span>
-      )}
    </button>
  );
 }

-function ThreadView({ conv, onError }: { conv: UiConversation; onError: (m: string) => void }) {
+function ThreadView({ conv, nameOf, onError }: { conv: UiConversation; nameOf: (id: string) => string; onError: (m: string) => void }) {
  const t = useThread(conv.threadId);
+  const socket = useMessengerSocket();
  const [draft, setDraft] = useState("");
  const [sending, setSending] = useState(false);
+  const [replyTo, setReplyTo] = useState<UiMessage | null>(null);
  const endRef = useRef<HTMLDivElement>(null);
+  const typingSentAt = useRef(0);

  useEffect(() => { endRef.current?.scrollIntoView({ behavior: "smooth" }); }, [t.messages.length]);

+  const byId = useMemo(() => Object.fromEntries(t.messages.map((m) => [m.id, m])), [t.messages]);
+  const lastMineId = useMemo(() => [...t.messages].reverse().find((m) => m.mine)?.id ?? null, [t.messages]);
+
+  function onDraftChange(v: string) {
+    setDraft(v);
+    const now = Date.now();
+    if (socket && now - typingSentAt.current > 2000) { socket.sendTyping(conv.threadId); typingSentAt.current = now; }
+  }
+
  async function submit() {
    const text = draft.trim();
    if (!text || sending) return;
-    setDraft(""); setSending(true);
-    try { await t.send(text); }
+    const parent = replyTo?.id;
+    setDraft(""); setReplyTo(null); setSending(true);
+    try { await t.send(text, parent ? { parentInteractionId: parent } : undefined); }
    catch (e) { setDraft(text); onError((e as Error).message); }
    finally { setSending(false); }
  }

+  const typingLabel = t.typingUserIds.length === 1
+    ? `${nameOf(t.typingUserIds[0])} is typing…`
+    : t.typingUserIds.length > 1 ? "Several people are typing…" : "";
+
  return (
    <>
      <header style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 18px", borderBottom: "1px solid var(--border)" }}>
@@ -159,28 +179,37 @@ function ThreadView({ conv, onError }: { conv: UiConversation; onError: (m: stri
        </div>
      </header>

-      <div style={{ flex: 1, overflowY: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 8, background: "var(--bg)" }}>
+      <div style={{ flex: 1, overflowY: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 10, background: "var(--bg)" }}>
        {t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>Loading messages…</div>}
        {!t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>No messages yet — say hello 👋</div>}
        {t.messages.map((msg) => (
-          <div key={msg.id} style={{ alignSelf: msg.mine ? "flex-end" : "flex-start", maxWidth: "72%" }}>
-            <div style={{
-              background: msg.mine ? "var(--grad-brand)" : "var(--panel-2)", color: msg.mine ? "#fff" : "var(--text)",
-              padding: "8px 12px", borderRadius: 14,
-              borderBottomRightRadius: msg.mine ? 4 : 14, borderBottomLeftRadius: msg.mine ? 14 : 4,
-              whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 14,
-            }}>
-              {msg.text}
-            </div>
-            <div style={{ fontSize: 10.5, color: "var(--muted)", textAlign: msg.mine ? "right" : "left", marginTop: 2 }}>{timeOf(msg.at)}</div>
-          </div>
+          <MessageBubble
+            key={msg.id} msg={msg}
+            parent={msg.parentInteractionId ? byId[msg.parentInteractionId] : undefined}
+            seen={msg.id === lastMineId && t.seenIds.has(msg.id)}
+            showStatus={msg.id === lastMineId}
+            onReact={(emoji) => t.react(msg.id, emoji)}
+            onReply={() => setReplyTo(msg)}
+          />
        ))}
        <div ref={endRef} />
      </div>

+      <div style={{ minHeight: 18, padding: "0 18px", color: "var(--muted)", fontSize: 12, fontStyle: "italic" }}>{typingLabel}</div>
+
+      {replyTo && (
+        <div style={{ display: "flex", alignItems: "center", gap: 10, margin: "0 14px", padding: "8px 12px", borderRadius: 10, background: "var(--panel-2)", borderLeft: "3px solid var(--orange)" }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ fontSize: 11, color: "var(--orange)", fontWeight: 600 }}>Replying to {replyTo.mine ? "yourself" : nameOf(replyTo.senderId ?? "")}</div>
+            <div style={{ fontSize: 12.5, color: "var(--muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{replyTo.text}</div>
+          </div>
+          <button onClick={() => setReplyTo(null)} style={{ background: "none", border: "none", color: "var(--muted)", cursor: "pointer", fontSize: 16 }} aria-label="Cancel reply">×</button>
+        </div>
+      )}
+
      <footer style={{ display: "flex", gap: 8, padding: 14, borderTop: "1px solid var(--border)" }}>
        <input
-          value={draft} onChange={(e) => setDraft(e.target.value)}
+          value={draft} onChange={(e) => onDraftChange(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void submit(); } }}
          placeholder="Type a message…" style={inputStyle}
        />
@@ -190,6 +219,81 @@ function ThreadView({ conv, onError }: { conv: UiConversation; onError: (m: stri
  );
 }

+function MessageBubble({
+  msg, parent, seen, showStatus, onReact, onReply,
+}: {
+  msg: UiMessage; parent?: UiMessage; seen: boolean; showStatus: boolean;
+  onReact: (emoji: string) => void; onReply: () => void;
+}) {
+  const [hover, setHover] = useState(false);
+  const [picker, setPicker] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => { setHover(false); setPicker(false); }}
+      style={{ alignSelf: msg.mine ? "flex-end" : "flex-start", maxWidth: "72%", display: "flex", flexDirection: "column", alignItems: msg.mine ? "flex-end" : "flex-start", position: "relative" }}
+    >
+      {parent && (
+        <div style={{ maxWidth: "100%", padding: "4px 10px", marginBottom: 3, borderRadius: 8, background: "var(--panel-2)", borderLeft: "3px solid var(--orange)", fontSize: 12, color: "var(--muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+          <span style={{ opacity: 0.8 }}>↩ {parent.text}</span>
+        </div>
+      )}
+
+      <div style={{ display: "flex", alignItems: "center", gap: 6, flexDirection: msg.mine ? "row-reverse" : "row" }}>
+        <div style={{
+          background: msg.mine ? "var(--grad-brand)" : "var(--panel)", color: msg.mine ? "#fff" : "var(--text)",
+          padding: "8px 12px", borderRadius: 14,
+          borderBottomRightRadius: msg.mine ? 4 : 14, borderBottomLeftRadius: msg.mine ? 14 : 4,
+          border: msg.mine ? "none" : "1px solid var(--border)",
+          whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 14,
+        }}>
+          {msg.text}
+        </div>
+        {hover && (
+          <div style={{ display: "flex", gap: 2, position: "relative" }}>
+            <button onClick={() => setPicker((p) => !p)} title="React" style={actionBtnStyle}>🙂</button>
+            <button onClick={onReply} title="Reply" style={actionBtnStyle}>↩</button>
+            {picker && (
+              <div style={{ position: "absolute", bottom: "100%", [msg.mine ? "right" : "left"]: 0, marginBottom: 4, display: "flex", gap: 2, padding: 4, borderRadius: 999, background: "var(--panel)", border: "1px solid var(--border)", boxShadow: "0 6px 20px rgba(0,0,0,0.35)", zIndex: 5 }}>
+                {REACTION_EMOJIS.map((e) => (
+                  <button key={e} onClick={() => { onReact(e); setPicker(false); }} style={{ ...actionBtnStyle, fontSize: 16 }}>{e}</button>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {msg.reactions && msg.reactions.length > 0 && (
+        <div style={{ display: "flex", gap: 4, marginTop: 3, flexWrap: "wrap" }}>
+          {msg.reactions.map((r) => (
+            <button
+              key={r.emoji} onClick={() => onReact(r.emoji)}
+              style={{
+                display: "inline-flex", alignItems: "center", gap: 3, padding: "1px 7px", borderRadius: 999, fontSize: 12, cursor: "pointer",
+                background: r.mine ? "rgba(253,169,19,0.18)" : "var(--panel-2)",
+                border: `1px solid ${r.mine ? "var(--orange)" : "var(--border)"}`, color: "var(--text)",
+              }}
+            >
+              <span>{r.emoji}</span><span style={{ color: "var(--muted)" }}>{r.count}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div style={{ fontSize: 10.5, color: "var(--muted)", marginTop: 2 }}>
+        {timeOf(msg.at)}{showStatus && msg.mine ? ` · ${seen ? "Seen" : "Sent"}` : ""}
+      </div>
+    </div>
+  );
+}
+
+const actionBtnStyle: CSSProperties = {
+  background: "var(--panel-2)", border: "1px solid var(--border)", borderRadius: 8,
+  width: 26, height: 26, display: "grid", placeItems: "center", cursor: "pointer", fontSize: 13, color: "var(--text)", padding: 0,
+};
+
 function NewChatModal({
  open, onClose, directory, onCreate,
 }: {