randmarcomps 1.152.0 → 1.153.0

package/dist/randmarcomps.d.ts

@@ -48,6 +48,15 @@ export declare interface AiGeneratedContentProps {
     data: any;
 }
 
+declare interface ApiKeyContextType {
+    apiKey: string | null;
+    setApiKey: (key: string) => void;
+}
+
+export declare const ApiKeyProvider: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+
 export declare function AreaChart({ data, units, unitsPosition, width, height, className }: AreaChartProps): JSX.Element;
 
 export declare interface AreaChartProps {
@@ -582,6 +591,8 @@ export declare interface TopbarProps {
     searchPlaceholder?: string;
 }
 
+export declare const useApiKey: () => ApiKeyContextType;
+
 export declare function useIsMobile(): boolean;
 
 export declare function useSidebar(): SidebarContext;

package/dist/randmarcomps.js

@@ -7,7 +7,7 @@ var Ve = (e, t, n) => Yr(e, typeof t != "symbol" ? t + "" : t, n), Xr = (e, t, n
 var De = (e, t, n) => (Xr(e, t, "read from private field"), n ? n.call(e) : t.get(e)), at = (e, t, n) => t.has(e) ? Sr("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { forwardRef, createElement, useState, useLayoutEffect, useEffect, isValidElement, Children, PureComponent, useRef, useImperativeHandle, useCallback, useMemo, cloneElement, useContext, createContext, Component, useDebugValue, Fragment as Fragment$1 } from "react";
+import React__default, { forwardRef, createElement, useState, useLayoutEffect, useEffect, createContext, useContext, isValidElement, Children, PureComponent, useRef, useImperativeHandle, useCallback, useMemo, cloneElement, Component, useDebugValue, Fragment as Fragment$1 } from "react";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 import { Link, useLocation, useParams } from "react-router-dom";
@@ -9476,6 +9476,15 @@ function Toaster() {
     /* @__PURE__ */ jsx(ToastViewport, {})
   ] });
 }
+const ApiKeyContext = createContext(void 0), ApiKeyProvider = ({ children: e }) => {
+  const [t, n] = useState(null);
+  return /* @__PURE__ */ jsx(ApiKeyContext.Provider, { value: { apiKey: t, setApiKey: n }, children: e });
+}, useApiKey = () => {
+  const e = useContext(ApiKeyContext);
+  if (!e)
+    throw new Error("useApiKey must be used within an ApiKeyProvider");
+  return e;
+};
 var commonjsGlobal = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function getDefaultExportFromCjs(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
@@ -58854,22 +58863,38 @@ Dt = new WeakMap(), je = new WeakMap(), Ft = new WeakMap(), qt = new WeakMap(),
   renderUnrecognized: () => null
 });
 var source_default = JsxParser;
-function GetJSXFromAI(e, t) {
-  const n = "In addition to basic html tags, You have access to these beautiful Handmade Components: Button.", o = "Here is the data to display to the user (If a Handmade Component fits, use it. Otherwise, use regular html tags):", l = "Only output JSX with proper syntax. No text before, or after, and no need to define a code region with backticks (```). Start with <> and end with </>.", u = JSON.stringify(t);
-  return `<p>Work in progress. prompt=${[e, n, l, o, u, l].join(`\r
-`)}</p>`;
+const GetJSXFromAI = async (e, t, n, o = 3) => {
+  const l = "In addition to basic html tags, You have access to these beautiful Handmade Components: Button.", u = "Here is the data to display to the user (If a Handmade Component is a perfect fit for the data, use it. Otherwise, use regular html tags):", d = "Only output a single JSX code snippet. Start with <> and end with </>. All other code will be ignored, so make sure to place all CSS styles inline. Use CSS flex layouts when there is a lot of stuff to display.", f = JSON.stringify(n), p = [t, l, d, u, f, d].join(`\r
+`), b = await new GoogleGenAI({ apiKey: e }).chats.create({
+    model: "gemini-2.0-flash-lite"
+  }).sendMessage({ message: p }), _ = trimJSXString(b.text ?? "");
+  return _ || (o == 0 ? "<p>Failed to generate. Reload the page.</p>" : await GetJSXFromAI(e, t, n, o - 1));
+};
+function trimJSXString(e) {
+  const t = e.indexOf("<"), n = e.lastIndexOf("</");
+  return t === -1 || n === -1 ? "" : e.slice(t, e.indexOf(">", n) + 1);
 }
 function AiGeneratedContent(e) {
-  const { appID: t } = useParams(), n = useMemo(() => !e.prompt || !e.data ? "..." : GetJSXFromAI(e.prompt, e.data), [e.prompt, e.data]);
-  return /* @__PURE__ */ jsx(
+  const { appID: t } = useParams(), [n, o] = useState(""), { apiKey: l } = useApiKey();
+  return useEffect(() => {
+    if (!l || !e.prompt || !e.data) return;
+    o("");
+    let u = !1;
+    return GetJSXFromAI(l, e.prompt, e.data).then((d) => {
+      u || o(d);
+    }), () => {
+      u = !0;
+    };
+  }, [e.prompt, e.data, o]), n ? /* @__PURE__ */ jsx(
     source_default,
     {
       bindings: {
         appID: t
       },
+      components: { Button },
       jsx: n
     }
-  );
+  ) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-32", children: /* @__PURE__ */ jsx(Bot, { className: "m-auto align-middle h-full" }) }) });
 }
 const CountryFlag = ({ countryCode: e, className: t = "" }) => {
   const [n, o] = useState(null), [l, u] = useState(!1);
@@ -61064,6 +61089,7 @@ function SalesOverviewData({
 export {
   ActiveOrdersCard,
   AiGeneratedContent,
+  ApiKeyProvider,
   AreaChart,
   Avatar,
   AvatarFallback,
@@ -61186,6 +61212,7 @@ export {
   badgeVariants,
   buttonVariants,
   toast,
+  useApiKey,
   useIsMobile,
   useSidebar,
   useToast