feat: enhanced ui with translation and layout improvements

src/renderer/src/i18n/en-us.json

@@ -169,7 +169,8 @@
       "edit.message.user.placeholder": "Enter user message",
       "edit.message.empty.content": "Conversation input content cannot be empty",
       "edit.model.select.title": "Select Model",
-      "edit.settings.hide_preset_messages": "Hide Preset Message"
+      "edit.settings.hide_preset_messages": "Hide Preset Message",
+      "search.no_results": "No results found"
     },
     "minapp": {
       "title": "MinApp"

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

@@ -5,7 +5,7 @@ import SystemAgents from '@renderer/config/agents.json'
 import { createAssistantFromAgent } from '@renderer/services/assistant'
 import { Agent } from '@renderer/types'
 import { uuid } from '@renderer/utils'
-import { Col, Input, Row, Tabs as TabsAntd, Typography } from 'antd'
+import { Col, Empty, Input, Row, Tabs as TabsAntd, Typography } from 'antd'
 import { groupBy, omit } from 'lodash'
 import { FC, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -83,6 +83,30 @@ const AgentsPage: FC = () => {
     }
   }
 
+  const tabItems = Object.keys(filteredAgentGroups).map((group, i) => {
+    const id = String(i + 1)
+    return {
+      label: group,
+      key: id,
+      children: (
+        <TabContent key={group}>
+          <Title level={5} key={group} style={{ marginBottom: 16 }}>
+            {group}
+          </Title>
+          <Row gutter={16}>
+            {filteredAgentGroups[group].map((agent, index) => {
+              return (
+                <Col span={8} key={group + index}>
+                  <AgentCard onClick={() => onAddAgentConfirm(getAgentFromSystemAgent(agent))} agent={agent as any} />
+                </Col>
+              )
+            })}
+          </Row>
+        </TabContent>
+      )
+    }
+  })
+
   return (
     <Container>
       <Navbar>
@@ -106,36 +130,13 @@ const AgentsPage: FC = () => {
       <ContentContainer id="content-container">
         <AssistantsContainer>
           <Agents onClick={onAddAgentConfirm} />
-          <Tabs
+          {tabItems.length > 0 ? (
-            tabPosition="left"
+            <Tabs tabPosition="left" animated items={tabItems} />
-            animated
+          ) : (
-            items={Object.keys(filteredAgentGroups).map((group, i) => {
+            <EmptyView>
-              const id = String(i + 1)
+              <Empty description={t('agents.search.no_results')} />
-              return {
+            </EmptyView>
-                label: group,
+          )}
-                key: id,
-                children: (
-                  <TabContent key={group}>
-                    <Title level={5} key={group} style={{ marginBottom: 16 }}>
-                      {group}
-                    </Title>
-                    <Row gutter={16}>
-                      {filteredAgentGroups[group].map((agent, index) => {
-                        return (
-                          <Col span={8} key={group + index}>
-                            <AgentCard
-                              onClick={() => onAddAgentConfirm(getAgentFromSystemAgent(agent))}
-                              agent={agent as any}
-                            />
-                          </Col>
-                        )
-                      })}
-                    </Row>
-                  </TabContent>
-                )
-              }
-            })}
-          />
         </AssistantsContainer>
       </ContentContainer>
     </Container>
@@ -176,6 +177,16 @@ const AgentPrompt = styled.div`
   max-width: 560px;
 `
 
+const EmptyView = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  color: var(--color-text-secondary);
+  border-left: 0.5px solid var(--color-border);
+`
+
 const Tabs = styled(TabsAntd)`
   display: flex;
   flex: 1;

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

@@ -48,7 +48,7 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
   }, [showAssistants, showTopics, topicPosition])
 
   const scrollToBottom = useCallback(() => {
-    setTimeout(() => containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: 'auto' }), 10)
+    setTimeout(() => containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: 'auto' }), 50)
   }, [])
 
   const onSendMessage = useCallback(