feat(ai): add current context to ai chat (#13315)

## TODO

- [ ] add dropdown to use records from outside the context
- [x] add loader for files chip
- [x] add roleId where it's necessary
- [x] Split AvatarChip in two components. One with the icon that will
call the second with leftComponent.
- [ ] Fix tests
- [x] Fix UI regression on Search

packages/twenty-front/src/modules/object-record/components/RecordChip.tsx

@@ -10,11 +10,11 @@ import { MouseEvent } from 'react';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import {
+  Chip,
   AvatarChip,
-  AvatarChipVariant,
   ChipSize,
   ChipVariant,
-  LinkAvatarChip,
+  LinkChip,
 } from 'twenty-ui/components';
 import { TriggerEventType } from 'twenty-ui/utilities';
 
@@ -22,7 +22,7 @@ export type RecordChipProps = {
   objectNameSingular: string;
   record: ObjectRecord;
   className?: string;
-  variant?: AvatarChipVariant;
+  variant?: ChipVariant.Highlighted | ChipVariant.Transparent;
   forceDisableClick?: boolean;
   maxWidth?: number;
   to?: string | undefined;
@@ -72,39 +72,42 @@ export const RecordChip = ({
 
   // TODO temporary until we create a record show page for Workspaces members
 
+  const avatarChip = (
+    <AvatarChip
+      placeholder={recordChipData.name}
+      placeholderColorSeed={record.id}
+      avatarType={recordChipData.avatarType}
+      avatarUrl={recordChipData.avatarUrl ?? ''}
+    />
+  );
+
   if (
     forceDisableClick ||
     objectNameSingular === CoreObjectNameSingular.WorkspaceMember
   ) {
     return (
-      <AvatarChip
+      <Chip
+        label={recordChipData.name}
         size={size}
         maxWidth={maxWidth}
-        placeholderColorSeed={record.id}
-        name={recordChipData.name}
-        avatarType={recordChipData.avatarType}
-        avatarUrl={recordChipData.avatarUrl ?? ''}
         className={className}
         variant={ChipVariant.Transparent}
+        leftComponent={avatarChip}
       />
     );
   }
 
   return (
-    <LinkAvatarChip
+    <LinkChip
       size={size}
       maxWidth={maxWidth}
-      placeholderColorSeed={record.id}
-      name={recordChipData.name}
+      label={recordChipData.name}
       isLabelHidden={isLabelHidden}
-      avatarType={recordChipData.avatarType}
-      avatarUrl={recordChipData.avatarUrl ?? ''}
+      leftComponent={avatarChip}
       className={className}
       variant={
         variant ??
-        (!forceDisableClick
-          ? AvatarChipVariant.Regular
-          : AvatarChipVariant.Transparent)
+        (!forceDisableClick ? ChipVariant.Highlighted : ChipVariant.Transparent)
       }
       to={to ?? getLinkToShowPage(objectNameSingular, record)}
       onClick={handleCustomClick}

packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx

@@ -19,9 +19,9 @@ import styled from '@emotion/styled';
 import { Dispatch, SetStateAction, useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { AvatarChipVariant } from 'twenty-ui/components';
 import { IconEye, IconEyeOff } from 'twenty-ui/display';
 import { Checkbox, CheckboxVariant, LightIconButton } from 'twenty-ui/input';
+import { ChipVariant } from 'twenty-ui/components';
 
 const StyledCompactIconContainer = styled.div`
   align-items: center;
@@ -80,7 +80,7 @@ export const RecordBoardCardHeader = ({
           <RecordChip
             objectNameSingular={objectMetadataItem.nameSingular}
             record={record}
-            variant={AvatarChipVariant.Transparent}
+            variant={ChipVariant.Transparent}
             maxWidth={150}
             onClick={() => {
               activateBoardCard({ rowIndex, columnIndex });