Mentions and User Tagging

Implement intelligent mention functionality that allows users to tag people, products, or any custom entities within message inputs. This feature supports custom data structures, grouping, search functionality, and styled display with avatars and metadata.

Setup

1. Register callback

Important: The callback name "get_mentions_data" is required for mentions functionality.

copilot(
  "init",
  {},
  function () {
    copilot.callbacks.add({
      name: "get_mentions_data",
      handler: () => [
        {
          type: "group",
          title: "Team",
          items: [
            {
              id: "alice",
              title: "Alice Johnson",
              directive: "Frontend Developer",
              icon: "https://example.com/alice.jpg",
            },
          ],
        },
        {
          id: "support",
          title: "Quick Support",
          directive: "Get help immediately",
        },
      ],
    });
  }
);

2. Data structure

Validation rules

• All IDs must be unique
• Titles max 50 characters
• Required fields: id, title, directive
• Single level grouping only

// Single item
{
  id: "unique_id",
  title: "Display Name",
  directive: "Additional context",
  icon?: "https://example.com/avatar.jpg"
}

// Group
{
  type: "group",
  title: "Group Name",
  items: [/* items */],
  searchPlaceholder?: "Custom search text"
}

Usage

How to use

1. Type @ in message input
2. Dropdown appears with options
3. Type to search or use arrow keys
4. Press Enter or click to select
5. Mention appears as styled chip

Type @ to open the mentions menu, search, and select.

Keyboard shortcuts

• @: Open mentions dropdown
• ↑/↓: Navigate options
• Enter: Select mention
• Escape: Close dropdown

Message Format

Mentions are stored in the backend in this format:

"Hello @<<user1>>, please review @<<prod1>>"

Display behavior:

• Renders as styled chips with avatars
• Uses primary button color for styling
• Falls back to initials if image fails

Troubleshooting

Common issues

• Required callback names:
  • Mentions: Must use "get_mentions_data"
  • Image preview: Must use "__agent_message_image_click"
• Verify callback returns valid data structure
• Ensure all items have unique IDs
• Check browser console for errors