From ba21a2c5fa13587137df5ede7113122a77e9ae3a Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Tue, 1 Jul 2025 20:10:04 +0800
Subject: [PATCH] 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                            |  3 ++-
 src/renderer/src/components/EmojiIcon.tsx        | 16 +++++++++-------
 .../src/components/Popups/AddAssistantPopup.tsx  |  3 +++
 .../src/pages/home/Messages/Messages.tsx         |  3 ++-
 src/renderer/src/pages/home/Messages/Prompt.tsx  |  5 +++--
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index bb7889776d..47640bff09 100644
--- a/.vscode/settings.json
+++ b/.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,
diff --git a/src/renderer/src/components/EmojiIcon.tsx b/src/renderer/src/components/EmojiIcon.tsx
index 2e9600e399..6cd06b8715 100644
--- a/src/renderer/src/components/EmojiIcon.tsx
+++ b/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`
-  width: 26px;
-  height: 26px;
-  border-radius: 13px;
+const Container = styled.div<{ $size: number; $fontSize: number }>`
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+  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;
diff --git a/src/renderer/src/components/Popups/AddAssistantPopup.tsx b/src/renderer/src/components/Popups/AddAssistantPopup.tsx
index 8215ee0ae5..dace8e44b5 100644
--- a/src/renderer/src/components/Popups/AddAssistantPopup.tsx
+++ b/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}
diff --git a/src/renderer/src/pages/home/Messages/Messages.tsx b/src/renderer/src/pages/home/Messages/Messages.tsx
index 999ddc05ec..03434a0cd1 100644
--- a/src/renderer/src/pages/home/Messages/Messages.tsx
+++ b/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;
   }
diff --git a/src/renderer/src/pages/home/Messages/Prompt.tsx b/src/renderer/src/pages/home/Messages/Prompt.tsx
index f0df2a460f..392ded2279 100644
--- a/src/renderer/src/pages/home/Messages/Prompt.tsx
+++ b/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`