AiPromptBar

Package: @synapse-ui/ai-prompt
Selector: synapse-ai-prompt-bar
Status: Stable

An auto-resizing text input bar designed for AI prompt entry. Supports token estimation, submit/stop events, and keyboard shortcuts.

Overview

AiPromptBar is the primary user input surface for generative AI interactions. It handles multi-line input with automatic height adjustment, displays estimated token count, and emits events for submission and generation cancellation.

Installation

npm install @synapse-ui/ai-prompt @synapse-ui/theme

Basic Example

import { Component } from '@angular/core';
import { AiPromptBarComponent } from '@synapse-ui/ai-prompt';

@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [AiPromptBarComponent],
  template: ` <synapse-ai-prompt-bar placeholder="Ask anything..." [maxRows]="8" [showTokenEstimate]="true" (submit)="onSubmit($event)" (stopGeneration)="onStop()" /> `,
})
export class ChatComponent {
  onSubmit(event: PromptSubmitEvent): void {
    console.log('Prompt:', event.text);
    console.log('Estimated tokens:', event.estimatedTokens);
  }

  onStop(): void {
    console.log('User requested stop');
  }
}

API Reference (Planned)

Inputs

Input	Type	Default	Description
placeholder	string	'Enter a prompt...'	Placeholder text
disabled	boolean	false	Disables input and submit
loading	boolean	false	Shows stop button instead of submit
maxRows	number	6	Maximum visible rows before scroll
minRows	number	1	Minimum visible rows
maxLength	number | null	null	Character limit (null = unlimited)
showTokenEstimate	boolean	true	Display estimated token count
submitOnEnter	boolean	true	Enter submits; Shift+Enter inserts newline

Outputs

Output	Payload	Description
submit	PromptSubmitEvent	Fired when user submits a prompt
stopGeneration	void	Fired when user clicks stop during loading
valueChange	string	Fired on every input change

Types

interface PromptSubmitEvent {
  text: string;
  estimatedTokens: number;
}

Token Estimation

Token count uses a client-side heuristic (characters ÷ 4, adjusted for whitespace). This is an approximation — not a substitute for server-side token counting.

// Approximate formula (planned)
estimatedTokens = Math.ceil(text.trim().length / 4);

Display format: ~128 tokens with muted styling via --synapse-text-muted.

Keyboard Shortcuts

Key	Action
Enter	Submit prompt (when submitOnEnter is true)
Shift + Enter	Insert newline
Escape	Clear focus (does not clear text)

States

stateDiagram-v2
    [*] --> Idle
    Idle --> Typing: User input
    Typing --> Submitting: Enter / Submit click
    Submitting --> Loading: App sets and starts stream
    Loading --> Idle: Stream complete
    Loading --> Idle: stopGeneration
    Typing --> Idle: Clear

Accessibility

• Textarea has an associated <label> (visible or aria-label).
• Submit and stop buttons have descriptive aria-label attributes.
• Token estimate uses aria-live="polite" for screen reader updates.
• Focus ring uses --synapse-focus-ring token.

Theming

The prompt bar uses these tokens:

Element	Token
Background	--synapse-surface-primary
Border	--synapse-border-default
Text	--synapse-text-primary
Submit button	--synapse-color-accent
Stop button	--synapse-color-error
Token estimate	--synapse-text-muted

Related Docs

• AiStreamContainer
• Getting Started