Improve AI-chat design to match the one provided in Figma (#17816)

Fixed colors, gaps, component nesting, alignment to match Figma.

packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx

@@ -2,20 +2,18 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { type IconComponent } from '@ui/display';
 
-const StyledIconButton = styled.button`
+export type RoundedIconButtonSize = 'small' | 'medium';
+
+const StyledIconButton = styled.button<{ size: RoundedIconButtonSize }>`
   align-items: center;
   background: ${({ theme }) => theme.color.blue};
   border: none;
-
   border-radius: 50%;
   color: ${({ theme }) => theme.font.color.inverted};
-
   cursor: pointer;
   display: flex;
-  height: 20px;
-
+  height: ${({ size }) => (size === 'small' ? '20px' : '24px')};
   justify-content: center;
-
   outline: none;
   padding: 0;
   transition:
@@ -27,11 +25,12 @@ const StyledIconButton = styled.button`
     color: ${({ theme }) => theme.font.color.tertiary};
     cursor: default;
   }
-  width: 20px;
+  width: ${({ size }) => (size === 'small' ? '20px' : '24px')};
 `;
 
 type RoundedIconButtonProps = {
   Icon: IconComponent;
+  size?: RoundedIconButtonSize;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const RoundedIconButton = ({
@@ -39,12 +38,18 @@ export const RoundedIconButton = ({
   onClick,
   disabled,
   className,
+  size = 'small',
 }: RoundedIconButtonProps) => {
   const theme = useTheme();
 
   return (
-    <StyledIconButton className={className} {...{ disabled, onClick }}>
-      {<Icon size={theme.icon.size.md} />}
+    <StyledIconButton
+      className={className}
+      disabled={disabled}
+      onClick={onClick}
+      size={size}
+    >
+      <Icon size={theme.icon.size.md} />
     </StyledIconButton>
   );
 };