From 1d04796ca0bd68627579cf348f77c8cc35fb0442 Mon Sep 17 00:00:00 2001
From: sijinhui <sijinhui@qq.com>
Date: Tue, 24 Sep 2024 23:07:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/chat-list.tsx | 193 ++++++++++++++++++++---------------
 1 file changed, 108 insertions(+), 85 deletions(-)

diff --git a/app/components/chat-list.tsx b/app/components/chat-list.tsx
index 508a260a7..c562e5eb1 100644
--- a/app/components/chat-list.tsx
+++ b/app/components/chat-list.tsx
@@ -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>