Composer

Where a message is written: text, attachments, emoji and @mentions.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Composer, Stack, Text } from '@weft-js/warp'import type { ComposerFile, Peer } from '@weft-js/warp'export function Attach() {  const files = state<ComposerFile[]>([])  const sent = state('')  return (    <Stack gap="related">      <Composer        label="Message #deploys"        placeholder="Message #deploys"        mentions={PEERS}        files={files.value}        onAttach={() => (files.value = [...files.value, { id: `f${files.value.length}`, name: 'latency-graph.png' }])}        onRemoveFile={file => (files.value = files.value.filter(f => f !== file))}        onEmoji={insert => insert('🚀')}        onSend={m => { sent.value = m.text; files.value = [] }}      />      <Text subtle>{sent.value ? `Sent: ${sent.value}` : 'Type @ to mention someone.'}</Text>    </Stack>  )}const PEOPLE = [  { id: 'mara', name: 'Mara Lindqvist', email: 'mara@weft.dev', role: 'Owner', team: 'Platform', initials: 'ML' },  { id: 'jun', name: 'Jun Tanaka', email: 'jun@weft.dev', role: 'Admin', team: 'Platform', initials: 'JT' },  { id: 'priya', name: 'Priya Raman', email: 'priya@weft.dev', role: 'Member', team: 'Web', initials: 'PR' },  { id: 'tomas', name: 'Tomás Oliveira', email: 'tomas@weft.dev', role: 'Member', team: 'Web', initials: 'TO' },  { id: 'lena', name: 'Lena Fischer', email: 'lena@weft.dev', role: 'Member', team: 'Data', initials: 'LF' },  { id: 'noor', name: 'Noor Haddad', email: 'noor@weft.dev', role: 'Viewer', team: 'Data', initials: 'NH' },  { id: 'sam', name: 'Sam Okafor', email: 'sam@weft.dev', role: 'Member', team: 'Mobile', initials: 'SO' },  { id: 'ines', name: 'Inés Vidal', email: 'ines@weft.dev', role: 'Viewer', team: 'Mobile', initials: 'IV' },]const PEERS: Peer[] = PEOPLE.map((p, i) => ({ id: p.id, name: p.name, color: i + 1 }))

Installation

npm install @weft-js/warp

Usage

tsx

import { Composer } from '@weft-js/warp'

Accessibility

Enter: Sends
ShiftEnter: Adds a line
↑↓: Moves through suggestions
Esc: Closes the suggestions, then the quote

API Reference

Prop	Type	Default	Description
`label`	`string`	—	The textarea's name: "Message #calendar-engine".
`placeholder`	`string`	—	Shown while empty.
`quote`	`State<QuoteDraftValue \| null>`	—	The quote being drafted, for a Thread to fill.
`mentions`	`Mentionable[]`	—	People to suggest after @.
`files`	`ComposerFile[]`	—	Attached files.
`compact`	`boolean`	`false`	Hides the keyboard hint.
`input`	`((el: HTMLTextAreaElement) => void)`	—	Reaches the textarea, for focus.

Event	Type	Default	Description
`onSend`	`(m: ComposerSend) => void`	—	Called with the text and any quote.
`onRemoveFile`	`((f: ComposerFile) => void)`	—	Removes one.
`onAttach`	`(() => void)`	—	Shows the attach button.
`onEmoji`	`((insert: (text: string) => void) => void)`	—	The emoji slot: open a picker, then call `insert` with what was picked.
`onTyping`	`(() => void)`	—	Called as people type.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="composer"] [data-part="files"]

filesfilequote-draftquote-byquote-textsr-onlyrowspacerhintsend

RelatedThread Mentions input