@jiggai/kitchen-plugin-marketing 0.4.1 → 0.5.0

package/dist/api/handler.js

@@ -1002,8 +1002,187 @@ async function handleRequest(req, ctx) {
       return apiError(500, "DATABASE_ERROR", error?.message || "Unknown error");
     }
   }
+  const MEDIA_DIR = (0, import_path2.join)((0, import_os2.homedir)(), ".openclaw", "kitchen", "plugins", "marketing", "media");
+  function ensureMediaDir(team) {
+    const dir = (0, import_path2.join)(MEDIA_DIR, team);
+    (0, import_fs2.mkdirSync)(dir, { recursive: true });
+    return dir;
+  }
+  if (req.path === "/media" && req.method === "POST") {
+    try {
+      const body = req.body;
+      if (!body?.data) return apiError(400, "VALIDATION_ERROR", "data (base64) is required");
+      let base64 = body.data;
+      let detectedMime = body.mimeType || "application/octet-stream";
+      const dataUrlMatch = base64.match(/^data:([^;]+);base64,(.+)$/);
+      if (dataUrlMatch) {
+        detectedMime = dataUrlMatch[1];
+        base64 = dataUrlMatch[2];
+      }
+      const buf = Buffer.from(base64, "base64");
+      const id = (0, import_crypto2.randomUUID)();
+      const ext = (0, import_path2.extname)(body.filename || "") || mimeToExt(detectedMime);
+      const storedFilename = `${id}${ext}`;
+      const dir = ensureMediaDir(teamId);
+      const filePath = (0, import_path2.join)(dir, storedFilename);
+      (0, import_fs2.writeFileSync)(filePath, buf);
+      const { db } = initializeDatabase(teamId);
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      const userId = getUserId(req);
+      const record = {
+        id,
+        teamId,
+        filename: storedFilename,
+        originalName: body.filename || storedFilename,
+        mimeType: detectedMime,
+        size: buf.length,
+        width: null,
+        height: null,
+        alt: body.alt || null,
+        tags: JSON.stringify(body.tags || []),
+        url: `/api/plugins/marketing/media/${id}/file?team=${encodeURIComponent(teamId)}`,
+        thumbnailUrl: null,
+        createdAt: now,
+        createdBy: userId
+      };
+      await db.insert(media).values(record);
+      return {
+        status: 201,
+        data: {
+          id,
+          filename: record.originalName,
+          mimeType: detectedMime,
+          size: buf.length,
+          url: record.url,
+          alt: record.alt,
+          tags: body.tags || [],
+          createdAt: now
+        }
+      };
+    } catch (error) {
+      return apiError(500, "UPLOAD_ERROR", error?.message || "Upload failed");
+    }
+  }
+  if (req.path === "/media" && req.method === "GET") {
+    try {
+      const { db } = initializeDatabase(teamId);
+      const { limit, offset } = parsePagination(req.query);
+      const conditions = [(0, import_drizzle_orm2.eq)(media.teamId, teamId)];
+      if (req.query.mimeType) {
+        conditions.push((0, import_drizzle_orm2.like)(media.mimeType, `${req.query.mimeType}%`));
+      }
+      const totalResult = await db.select({ count: import_drizzle_orm2.sql`count(*)` }).from(media).where((0, import_drizzle_orm2.and)(...conditions));
+      const total = totalResult[0]?.count ?? 0;
+      const items = await db.select().from(media).where((0, import_drizzle_orm2.and)(...conditions)).orderBy((0, import_drizzle_orm2.desc)(media.createdAt)).limit(limit).offset(offset);
+      const data = items.map((m) => {
+        let thumbnailDataUrl;
+        if (m.mimeType.startsWith("image/")) {
+          const fp = (0, import_path2.join)(MEDIA_DIR, teamId, m.filename);
+          if ((0, import_fs2.existsSync)(fp)) {
+            const raw = (0, import_fs2.readFileSync)(fp);
+            if (raw.length < 2 * 1024 * 1024) {
+              thumbnailDataUrl = `data:${m.mimeType};base64,${raw.toString("base64")}`;
+            }
+          }
+        }
+        return {
+          id: m.id,
+          filename: m.originalName,
+          mimeType: m.mimeType,
+          size: m.size,
+          url: m.url,
+          thumbnailDataUrl,
+          alt: m.alt,
+          tags: JSON.parse(m.tags || "[]"),
+          createdAt: m.createdAt
+        };
+      });
+      return {
+        status: 200,
+        data: { data, total, offset, limit, hasMore: offset + limit < total }
+      };
+    } catch (error) {
+      return apiError(500, "DATABASE_ERROR", error?.message || "Failed to list media");
+    }
+  }
+  const mediaIdMatch = req.path.match(/^\/media\/([a-f0-9-]+)$/);
+  if (mediaIdMatch && req.method === "GET") {
+    try {
+      const { db } = initializeDatabase(teamId);
+      const [item] = await db.select().from(media).where((0, import_drizzle_orm2.and)((0, import_drizzle_orm2.eq)(media.id, mediaIdMatch[1]), (0, import_drizzle_orm2.eq)(media.teamId, teamId)));
+      if (!item) return apiError(404, "NOT_FOUND", "Media not found");
+      let dataUrl;
+      const fp = (0, import_path2.join)(MEDIA_DIR, teamId, item.filename);
+      if ((0, import_fs2.existsSync)(fp)) {
+        const raw = (0, import_fs2.readFileSync)(fp);
+        dataUrl = `data:${item.mimeType};base64,${raw.toString("base64")}`;
+      }
+      return {
+        status: 200,
+        data: {
+          id: item.id,
+          filename: item.originalName,
+          mimeType: item.mimeType,
+          size: item.size,
+          url: item.url,
+          dataUrl,
+          alt: item.alt,
+          tags: JSON.parse(item.tags || "[]"),
+          createdAt: item.createdAt
+        }
+      };
+    } catch (error) {
+      return apiError(500, "DATABASE_ERROR", error?.message || "Failed to get media");
+    }
+  }
+  const mediaFileMatch = req.path.match(/^\/media\/([a-f0-9-]+)\/file$/);
+  if (mediaFileMatch && req.method === "GET") {
+    try {
+      const { db } = initializeDatabase(teamId);
+      const [item] = await db.select().from(media).where((0, import_drizzle_orm2.and)((0, import_drizzle_orm2.eq)(media.id, mediaFileMatch[1]), (0, import_drizzle_orm2.eq)(media.teamId, teamId)));
+      if (!item) return apiError(404, "NOT_FOUND", "Media not found");
+      const fp = (0, import_path2.join)(MEDIA_DIR, teamId, item.filename);
+      if (!(0, import_fs2.existsSync)(fp)) return apiError(404, "NOT_FOUND", "File missing from disk");
+      const raw = (0, import_fs2.readFileSync)(fp);
+      const dataUrl = `data:${item.mimeType};base64,${raw.toString("base64")}`;
+      return { status: 200, data: { dataUrl, mimeType: item.mimeType, filename: item.originalName } };
+    } catch (error) {
+      return apiError(500, "FILE_ERROR", error?.message || "Failed to serve file");
+    }
+  }
+  if (mediaIdMatch && req.method === "DELETE") {
+    try {
+      const { db } = initializeDatabase(teamId);
+      const [item] = await db.select().from(media).where((0, import_drizzle_orm2.and)((0, import_drizzle_orm2.eq)(media.id, mediaIdMatch[1]), (0, import_drizzle_orm2.eq)(media.teamId, teamId)));
+      if (!item) return apiError(404, "NOT_FOUND", "Media not found");
+      const fp = (0, import_path2.join)(MEDIA_DIR, teamId, item.filename);
+      try {
+        (0, import_fs2.unlinkSync)(fp);
+      } catch {
+      }
+      await db.delete(media).where((0, import_drizzle_orm2.eq)(media.id, mediaIdMatch[1]));
+      return { status: 200, data: { deleted: true, id: mediaIdMatch[1] } };
+    } catch (error) {
+      return apiError(500, "DATABASE_ERROR", error?.message || "Failed to delete media");
+    }
+  }
   return apiError(501, "NOT_IMPLEMENTED", `No handler for ${req.method} ${req.path}`);
 }
+function mimeToExt(mime) {
+  const map = {
+    "image/jpeg": ".jpg",
+    "image/png": ".png",
+    "image/gif": ".gif",
+    "image/webp": ".webp",
+    "image/svg+xml": ".svg",
+    "video/mp4": ".mp4",
+    "video/webm": ".webm",
+    "video/quicktime": ".mov",
+    "audio/mpeg": ".mp3",
+    "audio/wav": ".wav"
+  };
+  return map[mime] || "";
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   handleRequest

package/dist/tabs/content-library.js

@@ -120,6 +120,11 @@
       const [scheduledAt, setScheduledAt] = useState("");
       const [mediaUrl, setMediaUrl] = useState("");
       const [showMedia, setShowMedia] = useState(false);
+      const [mediaLibrary, setMediaLibrary] = useState([]);
+      const [showMediaPicker, setShowMediaPicker] = useState(false);
+      const [uploading, setUploading] = useState(false);
+      const [selectedMediaIds, setSelectedMediaIds] = useState([]);
+      const fileInputRef = useRef(null);
       const successTimeout = useRef(null);
       const postizHeaders = useMemo(() => {
         try {
@@ -154,10 +159,64 @@
         } catch {
         }
       }, [apiBase, teamId]);
+      const loadMedia = useCallback(async () => {
+        try {
+          const res = await fetch(`${apiBase}/media?team=${encodeURIComponent(teamId)}&limit=100`);
+          const json = await res.json();
+          setMediaLibrary(Array.isArray(json.data) ? json.data : []);
+        } catch {
+        }
+      }, [apiBase, teamId]);
+      const handleFileUpload = useCallback(async (files) => {
+        if (!files || files.length === 0) return;
+        setUploading(true);
+        setError(null);
+        try {
+          for (const file of Array.from(files)) {
+            const base64 = await new Promise((resolve, reject) => {
+              const reader = new FileReader();
+              reader.onload = () => resolve(reader.result);
+              reader.onerror = reject;
+              reader.readAsDataURL(file);
+            });
+            const res = await fetch(`${apiBase}/media?team=${encodeURIComponent(teamId)}`, {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({ data: base64, filename: file.name, mimeType: file.type })
+            });
+            if (!res.ok) {
+              const err = await res.json().catch(() => ({}));
+              throw new Error(err.message || `Upload failed (${res.status})`);
+            }
+            const item = await res.json();
+            setSelectedMediaIds((prev) => [...prev, item.id]);
+          }
+          await loadMedia();
+          showSuccess(`Uploaded ${files.length} file${files.length > 1 ? "s" : ""}`);
+        } catch (e) {
+          setError(e?.message || "Upload failed");
+        } finally {
+          setUploading(false);
+          if (fileInputRef.current) fileInputRef.current.value = "";
+        }
+      }, [apiBase, teamId, loadMedia]);
+      const deleteMedia = useCallback(async (id) => {
+        try {
+          await fetch(`${apiBase}/media/${id}?team=${encodeURIComponent(teamId)}`, { method: "DELETE" });
+          setSelectedMediaIds((prev) => prev.filter((x) => x !== id));
+          await loadMedia();
+        } catch {
+        }
+      }, [apiBase, teamId, loadMedia]);
+      const toggleMediaSelect = (id) => {
+        setSelectedMediaIds(
+          (prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+        );
+      };
       useEffect(() => {
         setLoading(true);
-        Promise.all([loadDrivers(), loadPosts()]).finally(() => setLoading(false));
-      }, [loadDrivers, loadPosts]);
+        Promise.all([loadDrivers(), loadPosts(), loadMedia()]).finally(() => setLoading(false));
+      }, [loadDrivers, loadPosts, loadMedia]);
       const connectedDrivers = useMemo(() => drivers.filter((d) => d.connected), [drivers]);
       const disconnectedDrivers = useMemo(() => drivers.filter((d) => !d.connected), [drivers]);
       const togglePlatform = (platform) => {
@@ -348,7 +407,7 @@
                   )
                 )
               ),
-              // Media URL (collapsible)
+              // Media (upload, URL, or library picker)
               h(
                 "div",
                 null,
@@ -359,14 +418,228 @@
                 }, showMedia ? "\u2212 Media" : "+ Media"),
                 showMedia && h(
                   "div",
-                  { className: "mt-2" },
-                  h("input", {
-                    type: "url",
-                    value: mediaUrl,
-                    onChange: (e) => setMediaUrl(e.target.value),
-                    placeholder: "Paste image or video URL\u2026",
-                    style: t.input
-                  })
+                  { className: "mt-2 space-y-2" },
+                  // Upload + URL row
+                  h(
+                    "div",
+                    { className: "flex gap-2 items-center" },
+                    h("input", {
+                      ref: fileInputRef,
+                      type: "file",
+                      accept: "image/*,video/*",
+                      multiple: true,
+                      style: { display: "none" },
+                      onChange: (e) => handleFileUpload(e.target.files)
+                    }),
+                    h("button", {
+                      type: "button",
+                      onClick: () => fileInputRef.current?.click(),
+                      style: { ...t.btnGhost, padding: "0.35rem 0.7rem", fontSize: "0.8rem", whiteSpace: "nowrap" },
+                      disabled: uploading
+                    }, uploading ? "\u23F3 Uploading\u2026" : "\u{1F4C1} Upload"),
+                    h("button", {
+                      type: "button",
+                      onClick: () => {
+                        loadMedia();
+                        setShowMediaPicker(!showMediaPicker);
+                      },
+                      style: { ...t.btnGhost, padding: "0.35rem 0.7rem", fontSize: "0.8rem", whiteSpace: "nowrap" }
+                    }, showMediaPicker ? "Hide Library" : "\u{1F5BC}\uFE0F Library"),
+                    h("input", {
+                      type: "url",
+                      value: mediaUrl,
+                      onChange: (e) => setMediaUrl(e.target.value),
+                      placeholder: "\u2026or paste a URL",
+                      style: { ...t.input, flex: 1 }
+                    })
+                  ),
+                  // Selected media thumbnails
+                  selectedMediaIds.length > 0 && h(
+                    "div",
+                    { className: "flex flex-wrap gap-2" },
+                    ...selectedMediaIds.map((id) => {
+                      const item = mediaLibrary.find((m) => m.id === id);
+                      if (!item) return null;
+                      return h(
+                        "div",
+                        {
+                          key: id,
+                          style: {
+                            position: "relative",
+                            width: "72px",
+                            height: "72px",
+                            borderRadius: "8px",
+                            overflow: "hidden",
+                            border: "2px solid rgba(127,90,240,0.5)"
+                          }
+                        },
+                        item.mimeType?.startsWith("video/") ? h("div", {
+                          style: {
+                            width: "100%",
+                            height: "100%",
+                            background: "rgba(0,0,0,0.4)",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: "white",
+                            fontSize: "1.2rem"
+                          }
+                        }, "\u{1F3A5}") : h("img", {
+                          src: item.thumbnailDataUrl || item.url,
+                          style: { width: "100%", height: "100%", objectFit: "cover" }
+                        }),
+                        h("button", {
+                          type: "button",
+                          onClick: () => toggleMediaSelect(id),
+                          style: {
+                            position: "absolute",
+                            top: "2px",
+                            right: "2px",
+                            background: "rgba(0,0,0,0.6)",
+                            border: "none",
+                            borderRadius: "50%",
+                            width: "18px",
+                            height: "18px",
+                            color: "white",
+                            fontSize: "0.65rem",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            lineHeight: "1"
+                          }
+                        }, "\u2715")
+                      );
+                    })
+                  ),
+                  // Media library picker grid
+                  showMediaPicker && h(
+                    "div",
+                    {
+                      style: {
+                        background: "rgba(255,255,255,0.02)",
+                        border: "1px solid var(--ck-border-subtle)",
+                        borderRadius: "10px",
+                        padding: "0.75rem",
+                        maxHeight: "260px",
+                        overflowY: "auto"
+                      }
+                    },
+                    h(
+                      "div",
+                      { className: "text-xs font-medium mb-2", style: t.faint },
+                      `Media Library (${mediaLibrary.length} items)`
+                    ),
+                    mediaLibrary.length === 0 ? h("div", { className: "text-xs py-4 text-center", style: t.faint }, "No media yet. Upload some files!") : h(
+                      "div",
+                      {
+                        style: {
+                          display: "grid",
+                          gridTemplateColumns: "repeat(auto-fill, minmax(80px, 1fr))",
+                          gap: "0.5rem"
+                        }
+                      },
+                      ...mediaLibrary.map((item) => {
+                        const isSelected = selectedMediaIds.includes(item.id);
+                        return h(
+                          "div",
+                          {
+                            key: item.id,
+                            onClick: () => toggleMediaSelect(item.id),
+                            style: {
+                              position: "relative",
+                              cursor: "pointer",
+                              width: "100%",
+                              paddingTop: "100%",
+                              borderRadius: "8px",
+                              overflow: "hidden",
+                              border: isSelected ? "2px solid rgba(127,90,240,0.7)" : "1px solid var(--ck-border-subtle)",
+                              boxShadow: isSelected ? "0 0 8px rgba(127,90,240,0.3)" : "none"
+                            }
+                          },
+                          item.mimeType?.startsWith("video/") ? h("div", {
+                            style: {
+                              position: "absolute",
+                              inset: "0",
+                              background: "rgba(0,0,0,0.4)",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              color: "white",
+                              fontSize: "1.5rem"
+                            }
+                          }, "\u{1F3A5}") : h("img", {
+                            src: item.thumbnailDataUrl || item.url,
+                            style: {
+                              position: "absolute",
+                              inset: "0",
+                              width: "100%",
+                              height: "100%",
+                              objectFit: "cover"
+                            }
+                          }),
+                          isSelected && h("div", {
+                            style: {
+                              position: "absolute",
+                              top: "4px",
+                              right: "4px",
+                              background: "rgba(127,90,240,0.85)",
+                              borderRadius: "50%",
+                              width: "20px",
+                              height: "20px",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              color: "white",
+                              fontSize: "0.7rem",
+                              fontWeight: "700"
+                            }
+                          }, "\u2713"),
+                          h("button", {
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              deleteMedia(item.id);
+                            },
+                            style: {
+                              position: "absolute",
+                              bottom: "4px",
+                              right: "4px",
+                              background: "rgba(220,38,38,0.7)",
+                              border: "none",
+                              borderRadius: "50%",
+                              width: "18px",
+                              height: "18px",
+                              color: "white",
+                              fontSize: "0.6rem",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              opacity: "0.6",
+                              lineHeight: "1"
+                            },
+                            title: "Delete from library"
+                          }, "\u{1F5D1}"),
+                          h("div", {
+                            style: {
+                              position: "absolute",
+                              bottom: "0",
+                              left: "0",
+                              right: "0",
+                              background: "rgba(0,0,0,0.6)",
+                              padding: "2px 4px",
+                              fontSize: "0.55rem",
+                              color: "rgba(255,255,255,0.8)",
+                              whiteSpace: "nowrap",
+                              overflow: "hidden",
+                              textOverflow: "ellipsis"
+                            }
+                          }, item.filename)
+                        );
+                      })
+                    )
+                  )
                 )
               ),
               // Schedule (only if any selected platform supports it)
@@ -475,11 +748,35 @@
                   textAlign: "center"
                 }
               }, "Start writing to see a preview"),
-              // Media preview
-              mediaUrl && showMedia && h(
+              // Media preview (selected library items + URL)
+              (selectedMediaIds.length > 0 || mediaUrl && showMedia) && h(
                 "div",
-                { className: "mt-3" },
-                h("img", {
+                { className: "mt-3 space-y-2" },
+                ...selectedMediaIds.map((id) => {
+                  const item = mediaLibrary.find((m) => m.id === id);
+                  if (!item) return null;
+                  return item.mimeType?.startsWith("video/") ? h("div", {
+                    key: id,
+                    style: {
+                      background: "rgba(0,0,0,0.3)",
+                      borderRadius: "8px",
+                      border: "1px solid var(--ck-border-subtle)",
+                      padding: "1rem",
+                      textAlign: "center",
+                      color: "var(--ck-text-secondary)",
+                      fontSize: "0.8rem"
+                    }
+                  }, `\u{1F3A5} ${item.filename}`) : h("img", {
+                    key: id,
+                    src: item.thumbnailDataUrl || item.url,
+                    style: {
+                      maxWidth: "100%",
+                      borderRadius: "8px",
+                      border: "1px solid var(--ck-border-subtle)"
+                    }
+                  });
+                }),
+                mediaUrl && showMedia && h("img", {
                   src: mediaUrl,
                   style: {
                     maxWidth: "100%",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiggai/kitchen-plugin-marketing",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Marketing Suite plugin for ClawKitchen",
   "main": "dist/index.js",
   "files": [