@lobehub/chat 1.42.5 → 1.43.0

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

@@ -0,0 +1,87 @@
+'use client';
+
+import { type FormItemProps, FormModal, FormModalProps } from '@lobehub/ui';
+import { Segmented, Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+import dynamic from 'next/dynamic';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ImageType, imageTypeOptions, useScreenshot } from '@/hooks/useScreenshot';
+
+const Preview = dynamic(() => import('./Preview'), {
+  loading: () => (
+    <Skeleton.Button
+      active
+      block
+      size={'large'}
+      style={{
+        height: 400,
+        width: '100%',
+      }}
+    />
+  ),
+});
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  preview: css`
+    .${prefixCls}-form-item-label {
+      display: none;
+    }
+  `,
+}));
+
+type FieldType = {
+  imageType: ImageType;
+};
+
+const DEFAULT_FIELD_VALUE: FieldType = {
+  imageType: ImageType.JPG,
+};
+
+const ShareModal = memo<FormModalProps & { mobile?: boolean }>(({ open, onCancel, mobile }) => {
+  const { t } = useTranslation(['chat', 'common']);
+  const [fieldValue, setFieldValue] = useState<FieldType>(DEFAULT_FIELD_VALUE);
+  const { styles } = useStyles();
+  const { loading, onDownload } = useScreenshot({
+    imageType: fieldValue.imageType,
+    title: 'stats',
+    width: mobile ? 440 : undefined,
+  });
+
+  const items: FormItemProps[] = [
+    {
+      children: <Preview />,
+      className: styles.preview,
+      divider: false,
+      minWidth: '100%',
+    },
+    {
+      children: <Segmented options={imageTypeOptions} />,
+      divider: false,
+      label: t('shareModal.imageType'),
+      minWidth: undefined,
+      name: 'imageType',
+    },
+  ];
+
+  return (
+    <FormModal
+      allowFullscreen
+      footer={null}
+      initialValues={DEFAULT_FIELD_VALUE}
+      items={items}
+      itemsType={'flat'}
+      onCancel={onCancel}
+      onFinish={onDownload}
+      onValuesChange={(_, v) => setFieldValue(v)}
+      open={open}
+      submitLoading={loading}
+      submitText={t('shareModal.download')}
+      title={t('share', { ns: 'common' })}
+      width={480}
+    />
+  );
+});
+
+export default ShareModal;

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

@@ -0,0 +1,39 @@
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+interface TotalCardProps {
+  count: string | number;
+  title: string;
+}
+
+const TotalCard = memo<TotalCardProps>(({ title, count }) => {
+  const theme = useTheme();
+  return (
+    <Flexbox
+      padding={12}
+      style={{
+        background: theme.isDarkMode ? theme.colorFillTertiary : theme.colorFillQuaternary,
+        borderRadius: theme.borderRadiusLG,
+      }}
+    >
+      <div
+        style={{
+          fontSize: 13,
+        }}
+      >
+        {title}
+      </div>
+      <div
+        style={{
+          fontSize: 20,
+          fontWeight: 'bold',
+        }}
+      >
+        {count}
+      </div>
+    </Flexbox>
+  );
+});
+
+export default TotalCard;

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

@@ -0,0 +1,26 @@
+'use client';
+
+import { ActionIcon } from '@lobehub/ui';
+import { Share2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
+
+import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+
+import ShareModal from './ShareModal';
+
+const ShareButton = memo<{ mobile?: boolean }>(({ mobile }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <ActionIcon
+        icon={Share2Icon}
+        onClick={() => setOpen(true)}
+        size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}
+      />
+      <ShareModal mobile={mobile} onCancel={() => setOpen(false)} open={open} />
+    </>
+  );
+});
+
+export default ShareButton;

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