@copilotkitnext/angular 0.0.1 → 0.0.4

package/src/components/chat/__tests__/copilot-chat-message-view.component.spec.ts

@@ -1,372 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CopilotChatMessageViewComponent } from '../copilot-chat-message-view.component';
-import { CopilotChatMessageViewCursorComponent } from '../copilot-chat-message-view-cursor.component';
-import { CopilotChatAssistantMessageComponent } from '../copilot-chat-assistant-message.component';
-import { CopilotChatUserMessageComponent } from '../copilot-chat-user-message.component';
-import { CopilotChatViewHandlersService } from '../copilot-chat-view-handlers.service';
-import { provideCopilotKit } from '../../../core/copilotkit.providers';
-import { provideCopilotChatConfiguration } from '../../../core/chat-configuration/chat-configuration.providers';
-import { Message, AssistantMessage, UserMessage } from '@ag-ui/client';
-
-describe('CopilotChatMessageViewComponent', () => {
-  let component: CopilotChatMessageViewComponent;
-  let fixture: ComponentFixture<CopilotChatMessageViewComponent>;
-
-  const mockAssistantMessage: AssistantMessage = {
-    id: 'assistant-1',
-    role: 'assistant',
-    content: 'Hello! How can I help you today?',
-    createdAt: new Date()
-  };
-
-  const mockUserMessage: UserMessage = {
-    id: 'user-1',
-    role: 'user',
-    content: 'I need help with Angular',
-    createdAt: new Date()
-  };
-
-  const mockMessages: Message[] = [
-    mockUserMessage,
-    mockAssistantMessage
-  ];
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        CommonModule,
-        CopilotChatMessageViewComponent,
-        CopilotChatMessageViewCursorComponent,
-        CopilotChatAssistantMessageComponent,
-        CopilotChatUserMessageComponent
-      ],
-      providers: [
-        provideCopilotKit({}),
-        provideCopilotChatConfiguration({}),
-        CopilotChatViewHandlersService
-      ]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(CopilotChatMessageViewComponent);
-    component = fixture.componentInstance;
-  });
-
-  describe('Basic Rendering', () => {
-    it('should create', () => {
-      expect(component).toBeTruthy();
-    });
-
-    it('should render with default classes "flex flex-col"', () => {
-      fixture.detectChanges();
-      const container = fixture.nativeElement.querySelector('div');
-      expect(container).toBeTruthy();
-      expect(container.className).toContain('flex');
-      expect(container.className).toContain('flex-col');
-    });
-
-    it('should render empty when no messages provided', () => {
-      component.messages = [];
-      fixture.detectChanges();
-      
-      const messages = fixture.nativeElement.querySelectorAll('copilot-chat-assistant-message, copilot-chat-user-message');
-      expect(messages.length).toBe(0);
-    });
-
-    it('should render single assistant message', () => {
-      component.messages = [mockAssistantMessage];
-      fixture.detectChanges();
-      
-      const assistantMessages = fixture.nativeElement.querySelectorAll('copilot-chat-assistant-message');
-      const userMessages = fixture.nativeElement.querySelectorAll('copilot-chat-user-message');
-      
-      expect(assistantMessages.length).toBe(1);
-      expect(userMessages.length).toBe(0);
-    });
-
-    it('should render single user message', () => {
-      component.messages = [mockUserMessage];
-      fixture.detectChanges();
-      
-      const assistantMessages = fixture.nativeElement.querySelectorAll('copilot-chat-assistant-message');
-      const userMessages = fixture.nativeElement.querySelectorAll('copilot-chat-user-message');
-      
-      expect(assistantMessages.length).toBe(0);
-      expect(userMessages.length).toBe(1);
-    });
-
-    it('should render mixed messages in order', () => {
-      component.messages = mockMessages;
-      fixture.detectChanges();
-      
-      const assistantMessages = fixture.nativeElement.querySelectorAll('copilot-chat-assistant-message');
-      const userMessages = fixture.nativeElement.querySelectorAll('copilot-chat-user-message');
-      
-      expect(userMessages.length).toBe(1);
-      expect(assistantMessages.length).toBe(1);
-    });
-
-    it('should filter out messages with invalid roles', () => {
-      const invalidMessage: any = {
-        id: 'system-1',
-        role: 'system',
-        content: 'System message'
-      };
-      
-      component.messages = [...mockMessages, invalidMessage];
-      fixture.detectChanges();
-      
-      const assistantMessages = fixture.nativeElement.querySelectorAll('copilot-chat-assistant-message');
-      const userMessages = fixture.nativeElement.querySelectorAll('copilot-chat-user-message');
-      
-      expect(userMessages.length).toBe(1);
-      expect(assistantMessages.length).toBe(1);
-    });
-
-    it('should handle null/undefined messages gracefully', () => {
-      component.messages = [null as any, undefined as any, mockAssistantMessage];
-      fixture.detectChanges();
-      
-      const assistantMessages = fixture.nativeElement.querySelectorAll('copilot-chat-assistant-message');
-      expect(assistantMessages.length).toBe(1);
-    });
-  });
-
-  describe('Cursor Functionality', () => {
-    it('should not show cursor by default', () => {
-      const cursor = fixture.nativeElement.querySelector('copilot-chat-message-view-cursor');
-      expect(cursor).toBeFalsy();
-    });
-
-    it('should show cursor when showCursor is true', () => {
-      component.showCursor = true;
-      fixture.detectChanges();
-      
-      const cursor = fixture.nativeElement.querySelector('copilot-chat-message-view-cursor');
-      expect(cursor).toBeTruthy();
-    });
-
-    it('should apply correct cursor classes', () => {
-      component.showCursor = true;
-      fixture.detectChanges();
-      
-      const cursorDiv = fixture.nativeElement.querySelector('copilot-chat-message-view-cursor div');
-      expect(cursorDiv).toBeTruthy();
-      expect(cursorDiv.className).toContain('w-[11px]');
-      expect(cursorDiv.className).toContain('h-[11px]');
-      expect(cursorDiv.className).toContain('rounded-full');
-      expect(cursorDiv.className).toContain('bg-foreground');
-      expect(cursorDiv.className).toContain('animate-pulse-cursor');
-      expect(cursorDiv.className).toContain('ml-1');
-    });
-
-    it('should apply custom cursor class', () => {
-      component.showCursor = true;
-      component.cursorClass = 'custom-cursor-class';
-      fixture.detectChanges();
-      
-      const cursorDiv = fixture.nativeElement.querySelector('copilot-chat-message-view-cursor div');
-      expect(cursorDiv).toBeTruthy();
-      // The custom class is merged with default classes
-      expect(cursorDiv.className).toContain('w-[11px]');
-      expect(cursorDiv.className).toContain('h-[11px]');
-      // Note: Custom class is passed but may be overridden by Tailwind merge
-    });
-  });
-
-  describe('CSS Class Handling', () => {
-    it('should merge custom classes with default classes', () => {
-      component.inputClass = 'custom-container-class';
-      fixture.detectChanges();
-      
-      const container = fixture.nativeElement.querySelector('div');
-      expect(container.className).toContain('flex');
-      expect(container.className).toContain('flex-col');
-      expect(container.className).toContain('custom-container-class');
-    });
-
-    it('should apply custom assistant message class', () => {
-      component.messages = [mockAssistantMessage];
-      component.assistantMessageClass = 'custom-assistant-class';
-      fixture.detectChanges();
-      
-      const assistantMessage = fixture.nativeElement.querySelector('copilot-chat-assistant-message');
-      expect(assistantMessage).toBeTruthy();
-      // Class is passed as input to the component
-    });
-
-    it('should apply custom user message class', () => {
-      component.messages = [mockUserMessage];
-      component.userMessageClass = 'custom-user-class';
-      fixture.detectChanges();
-      
-      const userMessage = fixture.nativeElement.querySelector('copilot-chat-user-message');
-      expect(userMessage).toBeTruthy();
-      // Class is passed as input to the component
-    });
-  });
-
-  describe('Slot System', () => {
-    it('should pass message prop to assistant message component', () => {
-      component.messages = [mockAssistantMessage];
-      fixture.detectChanges();
-      
-      const assistantMessage = fixture.nativeElement.querySelector('copilot-chat-assistant-message');
-      expect(assistantMessage).toBeTruthy();
-      // Message prop is passed via Angular input binding
-    });
-
-    it('should pass message prop to user message component', () => {
-      component.messages = [mockUserMessage];
-      fixture.detectChanges();
-      
-      const userMessage = fixture.nativeElement.querySelector('copilot-chat-user-message');
-      expect(userMessage).toBeTruthy();
-      // Message prop is passed via Angular input binding
-    });
-
-    it('should support custom assistant message props', () => {
-      component.messages = [mockAssistantMessage];
-      component.assistantMessageClass = 'custom-class';
-      fixture.detectChanges();
-      
-      // Props are merged and passed to slot system
-      expect(component.mergeAssistantProps(mockAssistantMessage)).toEqual({
-        message: mockAssistantMessage,
-        messages: [mockAssistantMessage],
-        isLoading: false,
-        inputClass: 'custom-class'
-      });
-    });
-
-    it('should support custom user message props', () => {
-      component.messages = [mockUserMessage];
-      component.userMessageClass = 'custom-class';
-      fixture.detectChanges();
-      
-      // Props are merged and passed to slot system
-      expect(component.mergeUserProps(mockUserMessage)).toEqual({
-        message: mockUserMessage,
-        inputClass: 'custom-class'
-      });
-    });
-  });
-
-  describe('Custom Layout Template', () => {
-    @Component({
-      template: `
-        <copilot-chat-message-view [messages]="messages" [showCursor]="showCursor">
-          <ng-template #customLayout let-messages="messages" let-showCursor="showCursor" let-messageElements="messageElements">
-            <div class="custom-layout">
-              <h2>Custom Layout</h2>
-              <div class="message-count">{{ messages?.length || 0 }} messages</div>
-              <div class="cursor-status">Cursor: {{ showCursor }}</div>
-              <div class="elements-count">Elements: {{ messageElements?.length || 0 }}</div>
-            </div>
-          </ng-template>
-        </copilot-chat-message-view>
-      `,
-      standalone: true,
-      imports: [CommonModule, CopilotChatMessageViewComponent]
-    })
-    class TestHostComponent {
-      messages = mockMessages;
-      showCursor = true;
-    }
-
-    it('should render custom layout template when provided', async () => {
-      const hostFixture = TestBed.createComponent(TestHostComponent);
-      hostFixture.detectChanges();
-      
-      const customLayout = hostFixture.nativeElement.querySelector('.custom-layout');
-      expect(customLayout).toBeTruthy();
-      
-      const messageCount = hostFixture.nativeElement.querySelector('.message-count');
-      expect(messageCount.textContent).toContain('2 messages');
-      
-      const cursorStatus = hostFixture.nativeElement.querySelector('.cursor-status');
-      expect(cursorStatus.textContent).toContain('Cursor: true');
-      
-      const elementsCount = hostFixture.nativeElement.querySelector('.elements-count');
-      expect(elementsCount.textContent).toContain('Elements: 2');
-    });
-  });
-
-  describe('Performance', () => {
-    it('should handle large message lists efficiently', () => {
-      const largeMessageList: Message[] = [];
-      for (let i = 0; i < 100; i++) {
-        largeMessageList.push({
-          id: `msg-${i}`,
-          role: i % 2 === 0 ? 'user' : 'assistant',
-          content: `Message ${i}`,
-          createdAt: new Date()
-        } as Message);
-      }
-      
-      component.messages = largeMessageList;
-      fixture.detectChanges();
-      
-      const allMessages = fixture.nativeElement.querySelectorAll('copilot-chat-assistant-message, copilot-chat-user-message');
-      expect(allMessages.length).toBe(100);
-    });
-
-    it('should use trackBy function for message iteration', () => {
-      const message: Message = {
-        id: 'test-1',
-        role: 'user',
-        content: 'Test'
-      } as Message;
-      
-      const trackById = component.trackByMessageId(0, message);
-      expect(trackById).toBe('test-1');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle empty message content', () => {
-      const emptyMessage: Message = {
-        id: 'empty-1',
-        role: 'assistant',
-        content: ''
-      } as Message;
-      
-      component.messages = [emptyMessage];
-      fixture.detectChanges();
-      
-      const assistantMessage = fixture.nativeElement.querySelector('copilot-chat-assistant-message');
-      expect(assistantMessage).toBeTruthy();
-    });
-
-    it('should handle messages with only whitespace', () => {
-      const whitespaceMessage: Message = {
-        id: 'whitespace-1',
-        role: 'user',
-        content: '   '
-      } as Message;
-      
-      component.messages = [whitespaceMessage];
-      fixture.detectChanges();
-      
-      const userMessage = fixture.nativeElement.querySelector('copilot-chat-user-message');
-      expect(userMessage).toBeTruthy();
-    });
-
-    it('should maintain message order', () => {
-      const orderedMessages: Message[] = [
-        { id: '1', role: 'user', content: 'First' } as Message,
-        { id: '2', role: 'assistant', content: 'Second' } as Message,
-        { id: '3', role: 'user', content: 'Third' } as Message,
-        { id: '4', role: 'assistant', content: 'Fourth' } as Message
-      ];
-      
-      component.messages = orderedMessages;
-      fixture.detectChanges();
-      
-      const allMessages = fixture.nativeElement.querySelectorAll('copilot-chat-assistant-message, copilot-chat-user-message');
-      expect(allMessages.length).toBe(4);
-      // Order is maintained through the template iteration
-    });
-  });
-});

package/src/components/chat/__tests__/copilot-chat-user-message.component.spec.ts

@@ -1,249 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, DebugElement } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { CommonModule } from '@angular/common';
-import { vi } from 'vitest';
-import { CopilotChatUserMessageComponent } from '../copilot-chat-user-message.component';
-import { provideCopilotChatConfiguration } from '../../../core/chat-configuration/chat-configuration.providers';
-import { UserMessage } from '../copilot-chat-user-message.types';
-
-describe('CopilotChatUserMessageComponent', () => {
-  let component: CopilotChatUserMessageComponent;
-  let fixture: ComponentFixture<CopilotChatUserMessageComponent>;
-  let element: HTMLElement;
-
-  const mockMessage: UserMessage = {
-    id: 'test-message-1',
-    content: 'Hello, this is a test message',
-    role: 'user',
-    timestamp: new Date()
-  };
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [CommonModule, CopilotChatUserMessageComponent],
-      providers: [
-        provideCopilotChatConfiguration({
-          labels: {
-            userMessageToolbarCopyMessageLabel: 'Copy',
-            userMessageToolbarEditMessageLabel: 'Edit'
-          }
-        })
-      ]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(CopilotChatUserMessageComponent);
-    component = fixture.componentInstance;
-    element = fixture.nativeElement;
-    
-    // Set required input
-    component.message = mockMessage;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render message content', () => {
-    const messageElement = element.querySelector('copilot-chat-user-message-renderer');
-    expect(messageElement?.textContent?.trim()).toBe(mockMessage.content);
-  });
-
-  it('should have message id as data attribute', () => {
-    const messageContainer = element.querySelector('[data-message-id]');
-    expect(messageContainer?.getAttribute('data-message-id')).toBe(mockMessage.id);
-  });
-
-  it('should show copy button', () => {
-    const copyButton = element.querySelector('copilot-chat-user-message-copy-button');
-    expect(copyButton).toBeTruthy();
-  });
-
-  it('should show edit button when editMessage event is observed', async () => {
-    // Create a fresh component with a subscription
-    const freshFixture = TestBed.createComponent(CopilotChatUserMessageComponent);
-    const freshComponent = freshFixture.componentInstance;
-    const freshElement = freshFixture.nativeElement;
-    
-    // Set required input
-    freshComponent.message = mockMessage;
-    
-    // Subscribe before first change detection
-    const subscription = freshComponent.editMessage.subscribe(() => {});
-    
-    // Now detect changes
-    freshFixture.detectChanges();
-    
-    const editButton = freshElement.querySelector('copilot-chat-user-message-edit-button');
-    expect(editButton).toBeTruthy();
-    
-    // Clean up
-    subscription.unsubscribe();
-    freshFixture.destroy();
-  });
-
-  it('should not show edit button when editMessage is not observed', () => {
-    const editButton = element.querySelector('copilot-chat-user-message-edit-button');
-    expect(editButton).toBeFalsy();
-  });
-
-  it('should emit editMessage event when edit button is clicked', (done) => {
-    component.editMessage.subscribe((event) => {
-      expect(event.message).toEqual(mockMessage);
-      done();
-    });
-    
-    fixture.detectChanges();
-    
-    const editButton = element.querySelector('copilot-chat-user-message-edit-button button');
-    (editButton as HTMLButtonElement)?.click();
-  });
-
-  it('should copy message content to clipboard when copy button is clicked', async () => {
-    const writeTextSpy = vi.fn().mockResolvedValue(undefined);
-    Object.defineProperty(navigator, 'clipboard', {
-      value: { writeText: writeTextSpy },
-      writable: true
-    });
-    
-    const copyButton = element.querySelector('copilot-chat-user-message-copy-button button');
-    (copyButton as HTMLButtonElement)?.click();
-    
-    await fixture.whenStable();
-    
-    expect(writeTextSpy).toHaveBeenCalledWith(mockMessage.content);
-  });
-
-  it('should show branch navigation when numberOfBranches > 1', () => {
-    component.numberOfBranches = 3;
-    component.branchIndex = 1;
-    component.switchToBranch.subscribe(); // Make it observed
-    fixture.detectChanges();
-    
-    const branchNav = element.querySelector('copilot-chat-user-message-branch-navigation');
-    expect(branchNav).toBeTruthy();
-    
-    const branchText = element.querySelector('.text-muted-foreground');
-    expect(branchText?.textContent?.trim()).toBe('2/3');
-  });
-
-  it('should not show branch navigation when numberOfBranches = 1', () => {
-    component.numberOfBranches = 1;
-    component.switchToBranch.subscribe(); // Make it observed
-    fixture.detectChanges();
-    
-    const branchNav = element.querySelector('copilot-chat-user-message-branch-navigation');
-    expect(branchNav).toBeFalsy();
-  });
-
-  it('should emit switchToBranch event when branch navigation is clicked', (done) => {
-    component.numberOfBranches = 3;
-    component.branchIndex = 1;
-    
-    component.switchToBranch.subscribe((event) => {
-      expect(event.branchIndex).toBe(2);
-      expect(event.numberOfBranches).toBe(3);
-      expect(event.message).toEqual(mockMessage);
-      done();
-    });
-    
-    fixture.detectChanges();
-    
-    // Click next button
-    const buttons = element.querySelectorAll('copilot-chat-user-message-branch-navigation button');
-    const nextButton = buttons[1] as HTMLButtonElement;
-    nextButton?.click();
-  });
-
-  it('should apply custom class', () => {
-    component.inputClass = 'custom-test-class';
-    fixture.detectChanges();
-    
-    const container = element.querySelector('.custom-test-class');
-    expect(container).toBeTruthy();
-  });
-
-  it.skip('should render additional toolbar items', () => {
-    // This test is skipped as it requires a separate TestBed setup
-    // which conflicts with the existing setup
-  });
-
-  it('should handle empty message content', () => {
-    const emptyMessage = { ...mockMessage, content: undefined };
-    component.message = emptyMessage;
-    fixture.componentRef.setInput('message', emptyMessage);
-    fixture.detectChanges();
-    
-    const messageElement = element.querySelector('copilot-chat-user-message-renderer');
-    expect(messageElement?.textContent?.trim()).toBe('');
-  });
-
-  it('should handle multiline message content', () => {
-    const multilineMessage: UserMessage = {
-      id: 'multiline-message',
-      content: 'Line 1\nLine 2\nLine 3',
-      role: 'user',
-      timestamp: new Date()
-    };
-    
-    component.message = multilineMessage;
-    fixture.componentRef.setInput('message', multilineMessage);
-    fixture.detectChanges();
-    
-    const messageElement = element.querySelector('copilot-chat-user-message-renderer');
-    expect(messageElement?.textContent).toContain('Line 1');
-    expect(messageElement?.textContent).toContain('Line 2');
-    expect(messageElement?.textContent).toContain('Line 3');
-  });
-
-  describe('Branch Navigation', () => {
-    beforeEach(() => {
-      component.numberOfBranches = 5;
-      component.branchIndex = 2;
-      component.switchToBranch.subscribe();
-      fixture.detectChanges();
-    });
-
-    it('should disable previous button on first branch', () => {
-      component.branchIndex = 0;
-      fixture.detectChanges();
-      
-      const buttons = element.querySelectorAll('copilot-chat-user-message-branch-navigation button');
-      const prevButton = buttons[0] as HTMLButtonElement;
-      
-      expect(prevButton.disabled).toBeTruthy();
-    });
-
-    it('should disable next button on last branch', () => {
-      component.branchIndex = 4;
-      fixture.detectChanges();
-      
-      const buttons = element.querySelectorAll('copilot-chat-user-message-branch-navigation button');
-      const nextButton = buttons[1] as HTMLButtonElement;
-      
-      expect(nextButton.disabled).toBeTruthy();
-    });
-
-    it('should enable both buttons on middle branch', () => {
-      const buttons = element.querySelectorAll('copilot-chat-user-message-branch-navigation button');
-      const prevButton = buttons[0] as HTMLButtonElement;
-      const nextButton = buttons[1] as HTMLButtonElement;
-      
-      expect(prevButton.disabled).toBeFalsy();
-      expect(nextButton.disabled).toBeFalsy();
-    });
-  });
-
-  describe('Template Slots', () => {
-    it.skip('should use custom message renderer template', () => {
-      // This test is skipped as it requires a separate TestBed setup
-      // which conflicts with the existing setup
-    });
-
-    it.skip('should use custom copy button template', () => {
-      // This test is skipped as it requires a separate TestBed setup
-      // which conflicts with the existing setup
-    });
-  });
-});