ChatInputComponent

ChatInputComponent is the text input primitive for sending messages to a LangGraph agent. It provides a textarea with auto-sizing, a send button, keyboard handling, and automatic disabling while the agent is loading.

Selector: chat-input

Import:

import { ChatInputComponent, submitMessage } from '@ngaf/chat';

Basic Usage

<chat-input
  [agent]="chatRef"
  [submitOnEnter]="true"
  placeholder="Type a message..."
  (submitted)="onMessageSent($event)"
/>

API

Inputs

Input	Type	Default	Description
`agent`	`Agent`	Required	The agent to submit messages to
`submitOnEnter`	`boolean`	`true`	When `true`, pressing Enter submits the message. Shift+Enter inserts a newline. When `false`, Enter always inserts a newline.
`placeholder`	`string`	`''`	Placeholder text shown when the input is empty

Outputs

Output	Type	Description
`submitted`	`string`	Emits the trimmed message text after successful submission

Behavior

Submit Flow

When the user submits (via Enter key or clicking the send button):

The message text is trimmed
If empty after trimming, nothing happens
agent.submit() is called with { message: trimmed }
The submitted output emits the trimmed text
The input is cleared
Focus is returned to the textarea

Disabled State

The input is automatically disabled when agent.isLoading() returns true. This prevents sending messages while the agent is processing. Both the textarea and the send button reflect the disabled state.

Auto-Sizing

The textarea uses field-sizing: content CSS, which allows it to grow with its content up to a maximum height of 120px. After that, the textarea scrolls internally.

Keyboard Handling

Key	`submitOnEnter: true`	`submitOnEnter: false`
Enter	Submits the message	Inserts a newline
Shift+Enter	Inserts a newline	Inserts a newline

submitMessage() Helper

The submitMessage() function is exported as a standalone utility for programmatic message submission:

import { submitMessage } from '@ngaf/chat';
import type { Agent } from '@ngaf/chat';
 
function sendGreeting(agent: Agent) {
  const result = submitMessage(agent, 'Hello!');
  // result is 'Hello!' or null if the text was empty
}

Signature:

function submitMessage(
  agent: Agent,
  text: string
): string | null

Parameter	Type	Description
`agent`	`Agent`	The agent to submit to
`text`	`string`	The message text to send

Returns: The trimmed message string if submitted, or null if the trimmed text was empty.

The function calls agent.submit({ message: trimmed }) under the hood.

Slots

`[chatInputModelSelect]`

Projects content into the controls row of the input pill, between [chatInputTrailing] and the send button. Designed for <chat-select> (a model picker), but accepts any element.

<chat-input [agent]="agent">
  <chat-select chatInputModelSelect [options]="opts" [(value)]="selected" />
</chat-input>

Styling

The component renders a <form> containing a <textarea> and a <button>. It uses the following CSS custom properties from the chat theme:

Variable	Applied To
`--ngaf-chat-surface-alt`	Form background
`--ngaf-chat-separator`	Form border (unfocused)
`--ngaf-chat-muted`	Form border (focused)
`--ngaf-chat-radius-input`	Form border radius
`--ngaf-chat-text`	Textarea text color
`--ngaf-chat-font-family`	Textarea font
`--ngaf-chat-primary`	Send button background
`--ngaf-chat-on-primary`	Send button icon color

ARIA

The component includes accessibility attributes:

The form has role="search" and aria-label="Message input"
The textarea has aria-label="Type a message"
The send button has aria-label="Send message"

Full Example

import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
import { agent } from '@ngaf/langgraph';
import { ChatInputComponent } from '@ngaf/chat';
 
@Component({
  selector: 'app-input-demo',
  standalone: true,
  imports: [ChatInputComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="border rounded-lg p-4">
      <chat-input
        [agent]="chatRef"
        [submitOnEnter]="true"
        placeholder="Ask a question..."
        (submitted)="lastMessage.set($event)"
      />
      @if (lastMessage()) {
        <p class="text-sm mt-2 text-gray-500">
          Last sent: {{ lastMessage() }}
        </p>
      }
    </div>
  `,
})
export class InputDemoComponent {
  chatRef = agent({
    assistantId: 'chat_agent',
    threadId: signal(null),
  });
 
  lastMessage = signal('');
}