@copilotkitnext/angular 0.0.1

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

@@ -0,0 +1,512 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ViewChild,
+  TemplateRef,
+  signal,
+  computed,
+  effect,
+  inject,
+  ChangeDetectionStrategy,
+  AfterViewInit,
+  OnDestroy,
+  Type,
+  ViewEncapsulation,
+  ContentChild
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CopilotSlotComponent } from '../../lib/slots/copilot-slot.component';
+import { CopilotChatConfigurationService } from '../../core/chat-configuration/chat-configuration.service';
+import { LucideAngularModule, ArrowUp } from 'lucide-angular';
+import { CopilotChatTextareaComponent } from './copilot-chat-textarea.component';
+import { CopilotChatAudioRecorderComponent } from './copilot-chat-audio-recorder.component';
+import {
+  CopilotChatSendButtonComponent,
+  CopilotChatStartTranscribeButtonComponent,
+  CopilotChatCancelTranscribeButtonComponent,
+  CopilotChatFinishTranscribeButtonComponent,
+  CopilotChatAddFileButtonComponent
+} from './copilot-chat-buttons.component';
+import { CopilotChatToolbarComponent } from './copilot-chat-toolbar.component';
+import { CopilotChatToolsMenuComponent } from './copilot-chat-tools-menu.component';
+import type {
+  CopilotChatInputMode,
+  ToolsMenuItem
+} from './copilot-chat-input.types';
+import { cn } from '../../lib/utils';
+
+/**
+ * Context provided to slot templates
+ */
+export interface SendButtonContext {
+  send: () => void;
+  disabled: boolean;
+  value: string;
+}
+
+export interface ToolbarContext {
+  mode: CopilotChatInputMode;
+  value: string;
+}
+
+@Component({
+  selector: 'copilot-chat-input',
+  standalone: true,
+  imports: [
+    CommonModule,
+    CopilotSlotComponent,
+    LucideAngularModule,
+    CopilotChatTextareaComponent,
+    CopilotChatAudioRecorderComponent,
+    CopilotChatSendButtonComponent,
+    CopilotChatStartTranscribeButtonComponent,
+    CopilotChatCancelTranscribeButtonComponent,
+    CopilotChatFinishTranscribeButtonComponent,
+    CopilotChatAddFileButtonComponent,
+    CopilotChatToolbarComponent,
+    CopilotChatToolsMenuComponent
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <div [class]="computedClass()">
+      <!-- Main input area: either textarea or audio recorder -->
+      @if (computedMode() === 'transcribe') {
+        @if (audioRecorderTemplate || audioRecorderComponent) {
+          <copilot-slot 
+            [slot]="audioRecorderTemplate || audioRecorderComponent"
+            [context]="audioRecorderContext()"
+            [defaultComponent]="defaultAudioRecorder"
+            >
+          </copilot-slot>
+        } @else {
+          <copilot-chat-audio-recorder
+            [inputShowControls]="true">
+          </copilot-chat-audio-recorder>
+        }
+      } @else {
+        @if (textAreaTemplate || textAreaComponent) {
+          <copilot-slot
+            [slot]="textAreaTemplate || textAreaComponent"
+            [context]="textAreaContext()"
+            >
+          </copilot-slot>
+        } @else {
+          <textarea copilotChatTextarea
+            [inputValue]="computedValue()"
+            [inputAutoFocus]="computedAutoFocus()"
+            [inputDisabled]="computedMode() === 'processing'"
+            [inputClass]="textAreaClass"
+            [inputMaxRows]="textAreaMaxRows"
+            [inputPlaceholder]="textAreaPlaceholder"
+            (keyDown)="handleKeyDown($event)"
+            (valueChange)="handleValueChange($event)"></textarea>
+        }
+      }
+      
+      <!-- Toolbar -->
+      @if (toolbarTemplate || toolbarComponent) {
+        <copilot-slot
+          [slot]="toolbarTemplate || toolbarComponent"
+          [context]="toolbarContext()"
+          [defaultComponent]="CopilotChatToolbarComponent"
+          >
+        </copilot-slot>
+      } @else {
+        <div copilotChatToolbar>
+          <div class="flex items-center">
+            @if (addFile.observed) {
+              @if (addFileButtonTemplate || addFileButtonComponent) {
+                <copilot-slot
+                  [slot]="addFileButtonTemplate || addFileButtonComponent"
+                  [context]="{ inputDisabled: computedMode() === 'transcribe' }"
+                  [outputs]="addFileButtonOutputs"
+                  [defaultComponent]="CopilotChatAddFileButtonComponent"
+                  >
+                </copilot-slot>
+              } @else {
+                <copilot-chat-add-file-button
+                  [disabled]="computedMode() === 'transcribe'"
+                  (clicked)="handleAddFile()">
+                </copilot-chat-add-file-button>
+              }
+            }
+            @if (computedToolsMenu().length > 0) {
+              @if (toolsButtonTemplate || toolsButtonComponent) {
+                <copilot-slot
+                  [slot]="toolsButtonTemplate || toolsButtonComponent"
+                  [context]="toolsContext()"
+                  [defaultComponent]="CopilotChatToolsMenuComponent"
+                  >
+                </copilot-slot>
+              } @else {
+                <copilot-chat-tools-menu
+                  [inputToolsMenu]="computedToolsMenu()"
+                  [inputDisabled]="computedMode() === 'transcribe'">
+                </copilot-chat-tools-menu>
+              }
+            }
+            @if (additionalToolbarItems) {
+              <ng-container *ngTemplateOutlet="additionalToolbarItems"></ng-container>
+            }
+          </div>
+          <div class="flex items-center">
+            @if (computedMode() === 'transcribe') {
+              @if (cancelTranscribe.observed) {
+                @if (cancelTranscribeButtonTemplate || cancelTranscribeButtonComponent) {
+                  <copilot-slot
+                    [slot]="cancelTranscribeButtonTemplate || cancelTranscribeButtonComponent"
+                    [context]="{}"
+                    [outputs]="cancelTranscribeButtonOutputs"
+                    [defaultComponent]="CopilotChatCancelTranscribeButtonComponent"
+                    >
+                  </copilot-slot>
+                } @else {
+                  <copilot-chat-cancel-transcribe-button
+                    (clicked)="handleCancelTranscribe()">
+                  </copilot-chat-cancel-transcribe-button>
+                }
+              }
+              @if (finishTranscribe.observed) {
+                @if (finishTranscribeButtonTemplate || finishTranscribeButtonComponent) {
+                  <copilot-slot
+                    [slot]="finishTranscribeButtonTemplate || finishTranscribeButtonComponent"
+                    [context]="{}"
+                    [outputs]="finishTranscribeButtonOutputs"
+                    [defaultComponent]="CopilotChatFinishTranscribeButtonComponent"
+                    >
+                  </copilot-slot>
+                } @else {
+                  <copilot-chat-finish-transcribe-button
+                    (clicked)="handleFinishTranscribe()">
+                  </copilot-chat-finish-transcribe-button>
+                }
+              }
+            } @else {
+              @if (startTranscribe.observed) {
+                @if (startTranscribeButtonTemplate || startTranscribeButtonComponent) {
+                  <copilot-slot
+                    [slot]="startTranscribeButtonTemplate || startTranscribeButtonComponent"
+                    [context]="{}"
+                    [outputs]="startTranscribeButtonOutputs"
+                    [defaultComponent]="CopilotChatStartTranscribeButtonComponent"
+                    >
+                  </copilot-slot>
+                } @else {
+                  <copilot-chat-start-transcribe-button
+                    (clicked)="handleStartTranscribe()">
+                  </copilot-chat-start-transcribe-button>
+                }
+              }
+              <!-- Send button with slot -->
+              @if (sendButtonTemplate || sendButtonComponent) {
+                <copilot-slot
+                  [slot]="sendButtonTemplate || sendButtonComponent"
+                  [context]="sendButtonContext()"
+                  [outputs]="sendButtonOutputs"
+                  >
+                </copilot-slot>
+              } @else {
+                <div class="mr-[10px]">
+                  <button 
+                    type="button"
+                    [class]="sendButtonClass || defaultButtonClass"
+                    [disabled]="!computedValue().trim() || computedMode() === 'processing'"
+                    (click)="send()">
+                    <lucide-angular [img]="ArrowUpIcon" [size]="18"></lucide-angular>
+                  </button>
+                </div>
+              }
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    :host {
+      display: block;
+      width: 100%;
+    }
+    .shadow-\\[0_4px_4px_0_\\#0000000a\\2c_0_0_1px_0_\\#0000009e\\] {
+      box-shadow: 0 4px 4px 0 #0000000a, 0 0 1px 0 #0000009e !important;
+    }
+  `]
+})
+export class CopilotChatInputComponent implements AfterViewInit, OnDestroy {
+  @ViewChild(CopilotChatTextareaComponent, { read: CopilotChatTextareaComponent }) 
+  textAreaRef?: CopilotChatTextareaComponent;
+  
+  @ViewChild(CopilotChatAudioRecorderComponent) 
+  audioRecorderRef?: CopilotChatAudioRecorderComponent;
+  
+  // Capture templates from content projection
+  @ContentChild('sendButton', { read: TemplateRef }) sendButtonTemplate?: TemplateRef<SendButtonContext>;
+  @ContentChild('toolbar', { read: TemplateRef }) toolbarTemplate?: TemplateRef<ToolbarContext>;
+  @ContentChild('textArea', { read: TemplateRef }) textAreaTemplate?: TemplateRef<any>;
+  @ContentChild('audioRecorder', { read: TemplateRef }) audioRecorderTemplate?: TemplateRef<any>;
+  @ContentChild('startTranscribeButton', { read: TemplateRef }) startTranscribeButtonTemplate?: TemplateRef<any>;
+  @ContentChild('cancelTranscribeButton', { read: TemplateRef }) cancelTranscribeButtonTemplate?: TemplateRef<any>;
+  @ContentChild('finishTranscribeButton', { read: TemplateRef }) finishTranscribeButtonTemplate?: TemplateRef<any>;
+  @ContentChild('addFileButton', { read: TemplateRef }) addFileButtonTemplate?: TemplateRef<any>;
+  @ContentChild('toolsButton', { read: TemplateRef }) toolsButtonTemplate?: TemplateRef<any>;
+  
+  // Class inputs for styling default components
+  @Input() sendButtonClass?: string;
+  @Input() toolbarClass?: string;
+  @Input() textAreaClass?: string;
+  @Input() textAreaMaxRows?: number;
+  @Input() textAreaPlaceholder?: string;
+  @Input() audioRecorderClass?: string;
+  @Input() startTranscribeButtonClass?: string;
+  @Input() cancelTranscribeButtonClass?: string;
+  @Input() finishTranscribeButtonClass?: string;
+  @Input() addFileButtonClass?: string;
+  @Input() toolsButtonClass?: string;
+  
+  // Component inputs for overrides
+  @Input() sendButtonComponent?: Type<any>;
+  @Input() toolbarComponent?: Type<any>;
+  @Input() textAreaComponent?: Type<any>;
+  @Input() audioRecorderComponent?: Type<any>;
+  @Input() startTranscribeButtonComponent?: Type<any>;
+  @Input() cancelTranscribeButtonComponent?: Type<any>;
+  @Input() finishTranscribeButtonComponent?: Type<any>;
+  @Input() addFileButtonComponent?: Type<any>;
+  @Input() toolsButtonComponent?: Type<any>;
+  
+  // Regular inputs
+  @Input() set mode(val: CopilotChatInputMode | undefined) {
+    this.modeSignal.set(val || 'input');
+  }
+  @Input() set toolsMenu(val: (ToolsMenuItem | '-')[] | undefined) {
+    this.toolsMenuSignal.set(val || []);
+  }
+  @Input() set autoFocus(val: boolean | undefined) {
+    this.autoFocusSignal.set(val ?? true);
+  }
+  @Input() set value(val: string | undefined) {
+    this.valueSignal.set(val || '');
+  }
+  @Input() set inputClass(val: string | undefined) {
+    this.customClass.set(val);
+  }
+  // Note: Prefer host `class` for styling this component;
+  // keep only `inputClass` to style the internal wrapper if needed.
+  @Input() additionalToolbarItems?: TemplateRef<any>;
+  
+  // Output events
+  @Output() submitMessage = new EventEmitter<string>();
+  @Output() startTranscribe = new EventEmitter<void>();
+  @Output() cancelTranscribe = new EventEmitter<void>();
+  @Output() finishTranscribe = new EventEmitter<void>();
+  @Output() addFile = new EventEmitter<void>();
+  @Output() valueChange = new EventEmitter<string>();
+  
+  // Icons and default classes
+  readonly ArrowUpIcon = ArrowUp;
+  readonly defaultButtonClass = cn(
+    // Base button styles
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium',
+    'transition-all disabled:pointer-events-none disabled:opacity-50',
+    'shrink-0 outline-none',
+    'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+    // chatInputToolbarPrimary variant
+    'cursor-pointer',
+    'bg-black text-white',
+    'dark:bg-white dark:text-black dark:focus-visible:outline-white',
+    'rounded-full h-9 w-9',
+    'transition-colors',
+    'focus:outline-none',
+    'hover:opacity-70 disabled:hover:opacity-100',
+    'disabled:cursor-not-allowed disabled:bg-[#00000014] disabled:text-[rgb(13,13,13)]',
+    'dark:disabled:bg-[#454545] dark:disabled:text-white'
+  );
+  
+  // Services
+  private chatConfig = inject(CopilotChatConfigurationService, { optional: true });
+  
+  // Signals
+  modeSignal = signal<CopilotChatInputMode>('input');
+  toolsMenuSignal = signal<(ToolsMenuItem | '-')[]>([]);
+  autoFocusSignal = signal<boolean>(true);
+  valueSignal = signal<string>('');
+  customClass = signal<string | undefined>(undefined);
+  
+  // Default components
+  // Note: CopilotChatTextareaComponent uses attribute selector but is a component
+  defaultAudioRecorder = CopilotChatAudioRecorderComponent;
+  defaultSendButton: any = null; // Will be set to avoid circular dependency
+  CopilotChatToolbarComponent = CopilotChatToolbarComponent;
+  CopilotChatAddFileButtonComponent = CopilotChatAddFileButtonComponent;
+  CopilotChatToolsMenuComponent = CopilotChatToolsMenuComponent;
+  CopilotChatCancelTranscribeButtonComponent = CopilotChatCancelTranscribeButtonComponent;
+  CopilotChatFinishTranscribeButtonComponent = CopilotChatFinishTranscribeButtonComponent;
+  CopilotChatStartTranscribeButtonComponent = CopilotChatStartTranscribeButtonComponent;
+  
+  // Computed values
+  computedMode = computed(() => this.modeSignal());
+  computedToolsMenu = computed(() => this.toolsMenuSignal());
+  computedAutoFocus = computed(() => this.autoFocusSignal());
+  computedValue = computed(() => {
+    const customValue = this.valueSignal();
+    const configValue = this.chatConfig?.inputValue();
+    return customValue || configValue || '';
+  });
+  
+  computedClass = computed(() => {
+    const baseClasses = cn(
+      // Layout
+      'flex w-full flex-col items-center justify-center',
+      // Interaction
+      'cursor-text',
+      // Overflow and clipping
+      'overflow-visible bg-clip-padding contain-inline-size',
+      // Background
+      'bg-white dark:bg-[#303030]',
+      // Visual effects
+      'shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] rounded-[28px]'
+    );
+    return cn(baseClasses, this.customClass());
+  });
+  
+  // Context for slots (reactive via signals)
+  sendButtonContext = computed<SendButtonContext>(() => ({
+    send: () => this.send(),
+    disabled: !this.computedValue().trim() || this.computedMode() === 'processing',
+    value: this.computedValue()
+  }));
+  
+  toolbarContext = computed<ToolbarContext>(() => ({
+    mode: this.computedMode(),
+    value: this.computedValue()
+  }));
+  
+  textAreaContext = computed(() => ({
+    value: this.computedValue(),
+    autoFocus: this.computedAutoFocus(),
+    disabled: this.computedMode() === 'processing',
+    maxRows: this.textAreaMaxRows,
+    placeholder: this.textAreaPlaceholder,
+    inputClass: this.textAreaClass,
+    onKeyDown: (event: KeyboardEvent) => this.handleKeyDown(event),
+    onChange: (value: string) => this.handleValueChange(value)
+  }));
+  
+  audioRecorderContext = computed(() => ({
+    inputShowControls: true
+  }));
+  
+  // Button contexts removed - now using outputs map for click handlers
+  
+  toolsContext = computed(() => ({
+    inputToolsMenu: this.computedToolsMenu(),
+    inputDisabled: this.computedMode() === 'transcribe'
+  }));
+  
+  constructor() {
+    // Effect to handle mode changes
+    effect(() => {
+      const currentMode = this.computedMode();
+      if (currentMode === 'transcribe' && this.audioRecorderRef) {
+        this.audioRecorderRef.start().catch(console.error);
+      } else if (this.audioRecorderRef?.getState() === 'recording') {
+        this.audioRecorderRef.stop().catch(console.error);
+      }
+    });
+    
+    // Sync with chat configuration
+    effect(() => {
+      const configValue = this.chatConfig?.inputValue();
+      if (configValue !== undefined && !this.valueSignal()) {
+        this.valueSignal.set(configValue);
+      }
+    });
+  }
+  
+  // Output maps for slots
+  addFileButtonOutputs = { clicked: () => this.handleAddFile() };
+  cancelTranscribeButtonOutputs = { clicked: () => this.handleCancelTranscribe() };
+  finishTranscribeButtonOutputs = { clicked: () => this.handleFinishTranscribe() };
+  startTranscribeButtonOutputs = { clicked: () => this.handleStartTranscribe() };
+  // Support both `clicked` (idiomatic in our slots) and `click` (legacy)
+  sendButtonOutputs = { clicked: () => this.send(), click: () => this.send() };
+  
+  ngAfterViewInit(): void {
+    // Auto-focus if needed
+    if (this.computedAutoFocus() && this.textAreaRef) {
+      setTimeout(() => {
+        this.textAreaRef?.focus();
+      });
+    }
+  }
+  
+  ngOnDestroy(): void {
+    // Clean up any resources
+    if (this.audioRecorderRef?.getState() === 'recording') {
+      this.audioRecorderRef.stop().catch(console.error);
+    }
+  }
+  
+  handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      this.send();
+    }
+  }
+  
+  handleValueChange(value: string): void {
+    this.valueSignal.set(value);
+    this.valueChange.emit(value);
+    
+    if (this.chatConfig) {
+      this.chatConfig.setInputValue(value);
+    }
+  }
+  
+  send(): void {
+    const trimmed = this.computedValue().trim();
+    if (trimmed) {
+      this.submitMessage.emit(trimmed);
+      
+      // Use chat config handler if available
+      if (this.chatConfig) {
+        this.chatConfig.submitInput(trimmed);
+      }
+      
+      // Clear input
+      this.valueSignal.set('');
+      if (this.textAreaRef) {
+        this.textAreaRef.setValue('');
+      }
+      
+      // Refocus input
+      if (this.textAreaRef) {
+        setTimeout(() => {
+          this.textAreaRef?.focus();
+        });
+      }
+    }
+  }
+  
+  handleStartTranscribe(): void {
+    this.startTranscribe.emit();
+    this.modeSignal.set('transcribe');
+  }
+  
+  handleCancelTranscribe(): void {
+    this.cancelTranscribe.emit();
+    this.modeSignal.set('input');
+  }
+  
+  handleFinishTranscribe(): void {
+    this.finishTranscribe.emit();
+    this.modeSignal.set('input');
+  }
+  
+  handleAddFile(): void {
+    this.addFile.emit();
+  }
+}

package/src/components/chat/copilot-chat-input.types.ts

@@ -0,0 +1,148 @@
+import type { Type, TemplateRef } from '@angular/core';
+
+/**
+ * Mode of the chat input component
+ */
+export type CopilotChatInputMode = 'input' | 'transcribe' | 'processing';
+
+/**
+ * Represents a menu item in the tools menu
+ */
+export type ToolsMenuItem = {
+  label: string;
+} & (
+  | {
+      action: () => void;
+      items?: never;
+    }
+  | {
+      action?: never;
+      items: (ToolsMenuItem | '-')[];
+    }
+);
+
+/**
+ * Audio recorder state
+ */
+export type AudioRecorderState = 'idle' | 'recording' | 'processing';
+
+/**
+ * Error class for audio recorder failures
+ */
+export class AudioRecorderError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'AudioRecorderError';
+  }
+}
+
+/**
+ * Props for textarea component
+ */
+export interface CopilotChatTextareaProps {
+  value?: string;
+  placeholder?: string;
+  maxRows?: number;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+  onKeyDown?: (event: KeyboardEvent) => void;
+  inputClass?: string;
+  style?: any;
+  rows?: number;
+  cols?: number;
+  readonly?: boolean;
+  spellcheck?: boolean;
+  wrap?: 'hard' | 'soft' | 'off';
+}
+
+/**
+ * Props for button components
+ */
+export interface CopilotChatButtonProps {
+  disabled?: boolean;
+  onClick?: () => void;
+  inputClass?: string;
+  style?: any;
+  type?: 'button' | 'submit' | 'reset';
+  ariaLabel?: string;
+  ariaPressed?: boolean;
+  ariaExpanded?: boolean;
+  title?: string;
+}
+
+/**
+ * Props for toolbar button with tooltip
+ */
+export interface CopilotChatToolbarButtonProps extends CopilotChatButtonProps {
+  icon?: TemplateRef<any>;
+  tooltip?: string;
+  variant?: 'primary' | 'secondary';
+}
+
+/**
+ * Props for tools menu button
+ */
+export interface CopilotChatToolsButtonProps extends CopilotChatButtonProps {
+  toolsMenu?: (ToolsMenuItem | '-')[];
+}
+
+/**
+ * Props for audio recorder
+ */
+export interface CopilotChatAudioRecorderProps {
+  inputClass?: string;
+  style?: any;
+  onStateChange?: (state: AudioRecorderState) => void;
+  showControls?: boolean;
+  maxDuration?: number;
+}
+
+/**
+ * Props for toolbar
+ */
+export interface CopilotChatToolbarProps {
+  inputClass?: string;
+  style?: any;
+  position?: 'top' | 'bottom';
+  alignment?: 'left' | 'center' | 'right' | 'space-between';
+}
+
+/**
+ * Slot configuration for chat input
+ */
+export interface CopilotChatInputSlots {
+  textArea?: Type<any> | TemplateRef<any>;
+  sendButton?: Type<any> | TemplateRef<any>;
+  startTranscribeButton?: Type<any> | TemplateRef<any>;
+  cancelTranscribeButton?: Type<any> | TemplateRef<any>;
+  finishTranscribeButton?: Type<any> | TemplateRef<any>;
+  addFileButton?: Type<any> | TemplateRef<any>;
+  toolsButton?: Type<any> | TemplateRef<any>;
+  toolbar?: Type<any> | TemplateRef<any>;
+  audioRecorder?: Type<any> | TemplateRef<any>;
+}
+
+/**
+ * Input configuration for the chat input component
+ */
+export interface CopilotChatInputConfig {
+  mode?: CopilotChatInputMode;
+  toolsMenu?: (ToolsMenuItem | '-')[];
+  autoFocus?: boolean;
+  additionalToolbarItems?: TemplateRef<any>;
+  value?: string;
+  class?: string;
+}
+
+/**
+ * Output events for the chat input component
+ */
+export interface CopilotChatInputOutputs {
+  submitMessage: (value: string) => void;
+  startTranscribe: () => void;
+  cancelTranscribe: () => void;
+  finishTranscribe: () => void;
+  addFile: () => void;
+  changeValue: (value: string) => void;
+}