@decentnetwork/beagle 0.1.43 → 0.1.45

package/dist/desktop/app.js

@@ -1,4 +1,4 @@
-window.__DK_UI_VERSION="0.1.42";
+window.__DK_UI_VERSION="0.1.44";
 const ICON_PATHS = {
   // ---- tab bar (the four must feel like one set) ----
   users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
@@ -1317,7 +1317,7 @@ function PeerRow({ peer, T, active, onClick }) {
     textOverflow: "ellipsis",
     flex: 1,
     minWidth: 0
-  } }, peer.lastMsg))), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4, flexShrink: 0 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--faint)" } }, peer.lastTime), peer.unread ? /* @__PURE__ */ React.createElement(Unread, { n: peer.unread }) : peer.pending ? /* @__PURE__ */ React.createElement(Icon, { name: "clock", size: 11, stroke: 2.2, color: "var(--warn, #d29922)", title: "friend request pending" }) : /* @__PURE__ */ React.createElement(StatusDot, { online: peer.online })));
+  } }, dkContactPreview(peer.lastMsg) || peer.lastMsg))), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4, flexShrink: 0 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--faint)" } }, peer.lastTime), peer.unread ? /* @__PURE__ */ React.createElement(Unread, { n: peer.unread }) : peer.pending ? /* @__PURE__ */ React.createElement(Icon, { name: "clock", size: 11, stroke: 2.2, color: "var(--warn, #d29922)", title: "friend request pending" }) : /* @__PURE__ */ React.createElement(StatusDot, { online: peer.online })));
 }
 function PeerSidebar({ T, peers, requests, activeId, onSelect, onAct, onAdd, prefillAddr, onPrefillConsumed }) {
   const [q, setQ] = React.useState("");
@@ -1494,6 +1494,108 @@ function dkInlineMarkdown(s) {
   out += dkHtmlEscape(text.slice(last));
   return out;
 }
+function dkParseBeagleContact(raw) {
+  const text = String(raw == null ? "" : raw);
+  const fence = /```\s*beagle-contact\s*\n([\s\S]*?)\n```/i.exec(text);
+  if (fence) {
+    try {
+      const j = JSON.parse(fence[1].trim());
+      if (j && (j.type === "beagle_contact" || j.type === "beagle-contact")) {
+        return {
+          name: j.name || "",
+          ens: j.ens || "",
+          userid: j.userid || j.userId || "",
+          address: j.address || "",
+          avatar: j.avatar || j.avatarUrl || "",
+          description: j.description || ""
+        };
+      }
+    } catch (e) {
+    }
+  }
+  if (/^\s*BCR1\s+/i.test(text)) {
+    try {
+      const j = JSON.parse(text.replace(/^\s*BCR1\s+/i, "").trim());
+      if (j && j.type === "beagle_contact") {
+        return {
+          name: j.name || "",
+          ens: j.ens || "",
+          userid: j.userid || j.userId || "",
+          address: j.address || "",
+          avatar: j.avatar || "",
+          description: j.description || ""
+        };
+      }
+    } catch (e) {
+    }
+  }
+  return null;
+}
+function dkEncodeBeagleContact(p) {
+  const j = {
+    v: 1,
+    type: "beagle_contact",
+    name: p.name || "",
+    ens: p.ens || "",
+    userid: p.userid || "",
+    address: p.address || "",
+    avatar: p.avatar || "",
+    description: p.description || ""
+  };
+  const head = "**" + (p.name || p.ens || "Beagle user") + "**" + (p.ens ? " \xB7 `" + p.ens + "`" : "");
+  const bio = p.description ? "\n\n" + p.description : "";
+  const link = "\n\n[Open name card](https://app.beagle.chat/#/chat?address=" + encodeURIComponent(p.address || "") + ")";
+  return head + bio + link + "\n\n```beagle-contact\n" + JSON.stringify(j) + "\n```\n";
+}
+function dkContactPreview(text) {
+  const s = String(text == null ? "" : text);
+  if (!/beagle-contact|BCR1\s*\{/i.test(s))
+    return null;
+  const mine = /^you:\s*/i.test(s);
+  const card = dkParseBeagleContact(s.replace(/^you:\s*/i, ""));
+  const label = "\u{1F4C7} " + (card && (card.name || card.ens) || "name card");
+  return mine ? "you: " + label : label;
+}
+function DkContactCardMsg({ card, mine, T, onNameCard }) {
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => onNameCard && onNameCard(card),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 11,
+        padding: "10px 13px",
+        minWidth: 220,
+        maxWidth: 320,
+        borderRadius: 12,
+        border: "1px solid var(--line)",
+        cursor: "pointer",
+        textAlign: "left",
+        background: mine ? "var(--bub-me)" : "var(--bub-them)"
+      }
+    },
+    card.avatar ? /* @__PURE__ */ React.createElement(DkImgAvatar, { url: card.avatar, seed: card.userid || card.address || card.name, size: 40, radius: 10 }) : /* @__PURE__ */ React.createElement(DkEnsAvatar, { userid: card.userid || card.address, fallbackSeed: card.userid || card.address || card.name, size: 40, radius: 10 }),
+    /* @__PURE__ */ React.createElement("span", { style: { minWidth: 0, display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--ui)", fontSize: 13.5, fontWeight: 700, color: mine ? "#fff" : "var(--text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, card.name || card.ens || shortKey(card.userid || card.address, 8, 6)), card.ens && /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: mine ? "rgba(255,255,255,0.8)" : "var(--accent)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, card.ens), card.description && /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--ui)", fontSize: 11, color: mine ? "rgba(255,255,255,0.7)" : "var(--dim)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, card.description), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10, color: mine ? "rgba(255,255,255,0.6)" : "var(--faint)", marginTop: 2, textTransform: "uppercase", letterSpacing: 0.5 } }, T && T.nameCard || "name card", " \u203A"))
+  );
+}
+function dkAddressFromHref(href) {
+  try {
+    const u = new URL(String(href || ""), window.location.href);
+    const a = u.searchParams.get("address");
+    if (a && a.trim())
+      return a.trim();
+    const h = u.hash || "";
+    const qi = h.indexOf("?");
+    if (qi >= 0) {
+      const ha = new URLSearchParams(h.slice(qi + 1)).get("address");
+      if (ha && ha.trim())
+        return ha.trim();
+    }
+  } catch (e) {
+  }
+  return "";
+}
 function dkMarkdownHtml(src) {
   const lines = String(src == null ? "" : src).replace(/\r\n?/g, "\n").split("\n");
   let html = "";
@@ -1506,6 +1608,7 @@ function dkMarkdownHtml(src) {
       continue;
     }
     if (/^```/.test(line)) {
+      const lang = line.replace(/^```/, "").trim().toLowerCase();
       i += 1;
       const code = [];
       while (i < lines.length && !/^```/.test(lines[i])) {
@@ -1514,6 +1617,8 @@ function dkMarkdownHtml(src) {
       }
       if (i < lines.length)
         i += 1;
+      if (lang === "beagle-contact")
+        continue;
       html += "<pre><code>" + dkHtmlEscape(code.join("\n")) + "</code></pre>";
       continue;
     }
@@ -1709,8 +1814,23 @@ function dkNativeMediaFromText(text) {
   const name = String(j.fileName || "file") + ext;
   return { sender, kind, name, url: "data:" + mime + ";base64," + j.data.replace(/\s+/g, "") };
 }
-function MarkdownText({ text }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "dk-md", dangerouslySetInnerHTML: { __html: dkMarkdownHtml(text) } });
+function MarkdownText({ text, onNameCard }) {
+  const onClick = (e) => {
+    const a = e.target && e.target.closest && e.target.closest("a");
+    if (!a)
+      return;
+    const addr = dkAddressFromHref(a.getAttribute("href") || "");
+    if (!addr)
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+    const card = dkParseBeagleContact(text) || { address: addr };
+    if (!card.address)
+      card.address = addr;
+    if (onNameCard)
+      onNameCard(card);
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "dk-md", onClick, dangerouslySetInnerHTML: { __html: dkMarkdownHtml(text) } });
 }
 function DkChatForm({ form, submitted, peer, onSubmit }) {
   const items = form && form.components || [];
@@ -1882,7 +2002,7 @@ function DkChatForm({ form, submitted, peer, onSubmit }) {
     return null;
   }), err && /* @__PURE__ */ React.createElement("div", { style: { color: "var(--danger, #ff6b6b)", fontSize: 11.5, fontFamily: "var(--mono)" } }, err));
 }
-function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onOpenFile, onCall, onFormSubmit, answered, selMode, selected, onToggleSel, busy, isGroup }) {
+function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onOpenFile, onCall, onFormSubmit, onNameCard, answered, selMode, selected, onToggleSel, busy, isGroup }) {
   const mine = m.from === "me";
   const nativeMedia = !m.file ? dkNativeMediaFromText(m.text) : null;
   const grp = isGroup && m.dir !== "out" && !m.file && !nativeMedia ? dkGroupParse(m.text) : null;
@@ -1920,7 +2040,7 @@ function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onO
       justifyContent: "center"
     } }, selected && /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, stroke: 3, color: "#fff" })),
     !mine && (grpSender ? /* @__PURE__ */ React.createElement(DkGroupSender, { grp: grpSender, T, avatar: true }) : /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 24, radius: 6, dot: false })),
-    /* @__PURE__ */ React.createElement("div", { style: { maxWidth: m.file && (m.file.media === "image" || m.file.media === "video") || rtcFile && (rtcFile.media === "image" || rtcFile.media === "video") ? "min(680px, 88%)" : "64%", display: "flex", flexDirection: "column", alignItems: mine ? "flex-end" : "flex-start" } }, callRec ? /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { style: { maxWidth: m.file && (m.file.media === "image" || m.file.media === "video") || rtcFile && (rtcFile.media === "image" || rtcFile.media === "video") ? "min(680px, 88%)" : "75%", display: "flex", flexDirection: "column", alignItems: mine ? "flex-end" : "flex-start" } }, callRec ? /* @__PURE__ */ React.createElement(
       "button",
       {
         onClick: () => onCall && onCall(peer.userId, callRec.kind === "video"),
@@ -2168,23 +2288,26 @@ function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onO
           }
         }
       }
-    ) : nativeMedia.kind === "audio" ? /* @__PURE__ */ React.createElement("audio", { controls: true, src: nativeMedia.url, style: { maxWidth: "100%" } }) : /* @__PURE__ */ React.createElement("video", { controls: true, src: nativeMedia.url, style: { maxWidth: "100%", borderRadius: 12, border: "1px solid var(--line)" } })) : /* @__PURE__ */ React.createElement(React.Fragment, null, grp && /* @__PURE__ */ React.createElement(DkGroupSender, { grp, T }), /* @__PURE__ */ React.createElement("div", { style: {
-      padding: "8px 12px",
-      borderRadius: 12,
-      borderBottomRightRadius: mine ? 4 : 12,
-      borderBottomLeftRadius: mine ? 12 : 4,
-      // Incoming messages are tinted by delivery path so the split is
-      // visible: amber = arrived via the express relay (offline), plain =
-      // live online session. Outgoing keep the accent bubble.
-      background: mine ? "var(--bub-me)" : m.via === "offline" ? "rgba(245,158,11,0.16)" : "var(--bub-them)",
-      color: mine ? "#fff" : "var(--text)",
-      border: "1px solid " + (mine ? "transparent" : m.via === "offline" ? "rgba(245,158,11,0.55)" : "var(--line)"),
-      fontFamily: "var(--ui)",
-      fontSize: 13.5,
-      lineHeight: 1.4,
-      letterSpacing: -0.1,
-      wordBreak: "break-word"
-    } }, /* @__PURE__ */ React.createElement(MarkdownText, { text: read.text }))), read.form && /* @__PURE__ */ React.createElement("div", { style: { marginTop: 6 } }, /* @__PURE__ */ React.createElement(DkChatForm, { form: read.form, submitted, peer, onSubmit: onFormSubmit })), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 4, margin: "3px 3px 0" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10, color: "var(--faint)" } }, m.time), !mine && m.via && /* @__PURE__ */ React.createElement(
+    ) : nativeMedia.kind === "audio" ? /* @__PURE__ */ React.createElement("audio", { controls: true, src: nativeMedia.url, style: { maxWidth: "100%" } }) : /* @__PURE__ */ React.createElement("video", { controls: true, src: nativeMedia.url, style: { maxWidth: "100%", borderRadius: 12, border: "1px solid var(--line)" } })) : (() => {
+      const contact = !read.form ? dkParseBeagleContact(read.text) : null;
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, grp && /* @__PURE__ */ React.createElement(DkGroupSender, { grp, T }), contact && (contact.address || contact.userid) ? /* @__PURE__ */ React.createElement(DkContactCardMsg, { card: contact, mine, T, onNameCard }) : /* @__PURE__ */ React.createElement("div", { style: {
+        padding: "8px 12px",
+        borderRadius: 12,
+        borderBottomRightRadius: mine ? 4 : 12,
+        borderBottomLeftRadius: mine ? 12 : 4,
+        // Incoming messages are tinted by delivery path so the split is
+        // visible: amber = arrived via the express relay (offline), plain =
+        // live online session. Outgoing keep the accent bubble.
+        background: mine ? "var(--bub-me)" : m.via === "offline" ? "rgba(245,158,11,0.16)" : "var(--bub-them)",
+        color: mine ? "#fff" : "var(--text)",
+        border: "1px solid " + (mine ? "transparent" : m.via === "offline" ? "rgba(245,158,11,0.55)" : "var(--line)"),
+        fontFamily: "var(--ui)",
+        fontSize: 13.5,
+        lineHeight: 1.4,
+        letterSpacing: -0.1,
+        wordBreak: "break-word"
+      } }, /* @__PURE__ */ React.createElement(MarkdownText, { text: read.text, onNameCard })));
+    })(), read.form && /* @__PURE__ */ React.createElement("div", { style: { marginTop: 6 } }, /* @__PURE__ */ React.createElement(DkChatForm, { form: read.form, submitted, peer, onSubmit: onFormSubmit })), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 4, margin: "3px 3px 0" } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10, color: "var(--faint)" } }, m.time), !mine && m.via && /* @__PURE__ */ React.createElement(
       "span",
       {
         title: m.via === "offline" ? "delivered via express relay (offline)" : "delivered over a live session (online)",
@@ -2213,7 +2336,7 @@ function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onO
     ) : mine && m.status && /* @__PURE__ */ React.createElement(Icon, { name: "checkCheck", size: 12, stroke: 2.2, color: m.status === "read" ? "var(--accent)" : "var(--faint)" })))
   );
 }
-function Conversation({ T, peer, lang, thread: threadProp, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread }) {
+function Conversation({ T, peer, lang, peers, onOpenChat, thread: threadProp, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread }) {
   const scrollRef = React.useRef(null);
   const isGroup = React.useMemo(() => dkThreadIsGroup(threadProp), [threadProp]);
   const followScrollRef = React.useRef(true);
@@ -2221,6 +2344,7 @@ function Conversation({ T, peer, lang, thread: threadProp, onSend, onSendFile, o
   const rtcFileRef = React.useRef(null);
   const [menu, setMenu] = React.useState(false);
   const [pubProfile, setPubProfile] = React.useState(false);
+  const [nameCardProf, setNameCardProf] = React.useState(null);
   const [selMode, setSelMode] = React.useState(false);
   const [sel, setSel] = React.useState(() => /* @__PURE__ */ new Set());
   const [hidden, setHidden] = React.useState(() => /* @__PURE__ */ new Set());
@@ -2539,6 +2663,7 @@ ${peer.address}`
         onOpenFile: doOpenFile,
         onCall,
         onFormSubmit: () => onReloadThread && onReloadThread(),
+        onNameCard: (card) => setNameCardProf(card),
         answered,
         busy: m.id ? fileBusy[m.id] : void 0,
         selMode,
@@ -2640,7 +2765,24 @@ ${peer.address}`
         style: { maxWidth: "100%", maxHeight: "100%", objectFit: "contain", borderRadius: 6 }
       }
     ))),
-    pubProfile && /* @__PURE__ */ React.createElement(DkPublicProfile, { T, userid: peer.userId, fallbackName: peer.alias, isFriend: true, onClose: () => setPubProfile(false) })
+    pubProfile && /* @__PURE__ */ React.createElement(DkPublicProfile, { T, userid: peer.userId, fallbackName: peer.alias, isFriend: true, onClose: () => setPubProfile(false) }),
+    nameCardProf && (() => {
+      const cardFriend = (peers || []).find((p) => nameCardProf.userid && p.userId === nameCardProf.userid || nameCardProf.address && p.address === nameCardProf.address);
+      return /* @__PURE__ */ React.createElement(
+        DkPublicProfile,
+        {
+          T,
+          userid: cardFriend && cardFriend.userId || nameCardProf.userid || nameCardProf.address,
+          fallbackName: nameCardProf.name || nameCardProf.ens,
+          isFriend: !!cardFriend,
+          onMessage: cardFriend && onOpenChat ? () => {
+            onOpenChat(cardFriend.id);
+            setNameCardProf(null);
+          } : void 0,
+          onClose: () => setNameCardProf(null)
+        }
+      );
+    })()
   );
 }
 function MenuItem({ icon, label, onClick, danger }) {
@@ -2666,7 +2808,7 @@ function ChatEmpty({ T }) {
 }
 function ChatTab({ T, lang, peers, requests, activeId, thread, onSelect, onAct, onAdd, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread, prefillAddr, onPrefillConsumed }) {
   const peer = peers.find((p) => p.id === activeId);
-  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, display: "flex", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React.createElement(PeerSidebar, { T, peers, requests, activeId, onSelect, onAct, onAdd, prefillAddr, onPrefillConsumed }), peer ? /* @__PURE__ */ React.createElement(Conversation, { T, peer, lang, thread, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread }) : /* @__PURE__ */ React.createElement(ChatEmpty, { T }));
+  return /* @__PURE__ */ React.createElement("div", { style: { flex: 1, display: "flex", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React.createElement(PeerSidebar, { T, peers, requests, activeId, onSelect, onAct, onAdd, prefillAddr, onPrefillConsumed }), peer ? /* @__PURE__ */ React.createElement(Conversation, { T, peer, lang, peers, onOpenChat: onSelect, thread, onSend, onSendFile, onSendRtcFile, onAlias, onRemove, onOpenNet, onCall, onReloadThread }) : /* @__PURE__ */ React.createElement(ChatEmpty, { T }));
 }
 Object.assign(window, { ChatTab });
 function StatTile({ label, value, sub, tone }) {
@@ -3008,9 +3150,34 @@ function DkPunkPicker({ T, onPick, onClose }) {
     /* @__PURE__ */ React.createElement("img", { src: p.image, alt: `punk #${p.id}`, style: { width: "100%", height: "100%", imageRendering: "pixelated", display: "block" } })
   ))))));
 }
-function DkPublicProfile({ T, userid, fallbackName, onClose, isFriend, isMe }) {
+function DkPublicProfile({ T, userid, fallbackName, onClose, isFriend, isMe, onMessage }) {
   const [st, setSt] = React.useState({ loading: true });
   const [addState, setAddState] = React.useState(null);
+  const [recOpen, setRecOpen] = React.useState(false);
+  const [recPeers, setRecPeers] = React.useState(null);
+  const [recState, setRecState] = React.useState({});
+  const openRecommend = () => {
+    setRecOpen(true);
+    if (recPeers)
+      return;
+    fetch("/api/desktop").then((r) => r.json()).then((d) => {
+      const list = (d && d.peers || []).filter((p) => p.userId && p.userId !== userid && !p.pending);
+      setRecPeers(list);
+    }).catch(() => setRecPeers([]));
+  };
+  const recommendTo = (p) => {
+    const prof2 = st.prof || {};
+    const text = dkEncodeBeagleContact({
+      name: prof2.displayName || fallbackName || "",
+      ens: prof2.ens || "",
+      userid,
+      address: prof2.address || "",
+      avatar: prof2.avatarUrl || "",
+      description: prof2.description || ""
+    });
+    setRecState((s) => ({ ...s, [p.id]: "busy" }));
+    fetch("/api/chat-send", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ userid: p.userId, text }) }).then((r) => r.json()).then((r) => setRecState((s) => ({ ...s, [p.id]: r.ok !== false ? "sent" : r.error || "failed" }))).catch((e) => setRecState((s) => ({ ...s, [p.id]: String(e && e.message || e) })));
+  };
   const addFriend = (address) => {
     setAddState("busy");
     fetch("/api/add", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ address }) }).then((r) => r.json()).then((r) => setAddState(r.ok !== false ? "sent" : r.error || T.addFailed || "failed")).catch((e) => setAddState(String(e && e.message || e)));
@@ -3050,25 +3217,42 @@ function DkPublicProfile({ T, userid, fallbackName, onClose, isFriend, isMe }) {
   )))), (() => {
     const kvRow = (label, value, head = 8) => /* @__PURE__ */ React.createElement("div", { style: rowS, key: label }, /* @__PURE__ */ React.createElement("span", { style: lbl }, label), /* @__PURE__ */ React.createElement("span", { title: value, style: { flex: 1, minWidth: 0, fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--dim)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, shortKey(value, head, 6)), /* @__PURE__ */ React.createElement(CopyBtn, { value, copiedText: T.copied, copyFailedText: T.copyFailed, copyTitle: T.copy }));
     return /* @__PURE__ */ React.createElement(React.Fragment, null, prof.eth && kvRow("ethereum", prof.eth), prof.sol && kvRow("solana", prof.sol), kvRow(T.userId || "user id", userid, 10), prof.address && kvRow(T.addr || "address", prof.address));
-  })(), !isMe && !isFriend && prof.address && /* @__PURE__ */ React.createElement("div", { style: { ...rowS, justifyContent: "flex-end" } }, addState === "sent" ? /* @__PURE__ */ React.createElement(Tag, { tone: "accent" }, T.dirSent || "requested") : addState && addState !== "busy" ? /* @__PURE__ */ React.createElement("span", { title: addState, style: { fontFamily: "var(--ui)", fontSize: 11.5, color: "var(--warn, #f59e0b)" } }, T.addFailed || "failed") : /* @__PURE__ */ React.createElement(
+  })(), (() => {
+    const cta = { padding: "7px 16px", borderRadius: 9, cursor: "pointer", fontFamily: "var(--ui)", fontSize: 12.5 };
+    return /* @__PURE__ */ React.createElement("div", { style: { ...rowS, justifyContent: "flex-end", gap: 8 } }, !isMe && prof.address && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        onClick: openRecommend,
+        style: { ...cta, border: "1px solid var(--line)", background: "transparent", color: "var(--text)" }
+      },
+      T.pubRecommend || "Recommend"
+    ), isFriend && onMessage && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        onClick: onMessage,
+        style: { ...cta, border: "none", background: "var(--accent)", color: "#fff" }
+      },
+      T.pubMessage || "Message"
+    ), !isMe && !isFriend && prof.address && (addState === "sent" ? /* @__PURE__ */ React.createElement(Tag, { tone: "accent" }, T.dirSent || "requested") : addState && addState !== "busy" ? /* @__PURE__ */ React.createElement("span", { title: addState, style: { fontFamily: "var(--ui)", fontSize: 11.5, color: "var(--warn, #f59e0b)" } }, T.addFailed || "failed") : /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        onClick: () => addFriend(prof.address),
+        disabled: addState === "busy",
+        style: { ...cta, border: "none", background: "var(--accent)", color: "#fff", opacity: addState === "busy" ? 0.6 : 1 }
+      },
+      addState === "busy" ? "\u2026" : T.dirAdd || "Add"
+    )));
+  })(), recOpen && /* @__PURE__ */ React.createElement("div", { style: { borderTop: "1px solid var(--line)", paddingTop: 10, display: "flex", flexDirection: "column", gap: 4, maxHeight: 200, overflowY: "auto" } }, /* @__PURE__ */ React.createElement("span", { style: { ...lbl, width: "auto", paddingBottom: 4 } }, T.pubRecTitle || "send this card to\u2026"), !recPeers ? /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--ui)", fontSize: 12, color: "var(--faint)" } }, T.dirLoading || "loading\u2026") : recPeers.length === 0 ? /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--ui)", fontSize: 12, color: "var(--faint)" } }, T.dirEmpty || "nobody") : recPeers.map((p) => /* @__PURE__ */ React.createElement(
     "button",
     {
-      onClick: () => addFriend(prof.address),
-      disabled: addState === "busy",
-      style: {
-        padding: "7px 16px",
-        borderRadius: 9,
-        border: "none",
-        cursor: addState === "busy" ? "default" : "pointer",
-        background: "var(--accent)",
-        color: "#fff",
-        fontFamily: "var(--ui)",
-        fontSize: 12.5,
-        opacity: addState === "busy" ? 0.6 : 1
-      }
+      key: p.id,
+      onClick: () => !recState[p.id] && recommendTo(p),
+      style: { display: "flex", alignItems: "center", gap: 9, padding: "6px 8px", borderRadius: 9, border: "none", background: "transparent", cursor: recState[p.id] ? "default" : "pointer", textAlign: "left" }
     },
-    addState === "busy" ? "\u2026" : T.dirAdd || "Add"
-  )))));
+    /* @__PURE__ */ React.createElement(DkAvatar, { peer: p, size: 26, radius: 7, dot: false }),
+    /* @__PURE__ */ React.createElement("span", { style: { flex: 1, minWidth: 0, fontFamily: "var(--ui)", fontSize: 12.5, color: "var(--text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, p.alias || shortKey(p.userId, 8, 6)),
+    recState[p.id] === "sent" ? /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--ui)", fontSize: 11.5, color: "var(--online)" } }, T.pubRecSent || "sent \u2713") : recState[p.id] === "busy" ? /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--ui)", fontSize: 11.5, color: "var(--faint)" } }, "\u2026") : recState[p.id] ? /* @__PURE__ */ React.createElement("span", { title: recState[p.id], style: { fontFamily: "var(--ui)", fontSize: 11.5, color: "var(--warn, #f59e0b)" } }, T.addFailed || "failed") : /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--ui)", fontSize: 11.5, color: "var(--accent)" } }, T.send || "Send")
+  ))))));
 }
 function DkEnsCard({ T, me, onRecord }) {
   const [st, setSt] = React.useState({ loading: true });
@@ -4417,6 +4601,11 @@ const STR = {
     linkPlaceholder: "username or profile URL",
     save: "save",
     addr: "address",
+    nameCard: "name card",
+    pubMessage: "Message",
+    pubRecommend: "Recommend",
+    pubRecTitle: "send this card to\u2026",
+    pubRecSent: "sent \u2713",
     updTitle: "Update available",
     updLater: "Later",
     updNow: "Update now",
@@ -4581,6 +4770,11 @@ const STR = {
     linkPlaceholder: "\u7528\u6237\u540D\u6216\u4E3B\u9875\u94FE\u63A5",
     save: "\u4FDD\u5B58",
     addr: "\u5730\u5740",
+    nameCard: "\u540D\u7247",
+    pubMessage: "\u53D1\u6D88\u606F",
+    pubRecommend: "\u63A8\u8350",
+    pubRecTitle: "\u628A\u540D\u7247\u53D1\u9001\u7ED9\u2026",
+    pubRecSent: "\u5DF2\u53D1\u9001 \u2713",
     updTitle: "\u53D1\u73B0\u65B0\u7248\u672C",
     updLater: "\u7A0D\u540E",
     updNow: "\u7ACB\u5373\u66F4\u65B0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/beagle",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "description": "Beagle — P2P chat, file transfer and calls for regular users, on the Decent Network. No admin privilege required.",
   "type": "module",
   "main": "./dist/index.js",