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 && ( - + {isEditingText ? : } {isEditingText ? 'Discard' : 'Edit'} - {/*{!isEditingText && {doubleClickToEdit ? '(double-click)' : ''}}*/} )} {/* 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',