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>

packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx

@@ -0,0 +1,39 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { type IconComponent } from 'twenty-ui/display';
+
+const StyledContainer = styled.div<{ Variant: Variants }>`
+  color: ${({ theme, Variant }) =>
+    Variant === 'danger' ? theme.color.red : 'inherit'};
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledTextContainer = styled.div``;
+
+type CustomSideMenuOptionsProps = {
+  LeftIcon: IconComponent; // Any valid React node (e.g., a component)
+  Variant: Variants;
+  text: string;
+};
+
+type Variants = 'normal' | 'danger';
+
+export const CustomSideMenuOptions = ({
+  LeftIcon,
+  Variant,
+  text,
+}: CustomSideMenuOptionsProps) => {
+  const theme = useTheme();
+  return (
+    <StyledContainer Variant={Variant}>
+      <LeftIcon
+        size={theme.icon.size.md}
+        stroke={theme.icon.stroke.sm}
+      ></LeftIcon>
+      <StyledTextContainer>{text}</StyledTextContainer>
+    </StyledContainer>
+  );
+};