@lobehub/chat 1.76.1 → 1.77.0

package/locales/zh-TW/setting.json

@@ -346,6 +346,33 @@
     },
     "title": "主題設定"
   },
+  "storage": {
+    "actions": {
+      "export": {
+        "button": "匯出",
+        "exportType": {
+          "agent": "匯出助手設定",
+          "agentWithMessage": "匯出助手和訊息",
+          "all": "匯出全域設定和所有助手資料",
+          "allAgent": "匯出所有助手設定",
+          "allAgentWithMessage": "匯出所有助手和訊息",
+          "globalSetting": "匯出全域設定"
+        },
+        "title": "匯出資料"
+      },
+      "import": {
+        "button": "匯入",
+        "title": "匯入資料"
+      },
+      "title": "進階操作"
+    },
+    "desc": "當前瀏覽器中的儲存用量",
+    "embeddings": {
+      "used": "向量儲存"
+    },
+    "title": "資料儲存",
+    "used": "儲存用量"
+  },
   "submitAgentModal": {
     "button": "提交助手",
     "identifier": "助手標識符",
@@ -439,6 +466,7 @@
     "hotkey": "快速鍵",
     "llm": "語言模型",
     "provider": "AI 服務商",
+    "storage": "資料儲存",
     "sync": "雲端同步",
     "system-agent": "系統助手",
     "tts": "語音服務"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.76.1",
+  "version": "1.77.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/[variants]/(main)/(mobile)/me/data/features/Category.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import Cell, { CellProps } from '@/components/Cell';
 import DataImporter from '@/features/DataImporter';
-import { configService } from '@/services/config';
+import { configService } from '@/services/export/_deprecated';
 
 const Category = memo(() => {
   const { t } = useTranslation('common');

package/src/app/[variants]/(main)/chat/features/Migration/UpgradeButton.tsx

@@ -2,7 +2,7 @@ import { Button } from 'antd';
 import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { configService } from '@/services/config';
+import { ClientService } from '@/services/import/_deprecated';
 import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
 
@@ -31,6 +31,7 @@ const UpgradeButton = memo<UpgradeButtonProps>(
       try {
         setUpgradeStatus(UpgradeStatus.UPGRADING);
 
+        const configService = new ClientService();
         await configService.importConfigState({
           exportType: 'sessions',
           state: state,

package/src/app/[variants]/(main)/settings/common/features/Common.tsx

@@ -9,12 +9,8 @@ import { useTranslation } from 'react-i18next';
 import { useSyncSettings } from '@/app/[variants]/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
-import { useChatStore } from '@/store/chat';
-import { useFileStore } from '@/store/file';
 import { useServerConfigStore } from '@/store/serverConfig';
 import { serverConfigSelectors } from '@/store/serverConfig/selectors';
-import { useSessionStore } from '@/store/session';
-import { useToolStore } from '@/store/tool';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
@@ -26,16 +22,6 @@ const Common = memo(() => {
 
   const showAccessCodeConfig = useServerConfigStore(serverConfigSelectors.enabledAccessCode);
 
-  const [clearSessions, clearSessionGroups] = useSessionStore((s) => [
-    s.clearSessions,
-    s.clearSessionGroups,
-  ]);
-  const [clearTopics, clearAllMessages] = useChatStore((s) => [
-    s.removeAllTopics,
-    s.clearAllMessages,
-  ]);
-  const [removeAllFiles] = useFileStore((s) => [s.removeAllFiles]);
-  const removeAllPlugins = useToolStore((s) => s.removeAllPlugins);
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const [setSettings, resetSettings] = useUserStore((s) => [s.setSettings, s.resetSettings]);
 
@@ -54,26 +40,6 @@ const Common = memo(() => {
     });
   }, []);
 
-  const handleClear = useCallback(() => {
-    modal.confirm({
-      centered: true,
-      okButtonProps: {
-        danger: true,
-      },
-      onOk: async () => {
-        await clearSessions();
-        await removeAllPlugins();
-        await clearTopics();
-        await removeAllFiles();
-        await clearAllMessages();
-        await clearSessionGroups();
-
-        message.success(t('danger.clear.success'));
-      },
-      title: t('danger.clear.confirm'),
-    });
-  }, []);
-
   const system: SettingItemGroup = {
     children: [
       {
@@ -98,16 +64,6 @@ const Common = memo(() => {
         label: t('danger.reset.title'),
         minWidth: undefined,
       },
-      {
-        children: (
-          <Button danger onClick={handleClear} type="primary">
-            {t('danger.clear.action')}
-          </Button>
-        ),
-        desc: t('danger.clear.desc'),
-        label: t('danger.clear.title'),
-        minWidth: undefined,
-      },
     ],
     title: t('settingSystem.title'),
   };

package/src/app/[variants]/(main)/settings/hooks/useCategory.tsx

@@ -1,6 +1,16 @@
 import { Icon } from '@lobehub/ui';
 import { Tag } from 'antd';
-import { Bot, Brain, Cloudy, Info, KeyboardIcon, Mic2, Settings2, Sparkles } from 'lucide-react';
+import {
+  Bot,
+  Brain,
+  Cloudy,
+  Database,
+  Info,
+  KeyboardIcon,
+  Mic2,
+  Settings2,
+  Sparkles,
+} from 'lucide-react';
 import Link from 'next/link';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -30,14 +40,15 @@ export const useCategory = () => {
           ),
         },
         {
-          icon: <Icon icon={Sparkles} />,
-          key: SettingsTabs.SystemAgent,
+          icon: <Icon icon={Bot} />,
+          key: SettingsTabs.Agent,
           label: (
-            <Link href={'/settings/system-agent'} onClick={(e) => e.preventDefault()}>
-              {t('tab.system-agent')}
+            <Link href={'/settings/agent'} onClick={(e) => e.preventDefault()}>
+              {t('tab.agent')}
             </Link>
           ),
         },
+        // TODO: remove in V2
         enableWebrtc && {
           icon: <Icon icon={Cloudy} />,
           key: SettingsTabs.Sync,
@@ -52,6 +63,18 @@ export const useCategory = () => {
             </Link>
           ),
         },
+        !mobile && {
+          icon: <Icon icon={KeyboardIcon} />,
+          key: SettingsTabs.Hotkey,
+          label: (
+            <Link href={'/settings/hotkey'} onClick={(e) => e.preventDefault()}>
+              {t('tab.hotkey')}
+            </Link>
+          ),
+        },
+        {
+          type: 'divider',
+        },
         showLLM &&
           // TODO: Remove /llm when v2.0
           (isDeprecatedEdition
@@ -84,20 +107,23 @@ export const useCategory = () => {
           ),
         },
         {
-          icon: <Icon icon={Bot} />,
-          key: SettingsTabs.Agent,
+          icon: <Icon icon={Sparkles} />,
+          key: SettingsTabs.SystemAgent,
           label: (
-            <Link href={'/settings/agent'} onClick={(e) => e.preventDefault()}>
-              {t('tab.agent')}
+            <Link href={'/settings/system-agent'} onClick={(e) => e.preventDefault()}>
+              {t('tab.system-agent')}
             </Link>
           ),
         },
-        !mobile && {
-          icon: <Icon icon={KeyboardIcon} />,
-          key: SettingsTabs.Hotkey,
+        {
+          type: 'divider',
+        },
+        {
+          icon: <Icon icon={Database} />,
+          key: SettingsTabs.Storage,
           label: (
-            <Link href={'/settings/hotkey'} onClick={(e) => e.preventDefault()}>
-              {t('tab.hotkey')}
+            <Link href={'/settings/storage'} onClick={(e) => e.preventDefault()}>
+              {t('tab.storage')}
             </Link>
           ),
         },

package/src/app/[variants]/(main)/settings/storage/Advanced.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { Form, Icon, type ItemGroup } from '@lobehub/ui';
+import { App, Button, Dropdown, Space } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { ChevronDown, HardDriveDownload, HardDriveUpload } from 'lucide-react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import DataImporter from '@/features/DataImporter';
+import { configService } from '@/services/config';
+import { useChatStore } from '@/store/chat';
+import { useFileStore } from '@/store/file';
+import { useSessionStore } from '@/store/session';
+import { useToolStore } from '@/store/tool';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+
+const AdvancedActions = () => {
+  const { t } = useTranslation('setting');
+  const [form] = Form.useForm();
+  const { message, modal } = App.useApp();
+  const [clearSessions, clearSessionGroups] = useSessionStore((s) => [
+    s.clearSessions,
+    s.clearSessionGroups,
+  ]);
+  const [clearTopics, clearAllMessages] = useChatStore((s) => [
+    s.removeAllTopics,
+    s.clearAllMessages,
+  ]);
+  const [removeAllFiles] = useFileStore((s) => [s.removeAllFiles]);
+  const removeAllPlugins = useToolStore((s) => s.removeAllPlugins);
+  const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
+
+  const handleClear = useCallback(() => {
+    modal.confirm({
+      centered: true,
+      okButtonProps: {
+        danger: true,
+      },
+      onOk: async () => {
+        await clearSessions();
+        await removeAllPlugins();
+        await clearTopics();
+        await removeAllFiles();
+        await clearAllMessages();
+        await clearSessionGroups();
+
+        message.success(t('danger.clear.success'));
+      },
+      title: t('danger.clear.confirm'),
+    });
+  }, []);
+
+  const system: ItemGroup = {
+    children: [
+      {
+        children: (
+          <DataImporter>
+            <Button icon={<Icon icon={HardDriveDownload} />}>
+              {t('storage.actions.import.button')}
+            </Button>
+          </DataImporter>
+        ),
+        label: t('storage.actions.import.title'),
+        minWidth: undefined,
+      },
+      {
+        children: (
+          <Space.Compact>
+            <Button
+              icon={<Icon icon={HardDriveUpload} />}
+              onClick={() => {
+                configService.exportAll();
+              }}
+            >
+              {t('storage.actions.export.button')}
+            </Button>
+            <Dropdown
+              menu={{
+                items: [
+                  {
+                    key: 'allAgent',
+                    label: t('storage.actions.export.exportType.allAgent'),
+                    onClick: configService.exportAgents,
+                  },
+                  {
+                    key: 'allAgentWithMessage',
+                    label: t('storage.actions.export.exportType.allAgentWithMessage'),
+                    onClick: configService.exportSessions,
+                  },
+                  {
+                    key: 'globalSetting',
+                    label: t('storage.actions.export.exportType.globalSetting'),
+                    onClick: configService.exportSettings,
+                  },
+                ],
+              }}
+            >
+              <Button icon={<Icon icon={ChevronDown} />} />
+            </Dropdown>
+          </Space.Compact>
+        ),
+        label: t('storage.actions.export.title'),
+        minWidth: undefined,
+      },
+      {
+        children: (
+          <Button danger onClick={handleClear} type="primary">
+            {t('danger.clear.action')}
+          </Button>
+        ),
+        desc: t('danger.clear.desc'),
+        label: t('danger.clear.title'),
+        minWidth: undefined,
+      },
+    ],
+    title: t('storage.actions.title'),
+  };
+  return (
+    <Form
+      form={form}
+      initialValues={settings}
+      items={[system]}
+      itemsType={'group'}
+      variant={'pure'}
+      {...FORM_STYLE}
+    />
+  );
+};
+
+export default AdvancedActions;

package/src/app/[variants]/(main)/settings/storage/IndexedDBStorage.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { DatabaseIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import useSWR from 'swr';
+
+import GroupIcon from '@/components/GroupIcon';
+import IndexCard from '@/components/IndexCard';
+import ProgressItem from '@/components/ProgressItem';
+import { formatSize } from '@/utils/format';
+
+const IndexedDBStorage = memo(() => {
+  const { t } = useTranslation('setting');
+  const { data, isLoading } = useSWR('fetch-client-usage', async () => {
+    const estimate = await navigator.storage.estimate();
+    const quota = estimate.quota || 0;
+    const usage = estimate.usage || 0;
+
+    const percent = (usage / quota) * 100;
+
+    return { percent: percent < 1 ? 1 : percent, total: quota, used: usage };
+  });
+
+  return (
+    <IndexCard
+      desc={t('storage.desc', { day: 15 })}
+      icon={<GroupIcon icon={DatabaseIcon} />}
+      padding={0}
+      title={t('storage.title')}
+    >
+      {isLoading ? (
+        <Flexbox padding={16}>
+          <Skeleton active paragraph={{ rows: 1, width: '100%' }} title={false} />
+          <Skeleton.Button active style={{ height: 48, width: '100%' }} />
+        </Flexbox>
+      ) : (
+        <Flexbox gap={16} paddingBlock={16}>
+          <ProgressItem
+            percent={data?.percent || 0}
+            title={t('storage.used')}
+            usage={{
+              total: data ? formatSize(data.total) : '-',
+              used: data ? formatSize(data.used) : '-',
+            }}
+          />
+        </Flexbox>
+      )}
+    </IndexCard>
+  );
+});
+
+export default IndexedDBStorage;

package/src/app/[variants]/(main)/settings/storage/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { isServerMode } from '@/const/version';
+
+import Advanced from './Advanced';
+import IndexedDBStorage from './IndexedDBStorage';
+
+const StorageEstimate = () => {
+  return (
+    <>
+      {!isServerMode && <IndexedDBStorage />}
+      <Advanced />
+    </>
+  );
+};
+
+export default StorageEstimate;

package/src/components/GroupIcon/index.tsx

@@ -0,0 +1,25 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { LucideIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  icon: css`
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 8px;
+    background: ${token.colorBgElevated};
+  `,
+}));
+
+const GroupIcon = memo<{ icon: LucideIcon }>(({ icon }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Center className={styles.icon} flex={'none'} height={40} width={40}>
+      <Icon icon={icon} size={{ fontSize: 24 }} />
+    </Center>
+  );
+});
+
+export default GroupIcon;

package/src/components/IndexCard/index.tsx

@@ -0,0 +1,143 @@
+import { ActionIcon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { ReactNode, memo } from 'react';
+import { Center, Flexbox, FlexboxProps } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token, responsive }) => ({
+  card: css`
+    position: relative;
+
+    overflow: hidden;
+
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    background: ${token.colorBgContainer};
+  `,
+  desc: css`
+    font-size: 14px;
+    line-height: 1.4;
+    color: ${token.colorTextDescription};
+    ${responsive.mobile} {
+      font-size: 12px;
+    }
+  `,
+  expend: css`
+    position: absolute;
+    inset-block-end: -12px;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 50%;
+
+    background: ${token.colorBgContainer};
+  `,
+  header: css`
+    border-block-end: 1px solid ${token.colorBorderSecondary};
+    background: ${token.colorFillQuaternary};
+  `,
+  more: css`
+    border: 1px solid ${token.colorBorderSecondary};
+  `,
+  title: css`
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 1.4;
+    ${responsive.mobile} {
+      font-size: 14px;
+    }
+  `,
+}));
+
+interface IndexCardProps extends Omit<FlexboxProps, 'title'> {
+  desc?: ReactNode;
+  expand?: boolean;
+  extra?: ReactNode;
+  icon?: ReactNode;
+  moreTooltip?: string;
+  onExpand?: () => void;
+  onMoreClick?: () => void;
+  title?: ReactNode;
+}
+
+const IndexCard = memo<IndexCardProps>(
+  ({
+    expand = true,
+    onExpand,
+    icon,
+    className,
+    onMoreClick,
+    title,
+    extra,
+    moreTooltip,
+    desc,
+    children,
+    ...rest
+  }) => {
+    const { styles } = useStyles();
+    return (
+      <Flexbox
+        style={{
+          marginBottom: !expand ? 12 : undefined,
+          position: 'relative',
+        }}
+      >
+        <Flexbox
+          className={styles.card}
+          style={{
+            paddingBottom: !expand ? 12 : undefined,
+          }}
+        >
+          {title && (
+            <Flexbox
+              align={'center'}
+              className={styles.header}
+              gap={16}
+              horizontal
+              justify={'space-between'}
+              padding={16}
+            >
+              <Flexbox align={'center'} gap={12} horizontal>
+                {icon}
+                <Flexbox>
+                  <div className={styles.title}>{title}</div>
+                  {desc && <div className={styles.desc}>{desc}</div>}
+                </Flexbox>
+              </Flexbox>
+              <Flexbox align={'center'} gap={8} horizontal>
+                {extra}
+                {onMoreClick && (
+                  <ActionIcon
+                    className={styles.more}
+                    icon={ChevronRight}
+                    onClick={onMoreClick}
+                    size={{ blockSize: 32, borderRadius: '50%', fontSize: 16 }}
+                    title={moreTooltip}
+                  />
+                )}
+              </Flexbox>
+            </Flexbox>
+          )}
+          <Flexbox className={className} gap={16} padding={16} width={'100%'} {...rest}>
+            {children}
+          </Flexbox>
+        </Flexbox>
+        {!expand && (
+          <Center className={styles.expend} height={24} width={24}>
+            <ActionIcon
+              icon={ChevronDown}
+              onClick={onExpand}
+              size={{ blockSize: 24, borderRadius: '50%', fontSize: 16 }}
+            />
+          </Center>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+IndexCard.displayName = 'IndexCard';
+
+export default IndexCard;

package/src/components/ProgressItem/index.tsx

@@ -0,0 +1,75 @@
+import { Progress } from 'antd';
+import { createStyles, useResponsive } from 'antd-style';
+import { CSSProperties, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  desc: css`
+    height: 20px;
+    font-size: 12px;
+    line-height: 20px;
+    color: ${token.colorTextTertiary};
+  `,
+  title: css`
+    font-size: 15px;
+    font-weight: bold;
+    color: ${token.colorTextSecondary};
+  `,
+}));
+
+interface ProgressItemProps {
+  className?: string;
+  desc?: string;
+  legend?: string;
+  padding?: number;
+  percent: number;
+  style?: CSSProperties;
+  title: string;
+  usage: {
+    total: string | number;
+    used: string | number;
+  };
+}
+
+const ProgressItem = memo<ProgressItemProps>(
+  ({ legend, title, desc, usage, percent, style, className }) => {
+    const { mobile } = useResponsive();
+    const { styles, theme } = useStyles();
+
+    return (
+      <Flexbox className={className} paddingInline={16} style={style} width={'100%'}>
+        <Flexbox align={'center'} horizontal justify={'space-between'} width={'100%'}>
+          <Flexbox align={'center'} gap={8} horizontal>
+            {legend && (
+              <Flexbox
+                height={8}
+                style={{
+                  background: theme.geekblue,
+                  borderRadius: '50%',
+                  flex: 'none',
+                }}
+                width={8}
+              />
+            )}
+            <Flexbox align={'baseline'} gap={mobile ? 0 : 8} horizontal={!mobile}>
+              <div className={styles.title}>{title}</div>
+              {desc && <div className={styles.desc}>{desc}</div>}
+            </Flexbox>
+          </Flexbox>
+          <div>
+            <span style={{ fontWeight: 'bold' }}>{usage.used}</span>
+            {['', '/', usage.total].join(' ')}
+          </div>
+        </Flexbox>
+        <Progress
+          percent={percent}
+          showInfo={false}
+          size={'small'}
+          strokeColor={theme.colorPrimary}
+        />
+      </Flexbox>
+    );
+  },
+);
+
+export default ProgressItem;