@lobehub/chat 1.42.6 → 1.43.0

package/src/app/(main)/profile/stats/features/TimeLabel.tsx

@@ -0,0 +1,30 @@
+import { Icon } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { Loader2, LucideIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const TimeLabel = memo<{
+  date?: string;
+  icon: LucideIcon;
+  title: string;
+}>(({ date, icon, title }) => {
+  const theme = useTheme();
+  return (
+    <Flexbox
+      align={'center'}
+      gap={4}
+      horizontal
+      style={{
+        color: theme.colorTextDescription,
+        fontSize: 12,
+      }}
+    >
+      <Icon icon={icon} />
+      {title}:{' '}
+      {date ? <span style={{ fontWeight: 'bold' }}>{date}</span> : <Icon icon={Loader2} spin />}
+    </Flexbox>
+  );
+});
+
+export default TimeLabel;

package/src/app/(main)/profile/stats/features/TopicsRank.tsx

@@ -0,0 +1,103 @@
+import { BarList } from '@lobehub/charts';
+import { ActionIcon, FormGroup, Icon, Modal } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
+import { MaximizeIcon, MessageSquareIcon } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import qs from 'query-string';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useClientDataSWR } from '@/libs/swr';
+import { topicService } from '@/services/topic';
+import { TopicRankItem } from '@/types/topic';
+
+export const TopicsRank = memo(() => {
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation('auth');
+  const theme = useTheme();
+  const router = useRouter();
+  const { data, isLoading } = useClientDataSWR('rank-topics', async () =>
+    topicService.rankTopics(),
+  );
+
+  const showExtra = Boolean(data && data?.length > 5);
+
+  const mapData = (item: TopicRankItem) => {
+    const link = qs.stringifyUrl({
+      query: {
+        session: item.sessionId,
+        topic: item.id,
+      },
+      url: '/chat',
+    });
+    return {
+      icon: (
+        <Icon color={theme.colorTextDescription} icon={MessageSquareIcon} size={{ fontSize: 16 }} />
+      ),
+      link,
+      name: (
+        <Link href={link} style={{ color: 'inherit' }}>
+          {item.title}
+        </Link>
+      ),
+      value: item.count,
+    };
+  };
+
+  return (
+    <>
+      <FormGroup
+        extra={
+          showExtra && (
+            <ActionIcon
+              icon={MaximizeIcon}
+              onClick={() => setOpen(true)}
+              size={{ blockSize: 28, fontSize: 20 }}
+            />
+          )
+        }
+        style={FORM_STYLE.style}
+        title={t('stats.topicsRank.title')}
+        variant={'pure'}
+      >
+        <Flexbox paddingBlock={16}>
+          <BarList
+            data={data?.slice(0, 5).map((item) => mapData(item)) || []}
+            height={220}
+            leftLabel={t('stats.topicsRank.left')}
+            loading={isLoading || !data}
+            noDataText={{
+              desc: t('stats.empty.desc'),
+              title: t('stats.empty.title'),
+            }}
+            onValueChange={(item) => router.push(item.link)}
+            rightLabel={t('stats.topicsRank.right')}
+          />
+        </Flexbox>
+      </FormGroup>
+      {showExtra && (
+        <Modal
+          footer={null}
+          loading={isLoading || !data}
+          onCancel={() => setOpen(false)}
+          open={open}
+          title={t('stats.topicsRank.title')}
+        >
+          <BarList
+            data={data?.map((item) => mapData(item)) || []}
+            height={340}
+            leftLabel={t('stats.assistantsRank.left')}
+            loading={isLoading || !data}
+            onValueChange={(item) => router.push(item.link)}
+            rightLabel={t('stats.assistantsRank.right')}
+          />
+        </Modal>
+      )}
+    </>
+  );
+});
+
+export default TopicsRank;

package/src/app/(main)/profile/stats/features/TotalAssistants.tsx

@@ -0,0 +1,56 @@
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Statistic from '@/components/Statistic';
+import StatisticCard from '@/components/StatisticCard';
+import TitleWithPercentage from '@/components/StatisticCard/TitleWithPercentage';
+import { useClientDataSWR } from '@/libs/swr';
+import { sessionService } from '@/services/session';
+import { formatIntergerNumber } from '@/utils/format';
+import { lastMonth } from '@/utils/time';
+
+import TotalCard from './ShareButton/TotalCard';
+
+const TotalMessages = memo<{ inShare?: boolean; mobile?: boolean }>(({ mobile, inShare }) => {
+  const { t } = useTranslation('auth');
+  const theme = useTheme();
+  const { data, isLoading } = useClientDataSWR('stats-sessions', async () => ({
+    count: await sessionService.countSessions(),
+    prevCount: await sessionService.countSessions({ endDate: lastMonth().format('YYYY-MM-DD') }),
+  }));
+
+  if (inShare)
+    return (
+      <TotalCard
+        count={formatIntergerNumber(data?.prevCount) || '--'}
+        title={t('stats.assistants')}
+      />
+    );
+
+  return (
+    <StatisticCard
+      highlight={mobile ? undefined : theme.purple}
+      loading={isLoading || !data}
+      statistic={{
+        description: (
+          <Statistic
+            title={t('date.prevMonth')}
+            value={formatIntergerNumber(data?.prevCount) || '--'}
+          />
+        ),
+        precision: 0,
+        value: data?.count || '--',
+      }}
+      title={
+        <TitleWithPercentage
+          count={data?.count}
+          prvCount={data?.prevCount}
+          title={t('stats.assistants')}
+        />
+      }
+    />
+  );
+});
+
+export default TotalMessages;

package/src/app/(main)/profile/stats/features/TotalMessages.tsx

@@ -0,0 +1,56 @@
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Statistic from '@/components/Statistic';
+import StatisticCard from '@/components/StatisticCard';
+import TitleWithPercentage from '@/components/StatisticCard/TitleWithPercentage';
+import { useClientDataSWR } from '@/libs/swr';
+import { messageService } from '@/services/message';
+import { formatIntergerNumber } from '@/utils/format';
+import { lastMonth } from '@/utils/time';
+
+import TotalCard from './ShareButton/TotalCard';
+
+const TotalMessages = memo<{ inShare?: boolean; mobile?: boolean }>(({ inShare, mobile }) => {
+  const { t } = useTranslation('auth');
+  const theme = useTheme();
+  const { data, isLoading } = useClientDataSWR('stats-messages', async () => ({
+    count: await messageService.countMessages(),
+    prevCount: await messageService.countMessages({ endDate: lastMonth().format('YYYY-MM-DD') }),
+  }));
+
+  if (inShare)
+    return (
+      <TotalCard
+        count={formatIntergerNumber(data?.prevCount) || '--'}
+        title={t('stats.messages')}
+      />
+    );
+
+  return (
+    <StatisticCard
+      highlight={mobile ? undefined : theme.yellow}
+      loading={isLoading || !data}
+      statistic={{
+        description: (
+          <Statistic
+            title={t('date.prevMonth')}
+            value={formatIntergerNumber(data?.prevCount) || '--'}
+          />
+        ),
+        precision: 0,
+        value: data?.count || '--',
+      }}
+      title={
+        <TitleWithPercentage
+          count={data?.count}
+          prvCount={data?.prevCount}
+          title={t('stats.messages')}
+        />
+      }
+    />
+  );
+});
+
+export default TotalMessages;

package/src/app/(main)/profile/stats/features/TotalTopics.tsx

@@ -0,0 +1,53 @@
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Statistic from '@/components/Statistic';
+import StatisticCard from '@/components/StatisticCard';
+import TitleWithPercentage from '@/components/StatisticCard/TitleWithPercentage';
+import { useClientDataSWR } from '@/libs/swr';
+import { topicService } from '@/services/topic';
+import { formatIntergerNumber } from '@/utils/format';
+import { lastMonth } from '@/utils/time';
+
+import TotalCard from './ShareButton/TotalCard';
+
+const TotalMessages = memo<{ inShare?: boolean; mobile?: boolean }>(({ inShare, mobile }) => {
+  const { t } = useTranslation('auth');
+  const theme = useTheme();
+  const { data, isLoading } = useClientDataSWR('stats-topics', async () => ({
+    count: await topicService.countTopics(),
+    prevCount: await topicService.countTopics({ endDate: lastMonth().format('YYYY-MM-DD') }),
+  }));
+
+  if (inShare)
+    return (
+      <TotalCard count={formatIntergerNumber(data?.prevCount) || '--'} title={t('stats.topics')} />
+    );
+
+  return (
+    <StatisticCard
+      highlight={mobile ? undefined : theme.gold}
+      loading={isLoading || !data}
+      statistic={{
+        description: (
+          <Statistic
+            title={t('date.prevMonth')}
+            value={formatIntergerNumber(data?.prevCount) || '--'}
+          />
+        ),
+        precision: 0,
+        value: data?.count || '--',
+      }}
+      title={
+        <TitleWithPercentage
+          count={data?.count}
+          prvCount={data?.prevCount}
+          title={t('stats.topics')}
+        />
+      }
+    />
+  );
+});
+
+export default TotalMessages;

package/src/app/(main)/profile/stats/features/TotalWords.tsx

@@ -0,0 +1,54 @@
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Statistic from '@/components/Statistic';
+import StatisticCard from '@/components/StatisticCard';
+import TitleWithPercentage from '@/components/StatisticCard/TitleWithPercentage';
+import { useClientDataSWR } from '@/libs/swr';
+import { messageService } from '@/services/message';
+import { formatShortenNumber } from '@/utils/format';
+import { lastMonth } from '@/utils/time';
+
+import TotalCard from './ShareButton/TotalCard';
+
+const TotalWords = memo<{ inShare?: boolean }>(({ inShare }) => {
+  const { t } = useTranslation('auth');
+
+  const { data, isLoading } = useClientDataSWR('stats-words', async () => ({
+    count: await messageService.countWords(),
+    prevCount: await messageService.countWords({ endDate: lastMonth().format('YYYY-MM-DD') }),
+  }));
+
+  if (inShare)
+    return (
+      <TotalCard count={formatShortenNumber(data?.prevCount) || '--'} title={t('stats.words')} />
+    );
+
+  return (
+    <StatisticCard
+      loading={isLoading || !data}
+      statistic={{
+        description: (
+          <Statistic
+            title={t('date.prevMonth')}
+            value={formatShortenNumber(data?.prevCount) || '--'}
+          />
+        ),
+        precision: 0,
+        style: {
+          fontWeight: 'bold',
+        },
+        value: formatShortenNumber(data?.count) || '--',
+      }}
+      title={
+        <TitleWithPercentage
+          count={data?.count}
+          prvCount={data?.prevCount}
+          title={t('stats.words')}
+        />
+      }
+    />
+  );
+});
+
+export default TotalWords;

package/src/app/(main)/profile/stats/features/Welcome.tsx

@@ -0,0 +1,86 @@
+import { FluentEmoji } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { useTheme } from 'antd-style';
+import { Clock3Icon, ClockArrowUp } from 'lucide-react';
+import { memo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import TimeLabel from '@/app/(main)/profile/stats/features/TimeLabel';
+import { BRANDING_NAME } from '@/const/branding';
+import { useClientDataSWR } from '@/libs/swr';
+import { userService } from '@/services/user';
+import { useUserStore } from '@/store/user';
+import { userProfileSelectors } from '@/store/user/slices/auth/selectors';
+import { formatIntergerNumber } from '@/utils/format';
+
+const formatEnglishNumber = (number: number) => {
+  if (number === 1) return '1st';
+  if (number === 2) return '2nd';
+  if (number === 3) return '3rd';
+  return `${formatIntergerNumber(number)}th`;
+};
+
+const Welcome = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const { t, i18n } = useTranslation('auth');
+  const theme = useTheme();
+  const [nickname, username] = useUserStore((s) => [
+    userProfileSelectors.nickName(s),
+    userProfileSelectors.username(s),
+  ]);
+
+  const { data, isLoading } = useClientDataSWR('welcome', async () =>
+    userService.getUserRegistrationDuration(),
+  );
+
+  return (
+    <Flexbox gap={8} padding={mobile ? 16 : 0}>
+      <Flexbox
+        align={'center'}
+        gap={8}
+        horizontal
+        style={{
+          fontSize: mobile ? 16 : 20,
+          fontWeight: 500,
+        }}
+      >
+        <div>
+          <Trans
+            components={{
+              span:
+                isLoading || !data ? (
+                  <Skeleton.Button active style={{ height: 24 }} />
+                ) : (
+                  <span style={{ fontWeight: 'bold' }} />
+                ),
+            }}
+            i18nKey="stats.welcome"
+            ns={'auth'}
+            values={{
+              appName: BRANDING_NAME,
+              days:
+                i18n.language === 'en-US'
+                  ? formatEnglishNumber(Number(data?.duration || 1))
+                  : formatIntergerNumber(Number(data?.duration || 1)),
+              username: nickname || username,
+            }}
+          />
+        </div>
+        {!mobile && <FluentEmoji emoji={'🫶'} size={32} type={'anim'} />}
+      </Flexbox>
+      <Flexbox
+        gap={16}
+        horizontal
+        style={{
+          color: theme.colorTextDescription,
+        }}
+        wrap={'wrap'}
+      >
+        <TimeLabel date={data?.createdAt} icon={Clock3Icon} title={t('stats.createdAt')} />
+        <TimeLabel date={data?.updatedAt} icon={ClockArrowUp} title={t('stats.updatedAt')} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Welcome;

package/src/app/(main)/profile/{[[...slugs]] → stats}/page.tsx

@@ -5,17 +5,16 @@ import { isMobileDevice } from '@/utils/server/responsive';
 import Client from './Client';
 
 export const generateMetadata = async () => {
-  const { t } = await translation('clerk');
+  const { t } = await translation('auth');
   return metadataModule.generate({
-    description: t('userProfile.navbar.title'),
-    title: t('userProfile.navbar.description'),
-    url: '/profile',
+    description: t('header.desc'),
+    title: t('tab.stats'),
+    url: '/profile/stats',
   });
 };
 
 const Page = async () => {
   const mobile = await isMobileDevice();
-
   return <Client mobile={mobile} />;
 };
 

package/src/app/(main)/repos/[id]/evals/dataset/page.tsx

@@ -3,7 +3,7 @@
 import { createStyles } from 'antd-style';
 import { Flexbox } from 'react-layout-kit';
 
-import CircleLoading from '@/components/Loading/BrandTextLoading';
+import Loading from '@/components/Loading/BrandTextLoading';
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
 
 import DatasetDetail from './DatasetDetail';
@@ -34,7 +34,7 @@ const Dataset = ({ params }: Props) => {
   const isEmpty = data?.length === 0;
 
   return isLoading ? (
-    <CircleLoading />
+    <Loading />
   ) : isEmpty ? (
     <EmptyGuide knowledgeBaseId={knowledgeBaseId} />
   ) : (

package/src/app/(main)/repos/[id]/evals/evaluation/page.tsx

@@ -2,7 +2,7 @@
 
 import { Flexbox } from 'react-layout-kit';
 
-import CircleLoading from '@/components/Loading/BrandTextLoading';
+import Loading from '@/components/Loading/BrandTextLoading';
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
 
 import EmptyGuide from './EmptyGuide';
@@ -24,7 +24,7 @@ const Evaluation = ({ params }: Props) => {
   const isEmpty = data?.length === 0;
 
   return isLoading ? (
-    <CircleLoading />
+    <Loading />
   ) : isEmpty ? (
     <EmptyGuide knowledgeBaseId={knowledgeBaseId} />
   ) : (

package/src/app/(main)/settings/@category/features/CategoryContent.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 import urlJoin from 'url-join';
 
 import Menu from '@/components/Menu';
-import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
 import { useQuery } from '@/hooks/useQuery';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { SettingsTabs } from '@/store/global/initialState';

package/src/app/(main)/settings/_layout/Desktop/index.tsx

@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
 import SettingContainer from '@/features/Setting/SettingContainer';
-import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import { LayoutProps } from '../type';

package/src/app/(main)/settings/_layout/Mobile/Header.tsx

@@ -7,7 +7,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
 import { SettingsTabs } from '@/store/global/initialState';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';

package/src/app/(main)/settings/_layout/Mobile/index.tsx

@@ -1,4 +1,5 @@
 import MobileContentLayout from '@/components/server/MobileNavLayout';
+import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
 
 import { LayoutProps } from '../type';
@@ -9,6 +10,7 @@ const Layout = ({ children }: LayoutProps) => {
     <MobileContentLayout header={<Header />}>
       {children}
       <Footer />
+      <InitClientDB />
     </MobileContentLayout>
   );
 };

package/src/app/(main)/settings/common/features/Theme/index.tsx

@@ -11,14 +11,9 @@ import { useTranslation } from 'react-i18next';
 import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { imageUrl } from '@/const/url';
-import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { Locales, localeOptions } from '@/locales/resources';
 import { useUserStore } from '@/store/user';
-import {
-  authSelectors,
-  settingsSelectors,
-  userGeneralSettingsSelectors,
-} from '@/store/user/selectors';
+import { settingsSelectors, userGeneralSettingsSelectors } from '@/store/user/selectors';
 import { switchLang } from '@/utils/client/switchLang';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
@@ -31,11 +26,7 @@ const Theme = memo(() => {
   const [form] = Form.useForm();
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const themeMode = useUserStore(userGeneralSettingsSelectors.currentThemeMode);
-  const [setThemeMode, setSettings, enableAuth] = useUserStore((s) => [
-    s.switchThemeMode,
-    s.setSettings,
-    authSelectors.enabledAuth(s),
-  ]);
+  const [setThemeMode, setSettings] = useUserStore((s) => [s.switchThemeMode, s.setSettings]);
 
   useSyncSettings(form);
 
@@ -46,12 +37,6 @@ const Theme = memo(() => {
 
   const theme: SettingItemGroup = {
     children: [
-      {
-        children: <AvatarWithUpload />,
-        hidden: enableAuth,
-        label: t('settingTheme.avatar.title'),
-        minWidth: undefined,
-      },
       {
         children: (
           <SelectWithImg

package/src/app/(main)/settings/loading.tsx

@@ -1,3 +1,3 @@
-import FullLoading from '@/components/Loading/BrandTextLoading';
+import Loading from '@/components/Loading/BrandTextLoading';
 
-export default () => <FullLoading />;
+export default () => <Loading />;

package/src/components/Loading/BrandTextLoading/index.tsx

@@ -1,16 +1,16 @@
+import { BrandLoading, LobeChatText } from '@lobehub/ui/brand';
 import { Center } from 'react-layout-kit';
 
 import { isCustomBranding } from '@/const/version';
 
 import CircleLoading from '../CircleLoading';
-import LobeChatText from './LobeChatText';
 
 export default () => {
   if (isCustomBranding) return <CircleLoading />;
 
   return (
     <Center height={'100%'} width={'100%'}>
-      <LobeChatText />
+      <BrandLoading size={40} style={{ opacity: 0.6 }} text={LobeChatText} />
     </Center>
   );
 };

package/src/components/Statistic/index.tsx

@@ -0,0 +1,15 @@
+import { useTheme } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const Statistic = memo<{ title: ReactNode; value: ReactNode }>(({ value, title }) => {
+  const theme = useTheme();
+  return (
+    <Flexbox gap={4} horizontal style={{ color: theme.colorTextSecondary, fontSize: 12 }}>
+      <span style={{ fontWeight: 'bold' }}>{value}</span>
+      <span>{title}</span>
+    </Flexbox>
+  );
+});
+
+export default Statistic;