mirror of
https://github.com/twentyhq/twenty
synced 2026-04-21 21:47:38 +00:00
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>
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { type BLOCK_SCHEMA } from '@/blocknote-editor/blocks/Schema';
|
|
|
|
import { useComponentsContext } from '@blocknote/react';
|
|
|
|
type CustomAddBlockItemProps = {
|
|
editor: typeof BLOCK_SCHEMA.BlockNoteEditor;
|
|
children: React.ReactNode; // Adding the children prop
|
|
};
|
|
|
|
type ContentItem = {
|
|
type: string;
|
|
text: string;
|
|
styles: any;
|
|
};
|
|
export const CustomAddBlockItem = ({
|
|
editor,
|
|
children,
|
|
}: CustomAddBlockItemProps) => {
|
|
const Components = useComponentsContext();
|
|
|
|
if (!Components) {
|
|
return null;
|
|
}
|
|
|
|
const handleClick = () => {
|
|
const blockIdentifier = editor.getTextCursorPosition().block;
|
|
const currentBlockContent = blockIdentifier?.content as
|
|
| Array<ContentItem>
|
|
| undefined;
|
|
|
|
const [firstElement] = currentBlockContent || [];
|
|
|
|
if (firstElement === undefined) {
|
|
editor.openSuggestionMenu('/');
|
|
} else {
|
|
editor.openSuggestionMenu('/');
|
|
editor.sideMenu.unfreezeMenu();
|
|
}
|
|
};
|
|
return (
|
|
<Components.Generic.Menu.Item onClick={handleClick}>
|
|
{children}
|
|
</Components.Generic.Menu.Item>
|
|
);
|
|
};
|