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,18 +30,13 @@ 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;
}); });
@ -53,7 +48,12 @@ const ChatFolder = ({
setFoldersName(updatedFolderNames); setFoldersName(updatedFolderNames);
setIsEdit(false); setIsEdit(false);
} else if (isDelete) { };
const deleteFolder = () => {
const updatedChats: ChatInterface[] = JSON.parse(
JSON.stringify(useStore.getState().chats)
);
updatedChats.forEach((chat) => { updatedChats.forEach((chat) => {
if (chat.folder === folderName) delete chat.folder; if (chat.folder === folderName) delete chat.folder;
}); });
@ -63,9 +63,22 @@ const ChatFolder = ({
useStore.getState().foldersName.filter((name) => name !== folderName) useStore.getState().foldersName.filter((name) => name !== folderName)
); );
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) 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,16 +33,19 @@ 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); setChats(updatedChats);
setIsEdit(false); setIsEdit(false);
} else if (isDelete) { };
const deleteChat = () => {
const updatedChats = JSON.parse(
JSON.stringify(useStore.getState().chats)
);
updatedChats.splice(chatIndex, 1); updatedChats.splice(chatIndex, 1);
if (updatedChats.length > 0) { if (updatedChats.length > 0) {
setCurrentChatIndex(0); setCurrentChatIndex(0);
@ -51,9 +54,22 @@ const ChatHistory = React.memo(
initialiseNewChat(); 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 = () => {
setIsDelete(false); setIsDelete(false);
setIsEdit(false); setIsEdit(false);
@ -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}
/> />
) : ( ) : (