CommentComposer

A comment composer: a growing input with typeahead triggers and image paste, above attach and emoji buttons and Post. It is controlled: the host owns the draft and clears it once the comment posts. Empty drafts never post.

This is the Vue port of the lab CommentComposer in Meta Astryx, aligned to v0.7.13 (including later focus behavior: disabled controls stay in the tab order, and a busy editor's Cancel link remains a tab stop). The emoji button reuses the standalone EmojiPicker. CommentThread, Comments, and CommentPin are not in this slice.

This component ships in @astryx-vue/lab and is published only under the canary tag.

Import

import { CommentComposer, CommentComposerBase } from '@astryx-vue/lab'

CommentComposer is the standalone surface. Threads will reuse CommentComposerBase for replies and edits.

Props

Name	Type	Default	Description
value / modelValue	string	''	The draft, controlled. Bind with value + @change or v-model.
placeholder	string	message @astryx.commentComposer.placeholder	Placeholder of the input.
label	string	the placeholder	Accessible name of the input.
isSubmitting	boolean	false	Holds attach and emoji while a post is in flight. The input stays enabled so focus is not dropped. Post stays focusable and refuses a second press.
error	string	—	Shows an error Banner above the composer.
anchor	CommentAnchor	—	The passage a new inline comment attaches to, quoted above the input.
highlightColor	CommentHighlightColor	'yellow'	Palette color of the quoted passage's rule.
onUploadImages	(files: readonly File[]) => CommentUploadedImage[] | Promise<...>	—	Uploads attached, pasted, or dropped images and appends them as Markdown. Adds the attach button. A busy composer starts no upload.
triggers	readonly ChatComposerTrigger[]	[]	Typeahead triggers, such as an @ people search.
agentCommands	readonly CommentAgentCommand[]	[]	Agents the comment can address: typing / lists them.
hasEmojiPicker	boolean	true	Whether the emoji picker button shows.

CommentAnchor is { quote: string; status?: 'anchored' \| 'orphaned' }. CommentUploadedImage is { url: string; alt: string }. CommentHighlightColor is a palette name such as 'yellow' or 'green'.

Events

Name	Payload	Description
change / update:modelValue	value: string	The draft changed.
submit	value: string	Enter, or the Post button. Empty drafts never post. The host should clear the draft once the comment posts.
retry	—	Retry on the error Banner.
anchor-dismiss	—	Remove quoted text on the quoted passage.

Slots

Name	Description
controls	Product-owned controls after the attach and emoji buttons. Keep it to one short control: the footer does not wrap.
composer	Replaces the default composer while keeping its state and context.

Keyboard and busy behavior

The input grows to five lines. Enter posts; Shift+Enter inserts a newline. While an input method is composing, Enter stays with it. Clicks on empty space in the composer focus the input, except clicks on its own controls or a layer it opened.

isSubmitting does not natively disable the input, the file picker, Cancel, or Post. Attach and emoji use aria-disabled and stay focusable. Cancel in an edit context stays in the tab order and does nothing until the post finishes. Pasted or dropped images, and a second Post, are refused while busy.