Angular Signals

import { signal, computed } from '@angular/core';
 
// Create a writable signal
const count = signal(0);
 
// Read the current value — call it like a function
console.log(count()); // 0
 
// Update the value
count.set(1);
count.update(prev => prev + 1);
 
// Derive new values with computed()
const doubled = computed(() => count() * 2);
console.log(doubled()); // 4

import { computed } from '@angular/core';
import { agent } from '@ngaf/langgraph';
 
const chat = agent<ChatState>({
  assistantId: 'chat_agent',
});
 
// Count all messages in the conversation
const messageCount = computed(() => chat.messages().length);
 
// Get the last message (useful for showing the latest response)
const lastMessage = computed(() => chat.messages().at(-1));
 
// Extract just the assistant's messages
const assistantMessages = computed(() =>
  chat.messages().filter(m => m.role === 'assistant')
);
 
// Track which tools the agent is actively calling
const activeTools = computed(() => chat.toolCalls());
 
// Build a user-facing error message
const errorDisplay = computed(() => {
  const err = chat.error();
  if (!err) return null;
  if (err instanceof HttpErrorResponse) {
    return err.status === 429
      ? 'Rate limited. Please wait a moment.'
      : `Server error (${err.status})`;
  }
  return 'An unexpected error occurred.';
});
 
// Combine multiple signals into a single view model
const viewModel = computed(() => ({
  messages: chat.messages(),
  isStreaming: chat.isLoading(),
  canSend: !chat.isLoading(),
  messageCount: messageCount(),
  error: errorDisplay(),
}));

import { effect } from '@angular/core';
 
// Log errors for observability
effect(() => {
  const err = chat.error();
  if (err) {
    console.error('[Agent] Agent error:', err);
    this.analytics.track('agent_error', { error: err });
  }
});
 
// Auto-scroll to bottom when new messages arrive
effect(() => {
  const msgs = chat.messages();
  if (msgs.length > 0) {
    // Schedule after Angular renders the new message
    setTimeout(() => {
      this.chatContainer.nativeElement.scrollTo({
        top: this.chatContainer.nativeElement.scrollHeight,
        behavior: 'smooth',
      });
    });
  }
});
 
// Track streaming duration for performance monitoring
effect(() => {
  const status = chat.status();
  if (status === 'running') {
    this.streamStart = performance.now();
  }
  if (status === 'idle' && this.streamStart) {
    const duration = performance.now() - this.streamStart;
    this.analytics.track('stream_duration_ms', { duration });
    this.streamStart = null;
  }
});

import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, ViewChild } from '@angular/core';
import { agent } from '@ngaf/langgraph';
 
@Component({
  selector: 'app-chat',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- Status bar -->
    @switch (chat.status()) {
      @case ('running') {
        <div class="status-bar streaming">
          Agent is responding...
        </div>
      }
      @case ('error') {
        <div class="status-bar error">
          {{ errorDisplay() }}
          <button (click)="retry()">Retry</button>
        </div>
      }
    }
 
    <!-- Message list -->
    <div class="messages" #chatContainer>
      @for (message of chat.messages(); track $index) {
        @switch (message.role) {
          @case ('user') {
            <div class="message user">
              {{ message.content }}
            </div>
          }
          @case ('assistant') {
            <div class="message assistant">
              {{ message.content }}
 
              <!-- Show tool calls if the assistant invoked any -->
              @for (tool of chat.toolCalls(); track tool.id) {
                <div class="tool-call">
                  Called: {{ tool.name }}
                </div>
              }
            </div>
          }
          @case ('tool') {
            <div class="message tool-result">
              {{ message.name }}: {{ message.content }}
            </div>
          }
        }
      } @empty {
        <div class="empty-state">
          Send a message to start the conversation.
        </div>
      }
    </div>
 
    <!-- Input area -->
    <form (submit)="send($event)">
      <input
        #input
        type="text"
        placeholder="Type a message..."
        [disabled]="chat.isLoading()"
      />
      <button type="submit" [disabled]="chat.isLoading()">
        @if (chat.isLoading()) { Streaming... } @else { Send }
      </button>
    </form>
  `,
})
export class ChatComponent {
  @ViewChild('chatContainer') chatContainer!: ElementRef<HTMLElement>;
 
  chat = agent<ChatState>({
    assistantId: 'chat_agent',
  });
 
  errorDisplay = computed(() => {
    const err = this.chat.error();
    if (!err) return '';
    return err instanceof HttpErrorResponse
      ? `Error ${err.status}: ${err.statusText}`
      : 'Connection lost. Please retry.';
  });
 
  scrollEffect = effect(() => {
    const msgs = this.chat.messages();
    if (msgs.length) {
      setTimeout(() =>
        this.chatContainer?.nativeElement.scrollTo({
          top: this.chatContainer.nativeElement.scrollHeight,
          behavior: 'smooth',
        })
      );
    }
  });
 
  send(event: Event) {
    event.preventDefault();
    const input = (event.target as HTMLFormElement).querySelector('input')!;
    const content = input.value.trim();
    if (!content) return;
 
    this.chat.submit({ message: content });
    input.value = '';
  }
 
  retry() {
    this.chat.submit({ message: 'Please try again.' });
  }
}

@Component({
  // Always use OnPush with agent
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p>{{ chat.messages().length }} messages</p>
    @if (chat.isLoading()) {
      <app-typing-indicator />
    }
  `,
})
export class ChatComponent {
  chat = agent<ChatState>({ assistantId: 'chat_agent' });
}