♻️ refactor: Update configurations, remove unused files, and adjust c…

…omponents and selectors The code changes involve updating configurations, removing unused files, and making adjustments to components and selectors. These changes are done to improve the overall structure and organization of the project.
bentwnghk · Jul 15, 2023 · 23524b2 · 23524b2
1 parent cef01c0
commit 23524b2
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 96 deletions.
diff --git a/next-i18next.config.js b/next-i18next.config.js
@@ -2,16 +2,14 @@ const i18n = require('./.i18nrc');
 
 /** @type {import('next-i18next').UserConfig} */
 module.exports = {
-  debug: process.env.NODE_ENV === 'development',
+  debug: false,
   fallbackLng: {
-    default: ['en'],
-    zh_TW: ['zh_CN'],
+    default: ['zh_CN'],
   },
   i18n: {
     defaultLocale: i18n.entryLocale,
     locales: [i18n.entryLocale, ...i18n.outputLocales],
   },
   localePath:
     typeof window === 'undefined' ? require('node:path').resolve('./public/locales') : '/locales',
-  reloadOnPrerender: process.env.NODE_ENV === 'development',
 };
diff --git a/next-utils.config.js b/next-utils.config.js
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,22 +1,14 @@
 import i18nConfig from './next-i18next.config.js';
-import utilsConfig from './next-utils.config.js';
 
 const API_END_PORT_URL = process.env.API_END_PORT_URL || '';
 
-const { esmExternals = false, tsconfigPath } = utilsConfig.loadCustomBuildParams();
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  experimental: {
-    esmExternals, // https://nextjs.org/blog/next-11-1#es-modules-support
-  },
   i18n: i18nConfig.i18n,
   reactStrictMode: true,
   pageExtensions: ['page.tsx', 'api.ts'],
   transpilePackages: ['@lobehub/ui', 'antd-style'],
-  typescript: {
-    tsconfigPath,
-  },
+
   webpack(config) {
     config.experiments = {
       asyncWebAssembly: true,

diff --git a/package.json b/package.json
@@ -86,7 +86,7 @@
     "react-layout-kit": "^1",
     "swr": "^2",
     "ts-md5": "^1",
-    "zustand": "^4",
+    "zustand": "4.3.6",
     "zustand-utils": "^1"
   },
   "devDependencies": {
@@ -113,7 +113,6 @@
     "lint-staged": "^13",
     "next-pwa": "^5",
     "node-fetch": "^3",
-    "picocolors": "^1",
     "postcss-styled-syntax": "^0.4",
     "prettier": "^2",
     "remark": "^14",

diff --git a/src/i18n/index.ts b/src/i18n/index.ts
diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx
@@ -1,18 +1,15 @@
 import { Analytics } from '@vercel/analytics/react';
 import { appWithTranslation } from 'next-i18next';
 import type { AppProps } from 'next/app';
-import { Suspense } from 'react';
 
 import Layout from '@/layout';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <Suspense fallback="loading">
-      <Layout>
-        <Component {...pageProps} />
-        <Analytics />
-      </Layout>
-    </Suspense>
+    <Layout>
+      <Component {...pageProps} />
+      <Analytics />
+    </Layout>
   );
 }
 

diff --git a/src/pages/chat/SessionList/List/SessionItem.tsx b/src/pages/chat/SessionList/List/SessionItem.tsx
@@ -2,13 +2,16 @@ import { ActionIcon, Avatar, List } from '@lobehub/ui';
 import { Popconfirm } from 'antd';
 import { X } from 'lucide-react';
 import { useTranslation } from 'next-i18next';
-import { FC, memo } from 'react';
+import { FC, memo, useCallback } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import { sessionSelectors, useChatStore } from '@/store/session';
 
 import { useStyles } from './style';
 
+const { Item } = List;
+
 interface SessionItemProps {
   active: boolean;
   id: string;
@@ -24,8 +27,8 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
       const meta = session.meta;
       const systemRole = session.config.systemRole;
       return [
-        meta.title || t('noDescription'),
-        systemRole || t('defaultAgent'),
+        meta.title,
+        systemRole,
         sessionSelectors.getAgentAvatar(meta),
         meta.backgroundColor,
         session?.updateAt,
@@ -34,32 +37,21 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
       ];
     }, shallow);
 
-  return (
-    <List.Item
-      active={active}
-      avatar={
-        <Avatar
-          avatar={avatar}
-          background={avatarBackground}
-          shape="circle"
-          size={46}
-          title={title}
-        />
-      }
-      className={styles.container}
-      classNames={{ time: cx('session-time', styles.time) }}
-      date={updateAt}
-      description={title}
-      loading={loading}
-      onClick={() => {
-        switchAgent(id);
-      }}
-      style={{
-        alignItems: 'center',
-        color: theme.colorText,
-      }}
-      title={systemRole}
-    >
+  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')}
@@ -71,8 +63,29 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading })
       >
         <ActionIcon className="session-remove" icon={X} size={'small'} />
       </Popconfirm>
-    </List.Item>
+    ),
+    [],
+  );
+
+  return (
+    <Flexbox className={styles.container} style={{ position: 'relative' }}>
+      <Item
+        active={active}
+        avatar={<AvatarItem />}
+        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} />
+    </Flexbox>
   );
-});
+}, shallow);
 
 export default SessionItem;
diff --git a/src/pages/chat/SessionList/List/index.tsx b/src/pages/chat/SessionList/List/index.tsx
@@ -1,3 +1,4 @@
+import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
@@ -9,8 +10,9 @@ import SessionItem from './SessionItem';
 
 const SessionList = memo(() => {
   const { styles, cx } = useStyles();
-  const [list, activeId, loading] = useChatStore(
-    (s) => [sessionSelectors.chatList(s), s.activeId, s.loading.summarizingTitle],
+  const list = useChatStore((s) => sessionSelectors.chatList(s), isEqual);
+  const [activeId, loading] = useChatStore(
+    (s) => [s.activeId, s.loading.summarizingTitle],
     shallow,
   );
 

diff --git a/src/store/session/slices/session/selectors/chat.ts b/src/store/session/slices/session/selectors/chat.ts
@@ -1,3 +1,3 @@
 import { MetaData } from '@/types/meta';
 
-export const getAgentAvatar = (s: MetaData) => s.avatar || '😎';
+export const getAgentAvatar = (s: MetaData) => s.avatar || 'default';