@copilotkitnext/angular 0.0.1 → 0.0.4

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

@@ -1,170 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  signal,
-  computed,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  ViewEncapsulation,
-  inject
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { LucideAngularModule, Copy, Check, Edit } from 'lucide-angular';
-import { CopilotTooltipDirective } from '../../lib/directives/tooltip.directive';
-import { CopilotChatConfigurationService } from '../../core/chat-configuration/chat-configuration.service';
-import { cn } from '../../lib/utils';
-
-// Base toolbar button component
-@Component({
-  selector: 'button[copilotChatUserMessageToolbarButton]',
-  standalone: true,
-  imports: [CommonModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <ng-content></ng-content>
-  `,
-  host: {
-    '[class]': 'computedClass()',
-    '[attr.disabled]': 'disabled ? true : null',
-    'type': 'button',
-    '[attr.aria-label]': 'title'
-  },
-  hostDirectives: [
-    {
-      directive: CopilotTooltipDirective,
-      inputs: ['copilotTooltip: title', 'tooltipPosition', 'tooltipDelay']
-    }
-  ]
-})
-export class CopilotChatUserMessageToolbarButtonComponent {
-  @Input() title = '';
-  @Input() disabled = false;
-  @Input() set inputClass(value: string | undefined) {
-    this.customClass.set(value);
-  }
-  
-  private customClass = signal<string | undefined>(undefined);
-  
-  computedClass = computed(() => {
-    return cn(
-      // Flex centering
-      'inline-flex items-center justify-center',
-      // Cursor
-      'cursor-pointer',
-      // Background and text
-      'p-0 text-[rgb(93,93,93)] hover:bg-[#E8E8E8]',
-      // Dark mode
-      'dark:text-[rgb(243,243,243)] dark:hover:bg-[#303030]',
-      // Shape and sizing
-      'h-8 w-8 rounded-md',
-      // Interactions
-      'transition-colors',
-      // Hover states
-      'hover:text-[rgb(93,93,93)]',
-      'dark:hover:text-[rgb(243,243,243)]',
-      // Focus states
-      'focus:outline-none focus:ring-2 focus:ring-offset-2',
-      // Disabled state
-      'disabled:opacity-50 disabled:cursor-not-allowed',
-      this.customClass()
-    );
-  });
-}
-
-// Copy button component
-@Component({
-  selector: 'copilot-chat-user-message-copy-button',
-  standalone: true,
-  imports: [CommonModule, LucideAngularModule, CopilotChatUserMessageToolbarButtonComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <button 
-      copilotChatUserMessageToolbarButton
-      [title]="title || labels.userMessageToolbarCopyMessageLabel"
-      [disabled]="disabled"
-      [inputClass]="inputClass"
-      (click)="handleCopy()">
-      @if (copied()) {
-        <lucide-angular [img]="CheckIcon" [size]="18"></lucide-angular>
-      } @else {
-        <lucide-angular [img]="CopyIcon" [size]="18"></lucide-angular>
-      }
-    </button>
-  `
-})
-export class CopilotChatUserMessageCopyButtonComponent {
-  @Input() title?: string;
-  @Input() disabled = false;
-  @Input() inputClass?: string;
-  @Input() content?: string;
-  @Output() clicked = new EventEmitter<void>();
-  
-  readonly CopyIcon = Copy;
-  readonly CheckIcon = Check;
-  
-  copied = signal(false);
-  private chatConfig = inject(CopilotChatConfigurationService);
-  
-  get labels() {
-    return this.chatConfig.labels();
-  }
-  
-  handleCopy(): void {
-    if (!this.content) return;
-    
-    // Set copied immediately for instant feedback
-    this.copied.set(true);
-    setTimeout(() => this.copied.set(false), 2000);
-    
-    // Copy to clipboard (fire and forget)
-    navigator.clipboard.writeText(this.content).then(
-      () => this.clicked.emit(),
-      (err) => {
-        console.error('Failed to copy message:', err);
-        this.copied.set(false);
-      }
-    );
-  }
-}
-
-// Edit button component
-@Component({
-  selector: 'copilot-chat-user-message-edit-button',
-  standalone: true,
-  imports: [CommonModule, LucideAngularModule, CopilotChatUserMessageToolbarButtonComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <button 
-      copilotChatUserMessageToolbarButton
-      [title]="title || labels.userMessageToolbarEditMessageLabel"
-      [disabled]="disabled"
-      [inputClass]="inputClass"
-      (click)="handleEdit()">
-      <lucide-angular [img]="EditIcon" [size]="18"></lucide-angular>
-    </button>
-  `
-})
-export class CopilotChatUserMessageEditButtonComponent {
-  @Input() title?: string;
-  @Input() disabled = false;
-  @Input() inputClass?: string;
-  @Output() clicked = new EventEmitter<void>();
-  
-  readonly EditIcon = Edit;
-  private chatConfig = inject(CopilotChatConfigurationService);
-  
-  get labels() {
-    return this.chatConfig.labels();
-  }
-  
-  handleEdit(): void {
-    if (!this.disabled) {
-      this.clicked.emit();
-    }
-  }
-}

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

@@ -1,37 +0,0 @@
-import {
-  Component,
-  Input,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-  computed,
-  signal
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { cn } from '../../lib/utils';
-
-@Component({
-  selector: 'copilot-chat-user-message-renderer',
-  standalone: true,
-  imports: [CommonModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    '[class]': 'computedClass()'
-  },
-  template: `{{ content }}`
-})
-export class CopilotChatUserMessageRendererComponent {
-  @Input() content = '';
-  @Input() set inputClass(value: string | undefined) {
-    this.customClass.set(value);
-  }
-  
-  private customClass = signal<string | undefined>(undefined);
-  
-  computedClass = computed(() => {
-    return cn(
-      "prose dark:prose-invert bg-muted relative max-w-[80%] rounded-[18px] px-4 py-1.5 data-[multiline]:py-3 inline-block whitespace-pre-wrap",
-      this.customClass()
-    );
-  });
-}

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

@@ -1,37 +0,0 @@
-import {
-  Component,
-  Input,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-  signal
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { cn } from '../../lib/utils';
-
-@Component({
-  selector: 'div[copilotChatUserMessageToolbar]',
-  standalone: true,
-  imports: [CommonModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <ng-content></ng-content>
-  `,
-  host: {
-    '[class]': 'computedClass()'
-  }
-})
-export class CopilotChatUserMessageToolbarComponent {
-  @Input() inputClass?: string;
-  
-  computedClass = signal<string>('');
-  
-  ngOnInit() {
-    this.computedClass.set(
-      cn(
-        "w-full bg-transparent flex items-center justify-end mt-[4px] invisible group-hover:visible",
-        this.inputClass
-      )
-    );
-  }
-}

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

@@ -1,247 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  TemplateRef,
-  ContentChild,
-  signal,
-  computed,
-  Type,
-  ChangeDetectionStrategy,
-  ViewEncapsulation
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CopilotSlotComponent } from '../../lib/slots/copilot-slot.component';
-import {
-  type UserMessage,
-  type CopilotChatUserMessageOnEditMessageProps,
-  type CopilotChatUserMessageOnSwitchToBranchProps,
-  type MessageRendererContext,
-  type CopyButtonContext,
-  type EditButtonContext,
-  type BranchNavigationContext,
-  type ToolbarContext
-} from './copilot-chat-user-message.types';
-import { CopilotChatUserMessageRendererComponent } from './copilot-chat-user-message-renderer.component';
-import {
-  CopilotChatUserMessageCopyButtonComponent,
-  CopilotChatUserMessageEditButtonComponent
-} from './copilot-chat-user-message-buttons.component';
-import { CopilotChatUserMessageToolbarComponent } from './copilot-chat-user-message-toolbar.component';
-import { CopilotChatUserMessageBranchNavigationComponent } from './copilot-chat-user-message-branch-navigation.component';
-import { cn } from '../../lib/utils';
-
-@Component({
-  selector: 'copilot-chat-user-message',
-  standalone: true,
-  imports: [
-    CommonModule,
-    CopilotSlotComponent,
-    CopilotChatUserMessageRendererComponent,
-    CopilotChatUserMessageCopyButtonComponent,
-    CopilotChatUserMessageEditButtonComponent,
-    CopilotChatUserMessageToolbarComponent,
-    CopilotChatUserMessageBranchNavigationComponent
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <div 
-      [class]="computedClass()"
-      [attr.data-message-id]="message.id">
-      
-      <!-- Message Renderer -->
-      @if (messageRendererTemplate || messageRendererComponent) {
-        <copilot-slot
-          [slot]="messageRendererTemplate || messageRendererComponent"
-          [context]="messageRendererContext()"
-          [defaultComponent]="CopilotChatUserMessageRendererComponent"
-          >
-        </copilot-slot>
-      } @else {
-        <copilot-chat-user-message-renderer
-          [content]="message.content || ''"
-          [inputClass]="messageRendererClass">
-        </copilot-chat-user-message-renderer>
-      }
-      
-      <!-- Toolbar -->
-      @if (toolbarTemplate || toolbarComponent) {
-        <copilot-slot
-          [slot]="toolbarTemplate || toolbarComponent"
-          [context]="toolbarContext()"
-          [defaultComponent]="CopilotChatUserMessageToolbarComponent"
-          >
-        </copilot-slot>
-      } @else {
-        <div copilotChatUserMessageToolbar [inputClass]="toolbarClass">
-          <div class="flex items-center gap-1 justify-end">
-            <!-- Additional toolbar items -->
-            @if (additionalToolbarItems) {
-              <ng-container *ngTemplateOutlet="additionalToolbarItems"></ng-container>
-            }
-            
-            <!-- Copy button -->
-            @if (copyButtonTemplate || copyButtonComponent) {
-              <copilot-slot
-                [slot]="copyButtonTemplate || copyButtonComponent"
-                [context]="{ content: message?.content || '' }"
-                [outputs]="copyButtonOutputs"
-                [defaultComponent]="CopilotChatUserMessageCopyButtonComponent"
-                >
-              </copilot-slot>
-            } @else {
-              <copilot-chat-user-message-copy-button
-                [content]="message.content"
-                [inputClass]="copyButtonClass"
-                (clicked)="handleCopy()">
-              </copilot-chat-user-message-copy-button>
-            }
-            
-            <!-- Edit button -->
-            @if (editMessage.observed) {
-              @if (editButtonTemplate || editButtonComponent) {
-                <copilot-slot
-                  [slot]="editButtonTemplate || editButtonComponent"
-                  [context]="{}"
-                  [outputs]="editButtonOutputs"
-                  [defaultComponent]="CopilotChatUserMessageEditButtonComponent"
-                  >
-                </copilot-slot>
-              } @else {
-                <copilot-chat-user-message-edit-button
-                  [inputClass]="editButtonClass"
-                  (clicked)="handleEdit()">
-                </copilot-chat-user-message-edit-button>
-              }
-            }
-            
-            <!-- Branch navigation -->
-            @if (showBranchNavigation()) {
-              @if (branchNavigationTemplate || branchNavigationComponent) {
-                <copilot-slot
-                  [slot]="branchNavigationTemplate || branchNavigationComponent"
-                  [context]="branchNavigationContext()"
-                  [defaultComponent]="CopilotChatUserMessageBranchNavigationComponent"
-                  >
-                </copilot-slot>
-              } @else {
-                <copilot-chat-user-message-branch-navigation
-                  [currentBranch]="branchIndexSignal()"
-                  [numberOfBranches]="numberOfBranchesSignal()"
-                  [message]="message"
-                  [inputClass]="branchNavigationClass"
-                  (switchToBranch)="handleSwitchToBranch($event)">
-                </copilot-chat-user-message-branch-navigation>
-              }
-            }
-          </div>
-        </div>
-      }
-    </div>
-  `,
-  styles: [`
-    :host {
-      display: block;
-      width: 100%;
-    }
-  `]
-})
-export class CopilotChatUserMessageComponent {
-  // Capture templates from content projection
-  @ContentChild('messageRenderer', { read: TemplateRef }) messageRendererTemplate?: TemplateRef<MessageRendererContext>;
-  @ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate?: TemplateRef<ToolbarContext>;
-  @ContentChild('copyButton', { read: TemplateRef }) copyButtonTemplate?: TemplateRef<CopyButtonContext>;
-  @ContentChild('editButton', { read: TemplateRef }) editButtonTemplate?: TemplateRef<EditButtonContext>;
-  @ContentChild('branchNavigation', { read: TemplateRef }) branchNavigationTemplate?: TemplateRef<BranchNavigationContext>;
-  
-  // Props for tweaking default components
-  @Input() messageRendererClass?: string;
-  @Input() toolbarClass?: string;
-  @Input() copyButtonClass?: string;
-  @Input() editButtonClass?: string;
-  @Input() branchNavigationClass?: string;
-  
-  // Component inputs for overrides
-  @Input() messageRendererComponent?: Type<any>;
-  @Input() toolbarComponent?: Type<any>;
-  @Input() copyButtonComponent?: Type<any>;
-  @Input() editButtonComponent?: Type<any>;
-  @Input() branchNavigationComponent?: Type<any>;
-  
-  // Regular inputs
-  @Input() message!: UserMessage;
-  @Input() set branchIndex(val: number | undefined) {
-    this.branchIndexSignal.set(val ?? 0);
-  }
-  @Input() set numberOfBranches(val: number | undefined) {
-    this.numberOfBranchesSignal.set(val ?? 1);
-  }
-  @Input() additionalToolbarItems?: TemplateRef<any>;
-  @Input() set inputClass(val: string | undefined) {
-    this.customClass.set(val);
-  }
-  
-  // Output events
-  @Output() editMessage = new EventEmitter<CopilotChatUserMessageOnEditMessageProps>();
-  @Output() switchToBranch = new EventEmitter<CopilotChatUserMessageOnSwitchToBranchProps>();
-  
-  // Signals
-  branchIndexSignal = signal(0);
-  numberOfBranchesSignal = signal(1);
-  customClass = signal<string | undefined>(undefined);
-  
-  // Default components
-  CopilotChatUserMessageRendererComponent = CopilotChatUserMessageRendererComponent;
-  CopilotChatUserMessageToolbarComponent = CopilotChatUserMessageToolbarComponent;
-  CopilotChatUserMessageCopyButtonComponent = CopilotChatUserMessageCopyButtonComponent;
-  CopilotChatUserMessageEditButtonComponent = CopilotChatUserMessageEditButtonComponent;
-  CopilotChatUserMessageBranchNavigationComponent = CopilotChatUserMessageBranchNavigationComponent;
-  
-  // Computed values
-  showBranchNavigation = computed(() => {
-    const branches = this.numberOfBranchesSignal();
-    return branches > 1 && this.switchToBranch.observed;
-  });
-  
-  computedClass = computed(() => {
-    return cn(
-      "flex flex-col items-end group pt-10",
-      this.customClass()
-    );
-  });
-  
-  // Context for slots (reactive via signals)
-  messageRendererContext = computed<MessageRendererContext>(() => ({
-    content: this.message?.content || ''
-  }));
-  
-  // Output maps for slots
-  copyButtonOutputs = { clicked: () => this.handleCopy() };
-  editButtonOutputs = { clicked: () => this.handleEdit() };
-  
-  branchNavigationContext = computed<BranchNavigationContext>(() => ({
-    currentBranch: this.branchIndexSignal(),
-    numberOfBranches: this.numberOfBranchesSignal(),
-    onSwitchToBranch: (props) => this.handleSwitchToBranch(props),
-    message: this.message
-  }));
-  
-  toolbarContext = computed<ToolbarContext>(() => ({
-    children: null // Will be populated by the toolbar content
-  }));
-  
-  handleCopy(): void {
-    // Copy is handled by the button component itself
-    // This is just for any additional logic if needed
-  }
-  
-  handleEdit(): void {
-    this.editMessage.emit({ message: this.message });
-  }
-  
-  handleSwitchToBranch(props: CopilotChatUserMessageOnSwitchToBranchProps): void {
-    this.switchToBranch.emit(props);
-  }
-}

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

@@ -1,42 +0,0 @@
-export interface UserMessage {
-  id: string;
-  content?: string;
-  role: 'user';
-  timestamp?: Date;
-  [key: string]: any; // Allow additional properties
-}
-
-export interface CopilotChatUserMessageOnEditMessageProps {
-  message: UserMessage;
-}
-
-export interface CopilotChatUserMessageOnSwitchToBranchProps {
-  message: UserMessage;
-  branchIndex: number;
-  numberOfBranches: number;
-}
-
-// Context interfaces for slots
-export interface MessageRendererContext {
-  content: string;
-}
-
-export interface CopyButtonContext {
-  content?: string;
-  copied?: boolean;
-}
-
-export interface EditButtonContext {
-  // Empty context - click handled via outputs map
-}
-
-export interface BranchNavigationContext {
-  currentBranch: number;
-  numberOfBranches: number;
-  onSwitchToBranch?: (props: CopilotChatUserMessageOnSwitchToBranchProps) => void;
-  message: UserMessage;
-}
-
-export interface ToolbarContext {
-  children?: any;
-}

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

@@ -1,51 +0,0 @@
-import {
-  Component,
-  Input,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-  inject,
-} from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { CopilotChatConfigurationService } from "../../core/chat-configuration/chat-configuration.service";
-import { cn } from "../../lib/utils";
-
-/**
- * Disclaimer component for CopilotChatView
- * Shows configurable disclaimer text below the input
- * Integrates with CopilotChatConfigurationService for labels
- */
-@Component({
-  selector: "copilot-chat-view-disclaimer",
-  standalone: true,
-  imports: [CommonModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <div [class]="computedClass">
-      {{ disclaimerText }}
-    </div>
-  `,
-})
-export class CopilotChatViewDisclaimerComponent {
-  @Input() inputClass?: string;
-  @Input() text?: string;
-
-  private configService = inject(CopilotChatConfigurationService);
-
-  // Get disclaimer text from input or configuration
-  get disclaimerText(): string {
-    if (this.text) {
-      return this.text;
-    }
-
-    return this.configService.labels().chatDisclaimerText;
-  }
-
-  // Computed class matching React exactly
-  get computedClass(): string {
-    return cn(
-      "text-center text-xs text-muted-foreground py-3 px-4 max-w-3xl mx-auto",
-      this.inputClass
-    );
-  }
-}

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

@@ -1,47 +0,0 @@
-import {
-  Component,
-  Input,
-  ChangeDetectionStrategy,
-  ViewEncapsulation
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { cn } from '../../lib/utils';
-
-/**
- * Feather component for CopilotChatView
- * Creates a gradient overlay effect between messages and input
- * Matches React implementation exactly with same Tailwind classes
- */
-@Component({
-  selector: 'copilot-chat-view-feather',
-  standalone: true,
-  imports: [CommonModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    <div 
-      [class]="computedClass"
-      [style]="style">
-    </div>
-  `
-})
-export class CopilotChatViewFeatherComponent {
-  @Input() inputClass?: string;
-  @Input() style?: { [key: string]: any };
-  
-  // Computed class matching React exactly
-  get computedClass(): string {
-    return cn(
-      // Positioning
-      'absolute bottom-0 left-0 right-4 h-24 pointer-events-none z-10',
-      // Gradient
-      'bg-gradient-to-t',
-      // Light mode colors
-      'from-white via-white to-transparent',
-      // Dark mode colors
-      'dark:from-[rgb(33,33,33)] dark:via-[rgb(33,33,33)]',
-      // Custom classes
-      this.inputClass
-    );
-  }
-}

package/src/components/chat/copilot-chat-view-handlers.service.ts

@@ -1,14 +0,0 @@
-import { Injectable, signal } from '@angular/core';
-
-@Injectable({ providedIn: 'root' })
-export class CopilotChatViewHandlersService {
-  // Assistant message handler availability
-  hasAssistantThumbsUpHandler = signal(false);
-  hasAssistantThumbsDownHandler = signal(false);
-  hasAssistantReadAloudHandler = signal(false);
-  hasAssistantRegenerateHandler = signal(false);
-
-  // User message handler availability
-  hasUserCopyHandler = signal(false);
-  hasUserEditHandler = signal(false);
-}