@lobehub/lobehub 2.0.0-next.9 → 2.0.0-next.90

package/src/app/[variants]/(main)/profile/usage/features/UsageCards/TodaySpend.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import isToday from 'dayjs/plugin/isToday';
+import isYesterday from 'dayjs/plugin/isYesterday';
+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 { UsageLog } from '@/types/usage/usageRecord';
+import { formatNumber } from '@/utils/format';
+
+import { UsageChartProps } from '../../Client';
+
+dayjs.extend(utc);
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);
+
+const computeSpend = (
+  data: UsageLog[],
+): {
+  today: number | string;
+  yesterday: number | string;
+} => {
+  if (!data || data?.length === 0) return { today: 0, yesterday: 0 };
+
+  const today = data.find((log) => dayjs.utc(log.day).isToday())?.totalSpend ?? 0;
+  const yesterday = data.find((log) => dayjs.utc(log.day).isYesterday())?.totalSpend ?? 0;
+
+  return {
+    today: formatNumber(today),
+    yesterday: formatNumber(yesterday),
+  };
+};
+
+const TodaySpend = memo<UsageChartProps>(({ data, isLoading }) => {
+  const { t } = useTranslation('auth');
+  const theme = useTheme();
+
+  const { today, yesterday } = computeSpend(data || []);
+
+  return (
+    <StatisticCard
+      highlight={theme.green}
+      loading={isLoading}
+      statistic={{
+        description: <Statistic title={t('usage.cards.today.yesterday')} value={yesterday} />,
+        precision: 2,
+        prefix: '$',
+        value: today,
+      }}
+      title={
+        <TitleWithPercentage
+          count={typeof today === 'number' ? today : 0}
+          prvCount={typeof yesterday === 'number' ? yesterday : 0}
+          title={t('usage.cards.today.title')}
+        />
+      }
+    />
+  );
+});
+
+export default TodaySpend;

package/src/app/[variants]/(main)/profile/usage/features/UsageCards/index.tsx

@@ -0,0 +1,19 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { UsageChartProps } from '../../Client';
+import ActiveModels from './ActiveModels';
+import MonthSpend from './MonthSpend';
+import TodaySpend from './TodaySpend';
+
+const UsageCards = memo<UsageChartProps>(({ isLoading, data, groupBy }) => {
+  return (
+    <Flexbox gap={16} horizontal>
+      <TodaySpend data={data} isLoading={isLoading} />
+      <MonthSpend data={data} isLoading={isLoading} />
+      <ActiveModels data={data} groupBy={groupBy} isLoading={isLoading} />
+    </Flexbox>
+  );
+});
+
+export default UsageCards;

package/src/app/[variants]/(main)/profile/usage/features/UsageTable.tsx

@@ -0,0 +1,143 @@
+import { ProviderIcon } from '@lobehub/icons';
+import { Tag } from '@lobehub/ui';
+import { Table, TableColumnType, Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { parseAsInteger, useQueryParam } from '@/hooks/useQueryParam';
+import { useClientDataSWR } from '@/libs/swr';
+import { usageService } from '@/services/usage';
+import { formatDate, formatNumber } from '@/utils/format';
+
+import { UsageChartProps } from '../Client';
+
+const UsageTable = memo<UsageChartProps>(({ dateStrings }) => {
+  const theme = useTheme();
+  const { t } = useTranslation('auth');
+
+  const { data, isLoading, mutate } = useClientDataSWR('usage-logs', async () =>
+    usageService.findByMonth(dateStrings),
+  );
+
+  const [currentPage, setCurrentPage] = useQueryParam('current', parseAsInteger.withDefault(1), {
+    clearOnDefault: true,
+  });
+  const [pageSize, setPageSize] = useQueryParam('pageSize', parseAsInteger.withDefault(5), {
+    clearOnDefault: true,
+  });
+
+  useEffect(() => {
+    if (dateStrings) {
+      mutate();
+    }
+  }, [dateStrings]);
+
+  const columns: TableColumnType<any>[] = [
+    {
+      hidden: true,
+      key: 'id',
+      title: 'ID',
+    },
+    {
+      dataIndex: 'model',
+      key: 'model',
+      render: (value, record) => (
+        <Flexbox align={'start'} gap={16} horizontal>
+          <ProviderIcon
+            provider={record.provider}
+            size={18}
+            style={{
+              border: `2px solid ${theme.colorBgContainer}`,
+              boxSizing: 'content-box',
+              marginRight: -8,
+            }}
+          />
+          <Typography.Text>
+            {value?.length > 12 ? `${value.slice(0, 12)}...` : value}
+          </Typography.Text>
+        </Flexbox>
+      ),
+      title: t('usage.table.model'),
+    },
+    {
+      dataIndex: 'type',
+      filters: [
+        {
+          text: 'Chat',
+          value: 'chat',
+        },
+      ],
+      key: 'type',
+      onFilter: (value, record) => record.callType === value,
+      render: (value) => {
+        return <Tag>{value}</Tag>;
+      },
+      title: t('usage.table.type'),
+    },
+    {
+      dataIndex: 'totalInputTokens',
+      key: 'inputTokens',
+      title: t('usage.table.inputTokens'),
+    },
+    {
+      dataIndex: 'totalOutputTokens',
+      key: 'outputTokens',
+      title: t('usage.table.outputTokens'),
+    },
+    {
+      dataIndex: 'tps',
+      key: 'tps',
+      render: (value) => formatNumber(value, 2),
+      title: t('usage.table.tps'),
+    },
+    {
+      dataIndex: 'ttft',
+      key: 'ttft',
+      render: (value) => formatNumber(value / 1000, 2),
+      title: t('usage.table.ttft'),
+    },
+    {
+      dataIndex: 'spend',
+      key: 'spend',
+      render: (value) => {
+        return `$${formatNumber(value, 6)}`;
+      },
+      title: t('usage.table.spend'),
+    },
+    {
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      render: (value) => {
+        return formatDate(new Date(value));
+      },
+      sortDirections: ['descend'],
+      sorter: (a, b) => a.createdAt - b.createdAt,
+      title: t('usage.table.createdAt'),
+    },
+  ];
+
+  return (
+    <Table
+      columns={columns}
+      dataSource={data}
+      key="id"
+      loading={isLoading}
+      pagination={{
+        current: currentPage,
+        onChange: (page) => {
+          setCurrentPage(page);
+        },
+        onShowSizeChange: (current, size) => {
+          setCurrentPage(current);
+          setPageSize(size);
+        },
+        pageSize,
+      }}
+      size="small"
+    />
+  );
+});
+
+export default UsageTable;

package/src/app/[variants]/(main)/profile/usage/features/UsageTrends.tsx

@@ -0,0 +1,107 @@
+import { type BarChartProps } from '@lobehub/charts';
+import { Segmented } from '@lobehub/ui';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import StatisticCard from '@/components/StatisticCard';
+import { UsageLog } from '@/types/usage/usageRecord';
+import { formatNumber } from '@/utils/format';
+
+import { GroupBy, UsageChartProps } from '../Client';
+import { UsageBarChart } from './components/UsageBarChart';
+
+const groupByType = (
+  data: UsageLog[],
+  type: 'spend' | 'token',
+  groupBy: GroupBy,
+): { categories: string[]; data: BarChartProps['data'] } => {
+  if (!data || data?.length === 0) return { categories: [], data: [] };
+  let formattedData: BarChartProps['data'] = [];
+  let cate: Map<string, number> = data.reduce((acc, log) => {
+    if (log.records) {
+      for (const item of log.records) {
+        if (groupBy === GroupBy.Model && item.model) {
+          acc.set(item.model, 0);
+        } else if (groupBy === GroupBy.Provider && item.provider) {
+          acc.set(item.provider, 0);
+        }
+      }
+    }
+    return acc;
+  }, new Map<string, number>());
+  const categories: string[] = Array.from(cate.keys());
+  formattedData = data.map((log) => {
+    const totalObj = {
+      day: log.day,
+      total: type === 'spend' ? log.totalSpend : log.totalTokens,
+    };
+    let todayCate = new Map<string, number>(cate);
+    for (const item of log.records) {
+      const value = type === 'spend' ? item.spend || 0 : item.totalTokens || 0;
+      const key = groupBy === GroupBy.Model ? item.model : item.provider;
+      let displayValue = (todayCate.get(key) || 0) + value;
+      if (type === 'spend') {
+        const formattedNum = formatNumber((todayCate.get(key) || 0) + value, 2);
+        if (typeof formattedNum !== 'string') {
+          displayValue = formattedNum;
+        }
+      }
+      todayCate.set(key, displayValue);
+    }
+    return {
+      ...totalObj,
+      ...Object.fromEntries(todayCate.entries()),
+    };
+  });
+  return {
+    categories,
+    data: formattedData,
+  };
+};
+
+enum ShowType {
+  Spend = 'spend',
+  Token = 'token',
+}
+
+const UsageTrends = memo<UsageChartProps>(({ isLoading, data, groupBy }) => {
+  const { t } = useTranslation('auth');
+
+  const [type, setType] = useState<ShowType>(ShowType.Spend);
+
+  const { categories: spendCate, data: spendData } = groupByType(
+    data || [],
+    'spend',
+    groupBy || GroupBy.Model,
+  );
+  const { categories: tokenCate, data: tokenData } = groupByType(
+    data || [],
+    'token',
+    groupBy || GroupBy.Model,
+  );
+  return (
+    <StatisticCard
+      chart={
+        data &&
+        (type === ShowType.Spend ? (
+          <UsageBarChart categories={spendCate} data={spendData} index="day" />
+        ) : (
+          <UsageBarChart categories={tokenCate} data={tokenData} index="day" />
+        ))
+      }
+      extra={
+        <Segmented
+          onChange={(value) => setType(value as ShowType)}
+          options={[
+            { label: t('usage.trends.spend'), value: ShowType.Spend },
+            { label: t('usage.trends.tokens'), value: ShowType.Token },
+          ]}
+          value={type}
+        />
+      }
+      loading={isLoading}
+    />
+  );
+});
+
+export default UsageTrends;

package/src/app/[variants]/(main)/profile/usage/features/components/UsageBarChart.tsx

@@ -0,0 +1,48 @@
+import { Divider, Typography } from 'antd'
+import { Flexbox } from 'react-layout-kit';
+import { BarChart, ChartTooltipFrame, ChartTooltipRow, type BarChartProps } from '@lobehub/charts';
+
+export const UsageBarChart = ({ ...props }: BarChartProps) => (
+    <BarChart
+        {...props}
+        customTooltip={({ active, payload, label, valueFormatter }) => {
+            if (active && payload) {
+                return (
+                    <ChartTooltipFrame>
+                        <Flexbox
+                            horizontal
+                            justify={'space-between'}
+                            paddingBlock={8}
+                            paddingInline={16}
+                        >
+                            <Typography.Paragraph ellipsis style={{ margin: 0 }}>
+                                {label}
+                            </Typography.Paragraph>
+                            <span style={{ fontWeight: 'bold' }}>
+                                {payload.reduce((acc: number, cur: any) => acc + cur.value, 0)}
+                            </span>
+                        </Flexbox>
+                        <Divider style={{ margin: 0 }} />
+                        <Flexbox
+                            gap={4}
+                            paddingBlock={8}
+                            paddingInline={16}
+                            style={{ flexDirection: 'column-reverse', marginTop: 4 }}
+                        >
+                            {payload.map(({ value, color, name }: any, idx: number) => (
+                                typeof value === 'number' && value > 0 ?
+                                    <ChartTooltipRow
+                                        color={color}
+                                        key={`id-${idx}`}
+                                        name={name}
+                                        value={(valueFormatter as any)?.(value)}
+                                    /> : null
+                            ))}
+                        </Flexbox>
+                    </ChartTooltipFrame>
+                );
+            }
+            return null;
+        }}
+    />
+)

package/src/app/[variants]/(main)/profile/usage/index.tsx

@@ -0,0 +1,13 @@
+
+import Client from './Client';
+
+
+const MobileProfileUsagePage = async () => {
+  return <Client mobile={true} />;
+};
+
+const DesktopProfileUsagePage = async () => {
+  return <Client mobile={false} />;
+};
+
+export { DesktopProfileUsagePage,MobileProfileUsagePage };

package/src/app/[variants]/(main)/settings/_layout/Desktop/Header.tsx

@@ -5,10 +5,10 @@ import { ChatHeader } from '@lobehub/ui/chat';
 import { Drawer, type DrawerProps } from 'antd';
 import { createStyles } from 'antd-style';
 import { Menu } from 'lucide-react';
-import { useSearchParams } from 'next/navigation';
 import { ReactNode, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useSearchParams } from 'react-router-dom';
 
 import BrandWatermark from '@/components/BrandWatermark';
 import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
@@ -40,7 +40,7 @@ const Header = memo<HeaderProps>(({ children, getContainer, title }) => {
   const activeKey = useActiveSettingsKey();
   const providerName = useProviderName(activeKey);
 
-  const search = useSearchParams();
+  const [search] = useSearchParams();
   const active = search.get('active');
   const { t } = useTranslation('setting');
 

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

@@ -1,12 +1,11 @@
 'use client';
 
 import { useResponsive, useTheme } from 'antd-style';
-import { parseAsStringEnum, useQueryState } from 'nuqs';
 import { memo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import InitClientDB from '@/features/InitClientDB';
 import SettingContainer from '@/features/Setting/SettingContainer';
+import { parseAsStringEnum, useQueryParam } from '@/hooks/useQueryParam';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import CategoryContent from '../CategoryContent';
@@ -15,13 +14,12 @@ import { LayoutProps } from '../type';
 import Header from './Header';
 import SideBar from './SideBar';
 
-const Layout = memo<LayoutProps>((props) => {
-  const { showLLM = true } = props;
+const Layout = memo<LayoutProps>(() => {
   const ref = useRef<HTMLDivElement | null>(null);
   const { md = true } = useResponsive();
   const theme = useTheme();
 
-  const [activeTab, setActiveTab] = useQueryState(
+  const [activeTab, setActiveTab] = useQueryParam(
     'active',
     parseAsStringEnum(Object.values(SettingsTabs)).withDefault(SettingsTabs.Common),
   );
@@ -41,9 +39,8 @@ const Layout = memo<LayoutProps>((props) => {
         <Header getContainer={() => ref.current!}>{category}</Header>
       )}
       <SettingContainer maxWidth={'none'}>
-        <SettingsContent activeTab={activeTab} mobile={false} showLLM={showLLM} />
+        <SettingsContent activeTab={activeTab} mobile={false} />
       </SettingContainer>
-      <InitClientDB />
     </Flexbox>
   );
 });

package/src/app/[variants]/(main)/settings/_layout/DesktopWrapper.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { memo } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import SettingsContextProvider from './ContextProvider';
+
+const DesktopSettingsWrapper = memo(() => {
+  return (
+    <SettingsContextProvider
+      value={{
+        showOpenAIApiKey: true,
+        showOpenAIProxyUrl: true,
+      }}
+    >
+      <Outlet />
+    </SettingsContextProvider>
+  );
+});
+
+DesktopSettingsWrapper.displayName = 'DesktopSettingsWrapper';
+
+export default DesktopSettingsWrapper;

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

@@ -1,23 +1,22 @@
 'use client';
 
 import { ChatHeader } from '@lobehub/ui/mobile';
-import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { enableAuth } from '@/const/auth';
-import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { SettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
+import { useNavigate } from 'react-router-dom';
 
 const Header = memo(() => {
   const { t } = useTranslation('setting');
-  const router = useQueryRoute();
   const showMobileWorkspace = useShowMobileWorkspace();
-
+  const navigate = useNavigate();
   const [activeSettingsKey, setActiveSettingsKey] = useQueryState('active');
   const [providerName, setProviderName] = useQueryState('provider');
 
@@ -25,13 +24,15 @@ const Header = memo(() => {
   const isProvider = providerName ? true : false;
 
   const handleBackClick = () => {
+    console.log('gobackclick', isSessionActive, showMobileWorkspace, activeSettingsKey, providerName);
     if (isSessionActive && showMobileWorkspace) {
-      router.push('/chat');
-    } else if (activeSettingsKey === 'provider' && providerName !== null) {
+      navigate('/chat');
+    } else if (activeSettingsKey === 'provider' && providerName) {
       setProviderName(null);
       setActiveSettingsKey('provider');
+      navigate(-1);
     } else {
-      router.push(enableAuth ? '/me/settings' : '/me');
+      navigate(enableAuth ? '/me/settings' : '/me');
     }
   };
 

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

@@ -1,25 +1,20 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
-
 import MobileContentLayout from '@/components/server/MobileNavLayout';
-import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
+import { parseAsString, useQueryState } from '@/hooks/useQueryParam';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import SettingsContent from '../SettingsContent';
 import Header from './Header';
 
 const Layout = () => {
-  const [activeTab] = useQueryState('active', {
-    defaultValue: SettingsTabs.Common,
-  });
+  const [activeTab] = useQueryState('active', parseAsString.withDefault(SettingsTabs.Common));
 
   return (
     <MobileContentLayout header={<Header />}>
       <SettingsContent activeTab={activeTab} mobile={true} />
       <Footer />
-      <InitClientDB />
     </MobileContentLayout>
   );
 };

package/src/app/[variants]/(main)/settings/_layout/MobileWrapper.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { memo } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import SettingsContextProvider from './ContextProvider';
+
+const MobileSettingsWrapper = memo(() => {
+  return (
+    <SettingsContextProvider
+      value={{
+        showOpenAIApiKey: true,
+        showOpenAIProxyUrl: true,
+      }}
+    >
+      <Outlet />
+    </SettingsContextProvider>
+  );
+});
+
+MobileSettingsWrapper.displayName = 'MobileSettingsWrapper';
+
+export default MobileSettingsWrapper;

package/src/app/[variants]/(main)/settings/_layout/SettingsContent.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { notFound } from 'next/navigation';
 import React, { CSSProperties } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -44,18 +43,9 @@ const componentMap = {
 interface SettingsContentProps {
   activeTab?: string;
   mobile?: boolean;
-  showLLM?: boolean;
 }
 
-const SettingsContent = ({ mobile, activeTab, showLLM = true }: SettingsContentProps) => {
-  const shouldRenderLLMTabs = (tab: string) => {
-    const isLLMTab =
-      tab === SettingsTabs.LLM || tab === SettingsTabs.Provider || tab === SettingsTabs.Agent;
-    return showLLM || !isLLMTab;
-  };
-  if (activeTab && !shouldRenderLLMTabs(activeTab)) {
-    notFound();
-  }
+const SettingsContent = ({ mobile, activeTab }: SettingsContentProps) => {
   const renderComponent = (tab: string) => {
     const Component = componentMap[tab as keyof typeof componentMap] || componentMap.common;
     if (!Component) return null;
@@ -88,7 +78,6 @@ const SettingsContent = ({ mobile, activeTab, showLLM = true }: SettingsContentP
   return (
     <Flexbox height={'100%'} width={'100%'}>
       {Object.keys(componentMap).map((tabKey) => {
-        if (!shouldRenderLLMTabs(tabKey)) return null;
         return (
           <div key={tabKey} style={getDisplayStyle(tabKey)}>
             {activeTab === tabKey && renderComponent(tabKey)}

package/src/app/[variants]/(main)/settings/_layout/type.ts

@@ -2,5 +2,4 @@ import { ReactNode } from 'react';
 
 export interface LayoutProps {
   children?: ReactNode;
-  showLLM?: boolean
 }

package/src/app/[variants]/(main)/settings/agent/AgentMenu/Menu.tsx

@@ -1,15 +1,13 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 
 import { AgentCategory } from '@/features/AgentSetting';
+import { parseAsString, useQueryState } from '@/hooks/useQueryParam';
 import { ChatSettingsTabs } from '@/store/global/initialState';
 
 const Menu = memo(() => {
-  const [tab, setTab] = useQueryState('tab', {
-    defaultValue: ChatSettingsTabs.Prompt,
-  });
+  const [tab, setTab] = useQueryState('tab', parseAsString.withDefault(ChatSettingsTabs.Prompt));
 
   return <AgentCategory setTab={setTab} tab={tab} />;
 });