♻️ refactor: Update configurations, remove unused files, and adjust components 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.

next-i18next.config.js

@@ -2,10 +2,9 @@ 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,
@@ -13,5 +12,4 @@ module.exports = {
   },
   localePath:
     typeof window === 'undefined' ? require('node:path').resolve('./public/locales') : '/locales',
-  reloadOnPrerender: process.env.NODE_ENV === 'development',
 };

next-utils.config.js

@@ -1,22 +0,0 @@
-const pc = require('picocolors');
-
-const nextUtilsConfig = () => {
-  const trueEnv = ['true', '1', 'yes'];
-  const esmExternals = trueEnv.includes(process.env?.NEXTJS_ESM_EXTERNALS ?? 'false');
-  const tsconfigPath = process.env.NEXTJS_TSCONFIG_PATH
-    ? process.env.NEXTJS_TSCONFIG_PATH
-    : './tsconfig.json';
-
-  // eslint-disable-next-line no-console
-  console.warn(
-    `${pc.green('warn  -')} experimental.esmExternals is ${esmExternals ? 'enabled' : 'disabled'}`,
-  );
-  return {
-    esmExternals,
-    tsconfigPath,
-  };
-};
-
-module.exports = {
-  loadCustomBuildParams: nextUtilsConfig,
-};

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,

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",

src/i18n/index.ts

@@ -1,18 +0,0 @@
-import type { Namespace } from 'i18next';
-import type { SSRConfig, UserConfig } from 'next-i18next';
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-
-import nextI18nextConfig from '@/../next-i18next.config';
-
-type ArrayElementOrSelf<T> = T extends Array<infer U> ? U[] : T[];
-
-export const getServerTranslations = async (
-  locale: string,
-  namespacesRequired?: ArrayElementOrSelf<Namespace> | undefined,
-  configOverride?: UserConfig,
-  extraLocales?: string[] | false,
-): Promise<SSRConfig> => {
-  const config = configOverride ?? nextI18nextConfig;
-  // @ts-ignore
-  return serverSideTranslations(locale, namespacesRequired, config, extraLocales);
-};

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>
   );
 }
 

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;

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,
   );
 

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';