fix: retain scroll view on delete convo

This commit is contained in:
Daniel Avila 2023-03-11 22:59:32 -05:00
parent f1aabfa543
commit 8762765dd0
4 changed files with 18 additions and 13 deletions

View file

@ -3,7 +3,7 @@ import RenameButton from './RenameButton';
import DeleteButton from './DeleteButton'; import DeleteButton from './DeleteButton';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { setConversation } from '~/store/convoSlice'; import { setConversation } from '~/store/convoSlice';
import { setSubmitState, setSubmission, setStopStream, setCustomGpt, setModel, setCustomModel } from '~/store/submitSlice'; import { setSubmission, setStopStream, setCustomGpt, setModel, setCustomModel } from '~/store/submitSlice';
import { setMessages, setEmptyMessage } from '~/store/messageSlice'; import { setMessages, setEmptyMessage } from '~/store/messageSlice';
import { setText } from '~/store/textSlice'; import { setText } from '~/store/textSlice';
import manualSWR from '~/utils/fetchers'; import manualSWR from '~/utils/fetchers';
@ -14,9 +14,10 @@ export default function Conversation({
parentMessageId, parentMessageId,
conversationId, conversationId,
title = 'New conversation', title = 'New conversation',
bingData,
chatGptLabel = null, chatGptLabel = null,
promptPrefix = null promptPrefix = null,
bingData,
retainView,
}) { }) {
const [renaming, setRenaming] = useState(false); const [renaming, setRenaming] = useState(false);
const [titleInput, setTitleInput] = useState(title); const [titleInput, setTitleInput] = useState(title);
@ -24,7 +25,7 @@ export default function Conversation({
const { stopStream } = useSelector((state) => state.submit); const { stopStream } = useSelector((state) => state.submit);
const inputRef = useRef(null); const inputRef = useRef(null);
const dispatch = useDispatch(); const dispatch = useDispatch();
const { trigger, isMutating } = manualSWR(`/api/messages/${id}`, 'get'); const { trigger } = manualSWR(`/api/messages/${id}`, 'get');
const rename = manualSWR(`/api/convos/update`, 'post'); const rename = manualSWR(`/api/convos/update`, 'post');
const clickHandler = async () => { const clickHandler = async () => {
@ -162,6 +163,7 @@ export default function Conversation({
conversationId={id} conversationId={id}
renaming={renaming} renaming={renaming}
cancelHandler={cancelHandler} cancelHandler={cancelHandler}
retainView={retainView}
/> />
</div> </div>
) : ( ) : (

View file

@ -7,7 +7,7 @@ import { setNewConvo, removeConvo } from '~/store/convoSlice';
import { setMessages } from '~/store/messageSlice'; import { setMessages } from '~/store/messageSlice';
import { setSubmission } from '~/store/submitSlice'; import { setSubmission } from '~/store/submitSlice';
export default function DeleteButton({ conversationId, renaming, cancelHandler }) { export default function DeleteButton({ conversationId, renaming, cancelHandler, retainView }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { trigger } = manualSWR( const { trigger } = manualSWR(
`/api/convos/clear`, `/api/convos/clear`,
@ -17,6 +17,7 @@ export default function DeleteButton({ conversationId, renaming, cancelHandler }
dispatch(removeConvo(conversationId)); dispatch(removeConvo(conversationId));
dispatch(setNewConvo()); dispatch(setNewConvo());
dispatch(setSubmission({})); dispatch(setSubmission({}));
retainView();
} }
); );

View file

@ -32,10 +32,11 @@ export default function Conversations({ conversations, conversationId, showMore
chatGptLabel={convo.chatGptLabel} chatGptLabel={convo.chatGptLabel}
promptPrefix={convo.promptPrefix} promptPrefix={convo.promptPrefix}
bingData={bingData} bingData={bingData}
retainView={showMore.bind(null, false)}
/> />
); );
})} })}
{conversations && conversations.length >= 12 && conversations.length % 12 === 0 && ( {conversations?.length >= 12 && (
<button <button
onClick={clickHandler} onClick={clickHandler}
className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2" className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2"

View file

@ -24,14 +24,15 @@ export default function Nav({ navVisible, setNavVisible }) {
const scrollPositionRef = useRef(null); const scrollPositionRef = useRef(null);
const showMore = async (increment = true) => { const showMore = async (increment = true) => {
if (increment) { const container = containerRef.current;
const container = containerRef.current; if (container) {
if (container) { scrollPositionRef.current = container.scrollTop;
scrollPositionRef.current = container.scrollTop; }
}
dispatch(incrementPage()); if (increment) {
dispatch(incrementPage());
await mutate();
} }
await mutate();
}; };
useDidMountEffect(() => mutate(), [conversationId]); useDidMountEffect(() => mutate(), [conversationId]);