1 files changed, 27 insertions(+), 1 deletions(-)

M src/components/Chat.tsx

@@ 31,6 31,7 @@ import CallMade from "@mui/icons-material/CallMade";
 import CallReceived from "@mui/icons-material/CallReceived";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
+	faPencil,
 	faPhoneSlash,
 	faPhoneVolume,
 	faPhoneAlt,


@@ 160,6 161,7 @@ export const Chat = ({ persistence }: { persistence: any }) => {
 	const [editing, setEditing] = useState(null);
 	const [searchMessages, setSearchMessages] = useState(false);
 	const [searchMessageResults, setSearchMessageResults] = useState([]);
+	const [editChatName, setEditChatName] = useState(false);
 
 	// When conversation has changed
 	useEffect(() => {


@@ 200,6 202,7 @@ export const Chat = ({ persistence }: { persistence: any }) => {
 		setSearchMessages(false);
 		setSearchMessageResults([]);
 		setShowSidebar(false);
+		setEditChatName(false);
 		previousConversation.current = activeConversation;
 	}, [activeConversation]);
 


@@ 1026,9 1029,32 @@ export const Chat = ({ persistence }: { persistence: any }) => {
 							userName={
 								searchMessages ? "Search Results" : activeConversationInfo?.fn
 							}
-						/>
+						>
+							{!editChatName ? undefined : (
+								<input
+									type="text"
+									defaultValue={activeConversation?.data?.chat?.getDisplayName()}
+									autoFocus={true}
+									onBlur={(e) => setEditChatName(false)}
+									onKeyPress={(e) => {
+										if (e.key === "Enter") {
+											activeConversation?.data?.chat?.setDisplayName(
+												(e.target as HTMLInputElement).value,
+											);
+											setEditChatName(false);
+										}
+									}}
+								/>
+							)}
+						</ConversationHeader.Content>
 						{activeConversation && (
 							<ConversationHeader.Actions>
+								{activeConversation.data.chat && (
+									<Button
+										icon={<FontAwesomeIcon icon={faPencil} />}
+										onClick={(e) => setEditChatName(true)}
+									/>
+								)}
 								{!activeConversation.data.chat.isTrusted() && (
 									<AddUserButton
 										onClick={(e) => {