feat(ai): add files for AI mocking

Author: gwardwell

packages/ai/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./mocking/AIAdapter.js";
+export * from "./mocking/AIMockLink.js";
+export * from "./mocking/AIMockProvider.js";

packages/ai/src/mocking/AIAdapter.ts

@@ -0,0 +1,66 @@
+import { ApolloLink } from "@apollo/client";
+import { print } from "graphql";
+import { BASE_SYSTEM_PROMPT } from "./consts.js";
+
+export declare namespace AIAdapter {
+  export interface Options {
+    systemPrompt?: string;
+  }
+
+  export type Result = ApolloLink.Result;
+}
+
+export abstract class AIAdapter {
+  public providedSystemPrompt: string | undefined;
+  protected systemPrompt: string;
+
+  constructor(options: AIAdapter.Options = {}) {
+    this.systemPrompt = BASE_SYSTEM_PROMPT;
+    if (options.systemPrompt) {
+      this.providedSystemPrompt = options.systemPrompt;
+      this.systemPrompt += `\n\n${this.providedSystemPrompt}`;
+    }
+  }
+
+  public generateResponseForOperation(
+    operation: ApolloLink.Operation,
+    prompt: string
+  ): Promise<AIAdapter.Result> {
+    return Promise.resolve({ data: null });
+  }
+
+  protected createPrompt(
+    { query, variables }: ApolloLink.Operation,
+    prompt: string
+  ): string {
+    // Try to get the GraphQL query document string
+    // from the AST location if available, otherwise
+    // use the `print` function to get the query string.
+    //
+    // The AST location may not be available if the query
+    // was parsed with the `noLocation: true` option.
+    //
+    // If the query document string is available through
+    // the AST location, it will save some processing time
+    // over the `print` function.
+    const queryString = query?.loc?.source?.body ?? print(query);
+
+    let promptVariables = "";
+    if (variables) {
+      promptVariables = `
+
+    With variables:
+    \`\`\`json
+    ${JSON.stringify(variables, null, 2)}
+    \`\`\``;
+    }
+
+    return `Give me mock data that fulfills this query:
+    \`\`\`graphql
+    ${queryString}
+    \`\`\`
+    ${promptVariables}
+    ${prompt ? `\nAdditional instructions:\n${prompt}` : ""}
+    `;
+  }
+}

packages/ai/src/mocking/AIMockLink.ts

@@ -0,0 +1,50 @@
+import { ApolloLink, Observable } from "@apollo/client";
+import { AIAdapter } from "./AIAdapter.js";
+
+export declare namespace AIMockLink {
+  export type DefaultOptions = {};
+
+  export interface Options {
+    systemPrompt?: string;
+    showWarnings?: boolean;
+    defaultOptions?: DefaultOptions;
+  }
+}
+
+export class AIMockLink extends ApolloLink {
+  public showWarnings: boolean = true;
+  public systemPrompt?: string = "";
+
+  public static defaultOptions: AIMockLink.DefaultOptions = {};
+
+  constructor(
+    private adapter: AIAdapter,
+    options: AIMockLink.Options = {}
+  ) {
+    super();
+
+    this.systemPrompt = options.systemPrompt;
+    this.showWarnings = options.showWarnings ?? true;
+  }
+
+  public request(
+    operation: ApolloLink.Operation
+  ): Observable<ApolloLink.Result> {
+    const prompt = operation.getContext().prompt;
+
+    return new Observable((observer) => {
+      try {
+        this.adapter
+          .generateResponseForOperation(operation, prompt)
+          .then((result) => {
+            // Notify the observer with the generated response
+            observer.next(result);
+            observer.complete();
+          });
+      } catch (error) {
+        observer.error(error);
+        observer.complete();
+      }
+    });
+  }
+}

packages/ai/src/mocking/AIMockProvider.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { ApolloClient } from "@apollo/client";
+import type { ApolloCache } from "@apollo/client/cache";
+import { InMemoryCache as Cache } from "@apollo/client/cache";
+import type { ApolloLink } from "@apollo/client/link";
+import type { LocalState } from "@apollo/client/local-state";
+import { ApolloProvider } from "@apollo/client/react";
+import { MockLink } from "@apollo/client/testing";
+import { AIAdapter } from "./AIAdapter.js";
+import { AIMockLink } from "./AIMockLink.js";
+
+export interface AIMockedProviderProps {
+  adapter: AIAdapter;
+  systemPrompt?: string;
+  defaultOptions?: ApolloClient.DefaultOptions;
+  cache?: ApolloCache;
+  localState?: LocalState;
+  childProps?: object;
+  children?: any;
+  link?: ApolloLink;
+  showWarnings?: boolean;
+  mockLinkDefaultOptions?: MockLink.DefaultOptions;
+  devtools?: ApolloClient.Options["devtools"];
+}
+
+interface AIMockedProviderState {
+  client: ApolloClient;
+}
+
+export class AIMockedProvider extends React.Component<
+  AIMockedProviderProps,
+  AIMockedProviderState
+> {
+  constructor(props: AIMockedProviderProps) {
+    super(props);
+
+    const {
+      adapter,
+      systemPrompt,
+      defaultOptions,
+      cache,
+      localState,
+      link,
+      showWarnings,
+      mockLinkDefaultOptions,
+      devtools,
+    } = this.props;
+
+    const client = new ApolloClient({
+      cache: cache || new Cache(),
+      defaultOptions,
+      link:
+        link ||
+        new AIMockLink(adapter, {
+          systemPrompt,
+          showWarnings,
+          defaultOptions: mockLinkDefaultOptions,
+        }),
+      localState,
+      devtools,
+    });
+
+    this.state = {
+      client,
+    };
+  }
+
+  public render() {
+    const { children, childProps } = this.props;
+    const { client } = this.state;
+
+    return React.isValidElement(children) ?
+        <ApolloProvider client={client}>
+          {React.cloneElement(React.Children.only(children), { ...childProps })}
+        </ApolloProvider>
+      : null;
+  }
+
+  public componentWillUnmount() {
+    // Since this.state.client was created in the
+    // constructor, it's this MockedProvider's responsibility
+    // to terminate it.
+    this.state.client.stop();
+  }
+}

packages/ai/src/mocking/consts.ts

@@ -0,0 +1,16 @@
+export const BASE_SYSTEM_PROMPT = `
+You are returning mock data for a GraphQL API.
+
+When generating image URLs, use these reliable placeholder services with unique identifiers:
+- https://picsum.photos/[width]/[height]?random=[unique_identifier] (e.g., https://picsum.photos/400/300?random=asdf, ?random=ytal, etc.)
+- https://via.placeholder.com/[width]x[height]/[color]/[text_color]?text=[context] (e.g., ?text=Product+asdf)
+- https://placehold.co/[width]x[height]/[color]/[text_color]?text=[context] (e.g, ?text=User+Avatar)
+
+For list items, increment the random number or use contextual text to ensure unique images.
+
+Avoid using numbers for unique identifiers. Unique identifier and typename combinations should result in consistent data.
+
+For example, say something is named "Foobar", you should use a unique identifier like "foobar" and not a number.
+
+Remember context and data based on the unique identifier and typename so that data is consistent.
+`;