@copilotkitnext/angular 0.0.1 → 0.0.4

package/src/directives/__tests__/copilotkit-human-in-the-loop.directive.spec.ts

@@ -1,452 +0,0 @@
-import { Component, TemplateRef, ViewChild } from "@angular/core";
-import { TestBed } from "@angular/core/testing";
-import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
-import { CopilotKitHumanInTheLoopDirective } from "../copilotkit-human-in-the-loop.directive";
-import { CopilotKitService } from "../../core/copilotkit.service";
-import { provideCopilotKit } from "../../core/copilotkit.providers";
-import { z } from "zod";
-import { By } from "@angular/platform-browser";
-
-// Mock CopilotKitCore
-const mockCopilotKitCore = {
-  addTool: vi.fn(() => "tool-id-123"),
-  removeTool: vi.fn(),
-  setRuntimeUrl: vi.fn(),
-  setHeaders: vi.fn(),
-  setProperties: vi.fn(),
-  setAgents: vi.fn(),
-  getAgent: vi.fn(),
-  subscribe: vi.fn(() => vi.fn()),
-};
-
-vi.mock("@copilotkitnext/core", () => ({
-  CopilotKitCore: vi.fn().mockImplementation(() => mockCopilotKitCore),
-  ToolCallStatus: {
-    InProgress: "inProgress",
-    Executing: "executing",
-    Complete: "complete",
-  },
-}));
-
-// Test approval component
-@Component({
-  selector: "test-approval",
-  template: `
-    <div class="approval-dialog">
-      <p>{{ action }}</p>
-      <button class="approve-btn">Approve</button>
-      <button class="reject-btn">Reject</button>
-    </div>
-  `,
-  standalone: true,
-})
-class TestApprovalComponent {
-  action = "";
-  respond?: (result: unknown) => Promise<void>;
-}
-
-describe("CopilotKitHumanInTheLoopDirective", () => {
-  let service: CopilotKitService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [provideCopilotKit({})],
-    });
-
-    service = TestBed.inject(CopilotKitService);
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe("Basic Usage", () => {
-    it("should register tool when directive is applied", () => {
-      @Component({
-        template: `
-          <div
-            copilotkitHumanInTheLoop
-            [name]="'requireApproval'"
-            [description]="'Requires user approval'"
-            [parameters]="parametersSchema"
-            [render]="approvalComponent"
-          ></div>
-        `,
-        standalone: true,
-        imports: [CopilotKitHumanInTheLoopDirective],
-      })
-      class TestComponent {
-        parametersSchema = z.object({ action: z.string() });
-        approvalComponent = TestApprovalComponent;
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-
-      expect(mockCopilotKitCore.addTool).toHaveBeenCalled();
-      const addToolCall = mockCopilotKitCore.addTool.mock.calls[0][0];
-      expect(addToolCall.name).toBe("requireApproval");
-      expect(addToolCall.description).toBe("Requires user approval");
-      expect(typeof addToolCall.handler).toBe("function");
-    });
-
-    it("should support config object input", () => {
-      @Component({
-        template: ` <div [copilotkitHumanInTheLoop]="config"></div> `,
-        standalone: true,
-        imports: [CopilotKitHumanInTheLoopDirective],
-      })
-      class TestComponent {
-        config = {
-          name: "requireApproval",
-          description: "Requires user approval",
-          parameters: z.object({ action: z.string() }),
-          render: TestApprovalComponent,
-        };
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-
-      expect(mockCopilotKitCore.addTool).toHaveBeenCalled();
-      const addToolCall = mockCopilotKitCore.addTool.mock.calls[0][0];
-      expect(addToolCall.name).toBe("requireApproval");
-    });
-
-    it("should not register when enabled is false", () => {
-      @Component({
-        template: `
-          <div
-            copilotkitHumanInTheLoop
-            [name]="'requireApproval'"
-            [description]="'Requires user approval'"
-            [parameters]="parametersSchema"
-            [render]="approvalComponent"
-            [enabled]="false"
-          ></div>
-        `,
-        standalone: true,
-        imports: [CopilotKitHumanInTheLoopDirective],
-      })
-      class TestComponent {
-        parametersSchema = z.object({ action: z.string() });
-        approvalComponent = TestApprovalComponent;
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-
-      expect(mockCopilotKitCore.addTool).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("Event Emissions", () => {
-    it("should emit statusChange events", () => {
-      let statusChanges: string[] = [];
-
-      @Component({
-        template: `
-          <div
-            copilotkitHumanInTheLoop
-            [name]="'requireApproval'"
-            [description]="'Requires user approval'"
-            [parameters]="parametersSchema"
-            [render]="approvalComponent"
-            (statusChange)="onStatusChange($event)"
-          ></div>
-        `,
-        standalone: true,
-        imports: [CopilotKitHumanInTheLoopDirective],
-      })
-      class TestComponent {
-        parametersSchema = z.object({ action: z.string() });
-        approvalComponent = TestApprovalComponent;
-
-        onStatusChange(status: string) {
-          statusChanges.push(status);
-        }
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-
-      // Get the directive instance
-      const directiveEl = fixture.debugElement.query(
-        By.directive(CopilotKitHumanInTheLoopDirective)
-      );
-      const directive = directiveEl.injector.get(
-        CopilotKitHumanInTheLoopDirective
-      );
-
-      // Initial status should be 'inProgress'
-      expect(directive.status).toBe("inProgress");
-
-      // Get the handler and call it to trigger status change
-      const addToolCall = mockCopilotKitCore.addTool.mock.calls[0][0];
-      const handler = addToolCall.handler;
-
-      // This should change status to 'executing'
-      handler({ action: "delete" });
-
-      // Note: We can't easily test the async behavior without more complex setup
-    });
-
-    it("should emit executionStarted when handler is called", () => {
-      let executionArgs: any;
-
-      @Component({
-        template: `
-          <div
-            copilotkitHumanInTheLoop
-            [name]="'requireApproval'"
-            [description]="'Requires user approval'"
-            [parameters]="parametersSchema"
-            [render]="approvalComponent"
-            (executionStarted)="onExecutionStarted($event)"
-          ></div>
-        `,
-        standalone: true,
-        imports: [CopilotKitHumanInTheLoopDirective],
-      })
-      class TestComponent {
-        parametersSchema = z.object({ action: z.string() });
-        approvalComponent = TestApprovalComponent;
-
-        onExecutionStarted(args: any) {
-          executionArgs = args;
-        }
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-
-      // Get the handler and call it
-      const addToolCall = mockCopilotKitCore.addTool.mock.calls[0][0];
-      const handler = addToolCall.handler;
-
-      handler({ action: "delete" });
-
-      expect(executionArgs).toEqual({ action: "delete" });
-    });
-
-    it("should support two-way binding for status", () => {
-      @Component({
-        template: `
-          <div
-            copilotkitHumanInTheLoop
-            [name]="'requireApproval'"
-            [description]="'Requires user approval'"
-            [parameters]="parametersSchema"
-            [render]="approvalComponent"
-            [(status)]="currentStatus"
-          ></div>
-        `,
-        standalone: true,
-        imports: [CopilotKitHumanInTheLoopDirective],
-      })
-      class TestComponent {
-        parametersSchema = z.object({ action: z.string() });
-        approvalComponent = TestApprovalComponent;
-        currentStatus = "inProgress";
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-
-      expect(fixture.componentInstance.currentStatus).toBe("inProgress");
-
-      // Note: Testing two-way binding fully would require triggering status changes
-    });
-  });
-
-  describe("Template Support", () => {
-    it("should work with template ref", () => {
-      @Component({
-        template: `
-          <div
-            copilotkitHumanInTheLoop
-            [name]="'requireApproval'"
-            [description]="'Requires user approval'"
-            [parameters]="parametersSchema"
-            [render]="approvalTemplate"
-          ></div>
-
-          <ng-template #approvalTemplate let-props>
-            <div class="template-approval">
-              <p>{{ props.args.action }}</p>
-              <button *ngIf="props.respond">Approve</button>
-            </div>
-          </ng-template>
-        `,
-        standalone: true,
-        imports: [CopilotKitHumanInTheLoopDirective],
-      })
-      class TestComponent {
-        @ViewChild("approvalTemplate", { static: true })
-        approvalTemplate!: TemplateRef<any>;
-        parametersSchema = z.object({ action: z.string() });
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-
-      expect(mockCopilotKitCore.addTool).toHaveBeenCalled();
-      const addToolCall = mockCopilotKitCore.addTool.mock.calls[0][0];
-      expect(addToolCall.name).toBe("requireApproval");
-    });
-  });
-
-  describe("Dynamic Updates", () => {
-    it("should re-register tool when inputs change", () => {
-      @Component({
-        template: `
-          <div
-            copilotkitHumanInTheLoop
-            [name]="toolName"
-            [description]="description"
-            [parameters]="parametersSchema"
-            [render]="approvalComponent"
-          ></div>
-        `,
-        standalone: true,
-        imports: [CopilotKitHumanInTheLoopDirective],
-      })
-      class TestComponent {
-        toolName = "requireApproval";
-        description = "Requires user approval";
-        parametersSchema = z.object({ action: z.string() });
-        approvalComponent = TestApprovalComponent;
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-
-      expect(mockCopilotKitCore.addTool).toHaveBeenCalledTimes(1);
-
-      // Change the name
-      fixture.componentInstance.toolName = "requireConfirmation";
-      fixture.detectChanges();
-
-      // Should remove old tool and add new one
-      expect(mockCopilotKitCore.removeTool).toHaveBeenCalledWith(
-        "requireApproval"
-      );
-      expect(mockCopilotKitCore.addTool).toHaveBeenCalledTimes(2);
-
-      const secondCall = mockCopilotKitCore.addTool.mock.calls[1][0];
-      expect(secondCall.name).toBe("requireConfirmation");
-    });
-
-    it("should handle enabling/disabling", () => {
-      @Component({
-        template: `
-          <div
-            copilotkitHumanInTheLoop
-            [name]="'requireApproval'"
-            [description]="'Requires user approval'"
-            [parameters]="parametersSchema"
-            [render]="approvalComponent"
-            [enabled]="isEnabled"
-          ></div>
-        `,
-        standalone: true,
-        imports: [CopilotKitHumanInTheLoopDirective],
-      })
-      class TestComponent {
-        parametersSchema = z.object({ action: z.string() });
-        approvalComponent = TestApprovalComponent;
-        isEnabled = true;
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-
-      expect(mockCopilotKitCore.addTool).toHaveBeenCalledTimes(1);
-
-      // Disable the tool
-      fixture.componentInstance.isEnabled = false;
-      fixture.detectChanges();
-
-      expect(mockCopilotKitCore.removeTool).toHaveBeenCalledWith(
-        "requireApproval"
-      );
-
-      // Re-enable the tool
-      fixture.componentInstance.isEnabled = true;
-      fixture.detectChanges();
-
-      expect(mockCopilotKitCore.addTool).toHaveBeenCalledTimes(2);
-    });
-  });
-
-  describe("Cleanup", () => {
-    it("should unregister tool on destroy", () => {
-      @Component({
-        template: `
-          <div
-            copilotkitHumanInTheLoop
-            [name]="'requireApproval'"
-            [description]="'Requires user approval'"
-            [parameters]="parametersSchema"
-            [render]="approvalComponent"
-          ></div>
-        `,
-        standalone: true,
-        imports: [CopilotKitHumanInTheLoopDirective],
-      })
-      class TestComponent {
-        parametersSchema = z.object({ action: z.string() });
-        approvalComponent = TestApprovalComponent;
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-
-      const unregisterSpy = vi.spyOn(service, "unregisterToolRender");
-
-      fixture.destroy();
-
-      expect(mockCopilotKitCore.removeTool).toHaveBeenCalledWith(
-        "requireApproval"
-      );
-      expect(unregisterSpy).toHaveBeenCalledWith("requireApproval");
-    });
-  });
-
-  describe("Respond Method", () => {
-    it("should provide respond method on directive", () => {
-      @Component({
-        template: `
-          <div
-            copilotkitHumanInTheLoop
-            [name]="'requireApproval'"
-            [description]="'Requires user approval'"
-            [parameters]="parametersSchema"
-            [render]="approvalComponent"
-          ></div>
-        `,
-        standalone: true,
-        imports: [CopilotKitHumanInTheLoopDirective],
-      })
-      class TestComponent {
-        parametersSchema = z.object({ action: z.string() });
-        approvalComponent = TestApprovalComponent;
-      }
-
-      const fixture = TestBed.createComponent(TestComponent);
-      fixture.detectChanges();
-
-      const directiveEl = fixture.debugElement.query(
-        By.directive(CopilotKitHumanInTheLoopDirective)
-      );
-      const directive = directiveEl.injector.get(
-        CopilotKitHumanInTheLoopDirective
-      );
-
-      expect(typeof directive.respond).toBe("function");
-
-      // Note: Testing the actual response would require more complex async setup
-    });
-  });
-});

package/src/directives/copilotkit-agent-context.directive.ts

@@ -1,138 +0,0 @@
-import {
-  Directive,
-  Input,
-  OnInit,
-  OnChanges,
-  OnDestroy,
-  SimpleChanges,
-  Inject,
-} from "@angular/core";
-import { CopilotKitService } from "../core/copilotkit.service";
-import type { Context } from "@ag-ui/client";
-
-/**
- * Directive to manage agent context in CopilotKit.
- * Automatically adds context on init, updates on changes, and removes on destroy.
- *
- * @example
- * ```html
- * <!-- With separate inputs -->
- * <div copilotkitAgentContext
- *      [description]="'User preferences'"
- *      [value]="userSettings">
- * </div>
- *
- * <!-- With context object -->
- * <div [copilotkitAgentContext]="contextObject">
- * </div>
- *
- * <!-- With dynamic values -->
- * <div copilotkitAgentContext
- *      description="Form state"
- *      [value]="formData$ | async">
- * </div>
- * ```
- */
-@Directive({
-  selector: "[copilotkitAgentContext]",
-  standalone: true,
-})
-export class CopilotKitAgentContextDirective
-  implements OnInit, OnChanges, OnDestroy
-{
-  private contextId?: string;
-
-  constructor(
-    @Inject(CopilotKitService) private readonly copilotkit: CopilotKitService
-  ) {}
-
-  /**
-   * Context object containing both description and value.
-   * If provided, this takes precedence over individual inputs.
-   */
-  @Input("copilotkitAgentContext") context?: Context;
-
-  /**
-   * Description of the context.
-   * Used when context object is not provided.
-   */
-  @Input() description?: string;
-
-  /**
-   * Value of the context.
-   * Used when context object is not provided.
-   */
-  @Input() value?: any;
-
-  ngOnInit(): void {
-    this.addContext();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    // Check if any relevant input has changed
-    const hasContextChange = "context" in changes;
-    const hasDescriptionChange = "description" in changes;
-    const hasValueChange = "value" in changes;
-
-    if (hasContextChange || hasDescriptionChange || hasValueChange) {
-      // Skip the first change as ngOnInit handles initial setup
-      if (this.contextId) {
-        this.updateContext();
-      }
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.removeContext();
-  }
-
-  /**
-   * Adds the context to CopilotKit
-   */
-  private addContext(): void {
-    const contextToAdd = this.getContext();
-
-    if (contextToAdd) {
-      this.contextId = this.copilotkit.copilotkit.addContext(contextToAdd);
-    }
-  }
-
-  /**
-   * Updates the context by removing the old one and adding a new one
-   */
-  private updateContext(): void {
-    this.removeContext();
-    this.addContext();
-  }
-
-  /**
-   * Removes the current context from CopilotKit
-   */
-  private removeContext(): void {
-    if (this.contextId) {
-      this.copilotkit.copilotkit.removeContext(this.contextId);
-      this.contextId = undefined;
-    }
-  }
-
-  /**
-   * Gets the context object from inputs
-   */
-  private getContext(): Context | null {
-    // If context object is provided, use it
-    if (this.context) {
-      return this.context;
-    }
-
-    // Otherwise, build from individual inputs
-    // Note: null is a valid value, but undefined means not set
-    if (this.description !== undefined && this.value !== undefined) {
-      return {
-        description: this.description,
-        value: this.value,
-      };
-    }
-
-    return null;
-  }
-}