Replace "[AI]" with AI icon in `FormTokenField`'s tokens

[faisal-alvi]

trafficstars

In #609, we introduced a pop-up for pre post classification purposes, showcasing terms generated by the AI alongside existing ones. To distinguish AI-generated terms, an "[AI]" prefix was added, as illustrated in the screenshot below:

Internally, there's a discussion about removing the "[AI]" prefix and replacing it with the default AI icon used elsewhere, such as in the "Classifai" panel within the post sidebar. The FormTokenField component is used to display terms, seems like it doesn't provide support to add icons to specific terms. To address this, customization or overwriting of the component may be required but better suggestions are welcome.

[faisal-alvi]

@fabiankaegy your feedback on this would be greatly appreciated.

[fabiankaegy]

@faisal-alvi could you maybe use the __experimentalRenderItem prop on the FormTokenField component? https://github.com/WordPress/gutenberg/blob/57ef059aabad25d730d04dff131b337e88d44699/packages/components/src/form-token-field/index.tsx#L69C3-L69C27

[iamdharmesh]

@faisal-alvi could you maybe use the __experimentalRenderItem prop on the FormTokenField component?

I have checked on this and __experimentalRenderItem works only for the suggestions list. For Token (term) we have the displayTransform prop but it expects a string in return so, it wouldn't work here. As of now I don't see any other possible extend options.