import { useAutocompleteChipClick, useAutocompleteUtils } from '@veltdev/react';

export default function YourDocument() {
  
    const autocompleteElement = useAutocompleteUtils();
    autocompleteElement.onAutocompleteChipClick().subscribe(_data => {
        console.log(_data);
    })

    let autocompleteChipData = useAutocompleteChipClick(); 

  return (
    <div>
        Clicked Chip: { autocompleteChipData.name }
    </div>
  )
}

You can have custom dropdown lists appear when certain hotkeys are pressed.

When you press a hotkey inside the Comment Dialog composer, it will open a dropdown list of items that you can select.

Selecting an item frop the dropdown list will create a chip that is placed in the comment text.

1

Get an autocompleteElement instance

First get an autocompleteElement using one of the following methods:

const autocompleteElement = client.getAutocompleteElement();
const autocompleteElement = useAutocompleteUtils();
2

Then, use the autocompleteElement.create() method and pass in a hotkey and list of autocomplete data.

Make sure the hotkey is a single character such as # or /

The list of data will be shown when the hotkey is pressed.

The Autocomplete items in the list must be in the following schema:

export class AutocompleteItem {
    id!: string;
    name!: string;
    description?: string;
    icon?: { url?: string, svg?: string };
    link?: string;
}
PropertyTypeOptionalDescription
idstringNoUnique identifier
namestringNoName of the item
descriptionstringYesOptional description
iconobjectYesOptional icon information
- icon.urlstringYesURL of the icon
- icon.svgstringYesSVG representation of icon
linkstringYesLink associated with item

For example:

let autocompleteData = [
    {
        id: '1',
        name: 'Name 1',
        description: 'Test Description 1'
    },
    {
        id: '2',
        name: 'Name 2',
        description: 'Test Description 2'
    },
    {
        id: '3',
        name: 'Name 3',
        description: 'Test Description 3'
    }
]
autocompleteElement.create({
	hotkey: "UNIQUE_HOTKEY", // only single spacial charater is allowed
	type: "custom",   
    list: [], // your autocomplete data here
});
3

Listen to click event data on chips

When you click on an item in the Autocomplete dropdown list, a chip will be added in your Comment.

If you want to listen to click event data when a User clicks on a chip, you can use the following methods and hooks.

Subscribe to clicks on chips:

autocompleteElement.onAutocompleteChipClick().subscribe(_data => {
    console.log(_data);
})

Hook to get the data of the most recently clicked chip:

let autocompleteChipData = useAutocompleteChipClick();