Composer

the chat input: an auto-growing field with a send button that turns into a stop button while a reply streams.

Playground

size
sending
streaming 
 
 
 
Using it
 
 
  
 Angular  lucent-composer 
import { LucentComposer } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-composer 
@design-foundry/lucent-styles/packs/messaging.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 value input, two-way string '' field value (two-way). 
 placeholder input string Message… placeholder text. 
 size input xs | sm | md | lg md control density. 
 disabled input boolean false not editable. 
 sending input boolean false spinner on the send button. 
 streaming input boolean false swaps send for stop. 
 send output string  emits the message on send or Enter. 
 stop output void  emits when stop is pressed. 
  
 
  
Theming
 
 
 
Color (8)
  
 
Size & spacing (3)
  
 
Border & radius (2)
  
 
Type (3)