Create a reference widget AKA Smart Picker widget

[jospoortvliet]

☑️ Resolves

• Fix Create a reference widget AKA Smart Picker widget #19087

AI (if applicable)

• The content of this PR was partly or fully generated using AI

Claude Sonnet 5 to be exact, plus Codex in other parts.

Summary

Adds a real Talk widget for the Smart Picker (Reference Provider), replacing the generic open-graph card that a Talk conversation link now shows.

This means Talk conversation links render as a little conversation card: avatar, display name, conversation type, and the last message.

Still want to add room description too, as this got lost. And see what else we could show, making the widget a bit nicer. But first looking for some feedback.

This is read-only, and thus has no interactions like join a talk/chat. Maybe for a V2. But clicking of course opens the Talk room (link).

What changed

(Claude-generated description):

• RenderReferenceEventListener (new, lib/Collaboration/Reference/, registered in Application.php): listens for OCP\Collaboration\Reference\RenderReferenceEvent and loads the new talk-reference script bundle wherever a reference is rendered (Text, comments, Collectives, etc.).
• src/reference.ts (new entry point, added to rspack.config.js): registers a call widget for the Smart Picker with hasInteractiveView: false, fullWidth: false, isResizable: false.
• CallReferenceWidget.vue (new): fetches the conversation via the existing authorized conversation endpoint and renders avatar/name/type/last-message. Falls back to metadata-only (title from the Reference payload) when the room isn't accessible or the fetch fails.
• Small additive options param on fetchConversation() in conversationsService.ts — no behavior change for existing callers.
• Frontend unit tests (CallReferenceWidget.spec.ts, 6 cases) and a PHP test for the event listener.

Why client-side fetch, not a fatter Reference

TalkReferenceProvider caches resolved references by room (getCachePrefix()/getCacheKey()). Last message, participant state, etc. are volatile and have no sensible cache-invalidation story — putting them in the Reference payload would mean the widget serves stale data forever between cache refreshes. So the widget fetches live data itself, the same way the Talk UI does; fetchReference() is untouched.

Access control

No new access checks were added or changed. The existing endpoint used by the widget enforces the same authorization as the rest of Talk (lobby, federation proxy-cache, room membership); the widget just renders what it's given and shows the inaccessible/fallback state when the fetch fails or accessible === false comes back from the provider.

Scope

Out of scope: message history/list rendering, sending messages, reactions, polls, joining calls, live updates. None of src/components/MessagesList/ is touched.

Testing done

• npm run ts:check, eslint, stylelint — clean
• npm run test (vitest) — new + existing suites pass
• php -l, composer cs:fix, composer psalm — clean
• npm run build — succeeds
• PHP listener test (RenderReferenceEventListenerTest.php) — not run; this checkout isn't nested under a server install as tests/php/bootstrap.php requires. Needs to run in a proper dev environment before merge.

Open point for review

• Bundle size. The new reference entry is ~617 KiB (JS+CSS) — smaller than deck/maps (~840 KiB) but still over rspack's size-warning threshold, consistent with Talk's other standalone bundles. Flagging in case reviewers want the ConversationIcon reuse traded for a lighter custom avatar to shrink it further.

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

So I would like to make the widget higher - show a bit more of the image. Just not as crazy big as the original. And add a bit more info!

🏚️ Before	🏡 After
Screenshot before	Screenshot after
☀️ Light theme	🌑 Dark Theme

EDIT: check screenshots in comment below with changes implemented after feedback from Joas. Main change is the addition of more information to the widgets, like type of conversation, unread count, date/time of last comment etc.

🏚️ Before	🏡 After
Screenshot before	Screenshot after

🚧 Tasks

• get general feedback
• add description, increase avatar size and wrap the last message, add last message time and the type badge.
• add unread count and call in progress. <- these have the issue that they are not live. Well, neither are the others, but it's something to at least be aware off ;-)
• fix avatar size and aspect ratio in Talk

🏁 Checklist

• 🌏 Tested with different browsers / clients:
  • Chromium (Chrome / Edge / Opera / Brave)
  • Firefox
  • Safari
  • Integrations with Files sidebar and other apps
  • Not risky to browser differences / client
• 🖌️ Design was reviewed, approved or inspired by the design team
• ⛑️ Tests are included or not possible
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

---

🛠️ API Checklist

I don't think it does much in this space, right?

🚧 Tasks

• ...

🏁 Checklist

• ⛑️ Tests (unit and/or integration) are included or not possible
• 📘 API documentation in docs/ has been updated or is not required
• 🔖 Capability is added or not needed

Assisted-by: Claude Sonnet 5:claude-sonnet-5

[nickvergessen]

Hi @jospoortvliet thanks for your contribution.

• Please note that you still need to apply the Signed-off-by: with your personal details on all commits, otherwise we can not legally take them into the product: https://github.com/nextcloud/server/blob/master/.github/CONTRIBUTING.md#sign-your-work

Regarding the actual changes:
I think it's a good to improve them in general and having them as 2-line bubbles is fine. However now it's no longer possible to distinguish if a message or conversation was shared. I think we should use:

• Room link:
  • Title: Conversation name
  • Image: Conversation avatar
  • Subline: Conversation description
• Message link:
  • Title: "Actor displayname" in "Conversation name" (like we have for search results)
  • Image: Actor avatar
  • Subline: Message text

Also there seems to be a problem with the avatars at least on Firefox:

[jospoortvliet]

So, fixed the DCO, and added more info to the widget:

Next, that avatar issue, I see it too. Not sure why it looked good for me before. Will fix.

[jospoortvliet]

Ok, pushed a fix. I went for a fairly large size, 20% of the width of the full widget's available space, but constrained by its height:

The main sizing logic is in CallReferenceWidget.vue.

Inside .talk-reference-call__avatar-frame is that 20%, easy to tune, giving the frame this fixed 20% of the widget's available width:

flex: 0 0 20%;

If set 10 10%, you get this:

I like 20% more, but - it's a judgement call of course.

The whole sizing logic:

• .talk-reference-call fills the reference-widget host with width: 100%.
• The avatar frame gets 20% of that width.
• The text body takes the remainder through flex: 1.
• The frame stretches with the card height and centers its content with place-items: center.
• The actual ConversationIcon and fallback image are forced to use the frame width, remain square through aspect-ratio: 1, and use object-fit: cover.
• Scoped :deep rules try to protect image dimensions from CSS applied by Talk and other apps the widget appears in.