@decentnetwork/beagle 0.1.1 → 0.1.3

package/dist/desktop/app.js

@@ -1,4 +1,4 @@
-window.__DK_UI_VERSION="0.1.0";
+window.__DK_UI_VERSION="0.1.2";
 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"/>',
@@ -1402,7 +1402,9 @@ function DkChatForm({ form, submitted, peer, onSubmit }) {
         init[c.id] = c.default || "";
     return init;
   });
+  const [files, setFiles] = React.useState({});
   const [busy, setBusy] = React.useState(false);
+  const [step, setStep] = React.useState("");
   const [err, setErr] = React.useState("");
   if (submitted) {
     return /* @__PURE__ */ React.createElement("div", { style: {
@@ -1415,13 +1417,14 @@ function DkChatForm({ form, submitted, peer, onSubmit }) {
       background: "var(--bub-them)",
       opacity: 0.85,
       minWidth: 240
-    } }, items.filter((c) => c.type === "select" || c.type === "text").map((c) => {
+    } }, items.filter((c) => window.ChatComponents.INPUT_TYPES.has(c.type)).map((c) => {
       const raw = submitted.values && submitted.values[c.id] || "";
-      const opt = (c.options || []).find((o) => o.value === raw);
-      return /* @__PURE__ */ React.createElement("div", { key: c.id, style: { display: "flex", gap: 8, fontFamily: "var(--mono)", fontSize: 12.5 } }, /* @__PURE__ */ React.createElement("span", { style: { color: "var(--faint)" } }, c.label || c.id), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--text)", fontWeight: 600 } }, opt ? opt.label : raw));
+      const shown = raw && typeof raw === "object" ? raw.name : ((c.options || []).find((o) => o.value === raw) || {}).label || raw;
+      return /* @__PURE__ */ React.createElement("div", { key: c.id, style: { display: "flex", gap: 8, fontFamily: "var(--mono)", fontSize: 12.5 } }, /* @__PURE__ */ React.createElement("span", { style: { color: "var(--faint)" } }, c.label || c.id), /* @__PURE__ */ React.createElement("span", { style: { color: "var(--text)", fontWeight: 600 } }, shown));
     }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6, marginTop: 2, color: "var(--faint)", fontSize: 11.5, fontFamily: "var(--mono)" } }, /* @__PURE__ */ React.createElement(Icon, { name: "check", size: 12, stroke: 3, color: "var(--ok, #46d17f)" }), /* @__PURE__ */ React.createElement("span", null, "submitted")));
   }
-  const missing = items.filter((c) => c.required && (c.type === "select" || c.type === "text") && !vals[c.id]);
+  const attachments = items.filter((c) => c.type === "attachment");
+  const missing = items.filter((c) => c.required && window.ChatComponents.INPUT_TYPES.has(c.type) && (c.type === "attachment" ? !files[c.id] : !vals[c.id]));
   const send = async (componentId) => {
     if (missing.length) {
       setErr("Fill in: " + missing.map((c) => c.label || c.id).join(", "));
@@ -1431,12 +1434,30 @@ function DkChatForm({ form, submitted, peer, onSubmit }) {
     setErr("");
     try {
       const CC = window.ChatComponents;
-      const text = CC.encodeInteraction(CC.buildInteraction(form.custom_id, componentId, vals));
-      const r = await fetch("/api/chat-send", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ userid: peer.userId || peer.id, text })
-      }).then((x) => x.json());
+      const answers = { ...vals };
+      for (const c of attachments) {
+        const f = files[c.id];
+        if (!f)
+          continue;
+        setStep("Sending " + f.name + "\u2026");
+        const up = await dkApi.sendFile(peer.userId || peer.id, f);
+        if (!up || !up.ok) {
+          setErr(up && up.error || "file send failed");
+          setBusy(false);
+          setStep("");
+          return;
+        }
+        if (!up.fileId) {
+          setErr("This peer received the file inline, which carries no file id \u2014 send it as a normal message instead.");
+          setBusy(false);
+          setStep("");
+          return;
+        }
+        answers[c.id] = { fileId: up.fileId, name: up.name || f.name, size: up.size != null ? up.size : f.size };
+      }
+      setStep("");
+      const text = CC.encodeInteraction(CC.buildInteraction(form.custom_id, componentId, answers));
+      const r = await dkApi.send(peer.userId || peer.id, text);
       if (!r.ok) {
         setErr(r.error || "submit failed");
         setBusy(false);
@@ -1501,6 +1522,20 @@ function DkChatForm({ form, submitted, peer, onSubmit }) {
         }
       ));
     }
+    if (c.type === "attachment") {
+      const picked = files[c.id];
+      const tooBig = picked && c.max_bytes && picked.size > c.max_bytes;
+      return /* @__PURE__ */ React.createElement("label", { key: c.id, style: { display: "flex", flexDirection: "column", gap: 4 } }, /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11.5, color: "var(--faint)" } }, c.label || c.id, c.required ? " *" : ""), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          type: "file",
+          disabled: busy,
+          accept: (c.accept || []).join(",") || void 0,
+          onChange: (e) => setFiles((f) => ({ ...f, [c.id]: e.target.files && e.target.files[0] })),
+          style: { fontFamily: "var(--mono)", fontSize: 12, color: "var(--text)" }
+        }
+      ), picked && /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 11, color: tooBig ? "#f59e0b" : "var(--faint)" } }, dkFileSize(picked.size), tooBig ? " \u2014 larger than this form asked for" : ""));
+    }
     if (c.type === "submit") {
       return /* @__PURE__ */ React.createElement(
         "button",
@@ -1522,7 +1557,7 @@ function DkChatForm({ form, submitted, peer, onSubmit }) {
             opacity: busy ? 0.6 : 1
           }
         },
-        busy ? "\u2026" : c.label || "Submit"
+        busy ? step || "\u2026" : c.label || "Submit"
       );
     }
     return null;

package/dist/desktop/vendor/chat-components.js

@@ -21,7 +21,9 @@ var ChatComponents = (() => {
   var dist_exports = {};
   __export(dist_exports, {
     FORM_FENCE: () => FORM_FENCE,
+    INPUT_TYPES: () => INPUT_TYPES,
     INTERACTION_FENCE: () => INTERACTION_FENCE,
+    MAX_ACCEPT: () => MAX_ACCEPT,
     MAX_COMPONENTS: () => MAX_COMPONENTS,
     MAX_CUSTOM_ID_LEN: () => MAX_CUSTOM_ID_LEN,
     MAX_ID_LEN: () => MAX_ID_LEN,
@@ -48,7 +50,18 @@ var ChatComponents = (() => {
   var MAX_VALUE_LEN = 512;
   var MAX_CUSTOM_ID_LEN = 128;
   var MAX_PAYLOAD_CHARS = 64 * 1024;
-  var RENDERABLE = /* @__PURE__ */ new Set(["select", "submit", "text"]);
+  var RENDERABLE = /* @__PURE__ */ new Set([
+    "select",
+    "submit",
+    "text",
+    "attachment"
+  ]);
+  var MAX_ACCEPT = 12;
+  var INPUT_TYPES = /* @__PURE__ */ new Set([
+    "select",
+    "text",
+    "attachment"
+  ]);
   var str = (v, max) => {
     if (typeof v !== "string")
       return void 0;
@@ -118,11 +131,21 @@ var ChatComponents = (() => {
         if (def)
           component.default = def;
       }
+      if (type === "attachment") {
+        if (Array.isArray(c.accept)) {
+          const accept = c.accept.slice(0, MAX_ACCEPT).map((a) => str(a, MAX_LABEL_LEN)).filter((a) => a !== void 0);
+          if (accept.length)
+            component.accept = accept;
+        }
+        if (typeof c.max_bytes === "number" && Number.isFinite(c.max_bytes) && c.max_bytes > 0) {
+          component.max_bytes = Math.floor(c.max_bytes);
+        }
+      }
       out.push(component);
     }
     if (!out.some((c) => c.type === "submit"))
       return null;
-    if (!out.some((c) => c.type === "select" || c.type === "text"))
+    if (!out.some((c) => INPUT_TYPES.has(c.type)))
       return null;
     return { custom_id: customId, components: out };
   }
@@ -164,7 +187,15 @@ var ChatComponents = (() => {
       const key = str(k, MAX_ID_LEN);
       if (!key)
         continue;
-      clean[key] = typeof v === "string" ? v.slice(0, MAX_VALUE_LEN) : "";
+      if (typeof v === "string") {
+        clean[key] = v.slice(0, MAX_VALUE_LEN);
+        continue;
+      }
+      const fileId = str(v == null ? void 0 : v.fileId, 128);
+      const name = str(v == null ? void 0 : v.name, MAX_LABEL_LEN);
+      if (fileId && name && typeof (v == null ? void 0 : v.size) === "number" && Number.isFinite(v.size)) {
+        clean[key] = { fileId, name, size: v.size };
+      }
     }
     return { custom_id: customId.slice(0, MAX_CUSTOM_ID_LEN), component: component.slice(0, MAX_ID_LEN), values: clean };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/beagle",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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",
@@ -25,7 +25,7 @@
     "start": "node dist/cli.js"
   },
   "dependencies": {
-    "@decentnetwork/chat-components": "^0.1.2",
+    "@decentnetwork/chat-components": "^0.1.3",
     "@decentnetwork/lan": "^0.1.256",
     "@decentnetwork/peer": "^0.1.123",
     "@decentnetwork/peer-webrtc": "^0.2.10",