Mention Integration in Vue Chat UI component

9 Sep 202518 minutes to read

The Syncfusion ChatUI allows users to mention others in messages using the @ character, with an dropdown for selecting users. The following sections explain how to configure mentions

Configure mention users

You can use the mentionUsers property to define an array of users for the mention suggestion popup.

<template>
  <div style="height: 380px; width: 450px; margin: 0 auto;">
    <ejs-chatui :user="currentUser" :enableRipple="true" :mentionUsers="mentionUsers" headerText="TeamSync Professionals">
<e-messages>
        <e-message :author="currentUser" text="Want to get coffee tomorrow?" ></e-message>
        <e-message :author="michaleUser" text="Sure! What time?" ></e-message>
        <e-message :author="currentUser" text="{0} How about 10 AM?" :mentionUsers="[michaleUser]" ></e-message>
      </e-messages>
    </ejs-chatui>
  </div>
</template>

<script>
import { enableRipple } from '@syncfusion/ej2-base';
import { ChatUIComponent, MessagesDirective, MessageDirective } from "@syncfusion/ej2-vue-interactive-chat";

enableRipple(true);

export default {
  components: {
    'ejs-chatui': ChatUIComponent,
    'e-messages': MessagesDirective,
    'e-message': MessageDirective
  },
  data() {
    return {
      currentUser: {
        id: "user1",
        user: "Albert"
      },
      michaleUser: {
        id: "user2",
        user: "Michale Suyama"
      },
      mentionUsers: [
        {
          id: "user1",
          user: "Albert"
        },
        {
          id: "user2",
          user: "Michale Suyama"
        }
      ]
    };
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
</style>
<template>
  <div style="height: 380px; width: 450px; margin: 0 auto;">
    <ejs-chatui :user="currentUser" :enableRipple="true" :mentionUsers="mentionUsers" headerText="TeamSync Professionals">
<e-messages>
        <e-message :author="currentUser" text="Want to get coffee tomorrow?" ></e-message>
        <e-message :author="michaleUser" text="Sure! What time?" ></e-message>
        <e-message :author="currentUser" text="{0} How about 10 AM?" :mentionUsers="[michaleUser]" ></e-message>
      </e-messages>
    </ejs-chatui>
  </div>
</template>

<script>
import { enableRipple } from '@syncfusion/ej2-base';
import { ChatUIComponent, MessagesDirective, MessageDirective } from "@syncfusion/ej2-vue-interactive-chat";

enableRipple(true);

export default {
  components: {
    'ejs-chatui': ChatUIComponent,
    'e-messages': MessagesDirective,
    'e-message': MessageDirective
  },
  data() {
    return {
      currentUser: {
        id: "user1",
        user: "Albert"
      },
      michaleUser: {
        id: "user2",
        user: "Michale Suyama"
      },
      mentionUsers: [
        {
          id: "user1",
          user: "Albert"
        },
        {
          id: "user2",
          user: "Michale Suyama"
        }
      ]
    };
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
</style>

Customize the mention trigger character

You can use the mentionTriggerChar property to customize the character which triggers the mention popup. The default value is @.

<template>
  <div style="height: 380px; width: 450px; margin: 0 auto;">
    <ejs-chatui :user="currentUser" :enableRipple="true" :mentionUsers="mentionUsers" mentionTriggerChar="/" headerText="TeamSync Professionals">
<e-messages>
        <e-message :author="currentUser" text="Want to get coffee tomorrow?" ></e-message>
        <e-message :author="michaleUser" text="Sure! What time?" ></e-message>
        <e-message :author="currentUser" text="{0} How about 10 AM?" :mentionUsers="[michaleUser]" ></e-message>
      </e-messages>
    </ejs-chatui>
  </div>
</template>

<script>
import { enableRipple } from '@syncfusion/ej2-base';
import { ChatUIComponent, MessagesDirective, MessageDirective } from "@syncfusion/ej2-vue-interactive-chat";

enableRipple(true);

export default {
  components: {
    'ejs-chatui': ChatUIComponent,
    'e-messages': MessagesDirective,
    'e-message': MessageDirective
  },
  data() {
    return {
      currentUser: {
        id: "user1",
        user: "Albert"
      },
      michaleUser: {
        id: "user2",
        user: "Michale Suyama"
      },
      mentionUsers: [
        {
          id: "user1",
          user: "Albert"
        },
        {
          id: "user2",
          user: "Michale Suyama"
        }
      ]
    };
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
</style>
<template>
  <div style="height: 380px; width: 450px; margin: 0 auto;">
    <ejs-chatui :user="currentUser" :enableRipple="true" :mentionUsers="mentionUsers" mentionTriggerChar="/" headerText="TeamSync Professionals">
<e-messages>
        <e-message :author="currentUser" text="Want to get coffee tomorrow?" ></e-message>
        <e-message :author="michaleUser" text="Sure! What time?" ></e-message>
        <e-message :author="currentUser" text="{0} How about 10 AM?" :mentionUsers="[michaleUser]" ></e-message>
      </e-messages>
    </ejs-chatui>
  </div>
</template>

<script>
import { enableRipple } from '@syncfusion/ej2-base';
import { ChatUIComponent, MessagesDirective, MessageDirective } from "@syncfusion/ej2-vue-interactive-chat";

enableRipple(true);

export default {
  components: {
    'ejs-chatui': ChatUIComponent,
    'e-messages': MessagesDirective,
    'e-message': MessageDirective
  },
  data() {
    return {
      currentUser: {
        id: "user1",
        user: "Albert"
      },
      michaleUser: {
        id: "user2",
        user: "Michale Suyama"
      },
      mentionUsers: [
        {
          id: "user1",
          user: "Albert"
        },
        {
          id: "user2",
          user: "Michale Suyama"
        }
      ]
    };
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
</style>

Predefine mentions with messages

You can use the text property in the e-message tag directive to include predefined mentions in chat messages. The mentions field stores the selected users for each message.

The mentionUsers property in a message contains a list of users, mapped by their order where the placeholder {0} is replaced by the first user, {1} by the second, and so on, automatically generating mentions in the user interface. If a placeholder’s index is negative or exceeds the bounds of the mentionUsers array (e.g., using {5} with only two users), the mapping for that placeholder fails, and the placeholder text itself (e.g., {5}) is displayed in the final message.

<template>
  <div style="height: 380px; width: 450px; margin: 0 auto;">
    <ejs-chatui :user="currentUser" :enableRipple="true" headerText="TeamSync Professionals">
      <e-messages>
        <e-message :author="currentUser" text="Hi {0}, are we on track for the deadline?" :mentionUsers="[michaleUser]"></e-message>
        <e-message :author="michaleUser" text="Yes {0}, the design phase is complete." :mentionUsers="[currentUser]"></e-message>
        <e-message :author="currentUser" text="I’ll review it and send feedback by today."></e-message>
      </e-messages>
    </ejs-chatui>
  </div>
</template>

<script setup>
import { ChatUIComponent as EjsChatui, MessagesDirective as EMessages, MessageDirective as EMessage } from "@syncfusion/ej2-vue-interactive-chat";
import { enableRipple } from '@syncfusion/ej2-base';

const currentUser = {
  id: "user1",
  user: "Albert"
};

const michaleUser = {
  id: "user2",
  user: "Michale Suyama"
};

enableRipple(true);
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
</style>
<template>
  <div style="height: 380px; width: 450px; margin: 0 auto;">
    <ejs-chatui :user="currentUser" :enableRipple="true" headerText="TeamSync Professionals">
      <e-messages>
        <e-message :author="currentUser" text="Hi {0}, are we on track for the deadline?" :mentionUsers="[michaleUser]"></e-message>
        <e-message :author="michaleUser" text="Yes {0}, the design phase is complete." :mentionUsers="[currentUser]"></e-message>
        <e-message :author="currentUser" text="I’ll review it and send feedback by today."></e-message>
      </e-messages>
    </ejs-chatui>
  </div>
</template>

<script>
import { ChatUIComponent, MessagesDirective, MessageDirective } from "@syncfusion/ej2-vue-interactive-chat";
import { enableRipple } from '@syncfusion/ej2-base';

export default {
  components: {
    'ejs-chatui': ChatUIComponent,
    'e-messages': MessagesDirective,
    'e-message': MessageDirective
  },
  data() {
    return {
      currentUser: {
        id: "user1",
        user: "Albert"
      },
      michaleUser: {
        id: "user2",
        user: "Michale Suyama"
      }
    };
  },
  created() {
    enableRipple(true);
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
</style>

Configure mentionSelect

You can use the mentionSelect event which triggers when a user selects an item from the mention dropdown, providing access to the selected user’s details for custom handling.

<template>
  <div style="height: 380px; width: 450px; margin: 0 auto;">
    <ejs-chatui 
      :mentionUsers="mentionUsers" 
      :mentionSelect="mentionSelect" 
    ></ejs-chatui>
  </div>
</template>

<script setup>
import { ChatUIComponent as EjsChatui } from "@syncfusion/ej2-vue-interactive-chat";
import { enableRipple } from "@syncfusion/ej2-base";

// Enable ripple effect
enableRipple(true);
const currentUserModel = {
  id: "user1",
  user: "Albert"
};
const michaleUserModel = {
  id: "user2",
  user: "Michale Suyama"
};

const mentionUsers = [currentUserModel, michaleUserModel];

const mentionSelect = (args) => {
  // Your required action here
};

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
</style>
<template>
  <div style="height: 380px; width: 450px; margin: 0 auto;">
    <ejs-chatui 
      :mentionUsers="mentionUsers" 
      :mentionSelect="mentionSelect" 
    ></ejs-chatui>
  </div>
</template>

<script>
import { ChatUIComponent } from "@syncfusion/ej2-vue-interactive-chat";
import { enableRipple } from "@syncfusion/ej2-base";

// Enable ripple effect
enableRipple(true);

export default {
  components: {
    'ejs-chatui': ChatUIComponent
  },
  data() {
    return {
      // Define user models for mentions
      mentionUsers: [
        {
          id: "user1",
          user: "Albert"
        },
        {
          id: "user2",
          user: "Michale Suyama"
        }
      ],
      mentionSelect: (args) => {
        // Your required action here
      }
    };
  },
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
</style>