diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss index b908f220..a56c1c69 100644 --- a/app/components/chat.module.scss +++ b/app/components/chat.module.scss @@ -251,6 +251,12 @@ display: flex; flex-direction: column; align-items: flex-start; + + &:hover { + .chat-message-edit { + opacity: 0.9; + } + } } .chat-message-user > .chat-message-container { @@ -259,6 +265,23 @@ .chat-message-avatar { margin-top: 20px; + position: relative; + + .chat-message-edit { + position: absolute; + height: 100%; + width: 100%; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: all ease 0.3s; + + button { + padding: 7px; + } + } } .chat-message-status { diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 7f785387..f6746217 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -23,6 +23,7 @@ import BreakIcon from "../icons/break.svg"; import SettingsIcon from "../icons/chat-settings.svg"; import DeleteIcon from "../icons/clear.svg"; import PinIcon from "../icons/pin.svg"; +import EditIcon from "../icons/rename.svg"; import LightIcon from "../icons/light.svg"; import DarkIcon from "../icons/dark.svg"; @@ -902,6 +903,25 @@ export function Chat() { >