Hugging Face's logo

Spaces:
smolagents
/
ml-agent
Running

App Files Community
1
ml-agent
File size: 2,812 Bytes
fe018ce
e77f678
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
import { Box, Stack, Typography, IconButton, Tooltip } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import type { Message } from '@/types/agent';

interface UserMessageProps {
  message: Message;
  /** True if this message starts the last turn. */
  isLastTurn?: boolean;
  /** Callback to remove the last turn. */
  onUndoTurn?: () => void;
  /** Whether the agent is currently processing (disables undo). */
  isProcessing?: boolean;
}

export default function UserMessage({
  message,
  isLastTurn = false,
  onUndoTurn,
  isProcessing = false,
}: UserMessageProps) {
  const showUndo = isLastTurn && !isProcessing && !!onUndoTurn;

  return (
    <Stack
      direction="row"
      spacing={1.5}
      justifyContent="flex-end"
      alignItems="flex-start"
      sx={{
        // Show the undo button when hovering the entire row
        '& .undo-btn': {
          opacity: 0,
          transition: 'opacity 0.15s ease',
        },
        '&:hover .undo-btn': {
          opacity: 1,
        },
      }}
    >
      {/* Undo button — visible on hover, left of the bubble */}
      {showUndo && (
        <Box className="undo-btn" sx={{ display: 'flex', alignItems: 'center', mt: 0.75 }}>
          <Tooltip title="Remove this turn" placement="left">
            <IconButton
              onClick={onUndoTurn}
              size="small"
              sx={{
                width: 24,
                height: 24,
                color: 'var(--muted-text)',
                '&:hover': {
                  color: 'var(--accent-red)',
                  bgcolor: 'rgba(244,67,54,0.08)',
                },
              }}
            >
              <CloseIcon sx={{ fontSize: 14 }} />
            </IconButton>
          </Tooltip>
        </Box>
      )}

      <Box
        sx={{
          maxWidth: { xs: '88%', md: '72%' },
          bgcolor: 'var(--surface)',
          borderRadius: 1.5,
          borderTopRightRadius: 4,
          px: { xs: 1.5, md: 2.5 },
          py: 1.5,
          border: '1px solid var(--border)',
        }}
      >
        <Typography
          variant="body1"
          sx={{
            fontSize: '0.925rem',
            lineHeight: 1.65,
            color: 'var(--text)',
            whiteSpace: 'pre-wrap',
            wordBreak: 'break-word',
          }}
        >
          {message.content}
        </Typography>

        <Typography
          variant="caption"
          sx={{
            display: 'block',
            textAlign: 'right',
            mt: 1,
            fontSize: '0.68rem',
            color: 'var(--muted-text)',
            opacity: 0.7,
          }}
        >
          {new Date(message.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
        </Typography>
      </Box>
    </Stack>
  );
}