singlexyz/ChatGPT-Next-Web
1
0
Fork 0
forked from XiaoMo/ChatGPT-Next-Web
Code Pull Requests Activity

feat: scrolling effect when switching chat windows

Browse Source
This commit is contained in:
wsw 2023-05-12 17:54:40 +08:00
parent c49dbab127
commit 93c9974019
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/chat-list.tsx
View File

@ -16,6 +16,7 @@ import { Link, useNavigate } from "react-router-dom";
import { Path } from "../constant"; import { Path } from "../constant";
import { MaskAvatar } from "./mask"; import { MaskAvatar } from "./mask";
import { Mask } from "../store/mask"; import { Mask } from "../store/mask";
import { useRef, useEffect } from "react";
export function ChatItem(props: { export function ChatItem(props: {
onClick?: () => void; onClick?: () => void;
@ -29,6 +30,14 @@ export function ChatItem(props: {
narrow?: boolean; narrow?: boolean;
mask: Mask; mask: Mask;
}) { }) {
const draggableRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
if (props.selected && draggableRef.current) {
draggableRef.current?.scrollIntoView({
block: "center",
});
}
}, [props.selected]);
return ( return (
<Draggable draggableId={`${props.id}`} index={props.index}> <Draggable draggableId={`${props.id}`} index={props.index}>
{(provided) => ( {(provided) => (
@ -37,7 +46,10 @@ export function ChatItem(props: {
props.selected && styles["chat-item-selected"] props.selected && styles["chat-item-selected"]
}`} }`}
onClick={props.onClick} onClick={props.onClick}
ref={provided.innerRef} ref={(ele) => {
draggableRef.current = ele;
provided.innerRef(ele);
}}
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps} {...provided.dragHandleProps}
title={`${props.title}\n${Locale.ChatItem.ChatItemCount( title={`${props.title}\n${Locale.ChatItem.ChatItemCount(