UserMessage
The person's own message, with copy and an optional edit in place.
SourcePackage @kerf-js/veneer
Preview
tsx
import { state } from '@kerf-js/core'import { UserMessage } from '@kerf-js/veneer'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 @kerf-js/veneerUsage
tsx
import { UserMessage } from '@kerf-js/veneer'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 '@kerf-js/veneer'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