@decentnetwork/beagle 0.1.12 → 0.1.14

package/dist/desktop/app.js

@@ -1,4 +1,4 @@
-window.__DK_UI_VERSION="0.1.12";
+window.__DK_UI_VERSION="0.1.14";
 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"/>',
@@ -1528,6 +1528,144 @@ function dkMarkdownHtml(src) {
   }
   return html || dkHtmlEscape(src);
 }
+const DK_NATIVE_MEDIA_MIME = {
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".png": "image/png",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".heic": "image/heic",
+  ".m4a": "audio/mp4",
+  ".aac": "audio/aac",
+  ".mp3": "audio/mpeg",
+  ".wav": "audio/wav",
+  ".caf": "audio/x-caf",
+  ".mp4": "video/mp4",
+  ".mov": "video/quicktime",
+  ".m4v": "video/x-m4v"
+};
+const DK_GROUP_TS_RE = /\n?\[(20\d{2}-\d{1,2}-\d{1,2}\s+\d{1,2}:\d{2}:\d{2})\]\s*$/;
+function dkStripGroupTs(text) {
+  const m = DK_GROUP_TS_RE.exec(text);
+  return m ? { body: text.slice(0, m.index), ts: m[1] } : { body: text, ts: null };
+}
+function dkSplitGroupSender(text) {
+  const m = /^([^:\n]{1,48}):\s([\s\S]+)$/.exec(text);
+  return m ? { sender: m[1], body: m[2] } : null;
+}
+function dkParseCGP1(text) {
+  const t = String(text || "").trim();
+  if (!t.startsWith("CGP1 "))
+    return null;
+  let j = null;
+  try {
+    j = JSON.parse(t.slice(5));
+  } catch (e) {
+    return null;
+  }
+  if (!j || j.type !== "carrier_group_message" || j.chat_type !== "group")
+    return null;
+  const origin = j.origin || {};
+  const senderId = origin.userid || origin.friendid || null;
+  const sender = origin.nickname || origin.user_info && origin.user_info.name || (senderId ? senderId.slice(0, 10) : "member");
+  const body = j.message && j.message.text || j.render && j.render.plain || "";
+  return { sender, senderId, body: String(body), ts: null, strong: true };
+}
+function dkGroupParse(text) {
+  const cgp = dkParseCGP1(text);
+  if (cgp)
+    return cgp;
+  const t = String(text || "");
+  const { body: noTs, ts } = dkStripGroupTs(t);
+  const split = dkSplitGroupSender(noTs.trim());
+  if (!split)
+    return null;
+  return { sender: split.sender, senderId: null, body: split.body.trim(), ts, strong: !!ts };
+}
+function DkGroupSender({ grp, T }) {
+  const [open, setOpen] = React.useState(false);
+  const [busy, setBusy] = React.useState(false);
+  const [done, setDone] = React.useState(null);
+  const seed = grp.senderId || grp.sender;
+  const addFriend = () => {
+    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(
+    "button",
+    {
+      onClick: () => setOpen((v) => !v),
+      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)
+  ), 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,
+    zIndex: 50,
+    width: 240,
+    padding: 12,
+    borderRadius: 10,
+    background: "var(--panel-2)",
+    border: "1px solid var(--line)",
+    boxShadow: "0 14px 40px rgba(0,0,0,0.4)",
+    display: "flex",
+    flexDirection: "column",
+    gap: 8
+  } }, /* @__PURE__ */ React.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement(DkIdenticon, { seed, size: 34, radius: 8 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, fontWeight: 700, color: "var(--text)", wordBreak: "break-all" } }, grp.sender)), grp.senderId ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Mono, { size: 10.5, dim: true, copy: grp.senderId, title: grp.senderId }, shortKey(grp.senderId, 12, 8)), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: addFriend,
+      disabled: busy || !!done,
+      style: {
+        padding: "6px 10px",
+        borderRadius: 8,
+        border: "none",
+        background: "var(--accent)",
+        color: "#fff",
+        fontFamily: "var(--ui)",
+        fontSize: 12,
+        cursor: busy || done ? "default" : "pointer",
+        opacity: busy ? 0.6 : 1
+      }
+    },
+    done || (T && T.add || "Add friend")
+  )) : /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--ui)", fontSize: 11.5, color: "var(--dim)", lineHeight: 1.45 } }, T && T.groupSenderUnknown || "The group relays only this display name. Register Beagle as a group agent (/agent add <beagle address> in the group) to receive full member identities you can add as friends."))));
+}
+function dkThreadIsGroup(thread) {
+  return (thread || []).some((m) => !m.day && m.dir !== "out" && !m.file && (dkGroupParse(m.text) || {}).strong);
+}
+function dkNativeMediaFromText(text) {
+  let body = dkStripGroupTs(String(text || "")).body.trim();
+  if (body.length < 32)
+    return null;
+  let sender = null;
+  if (!body.startsWith("{")) {
+    const split = dkSplitGroupSender(body);
+    if (!split || !split.body.startsWith("{"))
+      return null;
+    sender = split.sender;
+    body = split.body.trim();
+  }
+  if (!body.startsWith("{") || !body.endsWith("}"))
+    return null;
+  let j = null;
+  try {
+    j = JSON.parse(body);
+  } catch (e) {
+    return null;
+  }
+  if (!j || typeof j !== "object" || typeof j.data !== "string" || j.data.length < 16)
+    return null;
+  const kind = j.type === "image" ? "image" : j.type === "audio" || j.type === "voice" ? "audio" : j.type === "video" ? "video" : null;
+  if (!kind)
+    return null;
+  const ext = String(j.fileExtension || "").toLowerCase();
+  const mime = DK_NATIVE_MEDIA_MIME[ext] || kind + "/*";
+  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) } });
 }
@@ -1701,9 +1839,11 @@ 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, onCall, onFormSubmit, answered, selMode, selected, onToggleSel, busy }) {
+function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onCall, onFormSubmit, answered, selMode, selected, onToggleSel, busy, isGroup }) {
   const mine = m.from === "me";
-  const read = window.ChatComponents ? window.ChatComponents.readMessage(m.text || "") : { text: m.text, form: null, interaction: null };
+  const nativeMedia = !m.file ? dkNativeMediaFromText(m.text) : null;
+  const grp = isGroup && m.dir !== "out" && !m.file && !nativeMedia ? dkGroupParse(m.text) : 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;
   const callRec = !m.file ? dkCallFromText(m.text) : null;
@@ -1934,7 +2074,22 @@ function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onC
           )
         );
       })()
-    ) : /* @__PURE__ */ React.createElement("div", { style: {
+    ) : nativeMedia ? /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 4, maxWidth: "min(420px, 88%)" } }, nativeMedia.sender && /* @__PURE__ */ React.createElement(DkGroupSender, { grp: { sender: nativeMedia.sender, senderId: null }, T }), nativeMedia.kind === "image" ? /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        src: nativeMedia.url,
+        alt: nativeMedia.name,
+        style: { maxWidth: "100%", borderRadius: 12, border: "1px solid var(--line)", cursor: "pointer" },
+        onClick: () => {
+          try {
+            const w = window.open();
+            if (w)
+              w.document.write('<img src="' + nativeMedia.url + '" style="max-width:100%">');
+          } catch (e) {
+          }
+        }
+      }
+    ) : 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,
@@ -1950,7 +2105,7 @@ function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onC
       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(
+    } }, /* @__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(
       "span",
       {
         title: m.via === "offline" ? "delivered via express relay (offline)" : "delivered over a live session (online)",
@@ -1981,6 +2136,7 @@ function Msg({ m, peer, T, onTheater, onDelete, onCancel, onRetry, onReveal, onC
 }
 function Conversation({ T, peer, lang, 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);
   const fileRef = React.useRef(null);
   const rtcFileRef = React.useRef(null);
@@ -2233,7 +2389,7 @@ function Conversation({ T, peer, lang, thread: threadProp, onSend, onSendFile, o
       onDrop
     },
     dragOver && /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", inset: 0, zIndex: 30, background: "rgba(91,140,255,0.10)", border: "2px dashed var(--accent)", borderRadius: 12, display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none", fontFamily: "var(--mono)", fontSize: 14, color: "var(--accent)" } }, lang === "zh" ? "\u677E\u5F00\u53D1\u9001\u6587\u4EF6" : "Drop to send file"),
-    /* @__PURE__ */ React.createElement("div", { style: { height: 60, flexShrink: 0, borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 12, padding: "0 16px", background: "var(--panel)" } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 34, radius: 8 }), /* @__PURE__ */ React.createElement("div", { style: { minWidth: 0 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: peer.alias ? "var(--ui)" : "var(--mono)", fontSize: 15, fontWeight: 700, color: "var(--text)" } }, peer.alias || shortKey(peer.userId, 10, 6)), peer.agent && /* @__PURE__ */ React.createElement(Tag, { tone: "accent" }, "agent"), /* @__PURE__ */ React.createElement(RouteTag, { peer })), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 2 } }, /* @__PURE__ */ React.createElement(Mono, { size: 11.5, dim: true, copy: peer.userId, title: peer.userId }, shortKey(peer.userId, 10, 6)), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)" } }, "\xB7"), /* @__PURE__ */ React.createElement("button", { onClick: () => onOpenNet(peer), title: T && T.openNet || "Network view", style: { background: "none", border: "none", cursor: "pointer", padding: 0, color: "var(--accent)", display: "inline-flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(Icon, { name: "network", size: 12, stroke: 2 })), /* @__PURE__ */ React.createElement(Mono, { size: 11.5, dim: true, copy: peer.ip, title: peer.ip }, peer.ip), peer.address && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)" } }, "\xB7"), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { style: { height: 60, flexShrink: 0, borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", gap: 12, padding: "0 16px", background: "var(--panel)" } }, /* @__PURE__ */ React.createElement(DkAvatar, { peer, size: 34, radius: 8 }), /* @__PURE__ */ React.createElement("div", { style: { minWidth: 0 } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: peer.alias ? "var(--ui)" : "var(--mono)", fontSize: 15, fontWeight: 700, color: "var(--text)" } }, peer.alias || shortKey(peer.userId, 10, 6)), peer.agent && /* @__PURE__ */ React.createElement(Tag, { tone: "accent" }, "agent"), isGroup && /* @__PURE__ */ React.createElement(Tag, null, T && T.groupTag || "group"), /* @__PURE__ */ React.createElement(RouteTag, { peer })), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 2 } }, /* @__PURE__ */ React.createElement(Mono, { size: 11.5, dim: true, copy: peer.userId, title: peer.userId }, shortKey(peer.userId, 10, 6)), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)" } }, "\xB7"), /* @__PURE__ */ React.createElement("button", { onClick: () => onOpenNet(peer), title: T && T.openNet || "Network view", style: { background: "none", border: "none", cursor: "pointer", padding: 0, color: "var(--accent)", display: "inline-flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(Icon, { name: "network", size: 12, stroke: 2 })), /* @__PURE__ */ React.createElement(Mono, { size: 11.5, dim: true, copy: peer.ip, title: peer.ip }, peer.ip), peer.address && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { style: { color: "var(--line)" } }, "\xB7"), /* @__PURE__ */ React.createElement(
       Mono,
       {
         size: 11.5,
@@ -2283,6 +2439,7 @@ ${peer.address}`
         m,
         peer,
         T,
+        isGroup,
         onTheater: setTheater,
         onDelete: (id) => doDelete([id]),
         onCancel: doCancel,
@@ -3493,9 +3650,11 @@ const STR = {
     pickPeer: "Select a peer to open the conversation",
     queued: "queued",
     sendingMsg: "sending",
+    groupTag: "group",
     open: "open",
     retry: "Retry",
     cancel: "Cancel",
+    groupSenderUnknown: "The group relays only this display name. Register Beagle as a group agent (/agent add <beagle address> in the group) to receive full member identities you can add as friends.",
     pendingFriend: "Waiting for them to accept your friend request \u2014 messages will queue and deliver once they do.",
     cancelling: "Cancelling\u2026",
     cancelled: "Transfer cancelled",
@@ -3589,9 +3748,11 @@ const STR = {
     pickPeer: "\u9009\u62E9\u4E00\u4F4D\u597D\u53CB\u5F00\u59CB\u4F1A\u8BDD",
     queued: "\u5F85\u53D1\u9001",
     sendingMsg: "\u53D1\u9001\u4E2D",
+    groupTag: "\u7FA4",
     open: "\u6253\u5F00",
     retry: "\u91CD\u8BD5",
     cancel: "\u53D6\u6D88",
+    groupSenderUnknown: "\u7FA4\u670D\u52A1\u53EA\u8F6C\u53D1\u4E86\u663E\u793A\u540D\uFF0C\u62FF\u4E0D\u5230\u8BE5\u6210\u5458\u7684\u5B8C\u6574\u8EAB\u4EFD\u3002\u5728\u7FA4\u91CC\u6267\u884C /agent add <beagle \u5730\u5740> \u628A Beagle \u6CE8\u518C\u4E3A\u7FA4 agent \u540E\uFF0C\u5373\u53EF\u6536\u5230\u5B8C\u6574\u8EAB\u4EFD\u5E76\u4E00\u952E\u52A0\u597D\u53CB\u3002",
     pendingFriend: "\u7B49\u5F85\u5BF9\u65B9\u63A5\u53D7\u597D\u53CB\u8BF7\u6C42 \u2014 \u6D88\u606F\u4F1A\u5148\u6392\u961F\uFF0C\u5BF9\u65B9\u63A5\u53D7\u540E\u81EA\u52A8\u9001\u8FBE\u3002",
     cancelling: "\u6B63\u5728\u53D6\u6D88\u2026",
     cancelled: "\u5DF2\u53D6\u6D88\u4F20\u8F93",

package/package.json

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