临时修复

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,8 +45,6 @@ export function ChatItem(props: {
 
   const { pathname: currentPath } = useLocation();
   return (
-    <Draggable draggableId={`${props.id}`} index={props.index}>
-      {(provided) => (
     <div
       className={`${styles["chat-item"]} ${
         props.selected &&
@@ -55,13 +54,11 @@ export function ChatItem(props: {
       onClick={props.onClick}
       ref={(ele) => {
         draggableRef.current = ele;
-            provided.innerRef(ele);
+        props.provided.innerRef(ele);
       }}
-          {...provided.draggableProps}
-          {...provided.dragHandleProps}
-          title={`${props.title}\n${Locale.ChatItem.ChatItemCount(
-            props.count,
-          )}`}
+      {...props.provided.draggableProps}
+      {...props.provided.dragHandleProps}
+      title={`${props.title}\n${Locale.ChatItem.ChatItemCount(props.count)}`}
     >
       {props.narrow ? (
         <div className={styles["chat-item-narrow"]}>
@@ -71,9 +68,7 @@ export function ChatItem(props: {
               model={props.mask.modelConfig.model}
             />
           </div>
-              <div className={styles["chat-item-narrow-count"]}>
-                {props.count}
-              </div>
+          <div className={styles["chat-item-narrow-count"]}>{props.count}</div>
         </div>
       ) : (
         <>
@@ -98,8 +93,6 @@ export function ChatItem(props: {
         <DeleteIcon />
       </div>
     </div>
-      )}
-    </Draggable>
   );
 }
 
@@ -133,12 +126,39 @@ export function ChatList(props: { narrow?: boolean }) {
   };
 
   return (
-    <DragDropContext
-      onDragEnd={onDragEnd}
-      autoScrollerOptions={{ disabled: true }}
+    <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}
+          />
+        )}
       >
-      <Droppable droppableId="chat-list">
-        {(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,7 +176,9 @@ export function ChatList(props: { narrow?: boolean }) {
               // interval={150}
             >
               {sessions.map((item, i) => (
-                <div key={i}>
+                <div key={item.id}>
+                  <Draggable draggableId={`${item.id}`} index={i}>
+                    {(provided, snapshot) => (
                       <ChatItem
                         title={item.topic}
                         time={new Date(item.lastUpdate).toLocaleString()}
@@ -181,7 +201,10 @@ export function ChatList(props: { narrow?: boolean }) {
                         }}
                         narrow={props.narrow}
                         mask={item.mask}
+                        provided={provided}
                       />
+                    )}
+                  </Draggable>
                 </div>
               ))}
             </QueueAnim>