@magemetrics/ai 0.0.27 → 0.0.28

package/dist/react/index.d.ts

@@ -1,15 +1,9 @@
+import { colorsTuple } from '@mantine/core';
 import { ComponentPropsWithoutRef } from 'react';
-import { default as default_2 } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { MantineColorsTuple } from '@mantine/core';
 
-declare type AppWrapperProps = {
-    apiKey: string;
-    externalJWT: string;
-    apiUrl: string;
-    display?: string;
-    themeColors?: ThemeColors;
-};
+export { colorsTuple }
 
 declare type ControlledModalProps = {
     visible: boolean;
@@ -23,11 +17,6 @@ declare type DisplayControlProps = {
 
 export declare const logout: () => Promise<void>;
 
-export declare const MageMetricsDataTable: default_2.FC<{
-    flowId: string;
-    flowDataId: number;
-} & AppWrapperProps>;
-
 export declare const MageMetricsModal: (props: MageMetricsModalProps) => JSX.Element;
 
 declare type MageMetricsModalProps = ComponentPropsWithoutRef<typeof MainModal> & {

package/dist/web-component/{browser-BwTlMJQO.js → browser-yp_VhCQy.js}

@@ -1,4 +1,4 @@
-import { g as o } from "./web-component-D6IanYiA.js";
+import { g as o } from "./web-component-J_lmvPsd.js";
 var r, e;
 function t() {
   return e || (e = 1, r = function() {

package/dist/web-component/{web-component-D6IanYiA.js → web-component-J_lmvPsd.js}

@@ -12259,7 +12259,7 @@ class RealtimeClient {
         close: () => {
           this.conn = null;
         }
-      }), import("./browser-BwTlMJQO.js").then((R) => R.b).then(({ default: R }) => {
+      }), import("./browser-yp_VhCQy.js").then((R) => R.b).then(({ default: R }) => {
         this.conn = new R(this.endpointURL(), void 0, {
           headers: this.headers
         }), this.setupConnection();
@@ -43434,7 +43434,7 @@ const defaultProps$s = {}, ModalCloseButton = factory((C, R) => {
 });
 ModalCloseButton.classes = classes$b;
 ModalCloseButton.displayName = "@mantine/core/ModalCloseButton";
-const defaultProps$r = {}, ModalContent = factory((C, R) => {
+const defaultProps$r = {}, ModalContent$1 = factory((C, R) => {
   const M = useProps("ModalContent", defaultProps$r, C), { classNames: D, className: F, style: H, styles: U, vars: q, children: G, __hidden: Z, ...Y } = M, Q = useModalContext(), J = Q.scrollAreaComponent || NativeScrollArea;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseContent,
@@ -43458,8 +43458,8 @@ const defaultProps$r = {}, ModalContent = factory((C, R) => {
     }
   );
 });
-ModalContent.classes = classes$b;
-ModalContent.displayName = "@mantine/core/ModalContent";
+ModalContent$1.classes = classes$b;
+ModalContent$1.displayName = "@mantine/core/ModalContent";
 const defaultProps$q = {}, ModalHeader = factory((C, R) => {
   const M = useProps("ModalHeader", defaultProps$q, C), { classNames: D, className: F, style: H, styles: U, vars: q, ...G } = M, Z = useModalContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -43634,7 +43634,7 @@ const defaultProps$m = {
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          ModalContent,
+          ModalContent$1,
           {
             radius: G,
             __hidden: te && Y && Z ? Y !== te.currentId : !1,
@@ -43655,7 +43655,7 @@ Modal.classes = classes$b;
 Modal.displayName = "@mantine/core/Modal";
 Modal.Root = ModalRoot;
 Modal.Overlay = ModalOverlay;
-Modal.Content = ModalContent;
+Modal.Content = ModalContent$1;
 Modal.Body = ModalBody;
 Modal.Header = ModalHeader;
 Modal.Title = ModalTitle;
@@ -47431,6 +47431,7 @@ const SuccessVersion$4 = z$1.object({
   status: z$1.literal("success"),
   public: z$1.object({}),
   private: z$1.object({
+    message: z$1.string().optional(),
     columns: z$1.object({
       id: z$1.number(),
       name: z$1.string(),
@@ -47490,6 +47491,7 @@ const SuccessVersion$4 = z$1.object({
   status: z$1.literal("success"),
   public: z$1.object({}),
   private: z$1.object({
+    message: z$1.string().optional(),
     columns: z$1.object({
       id: z$1.number(),
       name: z$1.string(),
@@ -55942,7 +55944,7 @@ const InsightsMessage = ({ children: C, tagText: R, isActive: M, ...D }) => {
             "data-active": M,
             "data-hovered": F,
             sx: () => ({
-              background: "white",
+              background: "var(--mantine-color-white)",
               "&[data-hovered=true]": {
                 background: "var(--mantine-color-mageWhisper-10)"
               },
@@ -56449,7 +56451,7 @@ const InsightsMessage = ({ children: C, tagText: R, isActive: M, ...D }) => {
     if (!supabase) return [];
     const { data: R, error: M } = await supabase.from("flows").select("*, flow_steps(*)").order("created_at", {
       ascending: !1
-    }).limit(10);
+    }).limit(C || 10);
     if (M)
       throw new Error(M.message);
     return R.map((D) => FlowSchema.parse(D));
@@ -79246,7 +79248,7 @@ const MotionStack$1 = motion.create(Stack), AnimatedBox = ({ children: C }) => /
                 border: "1px solid var(--mantine-color-mageGunmetal-1)"
               },
               '& [data-active="true"]': {
-                backgroundColor: "white",
+                backgroundColor: "var(--mantine-color-white)",
                 borderBottom: 0
               }
             }),
@@ -79280,7 +79282,7 @@ const MotionStack$1 = motion.create(Stack), AnimatedBox = ({ children: C }) => /
               overflow: "hidden",
               display: "flex",
               flexDirection: "column",
-              backgroundColor: "white",
+              backgroundColor: "var(--mantine-color-white)",
               border: "1px solid var(--mantine-color-mageGunmetal-1)",
               borderTop: 0,
               borderBottomLeftRadius: "var(--mantine-radius-md)",
@@ -79310,7 +79312,7 @@ const MotionStack$1 = motion.create(Stack), AnimatedBox = ({ children: C }) => /
               overflow: "hidden",
               display: "flex",
               flexDirection: "column",
-              backgroundColor: "white",
+              backgroundColor: "var(--mantine-color-white)",
               border: "1px solid var(--mantine-color-mageGunmetal-1)",
               borderTop: 0,
               borderBottomLeftRadius: "var(--mantine-radius-md)",
@@ -85425,7 +85427,7 @@ const TableBody$1 = ({ table: C, virtualizer: R, ...M }) => {
         {
           h: `${q.size}px`,
           style: {
-            backgroundColor: q.index % 2 === 0 ? "var(--table-striped-color)" : "white",
+            backgroundColor: q.index % 2 === 0 ? "var(--table-striped-color)" : "var(--mantine-color-white)",
             overflow: "hidden"
           },
           children: Z.getVisibleCells().map((Y) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -96133,24 +96135,22 @@ const ArtifactPaper = ({ text: C, ...R }) => /* @__PURE__ */ jsxRuntimeExports.j
 }), useRecommendations = () => useQuery(recommendationsQueryOptions()), DEFAULT_EVENTS = ["mousedown", "touchstart"], useShadowClickOutside = (C, R, M) => {
   const D = reactExports.useRef(null);
   return reactExports.useEffect(() => {
-    const F = (U) => {
-      var Y;
-      const { target: q } = U ?? {}, G = (Y = D.current) == null ? void 0 : Y.getRootNode(), Z = G instanceof ShadowRoot;
+    const F = new AbortController(), H = (G) => {
+      var J;
+      const { target: Z } = G ?? {}, Y = (J = D.current) == null ? void 0 : J.getRootNode(), Q = Y instanceof ShadowRoot;
       if (Array.isArray(M)) {
-        const Q = (q == null ? void 0 : q.hasAttribute("data-ignore-outside-clicks")) || !document.body.contains(q) && q.tagName !== "HTML", J = U.composedPath();
-        M.every((ie) => ie ? !J.includes(ie) : !0) && !Q && C();
+        const te = (Z == null ? void 0 : Z.hasAttribute("data-ignore-outside-clicks")) || !document.body.contains(Z) && Z.tagName !== "HTML", ie = G.composedPath();
+        M.every((oe) => oe ? !ie.includes(oe) : !0) && !te && C();
       } else if (D.current)
-        if (Z) {
-          const Q = U.composedPath(), J = Q.includes(G), te = Q.includes(D.current);
-          (!J || J && !te) && C();
-        } else D.current.contains(q) || C();
-    }, H = { capture: !0, passive: !0 };
+        if (Q) {
+          const te = G.composedPath(), ie = te.includes(Y), ne = te.includes(D.current);
+          (!ie || ie && !ne) && C();
+        } else D.current.contains(Z) || C();
+    }, U = { capture: !0, passive: !0, signal: F.signal };
     return DEFAULT_EVENTS.forEach(
-      (U) => document.addEventListener(U, F, H)
+      (G) => document.addEventListener(G, H, U)
     ), () => {
-      DEFAULT_EVENTS.forEach(
-        (U) => document.removeEventListener(U, F, H)
-      );
+      F.abort();
     };
   }, [D, C, M, R]), D;
 };
@@ -96786,17 +96786,14 @@ function PiFile(C) {
   return GenIcon({ attr: { viewBox: "0 0 256 256", fill: "currentColor" }, child: [{ tag: "path", attr: { d: "M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Z" }, child: [] }] })(C);
 }
 const TextSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { height: 24 }), RecentDashboardsDropdown = () => {
-  const C = useRecentFlows(), [R, M] = reactExports.useState(!1), D = useSetAtom(flowIdAtom), F = reactExports.useMemo(() => {
-    var U;
-    return (U = C.data) == null ? void 0 : U.slice(0, 5);
-  }, [C.data]), H = R ? "#DADADA" : "var(--mantine-color-body)";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  const { data: C, status: R } = useRecentFlows(5), [M, D] = reactExports.useState(!1), F = useSetAtom(flowIdAtom), H = M ? "#DADADA" : "var(--mantine-color-body)";
+  return !C || C.length == 0 ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Popover,
     {
       withinPortal: !1,
       width: 350,
-      opened: R,
-      onChange: M,
+      opened: M,
+      onChange: D,
       position: "top-start",
       offset: { mainAxis: -1, crossAxis: 0 },
       styles: {
@@ -96811,7 +96808,7 @@ const TextSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { hei
           Group,
           {
             gap: 4,
-            onClick: () => M((U) => !U),
+            onClick: () => D((U) => !U),
             style: {
               cursor: "pointer",
               userSelect: "none",
@@ -96834,7 +96831,7 @@ const TextSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { hei
                   size: 18,
                   color: "var(--mantine-color-mageGunmetal-1)",
                   style: {
-                    transform: R ? "rotate(-180deg)" : "",
+                    transform: M ? "rotate(-180deg)" : "",
                     transition: "all 0.2s"
                   }
                 }
@@ -96842,12 +96839,12 @@ const TextSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { hei
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { gap: 2, align: "stretch", children: C.status === "success" ? F == null ? void 0 : F.map((U) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { gap: 2, align: "stretch", children: R === "success" ? C.map((U) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           Button,
           {
             component: "a",
             onClick: (q) => {
-              q.preventDefault(), D(U.id);
+              q.preventDefault(), F(U.id);
             },
             size: "compact-md",
             leftSection: /* @__PURE__ */ jsxRuntimeExports.jsx(PiFile, { size: 14 }),
@@ -96868,6 +96865,7 @@ const TextSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { hei
               {
                 size: "sm",
                 fw: 400,
+                c: "black",
                 style: {
                   textOverflow: "ellipsis",
                   overflow: "hidden",
@@ -96913,6 +96911,9 @@ const TextSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { hei
       borderColor: "var(--mantine-primary-color-1)",
       "&::before": {
         opacity: 1
+      },
+      "&::after": {
+        opacity: 0
       }
     },
     "&::after": {
@@ -96988,22 +96989,21 @@ ${M}`);
   ] });
 }, MotionStack = motion.create(Stack), MotionModal = motion.create(Modal.Root), ControlledMageMetricsModal = ({
   children: C,
-  visible: R,
-  onClose: M
+  onClose: R
 }) => {
-  const { classes: D } = useModalStyles();
+  const { classes: M } = useModalStyles();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     MotionModal,
     {
-      opened: R,
+      opened: !0,
       closeOnEscape: !0,
       fullScreen: !0,
-      onClose: M,
+      onClose: R,
       transitionProps: { transition: "fade", duration: 200 },
       removeScrollProps: {
         enabled: !1
       },
-      className: D.centered,
+      className: M.centered,
       styles: {
         content: {
           display: "flex",
@@ -97041,22 +97041,21 @@ ${M}`);
       ]
     }
   );
-}, StartModal = ({
+}, ModalContent = ({
   showRecentDashboards: C,
   showRecommendations: R,
-  ...M
+  onClose: M
 }) => {
   const [D, F] = reactExports.useState(!1), H = useContextReady(), { classes: U } = useFlowTrackerStyles({}), q = useSetAtom(flowIdAtom), { mutate: G } = useStartFlow({
-    onSuccess: (se) => {
-      q(se.flowId);
+    onSuccess: (oe) => {
+      q(oe.flowId);
     }
   }), Z = useQueryClient();
   reactExports.useEffect(() => {
     H && (C && Z.prefetchQuery(recentFlowsQueryOptions()), R && Z.prefetchQuery(recommendationsQueryOptions()));
   }, [H, R, C, Z]);
   const Y = useShadowClickOutside(() => {
-    var se;
-    F(!1), (se = M.onClose) == null || se.call(M);
+    F(!1), M == null || M();
   }), Q = useForm({
     initialValues: {
       userQuery: ""
@@ -97066,12 +97065,13 @@ ${M}`);
         userQuery: z$1.string().nonempty("Please type in a request")
       })
     )
-  }), J = (se) => {
-    G(se.trim());
+  }), J = (oe) => {
+    G(oe.trim());
   }, te = reactExports.useMemo(
     () => Q.values.userQuery.length > 30 || /[\r\n]/.test(Q.values.userQuery) ? Q.values.userQuery.slice(0, 30).replace(/[\r\n]/g, " ") + "…" : Q.values.userQuery,
     [Q.values.userQuery]
-  ), ie = D && R, ne = D && C, oe = /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ), ie = D && R, ne = D && C;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
     MotionStack,
     {
       flex: 1,
@@ -97145,7 +97145,7 @@ ${M}`);
                         "form",
                         {
                           onSubmit: Q.onSubmit(
-                            (se) => J(se.userQuery)
+                            (oe) => J(oe.userQuery)
                           ),
                           style: { flex: "1" },
                           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -97174,8 +97174,8 @@ ${M}`);
                               onFocus: () => {
                                 F(!0);
                               },
-                              onKeyDown: (se) => {
-                                se.key === "Enter" && !se.shiftKey && (se.preventDefault(), Q.onSubmit((ce) => J(ce.userQuery))());
+                              onKeyDown: (oe) => {
+                                oe.key === "Enter" && !oe.shiftKey && (oe.preventDefault(), Q.onSubmit((se) => J(se.userQuery))());
                               }
                             },
                             Q.key("userQuery")
@@ -97193,8 +97193,25 @@ ${M}`);
     },
     "request-form"
   );
-  return M.onClose != null && M.visible != null ? /* @__PURE__ */ jsxRuntimeExports.jsx(ControlledMageMetricsModal, { visible: M.visible, onClose: M.onClose, children: oe }) : oe;
-}, defaultColors = {
+}, StartModal = ({
+  showRecentDashboards: C,
+  showRecommendations: R,
+  onClose: M
+}) => M != null ? /* @__PURE__ */ jsxRuntimeExports.jsx(ControlledMageMetricsModal, { onClose: M, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ModalContent,
+  {
+    showRecentDashboards: C,
+    showRecommendations: R,
+    onClose: M
+  }
+) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ModalContent,
+  {
+    showRecentDashboards: C,
+    showRecommendations: R,
+    onClose: M
+  }
+), defaultColors = {
   mageMagenta: [
     "#EED4EB",
     // 0
@@ -97285,13 +97302,13 @@ ${M}`);
 }, theme = (C, R) => ({
   cursorType: "pointer",
   colors: R ? {
-    mageGunmetal: R.darkAccent,
-    mageMagenta: R.primary,
+    mageGunmetal: R.primary,
+    mageMagenta: R.darkAccent,
     mageRuby: R.secondary,
     mageWhisper: R.lightAccent
   } : defaultColors,
   white: "var(--mantine-color-mageWhisper-6)",
-  black: "var(--mantine-color-mageGunmetal-6)",
+  black: R ? "black" : "var(--mantine-color-mageGunmetal-6)",
   primaryColor: "mageGunmetal",
   fontFamily: "'Bitter Variable', serif",
   fontFamilyMonospace: '"Source Code Pro Variable", monospace',
@@ -97452,30 +97469,23 @@ ${M}`);
     ) }) : null
   ] });
 }, InnerModal = ({
-  persist: C,
-  visible: R,
-  onClose: M,
-  showRecentDashboards: D,
-  showRecommendations: F
+  onClose: C,
+  showRecentDashboards: R,
+  showRecommendations: M
 }) => {
-  const H = useAtomValue(flowIdAtom), U = useAtomValue(activeModalAtom), q = useSetAtom(persistenceAtom);
-  reactExports.useEffect(() => {
-    q(C);
-  }, [C, q]);
-  const G = !!H, Z = G && U === "flow", Y = G && U === "exploreData", Q = !(Z || Y);
+  const D = useAtomValue(flowIdAtom), F = useAtomValue(activeModalAtom), H = !!D, U = H && F === "flow", q = H && F === "exploreData", G = !(U || q);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(AnimatePresence, { mode: "wait", children: [
-    Y && /* @__PURE__ */ jsxRuntimeExports.jsx(ExploreDataModal, {}),
-    Z && /* @__PURE__ */ jsxRuntimeExports.jsx(FlowModal, {}),
-    Q && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    q && /* @__PURE__ */ jsxRuntimeExports.jsx(ExploreDataModal, {}),
+    U && /* @__PURE__ */ jsxRuntimeExports.jsx(FlowModal, {}),
+    G && /* @__PURE__ */ jsxRuntimeExports.jsx(
       StartModal,
       {
-        showRecentDashboards: D !== void 0 ? D : !1,
-        showRecommendations: F !== void 0 ? F : !1,
-        visible: R,
-        onClose: M
+        showRecentDashboards: R !== void 0 ? R : !1,
+        showRecommendations: M !== void 0 ? M : !1,
+        onClose: C
       }
     )
-  ] }, H);
+  ] }, D);
 }, MainModal = ({
   apiKey: C,
   externalJWT: R,
@@ -97485,7 +97495,11 @@ ${M}`);
   startOptions: H = void 0,
   themeColors: U = void 0
 }) => {
-  const q = (F == null ? void 0 : F.visible) === !0 || F == null;
+  const q = useSetAtom(persistenceAtom);
+  reactExports.useEffect(() => {
+    q(D);
+  }, [D, q]);
+  const G = (F == null ? void 0 : F.visible) === !0 || F === void 0;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     AppWrapper,
     {
@@ -97493,11 +97507,9 @@ ${M}`);
       externalJWT: R,
       apiUrl: M,
       themeColors: U,
-      children: q && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: G && /* @__PURE__ */ jsxRuntimeExports.jsx(
         InnerModal,
         {
-          persist: D,
-          visible: q,
           onClose: F == null ? void 0 : F.onClose,
           showRecentDashboards: H == null ? void 0 : H.showRecentDashboards,
           showRecommendations: H == null ? void 0 : H.showRecommendations
@@ -97521,6 +97533,7 @@ ${M}`);
   customElements.get("magemetrics-ai") || customElements.define("magemetrics-ai", MagemetricsAI);
 };
 export {
+  colorsTuple as a,
   createMagemetrics as c,
   getDefaultExportFromCjs as g,
   logout as l

package/dist/web-component/web-component.es.d.ts

@@ -1,3 +1,7 @@
+import { colorsTuple } from '@mantine/core';
+
+export { colorsTuple }
+
 export declare const createMagemetrics: () => void;
 
 export declare const logout: () => Promise<void>;

package/dist/web-component/web-component.es.js

@@ -1,5 +1,6 @@
-import { c as o, l as r } from "./web-component-D6IanYiA.js";
+import { a as o, c as r, l as s } from "./web-component-J_lmvPsd.js";
 export {
-  o as createMagemetrics,
-  r as logout
+  o as colorsTuple,
+  r as createMagemetrics,
+  s as logout
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magemetrics/ai",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "type": "module",
   "dependencies": {
     "@ai-sdk/react": "^1.2.5",