refactor(FR-896): chat card state managment and naming convention (#3573)

Resolves #3574 (FR-896)

# Refactor Chat Components for Better State Management

- Refactored `AIAgentSelect` to use the `useAIAgent` hook directly instead of requiring agents to be passed as props
- Simplified `ChatCard` component by removing redundant state management and using controlled components
- Added `onUpdateChat` callback to `ChatCard` to propagate changes to parent components
- Improved `ChatHeader` component by making it more declarative with explicit callbacks
- Enhanced `Conversation` component to properly update chat state using the new callback pattern
-Fetch default endpoint selection in `ChatPage` to improve initial user experience
- Removed unnecessary state variables and transitions for better performance
- Fixed prop types and interfaces across components for better type safety

Author: yomybaby

react/src/components/Chat/AIAgentSelect.tsx

@@ -1,14 +1,11 @@
-import { AIAgent } from '../../hooks/useAIAgent';
+import { AIAgent, useAIAgent } from '../../hooks/useAIAgent';
 import Flex from '../Flex';
 import { FluentEmojiIcon } from '../FluentEmojiIcon';
 import { useControllableValue } from 'ahooks';
 import { Select, SelectProps, theme } from 'antd';
 import React, { useState, useTransition } from 'react';
 
-interface ChatAgentSelectProps extends Omit<SelectProps, 'options'> {
-  agents: AIAgent[];
-  selectedAgent?: AIAgent;
-}
+interface ChatAgentSelectProps extends Omit<SelectProps, 'options'> {}
 
 function makeAgentOptions(agents: AIAgent[], filter?: string) {
   return agents
@@ -24,21 +21,17 @@ function makeAgentOptions(agents: AIAgent[], filter?: string) {
 
 const AIAgentSelect: React.FC<ChatAgentSelectProps> = ({
   loading,
-  agents,
-  selectedAgent,
   ...props
 }) => {
   const { token } = theme.useToken();
-  const [controllableValue, setControllableValue] =
-    useControllableValue<AIAgent>(props, {
-      valuePropName: 'value',
-      trigger: 'onChange',
-      defaultValue: props.value,
-    });
+  const [controllableValue, setControllableValue] = useControllableValue(props);
 
   const [searchAgent, setSearchAgent] = useState<string>();
   const [isSearchPending, startSearchTransition] = useTransition();
 
+  const { agents } = useAIAgent();
+  const selectedAgent = agents.find((agent) => agent.id === controllableValue);
+
   return (
     <>
       {selectedAgent && (