@decentnetwork/beagle 0.1.12 → 0.1.13

package/dist/desktop/app.js

@@ -1,4 +1,4 @@
-window.__DK_UI_VERSION="0.1.12";
+window.__DK_UI_VERSION="0.1.13";
 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,72 @@ 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 dkGroupParse(text) {
+  const t = String(text || "");
+  const { body: noTs, ts } = dkStripGroupTs(t);
+  const split = dkSplitGroupSender(noTs.trim());
+  if (!split)
+    return null;
+  return { sender: split.sender, body: split.body.trim(), ts, strong: !!ts };
+}
+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 +1767,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 +2002,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("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--faint)" } }, nativeMedia.sender), 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("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--faint)", margin: "0 3px 2px" } }, grp.sender), /* @__PURE__ */ React.createElement("div", { style: {
       padding: "8px 12px",
       borderRadius: 12,
       borderBottomRightRadius: mine ? 4 : 12,
@@ -1950,7 +2033,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 +2064,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 +2317,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 +2367,7 @@ ${peer.address}`
         m,
         peer,
         T,
+        isGroup,
         onTheater: setTheater,
         onDelete: (id) => doDelete([id]),
         onCancel: doCancel,
@@ -3493,6 +3578,7 @@ const STR = {
     pickPeer: "Select a peer to open the conversation",
     queued: "queued",
     sendingMsg: "sending",
+    groupTag: "group",
     open: "open",
     retry: "Retry",
     cancel: "Cancel",
@@ -3589,6 +3675,7 @@ 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",

package/package.json

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