feat: update ui components with improved design and functionality

src/renderer/src/assets/styles/index.scss

@@ -9,7 +9,7 @@
   --color-white-soft: rgba(255, 255, 255, 0.8);
   --color-white-mute: rgba(255, 255, 255, 0.94);
 
-  --color-black: #181818;
+  --color-black: #151515;
   --color-black-soft: #202020;
   --color-black-mute: #262626;
 

src/renderer/src/pages/agents/AgentsPage.tsx

@@ -94,6 +94,7 @@ const AgentsPage: FC = () => {
             style={{ width: '30%', height: 28 }}
             size="small"
             variant="filled"
+            allowClear
             suffix={<SearchOutlined />}
             value={search}
             maxLength={50}

src/renderer/src/pages/agents/components/AgentCard.tsx

@@ -43,7 +43,7 @@ const EmojiHeader = styled.div`
   justify-content: center;
   align-items: center;
   margin-right: 5px;
-  font-size: 20px;
+  font-size: 24px;
   line-height: 20px;
 `
 

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

@@ -97,7 +97,7 @@ const MessageItem: FC<Props> = ({
 
   useEffect(() => {
     if (topic && onGetMessages && onSetMessages) {
-      if (message.status === 'sending') {
+      if (message.status === 'sending' && index === 0) {
         const messages = onGetMessages()
         fetchChatCompletion({
           message,