feat: change assistant sidebar width

This commit is contained in:
kangfenmao 2024-09-03 23:37:40 +08:00
parent f10c8dc379
commit 9e2c7a08df
3 changed files with 28 additions and 20 deletions

View File

@ -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);
}

View File

@ -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: '添加',

View File

@ -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`