welcome message change

frontend/src/components/Chat/MessageList.tsx

@@ -1,9 +1,7 @@
 import { useEffect, useRef, useMemo, useCallback } from 'react';
-import { Box, Stack, Typography, Avatar } from '@mui/material';
-import SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';
+import { Box, Stack, Typography } from '@mui/material';
 import MessageBubble from './MessageBubble';
 import ThinkingIndicator from './ThinkingIndicator';
-import MarkdownContent from './MarkdownContent';
 import { useAgentStore } from '@/store/agentStore';
 import { useSessionStore } from '@/store/sessionStore';
 import { apiFetch } from '@/utils/api';
@@ -15,66 +13,48 @@ interface MessageListProps {
   isProcessing: boolean;
 }
 
-const WELCOME_MD = `I'm ready to help you with machine learning tasks using the Hugging Face ecosystem.
-
-**Training & Fine-tuning** — SFT, DPO, GRPO, PPO with TRL · LoRA/PEFT · Submit and monitor jobs on cloud GPUs
-
-**Data** — Find and explore datasets · Process, filter, transform · Push to the Hub
-
-**Models** — Search and discover models · Get details and configs · Deploy for inference
-
-**Research** — Find papers and documentation · Explore code examples · Check APIs and best practices
-
-**Infrastructure** — Run jobs on CPU/GPU instances · Manage repos, branches, PRs · Monitor Spaces and endpoints
+function getGreeting(): string {
+  const h = new Date().getHours();
+  if (h < 12) return 'Morning';
+  if (h < 17) return 'Afternoon';
+  return 'Evening';
+}
 
-What would you like to do?`;
+/** Minimal greeting shown when the conversation is empty. */
+function WelcomeGreeting() {
+  const { user } = useAgentStore();
+  const firstName = user?.name?.split(' ')[0] || user?.username;
+  const greeting = firstName ? `${getGreeting()}, ${firstName}` : getGreeting();
 
-/** Static welcome message rendered when the conversation is empty. */
-function WelcomeMessage() {
   return (
-    <Stack direction="row" spacing={1.5} alignItems="flex-start">
-      <Avatar
+    <Box
+      sx={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        py: 8,
+        gap: 1.5,
+      }}
+    >
+      <Typography
         sx={{
-          width: 28,
-          height: 28,
-          bgcolor: 'primary.main',
-          flexShrink: 0,
-          mt: 0.5,
+          fontFamily: 'monospace',
+          fontSize: '1.1rem',
+          color: 'var(--text)',
+          fontWeight: 600,
         }}
       >
-        <SmartToyOutlinedIcon sx={{ fontSize: 16, color: '#fff' }} />
-      </Avatar>
-
-      <Box sx={{ flex: 1, minWidth: 0 }}>
-        <Stack direction="row" alignItems="baseline" spacing={1} sx={{ mb: 0.5 }}>
-          <Typography
-            variant="caption"
-            sx={{
-              fontWeight: 700,
-              fontSize: '0.72rem',
-              color: 'var(--muted-text)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.04em',
-            }}
-          >
-            Assistant
-          </Typography>
-        </Stack>
-        <Box
-          sx={{
-            maxWidth: { xs: '95%', md: '85%' },
-            bgcolor: 'var(--surface)',
-            borderRadius: 1.5,
-            borderTopLeftRadius: 4,
-            px: { xs: 1.5, md: 2.5 },
-            py: 1.5,
-            border: '1px solid var(--border)',
-          }}
-        >
-          <MarkdownContent content={WELCOME_MD} />
-        </Box>
-      </Box>
-    </Stack>
+        {greeting}
+      </Typography>
+      <Typography
+        color="text.secondary"
+        sx={{ fontFamily: 'monospace', fontSize: '0.8rem' }}
+      >
+        Let's build something impressive?
+      </Typography>
+    </Box>
   );
 }
 
@@ -91,8 +71,6 @@ export default function MessageList({ messages, isProcessing }: MessageListProps
   }, []);
 
   // ── Track user scroll intent ────────────────────────────────────
-  // When user scrolls up (>80px from bottom), disable auto-scroll.
-  // When they scroll back to bottom, re-enable it.
   useEffect(() => {
     const el = scrollContainerRef.current;
     if (!el) return;
@@ -112,8 +90,6 @@ export default function MessageList({ messages, isProcessing }: MessageListProps
   }, [messages, isProcessing, scrollToBottom]);
 
   // ── Auto-scroll on DOM mutations (streaming content growth) ─────
-  // This catches token-by-token updates that don't change the messages
-  // array reference (appendToMessage mutates in place).
   useEffect(() => {
     const el = scrollContainerRef.current;
     if (!el) return;
@@ -145,7 +121,6 @@ export default function MessageList({ messages, isProcessing }: MessageListProps
     if (!activeSessionId) return;
     try {
       await apiFetch(`/api/undo/${activeSessionId}`, { method: 'POST' });
-      // Optimistic removal — backend will also confirm via undo_complete WS event
       removeLastTurn(activeSessionId);
     } catch (e) {
       logger.error('Undo failed:', e);
@@ -160,6 +135,8 @@ export default function MessageList({ messages, isProcessing }: MessageListProps
         overflow: 'auto',
         px: { xs: 0.5, sm: 1, md: 2 },
         py: { xs: 2, md: 3 },
+        display: 'flex',
+        flexDirection: 'column',
       }}
     >
       <Stack
@@ -168,12 +145,12 @@ export default function MessageList({ messages, isProcessing }: MessageListProps
           maxWidth: 880,
           mx: 'auto',
           width: '100%',
+          flex: messages.length === 0 && !isProcessing ? 1 : undefined,
         }}
       >
-        {/* Always show the welcome message at the top */}
-        <WelcomeMessage />
-
-        {messages.length > 0 && (
+        {messages.length === 0 && !isProcessing ? (
+          <WelcomeGreeting />
+        ) : (
           messages.map((msg) => (
             <MessageBubble
               key={msg.id}