chat history enter to save edits

This commit is contained in:
Jing Hua 2023-03-27 23:00:40 +08:00
parent 5f1762f557
commit a0c43a4ac0
2 changed files with 69 additions and 38 deletions

View file

@ -30,42 +30,55 @@ const ChatFolder = ({
const [_folderName, _setFolderName] = useState<string>(folderName); const [_folderName, _setFolderName] = useState<string>(folderName);
const [isEdit, setIsEdit] = useState<boolean>(false); const [isEdit, setIsEdit] = useState<boolean>(false);
const [isDelete, setIsDelete] = useState<boolean>(false); const [isDelete, setIsDelete] = useState<boolean>(false);
// const [isExpanded, setIsExpanded] = useState<boolean>(
// useStore.getState().foldersExpanded[folderIndex]
// );
const [isHover, setIsHover] = useState<boolean>(false); const [isHover, setIsHover] = useState<boolean>(false);
const handleTick = (e: React.MouseEvent<HTMLButtonElement>) => { const editTitle = () => {
e.stopPropagation();
const updatedChats: ChatInterface[] = JSON.parse( const updatedChats: ChatInterface[] = JSON.parse(
JSON.stringify(useStore.getState().chats) JSON.stringify(useStore.getState().chats)
); );
if (isEdit) { updatedChats.forEach((chat) => {
updatedChats.forEach((chat) => { if (chat.folder === folderName) chat.folder = _folderName;
if (chat.folder === folderName) chat.folder = _folderName; });
}); setChats(updatedChats);
setChats(updatedChats);
const updatedFolderNames = [...useStore.getState().foldersName]; const updatedFolderNames = [...useStore.getState().foldersName];
const pos = updatedFolderNames.indexOf(folderName); const pos = updatedFolderNames.indexOf(folderName);
if (pos !== -1) updatedFolderNames[pos] = _folderName; if (pos !== -1) updatedFolderNames[pos] = _folderName;
setFoldersName(updatedFolderNames); setFoldersName(updatedFolderNames);
setIsEdit(false); setIsEdit(false);
} else if (isDelete) { };
updatedChats.forEach((chat) => {
if (chat.folder === folderName) delete chat.folder;
});
setChats(updatedChats);
setFoldersName( const deleteFolder = () => {
useStore.getState().foldersName.filter((name) => name !== folderName) const updatedChats: ChatInterface[] = JSON.parse(
); JSON.stringify(useStore.getState().chats)
setIsDelete(false); );
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<HTMLInputElement>) => {
if (e.key === 'Enter') {
e.preventDefault();
editTitle();
} }
}; };
const handleTick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
if (isEdit) editTitle();
else if (isDelete) deleteFolder();
};
const handleCross = () => { const handleCross = () => {
setIsDelete(false); setIsDelete(false);
setIsEdit(false); setIsEdit(false);
@ -127,6 +140,7 @@ const ChatFolder = ({
_setFolderName(e.target.value); _setFolderName(e.target.value);
}} }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onKeyDown={handleKeyDown}
ref={inputRef} ref={inputRef}
/> />
) : ( ) : (

View file

@ -33,25 +33,41 @@ const ChatHistory = React.memo(
const [_title, _setTitle] = useState<string>(title); const [_title, _setTitle] = useState<string>(title);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
const handleTick = (e: React.MouseEvent<HTMLButtonElement>) => { const editTitle = () => {
e.stopPropagation();
const updatedChats = JSON.parse( const updatedChats = JSON.parse(
JSON.stringify(useStore.getState().chats) 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); setChats(updatedChats);
setIsEdit(false); } else {
} else if (isDelete) { initialiseNewChat();
updatedChats.splice(chatIndex, 1);
if (updatedChats.length > 0) {
setCurrentChatIndex(0);
setChats(updatedChats);
} else {
initialiseNewChat();
}
setIsDelete(false);
} }
setIsDelete(false);
};
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
e.preventDefault();
editTitle();
}
};
const handleTick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
if (isEdit) editTitle();
else if (isDelete) deleteChat();
}; };
const handleCross = () => { const handleCross = () => {
@ -94,6 +110,7 @@ const ChatHistory = React.memo(
onChange={(e) => { onChange={(e) => {
_setTitle(e.target.value); _setTitle(e.target.value);
}} }}
onKeyDown={handleKeyDown}
ref={inputRef} ref={inputRef}
/> />
) : ( ) : (