@apollo/client-ai-apps 0.2.4 → 0.3.1

package/.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+# Run prettier on the repo
+22f22733a5c5f98266b3817767739d6968e8014e

package/.github/workflows/compare-build-output.yml

@@ -0,0 +1,28 @@
+name: Compare Build Output
+on:
+  pull_request:
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  comparebuildoutput:
+    name: Compare Build Output
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v5
+        with:
+          # Fetch entire git history so we have the parent commit to compare against
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: ">=23.6.0"
+      - name: Install dependencies (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Run comparison script
+        id: attw
+        run: ./config/compare-build-output-to.sh $(git merge-base HEAD origin/${{ github.base_ref }}) | tee $GITHUB_STEP_SUMMARY
+        env:
+          RUNNER_TEMP: ${{ runner.temp }}

package/.github/workflows/pr.yaml

@@ -1,24 +1,32 @@
 name: Build on PR
 
 on:
-    pull_request:
-        types: [opened, synchronize, reopened]
+  pull_request:
+    types: [opened, synchronize, reopened]
 
 jobs:
-    build:
-        runs-on: ubuntu-latest
+  build:
+    runs-on: ubuntu-latest
 
-        steps:
-            - name: Checkout code
-              uses: actions/checkout@v4
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
 
-            - name: Set up Node.js
-              uses: actions/setup-node@v4
-              with:
-                  node-version: 20.x
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
 
-            - name: Install dependencies
-              run: npm ci
+      - name: Install dependencies
+        run: npm ci
 
-            - name: Run build
-              run: npm run build
+      - name: Run build
+        run: npm run build
+
+      - name: Test
+        shell: bash
+        run: npm run test
+
+      - name: Check formatting
+        shell: bash
+        run: npm run format:check

package/.github/workflows/release.yaml

@@ -1,53 +1,53 @@
 name: Release new Version
 
 on:
-    workflow_dispatch:
+  workflow_dispatch:
 
 permissions:
-    contents: write
-    id-token: write # Required for OIDC
+  contents: write
+  id-token: write # Required for OIDC
 
 jobs:
-    release:
-        name: Release
-        if: github.repository == 'apollographql/apollo-ai-apps-client'
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v4
-
-            - name: Setup Node.js 20.x
-              uses: actions/setup-node@v4
-              with:
-                  node-version: ">=23.6.0"
-                  registry-url: "https://registry.npmjs.org/"
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-            - name: Install dependencies
-              shell: bash
-              run: npm ci
-
-            - name: Build
-              shell: bash
-              run: npm run build
-
-            - name: Test
-              shell: bash
-              run: npm run test
-
-            - name: Configure Git
-              run: |
-                  git config --global user.name GitHub Actions
-                  git config user.email github-actions@github.com
-
-            - uses: knope-dev/action@v2.1.0
-              with:
-                  version: 0.21.5
-
-            - run: knope release
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-            - name: Publish to npm
-              shell: bash
-              run: npm publish --provenance --access public
+  release:
+    name: Release
+    if: github.repository == 'apollographql/apollo-ai-apps-client'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: ">=23.6.0"
+          registry-url: "https://registry.npmjs.org/"
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Install dependencies
+        shell: bash
+        run: npm ci
+
+      - name: Build
+        shell: bash
+        run: npm run build
+
+      - name: Test
+        shell: bash
+        run: npm run test
+
+      - name: Configure Git
+        run: |
+          git config --global user.name GitHub Actions
+          git config user.email github-actions@github.com
+
+      - uses: knope-dev/action@v2.1.0
+        with:
+          version: 0.21.5
+
+      - run: knope release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Publish to npm
+        shell: bash
+        run: npm publish --provenance --access public

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "experimentalTernaries": true
+}

package/config/compare-build-output-to.sh

@@ -0,0 +1,90 @@
+#!/usr/bin/env bash
+set -euo pipefail
+upstream=$1
+comparison="${RUNNER_TEMP:-/tmp}/comparison_checkout"
+root=$(git rev-parse --show-toplevel)
+
+temp=$(mktemp --tmpdir="${RUNNER_TEMP:-/tmp}")
+trap 'rm -f "$temp"' EXIT
+
+patterndiff(){
+  cd dist || { echo "dist folder not found"; exit 1; }
+  count=0
+  while IFS= read -r -d '' file
+  do
+    if ! filediff="$(diff <(tr "'" '"' < "$comparison/dist/$file") <(tr "'" '"' < "$root/dist/$file"))"; then
+      (( count++ ))
+      echo "$file"
+      if [[ "$file" == *.min.* ]]; then
+        echo "> Minified file differs."
+      else
+        echo "$filediff"
+      fi
+    fi
+  done >"$temp" < <(find . -name "$1" -print0)
+
+  output="$(cat <"$temp")"
+
+  cat <<EOF
+
+## differences in $1 files
+
+<details>
+  <summary>
+
+### $count files with differences
+
+  </summary>
+
+\`\`\`diff
+
+$output
+
+\`\`\`
+
+</details>
+EOF
+
+  cd ..
+}
+
+[ -z "$upstream" ] && { echo "need upstream argument"; exit 1; }
+
+git worktree add --force --detach --checkout "$comparison" "$upstream" || { cd "$comparison" && git checkout "$upstream"; } || exit 1
+
+cd "$comparison" || { echo "checkout failed"; exit 1; }
+[ -d node_modules ] || cp -r "$root/node_modules" .
+npm i >&2
+git status >&2
+npm run build >&2
+cd "$root" || exit 1
+git status >&2
+npm run build >&2
+
+set +e
+
+patterndiff "*.js"
+patterndiff "*.cjs"
+patterndiff "*.d.ts"
+patterndiff "*.d.cts"
+
+cat <<EOF
+
+## differences in other files
+
+<details>
+  <summary>
+
+### $(diff -qr "$comparison/dist" "dist" -x "*.map" -x "*.native.*" -x "*.js" -x "*.cjs" -x "*.d.ts" -x "*.d.cts" -w | wc -l) files with differences
+
+  </summary>
+
+\`\`\`diff
+
+$(diff -r "$comparison/dist" "dist" -x "*.map" -x "*.native.*" -x "*.js" -x "*.cjs" -x "*.d.ts" -x "*.d.cts" -w)
+
+\`\`\`
+
+</details>
+EOF
+

package/dist/core/ApolloClient.d.ts

@@ -0,0 +1,14 @@
+import { ApolloClient as BaseApolloClient } from "@apollo/client";
+import "../types/openai";
+import { ApplicationManifest } from "../types/application-manifest";
+export declare namespace ApolloClient {
+    interface Options extends Omit<BaseApolloClient.Options, "link"> {
+        link?: BaseApolloClient.Options["link"];
+        manifest: ApplicationManifest;
+    }
+}
+export declare class ApolloClient extends BaseApolloClient {
+    manifest: ApplicationManifest;
+    constructor(options: ApolloClient.Options);
+    prefetchData(): Promise<void>;
+}

package/dist/index.d.ts

@@ -1,11 +1,18 @@
-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 { ApolloClient } from "./core/ApolloClient";
+export { ApolloProvider } from "./react/ApolloProvider";
+export { ToolCallLink } from "./link/ToolCallLink";

package/dist/index.js

@@ -4,11 +4,22 @@ var SetGlobalsEvent = class extends CustomEvent {
   type = SET_GLOBALS_EVENT_TYPE;
 };
 
-// src/hooks/useOpenAiGlobal.ts
-import { useSyncExternalStore } from "react";
+// src/react/context/ToolUseContext.tsx
+import React, { createContext, useContext, useState } from "react";
+var ToolUseContext = createContext(null);
+function ToolUseProvider({ children, appName }) {
+  const [hasNavigated, setHasNavigated] = useState(false);
+  return /* @__PURE__ */ React.createElement(ToolUseContext.Provider, { value: { hasNavigated, setHasNavigated, appName } }, children);
+}
+function useToolUseState() {
+  return useContext(ToolUseContext);
+}
+
+// src/react/hooks/useOpenAiGlobal.ts
+import { useSyncExternalStore, useCallback } from "react";
 function useOpenAiGlobal(key) {
   return useSyncExternalStore(
-    (onChange) => {
+    useCallback((onChange) => {
       const handleSetGlobal = (event) => {
         const value = event.detail.globals[key];
         if (value === void 0) {
@@ -22,24 +33,24 @@ function useOpenAiGlobal(key) {
       return () => {
         window.removeEventListener(SET_GLOBALS_EVENT_TYPE, handleSetGlobal);
       };
-    },
+    }, []),
     () => window.openai[key]
   );
 }
 
-// src/hooks/useToolName.ts
+// src/react/hooks/useToolName.ts
 var useToolName = () => {
   const toolResponseMetadata = useOpenAiGlobal("toolResponseMetadata");
   return toolResponseMetadata?.toolName;
 };
 
-// src/hooks/useToolInput.ts
+// src/react/hooks/useToolInput.ts
 var useToolInput = () => {
   const toolInput = useOpenAiGlobal("toolInput");
   return toolInput;
 };
 
-// src/hooks/useSendFollowUpMessage.ts
+// src/react/hooks/useSendFollowUpMessage.ts
 var useSendFollowUpMessage = () => {
   return async (prompt) => {
     await window.openai?.sendFollowUpMessage({
@@ -48,105 +59,188 @@ var useSendFollowUpMessage = () => {
   };
 };
 
-// src/hooks/useRequestDisplayMode.ts
+// src/react/hooks/useRequestDisplayMode.ts
 var useRequestDisplayMode = () => {
   return async (args) => {
     return await window.openai?.requestDisplayMode(args);
   };
 };
 
-// src/hooks/useToolEffect.tsx
-import React, { useEffect, useState } from "react";
-var ToolUseContext = React.createContext(null);
-function ToolUseProvider({ children, appName }) {
-  const [hasNavigated, setHasNavigated] = useState(false);
-  return /* @__PURE__ */ React.createElement(ToolUseContext.Provider, { value: { hasNavigated, setHasNavigated, appName } }, children);
-}
+// src/react/hooks/useToolEffect.tsx
+import { useEffect } from "react";
 var useToolEffect = (toolName, effect, deps = []) => {
-  const ctx = React.useContext(ToolUseContext);
+  const ctx = useToolUseState();
   const fullToolName = useToolName();
   const toolInput = useToolInput();
-  if (!ctx) throw new Error("useToolEffect must be used within ToolUseProvider");
+  if (!ctx)
+    throw new Error("useToolEffect must be used within ToolUseProvider");
   const toolNames = Array.isArray(toolName) ? toolName : [toolName];
   useEffect(() => {
-    const matches = toolNames.some((name) => fullToolName === `${ctx.appName}--${name}`);
+    const matches = toolNames.some(
+      (name) => fullToolName === `${ctx.appName}--${name}`
+    );
     if (!ctx.hasNavigated && matches) {
       effect(toolInput);
       ctx.setHasNavigated(true);
     }
-  }, [ctx.hasNavigated, ctx.setHasNavigated, ctx.appName, toolNames, fullToolName, toolInput, ...deps]);
+  }, [
+    ctx.hasNavigated,
+    ctx.setHasNavigated,
+    ctx.appName,
+    toolNames,
+    fullToolName,
+    toolInput,
+    ...deps
+  ]);
 };
 
+// src/react/hooks/useOpenExternal.ts
+import { useCallback as useCallback2 } from "react";
+function useOpenExternal() {
+  return useCallback2(
+    (...args) => window.openai.openExternal(...args),
+    []
+  );
+}
+
+// src/react/hooks/useToolOutput.ts
+function useToolOutput() {
+  return useOpenAiGlobal("toolOutput") ?? null;
+}
+
+// src/react/hooks/useToolResponseMetadata.ts
+function useToolResponseMetadata() {
+  return useOpenAiGlobal("toolResponseMetadata") ?? null;
+}
+
+// src/react/hooks/useWidgetState.ts
+import { useCallback as useCallback3, useState as useState2 } from "react";
+function useWidgetState(defaultState) {
+  const widgetStateFromWindow = useOpenAiGlobal("widgetState");
+  const [previousWidgetStateFromWindow, setPreviousWidgetStateFromWindow] = useState2(widgetStateFromWindow);
+  let [widgetState, _setWidgetState] = useState2(() => {
+    if (widgetStateFromWindow != null) {
+      return widgetStateFromWindow;
+    }
+    return typeof defaultState === "function" ? defaultState() : defaultState ?? null;
+  });
+  if (previousWidgetStateFromWindow !== widgetStateFromWindow) {
+    _setWidgetState(widgetState = widgetStateFromWindow);
+    setPreviousWidgetStateFromWindow(widgetStateFromWindow);
+  }
+  const setWidgetState = useCallback3((state) => {
+    _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];
+}
+
 // src/index.ts
 export * from "@apollo/client";
 
-// src/apollo_client/client.ts
-import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client";
-import * as Observable from "rxjs";
-import { selectHttpOptionsAndBody } from "@apollo/client/link/http";
-import { fallbackHttpConfig } from "@apollo/client/link/http";
+// src/core/ApolloClient.ts
+import { ApolloClient as BaseApolloClient } from "@apollo/client";
 import { DocumentTransform } from "@apollo/client";
 import { removeDirectivesFromDocument } from "@apollo/client/utilities/internal";
 import { parse } from "graphql";
-var toolCallLink = new ApolloLink((operation) => {
-  const context = operation.getContext();
-  const contextConfig = {
-    http: context.http,
-    options: context.fetchOptions,
-    credentials: context.credentials,
-    headers: context.headers
-  };
-  const { query, variables } = selectHttpOptionsAndBody(operation, fallbackHttpConfig, contextConfig).body;
-  return Observable.from(window.openai.callTool("execute", { query, variables })).pipe(
-    Observable.map((result) => ({ data: result.structuredContent.data }))
-  );
-});
-var ExtendedApolloClient = class extends ApolloClient {
+import { __DEV__ } from "@apollo/client/utilities/environment";
+
+// src/link/ToolCallLink.ts
+import { ApolloLink } from "@apollo/client";
+import { from, map } from "rxjs";
+import {
+  fallbackHttpConfig,
+  selectHttpOptionsAndBody
+} from "@apollo/client/link/http";
+var ToolCallLink = class extends ApolloLink {
+  request(operation) {
+    const context = operation.getContext();
+    const contextConfig = {
+      http: context.http,
+      options: context.fetchOptions,
+      credentials: context.credentials,
+      headers: context.headers
+    };
+    const { query, variables } = selectHttpOptionsAndBody(
+      operation,
+      fallbackHttpConfig,
+      contextConfig
+    ).body;
+    return from(window.openai.callTool("execute", { query, variables })).pipe(
+      map((result) => ({ data: result.structuredContent.data }))
+    );
+  }
+};
+
+// src/core/ApolloClient.ts
+var ApolloClient = class extends BaseApolloClient {
   manifest;
   constructor(options) {
+    const link = options.link ?? new ToolCallLink();
+    if (__DEV__) {
+      validateTerminatingLink(link);
+    }
     super({
-      link: toolCallLink,
-      cache: options.cache ?? new InMemoryCache(),
+      ...options,
+      link,
       // Strip out the prefetch/tool directives so they don't get sent with the operation to the server
       documentTransform: new DocumentTransform((document) => {
-        return removeDirectivesFromDocument([{ name: "prefetch" }, { name: "tool" }], document);
+        return removeDirectivesFromDocument(
+          [{ name: "prefetch" }, { name: "tool" }],
+          document
+        );
       })
     });
     this.manifest = options.manifest;
   }
   async prefetchData() {
     this.manifest.operations.forEach((operation) => {
-      if (operation.prefetch && operation.prefetchID && window.openai.toolOutput.prefetch?.[operation.prefetchID]) {
+      if (operation.prefetch && operation.prefetchID && window.openai.toolOutput?.prefetch?.[operation.prefetchID]) {
         this.writeQuery({
           query: parse(operation.body),
           data: window.openai.toolOutput.prefetch[operation.prefetchID].data
         });
       }
       if (operation.tools?.find(
-        (tool) => `${this.manifest.name}--${tool.name}` === window.openai.toolResponseMetadata.toolName
+        (tool) => `${this.manifest.name}--${tool.name}` === window.openai.toolResponseMetadata?.toolName
       )) {
         const variables = Object.keys(window.openai.toolInput).reduce(
-          (obj, key) => operation.variables[key] ? { ...obj, [key]: window.openai.toolInput[key] } : obj,
+          (obj, key) => operation.variables?.[key] ? { ...obj, [key]: window.openai.toolInput[key] } : obj,
           {}
         );
-        this.writeQuery({
-          query: parse(operation.body),
-          data: window.openai.toolOutput.result.data,
-          variables
-        });
+        if (window.openai.toolOutput) {
+          this.writeQuery({
+            query: parse(operation.body),
+            data: window.openai.toolOutput.result.data,
+            variables
+          });
+        }
       }
     });
   }
 };
+function validateTerminatingLink(link) {
+  let terminatingLink = link;
+  while (terminatingLink.right) {
+    terminatingLink = terminatingLink.right;
+  }
+  if (terminatingLink.constructor.name !== "ToolCallLink") {
+    throw new Error(
+      "The terminating link must be a `ToolCallLink`. If you are using a `split` link, ensure the `right` branch uses a `ToolCallLink` as the terminating link."
+    );
+  }
+}
 
-// src/apollo_client/provider.tsx
-import React2, { useEffect as useEffect2, useState as useState2 } from "react";
-import { ApolloProvider } from "@apollo/client/react";
-var ExtendedApolloProvider = ({
-  children,
-  client
-}) => {
-  const [hasPreloaded, setHasPreloaded] = useState2(false);
+// src/react/ApolloProvider.tsx
+import React3, { useEffect as useEffect2, useState as useState3 } from "react";
+import { ApolloProvider as BaseApolloProvider } from "@apollo/client/react";
+var ApolloProvider = ({ children, client }) => {
+  const [hasPreloaded, setHasPreloaded] = useState3(false);
   useEffect2(() => {
     const prefetchData = async () => {
       await client.prefetchData();
@@ -159,19 +253,27 @@ var ExtendedApolloProvider = ({
     if (window.openai?.toolOutput) {
       window.dispatchEvent(new CustomEvent(SET_GLOBALS_EVENT_TYPE));
     }
-  }, [setHasPreloaded]);
-  return hasPreloaded ? /* @__PURE__ */ React2.createElement(ApolloProvider, { client }, children) : null;
+    return () => {
+      window.removeEventListener(SET_GLOBALS_EVENT_TYPE, prefetchData);
+    };
+  }, []);
+  return hasPreloaded ? /* @__PURE__ */ React3.createElement(BaseApolloProvider, { client }, children) : null;
 };
 export {
-  ExtendedApolloClient as ApolloClient,
-  ExtendedApolloProvider as ApolloProvider,
+  ApolloClient,
+  ApolloProvider,
   SET_GLOBALS_EVENT_TYPE,
   SetGlobalsEvent,
+  ToolCallLink,
   ToolUseProvider,
   useOpenAiGlobal,
+  useOpenExternal,
   useRequestDisplayMode,
   useSendFollowUpMessage,
   useToolEffect,
   useToolInput,
-  useToolName
+  useToolName,
+  useToolOutput,
+  useToolResponseMetadata,
+  useWidgetState
 };