From 9e2c7a08dfc8c5a7160026b455203e1eefe26640 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Tue, 3 Sep 2024 23:37:40 +0800
Subject: [PATCH] feat: change assistant sidebar width

---
 src/renderer/src/assets/styles/index.scss |  4 +--
 src/renderer/src/i18n/index.ts            |  8 +++--
 src/renderer/src/pages/home/HomePage.tsx  | 36 +++++++++++++----------
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index 8c21944a..ce8b99e7 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -48,8 +48,8 @@
   --status-bar-height: 40px;
   --input-bar-height: 85px;
 
-  --assistants-width: 245px;
-  --topic-list-width: 260px;
+  --assistants-width: 300px;
+  --topic-list-width: 300px;
   --settings-width: var(--assistants-width);
 }
 
diff --git a/src/renderer/src/i18n/index.ts b/src/renderer/src/i18n/index.ts
index 5e7da83d..444a3ed6 100644
--- a/src/renderer/src/i18n/index.ts
+++ b/src/renderer/src/i18n/index.ts
@@ -30,7 +30,8 @@ const resources = {
         search: 'Search',
         default: 'Default',
         warning: 'Warning',
-        back: 'Back'
+        back: 'Back',
+        chat: 'Chat'
       },
       button: {
         add: 'Add',
@@ -253,7 +254,7 @@ const resources = {
         topics: '话题',
         docs: '文档',
         and: '和',
-        assistant: '助手',
+        assistant: '智能体',
         name: '名称',
         description: '描述',
         prompt: '提示词',
@@ -270,7 +271,8 @@ const resources = {
         search: '搜索',
         default: '默认',
         warning: '警告',
-        back: '返回'
+        back: '返回',
+        chat: '聊天'
       },
       button: {
         add: '添加',
diff --git a/src/renderer/src/pages/home/HomePage.tsx b/src/renderer/src/pages/home/HomePage.tsx
index 24ee29b4..c05d0ba2 100644
--- a/src/renderer/src/pages/home/HomePage.tsx
+++ b/src/renderer/src/pages/home/HomePage.tsx
@@ -1,5 +1,6 @@
 import { ArrowLeftOutlined } from '@ant-design/icons'
-import { Navbar, NavbarCenter, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
+import { Navbar, NavbarCenter, NavbarLeft } from '@renderer/components/app/Navbar'
+import { HStack } from '@renderer/components/Layout'
 import { isMac, isWindows } from '@renderer/config/constant'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useAssistant, useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
@@ -63,27 +64,28 @@ const HomePage: FC = () => {
         {showAssistants && (
           <NavbarLeft
             style={{ justifyContent: 'space-between', alignItems: 'center', borderRight: 'none', padding: '0 8px' }}>
-            <NavigtaionBack onClick={() => setShowTopics(false)} style={{ opacity: showTopics ? 1 : 0 }}>
-              <ArrowLeftOutlined />
-              <NavigationBackTitle>{t('common.back')}</NavigationBackTitle>
+            <NavigtaionBack onClick={() => setShowTopics(false)}>
+              {showTopics && <ArrowLeftOutlined />}
+              <NavigationBackTitle>{showTopics ? t('common.back') : t('common.chat')}</NavigationBackTitle>
             </NavigtaionBack>
             <NewButton onClick={onCreate}>
               <i className="iconfont icon-a-addchat"></i>
             </NewButton>
           </NavbarLeft>
         )}
-        <NavbarCenter style={{ paddingLeft: isMac ? 16 : 8 }}>
-          <AssistantName>{activeAssistant?.name || t('chat.default.name')}</AssistantName>
-          <SelectModelButton assistant={activeAssistant} />
-        </NavbarCenter>
-        <NavbarRight style={{ justifyContent: 'flex-end', paddingRight: isWindows ? 140 : 12 }}>
+        <NavbarCenter
+          style={{ paddingLeft: isMac ? 16 : 8, justifyContent: 'space-between', paddingRight: isWindows ? 140 : 12 }}>
+          <HStack alignItems="center">
+            <AssistantName>{activeAssistant?.name || t('chat.default.name')}</AssistantName>
+            <SelectModelButton assistant={activeAssistant} />
+          </HStack>
           <ThemeSwitch
             checkedChildren={<i className="iconfont icon-theme icon-dark1" />}
             unCheckedChildren={<i className="iconfont icon-theme icon-theme-light" />}
             checked={theme === 'dark'}
             onChange={toggleTheme}
           />
-        </NavbarRight>
+        </NavbarCenter>
       </Navbar>
       <ContentContainer>
         {showAssistants && (
@@ -123,25 +125,29 @@ const NavigtaionBack = styled.div`
   justify-content: flex-start;
   gap: 10px;
   cursor: pointer;
-  margin-left: ${isMac ? '16px' : '4px'};
+  margin-left: ${isMac ? '14px' : '2px'};
   -webkit-app-region: none;
   transition: all 0.2s ease-in-out;
-  color: var(--color-icon);
   transition: opacity 0.2s ease-in-out;
+  padding: 2px 8px;
+  border-radius: 6px;
   &:hover {
-    color: var(--color-text-2);
+    background-color: var(--color-background-mute);
+    color: var(--color-text-1);
   }
 `
 
 const NavigationBackTitle = styled.div`
-  font-size: 13px;
-  font-weight: 500;
+  font-size: 14px;
+  font-weight: 800;
+  font-family: Ubuntu;
 `
 
 const AssistantName = styled.span`
   margin-left: 5px;
   margin-right: 10px;
   font-family: Ubuntu;
+  font-weight: 800;
 `
 
 export const NewButton = styled.div`