diff --git a/src/apps/chat/components/message/ChatMessage.tsx b/src/apps/chat/components/message/ChatMessage.tsx
index 7f8ba8415..0f08bfbe0 100644
--- a/src/apps/chat/components/message/ChatMessage.tsx
+++ b/src/apps/chat/components/message/ChatMessage.tsx
@@ -6,7 +6,9 @@ import type { SxProps } from '@mui/joy/styles/types';
import { Avatar, Box, ButtonGroup, CircularProgress, IconButton, ListDivider, ListItem, ListItemDecorator, MenuItem, Switch, Tooltip, Typography } from '@mui/joy';
import { ClickAwayListener, Popper } from '@mui/base';
import AccountTreeOutlinedIcon from '@mui/icons-material/AccountTreeOutlined';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import ClearIcon from '@mui/icons-material/Clear';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import DifferenceIcon from '@mui/icons-material/Difference';
import EditRoundedIcon from '@mui/icons-material/EditRounded';
@@ -552,8 +554,22 @@ export function ChatMessage(props: {
gap: { xs: 0, md: 1 },
}}>
+ {/* Editing: Apply */}
+ {isEditingText && (
+
+
+
+
+
+
+ {/**/}
+ {/* Save*/}
+ {/**/}
+
+ )}
+
{/* Avatar (Persona) */}
- {showAvatar && (
+ {showAvatar && !isEditingText && (
{/* Persona Avatar or Menu Button */}
@@ -726,6 +742,20 @@ export function ChatMessage(props: {
+ {/* Editing: Cancel */}
+ {isEditingText && (
+
+
+
+
+
+
+ {/**/}
+ {/* Close*/}
+ {/**/}
+
+ )}
+
@@ -765,9 +795,8 @@ export function ChatMessage(props: {
{/* Edit */}
{!!props.onMessageFragmentReplace && (
)}
{/* Copy */}
diff --git a/src/apps/chat/components/message/ContentPartTextEdit.tsx b/src/apps/chat/components/message/ContentPartTextEdit.tsx
index 4eb196fd3..64e816778 100644
--- a/src/apps/chat/components/message/ContentPartTextEdit.tsx
+++ b/src/apps/chat/components/message/ContentPartTextEdit.tsx
@@ -12,6 +12,8 @@ import { useUIPreferencesStore } from '~/common/state/store-ui';
const textEditAreaSx: SxProps = {
...blocksRendererSx,
+ // just shrink padding tiny bit
+ py: 0.5,
// make the editing stand out a bit more
boxShadow: 'inset 1px 0px 3px -2px var(--joy-palette-warning-softColor)',
outline: '1px solid',