sunpeak 0.2.3 → 0.2.5

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React3 from 'react';
-import { useSyncExternalStore, useCallback, useMemo, useState, useEffect } from 'react';
+import { useSyncExternalStore, useMemo, useState, useEffect, useCallback, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -51,49 +51,120 @@ var SetGlobalsEvent = class extends CustomEvent {
   }
 };
 
-// src/types/simulator.ts
-var SCREEN_WIDTHS = {
-  "mobile-s": 375,
-  "mobile-l": 425,
-  tablet: 768,
-  full: 1024
+// src/providers/openai.ts
+function isOpenAiAvailable() {
+  return typeof window !== "undefined" && window.openai != null;
+}
+var OpenAiProvider = class {
+  constructor() {
+    __publicField(this, "id", "openai");
+  }
+  getGlobal(key) {
+    if (typeof window === "undefined" || !window.openai) {
+      return null;
+    }
+    return window.openai[key] ?? null;
+  }
+  subscribe(key, onChange) {
+    if (typeof window === "undefined") {
+      return () => {
+      };
+    }
+    const handleEvent = (event) => {
+      if (event.detail.globals[key] !== void 0) {
+        onChange();
+      }
+    };
+    window.addEventListener(SET_GLOBALS_EVENT_TYPE, handleEvent, {
+      passive: true
+    });
+    return () => {
+      window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleEvent);
+    };
+  }
+  getAPI() {
+    if (typeof window === "undefined" || !window.openai) {
+      return null;
+    }
+    const api = window.openai;
+    return {
+      callTool: api.callTool?.bind(api),
+      sendFollowUpMessage: api.sendFollowUpMessage?.bind(api),
+      openExternal: api.openExternal?.bind(api),
+      requestDisplayMode: api.requestDisplayMode?.bind(api),
+      requestModal: api.requestModal?.bind(api),
+      notifyIntrinsicHeight: api.notifyIntrinsicHeight?.bind(api),
+      setWidgetState: api.setWidgetState?.bind(api)
+    };
+  }
 };
+var openAiProvider = null;
+function getOpenAiProvider() {
+  if (!openAiProvider) {
+    openAiProvider = new OpenAiProvider();
+  }
+  return openAiProvider;
+}
+
+// src/providers/index.ts
+var cachedProvider = null;
+var detectionComplete = false;
+function getProvider() {
+  if (detectionComplete) {
+    return cachedProvider;
+  }
+  if (isOpenAiAvailable()) {
+    cachedProvider = getOpenAiProvider();
+  }
+  detectionComplete = true;
+  return cachedProvider;
+}
+function isProviderAvailable() {
+  return getProvider() !== null;
+}
+function getGlobal(key) {
+  const provider = getProvider();
+  return provider?.getGlobal(key) ?? null;
+}
+function subscribeToGlobal(key, onChange) {
+  const provider = getProvider();
+  return provider?.subscribe(key, onChange) ?? (() => {
+  });
+}
+function getAPI() {
+  const provider = getProvider();
+  return provider?.getAPI() ?? null;
+}
+function resetProviderCache() {
+  cachedProvider = null;
+  detectionComplete = false;
+}
 
-// src/hooks/use-openai-global.ts
-function useOpenAiGlobal(key) {
+// src/hooks/use-widget-global.ts
+function useWidgetGlobal(key) {
   return useSyncExternalStore(
-    (onChange) => {
-      if (typeof window === "undefined") {
-        return () => {
-        };
-      }
-      const handleSetGlobal = (event) => {
-        const value = event.detail.globals[key];
-        if (value === void 0) {
-          return;
-        }
-        onChange();
-      };
-      window.addEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal, {
-        passive: true
-      });
-      return () => {
-        window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal);
-      };
-    },
-    () => window.openai?.[key] ?? null,
-    () => window.openai?.[key] ?? null
+    (onChange) => subscribeToGlobal(key, onChange),
+    () => getGlobal(key),
+    () => getGlobal(key)
   );
 }
+function useWidgetAPI() {
+  return useMemo(() => getAPI(), []);
+}
 
 // src/hooks/use-display-mode.ts
 var useDisplayMode = () => {
-  return useOpenAiGlobal("displayMode");
+  return useWidgetGlobal("displayMode");
+};
+
+// src/hooks/use-locale.ts
+var useLocale = () => {
+  return useWidgetGlobal("locale");
 };
 
 // src/hooks/use-max-height.ts
 var useMaxHeight = () => {
-  return useOpenAiGlobal("maxHeight");
+  return useWidgetGlobal("maxHeight");
 };
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
@@ -110,26 +181,84 @@ function useIsMobile() {
   return !!isMobile;
 }
 
+// src/hooks/use-safe-area.ts
+var useSafeArea = () => {
+  return useWidgetGlobal("safeArea");
+};
+
 // src/hooks/use-theme.ts
 var useTheme = () => {
-  return useOpenAiGlobal("theme");
+  return useWidgetGlobal("theme");
 };
-function useWidgetState() {
-  const widgetState = useOpenAiGlobal("widgetState");
-  const setWidgetState = useOpenAiGlobal("setWidgetState");
-  const setter = useCallback(
-    async (state) => {
-      if (setWidgetState) {
-        await setWidgetState(state);
-      }
+
+// src/hooks/use-tool-input.ts
+function useToolInput() {
+  return useWidgetGlobal("toolInput");
+}
+
+// src/hooks/use-tool-response-metadata.ts
+function useToolResponseMetadata() {
+  return useWidgetGlobal("toolResponseMetadata");
+}
+
+// src/hooks/use-user-agent.ts
+var useUserAgent = () => {
+  return useWidgetGlobal("userAgent");
+};
+
+// src/hooks/use-view.ts
+function useView() {
+  return useWidgetGlobal("view");
+}
+
+// src/hooks/use-widget-props.ts
+function useWidgetProps(defaultState) {
+  const props = useWidgetGlobal("toolOutput");
+  const fallback = typeof defaultState === "function" ? defaultState() : defaultState ?? null;
+  return props ?? fallback;
+}
+function useWidgetState(defaultState) {
+  const widgetStateFromProvider = useWidgetGlobal("widgetState");
+  const api = useWidgetAPI();
+  const [widgetState, _setWidgetState] = useState(() => {
+    if (widgetStateFromProvider != null) {
+      return widgetStateFromProvider;
+    }
+    return typeof defaultState === "function" ? defaultState() : defaultState ?? null;
+  });
+  useEffect(() => {
+    _setWidgetState(widgetStateFromProvider);
+  }, [widgetStateFromProvider]);
+  const setWidgetState = useCallback(
+    (state) => {
+      _setWidgetState((prevState) => {
+        const newState = typeof state === "function" ? state(prevState) : state;
+        if (newState != null && api?.setWidgetState) {
+          api.setWidgetState(newState);
+        }
+        return newState;
+      });
     },
-    [setWidgetState]
+    [api]
   );
-  return useMemo(() => [widgetState, setter], [widgetState, setter]);
+  return [widgetState, setWidgetState];
 }
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+
+// src/lib/media-queries.ts
+function matchMediaQuery(query) {
+  return window.matchMedia(query).matches;
+}
+function createMediaQueryFn(query) {
+  return () => matchMediaQuery(query);
+}
+var prefersReducedMotion = createMediaQueryFn(
+  "(prefers-reduced-motion: reduce)"
+);
+var isPrimarilyTouchDevice = createMediaQueryFn("(pointer: coarse)");
+var isHoverAvailable = createMediaQueryFn("(hover: hover)");
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
@@ -622,14 +751,22 @@ var Label2 = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Label2.displayName = LabelPrimitive.Root.displayName;
+
+// src/types/simulator.ts
+var SCREEN_WIDTHS = {
+  "mobile-s": 375,
+  "mobile-l": 425,
+  tablet: 768,
+  full: 1024
+};
 function Conversation({
   children,
   screenWidth,
-  displayMode,
   appName = "ChatGPT",
   appIcon,
   userMessage = "Show me some interesting places to visit."
 }) {
+  const displayMode = useDisplayMode() ?? "inline";
   const containerWidth = screenWidth === "full" ? "100%" : `${SCREEN_WIDTHS[screenWidth]}px`;
   if (displayMode === "fullscreen") {
     return /* @__PURE__ */ jsx(SidebarInset, { className: "flex flex-col bg-background", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children }) });
@@ -737,6 +874,7 @@ var MockOpenAI = class {
         right: 0
       }
     });
+    __publicField(this, "view", null);
     __publicField(this, "toolInput", {});
     __publicField(this, "toolOutput", null);
     __publicField(this, "toolResponseMetadata", null);
@@ -757,6 +895,14 @@ var MockOpenAI = class {
     this.setDisplayMode(args.mode);
     return { mode: args.mode };
   }
+  async requestModal(args) {
+    console.log("Mock requestModal:", args);
+    this.view = { mode: args.mode, params: args.params };
+    this.emitUpdate({ view: this.view });
+  }
+  notifyIntrinsicHeight(height) {
+    console.log("Mock notifyIntrinsicHeight:", height);
+  }
   async setWidgetState(state) {
     this.widgetState = state;
     this.emitUpdate({ widgetState: state });
@@ -769,33 +915,76 @@ var MockOpenAI = class {
     this.displayMode = displayMode;
     this.emitUpdate({ displayMode });
   }
+  setToolOutput(toolOutput) {
+    this.toolOutput = toolOutput;
+    this.emitUpdate({ toolOutput });
+  }
+  setWidgetStateExternal(widgetState) {
+    this.widgetState = widgetState;
+    this.emitUpdate({ widgetState });
+  }
   emitUpdate(globals) {
     if (typeof window !== "undefined") {
-      const event = new CustomEvent(SET_GLOBALS_EVENT_TYPE, {
-        detail: { globals }
+      queueMicrotask(() => {
+        const event = new CustomEvent(SET_GLOBALS_EVENT_TYPE, {
+          detail: { globals }
+        });
+        window.dispatchEvent(event);
       });
-      window.dispatchEvent(event);
     }
   }
 };
-function initMockOpenAI() {
+function initMockOpenAI(initialData) {
   if (typeof window !== "undefined") {
     const mock = new MockOpenAI();
+    if (initialData?.theme !== void 0) {
+      mock.theme = initialData.theme;
+    }
+    if (initialData?.displayMode !== void 0) {
+      mock.displayMode = initialData.displayMode;
+    }
+    if (initialData?.toolOutput !== void 0) {
+      mock.toolOutput = initialData.toolOutput;
+    }
+    if (initialData?.widgetState !== void 0) {
+      mock.widgetState = initialData.widgetState;
+    }
     window.openai = mock;
     return mock;
   }
   return new MockOpenAI();
 }
+var DEFAULT_THEME = "dark";
+var DEFAULT_DISPLAY_MODE = "inline";
 function ChatGPTSimulator({
   children,
   appName,
   appIcon,
-  userMessage
+  userMessage,
+  toolOutput = null,
+  widgetState = null
 }) {
-  const [theme, setTheme] = useState("dark");
-  const [displayMode, setDisplayMode] = useState("inline");
-  const [screenWidth, setScreenWidth] = useState("full");
-  const mock = useMemo(() => initMockOpenAI(), []);
+  const [screenWidth, setScreenWidth] = React3.useState("full");
+  const mock = useMemo(
+    () => initMockOpenAI({
+      theme: DEFAULT_THEME,
+      displayMode: DEFAULT_DISPLAY_MODE
+    }),
+    []
+  );
+  const theme = useTheme() ?? DEFAULT_THEME;
+  const displayMode = useDisplayMode() ?? DEFAULT_DISPLAY_MODE;
+  useLayoutEffect(() => {
+    if (mock && typeof window !== "undefined") {
+      window.openai = mock;
+      if (toolOutput !== void 0) {
+        mock.setToolOutput(toolOutput);
+      }
+      if (widgetState !== void 0) {
+        mock.setWidgetStateExternal(widgetState);
+      }
+    }
+  }, [mock, toolOutput, widgetState]);
   useEffect(() => {
     return () => {
       if (typeof window !== "undefined") {
@@ -803,31 +992,13 @@ function ChatGPTSimulator({
       }
     };
   }, []);
-  useEffect(() => {
-    if (mock) {
-      mock.setTheme(theme);
-    }
-  }, [mock, theme]);
-  useEffect(() => {
-    if (mock) {
-      mock.setDisplayMode(displayMode);
-    }
-  }, [mock, displayMode]);
   return /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsxs(SidebarProvider, { defaultOpen: true, children: [
     /* @__PURE__ */ jsx(Sidebar, { children: /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsxs(SidebarGroup, { children: [
       /* @__PURE__ */ jsx(SidebarGroupLabel, { className: "text-md", children: "Controls" }),
       /* @__PURE__ */ jsxs(SidebarGroupContent, { className: "space-y-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label2, { htmlFor: "app-ui-select", className: "text-xs", children: "App UI" }),
-          /* @__PURE__ */ jsxs(Select, { value: "carousel", onValueChange: () => {
-          }, children: [
-            /* @__PURE__ */ jsx(SelectTrigger, { id: "app-ui-select", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectItem, { value: "carousel", children: "Carousel" }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label2, { htmlFor: "theme-select", className: "text-xs", children: "Color Scheme" }),
-          /* @__PURE__ */ jsxs(Select, { value: theme, onValueChange: (value) => setTheme(value), children: [
+          /* @__PURE__ */ jsx(Label2, { htmlFor: "theme-select", className: "text-xs", children: "Theme" }),
+          /* @__PURE__ */ jsxs(Select, { value: theme, onValueChange: (value) => mock.setTheme(value), children: [
             /* @__PURE__ */ jsx(SelectTrigger, { id: "theme-select", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
             /* @__PURE__ */ jsxs(SelectContent, { children: [
               /* @__PURE__ */ jsx(SelectItem, { value: "light", children: "Light" }),
@@ -837,7 +1008,7 @@ function ChatGPTSimulator({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx(Label2, { htmlFor: "display-mode-select", className: "text-xs", children: "Display Mode" }),
-          /* @__PURE__ */ jsxs(Select, { value: displayMode, onValueChange: (value) => setDisplayMode(value), children: [
+          /* @__PURE__ */ jsxs(Select, { value: displayMode, onValueChange: (value) => mock.setDisplayMode(value), children: [
             /* @__PURE__ */ jsx(SelectTrigger, { id: "display-mode-select", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
             /* @__PURE__ */ jsxs(SelectContent, { children: [
               /* @__PURE__ */ jsx(SelectItem, { value: "inline", children: "Inline" }),
@@ -864,7 +1035,6 @@ function ChatGPTSimulator({
       Conversation,
       {
         screenWidth,
-        displayMode,
         appName,
         appIcon,
         userMessage,
@@ -874,6 +1044,6 @@ function ChatGPTSimulator({
   ] }) });
 }
 
-export { ChatGPTSimulator, SCREEN_WIDTHS, SET_GLOBALS_EVENT_TYPE, SetGlobalsEvent, ThemeProvider, cn, initMockOpenAI, useDisplayMode, useIsMobile, useMaxHeight, useOpenAiGlobal, useTheme, useThemeContext, useWidgetState };
+export { ChatGPTSimulator, SCREEN_WIDTHS, SET_GLOBALS_EVENT_TYPE, SetGlobalsEvent, ThemeProvider, cn, getAPI, getGlobal, getOpenAiProvider, getProvider, initMockOpenAI, isHoverAvailable, isOpenAiAvailable, isPrimarilyTouchDevice, isProviderAvailable, prefersReducedMotion, resetProviderCache, subscribeToGlobal, useDisplayMode, useIsMobile, useLocale, useMaxHeight, useSafeArea, useTheme, useThemeContext, useToolInput, useToolResponseMetadata, useUserAgent, useView, useWidgetAPI, useWidgetGlobal, useWidgetProps, useWidgetState };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map