@conduction/nextcloud-vue 2.96.0 → 2.97.0

package/l10n/en.json

@@ -1145,6 +1145,8 @@
     "Due tomorrow": "Due tomorrow",
     "Due in {days} days": "Due in {days} days",
     "Available": "Available",
+    "{value} of {limit}": "{value} of {limit}",
+    "{value} of {limit}, over the limit": "{value} of {limit}, over the limit",
     "Ready to claim": "Ready to claim",
     "In progress": "In progress",
     "Completed": "Completed",
@@ -1584,7 +1586,11 @@
     "{s} s": "{s} s",
     "About this {app} installation.": "About this {app} installation.",
     "{version}, up to date": "{version}, up to date",
-    "for an SLA": "for an SLA"
+    "for an SLA": "for an SLA",
+    "About {name}": "About {name}",
+    "Sent message": "Sent message",
+    "Received message": "Received message",
+    "Loading messages…": "Loading messages…"
   },
   "plurals": {
     "{count} selected": [

package/l10n/nl.json

@@ -1171,6 +1171,8 @@
     "Due tomorrow": "Morgen",
     "Due in {days} days": "Over {days} dagen",
     "Available": "Beschikbaar",
+    "{value} of {limit}": "{value} van {limit}",
+    "{value} of {limit}, over the limit": "{value} van {limit}, boven de limiet",
     "Ready to claim": "Klaar om op te pakken",
     "In progress": "In behandeling",
     "Completed": "Afgerond",
@@ -1770,7 +1772,11 @@
     "{s} s": "{s} s",
     "About this {app} installation.": "Over deze {app}-installatie.",
     "{version}, up to date": "{version}, bijgewerkt",
-    "for an SLA": "voor een SLA"
+    "for an SLA": "voor een SLA",
+    "About {name}": "Over {name}",
+    "Sent message": "Verstuurd bericht",
+    "Received message": "Ontvangen bericht",
+    "Loading messages…": "Berichten laden…"
   },
   "plurals": {
     "{count} selected": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.96.0",
+  "version": "2.97.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -24,6 +24,24 @@
 			</span>
 		</template>
 
+		<!-- Built-in "actions" widget: row actions as inline buttons ("Aan zaak
+		     koppelen", "Nieuwe zaak"). The page resolves the buttons
+		     (widgetProps.items) and runs a click (widgetProps.run). -->
+		<template v-else-if="widget === 'actions'">
+			<span class="cn-cell-renderer__actions" data-testid="cn-cell-actions">
+				<NcButton
+					v-for="item in actionItems"
+					:key="item.key"
+					:variant="item.variant"
+					size="small"
+					:disabled="item.disabled"
+					:data-testid="`cn-cell-action-${item.key}`"
+					@click.stop="runAction(item)">
+					{{ item.label }}
+				</NcButton>
+			</span>
+		</template>
+
 		<!-- Built-in "badge" widget: renders the value as a status pill. An enum
 		     value shows its label (x-enum-labels, translated) unless a formatter
 		     shapes it; the colour stays keyed on the raw value. -->
@@ -350,7 +368,7 @@
 
 <script>
 import { getCanonicalLocale, translate as t } from '@nextcloud/l10n'
-import { NcAvatar, NcCheckboxRadioSwitch, NcDateTime } from '@nextcloud/vue'
+import { NcAvatar, NcButton, NcCheckboxRadioSwitch, NcDateTime } from '@nextcloud/vue'
 import CheckBold from 'vue-material-design-icons/CheckBold.vue'
 import CnFkResolveCell from '../CnFkResolveCell/CnFkResolveCell.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
@@ -398,6 +416,7 @@ export default {
 		CnGroupNameCell,
 		CheckBold,
 		NcAvatar,
+		NcButton,
 		NcDateTime,
 	},
 
@@ -586,6 +605,24 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The `actions` widget's buttons for this row: the page's resolved
+		 * `widgetProps.items` (a list, or a function of the row returning
+		 * one), each `{ key, label, variant?, disabled? }`.
+		 *
+		 * @return {Array<{key: string, label: string, variant: string, disabled: boolean}>}
+		 * @spec openspec/changes/table-actions-column/specs/index-page/spec.md#requirement-a-column-can-show-row-actions-as-buttons
+		 */
+		actionItems() {
+			const raw = typeof this.widgetProps?.items === 'function' ? this.widgetProps.items(this.row) : this.widgetProps?.items
+			const items = Array.isArray(raw) ? raw : []
+			return items.map((item) => ({
+				...item,
+				variant: item.variant || 'secondary',
+				disabled: item.disabled === true,
+			}))
+		},
+
 		/**
 		 * Whether the "switch" widget is on: the pending state while a toggle
 		 * is in flight, else `widgetProps.checked(row)`, else the value.
@@ -1419,6 +1456,19 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Run an `actions` widget button for this row through the page.
+		 *
+		 * @param {{key: string}} item The button.
+		 * @return {void}
+		 * @spec openspec/changes/table-actions-column/specs/index-page/spec.md#requirement-a-column-can-show-row-actions-as-buttons
+		 */
+		runAction(item) {
+			if (typeof this.widgetProps?.run === 'function') {
+				this.widgetProps.run(item.key, this.row)
+			}
+		},
+
 		/**
 		 * The "switch" widget was flipped: show the new state and hand it to
 		 * `widgetProps.onToggle(row, on)`. A rejection puts the switch back.
@@ -1555,6 +1605,12 @@ export default {
 </script>
 
 <style scoped>
+.cn-cell-renderer__actions {
+	display: inline-flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
 .cn-cell-renderer__icon-label {
 	display: inline-flex;
 	align-items: center;

package/src/components/CnConversationThread/CnConversationThread.md

@@ -49,3 +49,15 @@ Posting to an endpoint. The reply goes out as `{ message, ...payload }`. `title-
   </template>
 </CnConversationThread>
 ```
+
+While the messages load, `loading` makes the thread say so (in a status region) instead of showing the empty text. A
+message's `channel` is shown after its time:
+
+```vue
+<CnConversationThread
+  title="Contact"
+  :loading="false"
+  :messages="[
+    { id: 1, author: 'Sanne de Vries', time: '2026-10-04T10:52:00', side: 'them', channel: 'Message box', text: 'Thank you.' },
+  ]" />
+```

package/src/components/CnConversationThread/CnConversationThread.vue

@@ -17,7 +17,13 @@
 			{{ title }}
 		</component>
 
-		<p v-if="rows.length === 0" class="cn-conversation-thread__empty" data-testid="cn-conversation-empty">
+		<p v-if="loading && rows.length === 0"
+			class="cn-conversation-thread__empty"
+			role="status"
+			data-testid="cn-conversation-loading">
+			{{ loadingText }}
+		</p>
+		<p v-else-if="rows.length === 0" class="cn-conversation-thread__empty" data-testid="cn-conversation-empty">
 			{{ emptyText }}
 		</p>
 
@@ -32,8 +38,10 @@
 				<span class="cn-conversation-thread__avatar" aria-hidden="true">{{ row.initials }}</span>
 				<div class="cn-conversation-thread__bubble">
 					<span class="cn-conversation-thread__meta">
+						<span class="hidden-visually">{{ row.directionLabel }}</span>
 						<span class="cn-conversation-thread__author">{{ row.author }}</span>
 						<time v-if="row.timeLabel" :datetime="row.datetime || null">{{ row.timeLabel }}</time>
+						<span v-if="row.channel" class="cn-conversation-thread__channel" data-testid="cn-conversation-channel">{{ row.channel }}</span>
 					</span>
 					<span class="cn-conversation-thread__text">{{ row.text }}</span>
 				</div>
@@ -123,9 +131,10 @@ export default {
 
 	props: {
 		/**
-		 * The messages, oldest first: `{ id?, author?, time?, text, side? }`.
+		 * The messages, oldest first: `{ id?, author?, time?, text, side?, channel? }`.
 		 * `side` is `us` or `them` (default `them`). `time` is an ISO
-		 * date, or any text to show as is.
+		 * date, or any text to show as is. `channel` is shown after the time
+		 * ("E-mail", "Phone note").
 		 */
 		messages: {
 			type: Array,
@@ -189,6 +198,12 @@ export default {
 			default: () => ({}),
 		},
 
+		/** Whether the messages are still loading; with none yet the thread says so. */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** Shown when there are no messages yet. */
 		emptyText: {
 			type: String,
@@ -221,7 +236,7 @@ export default {
 		/**
 		 * The messages, with author, side, time and initials resolved.
 		 *
-		 * @return {Array<{key: string, author: string, initials: string, side: string, text: string, timeLabel: string, datetime: string}>} The rows.
+		 * @return {Array<{key: string, author: string, initials: string, side: string, text: string, timeLabel: string, datetime: string, channel: string, directionLabel: string}>} The rows.
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-conversation-thread
 		 */
 		rows() {
@@ -241,6 +256,8 @@ export default {
 						text: message.text === undefined || message.text === null ? '' : String(message.text),
 						timeLabel: time.label,
 						datetime: time.datetime,
+						channel: typeof message.channel === 'string' ? message.channel : '',
+						directionLabel: side === 'us' ? t('nextcloud-vue', 'Sent message') : t('nextcloud-vue', 'Received message'),
 					}
 				})
 		},
@@ -264,6 +281,11 @@ export default {
 		fallbackLabel() {
 			return t('nextcloud-vue', 'Conversation')
 		},
+
+		/** @return {string} What the thread says while its messages load. */
+		loadingText() {
+			return t('nextcloud-vue', 'Loading messages…')
+		},
 	},
 
 	methods: {
@@ -455,4 +477,8 @@ export default {
 	gap: calc(2.5 * var(--default-grid-baseline));
 	justify-content: flex-end;
 }
+
+.cn-conversation-thread__channel {
+	color: var(--color-text-maxcontrast);
+}
 </style>

package/src/components/CnConversationThread/CnConversationWidget.vue

@@ -7,29 +7,44 @@
 	<div class="cn-case-widget-card">
 		<CnConversationThread
 			:messages="messages"
-			:title="content.title || ''"
+			:title="tr(content.title || '')"
 			:allowReply="content.allowReply !== false"
-			:replyLabel="content.replyLabel || undefined"
-			:placeholder="content.placeholder || ''"
-			:sendLabel="content.sendLabel || undefined"
-			:endpoint="endpoint"
-			:emptyText="content.emptyText || undefined"
+			:replyLabel="content.replyLabel ? tr(content.replyLabel) : undefined"
+			:placeholder="tr(content.placeholder || '')"
+			:sendLabel="content.sendLabel ? tr(content.sendLabel) : undefined"
+			:endpoint="replyAction ? '' : endpoint"
+			:loading="loading"
+			:emptyText="content.emptyText ? tr(content.emptyText) : undefined"
+			@send="onSend"
 			@sent="onSent" />
 	</div>
 </template>
 
 <script>
 import CnConversationThread from './CnConversationThread.vue'
+import { dispatchAction } from '../../utils/actionsDispatcher.js'
+import { fetchReferenceObjects } from '../../utils/boardReferenceColumns.js'
 import { readPath } from '../../utils/readPath.js'
+import { hasUnresolvedDeepTokens, resolveDeepTokens } from '../../utils/resolveFilterTokens.js'
 
 /**
  * CnConversationWidget: the `conversation` detail widget type.
  *
- * Renders CnConversationThread from a list on the bound record:
- * `content: { field, endpoint?, authorField?, timeField?, textField?, sideField?, usValue? }`.
- * `@objectId` in `endpoint` is replaced by the record's id. A reply the
- * endpoint accepts is shown at once, until the record is read again.
- * Resolved by its registry key, and exported for an app that renders it itself.
+ * Renders CnConversationThread from the messages of a record, oldest first.
+ * The messages are a list on the bound record (`field`), or the objects of a
+ * register list (`source: { register, schema, filter?, limit? }`, the filter
+ * token-resolved like a record-list's: `{ "case": "@objectId" }`).
+ *
+ * Mapping keys name where each message keeps its parts: `textField` (alias
+ * `bodyField`), `timeField` (alias `timestampField`), `authorField` (alias
+ * `senderField`), `sideField` (alias `directionField`) with `usValue` (alias
+ * `outValue`) for the messages the organisation sent, and `channelField` with
+ * an optional `channelMap` from stored value to label ("email" to "E-mail").
+ *
+ * The reply box posts to `endpoint` (`@objectId` filled in), or runs
+ * `replyAction`, an action descriptor the app decides the meaning of: it is
+ * dispatched with `args: [{ text, objectId }]` and `props.text`. After a send
+ * the source is read again.
  */
 export default {
 	name: 'CnConversationWidget',
@@ -38,8 +53,19 @@ export default {
 		CnConversationThread,
 	},
 
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+		/** Pre-bound action dispatcher of the page, for `replyAction`. */
+		cnDispatchAction: { default: null },
+	},
+
 	props: {
-		/** The widget's content. `field` is the dot-path to the messages on the record. */
+		/**
+		 * The widget's content: `field` (the dot-path to the messages on the
+		 * record) or `source`, the mapping keys, `endpoint` or `replyAction`,
+		 * and the texts (`title`, `replyLabel`, `placeholder`, `sendLabel`,
+		 * `emptyText`, translated).
+		 */
 		content: {
 			type: Object,
 			default: () => ({}),
@@ -62,29 +88,63 @@ export default {
 		return {
 			/** Replies sent from this widget that the record does not hold yet. */
 			sentHere: [],
+			/** The messages read from `source`. */
+			listed: [],
+			/** Whether `source` is being read. */
+			loading: false,
 		}
 	},
 
 	computed: {
+		/** @return {object|null} The register list the messages come from, or null. */
+		source() {
+			const source = this.content?.source
+			return source && typeof source === 'object' && source.register && source.schema ? source : null
+		},
+
+		/** @return {object|null} The reply action, or null. */
+		replyAction() {
+			const action = this.content?.replyAction
+			return action && typeof action === 'object' ? action : null
+		},
+
 		/**
-		 * The record's messages in the thread's shape, plus the replies sent here.
+		 * The messages in the thread's shape, oldest first, plus the replies
+		 * sent here.
 		 *
 		 * @return {Array<object>} The messages.
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-conversation-thread
+		 * @spec openspec/changes/conversation-source/specs/conversation-source/spec.md#requirement-a-conversation-reads-its-messages-from-a-list-and-maps-their-parts
 		 */
 		messages() {
-			const c = this.content
-			const value = readPath(this.objectData || {}, c.field || 'messages')
-			const usValue = String(c.usValue === undefined ? 'us' : c.usValue)
-			const stored = (Array.isArray(value) ? value : [])
+			const c = this.content || {}
+			const raw = this.source ? this.listed : readPath(this.objectData || {}, c.field || 'messages')
+			const usValue = String(c.outValue ?? c.usValue ?? 'us')
+			const channelMap = c.channelMap && typeof c.channelMap === 'object' ? c.channelMap : {}
+			const stored = (Array.isArray(raw) ? raw : [])
 				.filter((message) => message && typeof message === 'object')
-				.map((message) => ({
-					id: message.id,
-					author: readPath(message, c.authorField || 'author'),
-					time: readPath(message, c.timeField || 'time'),
-					text: readPath(message, c.textField || 'text'),
-					side: String(readPath(message, c.sideField || 'side')) === usValue ? 'us' : 'them',
-				}))
+				.map((message, index) => {
+					const channel = c.channelField ? readPath(message, c.channelField) : undefined
+					const channelKey = channel === undefined || channel === null ? '' : String(channel)
+					return {
+						id: message.id ?? `message-${index}`,
+						author: readPath(message, c.senderField || c.authorField || 'author'),
+						time: readPath(message, c.timestampField || c.timeField || 'time'),
+						text: readPath(message, c.bodyField || c.textField || 'text'),
+						side: String(readPath(message, c.directionField || c.sideField || 'side')) === usValue ? 'us' : 'them',
+						channel: channelKey === '' ? '' : this.tr(Object.hasOwn(channelMap, channelKey) ? channelMap[channelKey] : channelKey),
+						order: index,
+					}
+				})
+			const at = (message) => {
+				const ms = Date.parse(message.time)
+				return Number.isNaN(ms) ? null : ms
+			}
+			stored.sort((a, b) => {
+				const ta = at(a)
+				const tb = at(b)
+				return (ta === null || tb === null || ta === tb) ? a.order - b.order : ta - tb
+			})
 			return [...stored, ...this.sentHere]
 		},
 
@@ -101,6 +161,11 @@ export default {
 			}
 			return url.replace(/@objectId/g, encodeURIComponent(String(this.objectId ?? '')))
 		},
+
+		/** @return {object} The token context for `source.filter` and `replyAction`. */
+		tokenCtx() {
+			return { objectId: this.objectId, object: this.objectData || {} }
+		},
 	},
 
 	watch: {
@@ -108,9 +173,87 @@ export default {
 		objectData() {
 			this.sentHere = []
 		},
+
+		objectId: {
+			immediate: true,
+			handler() {
+				this.loadSource()
+			},
+		},
 	},
 
 	methods: {
+		/**
+		 * Translate through the app's translate.
+		 *
+		 * @param {string} key The source string.
+		 * @return {string}
+		 */
+		tr(key) {
+			return key && typeof this.cnTranslate === 'function' ? this.cnTranslate(key) : (key || '')
+		},
+
+		/**
+		 * Read the messages from `source`. A filter whose token does not
+		 * resolve sends no request; a failed read leaves the thread empty.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/conversation-source/specs/conversation-source/spec.md#requirement-a-conversation-reads-its-messages-from-a-list-and-maps-their-parts
+		 */
+		async loadSource() {
+			if (!this.source) {
+				return
+			}
+			const raw = this.source.filter || {}
+			const filter = resolveDeepTokens(raw, this.tokenCtx)
+			const emptied = Object.keys(raw).some((key) => typeof raw[key] === 'string' && raw[key].startsWith('@') && (filter[key] === '' || filter[key] === null || filter[key] === undefined))
+			if (emptied || hasUnresolvedDeepTokens(filter)) {
+				this.listed = []
+				return
+			}
+			this.loading = true
+			try {
+				this.listed = await fetchReferenceObjects({ register: this.source.register, schema: this.source.schema, filter, limit: this.source.limit || 200 })
+				this.sentHere = []
+			} catch {
+				this.listed = []
+			} finally {
+				this.loading = false
+			}
+		},
+
+		/**
+		 * Run `replyAction` with the reply, when there is one; the endpoint
+		 * path is the thread's own.
+		 *
+		 * @param {string} text The reply.
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/conversation-source/specs/conversation-source/spec.md#requirement-a-reply-can-run-an-app-action
+		 */
+		async onSend(text) {
+			if (!this.replyAction) {
+				return
+			}
+			const resolved = resolveDeepTokens(this.replyAction, this.tokenCtx)
+			const action = { ...resolved, args: [{ text, objectId: this.objectId }], props: { ...(resolved.props || {}), text } }
+			const result = typeof this.cnDispatchAction === 'function'
+				? this.cnDispatchAction(action)
+				: dispatchAction(action, { router: this.$router || null })
+			try {
+				const outcome = await result
+				if (outcome === false) {
+					return
+				}
+			} catch {
+				return
+			}
+			if (this.source) {
+				await this.loadSource()
+				return
+			}
+			this.onSent({ text })
+		},
+
 		/**
 		 * Show an accepted reply at once, without waiting for the record.
 		 *