Class AppComponent

examples/ts-angular-chat/src/app.component.ts:158–235

  `,
})
export class AppComponent {
  draft = ''
  scroller = viewChild<ElementRef<HTMLElement>>('scroller')

  suggestions = [
    'What time is it right now?',
    'Roll two dice',
    "What's the weather in Tokyo?",
    'What is 42 × 7?',
  ]

  chat = injectChat({
    connection: fetchServerSentEvents('/api/chat'),
    tools: clientTools(...chatTools),
  })

  constructor() {
    // Auto-scroll to the latest message as the conversation streams in.
    effect(() => {
      this.chat.messages()
      this.chat.isLoading()
      const el = this.scroller()?.nativeElement
      if (el) {
        queueMicrotask(() => {
          el.scrollTop = el.scrollHeight
        })
      }
    })
  }

  /** A message is worth rendering if it has visible text or a tool call. */
  isRenderable(message: {
    parts: ReadonlyArray<{ type: string; content?: string }>
  }): boolean {
    return message.parts.some(
      (part) =>
        (part.type === 'text' && !!part.content) || part.type === 'tool-call',
    )
  }

  /** Compact, readable tool arguments — hides empty `{}`. */
  formatArgs(args: string): string {
    try {
      const parsed: unknown = JSON.parse(args)
      const compact = JSON.stringify(parsed)
      return compact === '{}' ? '' : compact
    } catch {
      return ''
    }
  }

  hasOutput(output: unknown): boolean {
    return output !== undefined && output !== null && output !== ''
  }

  /** Render a tool's output as a compact string. */
  formatOutput(output: unknown): string {
    if (typeof output === 'string') return output