UserMessage
The person's own message, with copy and an optional edit in place.
SourcePackage @weft-js/warp
Preview
tsx
import { state } from '@weft-js/core'import { UserMessage } from '@weft-js/warp'export function Editable() { const text = state('Roll back mobile-bff in every region') return <UserMessage text={text.value} onEdit={next => (text.value = next)} />}Installation
npm install @weft-js/warpUsage
tsx
import { UserMessage } from '@weft-js/warp'A long message
Use text to show a message from the person, which wraps over as many lines as it needs.
tsx
import { UserMessage } from '@weft-js/warp'export function Long() { return ( <UserMessage text="Compare d-4819 with the last good deploy of mobile-bff. Tell me what changed, whether the change explains the failed check, and what you would do next." /> )}Accessibility
- Escape
- Cancels an edit
- Focus goes to the box when editing starts and back to the pencil when it ends.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The message. |
arrive | boolean | false | A message just sent: it enters with one sweep. |
| Event | Type | Default | Description |
|---|---|---|---|
onEdit | ((text: string) => void) | — | Saving an edit. Usually starts a new branch. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="message"] [data-part="body"]
bodystatusbubble
RelatedAssistantBranch switcher