@wopr-network/platform-ui-core 1.0.0

package/src/hooks/use-plugin-setup-chat.ts

@@ -0,0 +1,211 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { apiFetch, apiFetchRaw } from "@/lib/api";
+import type { ChatMessage } from "@/lib/chat/types";
+
+interface PluginSetupState {
+  isOpen: boolean;
+  pluginId: string | null;
+  pluginName: string | null;
+  messages: ChatMessage[];
+  isConnected: boolean;
+  isTyping: boolean;
+  isComplete: boolean;
+}
+
+export interface UsePluginSetupChatReturn {
+  state: PluginSetupState;
+  openSetup: (pluginId: string, pluginName: string, botId: string) => void;
+  closeSetup: () => void;
+  sendMessage: (text: string) => void;
+}
+
+const initialState: PluginSetupState = {
+  isOpen: false,
+  pluginId: null,
+  pluginName: null,
+  messages: [],
+  isConnected: false,
+  isTyping: false,
+  isComplete: false,
+};
+
+type SseEvent =
+  | { type: "text"; delta: string }
+  | { type: "tool_call"; tool: string; args: Record<string, unknown> }
+  | { type: "typing" };
+
+export function usePluginSetupChat(
+  onComplete?: (pluginId: string) => void,
+): UsePluginSetupChatReturn {
+  const [state, setState] = useState<PluginSetupState>(initialState);
+  const abortRef = useRef<AbortController | null>(null);
+  const botIdRef = useRef<string | null>(null);
+  const sessionIdRef = useRef<string | null>(null);
+  const pluginIdRef = useRef(state.pluginId);
+  useEffect(() => {
+    pluginIdRef.current = state.pluginId;
+  }, [state.pluginId]);
+
+  // Abort on unmount
+  useEffect(() => {
+    return () => {
+      abortRef.current?.abort();
+    };
+  }, []);
+
+  const openSetup = useCallback(
+    (pluginId: string, pluginName: string, botId: string) => {
+      abortRef.current?.abort();
+
+      botIdRef.current = botId;
+      pluginIdRef.current = pluginId;
+      setState({
+        isOpen: true,
+        pluginId,
+        pluginName,
+        messages: [],
+        isConnected: false,
+        isTyping: false,
+        isComplete: false,
+      });
+
+      const controller = new AbortController();
+      abortRef.current = controller;
+
+      const sessionId = crypto.randomUUID();
+      sessionIdRef.current = sessionId;
+
+      const params = new URLSearchParams({ pluginId, botId, sessionId });
+
+      apiFetchRaw(`/chat/setup?${params.toString()}`, { signal: controller.signal })
+        .then(async (res) => {
+          if (!res.body) {
+            setState((s) => ({ ...s, isConnected: false }));
+            return;
+          }
+          setState((s) => ({ ...s, isConnected: true }));
+          const reader = res.body.getReader();
+          const decoder = new TextDecoder();
+          let buffer = "";
+
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) {
+              setState((s) => ({ ...s, isTyping: false }));
+              break;
+            }
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split("\n");
+            buffer = lines.pop() ?? "";
+
+            for (const line of lines) {
+              if (!line.startsWith("data:")) continue;
+              const raw = line.slice(5).trimStart();
+              if (!raw || raw === "[DONE]") continue;
+
+              try {
+                const event = JSON.parse(raw) as SseEvent;
+
+                if (event.type === "text") {
+                  setState((s) => {
+                    const last = s.messages[s.messages.length - 1];
+                    if (last?.role === "bot") {
+                      const updated = [...s.messages];
+                      updated[updated.length - 1] = {
+                        ...last,
+                        content: last.content + event.delta,
+                      };
+                      return { ...s, messages: updated, isTyping: false };
+                    }
+                    return {
+                      ...s,
+                      isTyping: false,
+                      messages: [
+                        ...s.messages,
+                        {
+                          id: crypto.randomUUID(),
+                          role: "bot" as const,
+                          content: event.delta,
+                          timestamp: Date.now(),
+                        },
+                      ],
+                    };
+                  });
+                } else if (event.type === "tool_call" && event.tool === "setup.complete") {
+                  setState((s) => ({ ...s, isComplete: true }));
+                  onComplete?.(pluginId);
+                } else if (event.type === "tool_call" && event.tool === "setup.rollback") {
+                  const reason =
+                    typeof event.args?.reason === "string" ? event.args.reason : "Setup failed";
+                  setState((s) => ({
+                    ...s,
+                    messages: [
+                      ...s.messages,
+                      {
+                        id: crypto.randomUUID(),
+                        role: "event" as const,
+                        content: reason,
+                        timestamp: Date.now(),
+                      },
+                    ],
+                  }));
+                } else if (event.type === "typing") {
+                  setState((s) => ({ ...s, isTyping: true }));
+                }
+              } catch {
+                // Ignore malformed SSE lines
+              }
+            }
+          }
+        })
+        .catch(() => {
+          // AbortError is expected on close — ignore
+          setState((s) => ({ ...s, isTyping: false }));
+        });
+    },
+    [onComplete],
+  );
+
+  const closeSetup = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    botIdRef.current = null;
+    pluginIdRef.current = null;
+    setState(initialState);
+  }, []);
+
+  const sendMessage = useCallback((text: string) => {
+    const currentPluginId = pluginIdRef.current;
+    const currentBotId = botIdRef.current;
+    if (!currentPluginId || !currentBotId) return;
+
+    setState((s) => ({
+      ...s,
+      messages: [
+        ...s.messages,
+        {
+          id: crypto.randomUUID(),
+          role: "user" as const,
+          content: text,
+          timestamp: Date.now(),
+        },
+      ],
+    }));
+
+    apiFetch<void>("/chat/setup/message", {
+      method: "POST",
+      body: JSON.stringify({
+        pluginId: currentPluginId,
+        botId: currentBotId,
+        sessionId: sessionIdRef.current,
+        text,
+      }),
+    }).catch(() => {
+      // Message send failure — bot will not respond, user can retry
+    });
+  }, []);
+
+  return { state, openSetup, closeSetup, sendMessage };
+}

package/src/hooks/use-save-queue.ts

@@ -0,0 +1,54 @@
+import { useCallback, useRef, useState } from "react";
+
+/**
+ * Serializes concurrent saves with coalescing.
+ *
+ * If a save is in-flight and more arrive, only the latest payload is kept
+ * (intermediate ones are discarded). When the in-flight save finishes, the
+ * pending payload is dispatched immediately.
+ */
+export function useSaveQueue<T>(saveFn: (payload: T) => Promise<void>) {
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const inFlightRef = useRef(false);
+  const pendingRef = useRef<T | null>(null);
+
+  const flush = useCallback(
+    async (payload: T) => {
+      inFlightRef.current = true;
+      setSaving(true);
+      setError(null);
+      try {
+        await saveFn(payload);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        const next = pendingRef.current;
+        pendingRef.current = null;
+        if (next !== null) {
+          // Tail-call: run the next pending payload
+          void flush(next);
+        } else {
+          inFlightRef.current = false;
+          setSaving(false);
+        }
+      }
+    },
+    [saveFn],
+  );
+
+  const enqueue = useCallback(
+    (payload: T) => {
+      if (inFlightRef.current) {
+        // Coalesce: overwrite any previously queued payload
+        pendingRef.current = payload;
+      } else {
+        void flush(payload);
+      }
+    },
+    [flush],
+  );
+
+  return { enqueue, saving, error };
+}

package/src/hooks/use-webmcp.ts

@@ -0,0 +1,40 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useRef } from "react";
+import { useSession } from "@/lib/auth-client";
+import { registerWebMCPTools } from "@/lib/webmcp/register";
+
+/**
+ * Hook that registers WebMCP tools when the user is authenticated.
+ *
+ * Call this once in the dashboard layout (or root authenticated layout).
+ * It's safe to call multiple times -- registration is idempotent
+ * (guarded by a ref).
+ */
+export function useWebMCP(): void {
+  const { data: session } = useSession();
+  const registeredRef = useRef(false);
+  const router = useRouter();
+
+  const confirm = useCallback(
+    (message: string): Promise<boolean> => Promise.resolve(window.confirm(message)),
+    [],
+  );
+
+  useEffect(() => {
+    const isAuthenticated = session?.user != null;
+
+    if (!isAuthenticated) {
+      registeredRef.current = false;
+    }
+
+    if (registeredRef.current) return;
+
+    const registered = registerWebMCPTools(isAuthenticated, confirm, { router });
+
+    if (registered) {
+      registeredRef.current = true;
+    }
+  }, [session, confirm, router]);
+}

package/src/lib/__tests__/__snapshots__/pricing-data.test.ts.snap

@@ -0,0 +1,112 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`pricing-data > capabilityMeta > matches snapshot 1`] = `
+{
+  "image_gen": {
+    "category": "Image Generation",
+    "icon": "image",
+  },
+  "llm": {
+    "category": "Text Generation",
+    "icon": "bot",
+  },
+  "sms": {
+    "category": "Messaging",
+    "icon": "smartphone",
+  },
+  "stt": {
+    "category": "Voice",
+    "icon": "mic",
+  },
+  "tts": {
+    "category": "Voice",
+    "icon": "mic",
+  },
+}
+`;
+
+exports[`pricing-data > pricingData > matches snapshot 1`] = `
+{
+  "bot_price": {
+    "amount": 5,
+    "period": "month",
+  },
+  "capabilities": [
+    {
+      "category": "Text Generation",
+      "icon": "bot",
+      "models": [
+        {
+          "name": "Claude Sonnet 4.6",
+          "price": 3,
+          "unit": "1M input tokens",
+        },
+        {
+          "name": "Claude Opus 4.6",
+          "price": 15,
+          "unit": "1M input tokens",
+        },
+        {
+          "name": "Gemini 2.5 Pro",
+          "price": 1.25,
+          "unit": "1M input tokens",
+        },
+        {
+          "name": "GPT-4o",
+          "price": 2.5,
+          "unit": "1M input tokens",
+        },
+        {
+          "name": "Kimi K3",
+          "price": 0.8,
+          "unit": "1M input tokens",
+        },
+      ],
+    },
+    {
+      "category": "Voice",
+      "icon": "mic",
+      "models": [
+        {
+          "name": "Text-to-Speech",
+          "price": 0.2,
+          "unit": "1K characters",
+        },
+        {
+          "name": "Speech-to-Text",
+          "price": 0.02,
+          "unit": "minute",
+        },
+      ],
+    },
+    {
+      "category": "Image Generation",
+      "icon": "image",
+      "models": [
+        {
+          "name": "SDXL",
+          "price": 0.03,
+          "unit": "image",
+        },
+        {
+          "name": "Flux",
+          "price": 0.05,
+          "unit": "image",
+        },
+      ],
+    },
+    {
+      "category": "Messaging",
+      "icon": "smartphone",
+      "models": [
+        {
+          "name": "SMS",
+          "price": 0.01,
+          "unit": "message",
+        },
+      ],
+    },
+  ],
+  "signup_credit": 5,
+}
+`;