fix: avatar flickering and preview size

src/components/ChatPreview.tsx

@@ -128,14 +128,14 @@ export default function ChatPreview({ agent, agentId }: Props) {
     }
   };
 
-  const isImageUrl = (url: string) => url?.startsWith('http') || url?.startsWith('/');
+  const isImageUrl = (url: string | undefined) => url?.startsWith('http') || url?.startsWith('/');
 
   return (
     <div className="flex flex-col h-full bg-gray-50 border-l">
       <div className="p-4 border-b bg-white flex items-center gap-3">
         <div 
-          className="w-8 h-8 rounded-full text-white flex items-center justify-center font-bold overflow-hidden"
-          style={{ background: agent.avatar || '#0891b2' }}
+          className="rounded-full text-white flex items-center justify-center font-bold overflow-hidden"
+          style={{ width: 84, height: 84, background: agent.avatar || '#0891b2' }}
         >
           {isImageUrl(agent.avatar) ? (
             <img src={agent.avatar} className="w-full h-full object-cover" alt="avatar" />

src/pages/AgentEditor/components/CapabilitySettings.tsx

@@ -51,30 +51,19 @@ export default function CapabilitySettings({
           <div className="agent-editor-intro" style={{ marginBottom: 18 }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
               <div
-                className="avatar-container"
+                className="rounded-full flex items-center justify-center text-3xl text-white font-bold shadow-xl relative transition-all duration-500 overflow-hidden ring-4 ring-white mx-auto"
                 style={{
-                  width: 72,
-                  height: 72,
-                  borderRadius: '50%',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontSize: 24,
-                  color: 'white',
-                  fontWeight: 'bold',
-                  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
-                  cursor: 'pointer',
-                  overflow: 'hidden',
-                  position: 'relative',
-                  background: isImageUrl(agent?.avatar || selectedAvatar) ? '#f3f4f6' : agent?.avatar || selectedAvatar,
+                  width: 88,
+                  height: 88,
+                  background: isImageUrl(agent?.avatar) ? '#f3f4f6' : agent?.avatar,
                   border: '3px solid rgba(255,255,255,0.92)',
                 }}
                 onClick={() => setAvatarSelectorOpen(true)}
               >
-                {isImageUrl(agent?.avatar || selectedAvatar) ? (
-                  <img src={agent?.avatar || selectedAvatar} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="avatar" />
+                {isImageUrl(agent?.avatar) ? (
+                  <img src={agent?.avatar} style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="avatar" />
                 ) : (
-                  (agentName?.charAt(0) || '?').toUpperCase()
+                  (agent?.name?.charAt(0) || agentName?.charAt(0) || '?').toUpperCase()
                 )}
                 <div className="avatar-overlay">
                   <span className="avatar-overlay-text">更换形象</span>

src/pages/AgentEditor/constants.ts

@@ -30,7 +30,7 @@ export const TYPE_TAG: Record<SkillType, { color: string; icon: string; label: s
   js: { color: 'volcano', icon: '⚙️', label: 'JS' },
 };
 
-export const isImageUrl = (url: string) => url?.startsWith('http') || url?.startsWith('/');
+export const isImageUrl = (url: string | undefined) => url?.startsWith('http') || url?.startsWith('/');
 
 export const parseModelSelections = (value?: string | string[]) =>
   Array.isArray(value)