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>
68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
import { SEARCH_QUERY } from '@/command-menu/graphql/queries/search';
|
|
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
|
|
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
|
|
import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
|
|
import { getObjectPermissionsFromMapByObjectMetadataId } from '@/settings/roles/role-permissions/objects-permissions/utils/getObjectPermissionsFromMapByObjectMetadataId';
|
|
import { useCallback, useMemo } from 'react';
|
|
import {
|
|
type SearchQuery,
|
|
type SearchQueryVariables,
|
|
} from '~/generated/graphql';
|
|
import type { MentionSearchResult } from '@/mention/types/MentionSearchResult';
|
|
|
|
const MENTION_SEARCH_LIMIT = 50;
|
|
|
|
export const useMentionSearch = () => {
|
|
const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
|
|
const apolloCoreClient = useApolloCoreClient();
|
|
const { objectPermissionsByObjectMetadataId } = useObjectPermissions();
|
|
|
|
const searchableObjectMetadataItems = useMemo(
|
|
() =>
|
|
activeObjectMetadataItems.filter(
|
|
(item) =>
|
|
!item.isSystem &&
|
|
item.isSearchable &&
|
|
getObjectPermissionsFromMapByObjectMetadataId({
|
|
objectPermissionsByObjectMetadataId,
|
|
objectMetadataId: item.id,
|
|
}).canReadObjectRecords === true,
|
|
),
|
|
[activeObjectMetadataItems, objectPermissionsByObjectMetadataId],
|
|
);
|
|
|
|
const objectsToSearch = useMemo(
|
|
() => searchableObjectMetadataItems.map(({ nameSingular }) => nameSingular),
|
|
[searchableObjectMetadataItems],
|
|
);
|
|
|
|
const searchMentionRecords = useCallback(
|
|
async (query: string): Promise<MentionSearchResult[]> => {
|
|
const { data } = await apolloCoreClient.query<
|
|
SearchQuery,
|
|
SearchQueryVariables
|
|
>({
|
|
query: SEARCH_QUERY,
|
|
variables: {
|
|
searchInput: query,
|
|
limit: MENTION_SEARCH_LIMIT,
|
|
includedObjectNameSingulars: objectsToSearch,
|
|
},
|
|
});
|
|
|
|
const searchRecords = data?.search.edges.map((edge) => edge.node) || [];
|
|
|
|
return searchRecords.map((searchRecord) => ({
|
|
recordId: searchRecord.recordId,
|
|
objectNameSingular: searchRecord.objectNameSingular,
|
|
objectLabelSingular: searchRecord.objectLabelSingular,
|
|
label: searchRecord.label,
|
|
imageUrl: searchRecord.imageUrl ?? '',
|
|
}));
|
|
},
|
|
[apolloCoreClient, objectsToSearch],
|
|
);
|
|
|
|
return { searchMentionRecords, searchableObjectMetadataItems };
|
|
};
|