@decentnetwork/beagle 0.1.15 → 0.1.17

package/dist/desktop/app.js

@@ -1,4 +1,4 @@
-window.__DK_UI_VERSION="0.1.15";
+window.__DK_UI_VERSION="0.1.16";
 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"/>',
@@ -1582,7 +1582,7 @@ function dkGroupParse(text) {
     return null;
   return { sender: split.sender, senderId: null, body: split.body.trim(), ts, strong: !!ts };
 }
-function DkGroupSender({ grp, T }) {
+function DkGroupSender({ grp, T, avatar }) {
   const [open, setOpen] = React.useState(false);
   const [busy, setBusy] = React.useState(false);
   const [done, setDone] = React.useState(null);
@@ -1591,18 +1591,25 @@ function DkGroupSender({ grp, T }) {
     setBusy(true);
     fetch("/api/add", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ address: grp.senderId }) }).then((r) => r.json()).then((r) => setDone(r.ok ? T && T.addSent || "request sent" : r.error || "failed")).catch((e) => setDone(String(e && e.message || e))).finally(() => setBusy(false));
   };
-  return /* @__PURE__ */ React.createElement("span", { style: { position: "relative", display: "inline-flex", alignItems: "center", gap: 5, margin: "0 3px 2px" } }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("span", { style: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 5,
+    margin: avatar ? 0 : "0 3px 2px",
+    alignSelf: avatar ? "flex-start" : void 0
+  } }, /* @__PURE__ */ React.createElement(
     "button",
     {
       onClick: () => setOpen((v) => !v),
+      title: grp.sender,
       style: { display: "inline-flex", alignItems: "center", gap: 5, background: "none", border: "none", padding: 0, cursor: "pointer" }
     },
-    /* @__PURE__ */ React.createElement(DkIdenticon, { seed, size: 16, radius: 4 }),
-    /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--faint)" } }, grp.sender)
+    avatar ? /* @__PURE__ */ React.createElement(DkIdenticon, { seed, size: 24, radius: 6 }) : /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--faint)" } }, grp.sender)
   ), open && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { onClick: () => setOpen(false), style: { position: "fixed", inset: 0, zIndex: 40 } }), /* @__PURE__ */ React.createElement("span", { style: {
     position: "absolute",
     left: 0,
-    top: 20,
+    top: avatar ? 28 : 20,
     zIndex: 50,
     width: 240,
     padding: 12,
@@ -1843,6 +1850,7 @@ function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onC
   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;
+  const grpSender = grp || (nativeMedia && nativeMedia.sender ? { sender: nativeMedia.sender, senderId: null } : null);
   const read = window.ChatComponents ? window.ChatComponents.readMessage((grp ? grp.body : m.text) || "") : { text: grp ? grp.body : m.text, form: null, interaction: null };
   const submitted = read.form && answered ? answered.get(read.form.custom_id) : null;
   const rtcFile = !mine && !m.file ? dkRtcFileFromText(peer.userId || peer.id, m.text) : null;
@@ -1875,7 +1883,7 @@ function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onC
       alignItems: "center",
       justifyContent: "center"
     } }, selected && /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, stroke: 3, color: "#fff" })),
-    !mine && /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 24, radius: 6, dot: false }),
+    !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(
       "button",
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/beagle",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "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",