@copilotkitnext/angular 0.0.2 → 0.0.4

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

@@ -1,225 +0,0 @@
-import {
-  Directive,
-  Input,
-  Output,
-  EventEmitter,
-  OnInit,
-  OnChanges,
-  OnDestroy,
-  SimpleChanges,
-  signal,
-  Inject,
-} from "@angular/core";
-import { toObservable } from "@angular/core/rxjs-interop";
-import { Observable } from "rxjs";
-import { CopilotKitService } from "../core/copilotkit.service";
-import { AbstractAgent } from "@ag-ui/client";
-import { DEFAULT_AGENT_ID } from "@copilotkitnext/shared";
-
-/**
- * Directive to watch and interact with CopilotKit agents.
- * Provides reactive outputs for agent state changes.
- *
- * @example
- * ```html
- * <!-- Basic usage with default agent -->
- * <div copilotkitAgent
- *      (agentChange)="onAgentChange($event)"
- *      (runningChange)="isProcessing = $event">
- *   Content here
- * </div>
- *
- * <!-- With specific agent ID -->
- * <div copilotkitAgent
- *      [agentId]="'my-agent-id'"
- *      (agentChange)="currentAgent = $event"
- *      (runningChange)="onRunningStateChange($event)"
- *      (messagesChange)="onMessagesUpdate($event)"
- *      (stateChange)="onStateUpdate($event)">
- *   Content here
- * </div>
- *
- * <!-- Two-way binding for running state -->
- * <div copilotkitAgent
- *      [(running)]="isAgentRunning">
- *   <span *ngIf="isAgentRunning">Processing...</span>
- * </div>
- * ```
- */
-@Directive({
-  selector: "[copilotkitAgent]",
-  standalone: true,
-})
-export class CopilotKitAgentDirective implements OnInit, OnChanges, OnDestroy {
-  private agent?: AbstractAgent;
-  private agentSubscription?: { unsubscribe: () => void };
-  private coreUnsubscribe?: () => void; // subscribe returns function directly
-  private _isRunning = false;
-  private runningSignal = signal<boolean>(false);
-  private agentSignal = signal<AbstractAgent | undefined>(undefined);
-
-  constructor(
-    @Inject(CopilotKitService) private readonly copilotkit: CopilotKitService
-  ) {}
-
-  /**
-   * The ID of the agent to watch.
-   * If not provided, uses the default agent ID.
-   */
-  @Input() agentId?: string;
-
-  /**
-   * Alternative input using the directive selector.
-   * Allows: [copilotkitAgent]="'agent-id'"
-   */
-  @Input("copilotkitAgent")
-  set directiveAgentId(value: string | undefined) {
-    this.agentId = value || undefined;
-  }
-
-  /**
-   * Emits when the agent instance changes.
-   */
-  @Output() agentChange = new EventEmitter<AbstractAgent | undefined>();
-
-  /**
-   * Emits when the running state changes.
-   */
-  @Output() runningChange = new EventEmitter<boolean>();
-
-  /**
-   * Observable of the running state.
-   */
-  get running$(): Observable<boolean> {
-    return toObservable(this.runningSignal);
-  }
-
-  /**
-   * Observable of the agent instance.
-   */
-  get agent$(): Observable<AbstractAgent | undefined> {
-    return toObservable(this.agentSignal);
-  }
-
-  /**
-   * Two-way binding for running state.
-   */
-  @Input()
-  get running(): boolean {
-    return this._isRunning;
-  }
-  set running(value: boolean) {
-    // Input setter for two-way binding (though typically read-only from agent)
-    this._isRunning = value;
-  }
-
-  /**
-   * Emits when agent messages change.
-   */
-  @Output() messagesChange = new EventEmitter<any>();
-
-  /**
-   * Emits when agent state changes.
-   */
-  @Output() stateChange = new EventEmitter<any>();
-
-  /**
-   * Emits when a run is initialized.
-   */
-  @Output() runInitialized = new EventEmitter<any>();
-
-  /**
-   * Emits when a run is finalized.
-   */
-  @Output() runFinalized = new EventEmitter<any>();
-
-  /**
-   * Emits when a run fails.
-   */
-  @Output() runFailed = new EventEmitter<any>();
-
-  ngOnInit(): void {
-    this.setupAgent();
-    this.subscribeToCore();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes["agentId"] && !changes["agentId"].firstChange) {
-      // Agent ID changed, re-setup
-      this.cleanupAgentSubscription();
-      this.setupAgent();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.cleanupAgentSubscription();
-    this.cleanupCoreSubscription();
-  }
-
-  private setupAgent(): void {
-    const effectiveAgentId = this.agentId ?? DEFAULT_AGENT_ID;
-    this.agent = this.copilotkit.getAgent(effectiveAgentId);
-
-    // Update signals
-    this.agentSignal.set(this.agent);
-
-    // Emit initial agent
-    this.agentChange.emit(this.agent);
-
-    // Subscribe to agent events
-    this.subscribeToAgent();
-  }
-
-  private subscribeToAgent(): void {
-    this.cleanupAgentSubscription();
-
-    if (this.agent) {
-      this.agentSubscription = this.agent.subscribe({
-        onMessagesChanged: (params) => {
-          this.messagesChange.emit(params);
-        },
-        onStateChanged: (params) => {
-          this.stateChange.emit(params);
-        },
-        onRunInitialized: (params) => {
-          this._isRunning = true;
-          this.runningSignal.set(true);
-          this.runningChange.emit(true);
-          this.runInitialized.emit(params);
-        },
-        onRunFinalized: (params) => {
-          this._isRunning = false;
-          this.runningSignal.set(false);
-          this.runningChange.emit(false);
-          this.runFinalized.emit(params);
-        },
-        onRunFailed: (params) => {
-          this._isRunning = false;
-          this.runningSignal.set(false);
-          this.runningChange.emit(false);
-          this.runFailed.emit(params);
-        },
-      });
-    }
-  }
-
-  private subscribeToCore(): void {
-    // Subscribe to CopilotKit changes to detect agent updates
-    this.coreUnsubscribe = this.copilotkit.copilotkit.subscribe({
-      onRuntimeLoaded: () => {
-        // Re-check agent when runtime loads
-        this.setupAgent();
-      },
-    });
-  }
-
-  private cleanupAgentSubscription(): void {
-    this.agentSubscription?.unsubscribe();
-    this.agentSubscription = undefined;
-  }
-
-  private cleanupCoreSubscription(): void {
-    this.coreUnsubscribe?.();
-    this.coreUnsubscribe = undefined;
-  }
-}

package/src/directives/copilotkit-chat-config.directive.ts

@@ -1,241 +0,0 @@
-import {
-  Directive,
-  Input,
-  Output,
-  EventEmitter,
-  OnInit,
-  OnChanges,
-  OnDestroy,
-  SimpleChanges,
-  Optional,
-  isDevMode,
-  Inject,
-} from "@angular/core";
-import { CopilotChatConfigurationService } from "../core/chat-configuration/chat-configuration.service";
-import {
-  CopilotChatConfiguration,
-  CopilotChatLabels,
-} from "../core/chat-configuration/chat-configuration.types";
-
-/**
- * Directive for configuring CopilotKit chat settings declaratively in templates.
- * Works with the CopilotChatConfigurationService to provide reactive chat configuration.
- *
- * @example
- * ```html
- * <!-- Basic usage with individual inputs -->
- * <div copilotkitChatConfig
- *      [labels]="customLabels"
- *      [inputValue]="currentInput"
- *      (submitInput)="onSubmit($event)"
- *      (changeInput)="onChange($event)">
- *   <!-- Chat UI components -->
- * </div>
- *
- * <!-- Using configuration object -->
- * <div [copilotkitChatConfig]="chatConfig">
- *   <!-- Chat UI components -->
- * </div>
- *
- * <!-- Two-way binding for input value -->
- * <div copilotkitChatConfig
- *      [(value)]="chatInput"
- *      (submitInput)="handleSubmit($event)">
- *   <!-- Chat UI components -->
- * </div>
- * ```
- */
-@Directive({
-  selector: "[copilotkitChatConfig]",
-  standalone: true,
-})
-export class CopilotKitChatConfigDirective
-  implements OnInit, OnChanges, OnDestroy
-{
-  private _value?: string;
-  private submitHandler?: (value: string) => void;
-  private changeHandler?: (value: string) => void;
-
-  constructor(
-    @Optional()
-    @Inject(CopilotChatConfigurationService)
-    private readonly chatConfig: CopilotChatConfigurationService | null
-  ) {}
-
-  /**
-   * Partial labels to override defaults
-   */
-  @Input() labels?: Partial<CopilotChatLabels>;
-
-  /**
-   * The current input value
-   */
-  @Input() inputValue?: string;
-
-  /**
-   * Event emitted when input is submitted
-   */
-  @Output() submitInput = new EventEmitter<string>();
-
-  /**
-   * Event emitted when input value changes
-   */
-  @Output() changeInput = new EventEmitter<string>();
-
-  /**
-   * Alternative: accept full configuration object
-   */
-  @Input("copilotkitChatConfig")
-  set config(value: CopilotChatConfiguration | undefined) {
-    if (value) {
-      if (value.labels) this.labels = value.labels;
-      if (value.inputValue !== undefined) this.inputValue = value.inputValue;
-      // Store handlers for later setup
-      if (value.onSubmitInput) this.submitHandler = value.onSubmitInput;
-      if (value.onChangeInput) this.changeHandler = value.onChangeInput;
-    }
-  }
-
-  /**
-   * Two-way binding for input value
-   */
-  @Input()
-  get value(): string | undefined {
-    return this._value;
-  }
-  set value(v: string | undefined) {
-    this._value = v;
-    this.valueChange.emit(v);
-    if (v !== undefined) {
-      this.updateInputValue(v);
-    }
-  }
-
-  /**
-   * Two-way binding output for value
-   */
-  @Output() valueChange = new EventEmitter<string | undefined>();
-
-  ngOnInit(): void {
-    if (!this.chatConfig) {
-      if (isDevMode()) {
-        console.warn(
-          "CopilotKitChatConfigDirective: No CopilotChatConfigurationService found. " +
-            "Make sure to provide it using provideCopilotChatConfiguration()."
-        );
-      }
-      return;
-    }
-
-    this.updateConfiguration();
-    this.setupHandlers();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (!this.chatConfig) {
-      return;
-    }
-
-    const relevantChanges =
-      changes["labels"] || changes["inputValue"] || changes["value"];
-
-    if (relevantChanges && !relevantChanges.firstChange) {
-      this.updateConfiguration();
-    }
-  }
-
-  ngOnDestroy(): void {
-    // Cleanup if needed
-  }
-
-  /**
-   * Submit the current input value
-   */
-  submit(value: string): void {
-    // Emit to template binding
-    this.submitInput.emit(value);
-
-    // Call service handler
-    if (this.chatConfig) {
-      this.chatConfig.submitInput(value);
-    }
-
-    // Call provided handler
-    if (this.submitHandler) {
-      this.submitHandler(value);
-    }
-  }
-
-  /**
-   * Handle input value change
-   */
-  change(value: string): void {
-    // Update internal value
-    this._value = value;
-
-    // Emit to template bindings
-    this.changeInput.emit(value);
-    this.valueChange.emit(value);
-
-    // Call service handler
-    if (this.chatConfig) {
-      this.chatConfig.changeInput(value);
-    }
-
-    // Call provided handler
-    if (this.changeHandler) {
-      this.changeHandler(value);
-    }
-  }
-
-  private updateConfiguration(): void {
-    if (!this.chatConfig) {
-      return;
-    }
-
-    // Update labels if provided
-    if (this.labels) {
-      this.chatConfig.setLabels(this.labels);
-    }
-
-    // Update input value if provided
-    const valueToSet =
-      this._value !== undefined ? this._value : this.inputValue;
-    if (valueToSet !== undefined) {
-      this.chatConfig.setInputValue(valueToSet);
-    }
-  }
-
-  private updateInputValue(value: string): void {
-    if (this.chatConfig) {
-      this.chatConfig.setInputValue(value);
-      this.chatConfig.changeInput(value);
-    }
-  }
-
-  private setupHandlers(): void {
-    if (!this.chatConfig) {
-      return;
-    }
-
-    // Create composite handlers that call both service and directive handlers
-    const submitComposite = (value: string) => {
-      this.submitInput.emit(value);
-      if (this.submitHandler) {
-        this.submitHandler(value);
-      }
-    };
-
-    const changeComposite = (value: string) => {
-      this.changeInput.emit(value);
-      this.valueChange.emit(value);
-      if (this.changeHandler) {
-        this.changeHandler(value);
-      }
-    };
-
-    // Set handlers on the service
-    this.chatConfig.setSubmitHandler(submitComposite);
-    this.chatConfig.setChangeHandler(changeComposite);
-  }
-}

package/src/directives/copilotkit-config.directive.ts

@@ -1,81 +0,0 @@
-import { Directive, Input, OnChanges, SimpleChanges, Inject } from "@angular/core";
-import { CopilotKitService } from "../core/copilotkit.service";
-import { AbstractAgent } from "@ag-ui/client";
-
-/**
- * Directive to configure CopilotKit runtime settings declaratively in templates.
- * 
- * @example
- * ```html
- * <div [copilotkitConfig]="{
- *   runtimeUrl: 'https://api.example.com',
- *   headers: { 'Authorization': 'Bearer token' }
- * }">
- *   <!-- Your app content -->
- * </div>
- * ```
- * 
- * Or with individual inputs:
- * ```html
- * <div copilotkitConfig
- *      [runtimeUrl]="apiUrl"
- *      [headers]="authHeaders"
- *      [agents]="myAgents">
- *   <!-- Your app content -->
- * </div>
- * ```
- */
-@Directive({
-  selector: "[copilotkitConfig]",
-  standalone: true,
-})
-export class CopilotKitConfigDirective implements OnChanges {
-  constructor(@Inject(CopilotKitService) private readonly copilotkit: CopilotKitService) {}
-
-  @Input() copilotkitConfig?: {
-    runtimeUrl?: string;
-    headers?: Record<string, string>;
-    properties?: Record<string, unknown>;
-    agents?: Record<string, AbstractAgent>;
-  };
-
-  @Input() runtimeUrl?: string;
-  @Input() headers?: Record<string, string>;
-  @Input() properties?: Record<string, unknown>;
-  @Input() agents?: Record<string, AbstractAgent>;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    // Handle combined config object
-    if (changes['copilotkitConfig']) {
-      const config = this.copilotkitConfig;
-      if (config) {
-        if (config.runtimeUrl !== undefined) {
-          this.copilotkit.setRuntimeUrl(config.runtimeUrl);
-        }
-        if (config.headers) {
-          this.copilotkit.setHeaders(config.headers);
-        }
-        if (config.properties) {
-          this.copilotkit.setProperties(config.properties);
-        }
-        if (config.agents) {
-          this.copilotkit.setAgents(config.agents);
-        }
-      }
-    }
-
-    // Handle individual inputs
-    if (changes['runtimeUrl'] && !this.copilotkitConfig) {
-      this.copilotkit.setRuntimeUrl(this.runtimeUrl);
-    }
-    if (changes['headers'] && !this.copilotkitConfig) {
-      this.copilotkit.setHeaders(this.headers || {});
-    }
-    if (changes['properties'] && !this.copilotkitConfig) {
-      this.copilotkit.setProperties(this.properties || {});
-    }
-    if (changes['agents'] && !this.copilotkitConfig) {
-      this.copilotkit.setAgents(this.agents || {});
-    }
-  }
-}

package/src/directives/copilotkit-frontend-tool.directive.ts

@@ -1,145 +0,0 @@
-import {
-  Directive,
-  Input,
-  OnInit,
-  OnChanges,
-  OnDestroy,
-  SimpleChanges,
-  TemplateRef,
-  Type,
-  isDevMode,
-  Inject,
-} from "@angular/core";
-import { CopilotKitService } from "../core/copilotkit.service";
-import type {
-  AngularFrontendTool,
-  AngularToolCallRender,
-  ToolCallRender,
-} from "../core/copilotkit.types";
-import { z } from "zod";
-
-@Directive({
-  selector: "[copilotkitFrontendTool]",
-  standalone: true,
-})
-export class CopilotKitFrontendToolDirective<
-    T extends Record<string, any> = Record<string, any>,
-  >
-  implements OnInit, OnChanges, OnDestroy
-{
-  private isRegistered = false;
-
-  constructor(
-    @Inject(CopilotKitService) private readonly copilotkit: CopilotKitService
-  ) {}
-
-  @Input() name!: string;
-  @Input() description?: string;
-  @Input() parameters?: z.ZodSchema<T>;
-  @Input() handler?: (args: T) => Promise<any>;
-  @Input() render?: Type<any> | TemplateRef<any>;
-  @Input() followUp?: boolean;
-
-  // Alternative: Accept a full tool object
-  @Input("copilotkitFrontendTool") tool?: AngularFrontendTool<T>;
-
-  ngOnInit(): void {
-    this.registerTool();
-  }
-
-  ngOnChanges(_changes: SimpleChanges): void {
-    if (this.isRegistered) {
-      // Re-register the tool if any properties change
-      this.unregisterTool();
-      this.registerTool();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.unregisterTool();
-  }
-
-  private registerTool(): void {
-    const tool = this.getTool();
-
-    if (!tool.name) {
-      if (isDevMode()) {
-        console.warn(
-          'CopilotKitFrontendToolDirective: "name" is required. ' +
-            'Please provide a name via [name]="toolName" or ' +
-            "[copilotkitFrontendTool]=\"{ name: 'toolName', ... }\""
-        );
-      }
-      return; // Don't register if no name
-    }
-
-    // Register the tool with CopilotKit
-    this.copilotkit.copilotkit.addTool(tool);
-
-    // Register the render if provided
-    if (tool.render) {
-      const currentRenders = this.copilotkit.currentRenderToolCalls();
-      const renderEntry: AngularToolCallRender = {
-        name: tool.name,
-        args: tool.parameters || z.object({}),
-        render: tool.render,
-      };
-
-      // Check for duplicate
-      const existingIndex = currentRenders.findIndex((r: ToolCallRender<unknown>) => r.name === tool.name);
-      if (existingIndex !== -1) {
-        if (isDevMode()) {
-          console.warn(
-            `[CopilotKit] Tool "${tool.name}" already has a render. ` +
-              `The previous render will be replaced. ` +
-              `This may indicate a duplicate tool registration.`
-          );
-        }
-        const updated = [...currentRenders];
-        updated[existingIndex] = renderEntry;
-        this.copilotkit.setCurrentRenderToolCalls(updated);
-      } else {
-        this.copilotkit.setCurrentRenderToolCalls([...currentRenders, renderEntry]);
-      }
-    }
-
-    this.isRegistered = true;
-  }
-
-  private unregisterTool(): void {
-    if (!this.isRegistered) return;
-
-    const tool = this.getTool();
-
-    if (tool.name) {
-      // Remove the tool
-      this.copilotkit.copilotkit.removeTool(tool.name);
-
-      // Remove the render if it exists
-      const currentRenders = this.copilotkit.currentRenderToolCalls();
-      const filtered = currentRenders.filter((r: ToolCallRender<unknown>) => r.name !== tool.name);
-      if (filtered.length !== currentRenders.length) {
-        this.copilotkit.setCurrentRenderToolCalls(filtered);
-      }
-    }
-
-    this.isRegistered = false;
-  }
-
-  private getTool(): AngularFrontendTool<T> {
-    // If full tool object is provided, use it
-    if (this.tool) {
-      return this.tool;
-    }
-
-    // Otherwise, construct from individual inputs
-    return {
-      name: this.name,
-      description: this.description,
-      parameters: this.parameters,
-      handler: this.handler,
-      render: this.render,
-      followUp: this.followUp,
-    };
-  }
-}