@apollo/client-ai-apps 0.3.2 → 0.4.0

package/src/vite/application_manifest_plugin.ts

@@ -2,27 +2,33 @@ import { readFileSync, writeFileSync, mkdirSync } from "fs";
 import { glob } from "glob";
 import { gqlPluckFromCodeStringSync } from "@graphql-tools/graphql-tag-pluck";
 import { createHash } from "crypto";
-import {
+import type {
   ArgumentNode,
-  Kind,
   ListTypeNode,
   NamedTypeNode,
   NonNullTypeNode,
-  parse,
-  print,
   TypeNode,
   ValueNode,
-  visit,
-  type DocumentNode,
-  type OperationDefinitionNode,
+  DocumentNode,
+  OperationDefinitionNode,
+  DirectiveNode,
 } from "graphql";
+import { Kind, parse, print } from "graphql";
 import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client";
-import Observable from "rxjs";
+import { removeDirectivesFromDocument } from "@apollo/client/utilities/internal";
+import { of } from "rxjs";
 import path from "path";
+import type {
+  ApplicationManifest,
+  ManifestExtraInput,
+  ManifestLabels,
+  ManifestTool,
+  ManifestWidgetSettings,
+} from "../types/application-manifest.js";
 
 const root = process.cwd();
 
-const getRawValue = (node: ValueNode): any => {
+function getRawValue(node: ValueNode): unknown {
   switch (node.kind) {
     case Kind.STRING:
     case Kind.BOOLEAN:
@@ -39,33 +45,71 @@ const getRawValue = (node: ValueNode): any => {
         `Error when parsing directive values: unexpected type '${node.kind}'`
       );
   }
-};
+}
+
+function getArgumentValue(
+  argument: ArgumentNode,
+  expectedType: Kind.STRING
+): string;
+
+function getArgumentValue(
+  argument: ArgumentNode,
+  expectedType: Kind.BOOLEAN
+): boolean;
+
+function getArgumentValue(
+  argument: ArgumentNode,
+  expectedType: Kind.LIST
+): unknown[];
+
+function getArgumentValue(
+  argument: ArgumentNode,
+  expectedType: Kind.OBJECT
+): Record<string, unknown>;
+
+function getArgumentValue(argument: ArgumentNode, expectedType: Kind) {
+  const argumentType = argument.value.kind;
 
-const getTypedDirectiveArgument = (
+  invariant(
+    argumentType === expectedType,
+    `Expected argument '${argument.name.value}' to be of type '${expectedType}' but found '${argumentType}' instead.`
+  );
+
+  return getRawValue(argument.value);
+}
+
+interface GetArgumentNodeOptions {
+  required?: boolean;
+}
+
+function getDirectiveArgument(
   argumentName: string,
-  expectedType: Kind,
-  directiveArguments: readonly ArgumentNode[] | undefined
-) => {
-  if (!directiveArguments || directiveArguments.length === 0) {
-    return undefined;
-  }
+  directive: DirectiveNode,
+  opts: GetArgumentNodeOptions & { required: true }
+): ArgumentNode;
+
+function getDirectiveArgument(
+  argumentName: string,
+  directive: DirectiveNode,
+  opts?: GetArgumentNodeOptions
+): ArgumentNode | undefined;
 
-  let argument = directiveArguments.find(
+function getDirectiveArgument(
+  argumentName: string,
+  directive: DirectiveNode,
+  { required = false }: { required?: boolean } = {}
+) {
+  const argument = directive.arguments?.find(
     (directiveArgument) => directiveArgument.name.value === argumentName
   );
 
-  if (!argument) {
-    return undefined;
-  }
-
-  if (argument.value.kind != expectedType) {
-    throw new Error(
-      `Expected argument '${argumentName}' to be of type '${expectedType}' but found '${argument.value.kind}' instead.`
-    );
-  }
+  invariant(
+    argument || !required,
+    `'${argumentName}' argument must be supplied for @tool`
+  );
 
-  return getRawValue(argument.value);
-};
+  return argument;
+}
 
 function getTypeName(type: TypeNode): string {
   let t = type;
@@ -88,78 +132,85 @@ export const ApplicationManifestPlugin = () => {
         removeClientDirective(sortTopLevelDefinitions(operation.query))
       );
       const name = operation.operationName;
-      const variables = (
-        operation.query.definitions.find(
-          (d) => d.kind === "OperationDefinition"
-        ) as OperationDefinitionNode
-      ).variableDefinitions?.reduce(
+      const definition = operation.query.definitions.find(
+        (d) => d.kind === "OperationDefinition"
+      );
+
+      // Use `operation.query` so that the error reflects the end-user defined
+      // document, not our sorted one
+      invariant(
+        definition,
+        `Document does not contain an operation:\n${print(operation.query)}`
+      );
+
+      const { directives, operation: type } = definition;
+
+      const variables = definition.variableDefinitions?.reduce(
         (obj, varDef) => ({
           ...obj,
           [varDef.variable.name.value]: getTypeName(varDef.type),
         }),
         {}
       );
-      const type = (
-        operation.query.definitions.find(
-          (d) => d.kind === "OperationDefinition"
-        ) as OperationDefinitionNode
-      ).operation;
-      const prefetch = (
-        operation.query.definitions.find(
-          (d) => d.kind === "OperationDefinition"
-        ) as OperationDefinitionNode
-      ).directives?.some((d) => d.name.value === "prefetch");
+
+      const prefetch = directives?.some((d) => d.name.value === "prefetch");
       const id = createHash("sha256").update(body).digest("hex");
       // TODO: For now, you can only have 1 operation marked as prefetch. In the future, we'll likely support more than 1, and the "prefetchId" will be defined on the `@prefetch` itself as an argument
       const prefetchID = prefetch ? "__anonymous" : undefined;
 
-      const tools = (
-        operation.query.definitions.find(
-          (d) => d.kind === "OperationDefinition"
-        ) as OperationDefinitionNode
-      ).directives
+      const tools = directives
         ?.filter((d) => d.name.value === "tool")
         .map((directive) => {
-          const name = getTypedDirectiveArgument(
-            "name",
-            Kind.STRING,
-            directive.arguments
+          const name = getArgumentValue(
+            getDirectiveArgument("name", directive, { required: true }),
+            Kind.STRING
+          );
+
+          invariant(
+            name.indexOf(" ") === -1,
+            `Tool with name "${name}" contains spaces which is not allowed.`
           );
-          const description = getTypedDirectiveArgument(
-            "description",
-            Kind.STRING,
-            directive.arguments
+
+          const description = getArgumentValue(
+            getDirectiveArgument("description", directive, { required: true }),
+            Kind.STRING
           );
-          const extraInputs = getTypedDirectiveArgument(
+
+          const extraInputsNode = getDirectiveArgument(
             "extraInputs",
-            Kind.LIST,
-            directive.arguments
+            directive
           );
 
-          if (!name) {
-            throw new Error("'name' argument must be supplied for @tool");
-          }
+          const labelsNode = getDirectiveArgument("labels", directive);
 
-          if (name.indexOf(" ") > -1) {
-            throw new Error(
-              `Tool with name "${name}" contains spaces which is not allowed.`
-            );
+          const toolOptions: ManifestTool = {
+            name,
+            description,
+          };
+
+          if (extraInputsNode) {
+            toolOptions.extraInputs = getArgumentValue(
+              extraInputsNode,
+              Kind.LIST
+            ) as ManifestExtraInput[];
           }
 
-          if (!description) {
-            throw new Error(
-              "'description' argument must be supplied for @tool"
+          if (labelsNode) {
+            const labels = getLabelsFromConfig(
+              getArgumentValue(labelsNode, Kind.OBJECT)
             );
+
+            if (labels) {
+              toolOptions.labels = labels;
+            }
           }
 
-          return {
-            name,
-            description,
-            extraInputs,
-          };
+          return toolOptions;
         });
 
-      return Observable.of({
+      // TODO: Make this object satisfy the `ManifestOperation` type. Currently
+      // it errors because we need more validation on a few of these fields
+      return of({
         data: { id, name, type, body, variables, prefetch, prefetchID, tools },
       });
     }),
@@ -172,7 +223,7 @@ export const ApplicationManifestPlugin = () => {
 
     const fileHash = createHash("md5").update(code).digest("hex");
     if (cache.get("file")?.hash === fileHash) return;
-    const sources = await gqlPluckFromCodeStringSync(file, code, {
+    const sources = gqlPluckFromCodeStringSync(file, code, {
       modules: [
         { name: "graphql-tag", identifier: "gql" },
         { name: "@apollo/client", identifier: "gql" },
@@ -221,11 +272,11 @@ export const ApplicationManifestPlugin = () => {
     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`."
-      );
-    }
+
+    invariant(
+      operations.filter((o) => o.prefetch).length <= 1,
+      "Found multiple operations marked as `@prefetch`. You can only mark 1 operation with `@prefetch`."
+    );
 
     let resource = "";
     if (config.command === "serve") {
@@ -245,7 +296,7 @@ export const ApplicationManifestPlugin = () => {
       }
     }
 
-    const manifest = {
+    const manifest: ApplicationManifest = {
       format: "apollo-ai-app-manifest",
       version: "1",
       name: packageJson.name,
@@ -257,10 +308,46 @@ export const ApplicationManifestPlugin = () => {
       resource,
       csp: {
         connectDomains: packageJson.csp?.connectDomains ?? [],
+        frameDomains: packageJson.csp?.frameDomains ?? [],
+        redirectDomains: packageJson.csp?.redirectDomains ?? [],
         resourceDomains: packageJson.csp?.resourceDomains ?? [],
       },
     };
 
+    if (
+      packageJson.widgetSettings &&
+      isNonEmptyObject(packageJson.widgetSettings)
+    ) {
+      function validateWidgetSetting(
+        key: keyof ManifestWidgetSettings,
+        type: "string" | "boolean"
+      ) {
+        if (key in widgetSettings) {
+          invariant(
+            typeof widgetSettings[key] === type,
+            `Expected 'widgetSettings.${key}' to be of type '${type}' but found '${typeof widgetSettings[key]}' instead.`
+          );
+        }
+      }
+
+      const widgetSettings =
+        packageJson.widgetSettings as ManifestWidgetSettings;
+
+      validateWidgetSetting("prefersBorder", "boolean");
+      validateWidgetSetting("description", "string");
+      validateWidgetSetting("domain", "string");
+
+      manifest.widgetSettings = packageJson.widgetSettings;
+    }
+
+    if (packageJson.labels) {
+      const labels = getLabelsFromConfig(packageJson.labels);
+
+      if (labels) {
+        manifest.labels = labels;
+      }
+    }
+
     // Always write to build directory so the MCP server picks it up
     const dest = path.resolve(
       root,
@@ -365,15 +452,88 @@ export function sortTopLevelDefinitions(query: DocumentNode): DocumentNode {
   };
 }
 
+interface LabelConfig {
+  toolInvocation?: {
+    invoking?: string;
+    invoked?: string;
+  };
+}
+
+function getLabelsFromConfig(config: LabelConfig): ManifestLabels | undefined {
+  if (!("toolInvocation" in config)) {
+    return;
+  }
+
+  const { toolInvocation } = config;
+  const labels: ManifestLabels = {};
+
+  if (Object.hasOwn(toolInvocation, "invoking")) {
+    validateType(toolInvocation.invoking, "string", {
+      propertyName: "labels.toolInvocation.invoking",
+    });
+
+    labels["toolInvocation/invoking"] = toolInvocation.invoking;
+  }
+
+  if (Object.hasOwn(toolInvocation, "invoked")) {
+    validateType(toolInvocation.invoked, "string", {
+      propertyName: "labels.toolInvocation.invoked",
+    });
+
+    labels["toolInvocation/invoked"] = toolInvocation.invoked;
+  }
+
+  if (isNonEmptyObject(labels)) {
+    return labels;
+  }
+}
+
 function removeClientDirective(doc: DocumentNode) {
-  return visit(doc, {
-    OperationDefinition(node) {
-      return {
-        ...node,
-        directives: node.directives?.filter(
-          (d) => d.name.value !== "prefetch" && d.name.value !== "tool"
-        ),
-      };
-    },
-  });
+  return removeDirectivesFromDocument(
+    [{ name: "prefetch" }, { name: "tool" }],
+    doc
+  )!;
+}
+
+function invariant(condition: any, message: string): asserts condition {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
+
+// possible values of `typeof`
+type TypeofResult =
+  | "string"
+  | "number"
+  | "bigint"
+  | "boolean"
+  | "symbol"
+  | "undefined"
+  | "object"
+  | "function";
+
+type TypeofResultToConcreteType<T extends TypeofResult> =
+  T extends "string" ? string
+  : T extends "number" ? number
+  : T extends "bigint" ? bigint
+  : T extends "boolean" ? boolean
+  : T extends "symbol" ? symbol
+  : T extends "undefined" ? undefined
+  : T extends "object" ? object
+  : T extends "function" ? Function
+  : never;
+
+function validateType<Typeof extends TypeofResult>(
+  value: unknown,
+  expectedType: Typeof,
+  options: { propertyName: string }
+): asserts value is TypeofResultToConcreteType<Typeof> {
+  invariant(
+    typeof value === expectedType,
+    `Expected '${options.propertyName}' to be of type '${expectedType}' but found '${typeof value}' instead.`
+  );
+}
+
+function isNonEmptyObject(obj: object) {
+  return Object.keys(obj).length > 0;
 }

package/src/vite/index.ts

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

package/tsconfig.base.build.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "inlineSources": true,
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true
+  }
+}

package/tsconfig.base.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "target": "esnext",
+    "lib": ["esnext"],
+    "exactOptionalPropertyTypes": true,
+    "strict": true,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "importHelpers": true,
+    "noUncheckedSideEffectImports": true,
+    "noUnusedLocals": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+    "esModuleInterop": true
+  }
+}

package/tsconfig.config.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.base.json",
+  "include": ["./vitest.config.ts"],
+  "compilerOptions": {
+    "rootDir": ".",
+    "composite": true
+  }
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.config.json" },
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.test.json" },
+    { "path": "./tsconfig.vite.json" }
+  ]
+}

package/tsconfig.src.build.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.base.build.json",
+  "include": ["./src"],
+  "exclude": [
+    "./src/**/*.test.ts",
+    "./src/**/*.test.tsx",
+    "./src/vite/",
+    "./src/testing/internal/"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM"]
+  }
+}

package/tsconfig.src.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.base.json",
+  "include": ["./src"],
+  "exclude": [
+    "./src/**/*.test.ts",
+    "./src/**/*.test.tsx",
+    "./src/vite/",
+    "./src/testing/internal/"
+  ],
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "composite": true,
+    "lib": ["dom", "esnext"]
+  }
+}

package/tsconfig.test.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.base.json",
+  "include": [
+    "./src/**/*.test.ts",
+    "./src/**/*.test.tsx",
+    "./src/testing/internal/"
+  ],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.vite.json" }
+  ],
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "composite": true,
+    "lib": ["dom", "esnext"],
+    "types": ["node"]
+  }
+}

package/tsconfig.vite.build.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.base.build.json",
+  "include": ["./src/vite/"],
+  "exclude": ["**/*.test.ts", "**/*.test.tsx"]
+}

package/tsconfig.vite.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.base.json",
+  "include": ["./src/vite", "./src/types/application-manifest.ts"],
+  "exclude": [
+    "./src/**/*.test.ts",
+    "./src/**/*.test.tsx",
+    "./src/testing/internal/"
+  ],
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "lib": ["esnext"],
+    "composite": true
+  }
+}

package/scripts/build-vite.mjs

@@ -1,18 +0,0 @@
-import * as esbuild from "esbuild";
-
-// Separately build Vite plugin
-await esbuild.build({
-  entryPoints: ["src/vite/index.ts"],
-  bundle: true,
-  outdir: "dist/vite",
-  platform: "node",
-  format: "esm",
-  external: [
-    "glob",
-    "@graphql-tools/graphql-tag-pluck",
-    "@graphql-tools/graphql-tag-pluck",
-    "graphql",
-    "@apollo/client",
-    "rxjs",
-  ],
-});

package/scripts/build.mjs

@@ -1,7 +0,0 @@
-import * as esbuild from "esbuild";
-import { sharedConfig } from "./shared.mjs";
-
-// Build react components
-await esbuild.build({
-  ...sharedConfig,
-});

package/scripts/shared.mjs

@@ -1,9 +0,0 @@
-export const sharedConfig = {
-  entryPoints: ["src/index.ts"],
-  bundle: true,
-  outdir: "dist",
-  platform: "browser",
-  format: "esm",
-  packages: "external",
-  external: ["react", "react-dom"],
-};