🐛 fix: 修正 SessionList 的删除逻辑

whyliam · Jul 16, 2023 · d37bb47 · d37bb47
1 parent 8ecd401
commit d37bb47
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 54 deletions.
diff --git a/.gitignore b/.gitignore
@@ -53,3 +53,4 @@ test-output
 *.tsbuildinfo
 next-env.d.ts
 .next
+.env
diff --git a/src/pages/chat/SessionList/List/SessionItem.tsx b/src/pages/chat/SessionList/List/SessionItem.tsx
@@ -2,7 +2,7 @@ import { ActionIcon, Avatar, List } from '@lobehub/ui';
 import { Popconfirm } from 'antd';
 import { X } from 'lucide-react';
 import { useTranslation } from 'next-i18next';
-import { FC, memo, useCallback } from 'react';
+import { FC, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
@@ -21,8 +21,8 @@ interface SessionItemProps {
 const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading }) => {
   const { t } = useTranslation('common');
   const { styles, theme, cx } = useStyles();
-  const [title, systemRole, avatar, avatarBackground, updateAt, switchAgent, removeSession] =
-    useChatStore((s) => {
+  const [title, systemRole, avatar, avatarBackground, updateAt, removeSession] = useChatStore(
+    (s) => {
       const session = sessionSelectors.getSessionById(id)(s);
       const meta = session.meta;
       const systemRole = session.config.systemRole;
@@ -32,58 +32,57 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
         sessionSelectors.getAgentAvatar(meta),
         meta.backgroundColor,
         session?.updateAt,
-        s.switchSession,
         s.removeSession,
       ];
-    }, shallow);
-
-  const AvatarItem = useCallback(
-    () => (
-      <Avatar
-        avatar={avatar}
-        background={avatarBackground}
-        shape="circle"
-        size={46}
-        title={title}
-      />
-    ),
-    [],
-  );
-
-  const RemoveButton = useCallback(
-    ({ id }: Pick<SessionItemProps, 'id'>) => (
-      <Popconfirm
-        arrow={false}
-        cancelText={t('cancel')}
-        okButtonProps={{ danger: true }}
-        okText={t('ok')}
-        onConfirm={() => removeSession(id)}
-        overlayStyle={{ width: 280 }}
-        title={t('confirmRemoveSessionItemAlert')}
-      >
-        <ActionIcon className="session-remove" icon={X} size={'small'} />
-      </Popconfirm>
-    ),
-    [],
+    },
+    shallow,
   );
 
   return (
     <Flexbox className={styles.container} style={{ position: 'relative' }}>
       <Item
         active={active}
-        avatar={<AvatarItem />}
+        avatar={
+          <Avatar
+            avatar={avatar}
+            background={avatarBackground}
+            shape="circle"
+            size={46}
+            title={title}
+          />
+        }
         classNames={{ time: cx('session-time', styles.time) }}
         date={updateAt}
         description={title}
         loading={loading}
-        onClick={() => switchAgent(id)}
         style={{
           alignItems: 'center',
           color: theme.colorText,
         }}
         title={systemRole}
       />
-      <RemoveButton id={id} />
+      <Popconfirm
+        arrow={false}
+        cancelText={t('cancel')}
+        okButtonProps={{ danger: true }}
+        okText={t('ok')}
+        onConfirm={(e) => {
+          e?.stopPropagation();
+          removeSession(id);
+        }}
+        overlayStyle={{ width: 280 }}
+        title={t('confirmRemoveSessionItemAlert')}
+      >
+        <ActionIcon
+          className="session-remove"
+          icon={X}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          size={'small'}
+        />
+      </Popconfirm>
     </Flexbox>
   );
 }, shallow);

diff --git a/src/pages/chat/SessionList/List/index.tsx b/src/pages/chat/SessionList/List/index.tsx
@@ -1,12 +1,13 @@
 import isEqual from 'fast-deep-equal';
+import Link from 'next/link';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { useStyles } from '@/pages/chat/SessionList/List/style';
 import { sessionSelectors, useChatStore } from '@/store/session';
 
 import SessionItem from './SessionItem';
+import { useStyles } from './style';
 
 const SessionList = memo(() => {
   const { styles, cx } = useStyles();
@@ -19,12 +20,9 @@ const SessionList = memo(() => {
   return (
     <Flexbox className={cx(styles.list)}>
       {list.map(({ id }) => (
-        <SessionItem
-          active={activeId === id}
-          id={id}
-          key={id}
-          loading={loading && id === activeId}
-        />
+        <Link href={`/chat/${id}`} key={id}>
+          <SessionItem active={activeId === id} id={id} loading={loading && id === activeId} />
+        </Link>
       ))}
     </Flexbox>
   );

diff --git a/src/pages/chat/[id].page.tsx → src/pages/chat/[id]/index.page.tsx b/src/pages/chat/[id].page.tsx → src/pages/chat/[id]/index.page.tsx
@@ -8,13 +8,13 @@ import { Flexbox } from 'react-layout-kit';
 import { sessionSelectors, useChatStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
 
-import Config from './Config';
-import Conversation from './Conversation';
-import Header from './Header';
-import { Sessions } from './SessionList';
-import Sidebar from './Sidebar';
+import Config from '../Config';
+import Conversation from '../Conversation';
+import Header from '../Header';
+import { Sessions } from '../SessionList';
+import Sidebar from '../Sidebar';
 
-const ChatLayout = () => {
+const ChatLayout = memo(() => {
   const [title] = useChatStore((s) => {
     const context = sessionSelectors.currentSession(s);
     return [context?.meta.title];
@@ -55,7 +55,7 @@ const ChatLayout = () => {
       </Flexbox>
     </>
   );
-};
+});
 
 export async function getServerSideProps(context: any) {
   const { locale } = context;
@@ -67,4 +67,4 @@ export async function getServerSideProps(context: any) {
   };
 }
 
-export default memo(ChatLayout);
+export default ChatLayout;
diff --git a/src/pages/chat/index.page.tsx b/src/pages/chat/index.page.tsx
@@ -1 +1 @@
-export { default, getServerSideProps } from './[id].page';
+export { default, getServerSideProps } from './[id]/index.page';
diff --git a/src/store/session/slices/session/action.ts b/src/store/session/slices/session/action.ts
@@ -86,7 +86,10 @@ export const createSessionSlice: StateCreator<
 
   removeSession: (sessionId) => {
     get().dispatchSession({ id: sessionId, type: 'removeSession' });
-    Router.push('/');
+
+    if (sessionId === get().activeId) {
+      Router.push('/');
+    }
   },
 
   switchSession: (sessionId) => {