feat: new theme color

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

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<Props> = ({ 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 (
+    <Modal title={agent.name} open={open} onOk={onOk} onCancel={handleCancel} afterClose={onClose}>
+      <Box mb={8}>Agent name</Box>
+      <Input placeholder="Agent Name" value={name} onChange={(e) => setName(e.target.value)} allowClear autoFocus />
+      <Box mb={8}>Description</Box>
+      <Input
+        placeholder="Agent Description"
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        allowClear
+        autoFocus
+      />
+    </Modal>
+  )
+}
+
+export default class AgentSettingPopup {
+  static topviewId = 0
+  static hide() {
+    TopView.hide(this.topviewId)
+  }
+  static show(props: AgentSettingPopupShowParams) {
+    return new Promise<Agent>((resolve) => {
+      this.topviewId = TopView.show(
+        <AgentSettingPopupContainer
+          {...props}
+          resolve={(v) => {
+            resolve(v)
+            this.hide()
+          }}
+        />
+      )
+    })
+  }
+}

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

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

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;

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]
 }

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<Props> = ({ 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 {

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

src/renderer/src/pages/home/components/Chat/TopicList.tsx

@@ -26,9 +26,11 @@ const TopicList: FC<Props> = ({ 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<Props> = ({ 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;

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