diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx
new file mode 100644
index 000000000..bbb422fec
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx
@@ -0,0 +1,88 @@
+import styled from '@emotion/styled';
+import { isNonEmptyString } from '@sniptt/guards';
+import { Fragment } from 'react/jsx-runtime';
+import { isDefined } from 'twenty-shared/utils';
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+
+const StyledChip = styled.button<{
+ withText: boolean;
+ maxWidth?: string;
+ onClick?: () => void;
+}>`
+ all: unset;
+ align-items: center;
+ justify-content: center;
+ background: ${({ theme }) => theme.background.transparent.light};
+ border: 1px solid ${({ theme }) => theme.border.color.medium};
+ border-radius: ${({ theme }) => theme.border.radius.md};
+ box-sizing: border-box;
+ display: flex;
+ gap: ${({ theme }) => theme.spacing(1)};
+ height: ${({ theme }) => theme.spacing(6)};
+ /* If the chip has text, we add extra padding to have a more balanced design */
+ padding: 0
+ ${({ theme, withText }) => (withText ? theme.spacing(2) : theme.spacing(1))};
+ font-family: inherit;
+ font-size: ${({ theme }) => theme.font.size.sm};
+ font-weight: ${({ theme }) => theme.font.weight.medium};
+ line-height: ${({ theme }) => theme.text.lineHeight.lg};
+ color: ${({ theme }) => theme.font.color.primary};
+ cursor: ${({ onClick }) => (isDefined(onClick) ? 'pointer' : 'default')};
+
+ &:hover {
+ background: ${({ onClick, theme }) =>
+ isDefined(onClick)
+ ? theme.background.transparent.medium
+ : theme.background.transparent.light};
+ }
+ max-width: ${({ maxWidth }) => maxWidth};
+`;
+
+const StyledIconsContainer = styled.div`
+ align-items: center;
+ display: flex;
+`;
+
+const StyledEmptyText = styled.div`
+ color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
+export type CommandMenuContextChipProps = {
+ Icons: React.ReactNode[];
+ text?: string;
+ onClick?: () => void;
+ testId?: string;
+ maxWidth?: string;
+ forceEmptyText?: boolean;
+};
+
+export const CommandMenuContextChip = ({
+ Icons,
+ text,
+ onClick,
+ testId,
+ maxWidth,
+ forceEmptyText = false,
+}: CommandMenuContextChipProps) => {
+ return (
+
+
+ {Icons.map((Icon, index) => (
+ {Icon}
+ ))}
+
+ {text?.trim?.() ? (
+
+ ) : !forceEmptyText ? (
+ Untitled
+ ) : (
+ ''
+ )}
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx
index 24b69aad2..58accdfe2 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx
@@ -6,14 +6,14 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { isDefined } from 'twenty-shared/utils';
import { MenuItem } from 'twenty-ui/navigation';
import {
- MultipleAvatarChip,
- MultipleAvatarChipProps,
-} from 'twenty-ui/components';
+ CommandMenuContextChip,
+ CommandMenuContextChipProps,
+} from './CommandMenuContextChip';
export const CommandMenuContextChipGroups = ({
contextChips,
}: {
- contextChips: MultipleAvatarChipProps[];
+ contextChips: CommandMenuContextChipProps[];
}) => {
const { closeDropdown } = useCloseDropdown();
@@ -25,9 +25,9 @@ export const CommandMenuContextChipGroups = ({
return (
<>
{contextChips.map((chip, index) => (
- 0 && (
chip.Icons?.[0])}
onClick={() => {}}
text={`${firstChips.length}`}
@@ -77,11 +77,11 @@ export const CommandMenuContextChipGroups = ({
)}
{isDefined(lastChip) && (
-
)}
>
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection.tsx
index 821a1c6a7..750e79e40 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection.tsx
@@ -4,14 +4,14 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { getSelectedRecordsContextText } from '@/command-menu/utils/getRecordContextText';
import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore';
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
+import { CommandMenuContextChipProps } from './CommandMenuContextChip';
import { isDefined } from 'twenty-shared/utils';
-import { MultipleAvatarChipProps } from 'twenty-ui/components';
export const CommandMenuContextChipGroupsWithRecordSelection = ({
contextChips,
objectMetadataItemId,
}: {
- contextChips: MultipleAvatarChipProps[];
+ contextChips: CommandMenuContextChipProps[];
objectMetadataItemId: string;
}) => {
const { objectMetadataItem } = useObjectMetadataItemById({
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordsChip.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordsChip.tsx
index 23c6c7cc6..928787036 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordsChip.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordsChip.tsx
@@ -1,8 +1,8 @@
+import { CommandMenuContextChip } from '@/command-menu/components/CommandMenuContextChip';
import { CommandMenuContextRecordChipAvatars } from '@/command-menu/components/CommandMenuContextRecordChipAvatars';
import { getSelectedRecordsContextText } from '@/command-menu/utils/getRecordContextText';
import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore';
import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
-import { MultipleAvatarChip } from 'twenty-ui/components';
export const CommandMenuContextRecordsChip = ({
objectMetadataItemId,
@@ -34,7 +34,7 @@ export const CommandMenuContextRecordsChip = ({
));
return (
- {
duration: backButtonAnimationDuration,
}}
>
- ]}
onClick={goBackFromCommandMenu}
testId="command-menu-go-back-button"
diff --git a/packages/twenty-ui/src/components/avatar-chip/MultipleAvatarChip.tsx b/packages/twenty-ui/src/components/avatar-chip/MultipleAvatarChip.tsx
index ce8c153cf..765709cce 100644
--- a/packages/twenty-ui/src/components/avatar-chip/MultipleAvatarChip.tsx
+++ b/packages/twenty-ui/src/components/avatar-chip/MultipleAvatarChip.tsx
@@ -36,14 +36,6 @@ export const MultipleAvatarChip = ({
variant = ChipVariant.Static,
forceEmptyText = false,
}: MultipleAvatarChipProps) => {
- const leftComponent = (
-
- {Icons.map((Icon, index) => (
- {Icon}
- ))}
-
- );
-
return (
+ {Icons.map((Icon, index) => (
+ {Icon}
+ ))}
+
+ }
rightComponent={rightComponent}
clickable={isDefined(onClick)}
maxWidth={maxWidth}