refactor(EmojiIcon): enhance EmojiIcon component to accept size and fontSize props for better customization; update styles accordingly.

fix(AddAssistantPopup): adjust body padding for improved layout consistency.

style(Messages): modify padding in ScrollContainer for better spacing; add missing line for groupedMessages.

style(Prompt): update padding and margin for improved layout aesthetics.

.vscode/settings.json

@@ -1,7 +1,8 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "explicit"
   },
   "search.exclude": {
     "**/dist/**": true,

src/renderer/src/components/EmojiIcon.tsx

@@ -4,26 +4,28 @@ import styled from 'styled-components'
 interface EmojiIconProps {
   emoji: string
   className?: string
+  size?: number
+  fontSize?: number
 }
 
-const EmojiIcon: FC<EmojiIconProps> = ({ emoji, className }) => {
+const EmojiIcon: FC<EmojiIconProps> = ({ emoji, className, size = 26, fontSize = 15 }) => {
   return (
-    <Container className={className}>
+    <Container className={className} $size={size} $fontSize={fontSize}>
       <EmojiBackground>{emoji || '⭐️'}</EmojiBackground>
       {emoji}
     </Container>
   )
 }
 
-const Container = styled.div`
+const Container = styled.div<{ $size: number; $fontSize: number }>`
-  width: 26px;
+  width: ${({ $size }) => $size}px;
-  height: 26px;
+  height: ${({ $size }) => $size}px;
-  border-radius: 13px;
+  border-radius: ${({ $size }) => $size / 2}px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  font-size: 15px;
+  font-size: ${({ $fontSize }) => $fontSize}px;
   position: relative;
   overflow: hidden;
   margin-right: 3px;

src/renderer/src/components/Popups/AddAssistantPopup.tsx

@@ -157,6 +157,9 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
           padding: 0,
           overflow: 'hidden',
           paddingBottom: 20
+        },
+        body: {
+          padding: 0
         }
       }}
       closeIcon={null}

src/renderer/src/pages/home/Messages/Messages.tsx

@@ -275,6 +275,7 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic, o
   }, [onComponentUpdate])
 
   const groupedMessages = useMemo(() => Object.entries(getGroupedMessages(displayMessages)), [displayMessages])
+
   return (
     <MessagesContainer
       id="messages"
@@ -372,7 +373,7 @@ const LoaderContainer = styled.div`
 const ScrollContainer = styled.div`
   display: flex;
   flex-direction: column-reverse;
-  padding: 20px 10px 20px 16px;
+  padding: 10px 16px 20px;
   .multi-select-mode & {
     padding-bottom: 60px;
   }

src/renderer/src/pages/home/Messages/Prompt.tsx

@@ -30,11 +30,12 @@ const Prompt: FC<Props> = ({ assistant, topic }) => {
 }
 
 const Container = styled.div<{ $isDark: boolean }>`
-  padding: 10px 16px;
+  padding: 11px 16px;
   border-radius: 10px;
   cursor: pointer;
   border: 0.5px solid var(--color-border);
-  margin: 10px 10px 0 10px;
+  margin: 15px 20px;
+  margin-bottom: 0;
 `
 
 const Text = styled.div`