From 2583f7299a4b73ee17045f1d6acfc1ca26ec942e Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Tue, 2 Jul 2024 15:41:20 +0800 Subject: [PATCH] feat: new theme color --- src/renderer/src/assets/styles/index.scss | 7 +- .../components/Popups/AgentSettingPopup.tsx | 66 +++++++++++++++++++ src/renderer/src/components/app/Navbar.tsx | 8 +-- src/renderer/src/components/app/Sidebar.tsx | 3 +- src/renderer/src/components/app/Statusbar.tsx | 2 +- src/renderer/src/config/antd.ts | 2 +- .../src/pages/home/components/Agents.tsx | 12 +++- .../pages/home/components/Chat/Inputbar.tsx | 2 +- .../pages/home/components/Chat/TopicList.tsx | 10 +-- .../src/pages/settings/SettingsPage.tsx | 4 +- 10 files changed, 97 insertions(+), 19 deletions(-) create mode 100644 src/renderer/src/components/Popups/AgentSettingPopup.tsx diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss index e63526d9..363f870d 100644 --- a/src/renderer/src/assets/styles/index.scss +++ b/src/renderer/src/assets/styles/index.scss @@ -17,19 +17,20 @@ --color-text-2: rgba(235, 235, 245, 0.6); --color-text-3: rgba(235, 235, 245, 0.38); - --color-background: #1e1e1e; + --color-background: #181818; --color-background-soft: var(--color-black-soft); --color-background-mute: var(--color-black-mute); --color-text: var(--color-text-1); --color-icon: #ffffff99; --color-icon-white: #ffffff; + --color-border: #ffffff20; - --navbar-height: 45px; + --navbar-height: 42px; --sidebar-width: 68px; --agents-width: 250px; --topic-list-width: var(--agents-width); - --settings-width: 280px; + --settings-width: var(--agents-width); --status-bar-height: 40px; --input-bar-height: 120px; } diff --git a/src/renderer/src/components/Popups/AgentSettingPopup.tsx b/src/renderer/src/components/Popups/AgentSettingPopup.tsx new file mode 100644 index 00000000..a9877122 --- /dev/null +++ b/src/renderer/src/components/Popups/AgentSettingPopup.tsx @@ -0,0 +1,66 @@ +import { Input, Modal } from 'antd' +import { useState } from 'react' +import { TopView } from '../TopView' +import { Box } from '../Layout' +import { Agent } from '@renderer/types' + +interface AgentSettingPopupShowParams { + agent: Agent +} + +interface Props extends AgentSettingPopupShowParams { + resolve: (agent: Agent) => void +} + +const AgentSettingPopupContainer: React.FC = ({ agent, resolve }) => { + const [name, setName] = useState(agent.name) + const [description, setDescription] = useState(agent.description) + const [open, setOpen] = useState(true) + + const onOk = () => { + setOpen(false) + } + + const handleCancel = () => { + setOpen(false) + } + + const onClose = () => { + resolve({ ...agent, name, description }) + } + + return ( + + Agent name + setName(e.target.value)} allowClear autoFocus /> + Description + setDescription(e.target.value)} + allowClear + autoFocus + /> + + ) +} + +export default class AgentSettingPopup { + static topviewId = 0 + static hide() { + TopView.hide(this.topviewId) + } + static show(props: AgentSettingPopupShowParams) { + return new Promise((resolve) => { + this.topviewId = TopView.show( + { + resolve(v) + this.hide() + }} + /> + ) + }) + } +} diff --git a/src/renderer/src/components/app/Navbar.tsx b/src/renderer/src/components/app/Navbar.tsx index 1f5849bc..edf54760 100644 --- a/src/renderer/src/components/app/Navbar.tsx +++ b/src/renderer/src/components/app/Navbar.tsx @@ -25,14 +25,14 @@ const NavbarContainer = styled.div` flex-direction: row; min-height: var(--navbar-height); max-height: var(--navbar-height); - background-color: #111; - border-bottom: 0.5px solid #ffffff20; + border-bottom: 0.5px solid var(--color-border); -webkit-app-region: drag; + background-color: #1f1f1f; ` const NavbarLeftContainer = styled.div` min-width: var(--agents-width); - border-right: 1px solid #ffffff20; + border-right: 1px solid var(--color-border); padding: 0 16px; display: flex; flex-direction: row; @@ -47,7 +47,7 @@ const NavbarCenterContainer = styled.div` font-weight: bold; color: var(--color-text-1); text-align: center; - border-right: 1px solid #ffffff20; + border-right: 1px solid var(--color-border); padding: 0 16px; ` diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx index c9fabdd9..127d71fb 100644 --- a/src/renderer/src/components/app/Sidebar.tsx +++ b/src/renderer/src/components/app/Sidebar.tsx @@ -45,10 +45,11 @@ const Container = styled.div` padding: 16px 0; min-width: var(--sidebar-width); min-height: 100%; - background: #262626; padding-top: 40px; padding-bottom: 10px; -webkit-app-region: drag !important; + background-color: #1f1f1f; + border-right: 0.5px solid var(--color-border); ` const Avatar = styled.div`` diff --git a/src/renderer/src/components/app/Statusbar.tsx b/src/renderer/src/components/app/Statusbar.tsx index 9c2703c7..09d5f4e4 100644 --- a/src/renderer/src/components/app/Statusbar.tsx +++ b/src/renderer/src/components/app/Statusbar.tsx @@ -13,7 +13,7 @@ const Statusbar: FC = () => { const Container = styled.div` min-height: var(--status-bar-height); - border-top: 1px solid #ffffff20; + border-top: 1px solid var(--color-border); display: flex; flex-direction: row; position: absolute; diff --git a/src/renderer/src/config/antd.ts b/src/renderer/src/config/antd.ts index fbdc3381..dfb57ee5 100644 --- a/src/renderer/src/config/antd.ts +++ b/src/renderer/src/config/antd.ts @@ -5,5 +5,5 @@ export const AntdThemeConfig: ThemeConfig = { colorPrimary: '#00b96b', borderRadius: 5 }, - algorithm: [theme.darkAlgorithm, theme.compactAlgorithm] + algorithm: [theme.darkAlgorithm] } diff --git a/src/renderer/src/pages/home/components/Agents.tsx b/src/renderer/src/pages/home/components/Agents.tsx index 75436f18..945e6304 100644 --- a/src/renderer/src/pages/home/components/Agents.tsx +++ b/src/renderer/src/pages/home/components/Agents.tsx @@ -5,6 +5,7 @@ import { Agent } from '@renderer/types' import { Dropdown, MenuProps } from 'antd' import { EllipsisOutlined } from '@ant-design/icons' import { last } from 'lodash' +import AgentSettingPopup from '@renderer/components/Popups/AgentSettingPopup' interface Props { activeAgent: Agent @@ -26,15 +27,22 @@ const Agents: FC = ({ activeAgent, onActive }) => { const items: MenuProps['items'] = [ { label: 'Edit', - key: 'edit' + key: 'edit', + async onClick() { + if (targetAgent.current) { + const _agent = await AgentSettingPopup.show({ agent: targetAgent.current }) + } + } }, { label: 'Favorite', key: 'favorite' }, + { type: 'divider' }, { label: 'Delete', key: 'delete', + danger: true, onClick: () => targetAgent.current && onDelete(targetAgent.current) } ] @@ -69,7 +77,7 @@ const Container = styled.div` flex-direction: column; min-width: var(--agents-width); max-width: var(--agents-width); - border-right: 0.5px solid #ffffff20; + border-right: 0.5px solid var(--color-border); height: calc(100vh - var(--navbar-height)); overflow-y: scroll; &::-webkit-scrollbar { diff --git a/src/renderer/src/pages/home/components/Chat/Inputbar.tsx b/src/renderer/src/pages/home/components/Chat/Inputbar.tsx index a7400399..97aa7561 100644 --- a/src/renderer/src/pages/home/components/Chat/Inputbar.tsx +++ b/src/renderer/src/pages/home/components/Chat/Inputbar.tsx @@ -88,7 +88,7 @@ const Container = styled.div` flex-direction: column; width: 100%; height: var(--input-bar-height); - border-top: 0.5px solid #ffffff20; + border-top: 0.5px solid var(--color-border); padding: 5px 15px; ` diff --git a/src/renderer/src/pages/home/components/Chat/TopicList.tsx b/src/renderer/src/pages/home/components/Chat/TopicList.tsx index 9f0dcc3a..4a9fe4ae 100644 --- a/src/renderer/src/pages/home/components/Chat/TopicList.tsx +++ b/src/renderer/src/pages/home/components/Chat/TopicList.tsx @@ -26,9 +26,11 @@ const TopicList: FC = ({ agent, activeTopic, setActiveTopic }) => { async onClick() { if (currentTopic.current) { const messages = await getTopicMessages(currentTopic.current.id) - const summaryText = await fetchConversationSummary({ messages }) - if (summaryText) { - updateTopic({ ...currentTopic.current, name: summaryText }) + if (messages.length >= 2) { + const summaryText = await fetchConversationSummary({ messages }) + if (summaryText) { + updateTopic({ ...currentTopic.current, name: summaryText }) + } } } } @@ -89,7 +91,7 @@ const TopicList: FC = ({ agent, activeTopic, setActiveTopic }) => { const Container = styled.div` width: var(--topic-list-width); height: 100%; - border-left: 0.5px solid #ffffff20; + border-left: 0.5px solid var(--color-border); padding: 10px; &.collapsed { width: 0; diff --git a/src/renderer/src/pages/settings/SettingsPage.tsx b/src/renderer/src/pages/settings/SettingsPage.tsx index 336d255e..91593823 100644 --- a/src/renderer/src/pages/settings/SettingsPage.tsx +++ b/src/renderer/src/pages/settings/SettingsPage.tsx @@ -66,7 +66,7 @@ const SettingMenus = styled.ul` display: flex; flex-direction: column; min-width: var(--agents-width); - border-right: 1px solid #ffffff20; + border-right: 1px solid var(--color-border); padding: 10px; ` @@ -95,7 +95,7 @@ const SettingContent = styled.div` display: flex; height: 100%; flex: 1; - border-right: 1px solid #ffffff20; + border-right: 1px solid var(--color-border); padding: 20px; `