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,193 @@
+import { filterSuggestionItems } from '@blocknote/core';
+import { BlockNoteView } from '@blocknote/mantine';
+import { SuggestionMenuController } from '@blocknote/react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { type ClipboardEvent } from 'react';
+
+import { type BLOCK_SCHEMA } from '@/blocknote-editor/blocks/Schema';
+import { getSlashMenu } from '@/blocknote-editor/utils/getSlashMenu';
+import { CustomMentionMenu } from '@/blocknote-editor/components/CustomMentionMenu';
+import { CustomSideMenu } from '@/blocknote-editor/components/CustomSideMenu';
+import {
+  CustomSlashMenu,
+  type SuggestionItem,
+} from '@/blocknote-editor/components/CustomSlashMenu';
+import { useMentionMenu } from '@/mention/hooks/useMentionMenu';
+
+interface BlockEditorProps {
+  editor: typeof BLOCK_SCHEMA.BlockNoteEditor;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onPaste?: (event: ClipboardEvent) => void;
+  onChange?: () => void;
+  readonly?: boolean;
+}
+
+// eslint-disable-next-line twenty/no-hardcoded-colors
+const StyledEditor = styled.div`
+  width: 100%;
+
+  & .editor {
+    background: transparent;
+    font-size: 13px;
+    color: ${({ theme }) => theme.font.color.primary};
+    min-height: 400px;
+  }
+  & .editor [class^='_inlineContent']:before {
+    color: ${({ theme }) => theme.font.color.tertiary};
+    font-style: normal !important;
+  }
+  & .editor .bn-inline-content:has(> .ProseMirror-trailingBreak):before {
+    font-style: normal;
+  }
+  & .mantine-ActionIcon-icon {
+    height: 20px;
+    width: 20px;
+    background: transparent;
+  }
+  & .bn-container .bn-drag-handle {
+    width: 20px;
+    height: 20px;
+  }
+  & .bn-block-content[data-content-type='checkListItem'] > div > div {
+    display: flex;
+    align-items: center;
+  }
+  & .bn-drag-handle-menu {
+    background: ${({ theme }) => theme.background.transparent.secondary};
+    backdrop-filter: ${({ theme }) => theme.blur.medium};
+    box-shadow:
+      0px 2px 4px rgba(0, 0, 0, 0.04),
+      2px 4px 16px rgba(0, 0, 0, 0.12);
+    min-width: 160px;
+    min-height: 96px;
+    padding: 4px;
+    border-radius: 8px;
+    border: 1px solid ${({ theme }) => theme.border.color.medium};
+    left: 26px;
+  }
+
+  & .bn-editor {
+    padding-inline: 0px;
+  }
+
+  & .bn-inline-content {
+    width: 100%;
+  }
+
+  & .bn-container .bn-suggestion-menu-item:hover {
+    background-color: blue;
+  }
+
+  & .bn-suggestion-menu {
+    padding: 4px;
+    border-radius: 8px;
+    border: 1px solid ${({ theme }) => theme.border.color.medium};
+    background: ${({ theme }) => theme.background.transparent.secondary};
+    backdrop-filter: ${({ theme }) => theme.blur.medium};
+  }
+
+  & .mantine-Menu-item {
+    background-color: transparent;
+    min-width: 152px;
+    min-height: 32px;
+
+    font-style: normal;
+    font-family: ${({ theme }) => theme.font.family};
+    font-weight: ${({ theme }) => theme.font.weight.regular};
+    color: ${({ theme }) => theme.font.color.secondary};
+  }
+  & .mantine-ActionIcon-root:hover {
+    box-shadow:
+      0px 0px 4px rgba(0, 0, 0, 0.08),
+      0px 2px 4px rgba(0, 0, 0, 0.04);
+    background: ${({ theme }) => theme.background.transparent.primary};
+    backdrop-filter: blur(20px);
+    border: 1px solid ${({ theme }) => theme.border.color.light};
+  }
+  & .bn-side-menu .mantine-UnstyledButton-root:not(.mantine-Menu-item) svg {
+    height: 16px;
+    width: 16px;
+  }
+
+  & .bn-mantine .bn-side-menu > [draggable='true'] {
+    margin-bottom: 5px;
+  }
+  & .bn-color-picker-dropdown {
+    margin-left: 8px;
+  }
+
+  & .bn-inline-content a {
+    color: ${({ theme }) => theme.color.blue};
+  }
+
+  & .bn-inline-content code {
+    font-family: monospace;
+    color: ${({ theme }) => theme.font.color.danger};
+    padding: 2px 4px;
+    border-radius: 4px;
+    border: 1px solid ${({ theme }) => theme.font.color.extraLight};
+    font-size: 0.9rem;
+    background-color: ${({ theme }) => theme.background.transparent.light};
+  }
+`;
+
+export const BlockEditor = ({
+  editor,
+  onFocus,
+  onBlur,
+  onChange,
+  onPaste,
+  readonly,
+}: BlockEditorProps) => {
+  const theme = useTheme();
+  const blockNoteTheme = theme.name === 'light' ? 'light' : 'dark';
+  const getMentionItems = useMentionMenu(editor);
+
+  const handleFocus = () => {
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    onBlur?.();
+  };
+
+  const handleChange = () => {
+    onChange?.();
+  };
+
+  const handlePaste = (event: ClipboardEvent) => {
+    onPaste?.(event);
+  };
+
+  return (
+    <StyledEditor>
+      <BlockNoteView
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onPaste={handlePaste}
+        onChange={handleChange}
+        editor={editor}
+        theme={blockNoteTheme}
+        slashMenu={false}
+        sideMenu={false}
+        editable={!readonly}
+      >
+        <CustomSideMenu editor={editor} />
+        <SuggestionMenuController
+          triggerCharacter="/"
+          getItems={async (query) =>
+            filterSuggestionItems<SuggestionItem>(getSlashMenu(editor), query)
+          }
+          suggestionMenuComponent={CustomSlashMenu}
+        />
+        <SuggestionMenuController
+          triggerCharacter="@"
+          getItems={async (query) => getMentionItems(query)}
+          suggestionMenuComponent={CustomMentionMenu}
+        />
+      </BlockNoteView>
+    </StyledEditor>
+  );
+};