style: optimized performance and refined styles

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

@@ -8,11 +8,13 @@ import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { Agent, Assistant } from '@renderer/types'
 import { uuid } from '@renderer/utils'
 import { Divider, Input, InputRef, Modal, Tag } from 'antd'
+import { take } from 'lodash'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import { HStack } from '../Layout'
+import Scrollbar from '../Scrollbar'
 
 interface Props {
   resolve: (value: Assistant | undefined) => void
@@ -93,7 +95,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       </HStack>
       <Divider style={{ margin: 0, borderBlockStartWidth: 0.5 }} />
       <Container>
-        {agents.map((agent) => (
+        {take(agents, 100).map((agent) => (
           <AgentItem
             key={agent.id}
             onClick={() => onCreateAssistant(agent)}
@@ -110,14 +112,10 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
   )
 }
 
-const Container = styled.div`
+const Container = styled(Scrollbar)`
   padding: 0 12px;
   height: 50vh;
   margin-top: 10px;
-  overflow-y: auto;
-  &::-webkit-scrollbar {
-    display: none;
-  }
 `
 
 const AgentItem = styled.div`

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

@@ -184,18 +184,19 @@ const Tabs = styled(TabsAntd)`
     padding-left: 0 !important;
   }
   .ant-tabs-nav-list {
-    padding: 10px;
+    padding: 10px 8px;
   }
   .ant-tabs-nav-operations {
     display: none !important;
   }
   .ant-tabs-tab {
     margin: 0 !important;
-    border-radius: 6px;
+    border-radius: 20px;
     margin-bottom: 5px !important;
     font-size: 14px;
     justify-content: center;
     &:hover {
+      color: var(--color-text) !important;
       background-color: var(--color-background-soft);
     }
   }
@@ -210,6 +211,14 @@ const Tabs = styled(TabsAntd)`
   .ant-tabs-ink-bar {
     display: none;
   }
+  .ant-tabs-tab-btn:active {
+    color: var(--color-text) !important;
+  }
+  .ant-tabs-tab-active {
+    .ant-tabs-tab-btn {
+      color: var(--color-text) !important;
+    }
+  }
 `
 
 export default AgentsPage