@lobehub/chat 1.76.0 → 1.77.0

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/app/[variants]/(main)/settings/tts/features/const.tsx

@@ -4,6 +4,10 @@ import { SelectProps } from 'antd';
 import { LabelRenderer } from '@/components/ModelSelect';
 
 export const opeanaiTTSOptions: SelectProps['options'] = [
+  {
+    label: <LabelRenderer Icon={OpenAI.Avatar} label={'gpt-4o-mini-tts'} />,
+    value: 'gpt-4o-mini-tts',
+  },
   {
     label: <LabelRenderer Icon={OpenAI.Avatar} label={'tts-1'} />,
     value: 'tts-1',

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;

package/src/config/aiModels/openai.ts

@@ -480,6 +480,16 @@ export const openaiTTSModels: AITTSModelCard[] = [
     },
     type: 'tts',
   },
+  {
+    description:
+      'GPT-4o mini TTS 是一个基于 GPT-4o mini 构建的文本转语音模型，这是一种快速且强大的语言模型。使用它可以将文本转换为自然听起来的语音文本。最大输入标记数为 2000。',
+    displayName: 'GPT-4o Mini TTS',
+    id: 'gpt-4o-mini-tts',
+    pricing: {
+      input: 10,
+    },
+    type: 'tts',
+  },
 ];
 
 // 语音识别模型