fix: agent default model (#10774)

* refactor(AgentModal): simplify trigger prop structure and mark Agents as deprecated

- Replace trigger prop with children for simpler component usage
- Add deprecation notice to Agents component

* fix(AgentModal): set empty default model instead of 'claude-4-sonnet'

The default model should be empty to require explicit selection rather than defaulting to a specific model

* fix(AgentModal): wrap children in conditional check to prevent undefined errors

* refactor(agent-modal): simplify modal control by removing trigger props

Remove the trigger props pattern from AgentModal component and use explicit isOpen/onClose control. This makes the component's behavior more predictable and aligns with the usage pattern in the Agents page where modal state is managed externally.

Also remove unused ReactNode import and clean up related comments.

* refactor(UnifiedAddButton): replace useState with useDisclosure for agent modal

Use useDisclosure hook for better state management of agent modal

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

@@ -1,6 +1,5 @@
 import {
   Button,
-  cn,
   Form,
   Input,
   Modal,
@@ -34,7 +33,7 @@ import {
   UpdateAgentForm
 } from '@renderer/types'
 import { AlertTriangleIcon } from 'lucide-react'
-import { ChangeEvent, FormEvent, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ChangeEvent, FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { ErrorBoundary } from '../../ErrorBoundary'
@@ -57,43 +56,30 @@ const buildAgentForm = (existing?: AgentWithTools): BaseAgentForm => ({
   name: existing?.name ?? 'Claude Code',
   description: existing?.description,
   instructions: existing?.instructions,
-  model: existing?.model ?? 'claude-4-sonnet',
+  model: existing?.model ?? '',
   accessible_paths: existing?.accessible_paths ? [...existing.accessible_paths] : [],
   allowed_tools: existing?.allowed_tools ? [...existing.allowed_tools] : [],
   mcps: existing?.mcps ? [...existing.mcps] : [],
   configuration: AgentConfigurationSchema.parse(existing?.configuration ?? {})
 })
 
-interface BaseProps {
+type Props = {
   agent?: AgentWithTools
-}
-
-interface TriggerProps extends BaseProps {
-  trigger: { content: ReactNode; className?: string }
-  isOpen?: never
-  onClose?: never
-}
-
-interface StateProps extends BaseProps {
-  trigger?: never
   isOpen: boolean
   onClose: () => void
 }
 
-type Props = TriggerProps | StateProps
-
 /**
  * Modal component for creating or editing an agent.
  *
  * Either trigger or isOpen and onClose is given.
  * @param agent - Optional agent entity for editing mode.
- * @param trigger - Optional trigger element that opens the modal. It MUST propagate the click event to trigger the modal.
  * @param isOpen - Optional controlled modal open state. From useDisclosure.
  * @param onClose - Optional callback when modal closes. From useDisclosure.
  * @returns Modal component for agent creation/editing
  */
-export const AgentModal: React.FC<Props> = ({ agent, trigger, isOpen: _isOpen, onClose: _onClose }) => {
-  const { isOpen, onClose, onOpen } = useDisclosure({ isOpen: _isOpen, onClose: _onClose })
+export const AgentModal: React.FC<Props> = ({ agent, isOpen: _isOpen, onClose: _onClose }) => {
+  const { isOpen, onClose } = useDisclosure({ isOpen: _isOpen, onClose: _onClose })
   const { t } = useTranslation()
   const loadingRef = useRef(false)
   // const { setTimeoutTimer } = useTimer()
@@ -359,23 +345,6 @@ export const AgentModal: React.FC<Props> = ({ agent, trigger, isOpen: _isOpen, o
 
   return (
     <ErrorBoundary>
-      {/* NOTE: Hero UI Modal Pattern: Combine the Button and Modal components into a single
-      encapsulated component. This is because the Modal component needs to bind the onOpen
-      event handler to the Button for proper focus management.
-
-      Or just use external isOpen/onOpen/onClose to control modal state.
-      */}
-
-      {trigger && (
-        <div
-          onClick={(e) => {
-            e.stopPropagation()
-            onOpen()
-          }}
-          className={cn('w-full', trigger.className)}>
-          {trigger.content}
-        </div>
-      )}
       <Modal
         isOpen={isOpen}
         onClose={onClose}

src/renderer/src/pages/home/Tabs/components/UnifiedAddButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Popover, PopoverContent, PopoverTrigger } from '@heroui/react'
+import { Button, Popover, PopoverContent, PopoverTrigger, useDisclosure } from '@heroui/react'
 import { AgentModal } from '@renderer/components/Popups/agent/AgentModal'
 import { Bot, MessageSquare } from 'lucide-react'
 import { FC, useState } from 'react'
@@ -13,7 +13,7 @@ interface UnifiedAddButtonProps {
 const UnifiedAddButton: FC<UnifiedAddButtonProps> = ({ onCreateAssistant }) => {
   const { t } = useTranslation()
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
-  const [isAgentModalOpen, setIsAgentModalOpen] = useState(false)
+  const { isOpen: isAgentModalOpen, onOpen: onAgentModalOpen, onClose: onAgentModalClose } = useDisclosure()
 
   const handleAddAssistant = () => {
     setIsPopoverOpen(false)
@@ -22,7 +22,7 @@ const UnifiedAddButton: FC<UnifiedAddButtonProps> = ({ onCreateAssistant }) => {
 
   const handleAddAgent = () => {
     setIsPopoverOpen(false)
-    setIsAgentModalOpen(true)
+    onAgentModalOpen()
   }
 
   return (
@@ -53,7 +53,7 @@ const UnifiedAddButton: FC<UnifiedAddButtonProps> = ({ onCreateAssistant }) => {
         </PopoverContent>
       </Popover>
 
-      <AgentModal isOpen={isAgentModalOpen} onClose={() => setIsAgentModalOpen(false)} />
+      <AgentModal isOpen={isAgentModalOpen} onClose={onAgentModalClose} />
     </div>
   )
 }