Add file support to agent chat (#13187)

https://github.com/user-attachments/assets/911d5d8d-cc2e-4c18-9f93-2663d84ff9ef

---------

Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com>
Co-authored-by: neo773 <62795688+neo773@users.noreply.github.com>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@twenty.com>
Co-authored-by: MD Readul Islam <99027968+readul-islam@users.noreply.github.com>
Co-authored-by: readul-islam <developer.readul@gamil.com>
Co-authored-by: Thomas des Francs <tdesfrancs@gmail.com>
Co-authored-by: Guillim <guillim@users.noreply.github.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/file/components/FileIcon.tsx

@@ -0,0 +1,60 @@
+import { AttachmentType } from '@/activities/files/types/Attachment';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import {
+  IconComponent,
+  IconFile,
+  IconFileText,
+  IconFileZip,
+  IconHeadphones,
+  IconPhoto,
+  IconPresentation,
+  IconTable,
+  IconVideo,
+} from 'twenty-ui/display';
+
+const StyledIconContainer = styled.div<{ background: string }>`
+  align-items: center;
+  background: ${({ background }) => background};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ theme }) => theme.grayScale.gray0};
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(1.25)};
+`;
+
+const IconMapping: { [key in AttachmentType]: IconComponent } = {
+  Archive: IconFileZip,
+  Audio: IconHeadphones,
+  Image: IconPhoto,
+  Presentation: IconPresentation,
+  Spreadsheet: IconTable,
+  TextDocument: IconFileText,
+  Video: IconVideo,
+  Other: IconFile,
+};
+
+export const FileIcon = ({ fileType }: { fileType: AttachmentType }) => {
+  const theme = useTheme();
+
+  const IconColors: { [key in AttachmentType]: string } = {
+    Archive: theme.color.gray,
+    Audio: theme.color.pink,
+    Image: theme.color.yellow,
+    Presentation: theme.color.orange,
+    Spreadsheet: theme.color.turquoise,
+    TextDocument: theme.color.blue,
+    Video: theme.color.purple,
+    Other: theme.color.gray,
+  };
+
+  const Icon = IconMapping[fileType];
+
+  return (
+    <StyledIconContainer background={IconColors[fileType]}>
+      {Icon && <Icon size={theme.icon.size.sm} />}
+    </StyledIconContainer>
+  );
+};