@conduction/nextcloud-vue 2.58.0 → 2.60.0

package/src/components/CnBoardView/CnBoardView.vue

@@ -83,11 +83,19 @@
 							v-for="card in column.cards"
 							:key="`card-${cardKey(card)}`"
 							class="cn-board-view__card"
+							:class="dueState(card) ? `cn-board-view__card--${dueState(card)}` : null"
 							role="listitem"
 							data-testid="cn-board-card"
 							:data-card-id="cardKey(card)"
 							:draggable="canMove"
 							@dragstart="onDragStart(card, column, $event)">
+							<span
+								v-if="dueLabel(card)"
+								class="cn-board-view__due"
+								:class="`cn-board-view__due--${dueState(card)}`"
+								data-testid="cn-board-due">
+								{{ dueLabel(card) }}
+							</span>
 							<span
 								v-for="field in cardFields"
 								:key="`f-${cardKey(card)}-${field}`"
@@ -108,6 +116,7 @@
 								:data-card-id="cardKey(card)"
 								:aria-label="cardLabel(card, column)"
 								@click="openCard(card, $event)"
+								@mousedown="preventMiddleClickAutoscroll"
 								@auxclick="onCardAuxClick(card, $event)">
 								{{ openLabel }}
 							</button>
@@ -161,7 +170,8 @@ import { translate as t } from '@nextcloud/l10n'
 import { buildBoardColumns } from '../../utils/boardColumns.js'
 import { buildSwimlanes } from '../../utils/boardSwimlanes.js'
 import { DROP_OUTCOMES, runBoardDrop } from '../../utils/boardTransition.js'
-import { isRowMiddleClick } from '../../utils/rowAuxClick.js'
+import { dueStateForRow } from '../../utils/dueRule.js'
+import { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 
 /**
  * CnBoardView — the index page's rows as a board, one column per stage.
@@ -251,9 +261,25 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		/**
+		 * Marks late cards: `{ field, soonDays? }`. `field` is the dot-path to
+		 * a card's due date. A date before today gets an error edge and the
+		 * label "Overdue"; a date within `soonDays` (default 3) gets "Due
+		 * soon" in the warning colour. `null` (the default) marks nothing.
+		 *
+		 * The same rule shape the table's date cell uses, so a list and its
+		 * board agree on what late means.
+		 *
+		 * @type {{field: string, soonDays?: number}|null}
+		 */
+		dueRule: {
+			type: Object,
+			default: null,
+		},
 	},
 
-	emits: ['card-click', 'moved', 'refused', 'stale'],
+	emits: ['card-click', 'card-aux-click', 'moved', 'refused', 'stale'],
 
 	data() {
 		return {
@@ -263,6 +289,8 @@ export default {
 			refusal: '',
 			/** The card being dragged, and where from. */
 			dragging: null,
+			/** The day late marking measures from. */
+			today: new Date(),
 		}
 	},
 
@@ -333,6 +361,35 @@ export default {
 	methods: {
 		t,
 
+		preventMiddleClickAutoscroll,
+
+		/**
+		 * A card's due state under `dueRule`.
+		 *
+		 * @param {object} card The card's row.
+		 * @return {'overdue'|'soon'|'ok'|null} The state, or null when no rule applies.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-late-marking-on-board-cards
+		 */
+		dueState(card) {
+			return dueStateForRow(card, this.dueRule, this.today)
+		},
+
+		/**
+		 * The words a late card carries. Colour alone would not reach a reader
+		 * who cannot see it, or cannot tell red from amber.
+		 *
+		 * @param {object} card The card's row.
+		 * @return {string} "Overdue", "Due soon", or '' for a card that is fine.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-late-marking-on-board-cards
+		 */
+		dueLabel(card) {
+			const state = this.dueState(card)
+			if (state === 'overdue') {
+				return t('nextcloud-vue', 'Overdue')
+			}
+			return state === 'soon' ? t('nextcloud-vue', 'Due soon') : ''
+		},
+
 		/**
 		 * Open one card. The pointer and the keyboard both come through here,
 		 * so a reader on Enter reaches the same record as a reader on click.
@@ -343,13 +400,15 @@ export default {
 		 */
 		openCard(card, event) {
 			/**
-			 * @event card-click Emitted when a reader opens a card, by click, Enter or middle click. Payload: `(card, event)` — the card row and the native event, so the host can open it in a new tab on a ctrl/cmd/shift or middle click.
+			 * @event card-click Emitted when a reader opens a card, by click or Enter. Payload: `(card, event)` — the card row and the native event, so the host can open it in a new tab on a ctrl/cmd/shift click. A middle click emits `card-aux-click` instead.
 			 */
 			this.$emit('card-click', card, event)
 		},
 
 		/**
-		 * Middle click on a card's open button: open it like a click would.
+		 * Middle click on a card's open button: emits `card-aux-click`, not
+		 * `card-click`, so an existing listener that navigates never moves the
+		 * current tab away.
 		 *
 		 * @param {object} card The card the reader picked.
 		 * @param {MouseEvent} event The auxclick event.
@@ -357,7 +416,10 @@ export default {
 		 */
 		onCardAuxClick(card, event) {
 			if (isRowMiddleClick(event)) {
-				this.openCard(card, event)
+				/**
+				 * @event card-aux-click Emitted when a reader middle-clicks a card, for opening it in a new tab (see `openRowTarget`). Payload: `(card, event)` — the card row and the native auxclick event.
+				 */
+				this.$emit('card-aux-click', card, event)
 			}
 		},
 
@@ -553,6 +615,29 @@ export default {
 	display: block;
 }
 
+/* A late card: an edge in the error colour, drawn as an inset shadow so the
+   card keeps its size and its rounded corners. The label below carries the
+   meaning; the edge only helps a sighted reader find it. */
+.cn-board-view__card--overdue {
+	border-color: var(--color-error);
+	box-shadow: inset 3px 0 0 var(--color-error);
+}
+
+.cn-board-view__due {
+	display: block;
+	font-size: 0.85em;
+	font-weight: 700;
+}
+
+.cn-board-view__due--overdue {
+	color: var(--color-error-text, var(--color-error));
+}
+
+.cn-board-view__due--soon {
+	color: var(--color-warning-text, var(--color-main-text));
+	font-weight: 600;
+}
+
 /*
  * The card's opening control. The cursor and the focus ring live here now,
  * on the thing that actually does something, rather than on the box.

package/src/components/CnBrandStripe/CnBrandStripe.md

@@ -0,0 +1,22 @@
+The brand stripe of the organisation. A theme sets its colours, shares and height through the `--cn-brand-stripe-*` custom properties. Without a theme it is one band in the primary colour.
+
+```vue
+<CnBrandStripe />
+```
+
+With the properties a theme would set:
+
+```vue
+<div style="--cn-brand-stripe-color-1: #cc0000; --cn-brand-stripe-color-2: #3669a5; --cn-brand-stripe-color-3: #cc0000; --cn-brand-stripe-ratio-1: 6; --cn-brand-stripe-ratio-2: 3; --cn-brand-stripe-ratio-3: 1; --cn-brand-stripe-height: 5px">
+  <CnBrandStripe />
+</div>
+```
+
+Down the side of a panel, with `orientation="vertical"`:
+
+```vue
+<div style="display: flex; height: 80px; gap: 12px;">
+  <CnBrandStripe orientation="vertical" />
+  <span>Content beside the stripe</span>
+</div>
+```

package/src/components/CnBrandStripe/CnBrandStripe.vue

@@ -0,0 +1,100 @@
+<!--
+  SPDX-FileCopyrightText: 2026 Conduction B.V.
+  SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<div
+		class="cn-brand-stripe"
+		:class="{ 'cn-brand-stripe--vertical': orientation === 'vertical' }"
+		aria-hidden="true"
+		data-testid="cn-brand-stripe">
+		<span class="cn-brand-stripe__band cn-brand-stripe__band--1" />
+		<span class="cn-brand-stripe__band cn-brand-stripe__band--2" />
+		<span class="cn-brand-stripe__band cn-brand-stripe__band--3" />
+	</div>
+</template>
+
+<script>
+/**
+ * CnBrandStripe draws the organisation's brand stripe: up to three coloured
+ * bands next to each other, for the top of a page, a card or a sidebar.
+ *
+ * The theme decides what it looks like, through the library's own custom
+ * properties: `--cn-brand-stripe-color-1/2/3` (the colours, start to end),
+ * `--cn-brand-stripe-ratio-1/2/3` (unitless shares, such as 6, 3 and 1)
+ * and `--cn-brand-stripe-height` (such as 5px). A theming app maps its own
+ * tokens onto these; the library never reads a theme's tokens. Without them the
+ * stripe is one band in the Nextcloud primary colour, 4px high.
+ *
+ * The stripe is decoration: it carries no meaning and is hidden from
+ * assistive technology.
+ *
+ * ```vue
+ * <CnBrandStripe />
+ * ```
+ */
+export default {
+	name: 'CnBrandStripe',
+
+	props: {
+		/**
+		 * The direction the stripe runs in: `horizontal` (the default, a bar
+		 * across the top) or `vertical` (a bar down the side; the height
+		 * token then sets its width).
+		 *
+		 * @type {'horizontal'|'vertical'}
+		 */
+		orientation: {
+			type: String,
+			default: 'horizontal',
+			validator: (v) => ['horizontal', 'vertical'].includes(v),
+		},
+	},
+}
+</script>
+
+<!--
+  The stripe reads the library's own `--cn-brand-stripe-*` properties, each
+  with a Nextcloud fallback. A theming app sets them from its own tokens.
+-->
+<style scoped>
+.cn-brand-stripe {
+	display: flex;
+	flex: none;
+	width: 100%;
+	height: var(--cn-brand-stripe-height, 4px);
+}
+
+.cn-brand-stripe--vertical {
+	flex-direction: column;
+	width: var(--cn-brand-stripe-height, 4px);
+	height: 100%;
+}
+
+.cn-brand-stripe__band {
+	flex-basis: 0;
+	flex-shrink: 1;
+}
+
+.cn-brand-stripe__band--1 {
+	flex-grow: var(--cn-brand-stripe-ratio-1, 1);
+	background-color: var(--cn-brand-stripe-color-1, var(--color-primary-element));
+}
+
+.cn-brand-stripe__band--2 {
+	flex-grow: var(--cn-brand-stripe-ratio-2, 1);
+	background-color: var(--cn-brand-stripe-color-2, var(--color-primary-element));
+}
+
+.cn-brand-stripe__band--3 {
+	flex-grow: var(--cn-brand-stripe-ratio-3, 1);
+	background-color: var(--cn-brand-stripe-color-3, var(--color-primary-element));
+}
+
+@media print {
+	.cn-brand-stripe {
+		print-color-adjust: exact;
+		-webkit-print-color-adjust: exact;
+	}
+}
+</style>

package/src/components/CnBrandStripe/index.js

@@ -0,0 +1,4 @@
+import CnBrandStripe from './CnBrandStripe.vue'
+
+export default CnBrandStripe
+export { CnBrandStripe }

package/src/components/CnCardGrid/CnCardGrid.vue

@@ -149,7 +149,7 @@ export default {
 		},
 	},
 
-	emits: ['click', 'select'],
+	emits: ['click', 'select', 'aux-click'],
 
 	computed: {
 		/**
@@ -184,6 +184,14 @@ export default {
 			const listeners = { select: () => this.toggleSelect(object) }
 			if (!this.selectable || this.clickToView) {
 				listeners.click = (_card, event) => this.$emit('click', object, event)
+				// A middle click, kept off `click` so a navigating listener stays put.
+				listeners['aux-click'] = (_card, event) => {
+					/**
+					 * @event aux-click Emitted when a navigating card is middle-clicked, for opening it in a new tab (see `openRowTarget`). Payload: `(object, event)` — the card's object and the native auxclick event.
+					 * @type {object} The card's object.
+					 */
+					this.$emit('aux-click', object, event)
+				}
 			}
 			return listeners
 		},

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -55,6 +55,43 @@
 			<span v-else :title="rawTitle">{{ formattedValue }}</span>
 		</template>
 
+		<!-- Built-in "avatar" widget: a person as an avatar with the name beside
+		     it. A user id (widgetProps.userField, or widgetProps.user for a cell
+		     that holds the id itself) gets the Nextcloud avatar; a free name
+		     gets its initials. The picture is decoration: the name is the text. -->
+		<template v-else-if="widget === 'avatar'">
+			<span v-if="avatarName || avatarUserId" class="cn-cell-renderer__avatar">
+				<span v-if="avatarUserId" class="cn-cell-renderer__avatar-picture" aria-hidden="true">
+					<NcAvatar
+						:user="avatarUserId"
+						:displayName="avatarName || avatarUserId"
+						:size="avatarSize"
+						:disableMenu="true"
+						:disableTooltip="true" />
+				</span>
+				<span
+					v-else
+					class="cn-cell-renderer__avatar-initials"
+					:style="{ width: avatarSize + 'px', height: avatarSize + 'px' }"
+					aria-hidden="true">{{ avatarInitials }}</span>
+				<span class="cn-cell-renderer__avatar-name" :title="avatarName || avatarUserId">{{ avatarName || avatarUserId }}</span>
+			</span>
+			<span v-else class="cn-cell-renderer__dash">—</span>
+		</template>
+
+		<!-- Built-in "date" widget: a date whose colour follows
+		     widgetProps.variantWhen, rules on the number of days until it
+		     (0 = today, negative = overdue). -->
+		<template v-else-if="widget === 'date'">
+			<time
+				v-if="dateTimestamp"
+				class="cn-cell-renderer__date"
+				:class="dateVariant ? 'cn-cell-renderer__date--' + dateVariant : null"
+				:datetime="dateTimestamp.toISOString()"
+				:title="rawTitle">{{ dateLabel }}</time>
+			<span v-else class="cn-cell-renderer__dash">—</span>
+		</template>
+
 		<!-- Explicit column formatter — overrides the type-aware paths below -->
 		<template v-else-if="hasFormatter">
 			<span :title="rawTitle">{{ formattedValue }}</span>
@@ -129,10 +166,13 @@
 </template>
 
 <script>
-import { NcDateTime } from '@nextcloud/vue'
+import { getCanonicalLocale } from '@nextcloud/l10n'
+import { NcAvatar, NcDateTime } from '@nextcloud/vue'
 import CheckBold from 'vue-material-design-icons/CheckBold.vue'
 import CnFkResolveCell from '../CnFkResolveCell/CnFkResolveCell.vue'
+import { parseDateValue, resolveDateVariant } from '../../utils/dateVariant.js'
 import { safeCurrencyCode } from '../../utils/formatMetric.js'
+import { objectFieldValue } from '../../utils/objectName.js'
 import { safeHref } from '../../utils/safeHref.js'
 import { formatValue } from '../../utils/schema.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
@@ -162,6 +202,7 @@ export default {
 		CnStatusBadge,
 		CnFkResolveCell,
 		CheckBold,
+		NcAvatar,
 		NcDateTime,
 	},
 
@@ -232,6 +273,12 @@ export default {
 		 * the built-in id `"badge"` renders `CnStatusBadge` and the built-in
 		 * id `"fkResolve"` renders `CnFkResolveCell` (uuid → related object
 		 * label, config via `widgetProps { register, schema, labelField }`).
+		 * The built-in id `"avatar"` renders a person as an avatar with the
+		 * name beside it (`widgetProps { userField?, user?, nameField?, size? }`;
+		 * a free name gets its initials), and the built-in id `"date"` renders
+		 * a date whose colour follows `widgetProps.variantWhen`, rules on the
+		 * number of days until the date (`[{ op: "lt", value: 0, variant:
+		 * "error" }, { op: "lte", value: 5, variant: "warning" }]`).
 		 * Takes precedence over `formatter`/the type-aware rendering, but the
 		 * value handed to the widget is the formatter-shaped `formatted` when
 		 * `formatter` is also set.
@@ -350,6 +397,112 @@ export default {
 			return Number.isNaN(date.getTime()) ? null : date
 		},
 
+		/**
+		 * `avatar` widget: the Nextcloud user id whose avatar to show, or ''
+		 * for a free name. Read from the row field `widgetProps.userField`,
+		 * or from the cell value itself when `widgetProps.user` is true.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
+		 */
+		avatarUserId() {
+			const props = this.widgetProps || {}
+			let id = ''
+			if (typeof props.userField === 'string' && props.userField !== '') {
+				id = objectFieldValue(this.row, props.userField)
+			} else if (props.user === true) {
+				id = this.value
+			}
+			return (typeof id === 'string' || typeof id === 'number') ? String(id) : ''
+		},
+
+		/**
+		 * `avatar` widget: the name shown beside the picture. Read from the
+		 * row field `widgetProps.nameField` when set, else the cell value.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
+		 */
+		avatarName() {
+			const props = this.widgetProps || {}
+			if (typeof props.nameField === 'string' && props.nameField !== '') {
+				const name = objectFieldValue(this.row, props.nameField)
+				if (typeof name === 'string' && name !== '') {
+					return name
+				}
+			}
+			if (!this.hasValue || typeof this.value === 'object') {
+				return ''
+			}
+			return String(this.hasFormatter ? this.formattedValue : this.value)
+		},
+
+		/**
+		 * `avatar` widget: the initials of a free name, at most two letters
+		 * (first and last word).
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
+		 */
+		avatarInitials() {
+			const words = this.avatarName.trim().split(/\s+/).filter((word) => word !== '')
+			if (words.length === 0) {
+				return ''
+			}
+			const first = Array.from(words[0])[0] || ''
+			const last = words.length > 1 ? (Array.from(words[words.length - 1])[0] || '') : ''
+			return (first + last).toLocaleUpperCase()
+		},
+
+		/**
+		 * `avatar` widget: the picture size in pixels (`widgetProps.size`, default 24).
+		 *
+		 * @return {number}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
+		 */
+		avatarSize() {
+			const size = Number(this.widgetProps && this.widgetProps.size)
+			return Number.isFinite(size) && size > 0 ? size : 24
+		},
+
+		/**
+		 * `date` widget: the variant of the first `widgetProps.variantWhen`
+		 * rule the date matches, or '' for none.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
+		 */
+		dateVariant() {
+			const rules = this.widgetProps && this.widgetProps.variantWhen
+			const variant = resolveDateVariant(this.value, rules)
+			return variant === 'default' ? '' : variant
+		},
+
+		/**
+		 * `date` widget: the date written out in the user's locale.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
+		 */
+		dateLabel() {
+			const date = parseDateValue(this.value)
+			if (date === null) {
+				return ''
+			}
+			const options = { day: 'numeric', month: 'short', year: 'numeric' }
+			let locale
+			try {
+				locale = getCanonicalLocale()
+			} catch {
+				locale = undefined
+			}
+			try {
+				return new Intl.DateTimeFormat(locale || undefined, options).format(date)
+			} catch {
+				return new Intl.DateTimeFormat(undefined, options).format(date)
+			}
+		},
+
 		/** True when the property is a URI / URL (rendered as an external link). */
 		isUri() {
 			return this.property?.format === 'uri' || this.property?.format === 'url'
@@ -750,6 +903,59 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+.cn-cell-renderer__avatar {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	max-width: 100%;
+	vertical-align: middle;
+}
+
+.cn-cell-renderer__avatar-picture {
+	display: inline-flex;
+	flex: none;
+}
+
+.cn-cell-renderer__avatar-initials {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	background-color: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-size: 0.75em;
+	font-weight: 700;
+	line-height: 1;
+}
+
+.cn-cell-renderer__avatar-name {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* A date that matched a rule is also set in a heavier weight, so the signal
+   does not rest on colour alone. */
+.cn-cell-renderer__date--success,
+.cn-cell-renderer__date--warning,
+.cn-cell-renderer__date--error {
+	font-weight: 600;
+}
+
+.cn-cell-renderer__date--success {
+	color: var(--color-text-success, var(--color-success-text));
+}
+
+.cn-cell-renderer__date--warning {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+
+.cn-cell-renderer__date--error {
+	color: var(--color-text-error, var(--color-error-text));
+}
+
 .cn-cell-renderer__icon--success {
 	color: var(--color-success);
 }

package/src/components/CnContextMenu/CnContextMenu.vue

@@ -94,6 +94,7 @@
 import { NcActionButton, NcActionLink, NcActions } from '@nextcloud/vue'
 import { CTX_MENU_DATA_ATTR, CTX_MENU_POPPER_ATTR } from '../../composables/useContextMenu.js'
 import { followItemActionLink, resolveItemActionLink } from '../../utils/actionLink.js'
+import { isModifiedClick } from '../../utils/linkNavigation.js'
 import { CnIcon } from '../CnIcon/index.js'
 
 /**
@@ -493,13 +494,17 @@ export default {
 		/**
 		 * A link entry was clicked: route a plain in-app click, leave the rest to
 		 * the browser, and emit `action` as a button would. The `handler` is not
-		 * called, since navigating is what the link already does.
+		 * called, since navigating is what the link already does. A modified
+		 * click opens a new tab, so nothing is emitted in this one.
 		 *
 		 * @param {object} action The action descriptor.
 		 * @param {object} link The resolved link.
 		 * @param {MouseEvent} event The click event.
 		 */
 		onLinkAction(action, link, event) {
+			if (isModifiedClick(event)) {
+				return
+			}
 			followItemActionLink(event, link, this.$router)
 			this.$emit('action', { action: action.label, row: this.targetItem })
 		},

package/src/components/CnConversationThread/CnConversationThread.md

@@ -0,0 +1,51 @@
+A thread with a reply box:
+
+```vue
+<CnConversationThread
+  title="Contact with the resident"
+  reply-label="Answer to the resident"
+  :messages="[
+    { id: 1, author: 'Sanne de Vries', time: '2026-10-04T10:52:00', side: 'them',
+      text: 'Thank you. I would like to see all documents about the lighting.' },
+    { id: 2, time: '2026-10-04T10:24:00', side: 'us',
+      text: 'Construction starts in March. There will be lighting along the whole cycle path.' },
+  ]" />
+```
+
+Read-only, for a closed record:
+
+```vue
+<CnConversationThread
+  title="Contact"
+  :allow-reply="false"
+  :messages="[
+    { id: 1, author: 'Sanne de Vries', time: '4 Oct, 10:52', side: 'them', text: 'Thank you.' },
+  ]" />
+```
+
+No messages yet:
+
+```vue
+<CnConversationThread title="Contact" :messages="[]" />
+```
+
+Posting to an endpoint. The reply goes out as `{ message, ...payload }`. `title-tag`, `placeholder`, `send-label`, `us-label` and `empty-text` adjust the wording, and the `reply-actions` slot adds buttons before Send:
+
+```vue
+<CnConversationThread
+  title="Contact"
+  title-tag="h2"
+  placeholder="Write your answer"
+  send-label="Send to resident"
+  us-label="Municipality"
+  empty-text="Nobody has written yet."
+  endpoint="/apps/example/api/cases/42/messages"
+  :payload="{ channel: 'portal' }"
+  :messages="[
+    { id: 1, time: '2026-10-04T11:00:00', side: 'us', text: 'We received your request.' },
+  ]">
+  <template #reply-actions="{ draft }">
+    <NcButton :disabled="!draft">Save draft</NcButton>
+  </template>
+</CnConversationThread>
+```