@copilotkitnext/angular 0.0.2 → 0.0.4

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

@@ -1,420 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ContentChild,
-  TemplateRef,
-  Type,
-  ViewChild,
-  ElementRef,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  ViewEncapsulation,
-  signal,
-  computed,
-  OnInit,
-  OnChanges,
-  OnDestroy,
-  AfterViewInit,
-  ViewContainerRef,
-  effect
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CopilotSlotComponent } from '../../lib/slots/copilot-slot.component';
-import { CopilotChatMessageViewComponent } from './copilot-chat-message-view.component';
-import { CopilotChatInputComponent } from './copilot-chat-input.component';
-import { CopilotChatViewScrollViewComponent } from './copilot-chat-view-scroll-view.component';
-import { CopilotChatViewScrollToBottomButtonComponent } from './copilot-chat-view-scroll-to-bottom-button.component';
-import { CopilotChatViewFeatherComponent } from './copilot-chat-view-feather.component';
-import { CopilotChatViewInputContainerComponent } from './copilot-chat-view-input-container.component';
-import { CopilotChatViewDisclaimerComponent } from './copilot-chat-view-disclaimer.component';
-import { Message } from '@ag-ui/client';
-import { cn } from '../../lib/utils';
-import { ResizeObserverService } from '../../services/resize-observer.service';
-import { CopilotChatViewHandlersService } from './copilot-chat-view-handlers.service';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-
-/**
- * CopilotChatView component - Angular port of the React component.
- * A complete chat interface with message feed and input components.
- * 
- * @example
- * ```html
- * <copilot-chat-view
- *   [messages]="messages"
- *   [autoScroll]="true"
- *   [messageViewProps]="{ assistantMessage: { onThumbsUp: handleThumbsUp } }">
- * </copilot-chat-view>
- * ```
- */
-@Component({
-  selector: 'copilot-chat-view',
-  standalone: true,
-  imports: [
-    CommonModule,
-    CopilotSlotComponent,
-    CopilotChatMessageViewComponent,
-    CopilotChatInputComponent,
-    CopilotChatViewScrollViewComponent,
-    CopilotChatViewScrollToBottomButtonComponent,
-    CopilotChatViewFeatherComponent,
-    CopilotChatViewInputContainerComponent,
-    CopilotChatViewDisclaimerComponent
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  providers: [ResizeObserverService, CopilotChatViewHandlersService],
-  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 [class]="computedClass()">
-        <!-- ScrollView -->
-        <copilot-chat-view-scroll-view
-          [autoScroll]="autoScrollSignal()"
-          [inputContainerHeight]="inputContainerHeight()"
-          [isResizing]="isResizing()"
-          [messages]="messagesSignal()"
-          [messageView]="messageViewSlot()"
-          [messageViewClass]="messageViewClass"
-          [scrollToBottomButton]="scrollToBottomButtonSlot()"
-          [scrollToBottomButtonClass]="scrollToBottomButtonClass"
-          [showCursor]="showCursorSignal()"
-          (assistantMessageThumbsUp)="assistantMessageThumbsUp.emit($event)"
-          (assistantMessageThumbsDown)="assistantMessageThumbsDown.emit($event)"
-          (assistantMessageReadAloud)="assistantMessageReadAloud.emit($event)"
-          (assistantMessageRegenerate)="assistantMessageRegenerate.emit($event)"
-          (userMessageCopy)="userMessageCopy.emit($event)"
-          (userMessageEdit)="userMessageEdit.emit($event)">
-        </copilot-chat-view-scroll-view>
-
-        <!-- Feather effect -->
-        <copilot-slot
-          [slot]="featherSlot()"
-          [context]="{ inputClass: featherClass }"
-          [defaultComponent]="defaultFeatherComponent">
-        </copilot-slot>
-
-        <!-- Input container -->
-        <copilot-slot
-          #inputContainerSlotRef
-          [slot]="inputContainerSlot()"
-          [context]="inputContainerContext()"
-          [defaultComponent]="defaultInputContainerComponent">
-        </copilot-slot>
-      </div>
-    }
-  `
-})
-export class CopilotChatViewComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
-  // Core inputs matching React props
-  @Input() messages: Message[] = [];
-  @Input() autoScroll: boolean = true;
-  @Input() showCursor: boolean = false;
-  
-  // MessageView slot inputs
-  @Input() messageViewComponent?: Type<any>;
-  @Input() messageViewTemplate?: TemplateRef<any>;
-  @Input() messageViewClass?: string;
-  
-  // ScrollView slot inputs
-  @Input() scrollViewComponent?: Type<any>;
-  @Input() scrollViewTemplate?: TemplateRef<any>;
-  @Input() scrollViewClass?: string;
-  
-  // ScrollToBottomButton slot inputs
-  @Input() scrollToBottomButtonComponent?: Type<any>;
-  @Input() scrollToBottomButtonTemplate?: TemplateRef<any>;
-  @Input() scrollToBottomButtonClass?: string;
-  
-  // Input slot inputs
-  @Input() inputComponent?: Type<any>;
-  @Input() inputTemplate?: TemplateRef<any>;
-  
-  // InputContainer slot inputs
-  @Input() inputContainerComponent?: Type<any>;
-  @Input() inputContainerTemplate?: TemplateRef<any>;
-  @Input() inputContainerClass?: string;
-  
-  // Feather slot inputs
-  @Input() featherComponent?: Type<any>;
-  @Input() featherTemplate?: TemplateRef<any>;
-  @Input() featherClass?: string;
-  
-  // Disclaimer slot inputs
-  @Input() disclaimerComponent?: Type<any>;
-  @Input() disclaimerTemplate?: TemplateRef<any>;
-  @Input() disclaimerClass?: string;
-  @Input() disclaimerText?: string;
-  
-  // Custom layout template (render prop pattern)
-  @ContentChild('customLayout') customLayoutTemplate?: TemplateRef<any>;
-  
-  // Named template slots for deep customization
-  @ContentChild('sendButton') sendButtonTemplate?: TemplateRef<any>;
-  @ContentChild('toolbar') toolbarTemplate?: TemplateRef<any>;
-  @ContentChild('textArea') textAreaTemplate?: TemplateRef<any>;
-  @ContentChild('audioRecorder') audioRecorderTemplate?: TemplateRef<any>;
-  @ContentChild('assistantMessageMarkdownRenderer') assistantMessageMarkdownRendererTemplate?: TemplateRef<any>;
-  @ContentChild('thumbsUpButton') thumbsUpButtonTemplate?: TemplateRef<any>;
-  @ContentChild('thumbsDownButton') thumbsDownButtonTemplate?: TemplateRef<any>;
-  @ContentChild('readAloudButton') readAloudButtonTemplate?: TemplateRef<any>;
-  @ContentChild('regenerateButton') regenerateButtonTemplate?: TemplateRef<any>;
-  
-  // Output events for assistant message actions (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 events for user message actions (if applicable)
-  @Output() userMessageCopy = new EventEmitter<{ message: Message }>();
-  @Output() userMessageEdit = new EventEmitter<{ message: Message }>();
-  
-  // ViewChild references
-  @ViewChild('inputContainerSlotRef', { read: ElementRef }) inputContainerSlotRef?: ElementRef;
-  
-  // Default components for slots
-  protected readonly defaultScrollViewComponent = CopilotChatViewScrollViewComponent;
-  protected readonly defaultScrollToBottomButtonComponent = CopilotChatViewScrollToBottomButtonComponent;
-  protected readonly defaultInputContainerComponent = CopilotChatViewInputContainerComponent;
-  protected readonly defaultFeatherComponent = CopilotChatViewFeatherComponent;
-  protected readonly defaultDisclaimerComponent = CopilotChatViewDisclaimerComponent;
-  
-  // Signals for reactive state
-  protected messagesSignal = signal<Message[]>([]);
-  protected autoScrollSignal = signal(true);
-  protected showCursorSignal = signal(false);
-  protected disclaimerTextSignal = signal<string | undefined>(undefined);
-  protected disclaimerClassSignal = signal<string | undefined>(undefined);
-  protected inputContainerHeight = signal<number>(0);
-  protected isResizing = signal<boolean>(false);
-  protected contentPaddingBottom = computed(() => this.inputContainerHeight() + 32);
-  
-  // Computed signals
-  protected computedClass = computed(() => cn('relative h-full'));
-  
-  // Slot resolution computed signals
-  protected messageViewSlot = computed(() => 
-    this.messageViewTemplate || this.messageViewComponent
-  );
-  
-  protected scrollViewSlot = computed(() => 
-    this.scrollViewTemplate || this.scrollViewComponent
-  );
-  
-  protected scrollToBottomButtonSlot = computed(() => 
-    this.scrollToBottomButtonTemplate || this.scrollToBottomButtonComponent
-  );
-  
-  protected inputSlot = computed(() => 
-    this.inputTemplate || this.inputComponent
-  );
-  
-  protected inputContainerSlot = computed(() => 
-    this.inputContainerTemplate || this.inputContainerComponent
-  );
-  
-  protected featherSlot = computed(() => 
-    this.featherTemplate || this.featherComponent
-  );
-  
-  protected disclaimerSlot = computed(() => 
-    this.disclaimerTemplate || this.disclaimerComponent
-  );
-  
-  // Context objects for slots
-  protected scrollViewContext = computed(() => ({
-    autoScroll: this.autoScrollSignal(),
-    scrollToBottomButton: this.scrollToBottomButtonSlot(),
-    scrollToBottomButtonClass: this.scrollToBottomButtonClass,
-    inputContainerHeight: this.inputContainerHeight(),
-    isResizing: this.isResizing(),
-    messages: this.messagesSignal(),
-    messageView: this.messageViewSlot(),
-    messageViewClass: this.messageViewClass
-  }));
-  
-  // Removed scrollViewPropsComputed - no longer needed
-  
-  protected inputContainerContext = computed(() => ({
-    input: this.inputSlot(),
-    disclaimer: this.disclaimerSlot(),
-    disclaimerText: this.disclaimerTextSignal(),
-    disclaimerClass: this.disclaimerClassSignal(),
-    inputContainerClass: this.inputContainerClass
-  }));
-  
-  // Removed inputContainerPropsComputed - no longer needed
-  
-  // Layout context for custom templates (render prop pattern)
-  protected layoutContext = computed(() => ({
-    messageView: this.messageViewSlot(),
-    input: this.inputSlot(),
-    scrollView: this.scrollViewSlot(),
-    scrollToBottomButton: this.scrollToBottomButtonSlot(),
-    feather: this.featherSlot(),
-    inputContainer: this.inputContainerSlot(),
-    disclaimer: this.disclaimerSlot()
-  }));
-  
-  private destroy$ = new Subject<void>();
-  private resizeTimeoutRef?: number;
-  
-  constructor(
-    private resizeObserverService: ResizeObserverService,
-    private cdr: ChangeDetectorRef,
-    private handlers: CopilotChatViewHandlersService
-  ) {
-    // Set up effect to handle resize state timeout
-    effect(() => {
-      const resizing = this.isResizing();
-      if (resizing && this.resizeTimeoutRef) {
-        clearTimeout(this.resizeTimeoutRef);
-        this.resizeTimeoutRef = undefined;
-      }
-    });
-  }
-  
-  ngOnInit(): void {
-    // Initialize signals with input values
-    this.messagesSignal.set(this.messages);
-    this.autoScrollSignal.set(this.autoScroll);
-    this.showCursorSignal.set(this.showCursor);
-    this.disclaimerTextSignal.set(this.disclaimerText);
-    this.disclaimerClassSignal.set(this.disclaimerClass);
-
-    // Initialize handler availability in the view-scoped service
-    this.handlers.hasAssistantThumbsUpHandler.set(this.assistantMessageThumbsUp.observed);
-    this.handlers.hasAssistantThumbsDownHandler.set(this.assistantMessageThumbsDown.observed);
-    this.handlers.hasAssistantReadAloudHandler.set(this.assistantMessageReadAloud.observed);
-    this.handlers.hasAssistantRegenerateHandler.set(this.assistantMessageRegenerate.observed);
-    this.handlers.hasUserCopyHandler.set(this.userMessageCopy.observed);
-    this.handlers.hasUserEditHandler.set(this.userMessageEdit.observed);
-  }
-  
-  ngOnChanges(): void {
-    // Update signals when inputs change
-    this.messagesSignal.set(this.messages);
-    this.autoScrollSignal.set(this.autoScroll);
-    this.showCursorSignal.set(this.showCursor);
-    this.disclaimerTextSignal.set(this.disclaimerText);
-    this.disclaimerClassSignal.set(this.disclaimerClass);
-
-    // Keep handler availability in sync
-    this.handlers.hasAssistantThumbsUpHandler.set(this.assistantMessageThumbsUp.observed);
-    this.handlers.hasAssistantThumbsDownHandler.set(this.assistantMessageThumbsDown.observed);
-    this.handlers.hasAssistantReadAloudHandler.set(this.assistantMessageReadAloud.observed);
-    this.handlers.hasAssistantRegenerateHandler.set(this.assistantMessageRegenerate.observed);
-    this.handlers.hasUserCopyHandler.set(this.userMessageCopy.observed);
-    this.handlers.hasUserEditHandler.set(this.userMessageEdit.observed);
-  }
-  
-  ngAfterViewInit(): void {
-    // Don't set a default height - measure it dynamically
-    
-    // Set up input container height monitoring
-    const measureAndObserve = () => {
-      if (!this.inputContainerSlotRef || !this.inputContainerSlotRef.nativeElement) {
-        return false;
-      }
-      
-      // The slot ref points to the copilot-slot element
-      // We need to find the actual input container component inside it
-      const slotElement = this.inputContainerSlotRef.nativeElement;
-      const componentElement = slotElement.querySelector('copilot-chat-view-input-container');
-      
-      if (!componentElement) {
-        return false;
-      }
-      
-      // Look for the absolute positioned div that contains the input
-      let innerDiv = componentElement.querySelector('div.absolute') as HTMLElement;
-      
-      // If not found by class, try first child
-      if (!innerDiv) {
-        innerDiv = componentElement.firstElementChild as HTMLElement;
-      }
-      
-      if (!innerDiv) {
-        return false;
-      }
-      
-      // Measure the actual height
-      const measuredHeight = innerDiv.offsetHeight;
-      
-      if (measuredHeight === 0) {
-        return false;
-      }
-      
-      // Success! Set the initial height
-      this.inputContainerHeight.set(measuredHeight);
-      this.cdr.detectChanges();
-      
-      // Create an ElementRef wrapper for ResizeObserver
-      const innerDivRef = new ElementRef(innerDiv);
-      
-      // Set up ResizeObserver to track changes
-      this.resizeObserverService.observeElement(innerDivRef, 0, 250)
-        .pipe(takeUntil(this.destroy$))
-        .subscribe(state => {
-          const newHeight = state.height;
-          
-          if (newHeight !== this.inputContainerHeight() && newHeight > 0) {
-            this.inputContainerHeight.set(newHeight);
-            this.isResizing.set(true);
-            this.cdr.detectChanges();
-            
-            // Clear existing timeout
-            if (this.resizeTimeoutRef) {
-              clearTimeout(this.resizeTimeoutRef);
-            }
-            
-            // Set isResizing to false after a short delay
-            this.resizeTimeoutRef = window.setTimeout(() => {
-              this.isResizing.set(false);
-              this.resizeTimeoutRef = undefined;
-              this.cdr.detectChanges();
-            }, 250);
-          }
-        });
-      
-      return true;
-    };
-    
-    // Try to measure immediately
-    if (!measureAndObserve()) {
-      // If failed, retry with increasing delays
-      let attempts = 0;
-      const maxAttempts = 10;
-      
-      const retry = () => {
-        attempts++;
-        if (measureAndObserve()) {
-          // Successfully measured
-        } else if (attempts < maxAttempts) {
-          // Exponential backoff: 50ms, 100ms, 200ms, 400ms, etc.
-          const delay = 50 * Math.pow(2, Math.min(attempts - 1, 4));
-          setTimeout(retry, delay);
-        } else {
-          // Failed to measure after max attempts
-        }
-      };
-      
-      // Start retry with first delay
-      setTimeout(retry, 50);
-    }
-  }
-  
-  ngOnDestroy(): void {
-    if (this.resizeTimeoutRef) {
-      clearTimeout(this.resizeTimeoutRef);
-    }
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}

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

@@ -1,52 +0,0 @@
-import { Type, TemplateRef } from '@angular/core';
-import { Message } from '@ag-ui/client';
-
-/**
- * Props for CopilotChatView component
- */
-export interface CopilotChatViewProps {
-  messages?: Message[];
-  autoScroll?: boolean;
-  
-  // Slot configurations
-  messageViewComponent?: Type<any>;
-  messageViewTemplate?: TemplateRef<any>;
-  messageViewClass?: string;
-  
-  scrollViewComponent?: Type<any>;
-  scrollViewTemplate?: TemplateRef<any>;
-  scrollViewClass?: string;
-  
-  scrollToBottomButtonComponent?: Type<any>;
-  scrollToBottomButtonTemplate?: TemplateRef<any>;
-  scrollToBottomButtonClass?: string;
-  
-  inputComponent?: Type<any>;
-  inputTemplate?: TemplateRef<any>;
-  
-  inputContainerComponent?: Type<any>;
-  inputContainerTemplate?: TemplateRef<any>;
-  inputContainerClass?: string;
-  
-  featherComponent?: Type<any>;
-  featherTemplate?: TemplateRef<any>;
-  featherClass?: string;
-  
-  disclaimerComponent?: Type<any>;
-  disclaimerTemplate?: TemplateRef<any>;
-  disclaimerClass?: string;
-  disclaimerText?: string;
-}
-
-/**
- * Context for custom layout template
- */
-export interface CopilotChatViewLayoutContext {
-  messageView: any;
-  input: any;
-  scrollView: any;
-  scrollToBottomButton: any;
-  feather: any;
-  inputContainer: any;
-  disclaimer: any;
-}

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

@@ -1,232 +0,0 @@
-import {
-  Component,
-  Input,
-  OnInit,
-  OnChanges,
-  OnDestroy,
-  SimpleChanges,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-  signal,
-  effect,
-  ChangeDetectorRef,
-  Signal,
-  Injector,
-  runInInjectionContext,
-  Optional,
-  SkipSelf,
-} from "@angular/core";
-import { CommonModule } from "@angular/common";
-import { CopilotChatViewComponent } from "./copilot-chat-view.component";
-import { CopilotChatConfigurationService } from "../../core/chat-configuration/chat-configuration.service";
-import {
-  COPILOT_CHAT_INITIAL_CONFIG,
-  CopilotChatConfiguration,
-} from "../../core/chat-configuration/chat-configuration.types";
-import { watchAgent } from "../../utils/agent.utils";
-import { AgentWatchResult } from "../../core/copilotkit.types";
-import { DEFAULT_AGENT_ID, randomUUID } from "@copilotkitnext/shared";
-import { Message, AbstractAgent } from "@ag-ui/client";
-
-/**
- * CopilotChat component - Angular equivalent of React's <CopilotChat>
- * Provides a complete chat interface that wires an agent to the chat view
- *
- * @example
- * ```html
- * <copilot-chat [agentId]="'default'" [threadId]="'abc123'"></copilot-chat>
- * ```
- */
-@Component({
-  selector: "copilot-chat",
-  standalone: true,
-  imports: [CommonModule, CopilotChatViewComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  providers: [
-    {
-      provide: CopilotChatConfigurationService,
-      deps: [
-        [new Optional(), new SkipSelf(), CopilotChatConfigurationService],
-        [new Optional(), COPILOT_CHAT_INITIAL_CONFIG],
-      ],
-      useFactory: (
-        parent: CopilotChatConfigurationService | null,
-        initial: CopilotChatConfiguration | null
-      ) => parent ?? new CopilotChatConfigurationService(initial ?? null),
-    },
-  ],
-  template: `
-    <copilot-chat-view
-      [messages]="messages()"
-      [autoScroll]="true"
-      [messageViewClass]="'w-full'"
-      [showCursor]="showCursor()"
-    >
-    </copilot-chat-view>
-  `,
-})
-export class CopilotChatComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() agentId?: string;
-  @Input() threadId?: string;
-
-  constructor(
-    @Optional() private chatConfig: CopilotChatConfigurationService | null,
-    private cdr: ChangeDetectorRef,
-    private injector: Injector
-  ) {
-    // Create initial watcher once (constructor is a safe injection context)
-    const initialId = this.agentId ?? DEFAULT_AGENT_ID;
-    this.createWatcher(initialId);
-
-    // Connect once when agent becomes available
-    effect(() => {
-      const a = this.agent();
-      if (!a) return;
-      // Apply thread id when agent is available
-      a.threadId = this.threadId || this.generatedThreadId;
-      if (!this.hasConnectedOnce) {
-        this.hasConnectedOnce = true;
-        this.connectToAgent(a);
-      }
-    });
-  }
-
-  // Signals from watchAgent - using direct references instead of assignment
-  protected agent: Signal<AbstractAgent | undefined> = signal<
-    AbstractAgent | undefined
-  >(undefined).asReadonly() as unknown as Signal<AbstractAgent | undefined>;
-  protected messages: Signal<Message[]> = signal<Message[]>(
-    []
-  ).asReadonly() as unknown as Signal<Message[]>;
-  protected isRunning: Signal<boolean> = signal<boolean>(
-    false
-  ).asReadonly() as unknown as Signal<boolean>;
-  protected showCursor = signal<boolean>(false);
-
-  private generatedThreadId: string = randomUUID();
-  private agentWatcher?: AgentWatchResult;
-  private hasConnectedOnce = false;
-  private lastAgentId?: string;
-
-  ngOnInit(): void {
-    this.setupChatHandlers();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes["agentId"] && !changes["agentId"].firstChange) {
-      const newId = this.agentId ?? DEFAULT_AGENT_ID;
-      this.createWatcher(newId);
-    }
-    if (changes["threadId"] && !changes["threadId"].firstChange) {
-      const a = this.agent();
-      if (a) {
-        a.threadId = this.threadId || this.generatedThreadId;
-      }
-    }
-  }
-
-  private async connectToAgent(agent: AbstractAgent): Promise<void> {
-    if (!agent) return;
-
-    this.showCursor.set(true);
-    this.cdr.markForCheck();
-
-    try {
-      await agent.runAgent(
-        { forwardedProps: { __copilotkitConnect: true } },
-        {
-          onTextMessageStartEvent: () => {
-            this.showCursor.set(false);
-            this.cdr.detectChanges();
-          },
-          onToolCallStartEvent: () => {
-            this.showCursor.set(false);
-            this.cdr.detectChanges();
-          },
-        }
-      );
-      this.showCursor.set(false);
-      this.cdr.markForCheck();
-    } catch (error) {
-      console.error("Failed to connect to agent:", error);
-      this.showCursor.set(false);
-      this.cdr.markForCheck();
-    }
-  }
-
-  private setupChatHandlers(): void {
-    if (!this.chatConfig) return;
-
-    // Handle input submission
-    this.chatConfig.setSubmitHandler(async (value: string) => {
-      const agent = this.agent();
-      if (!agent || !value.trim()) return;
-
-      // Add user message
-      const userMessage: Message = {
-        id: randomUUID(),
-        role: "user",
-        content: value,
-      };
-      agent.addMessage(userMessage);
-
-      // Clear the input
-      this.chatConfig!.setInputValue("");
-
-      // Show cursor while processing
-      this.showCursor.set(true);
-      this.cdr.markForCheck();
-
-      // Run the agent with named subscriber callbacks
-      try {
-        await agent.runAgent(
-          {},
-          {
-            onTextMessageStartEvent: () => {
-              this.showCursor.set(false);
-              this.cdr.detectChanges();
-            },
-            onToolCallStartEvent: () => {
-              this.showCursor.set(false);
-              this.cdr.detectChanges();
-            },
-          }
-        );
-      } catch (error) {
-        console.error("Agent run error:", error);
-      } finally {
-        this.showCursor.set(false);
-        this.cdr.markForCheck();
-      }
-    });
-
-    // Handle input value changes (optional)
-    this.chatConfig.setChangeHandler(() => {
-      // Keep input state if needed
-    });
-  }
-
-  ngOnDestroy(): void {
-    if (this.agentWatcher?.unsubscribe) {
-      this.agentWatcher.unsubscribe();
-    }
-  }
-
-  private createWatcher(desiredAgentId: string) {
-    // Tear down previous watcher if it exists
-    if (this.agentWatcher?.unsubscribe) {
-      this.agentWatcher.unsubscribe();
-      this.agentWatcher = undefined;
-    }
-    // Setup watcher for desired agent - ensure injection context
-    this.agentWatcher = runInInjectionContext(this.injector, () =>
-      watchAgent({ agentId: desiredAgentId })
-    );
-    this.agent = this.agentWatcher.agent;
-    this.messages = this.agentWatcher.messages;
-    this.isRunning = this.agentWatcher.isRunning;
-    this.hasConnectedOnce = false;
-    this.lastAgentId = desiredAgentId;
-  }
-}