@copilotkitnext/angular 0.0.1 → 0.0.4

package/src/services/scroll-position.service.ts

@@ -1,169 +0,0 @@
-import { Injectable, ElementRef, NgZone, OnDestroy } from '@angular/core';
-import { ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';
-import { Observable, Subject, BehaviorSubject, fromEvent, merge, animationFrameScheduler } from 'rxjs';
-import { 
-  takeUntil, 
-  debounceTime, 
-  throttleTime, 
-  distinctUntilChanged,
-  map,
-  observeOn,
-  startWith
-} from 'rxjs/operators';
-
-export interface ScrollState {
-  isAtBottom: boolean;
-  scrollTop: number;
-  scrollHeight: number;
-  clientHeight: number;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ScrollPositionService implements OnDestroy {
-  private destroy$ = new Subject<void>();
-  private scrollStateSubject = new BehaviorSubject<ScrollState>({
-    isAtBottom: true,
-    scrollTop: 0,
-    scrollHeight: 0,
-    clientHeight: 0
-  });
-  
-  public scrollState$ = this.scrollStateSubject.asObservable();
-  
-  constructor(
-    private scrollDispatcher: ScrollDispatcher,
-    private viewportRuler: ViewportRuler,
-    private ngZone: NgZone
-  ) {}
-  
-  /**
-   * Monitor scroll position of an element
-   * @param element The element to monitor
-   * @param threshold Pixels from bottom to consider "at bottom" (default 10)
-   */
-  monitorScrollPosition(
-    element: ElementRef<HTMLElement> | HTMLElement,
-    threshold: number = 10
-  ): Observable<ScrollState> {
-    const el = element instanceof ElementRef ? element.nativeElement : element;
-    
-    // Create scroll observable
-    const scroll$ = merge(
-      fromEvent(el, 'scroll'),
-      this.viewportRuler.change(150) // Monitor viewport changes
-    ).pipe(
-      startWith(null), // Emit initial state
-      throttleTime(16, animationFrameScheduler, { trailing: true }), // ~60fps
-      map(() => this.getScrollState(el, threshold)),
-      distinctUntilChanged((a, b) => 
-        a.isAtBottom === b.isAtBottom && 
-        a.scrollTop === b.scrollTop &&
-        a.scrollHeight === b.scrollHeight
-      ),
-      takeUntil(this.destroy$)
-    );
-    
-    // Subscribe and update subject
-    scroll$.subscribe(state => {
-      this.scrollStateSubject.next(state);
-    });
-    
-    return scroll$;
-  }
-  
-  /**
-   * Scroll element to bottom with smooth animation
-   * @param element The element to scroll
-   * @param smooth Whether to use smooth scrolling
-   */
-  scrollToBottom(
-    element: ElementRef<HTMLElement> | HTMLElement,
-    smooth: boolean = true
-  ): void {
-    const el = element instanceof ElementRef ? element.nativeElement : element;
-    
-    this.ngZone.runOutsideAngular(() => {
-      if (smooth && 'scrollBehavior' in document.documentElement.style) {
-        el.scrollTo({
-          top: el.scrollHeight,
-          behavior: 'smooth'
-        });
-      } else {
-        el.scrollTop = el.scrollHeight;
-      }
-    });
-  }
-  
-  /**
-   * Check if element is at bottom
-   * @param element The element to check
-   * @param threshold Pixels from bottom to consider "at bottom"
-   */
-  isAtBottom(
-    element: ElementRef<HTMLElement> | HTMLElement,
-    threshold: number = 10
-  ): boolean {
-    const el = element instanceof ElementRef ? element.nativeElement : element;
-    return this.getScrollState(el, threshold).isAtBottom;
-  }
-  
-  /**
-   * Get current scroll state of element
-   */
-  public getScrollState(element: HTMLElement, threshold: number): ScrollState {
-    const scrollTop = element.scrollTop;
-    const scrollHeight = element.scrollHeight;
-    const clientHeight = element.clientHeight;
-    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-    const isAtBottom = distanceFromBottom <= threshold;
-    
-    return {
-      isAtBottom,
-      scrollTop,
-      scrollHeight,
-      clientHeight
-    };
-  }
-  
-  /**
-   * Create a ResizeObserver for element size changes
-   * @param element The element to observe
-   * @param debounceMs Debounce time in milliseconds
-   */
-  observeResize(
-    element: ElementRef<HTMLElement> | HTMLElement,
-    debounceMs: number = 250
-  ): Observable<ResizeObserverEntry> {
-    const el = element instanceof ElementRef ? element.nativeElement : element;
-    const resize$ = new Subject<ResizeObserverEntry>();
-    
-    const resizeObserver = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) {
-        this.ngZone.run(() => {
-          resize$.next(entry);
-        });
-      }
-    });
-    
-    resizeObserver.observe(el);
-    
-    // Cleanup on destroy
-    this.destroy$.subscribe(() => {
-      resizeObserver.disconnect();
-    });
-    
-    return resize$.pipe(
-      debounceTime(debounceMs),
-      takeUntil(this.destroy$)
-    );
-  }
-  
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-    this.scrollStateSubject.complete();
-  }
-}

package/src/styles/globals.css

@@ -1,266 +0,0 @@
-@import "tailwindcss";
-@plugin "@tailwindcss/typography";
-@source "../**/*.{ts,html}";
-@source "../../apps/angular/storybook/stories/**/*.{ts,html}";
-
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-@theme {
-  --animate-pulse-cursor: pulse-cursor 0.9s cubic-bezier(0.4, 0, 0.2, 1)
-    infinite;
-  @keyframes pulse-cursor {
-    0%,
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    50% {
-      transform: scale(1.5);
-      opacity: 0.8;
-    }
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-/* Shiki styles removed - Angular uses highlight.js instead */
-
-.prose {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.prose
-  :where(code):not(
-    :where([class~="not-prose"], [class~="not-prose"] *)
-  )::before {
-  content: none;
-}
-
-.prose
-  :where(code):not(
-    :where([class~="not-prose"], [class~="not-prose"] *)
-  )::after {
-  content: none;
-}
-
-.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-  font-weight: 400;
-}
-
-.prose h1 {
-  margin-block-end: 8px;
-  margin-bottom: 8px;
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.prose h2 {
-  margin-block-end: 4px;
-  margin-block-start: 16px;
-  margin-top: 16px;
-  margin-bottom: 4px;
-  font-size: 20px;
-  font-weight: 600;
-}
-
-.prose h3 {
-  margin-block-end: 4px;
-  margin-block-start: 16px;
-  margin-top: 16px;
-  margin-bottom: 4px;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.prose p {
-  margin-block-start: 8px;
-  margin-block-end: 4px;
-  margin-top: 4px;
-  margin-bottom: 8px;
-}
-
-.prose a {
-  color: #2964aa;
-  text-decoration: none;
-}
-
-.prose a:hover {
-  color: #749ac8;
-}
-
-.prose
-  :where(blockquote p:first-of-type):not(
-    :where([class~="not-prose"], [class~="not-prose"] *)
-  )::before {
-  content: none;
-}
-
-.prose blockquote {
-  font-style: normal;
-  font-weight: 400;
-}
-
-.prose input[type="checkbox"] {
-  appearance: none;
-  background-color: #fff;
-  background-origin: border-box;
-  border-color: #9b9b9b;
-  border-width: 1px;
-  color: #004f99;
-  display: inline-block;
-  flex-shrink: 0;
-  height: 1rem;
-  padding: 0;
-  -webkit-print-color-adjust: exact;
-  print-color-adjust: exact;
-  -webkit-user-select: none;
-  user-select: none;
-  vertical-align: middle;
-  width: 1rem;
-  border-radius: 2px;
-}
-
-.prose input[type="checkbox"]:checked {
-  background-color: #004f99;
-  border-color: #004f99;
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-
-.prose em {
-  @apply text-foreground;
-}
-
-.prose hr {
-  margin-block-start: 0px;
-  margin-block-end: 0px;
-  margin-top: 28px;
-  margin-bottom: 28px;
-  color: rgb(13, 13, 13);
-}
-
-.prose td {
-  @apply text-foreground;
-}

package/src/styles/index.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/test-setup.ts

@@ -1,15 +0,0 @@
-import 'reflect-metadata';
-import 'zone.js';
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import { 
-  BrowserDynamicTestingModule, 
-  platformBrowserDynamicTesting 
-} from '@angular/platform-browser-dynamic/testing';
-
-// Initialize Angular testing environment
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-  { teardown: { destroyAfterEach: true } }
-);

package/src/testing/index.ts

@@ -1,3 +0,0 @@
-// Testing utilities for @copilotkitnext/angular
-// These should only be imported in test files, not in production code
-export * from "./testing.utils";

package/src/testing/testing.utils.ts

@@ -1,248 +0,0 @@
-import { TestBed, TestModuleMetadata } from "@angular/core/testing";
-import { DestroyRef } from "@angular/core";
-import { provideCopilotKit } from "../core/copilotkit.providers";
-import { provideCopilotChatConfiguration } from "../core/chat-configuration/chat-configuration.providers";
-import { CopilotKitCoreConfig } from "@copilotkitnext/core";
-import { CopilotChatConfiguration } from "../core/chat-configuration/chat-configuration.types";
-import { vi } from "vitest";
-
-/**
- * Creates a CopilotKit testing module with mock providers.
- * Simplifies test setup and provides consistent mocking across tests.
- *
- * @param config - Optional CopilotKit configuration
- * @param chatConfig - Optional chat configuration
- * @param additionalProviders - Additional providers to include
- * @returns Configured TestBed instance
- *
- * @example
- * ```typescript
- * describe('MyComponent', () => {
- *   beforeEach(() => {
- *     createCopilotKitTestingModule({
- *       runtimeUrl: 'test-url'
- *     });
- *   });
- *
- *   it('should work', () => {
- *     const fixture = TestBed.createComponent(MyComponent);
- *     // ...
- *   });
- * });
- * ```
- */
-/**
- * Mock DestroyRef implementation for testing
- */
-export class MockDestroyRef implements DestroyRef {
-  private callbacks: Array<() => void> = [];
-
-  onDestroy(callback: () => void): () => void {
-    this.callbacks.push(callback);
-    return () => {
-      const index = this.callbacks.indexOf(callback);
-      if (index > -1) {
-        this.callbacks.splice(index, 1);
-      }
-    };
-  }
-
-  // Method to trigger destroy for testing
-  destroy(): void {
-    this.callbacks.forEach((cb) => cb());
-    this.callbacks = [];
-  }
-}
-
-export function createCopilotKitTestingModule(
-  config?: Partial<CopilotKitCoreConfig>,
-  chatConfig?: Partial<CopilotChatConfiguration>,
-  additionalProviders?: any[]
-): any {
-  const mockDestroyRef = new MockDestroyRef();
-
-  const metadata: TestModuleMetadata = {
-    providers: [
-      { provide: DestroyRef, useValue: mockDestroyRef },
-      ...provideCopilotKit(
-        config
-          ? {
-              runtimeUrl: config.runtimeUrl,
-              headers: config.headers as Record<string, string> | undefined,
-              properties: config.properties,
-              agents: config.agents,
-            }
-          : {}
-      ),
-      ...(chatConfig ? provideCopilotChatConfiguration(chatConfig) : []),
-      ...(additionalProviders ?? []),
-    ],
-  };
-
-  const testBed = TestBed.configureTestingModule(metadata);
-  // Attach the mock to TestBed for testing access
-  (testBed as any).mockDestroyRef = mockDestroyRef;
-  return testBed;
-}
-
-/**
- * Creates a mock CopilotKitCore instance for testing.
- * Provides all necessary methods with vi.fn() mocks.
- *
- * @returns Mock CopilotKitCore instance
- *
- * @example
- * ```typescript
- * const mockCore = createMockCopilotKitCore();
- * vi.spyOn(mockCore, 'addContext').mockReturnValue('context-id');
- * ```
- */
-export function createMockCopilotKitCore() {
-  return {
-    addContext: vi.fn().mockImplementation(() => "context-id-" + Math.random()),
-    removeContext: vi.fn(),
-    addTool: vi.fn().mockImplementation(() => "tool-id-" + Math.random()),
-    removeTool: vi.fn(),
-    setRuntimeUrl: vi.fn(),
-    setHeaders: vi.fn(),
-    setProperties: vi.fn(),
-    setAgents: vi.fn(),
-    getAgent: vi.fn(),
-    subscribe: vi.fn(() => vi.fn()), // Returns unsubscribe function
-    getMessages: vi.fn(() => []),
-    getState: vi.fn(() => ({})),
-    send: vi.fn(),
-    render: vi.fn(),
-  };
-}
-
-/**
- * Creates a mock Agent instance for testing.
- * Provides all necessary methods with vi.fn() mocks.
- *
- * @param id - Agent ID
- * @returns Mock Agent instance
- *
- * @example
- * ```typescript
- * const mockAgent = createMockAgent('test-agent');
- * vi.spyOn(mockAgent, 'subscribe').mockReturnValue({ unsubscribe: vi.fn() });
- * ```
- */
-export function createMockAgent(id: string = "test-agent") {
-  return {
-    id,
-    getMessages: vi.fn(() => []),
-    getState: vi.fn(() => ({})),
-    subscribe: vi.fn(() => ({ unsubscribe: vi.fn() })),
-    send: vi.fn(),
-    render: vi.fn(),
-    isRunning: vi.fn(() => false),
-  };
-}
-
-/**
- * Helper to create a test host component for directive testing.
- * Reduces boilerplate in directive test files.
- *
- * @param template - Component template
- * @param componentClass - Optional component class definition
- * @returns Component class
- *
- * @example
- * ```typescript
- * const TestComponent = createTestHostComponent(`
- *   <div copilotkitAgent [agentId]="agentId"></div>
- * `, {
- *   agentId: 'test-agent'
- * });
- * ```
- */
-export function createTestHostComponent(
-  template: string,
-  componentClass: Record<string, any> = {}
-): any {
-  return class TestHostComponent {
-    constructor() {
-      Object.assign(this, componentClass);
-    }
-  };
-}
-
-/**
- * Waits for Angular change detection to complete.
- * Useful for testing async operations.
- *
- * @param fixture - Component fixture
- * @param timeout - Maximum wait time in ms
- * @returns Promise that resolves when stable
- *
- * @example
- * ```typescript
- * await waitForStable(fixture);
- * expect(component.isReady).toBe(true);
- * ```
- */
-export async function waitForStable(
-  fixture: any,
-  timeout: number = 1000
-): Promise<void> {
-  return new Promise((resolve, reject) => {
-    const startTime = Date.now();
-
-    const check = () => {
-      fixture.detectChanges();
-
-      if (fixture.isStable()) {
-        resolve();
-      } else if (Date.now() - startTime > timeout) {
-        reject(new Error("Fixture did not stabilize within timeout"));
-      } else {
-        setTimeout(check, 10);
-      }
-    };
-
-    check();
-  });
-}
-
-/**
- * Creates a mock render function for tool testing.
- *
- * @returns Mock render function
- */
-export function createMockToolRender() {
-  return vi.fn().mockImplementation((props: any) => {
-    return { type: "mock-render", props };
-  });
-}
-
-/**
- * Creates a mock tool handler for testing.
- *
- * @param returnValue - Value to return from handler
- * @returns Mock handler function
- */
-export function createMockToolHandler(returnValue: any = "mock-result") {
-  return vi.fn().mockResolvedValue(returnValue);
-}
-
-/**
- * Helper to test directive lifecycle methods.
- *
- * @param directive - Directive instance
- * @param changes - SimpleChanges to apply
- */
-export function triggerLifecycle(directive: any, changes?: any): void {
-  if (directive.ngOnInit) {
-    directive.ngOnInit();
-  }
-
-  if (changes && directive.ngOnChanges) {
-    directive.ngOnChanges(changes);
-  }
-
-  if (directive.ngOnDestroy) {
-    directive.ngOnDestroy();
-  }
-}