Félix Malfait
6f251a6f8e
## Summary
- Add `@mention` support to the AI Chat text input by replacing the
plain textarea with a minimal Tiptap editor and building a shared
`mention` module with reusable Tiptap extensions (`MentionTag`,
`MentionSuggestion`), search hook (`useMentionSearch`), and suggestion
menu — all shared with the existing BlockNote-based Notes mentions to
avoid code duplication
- Mentions are serialized as
`[[record:objectName:recordId:displayName]]` markdown (the format
already understood by the backend and rendered in chat messages), and
displayed using the existing `RecordLink` chip component for visual
consistency
- Fix images in chat messages overflowing their container by
constraining to `max-width: 100%`
- Fix web_search tool display showing literal `{query}` instead of the
actual query (ICU single-quote escaping issue in Lingui `t` tagged
templates)
## Test plan
- [ ] Open AI Chat, type `@` and verify the suggestion menu appears with
searchable records
- [ ] Select a mention from the dropdown (via click or keyboard
Enter/ArrowUp/Down) and verify the record chip renders inline
- [ ] Send a message containing a mention and verify it appears
correctly in the conversation as a clickable `RecordLink`
- [ ] Verify Enter sends the message when the suggestion menu is closed,
and selects a mention when the menu is open
- [ ] Verify images in AI chat responses are constrained to the
container width
- [ ] Verify the web_search tool step shows the actual search query
(e.g. "Searched the web for Salesforce") instead of `{query}`
- [ ] Verify Notes @mentions still work as before
Made with [Cursor](https://cursor.com)
---------
Co-authored-by: Cursor <cursoragent@cursor.com>
72 lines
1.5 KiB
TypeScript
72 lines
1.5 KiB
TypeScript
import { getDefaultReactSlashMenuItems } from '@blocknote/react';
|
|
|
|
import { type SuggestionItem } from '@/blocknote-editor/components/CustomSlashMenu';
|
|
|
|
import { type BLOCK_SCHEMA } from '@/blocknote-editor/blocks/Schema';
|
|
import {
|
|
IconBlockquote,
|
|
IconCode,
|
|
type IconComponent,
|
|
IconFile,
|
|
IconH1,
|
|
IconH2,
|
|
IconH3,
|
|
IconHeadphones,
|
|
IconList,
|
|
IconListCheck,
|
|
IconListNumbers,
|
|
IconMoodSmile,
|
|
IconPhoto,
|
|
IconPilcrow,
|
|
IconTable,
|
|
IconVideo,
|
|
} from 'twenty-ui/display';
|
|
|
|
const Icons: Record<string, IconComponent> = {
|
|
'Heading 1': IconH1,
|
|
'Heading 2': IconH2,
|
|
'Heading 3': IconH3,
|
|
Quote: IconBlockquote,
|
|
'Numbered List': IconListNumbers,
|
|
'Bullet List': IconList,
|
|
'Check List': IconListCheck,
|
|
'Code Block': IconCode,
|
|
Paragraph: IconPilcrow,
|
|
Table: IconTable,
|
|
Image: IconPhoto,
|
|
Video: IconVideo,
|
|
Audio: IconHeadphones,
|
|
Emoji: IconMoodSmile,
|
|
};
|
|
|
|
export const getSlashMenu = (editor: typeof BLOCK_SCHEMA.BlockNoteEditor) => {
|
|
const items: SuggestionItem[] = [
|
|
...getDefaultReactSlashMenuItems(editor).map((x) => ({
|
|
...x,
|
|
Icon: Icons[x.title],
|
|
})),
|
|
{
|
|
title: 'File',
|
|
aliases: ['file', 'folder'],
|
|
Icon: IconFile,
|
|
onItemClick: () => {
|
|
const currentBlock = editor.getTextCursorPosition().block;
|
|
|
|
editor.insertBlocks(
|
|
[
|
|
{
|
|
type: 'file',
|
|
props: {
|
|
url: undefined,
|
|
},
|
|
},
|
|
],
|
|
currentBlock,
|
|
'before',
|
|
);
|
|
},
|
|
},
|
|
];
|
|
return items;
|
|
};
|