✨ feat: support detect new version and upgrade action (#282)

lobehub · Oct 10, 2023 · 5da19b2 · 5da19b2
1 parent fa06c3f
commit 5da19b2
Show file tree

Hide file tree

Showing 14 changed files with 201 additions and 91 deletions.
diff --git a/locales/en_US/common.json b/locales/en_US/common.json
@@ -94,5 +94,10 @@
   },
   "updateAgent": "Update Agent Information",
   "updatePrompt": "Update Prompts",
+  "upgradeVersion": {
+    "action": "Upgrade Now",
+    "hasNew": "New Update Available",
+    "newVersion": "New version available: {{version}}"
+  },
   "warp": "Line break"
 }
diff --git a/locales/ru_RU/common.json b/locales/ru_RU/common.json
@@ -94,5 +94,10 @@
   },
   "updateAgent": "Обновление информации о помощнике",
   "updatePrompt": "Обновление подсказок",
+  "upgradeVersion": {
+    "action": "Обновить сейчас",
+    "hasNew": "Доступно обновление",
+    "newVersion": "Доступна новая версия: {{version}}"
+  },
   "warp": "Разрыв строки"
 }
diff --git a/locales/zh_CN/common.json b/locales/zh_CN/common.json
@@ -94,5 +94,10 @@
   },
   "updateAgent": "更新助理信息",
   "updatePrompt": "更新提示词",
+  "upgradeVersion": {
+    "action": "立即升级",
+    "hasNew": "有可用更新",
+    "newVersion": "有新版本可用：{{version}}"
+  },
   "warp": "换行"
 }
diff --git a/locales/zh_TW/common.json b/locales/zh_TW/common.json
@@ -94,5 +94,10 @@
   },
   "updateAgent": "更新助理資訊",
   "updatePrompt": "更新提示",
+  "upgradeVersion": {
+    "action": "立即升級",
+    "hasNew": "有可用更新",
+    "newVersion": "有新版本可用：{{version}}"
+  },
   "warp": "換行"
 }
diff --git a/package.json b/package.json
@@ -107,6 +107,7 @@
     "remark": "^14",
     "remark-gfm": "^3",
     "remark-html": "^15",
+    "semver": "^7",
     "swr": "^2",
     "systemjs": "^6",
     "ts-md5": "^1",
@@ -132,6 +133,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/semver": "^7",
     "@types/systemjs": "^6",
     "@types/ua-parser-js": "^0.7",
     "@types/uuid": "^9",

diff --git a/src/app/settings/(mobile)/mobile/index.tsx b/src/app/settings/(mobile)/mobile/index.tsx
@@ -5,8 +5,8 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Center } from 'react-layout-kit';
 
-import pkg from '@/../package.json';
 import AgentCardBanner from '@/app/market/features/AgentCard/AgentCardBanner';
+import { CURRENT_VERSION } from '@/const/version';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { useGlobalStore, useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
@@ -50,7 +50,7 @@ const Setting = memo(() => {
         <ExtraList />
         <Center style={{ paddingInline: 64 }}>
           <Divider>
-            <span className={styles.footer}>LobeChat v{pkg.version}</span>
+            <span className={styles.footer}>LobeChat v{CURRENT_VERSION}</span>
           </Divider>
         </Center>
       </div>

diff --git a/src/app/settings/features/SideBar/index.tsx b/src/app/settings/features/SideBar/index.tsx
@@ -5,6 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import FolderPanel from '@/features/FolderPanel';
 
+import UpgradeAlert from '../UpgradeAlert';
 import List from './List';
 
 const useStyles = createStyles(({ stylish, token, css }) => ({
@@ -29,6 +30,7 @@ const SideBar = memo(() => {
             <Logo className={styles.logo} size={36} type={'text'} />
           </div>
         </Flexbox>
+        <UpgradeAlert />
         <List />
       </DraggablePanelBody>
     </FolderPanel>

diff --git a/src/app/settings/features/UpgradeAlert.tsx b/src/app/settings/features/UpgradeAlert.tsx
@@ -0,0 +1,32 @@
+import { Alert, Button } from 'antd';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { MANUAL_UPGRADE_URL } from '@/const/version';
+import { useGlobalStore } from '@/store/global';
+
+const UpgradeAlert = memo(() => {
+  const [hasNewVersion, latestVersion] = useGlobalStore((s) => [s.hasNewVersion, s.latestVersion]);
+  const { t } = useTranslation('common');
+
+  return (
+    hasNewVersion && (
+      <Alert
+        action={
+          <Link href={MANUAL_UPGRADE_URL} target={'_blank'}>
+            <Button size={'small'} type={'primary'}>
+              {t('upgradeVersion.action')}
+            </Button>
+          </Link>
+        }
+        banner
+        closable
+        message={t('upgradeVersion.newVersion', { version: latestVersion })}
+        type={'info'}
+      />
+    )
+  );
+});
+
+export default UpgradeAlert;
diff --git a/src/const/version.ts b/src/const/version.ts
@@ -0,0 +1,6 @@
+import pkg from '@/../package.json';
+
+export const CURRENT_VERSION = pkg.version;
+
+export const MANUAL_UPGRADE_URL =
+  'https://github.com/lobehub/lobe-chat/blob/main/docs/Upstream-Sync.md';
diff --git a/src/features/SideBar/BottomActions.tsx b/src/features/SideBar/BottomActions.tsx
@@ -1,5 +1,5 @@
 import { ActionIcon, DiscordIcon, Icon } from '@lobehub/ui';
-import { Dropdown, MenuProps, Upload } from 'antd';
+import { Badge, ConfigProvider, Dropdown, MenuProps, Upload } from 'antd';
 import {
   Feather,
   FileClock,
@@ -11,13 +11,14 @@ import {
   Settings2,
 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { ABOUT, CHANGELOG, DISCORD, FEEDBACK, GITHUB } from '@/const/url';
 import { useExportConfig } from '@/hooks/useExportConfig';
 import { useImportConfig } from '@/hooks/useImportConfig';
-import { GlobalStore } from '@/store/global';
+import { GlobalStore, useGlobalStore } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 export interface BottomActionProps {
@@ -31,83 +32,91 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
   const { exportSessions, exportSettings, exportAll, exportAgents } = useExportConfig();
   const { importConfig } = useImportConfig();
 
-  const items: MenuProps['items'] = useMemo(
-    () => [
-      {
-        icon: <Icon icon={HardDriveUpload} />,
-        key: 'import',
-        label: (
-          <Upload maxCount={1} onChange={importConfig} showUploadList={false}>
-            {t('import')}
-          </Upload>
-        ),
-      },
-      {
-        children: [
-          {
-            key: 'allAgent',
-            label: <div>{t('exportType.allAgent')}</div>,
-            onClick: exportAgents,
-          },
-          {
-            key: 'allAgentWithMessage',
-            label: <div>{t('exportType.allAgentWithMessage')}</div>,
-            onClick: exportSessions,
-          },
-          {
-            key: 'globalSetting',
-            label: <div>{t('exportType.globalSetting')}</div>,
-            onClick: exportSettings,
-          },
-          {
-            type: 'divider',
-          },
-          {
-            key: 'all',
-            label: <div>{t('exportType.all')}</div>,
-            onClick: exportAll,
-          },
-        ],
-        icon: <Icon icon={HardDriveDownload} />,
-        key: 'export',
-        label: t('export'),
-      },
-      {
-        type: 'divider',
-      },
-      {
-        icon: <Icon icon={Feather} />,
-        key: 'feedback',
-        label: t('feedback'),
-        onClick: () => window.open(FEEDBACK, '__blank'),
-      },
-      {
-        icon: <Icon icon={FileClock} />,
-        key: 'changelog',
-        label: t('changelog'),
-        onClick: () => window.open(CHANGELOG, '__blank'),
-      },
-      {
-        icon: <Icon icon={Heart} />,
-        key: 'about',
-        label: t('about'),
-        onClick: () => window.open(ABOUT, '__blank'),
-      },
-      {
-        type: 'divider',
-      },
-      {
-        icon: <Icon icon={Settings} />,
-        key: 'setting',
-        label: t('setting'),
-        onClick: () => {
-          setTab(SidebarTabKey.Setting);
-          router.push('/settings/common');
+  const [hasNewVersion, useCheckLatestVersion] = useGlobalStore((s) => [
+    s.hasNewVersion,
+    s.useCheckLatestVersion,
+  ]);
+
+  useCheckLatestVersion();
+
+  const items: MenuProps['items'] = [
+    {
+      icon: <Icon icon={HardDriveUpload} />,
+      key: 'import',
+      label: (
+        <Upload maxCount={1} onChange={importConfig} showUploadList={false}>
+          {t('import')}
+        </Upload>
+      ),
+    },
+    {
+      children: [
+        {
+          key: 'allAgent',
+          label: <div>{t('exportType.allAgent')}</div>,
+          onClick: exportAgents,
+        },
+        {
+          key: 'allAgentWithMessage',
+          label: <div>{t('exportType.allAgentWithMessage')}</div>,
+          onClick: exportSessions,
+        },
+        {
+          key: 'globalSetting',
+          label: <div>{t('exportType.globalSetting')}</div>,
+          onClick: exportSettings,
         },
+        {
+          type: 'divider',
+        },
+        {
+          key: 'all',
+          label: <div>{t('exportType.all')}</div>,
+          onClick: exportAll,
+        },
+      ],
+      icon: <Icon icon={HardDriveDownload} />,
+      key: 'export',
+      label: t('export'),
+    },
+    {
+      type: 'divider',
+    },
+    {
+      icon: <Icon icon={Feather} />,
+      key: 'feedback',
+      label: t('feedback'),
+      onClick: () => window.open(FEEDBACK, '__blank'),
+    },
+    {
+      icon: <Icon icon={FileClock} />,
+      key: 'changelog',
+      label: t('changelog'),
+      onClick: () => window.open(CHANGELOG, '__blank'),
+    },
+    {
+      icon: <Icon icon={Heart} />,
+      key: 'about',
+      label: t('about'),
+      onClick: () => window.open(ABOUT, '__blank'),
+    },
+    {
+      type: 'divider',
+    },
+    {
+      icon: <Icon icon={Settings} />,
+      key: 'setting',
+      label: (
+        <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal>
+          {t('setting')} {hasNewVersion && <Badge count={t('upgradeVersion.hasNew')} />}
+        </Flexbox>
+      ),
+      onClick: () => {
+        setTab(SidebarTabKey.Setting);
+        router.push('/settings/common');
       },
-    ],
-    [],
-  );
+    },
+  ];
 
   return (
     <>
@@ -124,7 +133,17 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
         title={'Github'}
       />
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-        <ActionIcon active={tab === SidebarTabKey.Setting} icon={Settings2} />
+        {hasNewVersion ? (
+          <Flexbox>
+            <ConfigProvider theme={{ components: { Badge: { dotSize: 8 } } }}>
+              <Badge dot offset={[-4, 4]}>
+                <ActionIcon active={tab === SidebarTabKey.Setting} icon={Settings2} />
+              </Badge>
+            </ConfigProvider>
+          </Flexbox>
+        ) : (
+          <ActionIcon active={tab === SidebarTabKey.Setting} icon={Settings2} />
+        )}
       </Dropdown>
     </>
   );

diff --git a/src/locales/default/common.ts b/src/locales/default/common.ts
@@ -96,5 +96,10 @@ export default {
   },
   updateAgent: '更新助理信息',
   updatePrompt: '更新提示词',
+  upgradeVersion: {
+    action: '立即升级',
+    hasNew: '有可用更新',
+    newVersion: '有新版本可用：{{version}}',
+  },
   warp: '换行',
 };
diff --git a/src/services/latestVersion.ts b/src/services/latestVersion.ts
@@ -1 +1,11 @@
-fetch('https://registry.npmmirror.com/@lobehub/chat');
+const VERSION_URL = 'https://registry.npmmirror.com/@lobehub/chat';
+
+/**
+ * get latest version from npm
+ */
+export const featLatestVersion = async (): Promise<string> => {
+  const res = await fetch(VERSION_URL);
+  const data = await res.json();
+
+  return data['dist-tags']?.latest;
+};