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,175 @@
+import { i18n } from '@lingui/core';
+
+import {
+  getToolDisplayMessage,
+  resolveToolInput,
+} from '@/ai/utils/getToolDisplayMessage';
+
+beforeEach(() => {
+  i18n.load('en', {});
+  i18n.activate('en');
+});
+
+describe('resolveToolInput', () => {
+  it('should pass through non-execute_tool inputs unchanged', () => {
+    const input = { query: 'test' };
+    const result = resolveToolInput(input, 'web_search');
+
+    expect(result).toEqual({
+      resolvedInput: input,
+      resolvedToolName: 'web_search',
+    });
+  });
+
+  it('should unwrap execute_tool input', () => {
+    const input = {
+      toolName: 'find_companies',
+      arguments: { filter: { name: 'Acme' } },
+    };
+    const result = resolveToolInput(input, 'execute_tool');
+
+    expect(result).toEqual({
+      resolvedInput: { filter: { name: 'Acme' } },
+      resolvedToolName: 'find_companies',
+    });
+  });
+
+  it('should return original input for non-execute_tool even with toolName field', () => {
+    const input = { toolName: 'inner', arguments: {} };
+    const result = resolveToolInput(input, 'web_search');
+
+    expect(result).toEqual({
+      resolvedInput: input,
+      resolvedToolName: 'web_search',
+    });
+  });
+});
+
+describe('getToolDisplayMessage', () => {
+  describe('web_search', () => {
+    it('should show finished message with query', () => {
+      const message = getToolDisplayMessage(
+        { query: 'CRM tools' },
+        'web_search',
+        true,
+      );
+
+      expect(message).toContain('Searched');
+      expect(message).toContain('CRM tools');
+    });
+
+    it('should show in-progress message with query', () => {
+      const message = getToolDisplayMessage(
+        { query: 'CRM tools' },
+        'web_search',
+        false,
+      );
+
+      expect(message).toContain('Searching');
+      expect(message).toContain('CRM tools');
+    });
+
+    it('should handle nested query format', () => {
+      const message = getToolDisplayMessage(
+        { action: { query: 'nested query' } },
+        'web_search',
+        true,
+      );
+
+      expect(message).toContain('nested query');
+    });
+
+    it('should handle missing query', () => {
+      const message = getToolDisplayMessage({}, 'web_search', true);
+
+      expect(message).toContain('Searched the web');
+    });
+  });
+
+  describe('learn_tools', () => {
+    it('should show tool names when provided', () => {
+      const message = getToolDisplayMessage(
+        { toolNames: ['find_companies', 'create_task'] },
+        'learn_tools',
+        true,
+      );
+
+      expect(message).toContain('Learned');
+      expect(message).toContain('find_companies, create_task');
+    });
+
+    it('should show generic message without tool names', () => {
+      const message = getToolDisplayMessage({}, 'learn_tools', true);
+
+      expect(message).toContain('Learned tools');
+    });
+  });
+
+  describe('load_skills', () => {
+    it('should show skill names when provided', () => {
+      const message = getToolDisplayMessage(
+        { skillNames: ['data-manipulation'] },
+        'load_skills',
+        false,
+      );
+
+      expect(message).toContain('Loading');
+      expect(message).toContain('data-manipulation');
+    });
+
+    it('should show generic message without skill names', () => {
+      const message = getToolDisplayMessage({}, 'load_skills', true);
+
+      expect(message).toContain('Loaded skills');
+    });
+  });
+
+  describe('custom loading message', () => {
+    it('should use loadingMessage when provided', () => {
+      const message = getToolDisplayMessage(
+        { loadingMessage: 'Building dashboard...' },
+        'some_tool',
+        false,
+      );
+
+      expect(message).toBe('Building dashboard...');
+    });
+  });
+
+  describe('generic tools', () => {
+    it('should format tool name with spaces for finished state', () => {
+      const message = getToolDisplayMessage(
+        {},
+        'create_complete_dashboard',
+        true,
+      );
+
+      expect(message).toContain('Ran');
+      expect(message).toContain('create complete dashboard');
+    });
+
+    it('should format tool name with spaces for in-progress state', () => {
+      const message = getToolDisplayMessage(
+        {},
+        'create_complete_dashboard',
+        false,
+      );
+
+      expect(message).toContain('Running');
+      expect(message).toContain('create complete dashboard');
+    });
+  });
+
+  describe('execute_tool wrapper', () => {
+    it('should unwrap execute_tool and display inner tool name', () => {
+      const message = getToolDisplayMessage(
+        { toolName: 'find_companies', arguments: { limit: 10 } },
+        'execute_tool',
+        true,
+      );
+
+      expect(message).toContain('Ran');
+      expect(message).toContain('find companies');
+    });
+  });
+});
@@ -91,8 +91,8 @@ export const getToolDisplayMessage = (

    if (isNonEmptyString(query)) {
      return byStatus(
-        t`Searched the web for '${query}'`,
-        t`Searching the web for '${query}'`,
+        t`Searched the web for ${query}`,
+        t`Searching the web for ${query}`,
      );
    }