plugeen 0.0.4 → 0.0.7

package/dist/index.js

@@ -65,6 +65,7 @@ function getOrCreateIdentity() {
 var SESSION_KEY = "pl_session";
 function getOrCreateSessionId() {
   try {
+    if (typeof window === "undefined") return "";
     const existing = sessionStorage.getItem(SESSION_KEY);
     if (existing) return existing;
     throw new Error("No session ID");
@@ -102,122 +103,17 @@ var createApi = (apiKey, options) => {
   };
 };
 
-// src/lib/helpers/plugins.ts
-var plugins = {
-  insights: {
-    registry: "insights",
-    identifier: "insight.created",
-    schema: {
-      queryName: "Checkout funnel",
-      chartType: "line"
-    }
-  },
-  analytics: {
-    registry: "analytics",
-    identifier: "analytics.page_view",
-    schema: {
-      event: "page_view",
-      path: "/pricing",
-      url: "https://example.com/pricing",
-      title: "Pricing",
-      referrer: "https://google.com",
-      sessionId: "session_01"
-    }
-  },
-  "session.replay": {
-    registry: "session.replay",
-    identifier: "session.replay.recording",
-    schema: {
-      sessionId: "session_01HX8PDMW3Q8D4",
-      visitorId: "visitor_01",
-      durationMs: 184e3,
-      pageCount: 7,
-      clickCount: 34,
-      rageClicks: 2,
-      deadClicks: 1,
-      hasError: true,
-      device: "desktop",
-      browser: "Chrome",
-      path: "/checkout"
-    }
-  },
-  "feature.flags": {
-    registry: "feature.flags",
-    identifier: "feature.flag.evaluated",
-    schema: {
-      flagKey: "new-checkout",
-      enabled: true,
-      variant: "treatment",
-      reason: "rollout",
-      userId: "user_01",
-      environment: "production"
-    }
-  },
-  experiments: {
-    registry: "experiments",
-    identifier: "experiment.exposed",
-    schema: {
-      experimentKey: "pricing-page-test",
-      variant: "variant-b",
-      userId: "user_01",
-      metric: "signup",
-      converted: true,
-      value: 49
-    }
-  },
-  surveys: {
-    registry: "surveys",
-    identifier: "survey.response",
-    schema: {
-      surveyId: "nps-q2",
-      question: "How likely are you to recommend us?",
-      response: "The dashboard is fast",
-      rating: 9,
-      sentiment: "positive",
-      userId: "user_01",
-      path: "/dashboard"
-    }
-  },
-  "log.tracing": {
-    registry: "log.tracing",
-    identifier: "log.error",
-    schema: {
-      level: "error",
-      message: "Checkout failed to create payment intent",
-      traceId: "trace_01HX8PK2B9M8A1",
-      spanId: "span_checkout",
-      service: "payments-api",
-      environment: "production",
-      route: "POST /api/checkout",
-      release: "2026.04.25",
-      runtime: "nodejs",
-      file: "src/server/checkout.ts",
-      line: 142,
-      stack: "Error: payment intent failed"
-    }
-  },
-  "contact.chat": {
-    registry: "contact.chat",
-    identifier: "floating.chat.message",
-    schema: {
-      id: "chat_123",
-      origin: "system",
-      message: "I want some help",
-      resolved: false
-    }
-  }
-};
-
 // src/lib/plugins/analytics/index.ts
 function initAnalytics(api) {
   const init = () => {
-    if (typeof window === "undefined") return;
     const changePage = () => {
       api.post("/plugins/analytics", {
         event: "page_view",
         url: location.href,
         title: document.title,
         referrer: document.referrer ?? "",
+        screenWidth: window.screen.width,
+        screenHeight: window.screen.height,
         sessionId: getOrCreateSessionId()
       });
     };
@@ -226,14 +122,141 @@ function initAnalytics(api) {
       pushState.apply(this, args);
       changePage();
     };
-    window.addEventListener("popstate", changePage);
+    const replaceState = history.replaceState;
+    history.replaceState = function(...args) {
+      replaceState.apply(this, args);
+      changePage;
+    };
+    window.addEventListener("popstate", () => changePage());
     changePage();
   };
   return init();
 }
 
 // src/lib/plugins/chat/index.tsx
-import { useState } from "preact/hooks";
+import { signal as signal2 } from "@preact/signals";
+import { MessageCircle, X } from "lucide-preact";
+
+// src/store/theme.ts
+import { signal } from "@preact/signals";
+var theme = signal({
+  accentColor: "",
+  foregroundColor: ""
+});
+
+// src/components/button.tsx
+import { jsx } from "preact/jsx-runtime";
+function Button({ children, disabled, fullWidth }) {
+  const deactivated = disabled;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "submit",
+      disabled: deactivated,
+      style: {
+        background: theme.value.accentColor,
+        color: theme.value.foregroundColor,
+        width: fullWidth ? "100%" : "max-content",
+        border: "none",
+        borderRadius: "8px",
+        padding: "8px 0",
+        fontWeight: "600",
+        fontSize: "13px",
+        opacity: deactivated ? 0.5 : 1,
+        cursor: deactivated ? "not allowed" : "pointer",
+        transition: "all 0.4s ease"
+      },
+      children
+    }
+  );
+}
+
+// src/hooks/use-query.ts
+import { useEffect, useRef, useState } from "preact/hooks";
+var cache = /* @__PURE__ */ new Map();
+function serializeKey(key) {
+  return typeof key === "string" ? key : JSON.stringify(key);
+}
+function useQuery({
+  queryKey,
+  queryFn,
+  revalidateTime = 0
+}) {
+  const key = serializeKey(queryKey);
+  const [state, setState] = useState({
+    data: void 0,
+    error: void 0,
+    isLoading: true,
+    isFetching: false
+  });
+  const mounted = useRef(true);
+  async function fetchData(initial = false) {
+    try {
+      setState((prev) => ({
+        ...prev,
+        isLoading: initial,
+        isFetching: !initial,
+        error: void 0
+      }));
+      const data = await queryFn();
+      cache.set(key, {
+        data,
+        updatedAt: Date.now()
+      });
+      if (!mounted.current) return;
+      setState({
+        data,
+        error: void 0,
+        isLoading: false,
+        isFetching: false
+      });
+    } catch (error) {
+      if (!mounted.current) return;
+      setState({
+        data: void 0,
+        error,
+        isLoading: false,
+        isFetching: false
+      });
+    }
+  }
+  useEffect(() => {
+    mounted.current = true;
+    const cached = cache.get(key);
+    if (cached) {
+      const isStale = Date.now() - cached.updatedAt > revalidateTime;
+      setState({
+        data: cached.data,
+        error: void 0,
+        isLoading: false,
+        isFetching: isStale
+      });
+      if (isStale) {
+        fetchData(false);
+      }
+    } else {
+      fetchData(true);
+    }
+    return () => {
+      mounted.current = false;
+    };
+  }, [key]);
+  useEffect(() => {
+    let interval;
+    if (revalidateTime > 0) {
+      interval = setInterval(() => {
+        fetchData(false);
+      }, revalidateTime);
+    }
+    return () => {
+      clearInterval(interval);
+    };
+  }, [revalidateTime]);
+  return {
+    ...state,
+    refetch: () => fetchData(false)
+  };
+}
 
 // src/lib/helpers/ui.ts
 import { render as preactRender } from "preact";
@@ -251,11 +274,16 @@ function getOrCreateRoot(target, id) {
 }
 function renderUI({
   component: Component,
-  id
+  id,
+  options
 }) {
   if (typeof document === "undefined") {
     return { render: () => void 0, unmount: noopUnmount };
   }
+  theme.value = {
+    accentColor: options.accentColor,
+    foregroundColor: options.foregroundColor
+  };
   const target = document.body;
   const mount = () => {
     const container = getOrCreateRoot(document.body, id);
@@ -278,22 +306,34 @@ function renderUI({
 }
 
 // src/lib/plugins/chat/index.tsx
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-var pluginName = "contact.chat";
-function FloatingChat({ id, api, accentColor }) {
-  const [open, setOpen] = useState(false);
-  const onSubmit = (e) => {
-    e.preventDefault();
-    const data = new FormData(e.currentTarget);
-    const message = String(data.get("message") ?? "");
-    api.post("/plugins/chat", {
-      id,
-      message,
-      origin: "plugin",
-      resolved: false
+import { jsx as jsx2, jsxs } from "preact/jsx-runtime";
+var pluginName = "chats";
+var text = signal2("");
+var open = signal2(false);
+var submitting = signal2(false);
+function FloatingChat({
+  api,
+  options: { accentColor, foregroundColor },
+  id
+}) {
+  const identity = getStorage().get("identity");
+  const { data, refetch, isLoading, error } = useQuery({
+    queryKey: [id],
+    queryFn: async () => {
+      return await api.get("/plugins/chats");
+    },
+    revalidateTime: 1e4
+  });
+  const onSubmit = async () => {
+    submitting.value = true;
+    await api.post("/plugins/chats", {
+      text: text.value
     });
-    e.currentTarget.reset();
+    await refetch();
+    text.value = "";
+    submitting.value = false;
   };
+  if (!data && !error && isLoading) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -305,7 +345,7 @@ function FloatingChat({ id, api, accentColor }) {
         fontFamily: "system-ui, sans-serif"
       },
       children: [
-        open && /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -315,10 +355,12 @@ function FloatingChat({ id, api, accentColor }) {
               boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
               background: "#fff",
               overflow: "hidden",
-              border: "1px solid #e5e7eb"
+              maxHeight: open.value ? "500px" : "0px",
+              opacity: open.value ? 1 : 0,
+              transition: "all 0.4s ease"
             },
             children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 "div",
                 {
                   style: {
@@ -331,15 +373,73 @@ function FloatingChat({ id, api, accentColor }) {
                   children: "Chat with us"
                 }
               ),
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    display: "grid",
+                    height: "200px",
+                    overflowY: "auto",
+                    padding: "16px",
+                    gap: "4px"
+                  },
+                  children: data?.messages.map((m, index) => {
+                    const isMine = identity === m.identity.id;
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          justifySelf: isMine ? "start" : "end",
+                          width: "max-content"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx2(
+                            "p",
+                            {
+                              style: {
+                                padding: "2px 8px",
+                                borderRadius: "8px",
+                                width: "max-content",
+                                background: isMine ? "silver" : accentColor,
+                                color: isMine ? "black" : foregroundColor
+                              },
+                              children: m.text
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "12px",
+                                color: "silver",
+                                textAlign: isMine ? "left" : "right"
+                              },
+                              children: new Date(m.createdAt).toLocaleDateString()
+                            }
+                          )
+                        ]
+                      },
+                      m.text + index.toString()
+                    );
+                  })
+                }
+              ),
               /* @__PURE__ */ jsxs(
                 "form",
                 {
-                  onSubmit: (values) => onSubmit(values),
+                  onSubmit: (e) => {
+                    e.preventDefault();
+                    onSubmit();
+                  },
                   style: { padding: "12px 16px" },
                   children: [
-                    /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2(
                       "textarea",
                       {
+                        value: text.value,
+                        onInput: (e) => {
+                          text.value = e.target?.value;
+                        },
                         name: "message",
                         placeholder: "Send us a message\u2026",
                         rows: 3,
@@ -355,38 +455,24 @@ function FloatingChat({ id, api, accentColor }) {
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "submit",
-                        style: {
-                          marginTop: "8px",
-                          width: "100%",
-                          background: accentColor,
-                          color: "#fff",
-                          border: "none",
-                          borderRadius: "8px",
-                          padding: "8px 0",
-                          fontWeight: "600",
-                          fontSize: "13px",
-                          cursor: "pointer"
-                        },
-                        children: "Send"
-                      }
-                    )
+                    /* @__PURE__ */ jsx2(Button, { fullWidth: true, disabled: !text.value, children: submitting.value ? "Sending" : "Send" })
                   ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
-            onClick: () => setOpen((v) => !v),
+            onClick: () => {
+              open.value = !open.value;
+            },
             "aria-label": "Open chat",
             style: {
+              transform: `rotate(${open.value ? 180 : 0}deg)`,
+              transition: "transform 0.4s ease",
               width: "52px",
               height: "52px",
               borderRadius: "50%",
@@ -399,26 +485,7 @@ function FloatingChat({ id, api, accentColor }) {
               boxShadow: "0 4px 16px rgba(0,0,0,0.18)",
               marginLeft: "auto"
             },
-            children: /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                width: "24",
-                height: "24",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "#fff",
-                "stroke-width": "2",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round",
-                children: [
-                  /* @__PURE__ */ jsx("title", { children: "Svg" }),
-                  open ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                  ] }) : /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
-                ]
-              }
-            )
+            children: open.value ? /* @__PURE__ */ jsx2(X, { color: foregroundColor }) : /* @__PURE__ */ jsx2(MessageCircle, { color: foregroundColor })
           }
         )
       ]
@@ -428,8 +495,9 @@ function FloatingChat({ id, api, accentColor }) {
 function initChat(api, options) {
   const id = crypto.randomUUID();
   const { render } = renderUI({
-    component: /* @__PURE__ */ jsx(FloatingChat, { id, api, accentColor: options.accentColor }),
-    id: pluginName
+    component: /* @__PURE__ */ jsx2(FloatingChat, { id, api, options }),
+    id: pluginName,
+    options
   });
   return render();
 }
@@ -437,7 +505,10 @@ function initChat(api, options) {
 // src/lib/plugins/events/index.ts
 function initEvents(api) {
   return {
-    create: (eventName, data) => api.post("/events", { name: eventName, data })
+    create: (eventName, data) => api.post("/events", {
+      name: eventName,
+      data
+    })
   };
 }
 
@@ -452,7 +523,9 @@ function initExperiments(api) {
 function initFeatureFlags(api) {
   return {
     get: async (flagKey) => {
-      return api.get(`/plugins/feature-flags/${flagKey}`);
+      return api.get(
+        `/plugins/feature-flags/${flagKey}`
+      );
     }
   };
 }
@@ -486,7 +559,11 @@ function initSurveys(api) {
 }
 
 // src/lib/plugins/index.ts
-var getConfigs = (apiKey, options) => {
+var reset = `
+*, *::before, *::after { box-sizing: border-box; margin: 0; }
+body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
+`;
+var initBaseSdk = (apiKey, options) => {
   const api = createApi(apiKey, options);
   return {
     events: initEvents(api),
@@ -497,48 +574,51 @@ var getConfigs = (apiKey, options) => {
     experiments: initExperiments(api)
   };
 };
-var getInitializer = (apiKey, options) => {
-  const allPlugins = Object.keys(plugins);
-  return allPlugins.map((plugin) => {
-    const api = createApi(apiKey, options);
-    return {
-      analytics: () => initAnalytics(api),
-      "contact.chat": () => initChat(api, options),
-      "feature.flags": () => {
-      },
-      experiments: () => {
-      },
-      "log.tracing": () => {
-      },
-      "session.replay": () => {
-      },
-      insights: () => {
-      },
-      surveys: () => {
-      }
-    }[plugin];
-  });
-};
+function initClientSdk(apiKey, options) {
+  const isBrowser = typeof window !== "undefined";
+  const api = createApi(apiKey, options);
+  if (isBrowser) {
+    const style = document.createElement("style");
+    style.innerHTML = reset;
+    document.head.appendChild(style);
+    if (options.plugins.includes("chats")) {
+      initChat(api, options);
+    }
+    if (options.plugins.includes("analytics")) {
+      initAnalytics(api);
+    }
+    return {};
+  }
+  return null;
+}
 
 // src/lib/index.ts
 var defaultOptions = {
-  baseUrl: "https://plugeen.app/api"
+  baseUrl: "https://plugeen.app/api",
+  accentColor: "#4f46e5",
+  foregroundColor: "#fff",
+  plugins: []
 };
-function createSdk(apiKey, options) {
+var baseInstance = null;
+var clientInstance = null;
+function createPlugeen(apiKey, options) {
+  const _options = {
+    baseUrl: options?.baseUrl || defaultOptions.baseUrl,
+    accentColor: options?.accentColor || defaultOptions.accentColor,
+    foregroundColor: options?.foregroundColor || defaultOptions.foregroundColor,
+    plugins: options?.plugins || []
+  };
   if (!apiKey) {
     console.warn("[Plugeen] Missing data-api-key attribute.");
   }
-  const _options = {
-    ...defaultOptions,
-    ...options
-  };
-  if (apiKey) {
-    getInitializer(apiKey, _options).forEach((item) => {
-      item();
-    });
+  if (!baseInstance) {
+    baseInstance = initBaseSdk(apiKey, _options);
+  }
+  if (!clientInstance) {
+    clientInstance = initClientSdk(apiKey, _options);
   }
-  return getConfigs(apiKey, _options);
+  return baseInstance;
 }
 export {
-  createSdk
+  createPlugeen
 };