@apollo/client-ai-apps 0.3.0 → 0.3.1

package/src/index.ts

@@ -1,13 +1,38 @@
-export * from "./types/openai";
-export * from "./types/application-manifest";
-export * from "./hooks/useOpenAiGlobal";
-export * from "./hooks/useToolName";
-export * from "./hooks/useToolInput";
-export * from "./hooks/useSendFollowUpMessage";
-export * from "./hooks/useRequestDisplayMode";
-export * from "./hooks/useToolEffect";
+export type {
+  API,
+  CallTool,
+  DeviceType,
+  DisplayMode,
+  OpenAiGlobals,
+  SafeArea,
+  SafeAreaInsets,
+  Theme,
+  UserAgent,
+  UnknownObject,
+} from "./types/openai";
+export { SET_GLOBALS_EVENT_TYPE, SetGlobalsEvent } from "./types/openai";
+
+export type {
+  ApplicationManifest,
+  ManifestOperation,
+  ManifestTool,
+  ManifestExtraInput,
+  ManifestCsp,
+} from "./types/application-manifest";
+
+export { ToolUseProvider } from "./react/context/ToolUseContext";
+export { useOpenAiGlobal } from "./react/hooks/useOpenAiGlobal";
+export { useToolName } from "./react/hooks/useToolName";
+export { useToolInput } from "./react/hooks/useToolInput";
+export { useSendFollowUpMessage } from "./react/hooks/useSendFollowUpMessage";
+export { useRequestDisplayMode } from "./react/hooks/useRequestDisplayMode";
+export { useToolEffect } from "./react/hooks/useToolEffect";
+export { useOpenExternal } from "./react/hooks/useOpenExternal";
+export { useToolOutput } from "./react/hooks/useToolOutput";
+export { useToolResponseMetadata } from "./react/hooks/useToolResponseMetadata";
+export { useWidgetState } from "./react/hooks/useWidgetState";
 
 export * from "@apollo/client";
-export { ExtendedApolloClient as ApolloClient } from "./apollo_client/client";
-export { ExtendedApolloProvider as ApolloProvider } from "./apollo_client/provider";
-export { ToolCallLink } from "./apollo_client/link/ToolCallLink";
+export { ApolloClient } from "./core/ApolloClient";
+export { ApolloProvider } from "./react/ApolloProvider";
+export { ToolCallLink } from "./link/ToolCallLink";

package/src/{apollo_client/provider.tsx → react/ApolloProvider.tsx}

@@ -1,12 +1,16 @@
-import React, { useEffect, useState } from "react";
-import { ApolloProvider } from "@apollo/client/react";
-import { ExtendedApolloClient } from "./client";
+import React, { ReactNode, useEffect, useState } from "react";
+import { ApolloProvider as BaseApolloProvider } from "@apollo/client/react";
+import { ApolloClient } from "../core/ApolloClient";
 import { SET_GLOBALS_EVENT_TYPE } from "../types/openai";
 
-export const ExtendedApolloProvider = ({
-  children,
-  client,
-}: React.PropsWithChildren<{ client: ExtendedApolloClient }>) => {
+export declare namespace ApolloProvider {
+  export interface Props {
+    children?: ReactNode;
+    client: ApolloClient;
+  }
+}
+
+export const ApolloProvider = ({ children, client }: ApolloProvider.Props) => {
   const [hasPreloaded, setHasPreloaded] = useState(false);
 
   // This is to prevent against a race condition. We don't know if window.openai will be available when this loads or if it will become available shortly after.
@@ -33,6 +37,6 @@ export const ExtendedApolloProvider = ({
   }, []);
 
   return hasPreloaded ?
-      <ApolloProvider client={client}>{children}</ApolloProvider>
+      <BaseApolloProvider client={client}>{children}</BaseApolloProvider>
     : null;
 };

package/src/{apollo_client/provider.test.tsx → react/__tests__/ApolloProvider.test.tsx}

@@ -1,8 +1,8 @@
 import { expect, test, vi } from "vitest";
-import { ExtendedApolloProvider } from "./provider";
+import { ApolloProvider } from "../ApolloProvider";
 import { render } from "@testing-library/react";
-import { ExtendedApolloClient } from "./client";
-import { SET_GLOBALS_EVENT_TYPE } from "../types/openai";
+import { ApolloClient } from "../../core/ApolloClient";
+import { SET_GLOBALS_EVENT_TYPE } from "../../types/openai";
 
 test("Should call prefetch data when window.open is immediately available", () => {
   vi.stubGlobal("openai", {
@@ -11,9 +11,9 @@ test("Should call prefetch data when window.open is immediately available", () =
 
   const client = {
     prefetchData: vi.fn(async () => {}),
-  } as unknown as ExtendedApolloClient;
+  } as unknown as ApolloClient;
 
-  render(<ExtendedApolloProvider client={client} />);
+  render(<ApolloProvider client={client} />);
 
   expect(client.prefetchData).toBeCalled();
 });
@@ -21,9 +21,9 @@ test("Should call prefetch data when window.open is immediately available", () =
 test("Should NOT call prefetch data when window.open is not immediately available", () => {
   const client = {
     prefetchData: vi.fn(async () => {}),
-  } as unknown as ExtendedApolloClient;
+  } as unknown as ApolloClient;
 
-  render(<ExtendedApolloProvider client={client} />);
+  render(<ApolloProvider client={client} />);
 
   expect(client.prefetchData).not.toBeCalled();
 });
@@ -31,9 +31,9 @@ test("Should NOT call prefetch data when window.open is not immediately availabl
 test("Should call prefetch data when window.open is not immediately available and event is sent", () => {
   const client = {
     prefetchData: vi.fn(async () => {}),
-  } as unknown as ExtendedApolloClient;
+  } as unknown as ApolloClient;
 
-  render(<ExtendedApolloProvider client={client} />);
+  render(<ApolloProvider client={client} />);
 
   window.dispatchEvent(new CustomEvent(SET_GLOBALS_EVENT_TYPE));
 

package/src/react/context/ToolUseContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, ReactNode, useContext, useState } from "react";
+
+interface ToolUseState {
+  appName: string;
+  hasNavigated: boolean;
+  setHasNavigated: (v: boolean) => void;
+}
+
+const ToolUseContext = createContext<ToolUseState | null>(null);
+
+export declare namespace ToolUseProvider {
+  export interface Props {
+    children?: ReactNode;
+    appName: string;
+  }
+}
+
+export function ToolUseProvider({ children, appName }: ToolUseProvider.Props) {
+  const [hasNavigated, setHasNavigated] = useState(false);
+
+  return (
+    <ToolUseContext.Provider value={{ hasNavigated, setHasNavigated, appName }}>
+      {children}
+    </ToolUseContext.Provider>
+  );
+}
+
+export function useToolUseState() {
+  return useContext(ToolUseContext);
+}

package/src/{hooks → react/hooks/__tests__}/useCallTool.test.ts

@@ -1,5 +1,5 @@
 import { expect, test, vi } from "vitest";
-import { useCallTool } from "./useCallTool";
+import { useCallTool } from "../useCallTool";
 
 test("Should execute tool when returned function is called", async () => {
   vi.stubGlobal("openai", {

package/src/{hooks → react/hooks/__tests__}/useOpenAiGlobal.test.ts

@@ -1,7 +1,7 @@
 import { expect, test, vi } from "vitest";
-import { useOpenAiGlobal } from "./useOpenAiGlobal";
+import { useOpenAiGlobal } from "../useOpenAiGlobal";
 import { renderHook, act } from "@testing-library/react";
-import { SET_GLOBALS_EVENT_TYPE } from "../types/openai";
+import { SET_GLOBALS_EVENT_TYPE } from "../../../types/openai";
 
 test("Should update value when globals are updated and event it triggered", async () => {
   vi.stubGlobal("openai", {

package/src/react/hooks/__tests__/useOpenExternal.test.tsx

@@ -0,0 +1,24 @@
+import { expect, test, vi } from "vitest";
+import { renderHookToSnapshotStream } from "@testing-library/react-render-stream";
+import { useOpenExternal } from "../useOpenExternal";
+import { stubOpenAiGlobals } from "../../../testing/internal";
+
+test("calls the global openExternal function", async () => {
+  const openExternalMock = vi.fn();
+
+  stubOpenAiGlobals({ openExternal: openExternalMock });
+
+  const { takeSnapshot } = await renderHookToSnapshotStream(() =>
+    useOpenExternal()
+  );
+
+  const openExternal = await takeSnapshot();
+  openExternal({ href: "https://example.com" });
+
+  expect(openExternalMock).toHaveBeenCalledTimes(1);
+  expect(openExternalMock).toHaveBeenCalledWith({
+    href: "https://example.com",
+  });
+
+  await expect(takeSnapshot).not.toRerender();
+});

package/src/{hooks → react/hooks/__tests__}/useRequestDisplayMode.test.ts

@@ -1,6 +1,6 @@
 import { expect, test, vi } from "vitest";
-import { useRequestDisplayMode } from "./useRequestDisplayMode";
-import { DisplayMode } from "../types/openai";
+import { useRequestDisplayMode } from "../useRequestDisplayMode";
+import { DisplayMode } from "../../../types/openai";
 
 test("Should set display mode when returned function is called", async () => {
   vi.stubGlobal("openai", {

package/src/{hooks → react/hooks/__tests__}/useSendFollowUpMessage.test.ts

@@ -1,5 +1,5 @@
 import { expect, test, vi } from "vitest";
-import { useSendFollowUpMessage } from "./useSendFollowUpMessage";
+import { useSendFollowUpMessage } from "../useSendFollowUpMessage";
 
 test("Should set display mode when returned function is called", async () => {
   vi.stubGlobal("openai", {

package/src/{hooks → react/hooks/__tests__}/useToolEffect.test.tsx

@@ -1,6 +1,7 @@
 import { expect, test, vi } from "vitest";
-import { useToolEffect, ToolUseProvider } from "./useToolEffect";
+import { useToolEffect } from "../useToolEffect";
 import { renderHook } from "@testing-library/react";
+import { ToolUseProvider } from "../../context/ToolUseContext";
 
 test("Should trigger effect when tool name matches toolResponseMetadata", async () => {
   vi.stubGlobal("openai", {

package/src/{hooks → react/hooks/__tests__}/useToolInput.test.ts

@@ -1,5 +1,5 @@
 import { expect, test, vi } from "vitest";
-import { useToolInput } from "./useToolInput";
+import { useToolInput } from "../useToolInput";
 import { renderHook } from "@testing-library/react";
 
 test("Should return tool input when called", async () => {

package/src/{hooks → react/hooks/__tests__}/useToolName.test.ts

@@ -1,5 +1,5 @@
 import { expect, test, vi } from "vitest";
-import { useToolName } from "./useToolName";
+import { useToolName } from "../useToolName";
 import { renderHook } from "@testing-library/react";
 
 test("Should return tool input when called", async () => {

package/src/react/hooks/__tests__/useToolOutput.test.tsx

@@ -0,0 +1,49 @@
+import { afterEach, expect, test, vi } from "vitest";
+import {
+  dispatchStateChange,
+  stubOpenAiGlobals,
+} from "../../../testing/internal";
+import { renderHookToSnapshotStream } from "@testing-library/react-render-stream";
+import { useToolOutput } from "../useToolOutput";
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+test("returns the tool output set in window", async () => {
+  stubOpenAiGlobals({ toolOutput: { test: true } });
+
+  const { takeSnapshot } = await renderHookToSnapshotStream(() =>
+    useToolOutput()
+  );
+
+  await expect(takeSnapshot()).resolves.toEqual({ test: true });
+  await expect(takeSnapshot).not.toRerender();
+});
+
+test("returns null when not set", async () => {
+  stubOpenAiGlobals();
+
+  const { takeSnapshot } = await renderHookToSnapshotStream(() =>
+    useToolOutput()
+  );
+
+  await expect(takeSnapshot()).resolves.toBeNull();
+  await expect(takeSnapshot).not.toRerender();
+});
+
+test("reacts to changes in globals", async () => {
+  stubOpenAiGlobals({ toolOutput: { initial: true } });
+
+  const { takeSnapshot } = await renderHookToSnapshotStream(() =>
+    useToolOutput()
+  );
+
+  await expect(takeSnapshot()).resolves.toEqual({ initial: true });
+
+  window.openai.toolOutput = { updated: true };
+  dispatchStateChange();
+
+  await expect(takeSnapshot()).resolves.toEqual({ updated: true });
+  await expect(takeSnapshot).not.toRerender();
+});

package/src/react/hooks/__tests__/useToolResponseMetadata.test.tsx

@@ -0,0 +1,49 @@
+import { afterEach, expect, test, vi } from "vitest";
+import {
+  dispatchStateChange,
+  stubOpenAiGlobals,
+} from "../../../testing/internal";
+import { renderHookToSnapshotStream } from "@testing-library/react-render-stream";
+import { useToolResponseMetadata } from "../useToolResponseMetadata";
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+test("returns the tool output set in window", async () => {
+  stubOpenAiGlobals({ toolResponseMetadata: { test: true } });
+
+  const { takeSnapshot } = await renderHookToSnapshotStream(() =>
+    useToolResponseMetadata()
+  );
+
+  await expect(takeSnapshot()).resolves.toEqual({ test: true });
+  await expect(takeSnapshot).not.toRerender();
+});
+
+test("returns null when not set", async () => {
+  stubOpenAiGlobals();
+
+  const { takeSnapshot } = await renderHookToSnapshotStream(() =>
+    useToolResponseMetadata()
+  );
+
+  await expect(takeSnapshot()).resolves.toBeNull();
+  await expect(takeSnapshot).not.toRerender();
+});
+
+test("reacts to changes in globals", async () => {
+  stubOpenAiGlobals({ toolResponseMetadata: { initial: true } });
+
+  const { takeSnapshot } = await renderHookToSnapshotStream(() =>
+    useToolResponseMetadata()
+  );
+
+  await expect(takeSnapshot()).resolves.toEqual({ initial: true });
+
+  window.openai.toolResponseMetadata = { updated: true };
+  dispatchStateChange();
+
+  await expect(takeSnapshot()).resolves.toEqual({ updated: true });
+  await expect(takeSnapshot).not.toRerender();
+});

package/src/react/hooks/__tests__/useWidgetState.test.tsx

@@ -0,0 +1,158 @@
+import { afterEach, expect, test, vi } from "vitest";
+import {
+  disableActEnvironment,
+  renderHookToSnapshotStream,
+} from "@testing-library/react-render-stream";
+import { useWidgetState } from "../useWidgetState";
+import { stubOpenAiGlobals } from "../../../testing/internal";
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+test("returns state from global", async () => {
+  stubOpenAiGlobals({ widgetState: { test: true } });
+
+  using _disabledAct = disableActEnvironment();
+  const { takeSnapshot } = await renderHookToSnapshotStream(() =>
+    useWidgetState()
+  );
+
+  const [widgetState] = await takeSnapshot();
+
+  expect(widgetState).toEqual({ test: true });
+  await expect(takeSnapshot).not.toRerender();
+});
+
+test("returns null when global does not exist", async () => {
+  stubOpenAiGlobals();
+
+  using _disabledAct = disableActEnvironment();
+  const { takeSnapshot } = await renderHookToSnapshotStream(() =>
+    useWidgetState()
+  );
+
+  const [widgetState] = await takeSnapshot();
+
+  expect(widgetState).toBeNull();
+  await expect(takeSnapshot).not.toRerender();
+});
+
+test("returns provided default state when global does not exist", async () => {
+  stubOpenAiGlobals();
+
+  using _disabledAct = disableActEnvironment();
+  const { takeSnapshot } = await renderHookToSnapshotStream(() =>
+    useWidgetState({ defaultValue: true })
+  );
+
+  const [widgetState] = await takeSnapshot();
+
+  expect(widgetState).toEqual({ defaultValue: true });
+  await expect(takeSnapshot).not.toRerender();
+});
+
+test("returns provided default state returned from init function when global does not exist", async () => {
+  stubOpenAiGlobals();
+
+  using _disabledAct = disableActEnvironment();
+  const { takeSnapshot } = await renderHookToSnapshotStream(() =>
+    useWidgetState(() => ({ defaultValueFromFunction: true }))
+  );
+
+  const [widgetState] = await takeSnapshot();
+
+  expect(widgetState).toEqual({ defaultValueFromFunction: true });
+  await expect(takeSnapshot).not.toRerender();
+});
+
+test("prefers global value over default value", async () => {
+  stubOpenAiGlobals({ widgetState: { globalWidgetState: true } });
+
+  using _disabledAct = disableActEnvironment();
+  const { takeSnapshot } = await renderHookToSnapshotStream(() =>
+    useWidgetState({ defaultValue: true })
+  );
+
+  const [widgetState] = await takeSnapshot();
+
+  expect(widgetState).toEqual({ globalWidgetState: true });
+  await expect(takeSnapshot).not.toRerender();
+});
+
+test("rerenders with new value after setting new value", async () => {
+  stubOpenAiGlobals({ widgetState: { globalWidgetState: true } });
+
+  using _disabledAct = disableActEnvironment();
+  const { takeSnapshot, getCurrentSnapshot } = await renderHookToSnapshotStream(
+    () => useWidgetState()
+  );
+
+  {
+    const [widgetState] = await takeSnapshot();
+
+    expect(widgetState).toEqual({ globalWidgetState: true });
+  }
+
+  const [, setWidgetState] = getCurrentSnapshot();
+  setWidgetState({ rerendered: true });
+
+  {
+    const [widgetState] = await takeSnapshot();
+
+    expect(widgetState).toEqual({ rerendered: true });
+  }
+
+  await expect(takeSnapshot).not.toRerender();
+});
+
+test("allows state setter function with previous value", async () => {
+  stubOpenAiGlobals({ widgetState: { globalWidgetState: true } });
+
+  using _disabledAct = disableActEnvironment();
+  const { takeSnapshot, getCurrentSnapshot } = await renderHookToSnapshotStream(
+    () => useWidgetState()
+  );
+
+  {
+    const [widgetState] = await takeSnapshot();
+
+    expect(widgetState).toEqual({ globalWidgetState: true });
+  }
+
+  const [, setWidgetState] = getCurrentSnapshot();
+  setWidgetState((prev) => ({ ...prev, rerendered: true }));
+
+  {
+    const [widgetState] = await takeSnapshot();
+
+    expect(widgetState).toEqual({ globalWidgetState: true, rerendered: true });
+  }
+
+  await expect(takeSnapshot).not.toRerender();
+});
+
+test("updates value from window when changed globally", async () => {
+  stubOpenAiGlobals({ widgetState: { globalWidgetState: true } });
+
+  using _disabledAct = disableActEnvironment();
+  const { takeSnapshot } = await renderHookToSnapshotStream(() =>
+    useWidgetState()
+  );
+
+  {
+    const [widgetState] = await takeSnapshot();
+
+    expect(widgetState).toEqual({ globalWidgetState: true });
+  }
+
+  window.openai.setWidgetState({ fromEvent: true });
+
+  {
+    const [widgetState] = await takeSnapshot();
+
+    expect(widgetState).toEqual({ fromEvent: true });
+  }
+
+  await expect(takeSnapshot).not.toRerender();
+});

package/src/{hooks → react/hooks}/useOpenAiGlobal.ts

@@ -1,15 +1,15 @@
-import { useSyncExternalStore } from "react";
+import { useSyncExternalStore, useCallback } from "react";
 import {
   SET_GLOBALS_EVENT_TYPE,
   SetGlobalsEvent,
   OpenAiGlobals,
-} from "../types/openai";
+} from "../../types/openai";
 
 export function useOpenAiGlobal<K extends keyof OpenAiGlobals>(
   key: K
 ): OpenAiGlobals[K] {
   return useSyncExternalStore(
-    (onChange) => {
+    useCallback((onChange) => {
       const handleSetGlobal = (event: SetGlobalsEvent) => {
         const value = event.detail.globals[key];
         if (value === undefined) {
@@ -26,7 +26,7 @@ export function useOpenAiGlobal<K extends keyof OpenAiGlobals>(
       return () => {
         window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal);
       };
-    },
+    }, []),
     () => window.openai[key]
   );
 }

package/src/react/hooks/useOpenExternal.ts

@@ -0,0 +1,11 @@
+import { useCallback } from "react";
+import { API } from "../../types/openai";
+
+type OpenExternalFn = API<any>["openExternal"];
+
+export function useOpenExternal() {
+  return useCallback<OpenExternalFn>(
+    (...args) => window.openai.openExternal(...args),
+    []
+  );
+}

package/src/{hooks → react/hooks}/useRequestDisplayMode.ts

@@ -1,4 +1,4 @@
-import { DisplayMode } from "../types/openai";
+import { DisplayMode } from "../../types/openai";
 
 export const useRequestDisplayMode = () => {
   return async (args: { mode: DisplayMode }) => {

package/src/{hooks → react/hooks}/useToolEffect.tsx

@@ -1,37 +1,14 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useToolName } from "./useToolName";
 import { useToolInput } from "./useToolInput";
-
-type ToolUseState = {
-  appName: string;
-  hasNavigated: boolean;
-  setHasNavigated: (v: boolean) => void;
-};
-
-const ToolUseContext = React.createContext<ToolUseState | null>(null);
-
-export function ToolUseProvider({
-  children,
-  appName,
-}: {
-  children: any;
-  appName: string;
-}) {
-  const [hasNavigated, setHasNavigated] = useState(false);
-
-  return (
-    <ToolUseContext.Provider value={{ hasNavigated, setHasNavigated, appName }}>
-      {children}
-    </ToolUseContext.Provider>
-  );
-}
+import { useToolUseState } from "../context/ToolUseContext";
 
 export const useToolEffect = (
   toolName: string | string[],
   effect: (toolInput: any) => void,
   deps: React.DependencyList = []
 ) => {
-  const ctx = React.useContext(ToolUseContext);
+  const ctx = useToolUseState();
   const fullToolName = useToolName();
   const toolInput = useToolInput();
   if (!ctx)

package/src/{hooks → react/hooks}/useToolName.ts

@@ -3,5 +3,5 @@ import { useOpenAiGlobal } from "./useOpenAiGlobal";
 export const useToolName = (): string | undefined => {
   const toolResponseMetadata = useOpenAiGlobal("toolResponseMetadata");
 
-  return toolResponseMetadata?.toolName;
+  return toolResponseMetadata?.toolName as string;
 };

package/src/react/hooks/useToolOutput.ts

@@ -0,0 +1,5 @@
+import { useOpenAiGlobal } from "./useOpenAiGlobal";
+
+export function useToolOutput() {
+  return useOpenAiGlobal("toolOutput") ?? null;
+}

package/src/react/hooks/useToolResponseMetadata.ts

@@ -0,0 +1,5 @@
+import { useOpenAiGlobal } from "./useOpenAiGlobal";
+
+export function useToolResponseMetadata() {
+  return useOpenAiGlobal("toolResponseMetadata") ?? null;
+}

package/src/react/hooks/useWidgetState.ts

@@ -0,0 +1,48 @@
+import { SetStateAction, useCallback, useState } from "react";
+import { UnknownObject } from "../../types/openai";
+import { useOpenAiGlobal } from "./useOpenAiGlobal";
+
+export function useWidgetState<T extends UnknownObject>(
+  defaultState: T | (() => T)
+): readonly [T, (state: SetStateAction<T>) => void];
+
+export function useWidgetState<T extends UnknownObject>(
+  defaultState?: T | (() => T | null) | null
+): readonly [T | null, (state: SetStateAction<T | null>) => void];
+
+export function useWidgetState<T extends UnknownObject>(
+  defaultState?: T | (() => T | null) | null
+): readonly [T | null, (state: SetStateAction<T | null>) => void] {
+  const widgetStateFromWindow = useOpenAiGlobal("widgetState") as T;
+  const [previousWidgetStateFromWindow, setPreviousWidgetStateFromWindow] =
+    useState(widgetStateFromWindow);
+
+  let [widgetState, _setWidgetState] = useState<T | null>(() => {
+    if (widgetStateFromWindow != null) {
+      return widgetStateFromWindow;
+    }
+
+    return typeof defaultState === "function" ? defaultState() : (
+        (defaultState ?? null)
+      );
+  });
+
+  if (previousWidgetStateFromWindow !== widgetStateFromWindow) {
+    _setWidgetState((widgetState = widgetStateFromWindow));
+    setPreviousWidgetStateFromWindow(widgetStateFromWindow);
+  }
+
+  const setWidgetState = useCallback((state: SetStateAction<T | null>) => {
+    _setWidgetState((prevState) => {
+      const newState = typeof state === "function" ? state(prevState) : state;
+
+      if (newState != null && typeof window !== "undefined") {
+        void window.openai?.setWidgetState?.(newState);
+      }
+
+      return newState;
+    });
+  }, []);
+
+  return [widgetState, setWidgetState];
+}