@apollo/client-ai-apps 0.2.3 → 0.3.0

package/.git-blame-ignore-revs

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

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/dist/apollo_client/client.d.ts

@@ -1,9 +1,8 @@
 import { ApolloClient } from "@apollo/client";
 import "../types/openai";
 import { ApplicationManifest } from "../types/application-manifest";
-type ExtendedApolloClientOptions = Omit<ApolloClient.Options, "link" | "cache"> & {
+type ExtendedApolloClientOptions = Omit<ApolloClient.Options, "link"> & {
     link?: ApolloClient.Options["link"];
-    cache?: ApolloClient.Options["cache"];
     manifest: ApplicationManifest;
 };
 export declare class ExtendedApolloClient extends ApolloClient {

package/dist/apollo_client/link/ToolCallLink.d.ts

@@ -0,0 +1,26 @@
+import { ApolloLink, Observable } from "@apollo/client";
+/**
+ * A terminating link that sends a GraphQL request through an agent tool call.
+ * When providing a custom link chain to `ApolloClient`, `ApolloClient` will
+ * validate that the terminating link is an instance of this link.
+ *
+ * @example Provding a custom link chain
+ *
+ * ```ts
+ * import { ApolloLink } from "@apollo/client";
+ * import { ApolloClient, ToolCallLink } from "@apollo/client-ai-apps";
+ *
+ * const link = ApolloLink.from([
+ *   ...otherLinks,
+ *   new ToolCallLink()
+ * ]);
+ *
+ * const client = new ApolloClient({
+ *   link,
+ *   // ...
+ * });
+ * ```
+ */
+export declare class ToolCallLink extends ApolloLink {
+    request(operation: ApolloLink.Operation): Observable<ApolloLink.Result>;
+}

package/dist/hooks/useToolEffect.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare function ToolUseProvider({ children, appName }: {
+export declare function ToolUseProvider({ children, appName, }: {
     children: any;
     appName: string;
 }): React.JSX.Element;

package/dist/index.d.ts

@@ -9,3 +9,4 @@ export * from "./hooks/useToolEffect";
 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";

package/dist/index.js

@@ -58,7 +58,10 @@ var useRequestDisplayMode = () => {
 // src/hooks/useToolEffect.tsx
 import React, { useEffect, useState } from "react";
 var ToolUseContext = React.createContext(null);
-function ToolUseProvider({ children, appName }) {
+function ToolUseProvider({
+  children,
+  appName
+}) {
   const [hasNavigated, setHasNavigated] = useState(false);
   return /* @__PURE__ */ React.createElement(ToolUseContext.Provider, { value: { hasNavigated, setHasNavigated, appName } }, children);
 }
@@ -66,50 +69,82 @@ var useToolEffect = (toolName, effect, deps = []) => {
   const ctx = React.useContext(ToolUseContext);
   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/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";
+import { ApolloClient } 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 }))
-  );
-});
+import { __DEV__ } from "@apollo/client/utilities/environment";
+
+// src/apollo_client/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/apollo_client/client.ts
 var ExtendedApolloClient = class extends ApolloClient {
   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;
@@ -138,6 +173,17 @@ var ExtendedApolloClient = class extends ApolloClient {
     });
   }
 };
+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";
@@ -159,7 +205,10 @@ var ExtendedApolloProvider = ({
     if (window.openai?.toolOutput) {
       window.dispatchEvent(new CustomEvent(SET_GLOBALS_EVENT_TYPE));
     }
-  }, [setHasPreloaded]);
+    return () => {
+      window.removeEventListener(SET_GLOBALS_EVENT_TYPE, prefetchData);
+    };
+  }, []);
   return hasPreloaded ? /* @__PURE__ */ React2.createElement(ApolloProvider, { client }, children) : null;
 };
 export {
@@ -167,6 +216,7 @@ export {
   ExtendedApolloProvider as ApolloProvider,
   SET_GLOBALS_EVENT_TYPE,
   SetGlobalsEvent,
+  ToolCallLink,
   ToolUseProvider,
   useOpenAiGlobal,
   useRequestDisplayMode,

package/dist/vite/absolute_asset_imports_plugin.d.ts

@@ -0,0 +1,4 @@
+export declare const AbsoluteAssetImportsPlugin: () => {
+    name: string;
+    transformIndexHtml(html: string, ctx: any): string;
+};

package/dist/vite/index.d.ts

@@ -1 +1,2 @@
 export * from "./application_manifest_plugin";
+export * from "./absolute_asset_imports_plugin";

package/dist/vite/index.js

@@ -26,14 +26,18 @@ var getRawValue = (node) => {
         return acc;
       }, {});
     default:
-      throw new Error(`Error when parsing directive values: unexpected type '${node.kind}'`);
+      throw new Error(
+        `Error when parsing directive values: unexpected type '${node.kind}'`
+      );
   }
 };
 var getTypedDirectiveArgument = (argumentName, expectedType, directiveArguments) => {
   if (!directiveArguments || directiveArguments.length === 0) {
     return void 0;
   }
-  let argument = directiveArguments.find((directiveArgument) => directiveArgument.name.value === argumentName);
+  let argument = directiveArguments.find(
+    (directiveArgument) => directiveArgument.name.value === argumentName
+  );
   if (!argument) {
     return void 0;
   }
@@ -59,25 +63,52 @@ var ApplicationManifestPlugin = () => {
   const client = new ApolloClient({
     cache: clientCache,
     link: new ApolloLink((operation) => {
-      const body = print(removeClientDirective(sortTopLevelDefinitions(operation.query)));
+      const body = print(
+        removeClientDirective(sortTopLevelDefinitions(operation.query))
+      );
       const name = operation.operationName;
-      const variables = operation.query.definitions.find((d) => d.kind === "OperationDefinition").variableDefinitions?.reduce(
-        (obj, varDef) => ({ ...obj, [varDef.variable.name.value]: getTypeName(varDef.type) }),
+      const variables = operation.query.definitions.find(
+        (d) => d.kind === "OperationDefinition"
+      ).variableDefinitions?.reduce(
+        (obj, varDef) => ({
+          ...obj,
+          [varDef.variable.name.value]: getTypeName(varDef.type)
+        }),
         {}
       );
-      const type = operation.query.definitions.find((d) => d.kind === "OperationDefinition").operation;
-      const prefetch = operation.query.definitions.find((d) => d.kind === "OperationDefinition").directives?.some((d) => d.name.value === "prefetch");
+      const type = operation.query.definitions.find(
+        (d) => d.kind === "OperationDefinition"
+      ).operation;
+      const prefetch = operation.query.definitions.find(
+        (d) => d.kind === "OperationDefinition"
+      ).directives?.some((d) => d.name.value === "prefetch");
       const id = createHash("sha256").update(body).digest("hex");
       const prefetchID = prefetch ? "__anonymous" : void 0;
-      const tools = operation.query.definitions.find((d) => d.kind === "OperationDefinition").directives?.filter((d) => d.name.value === "tool").map((directive) => {
-        const name2 = getTypedDirectiveArgument("name", Kind.STRING, directive.arguments);
-        const description = getTypedDirectiveArgument("description", Kind.STRING, directive.arguments);
-        const extraInputs = getTypedDirectiveArgument("extraInputs", Kind.LIST, directive.arguments);
+      const tools = operation.query.definitions.find(
+        (d) => d.kind === "OperationDefinition"
+      ).directives?.filter((d) => d.name.value === "tool").map((directive) => {
+        const name2 = getTypedDirectiveArgument(
+          "name",
+          Kind.STRING,
+          directive.arguments
+        );
+        const description = getTypedDirectiveArgument(
+          "description",
+          Kind.STRING,
+          directive.arguments
+        );
+        const extraInputs = getTypedDirectiveArgument(
+          "extraInputs",
+          Kind.LIST,
+          directive.arguments
+        );
         if (!name2) {
           throw new Error("'name' argument must be supplied for @tool");
         }
         if (!description) {
-          throw new Error("'description' argument must be supplied for @tool");
+          throw new Error(
+            "'description' argument must be supplied for @tool"
+          );
         }
         return {
           name: name2,
@@ -85,7 +116,9 @@ var ApplicationManifestPlugin = () => {
           extraInputs
         };
       });
-      return Observable.of({ data: { id, name, type, body, variables, prefetch, prefetchID, tools } });
+      return Observable.of({
+        data: { id, name, type, body, variables, prefetch, prefetchID, tools }
+      });
     })
   });
   const processFile = async (file) => {
@@ -105,14 +138,24 @@ var ApplicationManifestPlugin = () => {
     }));
     const operations = [];
     for (const source of sources) {
-      const type = source.node.definitions.find((d) => d.kind === "OperationDefinition").operation;
+      const type = source.node.definitions.find(
+        (d) => d.kind === "OperationDefinition"
+      ).operation;
       let result;
       if (type === "query") {
-        result = await client.query({ query: source.node, fetchPolicy: "no-cache" });
+        result = await client.query({
+          query: source.node,
+          fetchPolicy: "no-cache"
+        });
       } else if (type === "mutation") {
-        result = await client.mutate({ mutation: source.node, fetchPolicy: "no-cache" });
+        result = await client.mutate({
+          mutation: source.node,
+          fetchPolicy: "no-cache"
+        });
       } else {
-        throw new Error("Found an unsupported operation type. Only Query and Mutation are supported.");
+        throw new Error(
+          "Found an unsupported operation type. Only Query and Mutation are supported."
+        );
       }
       operations.push(result.data);
     }
@@ -123,7 +166,9 @@ var ApplicationManifestPlugin = () => {
     });
   };
   const generateManifest = async () => {
-    const operations = Array.from(cache.values()).flatMap((entry) => entry.operations);
+    const operations = Array.from(cache.values()).flatMap(
+      (entry) => entry.operations
+    );
     if (operations.filter((o) => o.prefetch).length > 1) {
       throw new Error(
         "Found multiple operations marked as `@prefetch`. You can only mark 1 operation with `@prefetch`."
@@ -150,18 +195,22 @@ var ApplicationManifestPlugin = () => {
       name: packageJson.name,
       description: packageJson.description,
       hash: createHash("sha256").update(Date.now().toString()).digest("hex"),
-      operations: Array.from(cache.values()).flatMap((entry) => entry.operations),
+      operations: Array.from(cache.values()).flatMap(
+        (entry) => entry.operations
+      ),
       resource,
       csp: {
         connectDomains: packageJson.csp?.connectDomains ?? [],
         resourceDomains: packageJson.csp?.resourceDomains ?? []
       }
     };
-    if (config.command === "build") {
-      const dest = path.resolve(root, config.build.outDir, ".application-manifest.json");
-      mkdirSync(path.dirname(dest), { recursive: true });
-      writeFileSync(dest, JSON.stringify(manifest));
-    }
+    const dest = path.resolve(
+      root,
+      config.build.outDir,
+      ".application-manifest.json"
+    );
+    mkdirSync(path.dirname(dest), { recursive: true });
+    writeFileSync(dest, JSON.stringify(manifest));
     writeFileSync(".application-manifest.json", JSON.stringify(manifest));
   };
   return {
@@ -226,12 +275,28 @@ function removeClientDirective(doc) {
     OperationDefinition(node) {
       return {
         ...node,
-        directives: node.directives?.filter((d) => d.name.value !== "prefetch" && d.name.value !== "tool")
+        directives: node.directives?.filter(
+          (d) => d.name.value !== "prefetch" && d.name.value !== "tool"
+        )
       };
     }
   });
 }
+
+// src/vite/absolute_asset_imports_plugin.ts
+var AbsoluteAssetImportsPlugin = () => {
+  return {
+    name: "absolute-asset-imports",
+    transformIndexHtml(html, ctx) {
+      if (!ctx.server) return html;
+      let baseUrl = (ctx.server.config?.server?.origin ?? ctx.server.resolvedUrls?.local[0]).replace(/\/$/, "");
+      baseUrl = baseUrl.replace(/\/$/, "");
+      return html.replace(/(from\s+["'])\/([^"']+)/g, `$1${baseUrl}/$2`).replace(/(src=["'])\/([^"']+)/gi, `$1${baseUrl}/$2`);
+    }
+  };
+};
 export {
+  AbsoluteAssetImportsPlugin,
   ApplicationManifestPlugin,
   sortTopLevelDefinitions
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apollo/client-ai-apps",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -22,7 +22,9 @@
     "build:vite": "node ./scripts/build-vite.mjs && tsc src/vite/index.ts --emitDeclarationOnly --declaration --outDir dist/vite --skipLibCheck --lib ES2015,DOM --target ES2020 --module esnext --moduleResolution node  --allowSyntheticDefaultImports",
     "test": "vitest run --coverage",
     "test:watch": "vitest --coverage",
-    "changeset": "knope document-change"
+    "changeset": "knope document-change",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "keywords": [],
   "author": "",
@@ -38,6 +40,7 @@
     "esbuild": "^0.25.12",
     "graphql": "^16.9.0",
     "happy-dom": "^20.0.10",
+    "prettier": "^3.7.4",
     "rxjs": "^7.8.1",
     "typescript": "^5.9.3",
     "vitest": "^4.0.13"

package/scripts/dev.mjs

@@ -10,7 +10,9 @@ let ctx = await esbuild.context({
       name: "rebuild-logger",
       setup(build) {
         build.onEnd((result) => {
-          console.log(`Rebuilt at ${new Date().toLocaleTimeString()} (${result.errors.length} errors)`);
+          console.log(
+            `Rebuilt at ${new Date().toLocaleTimeString()} (${result.errors.length} errors)`
+          );
         });
       },
     },