Redesign AI chat and add pre-existing prompts. (#17787)

Redesigned AI-chat based on the following provided design.

<p align="center">
<img
src="https://github.com/user-attachments/assets/f10ebbd2-9ee9-402f-b246-6e8f8cedbd53"
width="225" />
</p>

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/ai/components/internal/AIChatContextUsageButton.tsx

@@ -19,14 +19,11 @@ const StyledContainer = styled.div`
 
 const StyledTrigger = styled.div<{ hasUsage: boolean }>`
   align-items: center;
-  background: transparent;
-  border: 1px solid ${({ theme }) => theme.background.transparent.medium};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
   cursor: ${({ hasUsage }) => (hasUsage ? 'pointer' : 'default')};
   display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
   height: 24px;
-  padding: 0 ${({ theme }) => theme.spacing(2)};
+  justify-content: center;
+  min-width: 24px;
   transition: background 0.1s ease;
 
   &:hover {
@@ -137,7 +134,6 @@ export const AIChatContextUsageButton = () => {
       <StyledContainer>
         <StyledTrigger hasUsage={false}>
           <ContextUsageProgressRing percentage={0} />
-          <StyledPercentage>0%</StyledPercentage>
         </StyledTrigger>
       </StyledContainer>
     );
@@ -160,7 +156,6 @@ export const AIChatContextUsageButton = () => {
     >
       <StyledTrigger hasUsage={true}>
         <ContextUsageProgressRing percentage={percentage} />
-        <StyledPercentage>{formattedPercentage}%</StyledPercentage>
       </StyledTrigger>
 
       {isHovered && (