refactor: simplify agent creation form (#11369)

* refactor(AgentModal): simplify agent type handling and update default values

- Removed unused agent type options and related logic.
- Updated default agent name from 'Claude Code' to 'Agent'.
- Adjusted padding in button styles and textarea rows for better UI consistency.
- Cleaned up unnecessary imports and code comments for improved readability.

* refactor(AgentSettings): clean up and enhance name setting component

- Removed unused imports and commented-out code in AgentModal and EssentialSettings.
- Updated NameSetting to include an emoji avatar picker for enhanced user experience.
- Simplified the logic for updating the agent's name and avatar.
- Improved overall readability and maintainability of the code.

src/renderer/src/components/Popups/agent/AgentModal.tsx

@@ -1,5 +1,4 @@
 import { loggerService } from '@logger'
-import ClaudeIcon from '@renderer/assets/images/models/claude.png'
 import { ErrorBoundary } from '@renderer/components/ErrorBoundary'
 import { TopView } from '@renderer/components/TopView'
 import { permissionModeCards } from '@renderer/config/agent'
@@ -9,7 +8,6 @@ import SelectAgentBaseModelButton from '@renderer/pages/home/components/SelectAg
 import type {
   AddAgentForm,
   AgentEntity,
-  AgentType,
   ApiModel,
   BaseAgentForm,
   PermissionMode,
@@ -17,30 +15,22 @@ import type {
   UpdateAgentForm
 } from '@renderer/types'
 import { AgentConfigurationSchema, isAgentType } from '@renderer/types'
-import { Avatar, Button, Input, Modal, Select } from 'antd'
+import { Button, Input, Modal, Select } from 'antd'
 import { AlertTriangleIcon } from 'lucide-react'
 import type { ChangeEvent, FormEvent } from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import type { BaseOption } from './shared'
-
 const { TextArea } = Input
 
 const logger = loggerService.withContext('AddAgentPopup')
 
-interface AgentTypeOption extends BaseOption {
-  type: 'type'
-  key: AgentEntity['type']
-  name: AgentEntity['name']
-}
-
 type AgentWithTools = AgentEntity & { tools?: Tool[] }
 
 const buildAgentForm = (existing?: AgentWithTools): BaseAgentForm => ({
   type: existing?.type ?? 'claude-code',
-  name: existing?.name ?? 'Claude Code',
+  name: existing?.name ?? 'Agent',
   description: existing?.description,
   instructions: existing?.instructions,
   model: existing?.model ?? '',
@@ -100,54 +90,6 @@ const PopupContainer: React.FC<Props> = ({ agent, afterSubmit, resolve }) => {
     })
   }, [])
 
-  // add supported agents type here.
-  const agentConfig = useMemo(
-    () =>
-      [
-        {
-          type: 'type',
-          key: 'claude-code',
-          label: 'Claude Code',
-          name: 'Claude Code',
-          avatar: ClaudeIcon
-        }
-      ] as const satisfies AgentTypeOption[],
-    []
-  )
-
-  const agentOptions = useMemo(
-    () =>
-      agentConfig.map((option) => ({
-        value: option.key,
-        label: (
-          <OptionWrapper>
-            <Avatar src={option.avatar} size={24} />
-            <span>{option.label}</span>
-          </OptionWrapper>
-        )
-      })),
-    [agentConfig]
-  )
-
-  const onAgentTypeChange = useCallback(
-    (value: AgentType) => {
-      const prevConfig = agentConfig.find((config) => config.key === form.type)
-      let newName: string | undefined = form.name
-      if (prevConfig && prevConfig.name === form.name) {
-        const newConfig = agentConfig.find((config) => config.key === value)
-        if (newConfig) {
-          newName = newConfig.name
-        }
-      }
-      setForm((prev) => ({
-        ...prev,
-        type: value,
-        name: newName
-      }))
-    },
-    [agentConfig, form.name, form.type]
-  )
-
   const onNameChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     setForm((prev) => ({
       ...prev,
@@ -155,12 +97,12 @@ const PopupContainer: React.FC<Props> = ({ agent, afterSubmit, resolve }) => {
     }))
   }, [])
 
-  const onDescChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
-    setForm((prev) => ({
-      ...prev,
-      description: e.target.value
-    }))
-  }, [])
+  // const onDescChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
+  //   setForm((prev) => ({
+  //     ...prev,
+  //     description: e.target.value
+  //   }))
+  // }, [])
 
   const onInstChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
     setForm((prev) => ({
@@ -334,16 +276,6 @@ const PopupContainer: React.FC<Props> = ({ agent, afterSubmit, resolve }) => {
         <StyledForm onSubmit={onSubmit}>
           <FormContent>
             <FormRow>
-              <FormItem style={{ flex: 1 }}>
-                <Label>{t('agent.type.label')}</Label>
-                <Select
-                  value={form.type}
-                  onChange={onAgentTypeChange}
-                  options={agentOptions}
-                  disabled={isEditing(agent)}
-                  style={{ width: '100%' }}
-                />
-              </FormItem>
               <FormItem style={{ flex: 1 }}>
                 <Label>
                   {t('common.name')} <RequiredMark>*</RequiredMark>
@@ -363,7 +295,7 @@ const PopupContainer: React.FC<Props> = ({ agent, afterSubmit, resolve }) => {
                 avatarSize={24}
                 iconSize={16}
                 buttonStyle={{
-                  padding: '8px 12px',
+                  padding: '3px 8px',
                   width: '100%',
                   border: '1px solid var(--color-border)',
                   borderRadius: 6,
@@ -382,7 +314,6 @@ const PopupContainer: React.FC<Props> = ({ agent, afterSubmit, resolve }) => {
                 onChange={onPermissionModeChange}
                 style={{ width: '100%' }}
                 placeholder={t('agent.settings.tooling.permissionMode.placeholder', 'Select permission mode')}
-                dropdownStyle={{ minWidth: '500px' }}
                 optionLabelProp="label">
                 {permissionModeCards.map((item) => (
                   <Select.Option key={item.mode} value={item.mode} label={t(item.titleKey, item.titleFallback)}>
@@ -438,10 +369,10 @@ const PopupContainer: React.FC<Props> = ({ agent, afterSubmit, resolve }) => {
               <TextArea rows={3} value={form.instructions ?? ''} onChange={onInstChange} />
             </FormItem>
 
-            <FormItem>
+            {/* <FormItem>
               <Label>{t('common.description')}</Label>
-              <TextArea rows={2} value={form.description ?? ''} onChange={onDescChange} />
-            </FormItem>
+              <TextArea rows={1} value={form.description ?? ''} onChange={onDescChange} />
+            </FormItem> */}
           </FormContent>
 
           <FormFooter>
@@ -575,14 +506,7 @@ const FormFooter = styled.div`
   display: flex;
   justify-content: flex-end;
   gap: 8px;
-  padding-top: 16px;
-  border-top: 1px solid var(--color-border);
-`
-
-const OptionWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  padding: 10px;
 `
 
 const PermissionOptionWrapper = styled.div`

src/renderer/src/pages/settings/AgentSettings/EssentialSettings.tsx

@@ -1,21 +1,13 @@
-import { getAgentTypeAvatar } from '@renderer/config/agent'
 import type { useUpdateAgent } from '@renderer/hooks/agents/useUpdateAgent'
 import type { useUpdateSession } from '@renderer/hooks/agents/useUpdateSession'
-import { getAgentTypeLabel } from '@renderer/i18n/label'
 import type { GetAgentResponse, GetAgentSessionResponse } from '@renderer/types'
-import { isAgentEntity } from '@renderer/types'
-import { Avatar } from 'antd'
 import type { FC } from 'react'
-import { useTranslation } from 'react-i18next'
 
 import { AccessibleDirsSetting } from './AccessibleDirsSetting'
-import { AvatarSetting } from './AvatarSetting'
 import { DescriptionSetting } from './DescriptionSetting'
 import { ModelSetting } from './ModelSetting'
 import { NameSetting } from './NameSetting'
-import { SettingsContainer, SettingsItem, SettingsTitle } from './shared'
-
-// const logger = loggerService.withContext('AgentEssentialSettings')
+import { SettingsContainer } from './shared'
 
 type EssentialSettingsProps =
   | {
@@ -30,26 +22,10 @@ type EssentialSettingsProps =
     }
 
 const EssentialSettings: FC<EssentialSettingsProps> = ({ agentBase, update, showModelSetting = true }) => {
-  const { t } = useTranslation()
-
   if (!agentBase) return null
 
-  const isAgent = isAgentEntity(agentBase)
-
   return (
     <SettingsContainer>
-      {isAgent && (
-        <SettingsItem inline>
-          <SettingsTitle>{t('agent.type.label')}</SettingsTitle>
-          <div className="flex items-center gap-2">
-            <Avatar size={24} src={getAgentTypeAvatar(agentBase.type)} className="h-6 w-6 text-lg" />
-            <span>{(agentBase?.name ?? agentBase?.type) ? getAgentTypeLabel(agentBase.type) : ''}</span>
-          </div>
-        </SettingsItem>
-      )}
-      {isAgent && (
-        <AvatarSetting agent={agentBase} update={update as ReturnType<typeof useUpdateAgent>['updateAgent']} />
-      )}
       <NameSetting base={agentBase} update={update} />
       {showModelSetting && <ModelSetting base={agentBase} update={update} />}
       <AccessibleDirsSetting base={agentBase} update={update} />

src/renderer/src/pages/settings/AgentSettings/NameSetting.tsx

@@ -1,6 +1,8 @@
+import { EmojiAvatarWithPicker } from '@renderer/components/Avatar/EmojiAvatarWithPicker'
 import type { AgentBaseWithId, UpdateAgentBaseForm, UpdateAgentFunctionUnion } from '@renderer/types'
+import { AgentConfigurationSchema, isAgentEntity, isAgentType } from '@renderer/types'
 import { Input } from 'antd'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { SettingsItem, SettingsTitle } from './shared'
@@ -13,26 +15,61 @@ export interface NameSettingsProps {
 export const NameSetting = ({ base, update }: NameSettingsProps) => {
   const { t } = useTranslation()
   const [name, setName] = useState<string | undefined>(base?.name?.trim())
+
   const updateName = async (name: UpdateAgentBaseForm['name']) => {
     if (!base) return
     return update({ id: base.id, name: name?.trim() })
   }
+
+  // Avatar logic
+  const isAgent = isAgentEntity(base)
+  const isDefault = isAgent ? isAgentType(base.configuration?.avatar) : false
+  const [emoji, setEmoji] = useState(isAgent && !isDefault ? (base.configuration?.avatar ?? '⭐️') : '⭐️')
+
+  const updateAvatar = useCallback(
+    (avatar: string) => {
+      if (!isAgent || !base) return
+      const parsedConfiguration = AgentConfigurationSchema.parse(base.configuration ?? {})
+      const payload = {
+        id: base.id,
+        configuration: {
+          ...parsedConfiguration,
+          avatar
+        }
+      }
+      update(payload)
+    },
+    [base, update, isAgent]
+  )
+
   if (!base) return null
 
   return (
     <SettingsItem inline>
       <SettingsTitle>{t('common.name')}</SettingsTitle>
-      <Input
-        placeholder={t('common.agent_one') + t('common.name')}
-        value={name}
-        onChange={(e) => setName(e.target.value)}
-        onBlur={() => {
-          if (name !== base.name) {
-            updateName(name)
-          }
-        }}
-        className="max-w-70 flex-1"
-      />
+      <div className="flex max-w-70 flex-1 items-center gap-1">
+        {isAgent && (
+          <EmojiAvatarWithPicker
+            emoji={emoji}
+            onPick={(emoji: string) => {
+              setEmoji(emoji)
+              if (isAgent && emoji === base?.configuration?.avatar) return
+              updateAvatar(emoji)
+            }}
+          />
+        )}
+        <Input
+          placeholder={t('common.agent_one') + t('common.name')}
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onBlur={() => {
+            if (name !== base.name) {
+              updateName(name)
+            }
+          }}
+          className="flex-1"
+        />
+      </div>
     </SettingsItem>
   )
 }