Add @mention support in AI Chat input (#17943)

## 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>
2026-02-14 14:37:33 +01:00
parent 0876197c8d
commit 6f251a6f8e
72 changed files with 1920 additions and 1043 deletions
@@ -0,0 +1,97 @@
+import { useBlockNoteEditor } from '@blocknote/react';
+import styled from '@emotion/styled';
+import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
+import { motion } from 'framer-motion';
+import { createPortal } from 'react-dom';
+
+import { SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/ui/input/constants/SlashMenuDropdownClickOutsideId';
+import { SLASH_MENU_LIST_ID } from '@/ui/input/constants/SlashMenuListId';
+import { CustomSlashMenuListItem } from '@/blocknote-editor/components/CustomSlashMenuListItem';
+import { CustomSlashMenuSelectedIndexSyncEffect } from '@/blocknote-editor/components/CustomSlashMenuSelectedIndexSyncEffect';
+import type {
+  CustomSlashMenuProps,
+  SuggestionItem,
+} from '@/blocknote-editor/types/types';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
+
+export type { SuggestionItem };
+
+const StyledContainer = styled.div`
+  height: 1px;
+  width: 1px;
+`;
+
+export const CustomSlashMenu = ({
+  items,
+  selectedIndex,
+}: CustomSlashMenuProps) => {
+  const editor = useBlockNoteEditor();
+
+  const currentBlock = editor?.getTextCursorPosition()?.block;
+  const blockType = currentBlock?.type;
+  const headingLevel =
+    blockType === 'heading' ? (currentBlock?.props?.level as number) : null;
+
+  const getOffsetValue = (placement: string) => {
+    if (!placement.startsWith('top')) return 0;
+
+    switch (headingLevel) {
+      case 1:
+        return 65;
+      case 2:
+        return 50;
+      case 3:
+        return 45;
+      default:
+        return 40;
+    }
+  };
+
+  const { refs, floatingStyles } = useFloating({
+    placement: 'bottom-start',
+    whileElementsMounted: autoUpdate,
+    middleware: [flip(), offset(({ placement }) => getOffsetValue(placement))],
+  });
+
+  return (
+    <StyledContainer ref={refs.setReference}>
+      <CustomSlashMenuSelectedIndexSyncEffect
+        items={items}
+        selectedIndex={selectedIndex}
+      />
+      <>
+        {createPortal(
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.1 }}
+          >
+            <OverlayContainer
+              ref={refs.setFloating}
+              style={floatingStyles}
+              data-click-outside-id={SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID}
+            >
+              <DropdownContent>
+                <DropdownMenuItemsContainer hasMaxHeight>
+                  <SelectableList
+                    focusId={SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID}
+                    selectableListInstanceId={SLASH_MENU_LIST_ID}
+                    selectableItemIdArray={items.map((item) => item.title)}
+                  >
+                    {items.map((item) => (
+                      <CustomSlashMenuListItem key={item.title} item={item} />
+                    ))}
+                  </SelectableList>
+                </DropdownMenuItemsContainer>
+              </DropdownContent>
+            </OverlayContainer>
+          </motion.div>,
+          document.body,
+        )}
+      </>
+    </StyledContainer>
+  );
+};