diff --git a/src/components/Menu/ChatFolder.tsx b/src/components/Menu/ChatFolder.tsx index e0e42ce..43bb16e 100644 --- a/src/components/Menu/ChatFolder.tsx +++ b/src/components/Menu/ChatFolder.tsx @@ -30,42 +30,55 @@ const ChatFolder = ({ const [_folderName, _setFolderName] = useState(folderName); const [isEdit, setIsEdit] = useState(false); const [isDelete, setIsDelete] = useState(false); - // const [isExpanded, setIsExpanded] = useState( - // useStore.getState().foldersExpanded[folderIndex] - // ); const [isHover, setIsHover] = useState(false); - const handleTick = (e: React.MouseEvent) => { - e.stopPropagation(); + const editTitle = () => { const updatedChats: ChatInterface[] = JSON.parse( JSON.stringify(useStore.getState().chats) ); - if (isEdit) { - updatedChats.forEach((chat) => { - if (chat.folder === folderName) chat.folder = _folderName; - }); - setChats(updatedChats); + updatedChats.forEach((chat) => { + if (chat.folder === folderName) chat.folder = _folderName; + }); + setChats(updatedChats); - const updatedFolderNames = [...useStore.getState().foldersName]; - const pos = updatedFolderNames.indexOf(folderName); - if (pos !== -1) updatedFolderNames[pos] = _folderName; - setFoldersName(updatedFolderNames); + const updatedFolderNames = [...useStore.getState().foldersName]; + const pos = updatedFolderNames.indexOf(folderName); + if (pos !== -1) updatedFolderNames[pos] = _folderName; + setFoldersName(updatedFolderNames); - setIsEdit(false); - } else if (isDelete) { - updatedChats.forEach((chat) => { - if (chat.folder === folderName) delete chat.folder; - }); - setChats(updatedChats); + setIsEdit(false); + }; - setFoldersName( - useStore.getState().foldersName.filter((name) => name !== folderName) - ); - setIsDelete(false); + const deleteFolder = () => { + const updatedChats: ChatInterface[] = JSON.parse( + JSON.stringify(useStore.getState().chats) + ); + updatedChats.forEach((chat) => { + if (chat.folder === folderName) delete chat.folder; + }); + setChats(updatedChats); + + setFoldersName( + useStore.getState().foldersName.filter((name) => name !== folderName) + ); + setIsDelete(false); + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + e.preventDefault(); + editTitle(); } }; + const handleTick = (e: React.MouseEvent) => { + e.stopPropagation(); + + if (isEdit) editTitle(); + else if (isDelete) deleteFolder(); + }; + const handleCross = () => { setIsDelete(false); setIsEdit(false); @@ -127,6 +140,7 @@ const ChatFolder = ({ _setFolderName(e.target.value); }} onClick={(e) => e.stopPropagation()} + onKeyDown={handleKeyDown} ref={inputRef} /> ) : ( diff --git a/src/components/Menu/ChatHistory.tsx b/src/components/Menu/ChatHistory.tsx index 42e73a2..5d585ab 100644 --- a/src/components/Menu/ChatHistory.tsx +++ b/src/components/Menu/ChatHistory.tsx @@ -33,25 +33,41 @@ const ChatHistory = React.memo( const [_title, _setTitle] = useState(title); const inputRef = useRef(null); - const handleTick = (e: React.MouseEvent) => { - e.stopPropagation(); + const editTitle = () => { const updatedChats = JSON.parse( JSON.stringify(useStore.getState().chats) ); - if (isEdit) { - updatedChats[chatIndex].title = _title; + updatedChats[chatIndex].title = _title; + setChats(updatedChats); + setIsEdit(false); + }; + + const deleteChat = () => { + const updatedChats = JSON.parse( + JSON.stringify(useStore.getState().chats) + ); + updatedChats.splice(chatIndex, 1); + if (updatedChats.length > 0) { + setCurrentChatIndex(0); setChats(updatedChats); - setIsEdit(false); - } else if (isDelete) { - updatedChats.splice(chatIndex, 1); - if (updatedChats.length > 0) { - setCurrentChatIndex(0); - setChats(updatedChats); - } else { - initialiseNewChat(); - } - setIsDelete(false); + } else { + initialiseNewChat(); } + setIsDelete(false); + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + e.preventDefault(); + editTitle(); + } + }; + + const handleTick = (e: React.MouseEvent) => { + e.stopPropagation(); + + if (isEdit) editTitle(); + else if (isDelete) deleteChat(); }; const handleCross = () => { @@ -94,6 +110,7 @@ const ChatHistory = React.memo( onChange={(e) => { _setTitle(e.target.value); }} + onKeyDown={handleKeyDown} ref={inputRef} /> ) : (