@copilotkitnext/angular 0.0.1

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

@@ -0,0 +1,170 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,247 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,14 @@
+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);
+}