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 '@threadplane/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
`showStopButton`	`boolean`	`true`	When `true`, shows a stop button in place of the send button while the agent is streaming.

#Outputs

Output	Type	Description
`submitted`	`string`	Emits the trimmed message text after successful submission
`stopped`	`void`	Emits when the user clicks the stop button to halt a streaming response

#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 '@threadplane/chat';
import type { Agent } from '@threadplane/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

The component template exposes content-projection slots arranged around the input pill:

Slot	Selector	Description
Banner	`[chatInputBanner]`	Rendered above the input pill (e.g., a notice or status banner).
Attachments	`[chatInputAttachments]`	Rendered above the input pill, below the banner (e.g., attachment chips).
Leading	`[chatInputLeading]`	Rendered inside the pill, before the textarea.
Model select	`[chatInputModelSelect]`	Rendered in the controls row, before the trailing slot and send button.
Trailing	`[chatInputTrailing]`	Rendered in the controls row, after the model-select slot and before the send button.
Footer	`[chatInputFooter]`	Rendered below the input pill.

#`[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 { injectAgent, provideAgent } from '@threadplane/langgraph';
import { ChatInputComponent } from '@threadplane/chat';
 
@Component({
  selector: 'app-input-demo',
  standalone: true,
  imports: [ChatInputComponent],
  providers: [provideAgent({ assistantId: 'chat', threadId: signal(null) })],
  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 = injectAgent();
 
  lastMessage = signal('');
}