@copilotkitnext/angular 0.0.1 → 0.0.4

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

@@ -1,281 +0,0 @@
-import {
-  Directive,
-  Input,
-  Output,
-  EventEmitter,
-  OnInit,
-  OnChanges,
-  OnDestroy,
-  SimpleChanges,
-  TemplateRef,
-  Type,
-  signal,
-  isDevMode,
-  Inject,
-} from "@angular/core";
-import { CopilotKitService } from "../core/copilotkit.service";
-import type {
-  AngularHumanInTheLoop,
-  HumanInTheLoopProps,
-  AngularFrontendTool,
-} from "../core/copilotkit.types";
-import { ToolCallStatus } from "../core/copilotkit.types";
-import * as z from "zod";
-
-/**
- * Directive for declaratively creating human-in-the-loop tools.
- * Provides reactive outputs for status changes and response events.
- *
- * @example
- * ```html
- * <!-- Basic usage -->
- * <div copilotkitHumanInTheLoop
- *      [name]="'requireApproval'"
- *      [description]="'Requires user approval'"
- *      [args]="argsSchema"
- *      [render]="approvalComponent"
- *      (statusChange)="onStatusChange($event)"
- *      (responseProvided)="onResponse($event)">
- * </div>
- *
- * <!-- With template -->
- * <div copilotkitHumanInTheLoop
- *      [name]="'requireApproval'"
- *      [description]="'Requires user approval'"
- *      [args]="argsSchema"
- *      [render]="approvalTemplate"
- *      [(status)]="approvalStatus">
- * </div>
- *
- * <ng-template #approvalTemplate let-props>
- *   <div *ngIf="props.status === 'executing'">
- *     <p>{{ props.args.action }}</p>
- *     <button (click)="props.respond('approved')">Approve</button>
- *     <button (click)="props.respond('rejected')">Reject</button>
- *   </div>
- * </ng-template>
- * ```
- */
-@Directive({
-  selector: "[copilotkitHumanInTheLoop]",
-  standalone: true,
-})
-export class CopilotKitHumanInTheLoopDirective<
-    T extends Record<string, any> = Record<string, any>,
-  >
-  implements OnInit, OnChanges, OnDestroy
-{
-  private toolId?: string;
-  private statusSignal = signal<ToolCallStatus>(ToolCallStatus.InProgress);
-  private resolvePromise: ((result: unknown) => void) | null = null;
-  private _status: ToolCallStatus = ToolCallStatus.InProgress;
-
-  constructor(
-    @Inject(CopilotKitService) private readonly copilotkit: CopilotKitService
-  ) {}
-
-  /**
-   * The name of the human-in-the-loop tool.
-   */
-  @Input() name!: string;
-
-  /**
-   * Description of what the tool does.
-   */
-  @Input() description!: string;
-
-  /**
-   * Zod schema for the tool parameters.
-   */
-  @Input() parameters!: z.ZodSchema<T>;
-
-  /**
-   * Component class or template to render for user interaction.
-   */
-  @Input() render!: Type<any> | TemplateRef<HumanInTheLoopProps<T>>;
-
-  /**
-   * Whether the tool should be registered (default: true).
-   */
-  @Input() enabled = true;
-
-  /**
-   * Alternative input using the directive selector.
-   * Allows: [copilotkitHumanInTheLoop]="config"
-   */
-  @Input("copilotkitHumanInTheLoop")
-  set config(value: Partial<AngularHumanInTheLoop<T>> | undefined) {
-    if (value) {
-      if (value.name) this.name = value.name;
-      if (value.description) this.description = value.description;
-      if ("parameters" in value && value.parameters)
-        this.parameters = value.parameters as z.ZodSchema<T>;
-      if ("render" in value && value.render) this.render = value.render;
-    }
-  }
-
-  /**
-   * Emits when the status changes.
-   */
-  @Output() statusChange = new EventEmitter<ToolCallStatus>();
-
-  /**
-   * Two-way binding for status.
-   */
-  @Input()
-  get status(): ToolCallStatus {
-    return this._status;
-  }
-  set status(value: ToolCallStatus) {
-    // Input setter for two-way binding (though typically read-only)
-    this._status = value;
-  }
-
-  /**
-   * Emits when a response is provided by the user.
-   */
-  @Output() responseProvided = new EventEmitter<unknown>();
-
-  /**
-   * Emits when the tool execution starts.
-   */
-  @Output() executionStarted = new EventEmitter<any>();
-
-  /**
-   * Emits when the tool execution completes.
-   */
-  @Output() executionCompleted = new EventEmitter<unknown>();
-
-  ngOnInit(): void {
-    if (this.enabled) {
-      this.registerTool();
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    const relevantChanges =
-      changes["name"] ||
-      changes["description"] ||
-      changes["args"] ||
-      changes["render"] ||
-      changes["enabled"];
-
-    if (relevantChanges && !relevantChanges.firstChange) {
-      // Re-register the tool with new configuration
-      this.unregisterTool();
-      if (this.enabled) {
-        this.registerTool();
-      }
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.unregisterTool();
-  }
-
-  /**
-   * Programmatically trigger a response.
-   * Useful when the directive is used as a controller.
-   */
-  respond(result: unknown): void {
-    this.handleResponse(result);
-  }
-
-  private registerTool(): void {
-    if (!this.name || !this.description || !this.parameters || !this.render) {
-      if (isDevMode()) {
-        throw new Error(
-          "CopilotKitHumanInTheLoopDirective: Missing required inputs. " +
-            "Required: name, description, parameters, and render."
-        );
-      }
-      return;
-    }
-
-    // Create handler that returns a Promise
-    const handler = async (args: T): Promise<unknown> => {
-      return new Promise((resolve) => {
-        this.updateStatus(ToolCallStatus.Executing);
-        this.resolvePromise = resolve;
-        this.executionStarted.emit(args);
-      });
-    };
-
-    // Create the frontend tool with enhanced render
-    const frontendTool: AngularFrontendTool<T> = {
-      name: this.name,
-      description: this.description,
-      parameters: this.parameters,
-      handler,
-      render: this.render, // Will be enhanced by the render component
-    };
-
-    // Add the tool (returns void, so we use the tool name as ID)
-    this.copilotkit.copilotkit.addTool(frontendTool);
-    this.toolId = this.name;
-
-    // Register the render with respond capability
-    this.copilotkit.registerToolRender(this.name, {
-      name: this.name,
-      args: this.parameters,
-      render: this.createEnhancedRender(),
-    });
-  }
-
-  private unregisterTool(): void {
-    if (this.toolId) {
-      this.copilotkit.copilotkit.removeTool(this.toolId);
-      this.copilotkit.unregisterToolRender(this.name);
-      this.toolId = undefined;
-    }
-  }
-
-  private createEnhancedRender(): Type<any> | TemplateRef<any> {
-    // If it's a template, we need to wrap it with our respond function
-    // This is handled by returning a special marker that the render component
-    // will recognize and enhance with the respond function
-
-    // Store reference to this directive instance for the render component
-    (this.render as any).__humanInTheLoopDirective = this;
-    (this.render as any).__humanInTheLoopStatus = this.statusSignal;
-
-    return this.render;
-  }
-
-  private handleResponse(result: unknown): void {
-    if (this.resolvePromise) {
-      this.resolvePromise(result);
-      this.updateStatus(ToolCallStatus.Complete);
-      this.resolvePromise = null;
-      this.responseProvided.emit(result);
-      this.executionCompleted.emit(result);
-    }
-  }
-
-  private updateStatus(status: ToolCallStatus): void {
-    this._status = status;
-    this.statusSignal.set(status);
-    this.statusChange.emit(status);
-  }
-}
-
-/**
- * Helper directive to provide respond function in templates.
- * This would be used internally by the tool render component.
- *
- * @internal
- */
-@Directive({
-  selector: "[copilotkitHumanInTheLoopRespond]",
-  standalone: true,
-})
-export class CopilotKitHumanInTheLoopRespondDirective {
-  @Input() copilotkitHumanInTheLoopRespond?: (result: unknown) => Promise<void>;
-
-  /**
-   * Convenience method for templates to call respond.
-   */
-  respond(result: unknown): void {
-    this.copilotkitHumanInTheLoopRespond?.(result);
-  }
-}

package/src/directives/stick-to-bottom.directive.ts

@@ -1,204 +0,0 @@
-import {
-  Directive,
-  Input,
-  Output,
-  EventEmitter,
-  ElementRef,
-  OnInit,
-  OnDestroy,
-  AfterViewInit,
-  inject
-} from '@angular/core';
-import { ScrollPositionService } from '../services/scroll-position.service';
-import { ResizeObserverService } from '../services/resize-observer.service';
-import { Subject, combineLatest, merge } from 'rxjs';
-import { takeUntil, debounceTime, filter, distinctUntilChanged } from 'rxjs/operators';
-
-export type ScrollBehavior = 'smooth' | 'instant' | 'auto';
-
-/**
- * Directive for implementing stick-to-bottom scroll behavior
- * Similar to the React use-stick-to-bottom library
- * 
- * @example
- * ```html
- * <div copilotStickToBottom
- *      [enabled]="true"
- *      [threshold]="10"
- *      [initialBehavior]="'smooth'"
- *      [resizeBehavior]="'smooth'"
- *      (isAtBottomChange)="onBottomChange($event)">
- *   <!-- Content -->
- * </div>
- * ```
- */
-@Directive({
-  selector: '[copilotStickToBottom]',
-  standalone: true,
-  providers: [ScrollPositionService, ResizeObserverService]
-})
-export class StickToBottomDirective implements OnInit, AfterViewInit, OnDestroy {
-  @Input() enabled: boolean = true;
-  @Input() threshold: number = 10;
-  @Input() initialBehavior: ScrollBehavior = 'smooth';
-  @Input() resizeBehavior: ScrollBehavior = 'smooth';
-  @Input() debounceMs: number = 100;
-  
-  @Output() isAtBottomChange = new EventEmitter<boolean>();
-  @Output() scrollToBottomRequested = new EventEmitter<void>();
-  
-  private elementRef = inject(ElementRef);
-  private scrollService = inject(ScrollPositionService);
-  private resizeService = inject(ResizeObserverService);
-  
-  private destroy$ = new Subject<void>();
-  private contentElement?: HTMLElement;
-  private wasAtBottom = true;
-  private hasInitialized = false;
-  private userHasScrolled = false;
-  
-  ngOnInit(): void {
-    // Setup will happen in ngAfterViewInit
-  }
-  
-  ngAfterViewInit(): void {
-    const element = this.elementRef.nativeElement as HTMLElement;
-    
-    // Find or create content wrapper
-    this.contentElement = element.querySelector('[data-stick-to-bottom-content]') as HTMLElement;
-    if (!this.contentElement) {
-      this.contentElement = element;
-    }
-    
-    this.setupScrollMonitoring();
-    this.setupResizeMonitoring();
-    this.setupContentMutationObserver();
-    
-    // Initial scroll to bottom if enabled
-    setTimeout(() => {
-      this.hasInitialized = true;
-      if (this.enabled) {
-        this.scrollToBottom(this.initialBehavior);
-      }
-    }, 0);
-  }
-  
-  private setupScrollMonitoring(): void {
-    if (!this.enabled) return;
-    
-    const element = this.elementRef.nativeElement;
-    
-    // Monitor scroll position
-    this.scrollService.monitorScrollPosition(element, this.threshold)
-      .pipe(
-        takeUntil(this.destroy$),
-        debounceTime(this.debounceMs),
-        distinctUntilChanged((a, b) => a.isAtBottom === b.isAtBottom)
-      )
-      .subscribe(state => {
-        const wasAtBottom = this.wasAtBottom;
-        this.wasAtBottom = state.isAtBottom;
-        
-        // Detect user scroll
-        if (!state.isAtBottom && wasAtBottom && this.hasInitialized) {
-          this.userHasScrolled = true;
-        } else if (state.isAtBottom) {
-          this.userHasScrolled = false;
-        }
-        
-        // Emit change
-        this.isAtBottomChange.emit(state.isAtBottom);
-      });
-  }
-  
-  private setupResizeMonitoring(): void {
-    if (!this.enabled || !this.contentElement) return;
-    
-    // Monitor content resize
-    this.resizeService.observeElement(this.contentElement, 0, 250)
-      .pipe(
-        takeUntil(this.destroy$),
-        filter(() => this.enabled && !this.userHasScrolled)
-      )
-      .subscribe(state => {
-        // Auto-scroll on resize if we were at bottom
-        if (this.wasAtBottom && !state.isResizing) {
-          this.scrollToBottom(this.resizeBehavior);
-        }
-      });
-    
-    // Monitor container resize
-    const element = this.elementRef.nativeElement;
-    this.resizeService.observeElement(element, 0, 250)
-      .pipe(
-        takeUntil(this.destroy$),
-        filter(() => this.enabled && !this.userHasScrolled && this.wasAtBottom)
-      )
-      .subscribe(() => {
-        // Adjust scroll on container resize
-        this.scrollToBottom(this.resizeBehavior);
-      });
-  }
-  
-  private setupContentMutationObserver(): void {
-    if (!this.enabled || !this.contentElement) return;
-    
-    const mutationObserver = new MutationObserver(() => {
-      if (this.enabled && this.wasAtBottom && !this.userHasScrolled) {
-        // Content changed, scroll to bottom if we were there
-        requestAnimationFrame(() => {
-          this.scrollToBottom(this.resizeBehavior);
-        });
-      }
-    });
-    
-    mutationObserver.observe(this.contentElement, {
-      childList: true,
-      subtree: true,
-      characterData: true
-    });
-    
-    // Cleanup on destroy
-    this.destroy$.subscribe(() => {
-      mutationObserver.disconnect();
-    });
-  }
-  
-  /**
-   * Public method to scroll to bottom
-   * Can be called from parent component
-   */
-  public scrollToBottom(behavior: ScrollBehavior = 'smooth'): void {
-    const element = this.elementRef.nativeElement;
-    const smooth = behavior === 'smooth';
-    
-    this.scrollService.scrollToBottom(element, smooth);
-    this.userHasScrolled = false;
-    this.scrollToBottomRequested.emit();
-  }
-  
-  /**
-   * Check if currently at bottom
-   */
-  public isAtBottom(): boolean {
-    return this.scrollService.isAtBottom(this.elementRef.nativeElement, this.threshold);
-  }
-  
-  /**
-   * Get current scroll state
-   */
-  public getScrollState() {
-    const element = this.elementRef.nativeElement;
-    return {
-      scrollTop: element.scrollTop,
-      scrollHeight: element.scrollHeight,
-      clientHeight: element.clientHeight,
-      isAtBottom: this.isAtBottom()
-    };
-  }
-  
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}

package/src/index.ts

@@ -1,105 +0,0 @@
-export * from "./core/copilotkit.service";
-export * from "./core/copilotkit.types";
-export * from "./core/copilotkit.providers";
-// Re-export types from @ag-ui/core for convenience
-export type { Message, ToolCall, ToolMessage } from "@ag-ui/core";
-export * from "./core/chat-configuration/chat-configuration.types";
-export * from "./core/chat-configuration/chat-configuration.service";
-export * from "./core/chat-configuration/chat-configuration.providers";
-export * from "./utils/copilotkit.utils";
-export * from "./utils/agent-context.utils";
-export * from "./utils/frontend-tool.utils";
-// Note: tool-render.utils removed in favor of direct ToolCallRender<T> usage
-// Export all except AgentWatchResult which is already exported from copilotkit.types
-export {
-  watchAgent,
-  getAgent,
-  subscribeToAgent,
-  registerAgentWatcher,
-} from "./utils/agent.utils";
-export * from "./utils/human-in-the-loop.utils";
-export * from "./utils/chat-config.utils";
-// Slot utilities are internal only, not exported
-// export * from "./lib/slots/slot.types";
-// export * from "./lib/slots/slot.utils";
-// export { CopilotSlotComponent } from "./lib/slots/copilot-slot.component";
-export { CopilotTooltipDirective } from "./lib/directives/tooltip.directive";
-export { CopilotKitConfigDirective } from "./directives/copilotkit-config.directive";
-export { CopilotKitAgentContextDirective } from "./directives/copilotkit-agent-context.directive";
-export { CopilotKitFrontendToolDirective } from "./directives/copilotkit-frontend-tool.directive";
-export { CopilotKitAgentDirective } from "./directives/copilotkit-agent.directive";
-export {
-  CopilotKitHumanInTheLoopDirective,
-  CopilotKitHumanInTheLoopRespondDirective,
-} from "./directives/copilotkit-human-in-the-loop.directive";
-export { CopilotKitChatConfigDirective } from "./directives/copilotkit-chat-config.directive";
-export { CopilotKitToolRenderComponent } from "./components/copilotkit-tool-render.component";
-
-// Chat Input Components
-export * from "./components/chat/copilot-chat-input.types";
-export { CopilotChatInputComponent } from "./components/chat/copilot-chat-input.component";
-export { CopilotChatInputDefaults } from "./components/chat/copilot-chat-input-defaults";
-export { CopilotChatTextareaComponent } from "./components/chat/copilot-chat-textarea.component";
-export { CopilotChatAudioRecorderComponent } from "./components/chat/copilot-chat-audio-recorder.component";
-export {
-  CopilotChatSendButtonComponent,
-  CopilotChatToolbarButtonComponent,
-  CopilotChatStartTranscribeButtonComponent,
-  CopilotChatCancelTranscribeButtonComponent,
-  CopilotChatFinishTranscribeButtonComponent,
-  CopilotChatAddFileButtonComponent,
-} from "./components/chat/copilot-chat-buttons.component";
-export { CopilotChatToolbarComponent } from "./components/chat/copilot-chat-toolbar.component";
-export { CopilotChatToolsMenuComponent } from "./components/chat/copilot-chat-tools-menu.component";
-
-// Chat User Message Components
-export * from "./components/chat/copilot-chat-user-message.types";
-export { CopilotChatUserMessageComponent } from "./components/chat/copilot-chat-user-message.component";
-export { CopilotChatUserMessageRendererComponent } from "./components/chat/copilot-chat-user-message-renderer.component";
-export {
-  CopilotChatUserMessageToolbarButtonComponent,
-  CopilotChatUserMessageCopyButtonComponent,
-  CopilotChatUserMessageEditButtonComponent,
-} from "./components/chat/copilot-chat-user-message-buttons.component";
-export { CopilotChatUserMessageToolbarComponent } from "./components/chat/copilot-chat-user-message-toolbar.component";
-export { CopilotChatUserMessageBranchNavigationComponent } from "./components/chat/copilot-chat-user-message-branch-navigation.component";
-
-// Chat Assistant Message Components
-export * from "./components/chat/copilot-chat-assistant-message.types";
-export { CopilotChatAssistantMessageComponent } from "./components/chat/copilot-chat-assistant-message.component";
-export { CopilotChatAssistantMessageRendererComponent } from "./components/chat/copilot-chat-assistant-message-renderer.component";
-export {
-  CopilotChatAssistantMessageToolbarButtonComponent,
-  CopilotChatAssistantMessageCopyButtonComponent,
-  CopilotChatAssistantMessageThumbsUpButtonComponent,
-  CopilotChatAssistantMessageThumbsDownButtonComponent,
-  CopilotChatAssistantMessageReadAloudButtonComponent,
-  CopilotChatAssistantMessageRegenerateButtonComponent,
-} from "./components/chat/copilot-chat-assistant-message-buttons.component";
-export { CopilotChatAssistantMessageToolbarComponent } from "./components/chat/copilot-chat-assistant-message-toolbar.component";
-
-// Chat Message View Components
-export * from "./components/chat/copilot-chat-message-view.types";
-export { CopilotChatMessageViewComponent } from "./components/chat/copilot-chat-message-view.component";
-export { CopilotChatMessageViewCursorComponent } from "./components/chat/copilot-chat-message-view-cursor.component";
-export { CopilotChatToolCallsViewComponent } from "./components/chat/copilot-chat-tool-calls-view.component";
-
-// Chat View Components
-export * from "./components/chat/copilot-chat-view.types";
-export { CopilotChatViewComponent } from "./components/chat/copilot-chat-view.component";
-export { CopilotChatViewScrollViewComponent } from "./components/chat/copilot-chat-view-scroll-view.component";
-export { CopilotChatViewScrollToBottomButtonComponent } from "./components/chat/copilot-chat-view-scroll-to-bottom-button.component";
-export { CopilotChatViewFeatherComponent } from "./components/chat/copilot-chat-view-feather.component";
-export { CopilotChatViewInputContainerComponent } from "./components/chat/copilot-chat-view-input-container.component";
-export { CopilotChatViewDisclaimerComponent } from "./components/chat/copilot-chat-view-disclaimer.component";
-
-// Main Chat Component
-export { CopilotChatComponent } from "./components/chat/copilot-chat.component";
-
-// Services and Directives for Chat View
-export { ScrollPositionService } from "./services/scroll-position.service";
-export { ResizeObserverService } from "./services/resize-observer.service";
-export { StickToBottomDirective } from "./directives/stick-to-bottom.directive";
-
-// Testing utilities are not exported from the main entry point
-// They should be imported directly from '@copilotkitnext/angular/testing' if needed