@copilotkitnext/angular 0.0.1 → 0.0.4

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

@@ -1,51 +0,0 @@
-import {
-  Component,
-  Input,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-  computed,
-  signal,
-  OnInit,
-  OnChanges
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { cn } from '../../lib/utils';
-
-/**
- * Cursor component that matches the React implementation exactly.
- * Shows a pulsing dot animation to indicate activity.
- */
-@Component({
-  selector: 'copilot-chat-message-view-cursor',
-  standalone: true,
-  imports: [CommonModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <div
-      [class]="computedClass()"
-    ></div>
-  `
-})
-export class CopilotChatMessageViewCursorComponent implements OnInit, OnChanges {
-  @Input() inputClass?: string;
-  
-  // Signal for reactive class updates
-  private inputClassSignal = signal<string | undefined>(undefined);
-  
-  // Computed class that matches React exactly: w-[11px] h-[11px] rounded-full bg-foreground animate-pulse-cursor ml-1
-  computedClass = computed(() => 
-    cn(
-      'w-[11px] h-[11px] rounded-full bg-foreground animate-pulse-cursor ml-1',
-      this.inputClassSignal()
-    )
-  );
-  
-  ngOnInit() {
-    this.inputClassSignal.set(this.inputClass);
-  }
-  
-  ngOnChanges() {
-    this.inputClassSignal.set(this.inputClass);
-  }
-}

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

@@ -1,233 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ContentChild,
-  TemplateRef,
-  Type,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-  signal,
-  computed,
-  OnInit,
-  OnChanges
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CopilotSlotComponent } from '../../lib/slots/copilot-slot.component';
-import type { Message } from '@ag-ui/core';
-import { CopilotChatAssistantMessageComponent } from './copilot-chat-assistant-message.component';
-import { CopilotChatUserMessageComponent } from './copilot-chat-user-message.component';
-import { CopilotChatMessageViewCursorComponent } from './copilot-chat-message-view-cursor.component';
-import { cn } from '../../lib/utils';
-
-/**
- * CopilotChatMessageView component - Angular port of the React component.
- * Renders a list of chat messages with support for custom slots and layouts.
- * DOM structure and Tailwind classes match the React implementation exactly.
- */
-@Component({
-  selector: 'copilot-chat-message-view',
-  standalone: true,
-  imports: [
-    CommonModule,
-    CopilotSlotComponent,
-    CopilotChatAssistantMessageComponent,
-    CopilotChatUserMessageComponent,
-    CopilotChatMessageViewCursorComponent
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <!-- Custom layout template support (render prop pattern) -->
-    @if (customLayoutTemplate) {
-      <ng-container *ngTemplateOutlet="customLayoutTemplate; context: layoutContext()"></ng-container>
-    } @else {
-      <!-- Default layout - exact React DOM structure: div with "flex flex-col" classes -->
-      <div [class]="computedClass()">
-        <!-- Message iteration - simplified without tool calls -->
-        @for (message of messagesSignal(); track trackByMessageId($index, message)) {
-          @if (message && message.role === 'assistant') {
-            <!-- Assistant message with slot support -->
-            @if (assistantMessageComponent || assistantMessageTemplate) {
-              <copilot-slot
-                [slot]="assistantMessageTemplate || assistantMessageComponent"
-                [context]="mergeAssistantProps(message)"
-                [defaultComponent]="defaultAssistantComponent">
-              </copilot-slot>
-            } @else {
-              <copilot-chat-assistant-message 
-                [message]="message"
-                [messages]="messagesSignal()"
-                [isLoading]="isLoadingSignal()"
-                [inputClass]="assistantMessageClass"
-                (thumbsUp)="handleAssistantThumbsUp($event)"
-                (thumbsDown)="handleAssistantThumbsDown($event)"
-                (readAloud)="handleAssistantReadAloud($event)"
-                (regenerate)="handleAssistantRegenerate($event)">
-              </copilot-chat-assistant-message>
-            }
-          } @else if (message && message.role === 'user') {
-            <!-- User message with slot support -->
-            @if (userMessageComponent || userMessageTemplate) {
-              <copilot-slot
-                [slot]="userMessageTemplate || userMessageComponent"
-                [context]="mergeUserProps(message)"
-                [defaultComponent]="defaultUserComponent">
-              </copilot-slot>
-            } @else {
-              <copilot-chat-user-message 
-                [message]="message"
-                [inputClass]="userMessageClass">
-              </copilot-chat-user-message>
-            }
-          }
-        }
-        
-        <!-- Cursor - exactly like React's conditional rendering -->
-        @if (showCursor) {
-          @if (cursorComponent || cursorTemplate) {
-            <copilot-slot
-              [slot]="cursorTemplate || cursorComponent"
-              [context]="{ inputClass: cursorClass }"
-              [defaultComponent]="defaultCursorComponent">
-            </copilot-slot>
-          } @else {
-            <copilot-chat-message-view-cursor 
-              [inputClass]="cursorClass">
-            </copilot-chat-message-view-cursor>
-          }
-        }
-      </div>
-    }
-  `
-})
-export class CopilotChatMessageViewComponent implements OnInit, OnChanges {
-  // Core inputs matching React props
-  @Input() messages: Message[] = [];
-  @Input() showCursor = false;
-  @Input() isLoading = false;
-  @Input() inputClass?: string;
-  
-  // Handler availability handled via DI service
-  
-  // Assistant message slot inputs
-  @Input() assistantMessageComponent?: Type<any>;
-  @Input() assistantMessageTemplate?: TemplateRef<any>;
-  @Input() assistantMessageClass?: string;
-  
-  // User message slot inputs
-  @Input() userMessageComponent?: Type<any>;
-  @Input() userMessageTemplate?: TemplateRef<any>;
-  @Input() userMessageClass?: string;
-  
-  
-  // Cursor slot inputs
-  @Input() cursorComponent?: Type<any>;
-  @Input() cursorTemplate?: TemplateRef<any>;
-  @Input() cursorClass?: string;
-  
-  // Custom layout template (render prop pattern)
-  @ContentChild('customLayout') customLayoutTemplate?: TemplateRef<any>;
-  
-  // Output events (bubbled from child components)
-  @Output() assistantMessageThumbsUp = new EventEmitter<{ message: Message }>();
-  @Output() assistantMessageThumbsDown = new EventEmitter<{ message: Message }>();
-  @Output() assistantMessageReadAloud = new EventEmitter<{ message: Message }>();
-  @Output() assistantMessageRegenerate = new EventEmitter<{ message: Message }>();
-  @Output() userMessageCopy = new EventEmitter<{ message: Message }>();
-  @Output() userMessageEdit = new EventEmitter<{ message: Message }>();
-  
-  // Default components for slots
-  protected readonly defaultAssistantComponent = CopilotChatAssistantMessageComponent;
-  protected readonly defaultUserComponent = CopilotChatUserMessageComponent;
-  protected readonly defaultCursorComponent = CopilotChatMessageViewCursorComponent;
-  
-  // Signals for reactive updates
-  protected messagesSignal = signal<Message[]>([]);
-  protected showCursorSignal = signal(false);
-  protected isLoadingSignal = signal(false);
-  protected inputClassSignal = signal<string | undefined>(undefined);
-  
-  // Computed class matching React: twMerge("flex flex-col", className)
-  computedClass = computed(() => 
-    cn('flex flex-col', this.inputClassSignal())
-  );
-  
-  
-  // Layout context for custom templates (render prop pattern)
-  layoutContext = computed(() => ({
-    isLoading: this.isLoadingSignal(),
-    messages: this.messagesSignal(),
-    showCursor: this.showCursorSignal(),
-    messageElements: this.messagesSignal().filter(m => m && (m.role === 'assistant' || m.role === 'user'))
-  }));
-  
-  // Slot resolution computed signals
-  assistantMessageSlot = computed(() => 
-    this.assistantMessageComponent || this.assistantMessageClass
-  );
-  
-  userMessageSlot = computed(() => 
-    this.userMessageComponent || this.userMessageClass
-  );
-  
-  cursorSlot = computed(() => 
-    this.cursorComponent || this.cursorClass
-  );
-  
-  // Props merging helpers
-  mergeAssistantProps(message: Message) {
-    return {
-      message,
-      messages: this.messagesSignal(),
-      isLoading: this.isLoadingSignal(),
-      inputClass: this.assistantMessageClass
-    };
-  }
-  
-  mergeUserProps(message: Message) {
-    return {
-      message,
-      inputClass: this.userMessageClass
-    };
-  }
-  
-  // TrackBy function for performance optimization
-  trackByMessageId(index: number, message: Message): string {
-    return message?.id || `index-${index}`;
-  }
-  
-  // Lifecycle hooks
-  ngOnInit() {
-    // Initialize signals with input values
-    this.messagesSignal.set(this.messages);
-    this.showCursorSignal.set(this.showCursor);
-    this.isLoadingSignal.set(this.isLoading);
-    this.inputClassSignal.set(this.inputClass);
-  }
-  
-  ngOnChanges() {
-    this.messagesSignal.set(this.messages);
-    this.showCursorSignal.set(this.showCursor);
-    this.isLoadingSignal.set(this.isLoading);
-    this.inputClassSignal.set(this.inputClass);
-  }
-  
-  // Event handlers - just pass them through
-  handleAssistantThumbsUp(event: { message: Message }): void {
-    this.assistantMessageThumbsUp.emit(event);
-  }
-  
-  handleAssistantThumbsDown(event: { message: Message }): void {
-    this.assistantMessageThumbsDown.emit(event);
-  }
-  
-  handleAssistantReadAloud(event: { message: Message }): void {
-    this.assistantMessageReadAloud.emit(event);
-  }
-  
-  handleAssistantRegenerate(event: { message: Message }): void {
-    this.assistantMessageRegenerate.emit(event);
-  }
-}

package/src/components/chat/copilot-chat-message-view.types.ts

@@ -1,39 +0,0 @@
-import { Message } from '@ag-ui/client';
-import { Type, TemplateRef } from '@angular/core';
-
-// Context interfaces for template slots
-export interface MessageViewContext {
-  showCursor: boolean;
-  messages: Message[];
-  messageElements: any[]; // Will be populated with rendered elements
-}
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface CursorContext {
-  // Empty for now, can be extended if needed
-}
-
-// Component input props interface
-export interface CopilotChatMessageViewProps {
-  messages?: Message[];
-  showCursor?: boolean;
-  inputClass?: string;
-  
-  // Assistant message slots
-  assistantMessageComponent?: Type<any>;
-  assistantMessageTemplate?: TemplateRef<any>;
-  assistantMessageClass?: string;
-  
-  // User message slots
-  userMessageComponent?: Type<any>;
-  userMessageTemplate?: TemplateRef<any>;
-  userMessageClass?: string;
-  
-  // Cursor slots
-  cursorComponent?: Type<any>;
-  cursorTemplate?: TemplateRef<any>;
-  cursorClass?: string;
-}
-
-// Re-export for convenience
-export type { Message };

package/src/components/chat/copilot-chat-textarea.component.ts

@@ -1,220 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ElementRef,
-  AfterViewInit,
-  OnChanges,
-  SimpleChanges,
-  signal,
-  computed,
-  effect,
-  inject,
-  ChangeDetectionStrategy,
-  ViewEncapsulation
-} from '@angular/core';
-import { CopilotChatConfigurationService } from '../../core/chat-configuration/chat-configuration.service';
-import { cn } from '../../lib/utils';
-
-@Component({
-  selector: 'textarea[copilotChatTextarea]',
-  standalone: true,
-  imports: [],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    '[value]': 'value()',
-    '[placeholder]': 'placeholder()',
-    '[disabled]': 'disabled()',
-    '[class]': 'computedClass()',
-    '[style.max-height.px]': 'maxHeight()',
-    '[style.overflow]': "'auto'",
-    '[style.resize]': "'none'",
-    '(input)': 'onInput($event)',
-    '(keydown)': 'onKeyDown($event)',
-    '[attr.rows]': '1'
-  },
-  template: '',
-  styles: []
-})
-export class CopilotChatTextareaComponent implements AfterViewInit, OnChanges {
-  private elementRef = inject(ElementRef<HTMLTextAreaElement>);
-  get textareaRef() { return this.elementRef; }
-  
-  @Input() set inputValue(val: string | undefined) {
-    this.value.set(val || '');
-  }
-  @Input() set inputPlaceholder(val: string | undefined) {
-    this.customPlaceholder.set(val);
-  }
-  @Input() set inputMaxRows(val: number | undefined) {
-    this.maxRows.set(val || 5);
-  }
-  @Input() set inputAutoFocus(val: boolean | undefined) {
-    this.autoFocus.set(val ?? true);
-  }
-  @Input() set inputDisabled(val: boolean | undefined) {
-    this.disabled.set(val || false);
-  }
-  @Input() set inputClass(val: string | undefined) {
-    this.customClass.set(val);
-  }
-  
-  @Output() valueChange = new EventEmitter<string>();
-  @Output() keyDown = new EventEmitter<KeyboardEvent>();
-  
-  private chatConfig = inject(CopilotChatConfigurationService);
-  
-  // Signals for reactive state
-  value = signal<string>('');
-  customPlaceholder = signal<string | undefined>(undefined);
-  maxRows = signal<number>(5);
-  autoFocus = signal<boolean>(true);
-  disabled = signal<boolean>(false);
-  customClass = signal<string | undefined>(undefined);
-  maxHeight = signal<number>(0);
-  
-  // Computed values
-  placeholder = computed(() => {
-    return this.customPlaceholder() || this.chatConfig.labels().chatInputPlaceholder;
-  });
-  
-  computedClass = computed(() => {
-    const baseClasses = cn(
-      // Layout and sizing
-      'w-full p-5 pb-0',
-      // Behavior
-      'outline-none resize-none',
-      // Background
-      'bg-transparent',
-      // Typography
-      'antialiased font-regular leading-relaxed text-[16px]',
-      // Placeholder styles
-      'placeholder:text-[#00000077] dark:placeholder:text-[#fffc]'
-    );
-    return cn(baseClasses, this.customClass());
-  });
-  
-  constructor() {
-    // Effect to sync value with chat configuration if available
-    effect(() => {
-      const configValue = this.chatConfig.inputValue();
-      if (configValue !== undefined && !this.customPlaceholder()) {
-        this.value.set(configValue);
-      }
-    });
-  }
-  
-  ngAfterViewInit(): void {
-    this.calculateMaxHeight();
-    this.adjustHeight();
-    
-    if (this.autoFocus()) {
-      setTimeout(() => {
-        this.elementRef.nativeElement.focus();
-      });
-    }
-  }
-  
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['inputMaxRows']) {
-      this.calculateMaxHeight();
-    }
-  }
-  
-  onInput(event: Event): void {
-    const textarea = event.target as HTMLTextAreaElement;
-    const newValue = textarea.value;
-    
-    this.value.set(newValue);
-    this.valueChange.emit(newValue);
-    
-    // Update chat configuration if available
-    if (this.chatConfig) {
-      this.chatConfig.setInputValue(newValue);
-    }
-    
-    this.adjustHeight();
-  }
-  
-  onKeyDown(event: KeyboardEvent): void {
-    // Check for Enter key without Shift
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault();
-      this.keyDown.emit(event);
-    } else {
-      this.keyDown.emit(event);
-    }
-  }
-  
-  private calculateMaxHeight(): void {
-    const textarea = this.elementRef.nativeElement;
-    const maxRowsValue = this.maxRows();
-    
-    // Save current value
-    const currentValue = textarea.value;
-    
-    // Clear content to measure single row height
-    textarea.value = '';
-    textarea.style.height = 'auto';
-    
-    // Get computed styles to account for padding
-    const computedStyle = window.getComputedStyle(textarea);
-    const paddingTop = parseFloat(computedStyle.paddingTop);
-    const paddingBottom = parseFloat(computedStyle.paddingBottom);
-    
-    // Calculate actual content height (without padding)
-    const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;
-    
-    // Calculate max height: content height for maxRows + padding
-    const calculatedMaxHeight = contentHeight * maxRowsValue + paddingTop + paddingBottom;
-    this.maxHeight.set(calculatedMaxHeight);
-    
-    // Restore original value
-    textarea.value = currentValue;
-    
-    // Adjust height after calculating maxHeight
-    if (currentValue) {
-      this.adjustHeight();
-    }
-  }
-  
-  private adjustHeight(): void {
-    const textarea = this.elementRef.nativeElement;
-    const maxHeightValue = this.maxHeight();
-    
-    if (maxHeightValue > 0) {
-      textarea.style.height = 'auto';
-      textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeightValue)}px`;
-    }
-  }
-  
-  /**
-   * Public method to focus the textarea
-   */
-  focus(): void {
-    this.elementRef.nativeElement.focus();
-  }
-  
-  /**
-   * Public method to get current value
-   */
-  getValue(): string {
-    return this.value();
-  }
-  
-  /**
-   * Public method to set value programmatically
-   */
-  setValue(value: string): void {
-    this.value.set(value);
-    this.valueChange.emit(value);
-    
-    if (this.chatConfig) {
-      this.chatConfig.setInputValue(value);
-    }
-    
-    setTimeout(() => this.adjustHeight());
-  }
-}