@synergenius/flow-weaver-pack-weaver 0.9.62 → 0.9.78

package/dist/ui/profile-editor.js

@@ -0,0 +1,597 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui/profile-editor.tsx
+var profile_editor_exports = {};
+__export(profile_editor_exports, {
+  ProfileEditor: () => ProfileEditor,
+  default: () => profile_editor_default
+});
+module.exports = __toCommonJS(profile_editor_exports);
+
+// src/ui/bot-constants.ts
+var ICON_CATALOG = [
+  {
+    category: "Actions",
+    icons: [
+      "playArrow",
+      "stop",
+      "pause",
+      "restart",
+      "send",
+      "check",
+      "edit",
+      "copy",
+      "add",
+      "reset",
+      "resume"
+    ]
+  },
+  {
+    category: "AI & Science",
+    icons: ["smartToy", "psychology", "autoAwesome", "modelTraining", "biotech", "science", "ai"]
+  },
+  {
+    category: "Data & Storage",
+    icons: ["database", "dataObject", "dataArray", "tableChart", "token", "dns", "cloudStorage"]
+  },
+  {
+    category: "Logic & Flow",
+    icons: [
+      "altRoute",
+      "callSplit",
+      "callMerge",
+      "rule",
+      "filterAlt",
+      "sort",
+      "loop",
+      "repeat",
+      "compareArrows",
+      "swapHoriz",
+      "syncAlt",
+      "changeCircle",
+      "allInclusive"
+    ]
+  },
+  {
+    category: "Cloud & Network",
+    icons: [
+      "cloudSync",
+      "cloudUpload",
+      "cloudDownload",
+      "cloudDone",
+      "api",
+      "webhook",
+      "public",
+      "router"
+    ]
+  },
+  {
+    category: "Communication",
+    icons: ["email", "chat", "forum", "notifications", "campaign", "rssFeed", "sms"]
+  },
+  {
+    category: "Security",
+    icons: [
+      "key",
+      "shield",
+      "security",
+      "vpnKey",
+      "adminPanel",
+      "policy",
+      "verified",
+      "lockClosed",
+      "lockOpened"
+    ]
+  },
+  {
+    category: "Time",
+    icons: [
+      "timer",
+      "alarm",
+      "hourglassEmpty",
+      "pendingActions",
+      "update",
+      "watchLater",
+      "scheduled"
+    ]
+  },
+  {
+    category: "Tasks & Workflow",
+    icons: [
+      "task",
+      "taskAlt",
+      "checklist",
+      "assignment",
+      "publish",
+      "build",
+      "construction",
+      "engineering"
+    ]
+  },
+  {
+    category: "Analytics",
+    icons: [
+      "analytics",
+      "insights",
+      "barChart",
+      "pieChart",
+      "trendingUp",
+      "showChart",
+      "leaderboard",
+      "monitoring"
+    ]
+  },
+  {
+    category: "Flow Nodes",
+    icons: [
+      "schema",
+      "hub",
+      "deviceHub",
+      "source",
+      "trigger",
+      "pulse",
+      "step",
+      "event",
+      "outlinedFlow"
+    ]
+  },
+  {
+    category: "Files & Documents",
+    icons: [
+      "file",
+      "filePresent",
+      "fileCopy",
+      "textSnippet",
+      "attachFile",
+      "uploadFile",
+      "save",
+      "upload",
+      "download"
+    ]
+  },
+  {
+    category: "General",
+    icons: [
+      "rocketLaunch",
+      "code",
+      "terminal",
+      "logs",
+      "info",
+      "help",
+      "list",
+      "category",
+      "hash",
+      "calendar",
+      "history",
+      "integration",
+      "layers",
+      "link",
+      "search",
+      "outlinedSettings",
+      "outlinedBug",
+      "collaboration",
+      "person",
+      "people",
+      "backup",
+      "healthAndSafety"
+    ]
+  }
+];
+var BOT_COLORS = [
+  { label: "Blue", token: "color-node-blue-icon" },
+  { label: "Purple", token: "color-node-purple-icon" },
+  { label: "Cyan", token: "color-node-cyan-icon" },
+  { label: "Orange", token: "color-node-orange-icon" },
+  { label: "Pink", token: "color-node-pink-icon" },
+  { label: "Green", token: "color-node-green-icon" },
+  { label: "Brand", token: "color-brand-main" },
+  { label: "Accent", token: "color-brand-alt" },
+  { label: "Positive", token: "color-status-positive" },
+  { label: "Info", token: "color-status-info" }
+];
+
+// src/ui/profile-editor.tsx
+var React = require("react");
+var { useState, useEffect, useCallback } = React;
+var {
+  Flex,
+  Typography,
+  Input,
+  Button,
+  IconButton,
+  Icon,
+  SectionTitle,
+  Checkbox,
+  Field,
+  IconPicker,
+  ColorPicker,
+  toast,
+  usePackWorkspace
+} = require("@fw/plugin-ui-kit");
+function ProfileEditor({ mode, profileId, bots, onSave, onCancel, onDelete }) {
+  const ctx = usePackWorkspace();
+  const { callTool } = ctx;
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [botId, setBotId] = useState(mode === "create" && bots.length > 0 ? bots[0].id : "");
+  const [icon, setIcon] = useState("smartToy");
+  const [color, setColor] = useState("color-node-blue-icon");
+  const [costStrategy, setCostStrategy] = useState("balanced");
+  const [capabilities, setCapabilities] = useState([]);
+  const [capName, setCapName] = useState("");
+  const [capDescription, setCapDescription] = useState("");
+  const [instructions, setInstructions] = useState("");
+  const [requireApproval, setRequireApproval] = useState(false);
+  const [loading, setLoading] = useState(mode === "edit");
+  useEffect(() => {
+    if (mode !== "edit" || !profileId) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const raw = await callTool("fw_weaver_profile_list", {});
+        if (cancelled) return;
+        const data = typeof raw === "string" ? JSON.parse(raw) : raw;
+        const list = Array.isArray(data) ? data : [];
+        const profile = list.find((p) => p.id === profileId);
+        if (!profile) {
+          toast("Profile not found", { type: "error" });
+          onCancel();
+          return;
+        }
+        setName(profile.name || "");
+        setDescription(profile.description || "");
+        setBotId(profile.botId || "");
+        setIcon(profile.icon || "smartToy");
+        setColor(profile.color || "color-node-blue-icon");
+        const prefs = profile.preferences || {};
+        setCostStrategy(prefs.costStrategy || "balanced");
+        setCapabilities(
+          Array.isArray(profile.capabilities) ? profile.capabilities : []
+        );
+        setInstructions(prefs.instructions || "");
+        setRequireApproval(!!prefs.requireApproval);
+      } catch {
+        toast("Failed to load profile", { type: "error" });
+        onCancel();
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [mode, profileId, callTool, onCancel]);
+  const handleAddCapability = useCallback(() => {
+    const trimName = capName.trim();
+    const trimDesc = capDescription.trim();
+    if (!trimName || !trimDesc) return;
+    setCapabilities((prev) => [...prev, { name: trimName, description: trimDesc }]);
+    setCapName("");
+    setCapDescription("");
+  }, [capName, capDescription]);
+  const handleRemoveCapability = useCallback((index) => {
+    setCapabilities((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+  const handleSave = useCallback(async () => {
+    if (!name.trim()) {
+      toast("Profile name is required", { type: "error" });
+      return;
+    }
+    if (!botId) {
+      toast("Select a bot workflow", { type: "error" });
+      return;
+    }
+    if (capabilities.length === 0) {
+      toast("Add at least one capability", { type: "error" });
+      return;
+    }
+    try {
+      if (mode === "create") {
+        await callTool("fw_weaver_profile_create", {
+          name: name.trim(),
+          description: description.trim(),
+          botId,
+          icon,
+          color,
+          capabilities,
+          costStrategy,
+          instructions: instructions.trim() || void 0,
+          requireApproval
+        });
+        toast("Profile created", { type: "success" });
+      } else {
+        await callTool("fw_weaver_profile_update", {
+          id: profileId,
+          name: name.trim(),
+          description: description.trim(),
+          icon,
+          color,
+          capabilities,
+          costStrategy,
+          instructions: instructions.trim() || void 0,
+          requireApproval
+        });
+        toast("Profile updated", { type: "success" });
+      }
+      onSave();
+    } catch (err) {
+      toast(err instanceof Error ? err.message : `Failed to ${mode} profile`, { type: "error" });
+    }
+  }, [mode, profileId, name, description, botId, icon, color, costStrategy, capabilities, instructions, requireApproval, callTool, onSave]);
+  const handleDelete = useCallback(async () => {
+    if (!profileId) return;
+    const ok = await ctx.confirm("Are you sure you want to delete this profile?", {
+      title: "Delete Profile",
+      confirmLabel: "Delete",
+      state: "danger"
+    });
+    if (!ok) return;
+    try {
+      await callTool("fw_weaver_profile_delete", { id: profileId });
+      toast("Profile deleted", { type: "success" });
+      if (onDelete) onDelete();
+    } catch (err) {
+      toast(err instanceof Error ? err.message : "Failed to delete profile", { type: "error" });
+    }
+  }, [profileId, callTool, onDelete, ctx]);
+  if (loading) {
+    return React.createElement(
+      Flex,
+      {
+        variant: "column-center-center-nowrap-12",
+        style: { padding: "24px 16px" }
+      },
+      React.createElement(Typography, { variant: "caption-regular", color: "color-text-subtle" }, "Loading profile...")
+    );
+  }
+  return React.createElement(
+    Flex,
+    {
+      variant: "column-stretch-start-nowrap-0",
+      style: { width: "100%", height: "100%", overflow: "hidden" }
+    },
+    // ── Header bar ──
+    React.createElement(
+      Flex,
+      {
+        variant: "row-center-space-between-nowrap-8",
+        style: { padding: "8px 16px", flexShrink: 0, borderBottom: "1px solid var(--color-border-default)" }
+      },
+      React.createElement(
+        Flex,
+        { variant: "row-center-start-nowrap-8" },
+        React.createElement(IconButton, {
+          icon: "back",
+          size: "xs",
+          variant: "clear",
+          onClick: onCancel,
+          title: "Back"
+        }),
+        React.createElement(Typography, { variant: "caption-thick", color: "color-text-high" }, mode === "create" ? "Create Profile" : "Edit Profile")
+      ),
+      mode === "edit" && onDelete && React.createElement(IconButton, {
+        icon: "outlinedDelete",
+        size: "sm",
+        variant: "clear",
+        color: "danger",
+        onClick: handleDelete,
+        title: "Delete profile"
+      })
+    ),
+    // ── Scrollable form body ──
+    React.createElement(
+      Flex,
+      {
+        variant: "column-stretch-start-nowrap-10",
+        style: { flex: 1, minHeight: 0, overflow: "auto", padding: "12px 16px" }
+      },
+      // ── Name ──
+      React.createElement(
+        Field,
+        { label: "Name" },
+        React.createElement(Input, {
+          type: "text",
+          size: "small",
+          placeholder: "Profile name",
+          value: name,
+          onChange: (v) => setName(v),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+          inputBoxStyle: { maxWidth: "none" }
+        })
+      ),
+      // ── Description ──
+      React.createElement(
+        Field,
+        { label: "Description" },
+        React.createElement(Input, {
+          type: "text",
+          size: "small",
+          placeholder: "What does this profile do?",
+          value: description,
+          onChange: (v) => setDescription(v),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+          inputBoxStyle: { maxWidth: "none" }
+        })
+      ),
+      // ── Bot ──
+      React.createElement(
+        Field,
+        { label: "Bot" },
+        React.createElement(Input, {
+          type: "select",
+          size: "small",
+          options: bots.map((b) => ({ id: b.id, label: b.name, icon: b.icon || "smartToy" })),
+          optionId: botId,
+          onChange: (id) => setBotId(id),
+          disabled: mode === "edit",
+          placeholder: "Select bot",
+          defaultBoxStyle: { flex: 1, minWidth: 0 }
+        })
+      ),
+      // ── Icon ──
+      React.createElement(
+        Field,
+        { label: "Icon", align: "start" },
+        React.createElement(IconPicker, {
+          catalog: ICON_CATALOG,
+          value: icon,
+          onChange: (v) => setIcon(v),
+          accentColor: color,
+          variant: "inline"
+        })
+      ),
+      // ── Color ──
+      React.createElement(
+        Field,
+        { label: "Color", align: "start" },
+        React.createElement(ColorPicker, {
+          colors: BOT_COLORS,
+          value: color,
+          onChange: (v) => setColor(v),
+          variant: "inline"
+        })
+      ),
+      // ── Cost Strategy ──
+      React.createElement(
+        Field,
+        { label: "Cost Strategy" },
+        React.createElement(Input, {
+          type: "select",
+          size: "small",
+          options: [
+            { id: "frugal", label: "Frugal", icon: "timer" },
+            { id: "balanced", label: "Balanced", icon: "syncAlt" },
+            { id: "performance", label: "Performance", icon: "rocketLaunch" }
+          ],
+          optionId: costStrategy,
+          onChange: (id) => setCostStrategy(id),
+          defaultBoxStyle: { flex: 1, minWidth: 0 }
+        })
+      ),
+      // ── Capabilities ──
+      React.createElement(
+        Field,
+        { label: "Capabilities", align: "start" },
+        React.createElement(
+          Flex,
+          { variant: "column-stretch-start-nowrap-6" },
+          // Add capability row
+          React.createElement(
+            Flex,
+            { variant: "row-center-start-nowrap-4", style: { overflow: "hidden" } },
+            React.createElement(Input, {
+              type: "text",
+              size: "small",
+              placeholder: "Name",
+              value: capName,
+              onChange: (v) => setCapName(v),
+              defaultBoxStyle: { flex: 1, minWidth: 0 },
+              inputBoxStyle: { maxWidth: "none" }
+            }),
+            React.createElement(Input, {
+              type: "text",
+              size: "small",
+              placeholder: "Description",
+              value: capDescription,
+              onChange: (v) => setCapDescription(v),
+              onEnter: handleAddCapability,
+              defaultBoxStyle: { flex: 2, minWidth: 0 },
+              inputBoxStyle: { maxWidth: "none" }
+            }),
+            React.createElement(IconButton, {
+              icon: "add",
+              size: "sm",
+              variant: "outlined",
+              color: "primary",
+              onClick: handleAddCapability,
+              disabled: !capName.trim() || !capDescription.trim()
+            })
+          ),
+          ...capabilities.map(
+            (cap, idx) => React.createElement(
+              Flex,
+              {
+                key: `${cap.name}-${idx}`,
+                variant: "row-center-start-nowrap-6",
+                style: { paddingLeft: "4px" }
+              },
+              React.createElement(Typography, {
+                variant: "smallCaption-regular",
+                color: "color-text-high",
+                style: { flexShrink: 0 }
+              }, `\u2022 ${cap.name}:`),
+              React.createElement(Typography, {
+                variant: "smallCaption-regular",
+                color: "color-text-medium",
+                style: { flex: 1, minWidth: 0 }
+              }, cap.description),
+              React.createElement(IconButton, {
+                icon: "close",
+                size: "xs",
+                variant: "clear",
+                color: "danger",
+                onClick: () => handleRemoveCapability(idx)
+              })
+            )
+          )
+        )
+      ),
+      // ── Instructions ──
+      React.createElement(
+        Field,
+        { label: "Instructions" },
+        React.createElement(Input, {
+          type: "text",
+          size: "small",
+          placeholder: "Optional instructions for the bot",
+          value: instructions,
+          onChange: (v) => setInstructions(v),
+          defaultBoxStyle: { flex: 1, minWidth: 0 },
+          inputBoxStyle: { maxWidth: "none" }
+        })
+      ),
+      // ── Require Approval ──
+      React.createElement(
+        Field,
+        { label: "" },
+        React.createElement(Checkbox, {
+          checked: requireApproval,
+          onChange: (v) => setRequireApproval(v),
+          label: "Require approval",
+          size: "sm"
+        })
+      ),
+      // ── Save button ──
+      React.createElement(
+        Flex,
+        { variant: "row-center-end-nowrap-8" },
+        React.createElement(Button, {
+          size: "xs",
+          variant: "fill",
+          color: "primary",
+          onClick: handleSave,
+          disabled: !name.trim() || !botId || capabilities.length === 0
+        }, mode === "create" ? "Create" : "Save")
+      )
+    )
+  );
+}
+var profile_editor_default = ProfileEditor;
+module.exports = ProfileEditor;