Félix Malfait
6897fff632
# Why
The To/Cc/Bcc fields reused `FormMultiTextFieldInput`, the workflow
Tiptap tag editor, with recipients stored as a comma-separated string.
That caused every reported issue: duplicates were allowed, the field was
locked to one 32px line with a hidden horizontal scrollbar, chips did
nothing on click, `First Last <email>` could not even be typed (space
committed a tag) and was rejected by the backend when pasted, chips
could not be edited, invalid addresses only failed server-side after
pressing Send, and there was no autocomplete at all.
## The model
A recipient is `{ address, displayName? }`. Person and workspace member
are never stored in composer state; they are resolved live from the
address at render time, mirroring how `MatchParticipantService` links
`messageParticipant.handle` to `personId`/`workspaceMemberId` on the
receive side. Entities appear at the edges (autocomplete in, chip
display out); state, dedupe, validation, and send operate on addresses
only. The send path is unchanged: `SendEmailInput.to/cc/bcc` stay
comma-separated bare addresses.
# What changed
New module `activities/emails/recipients/` (the workflow editor is
untouched; its other consumers are unaffected):
- **`EmailRecipientsFieldInput`**: wrapping chip rows (up to ~3 lines,
then scroll), commit on Enter/Tab/comma/semicolon/blur, space commits
only when the buffer is already a valid email, paste parses RFC 5322
lists (names, quoted commas, semicolons, newlines), case-insensitive
dedupe with a flash on the existing chip, invalid addresses become red
chips that disable Send, double-click or keyboard editing in place with
Escape revert, Backspace select-then-delete, arrow-key chip navigation,
Ctrl/Cmd+Enter commits a pending buffer or sends when the buffer is
empty.
- **Person resolution**: chips resolve against People
(`emails.primaryEmail`, case-insensitive) and workspace members,
rendering avatar + name when known and degrading to a plain address chip
otherwise.
- **Chip menu**: person/member header, Copy email, Edit, Remove, and Add
as person for unknown addresses (creates the Person; the chip upgrades
in place).
- **Autocomplete**: blends context people (company you are composing
from, or the company behind a person/opportunity), ranked people search,
workspace members with a Team member badge, and a literal "Use this
email" row ranked first when the typed buffer is a valid address.
Suggestions exclude addresses already present in any field. Enter picks
the highlighted or top row.
- **Prefill**: replies and drafts preserve participant display names
(`getEmailDraftPrefillFromMessage`, `useReplyContext`).
- `useEmailComposerState` holds `EmailRecipient[]` per field and blocks
send on invalid recipients; the recipient-limit warning is surfaced
again in the composer.
- The Send Email engine command passes the record context so context
suggestions work from the record page action.
- `EmailsFilter` was missing from the shared `LeafFilter` union, so
nothing could filter on `emails.primaryEmail`; added (additive).
- New dependency `addressparser@1.0.1` in twenty-front, the same package
and version the server already uses to parse inbound mail headers, so
both sides parse identically. Tiny, dependency-free, browser-safe.
# Decisions and tradeoffs
- Person resolution matches on `emails.primaryEmail` only,
case-insensitively via per-address `ilike` filters (no `%` wildcards,
`%_\` escaped). `additionalEmails` is a JSONB array and not cleanly
filterable through the GraphQL filter API today; the server-side matcher
checks additional emails too, so a chip may show as a plain address even
though the send still links to the person via participant matching.
- Chip flash-on-duplicate replays its CSS animation by remounting the
chip subtree (nonce in the React key), chosen over animation-restart
hacks; the remount is invisible.
- Keyboard chip selection keeps DOM focus on the input and tracks a
virtual `selectedChipIndex` (`aria-activedescendant`) instead of roving
focus across chips: one focus point, no focus juggling, standard
combobox listbox pattern.
- `flushSync` (precedent: `Dropdown.tsx`) focuses and places the caret
after entering chip-edit mode; the alternative was a useEffect on
editing state.
- Suggestion rows `preventDefault` on mousedown so picking a suggestion
never blurs the input (blur would first commit the half-typed buffer as
a junk chip).
- Cmd/Ctrl+Enter inside a recipient field: with a non-empty buffer it
commits the buffer only; with an empty buffer it sends via an `onSubmit`
prop wired to `handleSend`. Not commit+send in one stroke: `handleSend`
holds a same-render closure over composer state, so sending in the same
event would read the pre-commit recipients. E2E also showed the side
panel's own ctrl+Enter hotkey never fires while any form field is
focused (focus-stack scoping, applies to the old composer too), which is
why the field triggers the submit itself.
- Enter with suggestions open picks the highlighted (or top) suggestion,
Gmail-style. When the typed buffer is itself a valid email, the literal
row is ranked first so Enter keeps meaning "add what I typed".
- Suggestions are disabled while editing a chip (the edit buffer holds
`Name <email>` text, a poor search query).
- Dedupe blocks within a field; across fields typed duplicates are
allowed (sometimes intentional), but suggestions exclude addresses
already present in any of To/Cc/Bcc.
- Chip menu actions never navigate: navigating the side panel (or main
view) unmounts the composer and silently destroys the draft, since
composer state is component-local with no draft persistence. "Add as
person" creates the record and shows a snackbar while the chip upgrades
in place; the person header row is informational. "Open person"
navigation should come back once drafts survive navigation.
- The reply composer gets no context record: its widget target record is
the message thread, not a person/company, and replies already prefill
participants.
- If two people share a primary email, the last fetched match wins for
chip display (no ambiguity UI).
- "Add as person" splits the display name on the first space for
firstName/lastName, the same heuristic the contact-creation manager uses
server-side.
# Deferred
- Display names on the wire (`Name <email>` in outbound headers): needs
`SendEmailInput` / `EmailComposerService.validateEmails` changes
server-side.
- Drag chips between To/Cc/Bcc; collapse-on-blur to one line with a "+N
others" summary.
- Frequency/recency ranking of suggestions from `messageParticipant`
aggregates.
- "Open person" from the chip menu, pending draft persistence across
navigation.
# Verification
Unit tests cover the parser, formatter round-trip, merge/dedupe, and the
field state machine (commit, dedupe flash, edit, cancel, keyboard
selection). Typecheck, lint, and the email module suites pass, plus the
shared and side-panel suites.
Every flow was also driven end to end with Playwright against seeded
data: prefill resolution, context and typed suggestions, keyboard
navigation and picks, dedupe flash, RFC 5322 paste, invalid chips gating
Send, wrapping, in-place editing, chip menus, clipboard copy, Add as
person with live chip upgrade, Cc/Bcc exclusions, and the Ctrl+Enter
send path (the mutation reached the server; it failed only on the seeded
account's missing refresh token, expected outside a real provider
connection).
Screenshots of each verified behavior:
https://claude.ai/code/artifact/1743f05d-422e-43d0-bbea-a34a0470c180
---
_Generated by [Claude
Code](https://claude.ai/code/session_0199wDARiw48GqVTpgWzbXWw)_
<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22668?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
214 lines
6.9 KiB
JSON
214 lines
6.9 KiB
JSON
{
|
|
"name": "twenty-front",
|
|
"private": true,
|
|
"type": "module",
|
|
"scripts": {
|
|
"build": "NODE_ENV=production NODE_OPTIONS=--max-old-space-size=8192 npx vite build",
|
|
"build:sourcemaps": "NODE_ENV=production VITE_BUILD_SOURCEMAP=true NODE_OPTIONS=--max-old-space-size=8192 npx vite build",
|
|
"start:prod": "NODE_ENV=production npx serve -s build",
|
|
"tsup": "npx tsup"
|
|
},
|
|
"engines": {
|
|
"node": "^24.5.0",
|
|
"npm": "please-use-yarn",
|
|
"yarn": "^4.0.2"
|
|
},
|
|
"browserslist": {
|
|
"production": [
|
|
">0.2%",
|
|
"not dead",
|
|
"not op_mini all"
|
|
],
|
|
"development": [
|
|
"last 1 chrome version",
|
|
"last 1 firefox version",
|
|
"last 1 safari version"
|
|
]
|
|
},
|
|
"msw": {
|
|
"workerDirectory": "public"
|
|
},
|
|
"dependencies": {
|
|
"@apollo/client": "^4.0.0",
|
|
"@blocknote/mantine": "^0.51.4",
|
|
"@blocknote/react": "^0.51.4",
|
|
"@blocknote/xl-docx-exporter": "^0.51.4",
|
|
"@blocknote/xl-pdf-exporter": "^0.51.4",
|
|
"@calcom/embed-react": "^1.5.3",
|
|
"@cyntler/react-doc-viewer": "^1.17.0",
|
|
"@dagrejs/dagre": "^1.1.8",
|
|
"@dnd-kit/react": "^0.3.2",
|
|
"@dr.pogodin/react-helmet": "^3.2.2",
|
|
"@floating-ui/react": "^0.24.3",
|
|
"@fontsource/dm-mono": "^5.2.7",
|
|
"@fontsource/inter": "^5.2.8",
|
|
"@graphiql/plugin-explorer": "^5.1.2",
|
|
"@graphiql/react": "^0.37.6",
|
|
"@hello-pangea/dnd": "^18.0.1",
|
|
"@hookform/resolvers": "^5.2.2",
|
|
"@linaria/core": "^7.0.0",
|
|
"@linaria/react": "^7.0.1",
|
|
"@lingui/core": "^5.9.5",
|
|
"@lingui/detect-locale": "^5.9.5",
|
|
"@lingui/react": "^5.9.5",
|
|
"@mantine/core": "^8.3.11",
|
|
"@mantine/hooks": "^8.3.11",
|
|
"@mantine/utils": "^6.0.22",
|
|
"@monaco-editor/react": "^4.7.0",
|
|
"@nivo/core": "^0.99.0",
|
|
"@nivo/line": "^0.99.0",
|
|
"@nivo/pie": "^0.99.0",
|
|
"@nivo/radial-bar": "^0.99.0",
|
|
"@react-email/components": "^0.5.3",
|
|
"@react-pdf/renderer": "^4.1.6",
|
|
"@scalar/api-reference-react": "^0.9.42",
|
|
"@sentry/react": "^10.51.0",
|
|
"@sniptt/guards": "^0.2.0",
|
|
"@stripe/react-stripe-js": "^6.6.0",
|
|
"@stripe/stripe-js": "^9.8.0",
|
|
"@tiptap/core": "3.4.2",
|
|
"@tiptap/extension-bold": "3.4.2",
|
|
"@tiptap/extension-document": "3.4.2",
|
|
"@tiptap/extension-hard-break": "3.4.2",
|
|
"@tiptap/extension-heading": "3.4.2",
|
|
"@tiptap/extension-image": "3.4.4",
|
|
"@tiptap/extension-italic": "3.4.2",
|
|
"@tiptap/extension-link": "3.4.2",
|
|
"@tiptap/extension-list": "3.4.2",
|
|
"@tiptap/extension-paragraph": "3.4.2",
|
|
"@tiptap/extension-strike": "3.4.2",
|
|
"@tiptap/extension-text": "3.4.2",
|
|
"@tiptap/extension-underline": "3.4.2",
|
|
"@tiptap/extensions": "3.4.2",
|
|
"@tiptap/react": "3.4.2",
|
|
"@types/marked": "^6.0.0",
|
|
"@xyflow/react": "^12.4.2",
|
|
"addressparser": "1.0.1",
|
|
"ai": "6.0.97",
|
|
"apollo-link-rest": "^0.10.0-rc.2",
|
|
"apollo-upload-client": "^19.0.0",
|
|
"buffer": "^6.0.3",
|
|
"country-flag-icons": "^1.5.11",
|
|
"cron-parser": "5.1.1",
|
|
"d3-shape": "^3.2.0",
|
|
"date-fns": "^4.4.0",
|
|
"date-fns-tz": "^3.2.0",
|
|
"deep-equal": "^2.2.2",
|
|
"file-saver": "^2.0.5",
|
|
"framer-motion": "^11.18.0",
|
|
"fuse.js": "^7.1.0",
|
|
"graphiql": "^5.2.3",
|
|
"graphql": "16.8.1",
|
|
"graphql-sse": "^2.5.4",
|
|
"graphql-tag": "^2.12.6",
|
|
"idb-keyval": "^6.2.5",
|
|
"immer": "^10.1.1",
|
|
"input-otp": "^1.4.2",
|
|
"jotai": "^2.17.1",
|
|
"js-cookie": "^3.0.5",
|
|
"json-2-csv": "^5.4.0",
|
|
"json-logic-js": "^2.0.5",
|
|
"jwt-decode": "^4.0.0",
|
|
"libphonenumber-js": "^1.10.26",
|
|
"linkify-react": "^4.1.3",
|
|
"linkifyjs": "^4.1.3",
|
|
"lodash.camelcase": "^4.3.0",
|
|
"lodash.groupby": "^4.6.0",
|
|
"lodash.isempty": "^4.4.0",
|
|
"lodash.omit": "^4.5.0",
|
|
"lodash.uniqby": "^4.7.0",
|
|
"marked": "^17.0.1",
|
|
"microdiff": "^1.3.2",
|
|
"papaparse": "^5.4.1",
|
|
"pluralize": "^8.0.0",
|
|
"qs": "^6.15.2",
|
|
"react": "^19.2.0",
|
|
"react-data-grid": "7.0.0-beta.59",
|
|
"react-datepicker": "^9.1.0",
|
|
"react-dom": "^19.2.0",
|
|
"react-dropzone": "^14.2.3",
|
|
"react-error-boundary": "^4.0.11",
|
|
"react-grid-layout": "^1.5.2",
|
|
"react-hook-form": "^7.45.1",
|
|
"react-hotkeys-hook": "^4.4.4",
|
|
"react-imask": "^7.6.0",
|
|
"react-intersection-observer": "^9.15.1",
|
|
"react-loading-skeleton": "^3.3.1",
|
|
"react-markdown": "^10.1.0",
|
|
"react-phone-number-input": "patch:react-phone-number-input@npm%3A3.4.5#../../.yarn/patches/react-phone-number-input-npm-3.4.5-dc2895c306.patch",
|
|
"react-qr-code": "^2.0.18",
|
|
"react-responsive": "^9.0.2",
|
|
"react-router-dom": "^6.4.4",
|
|
"react-textarea-autosize": "^8.4.1",
|
|
"remark-gfm": "^4.0.1",
|
|
"rxjs": "^7.2.0",
|
|
"temporal-polyfill": "^0.3.0",
|
|
"transliteration": "^2.3.5",
|
|
"ts-key-enum": "^2.0.12",
|
|
"twenty-front-component-renderer": "workspace:*",
|
|
"twenty-shared": "workspace:*",
|
|
"twenty-ui": "workspace:*",
|
|
"type-fest": "4.10.1",
|
|
"use-debounce": "^10.0.0",
|
|
"uuid": "^11.1.1",
|
|
"xlsx-ugnis": "^0.19.3",
|
|
"zod": "^4.1.11"
|
|
},
|
|
"devDependencies": {
|
|
"@argos-ci/storybook": "^6.0.6",
|
|
"@babel/core": "^7.14.5",
|
|
"@babel/preset-typescript": "^7.24.6",
|
|
"@graphql-codegen/cli": "^6.3.1",
|
|
"@graphql-codegen/typed-document-node": "^6.1.8",
|
|
"@graphql-codegen/typescript": "^5.0.10",
|
|
"@graphql-codegen/typescript-operations": "^5.1.0",
|
|
"@lingui/cli": "^5.9.5",
|
|
"@lingui/swc-plugin": "^5.11.0",
|
|
"@lingui/vite-plugin": "^5.9.5",
|
|
"@playwright/test": "^1.60.0",
|
|
"@storybook-community/storybook-addon-cookie": "^5.0.0",
|
|
"@storybook/addon-coverage": "^3.0.0",
|
|
"@storybook/addon-docs": "^10.4.6",
|
|
"@storybook/addon-links": "^10.4.6",
|
|
"@storybook/react-vite": "^10.4.6",
|
|
"@swc/core": "^1.15.11",
|
|
"@swc/jest": "^0.2.39",
|
|
"@testing-library/dom": "^10.4.0",
|
|
"@testing-library/jest-dom": "^6.6.3",
|
|
"@testing-library/react": "^16.3.0",
|
|
"@tiptap/suggestion": "3.4.2",
|
|
"@types/addressparser": "^1.0.3",
|
|
"@types/deep-equal": "^1.0.1",
|
|
"@types/file-saver": "^2.0.7",
|
|
"@types/jest": "^30.0.0",
|
|
"@types/js-cookie": "^3.0.3",
|
|
"@types/json-logic-js": "^2",
|
|
"@types/react-grid-layout": "^1",
|
|
"@types/uuid": "^9.0.2",
|
|
"@vitejs/plugin-react-swc": "^4.3.1",
|
|
"@vitest/coverage-istanbul": "^4.1.0",
|
|
"@wyw-in-js/vite": "^1.1.0",
|
|
"dotenv-cli": "^7.4.4",
|
|
"esbuild": "^0.28.1",
|
|
"jest": "29.7.0",
|
|
"jest-environment-jsdom": "30.0.0-beta.3",
|
|
"jest-fetch-mock": "^3.0.3",
|
|
"monaco-editor": "0.52.2",
|
|
"monaco-editor-auto-typings": "^0.4.5",
|
|
"monaco-graphql": "1.8.0",
|
|
"msw": "2.12.14",
|
|
"msw-storybook-addon": "^2.0.6",
|
|
"optionator": "^0.9.1",
|
|
"oxlint": "^1.51.0",
|
|
"oxlint-tsgolint": "^0.16.0",
|
|
"playwright": "^1.60.0",
|
|
"prettier": "^3.1.1",
|
|
"rollup-plugin-node-polyfills": "^0.2.1",
|
|
"rollup-plugin-visualizer": "^5.14.0",
|
|
"storybook-addon-mock-date": "2.0.0",
|
|
"storybook-addon-pseudo-states": "^10.3.3",
|
|
"ts-jest": "^29.1.1",
|
|
"vite-plugin-svgr": "^4.3.0"
|
|
}
|
|
}
|