feat: edit agent

src/renderer/src/components/Popups/AgentSettingPopup.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react'
 import { TopView } from '../TopView'
 import { Box } from '../Layout'
 import { Agent } from '@renderer/types'
+import TextArea from 'antd/es/input/TextArea'
 
 interface AgentSettingPopupShowParams {
   agent: Agent
@@ -32,13 +33,15 @@ const AgentSettingPopupContainer: React.FC<Props> = ({ agent, resolve }) => {
   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
+      <Input placeholder="Agent Name" value={name} onChange={(e) => setName(e.target.value)} autoFocus />
+      <Box mt={8} mb={8}>
+        Description
+      </Box>
+      <TextArea
+        rows={4}
         placeholder="Agent Description"
         value={description}
         onChange={(e) => setDescription(e.target.value)}
-        allowClear
         autoFocus
       />
     </Modal>

src/renderer/src/pages/home/components/Agents.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import useAgents from '@renderer/hooks/useAgents'
 import { Agent } from '@renderer/types'
 import { Dropdown, MenuProps } from 'antd'
-import { EllipsisOutlined } from '@ant-design/icons'
+import { MoreOutlined } from '@ant-design/icons'
 import { last } from 'lodash'
 import AgentSettingPopup from '@renderer/components/Popups/AgentSettingPopup'
 
@@ -13,7 +13,7 @@ interface Props {
 }
 
 const Agents: FC<Props> = ({ activeAgent, onActive }) => {
-  const { agents, removeAgent } = useAgents()
+  const { agents, removeAgent, updateAgent } = useAgents()
   const targetAgent = useRef<Agent | null>(null)
 
   const onDelete = (agent: Agent) => {
@@ -31,13 +31,10 @@ const Agents: FC<Props> = ({ activeAgent, onActive }) => {
       async onClick() {
         if (targetAgent.current) {
           const _agent = await AgentSettingPopup.show({ agent: targetAgent.current })
+          updateAgent(_agent)
         }
       }
     },
-    {
-      label: 'Favorite',
-      key: 'favorite'
-    },
     { type: 'divider' },
     {
       label: 'Delete',
@@ -55,14 +52,15 @@ const Agents: FC<Props> = ({ activeAgent, onActive }) => {
           key={agent.id}
           onClick={() => onActive(agent)}
           className={agent.id === activeAgent?.id ? 'active' : ''}>
-          <Dropdown menu={{ items }} trigger={['click']} placement="bottom" arrow>
-            <EllipsisOutlined
-              style={{ position: 'absolute', right: 12, top: 12 }}
-              onClick={(e) => {
-                e.stopPropagation()
-                targetAgent.current = agent
-              }}
-            />
+          <Dropdown
+            menu={{ items }}
+            trigger={['click']}
+            placement="bottom"
+            arrow
+            onOpenChange={() => (targetAgent.current = agent)}>
+            <MenuButton className="menu-button" onClick={(e) => e.stopPropagation()}>
+              <MoreOutlined />
+            </MenuButton>
           </Dropdown>
           <AgentName>{agent.name}</AgentName>
           <AgentLastMessage>{agent.description}</AgentLastMessage>
@@ -98,6 +96,7 @@ const AgentItem = styled.div`
     background-color: var(--color-background-soft);
     .anticon {
       display: block;
+      color: var(--color-text-1);
     }
   }
   &.active {
@@ -124,4 +123,22 @@ const AgentLastMessage = styled.div`
   height: 20px;
 `
 
+const MenuButton = styled.div`
+  padding: 5px;
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  right: 10px;
+  top: 10px;
+  font-size: 18px;
+  border-radius: 50%;
+  transition: background-color 0.2s ease;
+  &:hover {
+    background-color: #ffffff30;
+    .anticon {
+      color: white;
+    }
+  }
+`
+
 export default Agents