Create a reference widget AKA Smart Picker widget

lib/AppInfo/Application.php

@@ -27,6 +27,7 @@
 use OCA\Talk\Chat\SystemMessage\Listener as SystemMessageListener;
 use OCA\Talk\Collaboration\Collaborators\Listener as CollaboratorsListener;
 use OCA\Talk\Collaboration\Reference\ReferenceInvalidationListener;
+use OCA\Talk\Collaboration\Reference\RenderReferenceEventListener as TalkRenderReferenceEventListener;
 use OCA\Talk\Collaboration\Reference\TalkReferenceProvider;
 use OCA\Talk\Collaboration\Resources\ConversationProvider;
 use OCA\Talk\Collaboration\Resources\Listener as ResourceListener;
@@ -142,6 +143,7 @@
 use OCP\Calendar\Events\CalendarObjectCreatedEvent;
 use OCP\Calendar\Events\CalendarObjectUpdatedEvent;
 use OCP\Collaboration\AutoComplete\AutoCompleteFilterEvent;
+use OCP\Collaboration\Reference\RenderReferenceEvent;
 use OCP\Collaboration\Resources\IProviderManager;
 use OCP\Collaboration\Resources\LoadAdditionalScriptsEvent;
 use OCP\Config\BeforePreferenceSetEvent;
@@ -266,6 +268,7 @@
 		$context->registerEventListener(LobbyModifiedEvent::class, ReferenceInvalidationListener::class);
 		$context->registerEventListener(RoomDeletedEvent::class, ReferenceInvalidationListener::class);
 		$context->registerEventListener(RoomModifiedEvent::class, ReferenceInvalidationListener::class);
+		$context->registerEventListener(RenderReferenceEvent::class, TalkRenderReferenceEventListener::class);
 
 		// Resources listeners
 		$context->registerEventListener(AttendeesAddedEvent::class, ResourceListener::class);
@@ -420,7 +423,7 @@
 	}
 
 	public function registerNavigationLink(INavigationManager $navigationManager): void {
 		$navigationManager->add(static function () {
 			$config = Server::get(Config::class);
 			$userSession = Server::get(IUserSession::class);
 			$urlGenerator = Server::get(IURLGenerator::class);

lib/Collaboration/Reference/RenderReferenceEventListener.php

@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+namespace OCA\Talk\Collaboration\Reference;
+
+use OCA\Talk\AppInfo\Application;
+use OCP\Collaboration\Reference\RenderReferenceEvent;
+use OCP\EventDispatcher\Event;
+use OCP\EventDispatcher\IEventListener;
+use OCP\Util;
+
+/**
+ * Loads the Talk reference widget bundle whenever a page might render
+ * references (e.g. link previews or Smart Picker widgets), so a Talk
+ * conversation link can be rendered with a richer, Talk-specific widget
+ * instead of the generic link preview.
+ *
+ * @template-implements IEventListener<Event>
+ */
+class RenderReferenceEventListener implements IEventListener {
+	#[\Override]
+	public function handle(Event $event): void {
+		if (!($event instanceof RenderReferenceEvent)) {
+			return;
+		}
+
+		Util::addScript(Application::APP_ID, 'talk-reference');
+	}
+}

rspack.config.js

@@ -53,6 +53,7 @@ module.exports = defineConfig((env) => {
 			deck: path.join(__dirname, 'src', 'deck.js'),
 			maps: path.join(__dirname, 'src', 'maps.js'),
 			search: path.join(__dirname, 'src', 'search.js'),
+			reference: path.join(__dirname, 'src', 'reference.ts'),
 			icons: path.join(__dirname, 'src', 'icons.css'),
 		},
 

src/components/ReferenceWidgets/CallReferenceWidget.spec.ts

@@ -0,0 +1,167 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, test, vi } from 'vitest'
+import ConversationIcon from '../ConversationIcon.vue'
+import { CONVERSATION, MESSAGE } from '../../constants.ts'
+import { fetchConversation } from '../../services/conversationsService.ts'
+import CallReferenceWidget from './CallReferenceWidget.vue'
+
+vi.mock('../../services/conversationsService.ts', () => ({
+	fetchConversation: vi.fn(),
+}))
+
+// ConversationIcon reads capabilities/cached conversations from BrowserStorage at import time
+vi.mock('../../services/CapabilitiesManager.ts', () => ({
+	hasTalkFeature: vi.fn(() => false),
+	getTalkConfig: vi.fn(),
+}))
+
+describe('CallReferenceWidget.vue', () => {
+	const richObject = {
+		id: 'XXTOKENXX',
+		name: 'Fallback conversation name',
+		link: 'https://nextcloud.local/call/XXTOKENXX',
+		'call-type': 'group',
+	}
+
+	/**
+	 * @param props additional props to merge on top of the defaults
+	 */
+	function mountWidget(props = {}) {
+		return mount(CallReferenceWidget, {
+			props: {
+				richObject,
+				accessible: true,
+				...props,
+			},
+		})
+	}
+
+	test('renders nothing when the reference is not accessible', async () => {
+		const wrapper = mountWidget({ accessible: false })
+		await flushPromises()
+
+		expect(wrapper.find('a').exists()).toBe(false)
+		expect(fetchConversation).not.toHaveBeenCalled()
+	})
+
+	test('renders the live conversation once loaded', async () => {
+		vi.mocked(fetchConversation).mockResolvedValueOnce({
+			data: {
+				ocs: {
+					data: {
+						token: 'XXTOKENXX',
+						displayName: 'Live conversation name',
+						type: CONVERSATION.TYPE.GROUP,
+					},
+				},
+			},
+		})
+
+		const wrapper = mountWidget()
+		await flushPromises()
+
+		expect(fetchConversation).toHaveBeenCalledWith('XXTOKENXX')
+		expect(wrapper.text()).toContain('Live conversation name')
+		expect(wrapper.findComponent(ConversationIcon).exists()).toBe(true)
+	})
+
+	test('falls back to the reference metadata when the live fetch fails', async () => {
+		vi.mocked(fetchConversation).mockRejectedValueOnce(new Error('403'))
+
+		const wrapper = mountWidget({ fallbackAvatarUrl: 'https://nextcloud.local/avatar.png' })
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Fallback conversation name')
+		expect(wrapper.findComponent(ConversationIcon).exists()).toBe(false)
+		expect(wrapper.find('img').attributes('src')).toBe('https://nextcloud.local/avatar.png')
+	})
+
+	test('does not show an expired last message', async () => {
+		vi.mocked(fetchConversation).mockResolvedValueOnce({
+			data: {
+				ocs: {
+					data: {
+						token: 'XXTOKENXX',
+						displayName: 'Live conversation name',
+						type: CONVERSATION.TYPE.GROUP,
+						lastMessage: {
+							actorDisplayName: 'Alice',
+							actorType: 'users',
+							message: 'hello',
+							messageParameters: {},
+							messageType: 'comment',
+							systemMessage: '',
+							expirationTimestamp: 1,
+						},
+					},
+				},
+			},
+		})
+
+		const wrapper = mountWidget()
+		await flushPromises()
+
+		expect(wrapper.text()).not.toContain('hello')
+	})
+
+	test('does not show a deleted last message', async () => {
+		vi.mocked(fetchConversation).mockResolvedValueOnce({
+			data: {
+				ocs: {
+					data: {
+						token: 'XXTOKENXX',
+						displayName: 'Live conversation name',
+						type: CONVERSATION.TYPE.GROUP,
+						lastMessage: {
+							actorDisplayName: 'Alice',
+							actorType: 'users',
+							message: 'hello',
+							messageParameters: {},
+							messageType: MESSAGE.TYPE.COMMENT_DELETED,
+							systemMessage: '',
+							expirationTimestamp: 0,
+						},
+					},
+				},
+			},
+		})
+
+		const wrapper = mountWidget()
+		await flushPromises()
+
+		expect(wrapper.text()).not.toContain('hello')
+	})
+
+	test('shows a non-expired last message with its actor', async () => {
+		vi.mocked(fetchConversation).mockResolvedValueOnce({
+			data: {
+				ocs: {
+					data: {
+						token: 'XXTOKENXX',
+						displayName: 'Live conversation name',
+						type: CONVERSATION.TYPE.GROUP,
+						lastMessage: {
+							actorDisplayName: 'Alice',
+							actorType: 'users',
+							message: 'hello',
+							messageParameters: {},
+							messageType: 'comment',
+							systemMessage: '',
+							expirationTimestamp: 0,
+						},
+					},
+				},
+			},
+		})
+
+		const wrapper = mountWidget()
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Alice: hello')
+	})
+})

src/components/ReferenceWidgets/CallReferenceWidget.vue

@@ -0,0 +1,157 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<a
+		v-if="accessible"
+		class="talk-reference-call"
+		:href="richObject.link"
+		target="_blank"
+		rel="noopener noreferrer">
+		<NcLoadingIcon v-if="loading" :size="32" />
+
+		<template v-else>
+			<ConversationIcon
+				v-if="conversation"
+				:item="conversation"
+				:size="AVATAR.SIZE.DEFAULT"
+				hideUserStatus />
+			<img
+				v-else-if="fallbackAvatarUrl"
+				:src="fallbackAvatarUrl"
+				:alt="displayName"
+				class="talk-reference-call__fallback-avatar">
+
+			<span class="talk-reference-call__body">
+				<span class="talk-reference-call__title">{{ displayName }}</span>
+				<span v-if="lastMessagePreview" class="talk-reference-call__subtitle">{{ lastMessagePreview }}</span>
+			</span>
+		</template>
+	</a>
+</template>
+
+<script setup lang="ts">
+import type { Conversation, TalkReferenceRichObject } from '../../types/index.ts'
+
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import ConversationIcon from '../ConversationIcon.vue'
+import { AVATAR, MESSAGE } from '../../constants.ts'
+import { fetchConversation } from '../../services/conversationsService.ts'
+import { getDisplayNameWithFallback } from '../../utils/getDisplayName.ts'
+import { parseToSimpleMessage } from '../../utils/textParse.ts'
+
+const props = defineProps<{
+	richObject: TalkReferenceRichObject
+	accessible: boolean
+	/** Server-rendered fallback avatar (open graph thumbnail), used only until/if the live conversation loads */
+	fallbackAvatarUrl?: string | null
+}>()
+
+const loading = ref(true)
+const conversation = ref<Conversation | null>(null)
+let cancelled = false
+
+onMounted(async () => {
+	if (!props.accessible) {
+		loading.value = false
+		return
+	}
+
+	try {
+		const response = await fetchConversation(props.richObject.id)
+		if (!cancelled) {
+			conversation.value = response.data.ocs.data
+		}
+	} catch (error) {
+		// Show less rather than showing something wrong: fall back to the reference metadata
+		console.debug('Could not load live Talk conversation data for reference widget', error)
+	} finally {
+		if (!cancelled) {
+			loading.value = false
+		}
+	}
+})
+
+onBeforeUnmount(() => {
+	cancelled = true
+})
+
+const displayName = computed(() => conversation.value?.displayName || props.richObject.name)
+
+const fallbackAvatarUrl = computed(() => props.fallbackAvatarUrl ?? null)
+
+/**
+ * A short "actor: message" preview of the conversation's last message.
+ * Only shown when the live conversation response demonstrably includes a non-expired,
+ * non-deleted, non-system message; otherwise omitted entirely.
+ */
+const lastMessagePreview = computed(() => {
+	const lastMessage = conversation.value?.lastMessage
+	if (!lastMessage) {
+		return ''
+	}
+
+	if (lastMessage.messageType === MESSAGE.TYPE.COMMENT_DELETED || lastMessage.systemMessage) {
+		return ''
+	}
+
+	if (lastMessage.expirationTimestamp !== 0 && lastMessage.expirationTimestamp * 1000 <= Date.now()) {
+		return ''
+	}
+
+	const text = parseToSimpleMessage(lastMessage.message, lastMessage.messageParameters)
+	if (!text) {
+		return ''
+	}
+
+	const actor = getDisplayNameWithFallback(lastMessage.actorDisplayName, lastMessage.actorType)
+	return actor ? `${actor}: ${text}` : text
+})
+</script>
+
+<style lang="scss" scoped>
+.talk-reference-call {
+	display: flex;
+	align-items: center;
+	gap: calc(var(--default-grid-baseline) * 2);
+	padding: calc(var(--default-grid-baseline) * 2);
+	color: var(--color-main-text);
+	text-decoration: none;
+
+	&:hover,
+	&:focus {
+		background-color: var(--color-background-hover);
+		border-radius: var(--border-radius-large);
+	}
+
+	&__fallback-avatar {
+		width: v-bind('`${AVATAR.SIZE.DEFAULT}px`');
+		height: v-bind('`${AVATAR.SIZE.DEFAULT}px`');
+		border-radius: 50%;
+		object-fit: cover;
+	}
+
+	&__body {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+
+	&__title {
+		font-weight: bold;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__subtitle {
+		color: var(--color-text-maxcontrast);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+</style>