xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-01 15:46:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

临时修复

Browse Source
This commit is contained in:
sijinhui 2024-09-24 23:07:25 +08:00
parent 0ff74f01d3
commit 1d04796ca0
1 changed files with 108 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,6 +32,7 @@ export function ChatItem(props: {
index: number;
narrow?: boolean;
mask: Mask;
provided;
}) {
const draggableRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
@ -44,62 +45,54 @@ export function ChatItem(props: {
const { pathname: currentPath } = useLocation();
return (
<Draggable draggableId={`${props.id}`} index={props.index}>
{(provided) => (
<div
className={`${styles["chat-item"]} ${
props.selected &&
(currentPath === Path.Chat || currentPath === Path.Home) &&
styles["chat-item-selected"]
}`}
onClick={props.onClick}
ref={(ele) => {
draggableRef.current = ele;
provided.innerRef(ele);
}}
{...provided.draggableProps}
{...provided.dragHandleProps}
title={`${props.title}\n${Locale.ChatItem.ChatItemCount(
props.count,
)}`}
>
{props.narrow ? (
<div className={styles["chat-item-narrow"]}>
<div className={styles["chat-item-avatar"] + " no-dark"}>
<MaskAvatar
avatar={props.mask.avatar}
model={props.mask.modelConfig.model}
/>
</div>
<div className={styles["chat-item-narrow-count"]}>
{props.count}
</div>
</div>
) : (
<>
<div className={styles["chat-item-title"]}>{props.title}</div>
<div className={styles["chat-item-info"]}>
<div className={styles["chat-item-count"]}>
{Locale.ChatItem.ChatItemCount(props.count)}
</div>
<div className={styles["chat-item-date"]}>{props.time}</div>
</div>
</>
)}
<div
className={styles["chat-item-delete"]}
onClickCapture={(e) => {
props.onDelete?.();
e.preventDefault();
e.stopPropagation();
}}
>
<DeleteIcon />
<div
className={`${styles["chat-item"]} ${
props.selected &&
(currentPath === Path.Chat || currentPath === Path.Home) &&
styles["chat-item-selected"]
}`}
onClick={props.onClick}
ref={(ele) => {
draggableRef.current = ele;
props.provided.innerRef(ele);
}}
{...props.provided.draggableProps}
{...props.provided.dragHandleProps}
title={`${props.title}\n${Locale.ChatItem.ChatItemCount(props.count)}`}
>
{props.narrow ? (
<div className={styles["chat-item-narrow"]}>
<div className={styles["chat-item-avatar"] + " no-dark"}>
<MaskAvatar
avatar={props.mask.avatar}
model={props.mask.modelConfig.model}
/>
</div>
<div className={styles["chat-item-narrow-count"]}>{props.count}</div>
</div>
) : (
<>
<div className={styles["chat-item-title"]}>{props.title}</div>
<div className={styles["chat-item-info"]}>
<div className={styles["chat-item-count"]}>
{Locale.ChatItem.ChatItemCount(props.count)}
</div>
<div className={styles["chat-item-date"]}>{props.time}</div>
</div>
</>
)}
</Draggable>
<div
className={styles["chat-item-delete"]}
onClickCapture={(e) => {
props.onDelete?.();
e.preventDefault();
e.stopPropagation();
}}
>
<DeleteIcon />
</div>
</div>
);
}
@ -133,12 +126,39 @@ export function ChatList(props: { narrow?: boolean }) {
};
return (
<DragDropContext
onDragEnd={onDragEnd}
autoScrollerOptions={{ disabled: true }}
>
<Droppable droppableId="chat-list">
{(provided) => (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable
droppableId="chat-list"
renderClone={(provided, snapshot, rubic) => (
<ChatItem
title={sessions[rubic.source.index].topic}
time={new Date(
sessions[rubic.source.index].lastUpdate,
).toLocaleString()}
count={sessions[rubic.source.index].messages.length}
key={sessions[rubic.source.index].id}
id={sessions[rubic.source.index].id}
index={rubic.source.index}
selected={rubic.source.index === selectedIndex}
onClick={() => {
navigate(Path.Chat);
selectSession(rubic.source.index);
}}
onDelete={async () => {
if (
(!props.narrow && !isMobileScreen) ||
(await showConfirm(Locale.Home.DeleteChat))
) {
chatStore.deleteSession(rubic.source.index);
}
}}
narrow={props.narrow}
mask={sessions[rubic.source.index].mask}
provided={provided}
/>
)}
>
{(provided, snapshot) => (
<div
className={styles["chat-list"]}
ref={provided.innerRef}
@ -146,10 +166,8 @@ export function ChatList(props: { narrow?: boolean }) {
>
<QueueAnim
delay={300}
// className={motionStyles["queue-simple"]}
ease={["easeOutQuart", "easeInOutQuart"]}
duration={[550, 450]}
type={["right", "left"]}
animConfig={[
{ opacity: [1, 0], translateY: [0, 30] },
{ height: 0 },
@ -158,30 +176,35 @@ export function ChatList(props: { narrow?: boolean }) {
// interval={150}
>
{sessions.map((item, i) => (
<div key={i}>
<ChatItem
title={item.topic}
time={new Date(item.lastUpdate).toLocaleString()}
count={item.messages.length}
key={item.id}
id={item.id}
index={i}
selected={i === selectedIndex}
onClick={() => {
navigate(Path.Chat);
selectSession(i);
}}
onDelete={async () => {
if (
(!props.narrow && !isMobileScreen) ||
(await showConfirm(Locale.Home.DeleteChat))
) {
chatStore.deleteSession(i);
}
}}
narrow={props.narrow}
mask={item.mask}
/>
<div key={item.id}>
<Draggable draggableId={`${item.id}`} index={i}>
{(provided, snapshot) => (
<ChatItem
title={item.topic}
time={new Date(item.lastUpdate).toLocaleString()}
count={item.messages.length}
key={item.id}
id={item.id}
index={i}
selected={i === selectedIndex}
onClick={() => {
navigate(Path.Chat);
selectSession(i);
}}
onDelete={async () => {
if (
(!props.narrow && !isMobileScreen) ||
(await showConfirm(Locale.Home.DeleteChat))
) {
chatStore.deleteSession(i);
}
}}
narrow={props.narrow}
mask={item.mask}
provided={provided}
/>
)}
</Draggable>
</div>
))}
</QueueAnim>