@copilotkitnext/angular 0.0.1 → 0.0.4

package/src/lib/slots/copilot-slot.component.ts

@@ -1,135 +0,0 @@
-import {
-  Component,
-  Input,
-  TemplateRef,
-  ViewContainerRef,
-  OnInit,
-  OnChanges,
-  SimpleChanges,
-  Inject,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  ViewChild
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { renderSlot } from './slot.utils';
-import { Type } from '@angular/core';
-
-/**
- * @internal - This component is for internal use only.
- * Simple slot component for rendering custom content or defaults.
- * Supports templates and components only.
- * 
- * @example
- * ```html
- * <!-- With template -->
- * <copilot-slot [slot]="sendButtonTemplate" [context]="buttonContext">
- *   <button class="default-btn">Default</button>
- * </copilot-slot>
- * ```
- */
-@Component({
-  selector: 'copilot-slot',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <!-- If slot template provided, render it -->
-    <ng-container *ngIf="slot && isTemplate(slot)"
-                  [ngTemplateOutlet]="slot"
-                  [ngTemplateOutletContext]="context || {}">
-    </ng-container>
-    
-    <!-- If not a template, we'll handle in code -->
-    <ng-container #slotContainer></ng-container>
-    
-    <!-- Default content (only shown if no slot) -->
-    <ng-content *ngIf="!slot && !defaultComponent"></ng-content>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class CopilotSlotComponent implements OnInit, OnChanges {
-  @Input() slot?: TemplateRef<any> | Type<any>;
-  @Input() context?: any;
-  @Input() defaultComponent?: Type<any>;
-  @Input() outputs?: Record<string, (event: any) => void>;
-  
-  @ViewChild('slotContainer', { read: ViewContainerRef, static: true }) 
-  private slotContainer!: ViewContainerRef;
-  
-  private componentRef?: any;
-  
-  constructor(
-    @Inject(ViewContainerRef) private viewContainer: ViewContainerRef,
-    private cdr: ChangeDetectorRef
-  ) {}
-  
-  ngOnInit(): void {
-    this.renderSlot();
-  }
-  
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['slot']) {
-      // Slot changed, need to re-render completely
-      this.renderSlot();
-    } else if (changes['context'] && this.componentRef) {
-      // Just context changed, update existing component
-      this.updateComponentProps();
-      this.cdr.detectChanges();
-    } else if (changes['context']) {
-      // No component ref yet, render the slot
-      this.renderSlot();
-    }
-  }
-  
-  isTemplate(value: any): value is TemplateRef<any> {
-    return value instanceof TemplateRef;
-  }
-  
-  private renderSlot(): void {
-    // Skip if it's a template (handled by ngTemplateOutlet)
-    if (this.slot && this.isTemplate(this.slot)) {
-      this.componentRef = null;
-      return;
-    }
-    
-    // Clear previous content
-    this.slotContainer.clear();
-    this.componentRef = null;
-    
-    // Skip if no slot and no default component
-    if (!this.slot && !this.defaultComponent) {
-      return;
-    }
-    
-    // Use the utility to render other slot types
-    if (this.slot || this.defaultComponent) {
-      this.componentRef = renderSlot(this.slotContainer, {
-        slot: this.slot,
-        defaultComponent: this.defaultComponent!,
-        props: this.context,
-        outputs: this.outputs
-      });
-    }
-  }
-  
-  private updateComponentProps(): void {
-    if (!this.componentRef || !this.componentRef.instance) {
-      return;
-    }
-    
-    const props = this.context;
-    
-    // Update props using setInput
-    if (props) {
-      for (const key in props) {
-        const value = props[key];
-        this.componentRef.setInput(key, value);
-      }
-    }
-    
-    // Trigger change detection
-    if (this.componentRef.changeDetectorRef) {
-      this.componentRef.changeDetectorRef.detectChanges();
-    }
-  }
-}

package/src/lib/slots/index.ts

@@ -1,3 +0,0 @@
-export * from './slot.types';
-export * from './slot.utils';
-export { CopilotSlotComponent } from './copilot-slot.component';

package/src/lib/slots/slot.types.ts

@@ -1,64 +0,0 @@
-import { Type, TemplateRef, InjectionToken } from '@angular/core';
-
-/**
- * Represents a value that can be used as a slot override.
- * Can be a component type or template reference only.
- * @internal - This type is for internal use only
- */
-export type SlotValue<T = any> = 
-  | Type<T>
-  | TemplateRef<T>;
-
-/**
- * Configuration for a slot
- * @internal - This interface is for internal use only
- */
-export interface SlotConfig<T = any> {
-  value?: SlotValue<T>;
-  default?: Type<T>;
-}
-
-/**
- * Context passed to slot templates
- */
-export interface SlotContext<T = any> {
-  $implicit: T;
-  props?: Partial<T>;
-  [key: string]: any;
-}
-
-/**
- * Slot registry entry
- * @internal - This interface is for internal use only
- */
-export interface SlotRegistryEntry<T = any> {
-  component?: Type<T>;
-  template?: TemplateRef<T>;
-}
-
-/**
- * Options for rendering a slot
- */
-export interface RenderSlotOptions<T = any> {
-  slot?: SlotValue<T>;
-  defaultComponent: Type<T>;
-  props?: Partial<T>;
-  injector?: any;
-  outputs?: Record<string, (event: any) => void>;
-}
-
-/**
- * Injection token for slot configuration
- */
-export const SLOT_CONFIG = new InjectionToken<ReadonlyMap<string, SlotRegistryEntry>>('SLOT_CONFIG');
-
-/**
- * Type for components with slots
- */
-export type WithSlots<S extends Record<string, Type<any>>, Rest = object> = {
-  [K in keyof S as `${string & K}Component`]?: Type<any>;
-} & {
-  [K in keyof S as `${string & K}Template`]?: TemplateRef<any>;
-} & {
-  [K in keyof S as `${string & K}Class`]?: string;
-} & Rest;

package/src/lib/slots/slot.utils.ts

@@ -1,289 +0,0 @@
-import { 
-  Type, 
-  TemplateRef, 
-  ViewContainerRef,
-  ComponentRef,
-  EmbeddedViewRef,
-  Injector,
-  inject
-} from '@angular/core';
-import { SlotValue, RenderSlotOptions, SlotRegistryEntry, SLOT_CONFIG } from './slot.types';
-
-/**
- * Renders a slot value into a ViewContainerRef.
- * This is the core utility for slot rendering.
- * 
- * @param viewContainer - The ViewContainerRef to render into
- * @param options - Options for rendering the slot
- * @returns The created component or embedded view reference
- * 
- * @example
- * ```typescript
- * export class MyComponent {
- *   @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;
- *   
- *   renderButton() {
- *     renderSlot(this.container, {
- *       slot: this.buttonOverride,
- *       defaultComponent: DefaultButton,
- *       props: { text: 'Click me' },
- *       outputs: { click: (event) => this.handleClick(event) }
- *     });
- *   }
- * }
- * ```
- */
-export function renderSlot<T = any>(
-  viewContainer: ViewContainerRef,
-  options: RenderSlotOptions<T>
-): ComponentRef<T> | EmbeddedViewRef<T> | null {
-  const { slot, defaultComponent, props, injector, outputs } = options;
-  
-  viewContainer.clear();
-  
-  const effectiveSlot = slot ?? defaultComponent;
-  const effectiveInjector = injector ?? viewContainer.injector;
-  
-  if (effectiveSlot instanceof TemplateRef) {
-    // TemplateRef: render template
-    return viewContainer.createEmbeddedView(effectiveSlot, {
-      $implicit: props ?? {},
-      props: props ?? {}
-    } as any);
-  } else if (isComponentType(effectiveSlot)) {
-    // Component type - wrap in try/catch for safety
-    try {
-      return createComponent(
-        viewContainer,
-        effectiveSlot as Type<T>,
-        props,
-        effectiveInjector,
-        outputs
-      );
-    } catch (error) {
-      console.warn('Failed to create component:', effectiveSlot, error);
-      // Fall through to default component
-    }
-  }
-  
-  // Default: render default component if provided
-  return defaultComponent ? createComponent(
-    viewContainer,
-    defaultComponent,
-    props,
-    effectiveInjector,
-    outputs
-  ) : null;
-}
-
-/**
- * Creates a component and applies properties.
- */
-function createComponent<T>(
-  viewContainer: ViewContainerRef,
-  component: Type<T>,
-  props?: Partial<T>,
-  injector?: Injector,
-  outputs?: Record<string, (event: any) => void>
-): ComponentRef<T> {
-  const componentRef = viewContainer.createComponent(component, {
-    injector
-  });
-  
-  if (props) {
-    // Apply props using setInput
-    for (const key in props) {
-      const value = props[key];
-      componentRef.setInput(key, value);
-    }
-  }
-  
-  if (outputs) {
-    // Wire up output event handlers with proper cleanup
-    const instance = componentRef.instance as any;
-    const subscriptions: any[] = [];
-    
-    for (const [eventName, handler] of Object.entries(outputs)) {
-      if (instance[eventName]?.subscribe) {
-        const subscription = instance[eventName].subscribe(handler);
-        subscriptions.push(subscription);
-      }
-    }
-    
-    // Register cleanup on component destroy
-    componentRef.onDestroy(() => {
-      subscriptions.forEach(sub => sub.unsubscribe());
-    });
-  }
-  
-  // Trigger change detection
-  componentRef.changeDetectorRef.detectChanges();
-  
-  return componentRef;
-}
-
-
-/**
- * Checks if a value is a component type.
- * Simplified check - rely on try/catch for actual validation.
- */
-export function isComponentType(value: any): boolean {
-  // Arrow functions and regular functions without a prototype are not components
-  return typeof value === 'function' && !!value.prototype;
-}
-
-/**
- * Checks if a value is a valid slot value.
- */
-export function isSlotValue(value: any): value is SlotValue {
-  return value instanceof TemplateRef || isComponentType(value);
-}
-
-/**
- * Normalizes a slot value to a consistent format.
- */
-export function normalizeSlotValue<T = any>(
-  value: SlotValue<T> | undefined,
-  defaultComponent: Type<T> | undefined
-): SlotRegistryEntry<T> {
-  if (!value) {
-    return { component: defaultComponent };
-  }
-  
-  if (value instanceof TemplateRef) {
-    return { template: value };
-  }
-  
-  if (isComponentType(value)) {
-    return { component: value as Type<T> };
-  }
-  
-  return { component: defaultComponent };
-}
-
-/**
- * Creates a slot configuration map for a component.
- * 
- * @example
- * ```typescript
- * const slots = createSlotConfig({
- *   sendButton: CustomSendButton,
- *   toolbar: 'custom-toolbar-class',
- *   footer: footerTemplate
- * }, {
- *   sendButton: DefaultSendButton,
- *   toolbar: DefaultToolbar,
- *   footer: DefaultFooter
- * });
- * ```
- */
-export function createSlotConfig<T extends Record<string, Type<any>>>(
-  overrides: Partial<Record<keyof T, SlotValue>>,
-  defaults: T
-): Map<keyof T, SlotRegistryEntry> {
-  const config = new Map<keyof T, SlotRegistryEntry>();
-  
-  for (const key in defaults) {
-    const override = overrides[key];
-    const defaultComponent = defaults[key];
-    config.set(key, normalizeSlotValue(override, defaultComponent));
-  }
-  
-  return config;
-}
-
-/**
- * Provides slot configuration to child components via DI.
- * 
- * @example
- * ```typescript
- * @Component({
- *   providers: [
- *     provideSlots({
- *       sendButton: CustomSendButton,
- *       toolbar: CustomToolbar
- *     })
- *   ]
- * })
- * ```
- */
-export function provideSlots(slots: Record<string, Type<any>>) {
-  const slotMap = new Map<string, SlotRegistryEntry>();
-  
-  // Only accept component types in DI (templates lack view context)
-  for (const [key, value] of Object.entries(slots)) {
-    if (isComponentType(value)) {
-      slotMap.set(key, { component: value as Type<any> });
-    }
-  }
-  
-  return {
-    provide: SLOT_CONFIG,
-    useValue: slotMap
-  };
-}
-
-/**
- * Gets slot configuration from DI.
- * Must be called within an injection context.
- * 
- * @example
- * ```typescript
- * export class MyComponent {
- *   slots = getSlotConfig();
- *   
- *   ngOnInit() {
- *     const sendButton = this.slots?.get('sendButton');
- *   }
- * }
- * ```
- */
-export function getSlotConfig(): ReadonlyMap<string, SlotRegistryEntry> | null {
-  return inject(SLOT_CONFIG, { optional: true });
-}
-
-/**
- * Creates a render function for a specific slot.
- * Useful for creating reusable slot renderers.
- * 
- * @example
- * ```typescript
- * const renderSendButton = createSlotRenderer(
- *   DefaultSendButton,
- *   'sendButton'
- * );
- * 
- * // Later in template
- * renderSendButton(this.viewContainer, this.sendButtonOverride);
- * ```
- */
-export function createSlotRenderer<T>(
-  defaultComponent: Type<T>,
-  slotName?: string
-) {
-  // Get config in the injection context when the renderer is created
-  const config = slotName ? getSlotConfig() : null;
-  
-  return (
-    viewContainer: ViewContainerRef,
-    slot?: SlotValue<T>,
-    props?: Partial<T>,
-    outputs?: Record<string, (event: any) => void>
-  ) => {
-    // Check DI for overrides if slot name provided
-    if (slotName && !slot && config) {
-      const entry = config.get(slotName);
-      if (entry) {
-        if (entry.component) slot = entry.component;
-        else if (entry.template) slot = entry.template;
-      }
-    }
-    
-    return renderSlot(viewContainer, {
-      slot,
-      defaultComponent,
-      props,
-      outputs
-    });
-  };
-}

package/src/lib/utils.ts

@@ -1,10 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-/**
- * Utility function to merge Tailwind CSS classes
- * Combines clsx for conditional classes and tailwind-merge for proper Tailwind class merging
- */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

package/src/public-api.ts

@@ -1 +0,0 @@
-export * from './index';

package/src/services/resize-observer.service.ts

@@ -1,181 +0,0 @@
-import { Injectable, ElementRef, NgZone, OnDestroy } from '@angular/core';
-import { Observable, Subject, BehaviorSubject } from 'rxjs';
-import { debounceTime, takeUntil, distinctUntilChanged } from 'rxjs/operators';
-
-export interface ResizeState {
-  width: number;
-  height: number;
-  isResizing: boolean;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ResizeObserverService implements OnDestroy {
-  private destroy$ = new Subject<void>();
-  private observers = new Map<HTMLElement, ResizeObserver>();
-  private resizeStates = new Map<HTMLElement, BehaviorSubject<ResizeState>>();
-  private resizeTimeouts = new Map<HTMLElement, number>();
-  
-  constructor(private ngZone: NgZone) {}
-  
-  /**
-   * Observe element resize with debouncing and resizing state
-   * @param element Element to observe
-   * @param debounceMs Debounce time (default 250ms)
-   * @param resizingDurationMs How long to show "isResizing" state (default 250ms)
-   */
-  observeElement(
-    element: ElementRef<HTMLElement> | HTMLElement,
-    debounceMs: number = 0,
-    resizingDurationMs: number = 250
-  ): Observable<ResizeState> {
-    const el = element instanceof ElementRef ? element.nativeElement : element;
-    
-    // Return existing observer if already observing
-    if (this.resizeStates.has(el)) {
-      return this.resizeStates.get(el)!.asObservable();
-    }
-    
-    // Create new subject for this element
-    const resizeState$ = new BehaviorSubject<ResizeState>({
-      width: el.offsetWidth,
-      height: el.offsetHeight,
-      isResizing: false
-    });
-    
-    this.resizeStates.set(el, resizeState$);
-    
-    // Create ResizeObserver
-    const resizeObserver = new ResizeObserver((entries) => {
-      if (entries.length === 0) return;
-      
-      const entry = entries[0];
-      if (!entry) return;
-      
-      const { width, height } = entry.contentRect;
-      
-      this.ngZone.run(() => {
-        // Clear existing timeout
-        const existingTimeout = this.resizeTimeouts.get(el);
-        if (existingTimeout) {
-          clearTimeout(existingTimeout);
-        }
-        
-        // Update state with isResizing = true
-        resizeState$.next({
-          width,
-          height,
-          isResizing: true
-        });
-        
-        // Set timeout to clear isResizing flag
-        if (resizingDurationMs > 0) {
-          const timeout = window.setTimeout(() => {
-            resizeState$.next({
-              width,
-              height,
-              isResizing: false
-            });
-            this.resizeTimeouts.delete(el);
-          }, resizingDurationMs);
-          
-          this.resizeTimeouts.set(el, timeout);
-        } else {
-          // If no duration, immediately set isResizing to false
-          resizeState$.next({
-            width,
-            height,
-            isResizing: false
-          });
-        }
-      });
-    });
-    
-    // Start observing
-    resizeObserver.observe(el);
-    this.observers.set(el, resizeObserver);
-    
-    // Return observable with debouncing if specified
-    const observable = resizeState$.asObservable().pipe(
-      debounceMs > 0 ? debounceTime(debounceMs) : (source) => source,
-      distinctUntilChanged((a, b) => 
-        a.width === b.width && 
-        a.height === b.height && 
-        a.isResizing === b.isResizing
-      ),
-      takeUntil(this.destroy$)
-    );
-    
-    return observable;
-  }
-  
-  /**
-   * Stop observing an element
-   * @param element Element to stop observing
-   */
-  unobserve(element: ElementRef<HTMLElement> | HTMLElement): void {
-    const el = element instanceof ElementRef ? element.nativeElement : element;
-    
-    // Clear timeout if exists
-    const timeout = this.resizeTimeouts.get(el);
-    if (timeout) {
-      clearTimeout(timeout);
-      this.resizeTimeouts.delete(el);
-    }
-    
-    // Disconnect observer
-    const observer = this.observers.get(el);
-    if (observer) {
-      observer.disconnect();
-      this.observers.delete(el);
-    }
-    
-    // Complete and remove subject
-    const subject = this.resizeStates.get(el);
-    if (subject) {
-      subject.complete();
-      this.resizeStates.delete(el);
-    }
-  }
-  
-  /**
-   * Get current size of element
-   * @param element Element to measure
-   */
-  getCurrentSize(element: ElementRef<HTMLElement> | HTMLElement): { width: number; height: number } {
-    const el = element instanceof ElementRef ? element.nativeElement : element;
-    return {
-      width: el.offsetWidth,
-      height: el.offsetHeight
-    };
-  }
-  
-  /**
-   * Get current resize state of element
-   * @param element Element to check
-   */
-  getCurrentState(element: ElementRef<HTMLElement> | HTMLElement): ResizeState | null {
-    const el = element instanceof ElementRef ? element.nativeElement : element;
-    const subject = this.resizeStates.get(el);
-    return subject ? subject.value : null;
-  }
-  
-  ngOnDestroy(): void {
-    // Clear all timeouts
-    this.resizeTimeouts.forEach(timeout => clearTimeout(timeout));
-    this.resizeTimeouts.clear();
-    
-    // Disconnect all observers
-    this.observers.forEach(observer => observer.disconnect());
-    this.observers.clear();
-    
-    // Complete all subjects
-    this.resizeStates.forEach(subject => subject.complete());
-    this.resizeStates.clear();
-    
-    // Complete destroy subject
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}