Need Help: Implementing @Mentions in Bubble Chat Input (Slack‑style)

Need help
1

Hi everyone :waving_hand:,

I’m trying to implement an @mention feature in a chat system, similar to how Slack or Figma handles mentions.

What I’m trying to achieve

  • When a user types @ in the chat input, a dropdown (Repeating Group) appears

  • The dropdown shows collaborators on the current project

  • When a collaborator is clicked:

    • Their username is inserted into the input field

    • The cursor stays in the input so the user can continue typing the message

What I’ve done so far

  • :white_check_mark: The dropdown successfully appears when @ is typed

  • :white_check_mark: The Repeating Group correctly shows related collaborators

  • :white_check_mark: I’ve set up a custom state to capture the clicked user

The problem

When I click a user in the dropdown, nothing happens.
The custom state updates correctly, but the selected username is not inserted into the chat input.

Bubble AI suggestion (where I’m stuck)

Bubble AI suggested the following approach:

Set Input Content on
Input chat-message-input

Value:
Input chat-message-input's value
→ :split by "@"
→ :items until # (count - 1)
→ :joined with "@"
+ "@"
+ Current cell's User's UserProfile's full_name_text
+ " "

However, I’m stuck because:

  • I don’t see anywhere in Bubble workflows to “set an input’s value”

  • There doesn’t seem to be a native “Set Input Value” action

  • I’ve also explored regex-based approaches, but those still seem to require directly setting the input’s value, which I don’t know how to do

What I’m looking for

  • Has anyone successfully implemented a Slack‑style or Figma‑style @mention system in Bubble?

  • How do you properly insert the selected username into the input field?

  • Is this done with:

    • Custom states?

    • JavaScript?

    • Plugins?

  • A video tutorial, plugin recommendation, or example app would be extremely helpful

I do have a workaround, but I’d really like to do this the “proper” way rather than taking shortcuts.

Thanks in advance :folded_hands:

2

You probably achieve this using ToolBox Plugin and some Javascript.

The setup would be → When this dropdown changes value (Bubble native) → Run Javascript(Toolbox plugin)-> Function to append and update a Multiline/Input element using the id

3

Even more confussing. A video would come in handy at this point. I skimmed through youtube videos to see if any one has implemented it correctly. I couldn’t find one. If you could help with that i truly would be grateful. I’m pretty sure lot’s of people are looking for this same solution.