@ai-sdk/angular 2.0.45 → 2.0.46

package/src/lib/chat.ng.ts

@@ -0,0 +1,77 @@
+import { signal } from '@angular/core';
+import {
+  type ChatState,
+  type ChatStatus,
+  type UIMessage,
+  type ChatInit,
+  AbstractChat,
+} from 'ai';
+
+export class Chat<
+  UI_MESSAGE extends UIMessage = UIMessage,
+> extends AbstractChat<UI_MESSAGE> {
+  constructor(init: ChatInit<UI_MESSAGE>) {
+    super({
+      ...init,
+      state: new AngularChatState(init.messages),
+    });
+  }
+}
+
+class AngularChatState<UI_MESSAGE extends UIMessage = UIMessage>
+  implements ChatState<UI_MESSAGE>
+{
+  readonly #messages = signal<UI_MESSAGE[]>([]);
+  readonly #status = signal<ChatStatus>('ready');
+  readonly #error = signal<Error | undefined>(undefined);
+
+  get messages(): UI_MESSAGE[] {
+    return this.#messages();
+  }
+
+  set messages(messages: UI_MESSAGE[]) {
+    this.#messages.set([...messages]);
+  }
+
+  get status(): ChatStatus {
+    return this.#status();
+  }
+
+  set status(status: ChatStatus) {
+    this.#status.set(status);
+  }
+
+  get error(): Error | undefined {
+    return this.#error();
+  }
+
+  set error(error: Error | undefined) {
+    this.#error.set(error);
+  }
+
+  constructor(initialMessages: UI_MESSAGE[] = []) {
+    this.#messages.set([...initialMessages]);
+  }
+
+  setMessages = (messages: UI_MESSAGE[]) => {
+    this.#messages.set([...messages]);
+  };
+
+  pushMessage = (message: UI_MESSAGE) => {
+    this.#messages.update(msgs => [...msgs, message]);
+  };
+
+  popMessage = () => {
+    this.#messages.update(msgs => msgs.slice(0, -1));
+  };
+
+  replaceMessage = (index: number, message: UI_MESSAGE) => {
+    this.#messages.update(msgs => {
+      const copy = [...msgs];
+      copy[index] = message;
+      return copy;
+    });
+  };
+
+  snapshot = <T>(thing: T): T => structuredClone(thing);
+}

package/src/lib/completion.ng.test.ts

@@ -0,0 +1,170 @@
+import {
+  createTestServer,
+  TestResponseController,
+} from '@ai-sdk/test-server/with-vitest';
+import { Completion } from './completion.ng';
+import { beforeAll } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
+
+function formatStreamPart(part: object) {
+  return `data: ${JSON.stringify(part)}\n\n`;
+}
+
+const server = createTestServer({
+  '/api/completion': {},
+});
+
+describe('Completion', () => {
+  beforeAll(() => {
+    createTestServer({});
+  });
+
+  it('initialises', () => {
+    const completion = new Completion();
+    expect(completion.api).toBe('/api/completion');
+    expect(completion.completion).toBe('');
+    expect(completion.input).toBe('');
+    expect(completion.error).toBeUndefined();
+    expect(completion.loading).toBe(false);
+    expect(completion.id).toBeDefined();
+  });
+
+  it('should render a data stream', async () => {
+    server.urls['/api/completion'].response = {
+      type: 'stream-chunks',
+      chunks: [
+        formatStreamPart({ type: 'text-start', id: '0' }),
+        formatStreamPart({ type: 'text-delta', id: '0', delta: 'Hello' }),
+        formatStreamPart({ type: 'text-delta', id: '0', delta: ',' }),
+        formatStreamPart({ type: 'text-delta', id: '0', delta: ' world' }),
+        formatStreamPart({ type: 'text-delta', id: '0', delta: '.' }),
+        formatStreamPart({ type: 'text-end', id: '0' }),
+      ],
+    };
+    const completion = new Completion({
+      api: '/api/completion',
+    });
+    await completion.complete('hi');
+    expect(completion.completion).toBe('Hello, world.');
+  });
+
+  it('should render a text stream', async () => {
+    server.urls['/api/completion'].response = {
+      type: 'stream-chunks',
+      chunks: ['Hello', ',', ' world', '.'],
+    };
+
+    const completion = new Completion({ streamProtocol: 'text' });
+    await completion.complete('hi');
+    expect(completion.completion).toBe('Hello, world.');
+  });
+
+  it('should call `onFinish` callback', async () => {
+    server.urls['/api/completion'].response = {
+      type: 'stream-chunks',
+      chunks: [
+        formatStreamPart({ type: 'text-start', id: '0' }),
+        formatStreamPart({ type: 'text-delta', id: '0', delta: 'Hello' }),
+        formatStreamPart({ type: 'text-delta', id: '0', delta: ',' }),
+        formatStreamPart({ type: 'text-delta', id: '0', delta: ' world' }),
+        formatStreamPart({ type: 'text-delta', id: '0', delta: '.' }),
+        formatStreamPart({ type: 'text-end', id: '0' }),
+      ],
+    };
+
+    const onFinish = vi.fn();
+    const completion = new Completion({ onFinish });
+    await completion.complete('hi');
+    expect(onFinish).toHaveBeenCalledExactlyOnceWith('hi', 'Hello, world.');
+  });
+
+  it('should show loading state', async () => {
+    const controller = new TestResponseController();
+    server.urls['/api/completion'].response = {
+      type: 'controlled-stream',
+      controller,
+    };
+
+    const completion = new Completion();
+    const completionOperation = completion.complete('hi');
+    controller.write('0:"Hello"\n');
+    await vi.waitFor(() => expect(completion.loading).toBe(true));
+    controller.close();
+    await completionOperation;
+    expect(completion.loading).toBe(false);
+  });
+
+  describe('stop', () => {
+    it('should abort the stream and not consume any more data', async () => {
+      const controller = new TestResponseController();
+      server.urls['/api/completion'].response = {
+        type: 'controlled-stream',
+        controller,
+      };
+
+      const completion = new Completion();
+      const completionOperation = completion.complete('hi');
+      controller.write(
+        formatStreamPart({ type: 'text-delta', id: '0', delta: 'Hello' }),
+      );
+
+      await vi.waitFor(() => {
+        expect(completion.loading).toBe(true);
+        expect(completion.completion).toBe('Hello');
+      });
+
+      completion.stop();
+
+      await vi.waitFor(() => expect(completion.loading).toBe(false));
+
+      await expect(controller.write('0:", world"\n')).rejects.toThrow();
+      await expect(controller.close()).rejects.toThrow();
+      await completionOperation;
+
+      expect(completion.loading).toBe(false);
+      expect(completion.completion).toBe('Hello');
+    });
+  });
+
+  it('should reset loading state on error', async () => {
+    server.urls['/api/completion'].response = {
+      type: 'error',
+      status: 404,
+      body: 'Not found',
+    };
+
+    const completion = new Completion();
+    await completion.complete('hi');
+    expect(completion.error).toBeInstanceOf(Error);
+    expect(completion.loading).toBe(false);
+  });
+
+  it('should reset error state on subsequent completion', async () => {
+    server.urls['/api/completion'].response = [
+      {
+        type: 'error',
+        status: 404,
+        body: 'Not found',
+      },
+      {
+        type: 'stream-chunks',
+        chunks: [
+          formatStreamPart({ type: 'text-start', id: '0' }),
+          formatStreamPart({ type: 'text-delta', id: '0', delta: 'Hello' }),
+          formatStreamPart({ type: 'text-delta', id: '0', delta: ',' }),
+          formatStreamPart({ type: 'text-delta', id: '0', delta: ' world' }),
+          formatStreamPart({ type: 'text-delta', id: '0', delta: '.' }),
+          formatStreamPart({ type: 'text-end', id: '0' }),
+        ],
+      },
+    ];
+
+    const completion = new Completion();
+    await completion.complete('hi');
+    expect(completion.error).toBeInstanceOf(Error);
+    expect(completion.loading).toBe(false);
+    await completion.complete('hi');
+    expect(completion.error).toBe(undefined);
+    expect(completion.completion).toBe('Hello, world.');
+  });
+});

package/src/lib/completion.ng.ts

@@ -0,0 +1,117 @@
+import { signal } from '@angular/core';
+import {
+  callCompletionApi,
+  generateId,
+  type CompletionRequestOptions,
+  type UseCompletionOptions,
+} from 'ai';
+
+export type CompletionOptions = Readonly<UseCompletionOptions>;
+
+export class Completion {
+  readonly #options: CompletionOptions;
+
+  // Static config
+  readonly id: string;
+  readonly api: string;
+  readonly streamProtocol: 'data' | 'text';
+
+  // Reactive state
+  readonly #input = signal('');
+  readonly #completion = signal<string>('');
+  readonly #error = signal<Error | undefined>(undefined);
+  readonly #loading = signal<boolean>(false);
+
+  #abortController: AbortController | null = null;
+
+  constructor(options: CompletionOptions = {}) {
+    this.#options = options;
+    this.#completion.set(options.initialCompletion ?? '');
+    this.#input.set(options.initialInput ?? '');
+    this.api = options.api ?? '/api/completion';
+    this.id = options.id ?? generateId();
+    this.streamProtocol = options.streamProtocol ?? 'data';
+  }
+
+  /** Current value of the completion. Writable. */
+  get completion(): string {
+    return this.#completion();
+  }
+  set completion(value: string) {
+    this.#completion.set(value);
+  }
+
+  /** Current value of the input. Writable. */
+  get input(): string {
+    return this.#input();
+  }
+  set input(value: string) {
+    this.#input.set(value);
+  }
+
+  /** The error object of the API request */
+  get error(): Error | undefined {
+    return this.#error();
+  }
+
+  /** Flag that indicates whether an API request is in progress. */
+  get loading(): boolean {
+    return this.#loading();
+  }
+
+  /** Abort the current request immediately, keep the generated tokens if any. */
+  stop = () => {
+    try {
+      this.#abortController?.abort();
+    } catch {
+      // ignore
+    } finally {
+      this.#loading.set(false);
+      this.#abortController = null;
+    }
+  };
+
+  /** Send a new prompt to the API endpoint and update the completion state. */
+  complete = async (prompt: string, options?: CompletionRequestOptions) =>
+    this.#triggerRequest(prompt, options);
+
+  /** Form submission handler to automatically reset input and call the completion API */
+  handleSubmit = async (event?: { preventDefault?: () => void }) => {
+    event?.preventDefault?.();
+    if (this.#input()) {
+      await this.complete(this.#input());
+    }
+  };
+
+  #triggerRequest = async (
+    prompt: string,
+    options?: CompletionRequestOptions,
+  ) => {
+    return callCompletionApi({
+      api: this.api,
+      prompt,
+      credentials: this.#options.credentials,
+      headers: { ...this.#options.headers, ...options?.headers },
+      body: {
+        ...this.#options.body,
+        ...options?.body,
+      },
+      streamProtocol: this.streamProtocol,
+      fetch: this.#options.fetch,
+      setCompletion: (completion: string) => {
+        this.#completion.set(completion);
+      },
+      setLoading: (loading: boolean) => {
+        this.#loading.set(loading);
+      },
+      setError: (error: any) => {
+        this.#error.set(error);
+      },
+      setAbortController: abortController => {
+        this.#abortController = abortController ?? null;
+      },
+      onFinish: this.#options.onFinish,
+      onError: this.#options.onError,
+    });
+  };
+}

package/src/lib/structured-object.ng.test.ts

@@ -0,0 +1,255 @@
+import {
+  createTestServer,
+  TestResponseController,
+} from '@ai-sdk/test-server/with-vitest';
+import { z } from 'zod/v4';
+import { StructuredObject } from './structured-object.ng';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const server = createTestServer({
+  '/api/object': {},
+});
+
+describe('text stream', () => {
+  const schema = z.object({ content: z.string() });
+  let structuredObject: StructuredObject<typeof schema>;
+
+  beforeEach(() => {
+    structuredObject = new StructuredObject({
+      api: '/api/object',
+      schema,
+    });
+  });
+
+  describe('when the API returns "Hello, world!"', () => {
+    beforeEach(async () => {
+      server.urls['/api/object'].response = {
+        type: 'stream-chunks',
+        chunks: ['{ ', '"content": "Hello, ', 'world', '!"', ' }'],
+      };
+      await structuredObject.submit('test-input');
+    });
+
+    it('should render the stream', () => {
+      expect(structuredObject.object).toEqual({ content: 'Hello, world!' });
+    });
+
+    it('should send the correct input to the API', async () => {
+      expect(await server.calls[0].requestBodyJson).toBe('test-input');
+    });
+
+    it('should not have an error', () => {
+      expect(structuredObject.error).toBeUndefined();
+    });
+  });
+
+  describe('loading', () => {
+    it('should be true while loading', async () => {
+      const controller = new TestResponseController();
+      server.urls['/api/object'].response = {
+        type: 'controlled-stream',
+        controller,
+      };
+
+      controller.write('{"content": ');
+      const submitOperation = structuredObject.submit('test-input');
+
+      await vi.waitFor(() => {
+        expect(structuredObject.loading).toBe(true);
+      });
+
+      controller.write('"Hello, world!"}');
+      controller.close();
+      await submitOperation;
+
+      expect(structuredObject.loading).toBe(false);
+    });
+  });
+
+  describe('stop', () => {
+    it('should abort the stream and not consume any more data', async () => {
+      const controller = new TestResponseController();
+      server.urls['/api/object'].response = {
+        type: 'controlled-stream',
+        controller,
+      };
+
+      controller.write('{"content": "h');
+      const submitOperation = structuredObject.submit('test-input');
+
+      await vi.waitFor(() => {
+        expect(structuredObject.loading).toBe(true);
+        expect(structuredObject.object).toStrictEqual({
+          content: 'h',
+        });
+      });
+
+      structuredObject.stop();
+
+      await vi.waitFor(() => {
+        expect(structuredObject.loading).toBe(false);
+      });
+
+      await expect(controller.write('ello, world!"}')).rejects.toThrow();
+      await expect(controller.close()).rejects.toThrow();
+      await submitOperation;
+
+      expect(structuredObject.loading).toBe(false);
+      expect(structuredObject.object).toStrictEqual({
+        content: 'h',
+      });
+    });
+
+    it('should stop and clear the object state after a call to submit then clear', async () => {
+      const controller = new TestResponseController();
+      server.urls['/api/object'].response = {
+        type: 'controlled-stream',
+        controller,
+      };
+
+      controller.write('{"content": "h');
+      const submitOperation = structuredObject.submit('test-input');
+
+      await vi.waitFor(() => {
+        expect(structuredObject.loading).toBe(true);
+        expect(structuredObject.object).toStrictEqual({
+          content: 'h',
+        });
+      });
+
+      structuredObject.clear();
+
+      await vi.waitFor(() => {
+        expect(structuredObject.loading).toBe(false);
+      });
+
+      await expect(controller.write('ello, world!"}')).rejects.toThrow();
+      await expect(controller.close()).rejects.toThrow();
+      await submitOperation;
+
+      expect(structuredObject.loading).toBe(false);
+      expect(structuredObject.error).toBeUndefined();
+      expect(structuredObject.object).toBeUndefined();
+    });
+  });
+
+  describe('when the API returns a 404', () => {
+    it('should produce the correct error state', async () => {
+      server.urls['/api/object'].response = {
+        type: 'error',
+        status: 404,
+        body: 'Not found',
+      };
+
+      await structuredObject.submit('test-input');
+      expect(structuredObject.error).toBeInstanceOf(Error);
+      expect(structuredObject.error?.message).toBe('Not found');
+      expect(structuredObject.loading).toBe(false);
+    });
+  });
+
+  describe('onFinish', () => {
+    it('should be called with an object when the stream finishes and the object matches the schema', async () => {
+      server.urls['/api/object'].response = {
+        type: 'stream-chunks',
+        chunks: ['{ ', '"content": "Hello, ', 'world', '!"', '}'],
+      };
+
+      const onFinish = vi.fn();
+      const structuredObjectWithOnFinish = new StructuredObject({
+        api: '/api/object',
+        schema: z.object({ content: z.string() }),
+        onFinish,
+      });
+      await structuredObjectWithOnFinish.submit('test-input');
+
+      expect(onFinish).toHaveBeenCalledExactlyOnceWith({
+        object: { content: 'Hello, world!' },
+        error: undefined,
+      });
+    });
+
+    it('should be called with an error when the stream finishes and the object does not match the schema', async () => {
+      server.urls['/api/object'].response = {
+        type: 'stream-chunks',
+        chunks: ['{ ', '"content-wrong": "Hello, ', 'world', '!"', '}'],
+      };
+
+      const onFinish = vi.fn();
+      const structuredObjectWithOnFinish = new StructuredObject({
+        api: '/api/object',
+        schema: z.object({ content: z.string() }),
+        onFinish,
+      });
+      await structuredObjectWithOnFinish.submit('test-input');
+
+      expect(onFinish).toHaveBeenCalledExactlyOnceWith({
+        object: undefined,
+        error: expect.any(Error),
+      });
+    });
+  });
+
+  it('should send custom headers', async () => {
+    server.urls['/api/object'].response = {
+      type: 'stream-chunks',
+      chunks: ['{ ', '"content": "Hello, ', 'world', '!"', '}'],
+    };
+
+    const structuredObjectWithCustomHeaders = new StructuredObject({
+      api: '/api/object',
+      schema: z.object({ content: z.string() }),
+      headers: {
+        Authorization: 'Bearer TEST_TOKEN',
+        'X-Custom-Header': 'CustomValue',
+      },
+    });
+
+    await structuredObjectWithCustomHeaders.submit('test-input');
+
+    expect(server.calls[0].requestHeaders).toStrictEqual({
+      'content-type': 'application/json',
+      authorization: 'Bearer TEST_TOKEN',
+      'x-custom-header': 'CustomValue',
+    });
+  });
+
+  it('should send custom credentials', async () => {
+    server.urls['/api/object'].response = {
+      type: 'stream-chunks',
+      chunks: ['{ ', '"content": "Hello, ', 'world', '!"', '}'],
+    };
+
+    const structuredObjectWithCustomCredentials = new StructuredObject({
+      api: '/api/object',
+      schema: z.object({ content: z.string() }),
+      credentials: 'include',
+    });
+
+    await structuredObjectWithCustomCredentials.submit('test-input');
+
+    expect(server.calls[0].requestCredentials).toBe('include');
+  });
+
+  it('should clear the object state after a call to clear', async () => {
+    server.urls['/api/object'].response = {
+      type: 'stream-chunks',
+      chunks: ['{ ', '"content": "Hello, ', 'world', '!"', '}'],
+    };
+
+    const structuredObjectWithOnFinish = new StructuredObject({
+      api: '/api/object',
+      schema: z.object({ content: z.string() }),
+    });
+
+    await structuredObjectWithOnFinish.submit('test-input');
+
+    expect(structuredObjectWithOnFinish.object).toBeDefined();
+
+    structuredObjectWithOnFinish.clear();
+
+    expect(structuredObjectWithOnFinish.object).toBeUndefined();
+    expect(structuredObjectWithOnFinish.error).toBeUndefined();
+    expect(structuredObjectWithOnFinish.loading).toBe(false);
+  });
+});